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

[Worie]

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

[petetnt]

Change set LGTM

[petetnt]

Style nit: space between do and {

[swmitra]

LGTM. Good that the 'transform' simulation will happen now on the highlight div.

[swmitra]

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

[swmitra]

@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.

[saurabh95]

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

[Worie]

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?

[saurabh95]

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; }

[Worie]

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.

[swmitra]

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