[CLOSED] Fix #13274 - make Brackets margin/padding remoteHighlight work like Chrome one

[core-ai-bot]

Issue by Worie
Sunday Apr 09, 2017 at 13:05 GMT
Originally opened as adobe/brackets#13288

---

This resolves the issue with highlighting a CSS transformed element.

Probably could be a little bit more efficient (do not calculate the real position via do {} while loop when the element isn't transformed by CSS) etc. But it does the job. From what I tested it acts just like the Chrome devtools inspector.

@petetnt@saurabh95

---

Worie included the following code: https://github.com/adobe/brackets/pull/13288/commits

[core-ai-bot]

Comment by swmitra
Monday Apr 10, 2017 at 09:31 GMT

---

Good work@Worie 👍 . We want more features like this from you.

[core-ai-bot]

Comment by swmitra
Monday Apr 10, 2017 at 09:39 GMT

---

@Worie I had to revert this PR as this breaks the positioning of the highlight div in case the target element is transformed with rotate function.

[core-ai-bot]

Comment by saurabh95
Monday Apr 10, 2017 at 09:40 GMT

---

The highlight area of div containing "ARCHITECTURE" is not positioned correctly.

[core-ai-bot]

Comment by Worie
Monday Apr 10, 2017 at 10:54 GMT

---

Thanks for the feedback.

I know that there was an issue with borders when transforming an element, but I haven't seen any problems with rotate@swmitra , nor I'm sure how the site provided by@saurabh95 was implemented. Can you guys please give me a snippet with code which generates those issues?

I've got a solution for border issue locally, too, so perhaps this would solve those two - shall I create another PR with my current implementation, or simply commit the changes here?

[core-ai-bot]

Comment by saurabh95
Monday Apr 10, 2017 at 11:35 GMT

---

transform-origin is used in the above site

#architecture .section-title { position: absolute; z-index: 5; -webkit-transform: rotate(90deg); -webkit-transform-origin: right bottom; transform: rotate(90deg); transform-origin: right bottom; right: 6.5%; top: 43.5%; left: auto; padding: 0 0 0 212px; margin: 0; text-transform: uppercase; }

[core-ai-bot]

Comment by Worie
Monday Apr 10, 2017 at 12:02 GMT

---

Right, this property wasn't copied from original element to the highlight div so it had to be misaligned, now it should look good (at least on OSX Sierra).
I've pushed my local changes, so I guess I'll create another PR, since this is closed/merged.

[core-ai-bot]

Comment by swmitra
Monday Apr 10, 2017 at 12:06 GMT

---

@Worie Great 👍 . You can use this branch itself, but raise a new PR.