Merge pull request #13288 from Worie/worie/13274-lp-highlight-transform

Fix #13274 - make Brackets margin/padding remoteHighlight work like Chrome one
adobe · Apr 10, 2017 · 53afc8b · 53afc8b
2 parents 7adf634 + 66259dc
commit 53afc8b
Showing 1 changed file with 30 additions and 12 deletions.
diff --git a/src/LiveDevelopment/Agents/RemoteFunctions.js b/src/LiveDevelopment/Agents/RemoteFunctions.js
@@ -296,8 +296,15 @@ function RemoteFunctions(config, remoteWSPort) {
               bottom: elementStyling.getPropertyValue('border-bottom-width')
             };
 
-            var innerWidth = elementBounds.width - parseInt(realElBorder.left) - parseInt(realElBorder.right);
-            var innerHeight = elementBounds.height - parseInt(realElBorder.top) - parseInt(realElBorder.bottom);
+            var borderBox = elementStyling.boxSizing === 'border-box';
+
+            var innerWidth = parseInt(elementStyling.width) - parseInt(realElBorder.left) - parseInt(realElBorder.right);
+            var innerHeight = parseInt(elementStyling.height) - parseInt(realElBorder.top) - parseInt(realElBorder.bottom);
+
+            if (!borderBox) {
+                innerWidth += parseInt(elementStyling.paddingLeft) + parseInt(elementStyling.paddingRight);
+                innerHeight += parseInt(elementStyling.paddingTop) + parseInt(elementStyling.paddingBottom);
+            }
 
             var visualisations = {
                 horizontal: "left, right",
@@ -309,7 +316,7 @@ function RemoteFunctions(config, remoteWSPort) {
 
               if (visualisations.horizontal.indexOf(side) >= 0) {
                 elStyling['width'] =  elementStyling.getPropertyValue('padding-' + side);
-                elStyling['height'] = innerHeight  + "px";
+                elStyling['height'] = innerHeight + "px";
                 elStyling['top'] = realElBorder.top;
 
               } else {
@@ -336,12 +343,11 @@ function RemoteFunctions(config, remoteWSPort) {
 
             if(visualisations['horizontal'].indexOf(side) >= 0) {
               elStyling['width'] =  elementStyling.getPropertyValue('margin-' + side);
-              elStyling['height'] = elementBounds.height + margin['top'] + margin['bottom'] + "px";
-              elStyling['top'] = "-" + margin['top'] + "px";
-
+              elStyling['height'] = innerHeight + margin['top'] + margin['bottom'] + "px";
+              elStyling['top'] = -margin['top'] + "px";
             } else {
               elStyling['height'] = elementStyling.getPropertyValue('margin-' + side);  
-              elStyling['width'] = elementBounds.width + "px";
+              elStyling['width'] = innerWidth + "px";
               elStyling['left'] = 0;
             }
 
@@ -413,12 +419,23 @@ function RemoteFunctions(config, remoteWSPort) {
             highlight.className = HIGHLIGHT_CLASSNAME;
 
             var offset = _screenOffset(element);
+
+            var el = element,
+            offsetLeft = 0,
+            offsetTop  = 0;
+
+            // Probably the easiest way to get elements position without including transform
+            do {
+                offsetLeft += el.offsetLeft;
+                offsetTop  += el.offsetTop;
+                el = el.offsetParent;
+            } while(el);
 
             var stylesToSet = {
-                "left": offset.left + "px",
-                "top": offset.top + "px",
-                "width": elementBounds.width + "px",
-                "height": elementBounds.height + "px",
+                "left": offsetLeft + "px",
+                "top": offsetTop + "px",
+                "width": innerWidth + "px",
+                "height": innerHeight + "px",
                 "z-index": 2000000,
                 "margin": 0,
                 "padding": 0,
@@ -432,7 +449,8 @@ function RemoteFunctions(config, remoteWSPort) {
                 "border-width": "1px",
                 "border-color": "#00a2ff",
                 "box-shadow": "0 0 1px #fff",
-                "box-sizing": "border-box"
+                "box-sizing": "border-box",
+                "transform": elementStyling.getPropertyValue('transform')
             };
 
             var mergedStyles = Object.assign({}, stylesToSet,  config.remoteHighlight.stylesToSet);