Merge pull request #8922 from MarcelGerber/ld-hightlight-position

Fix live dev highlight being out of place in edge cases

Author: redmunds

src/LiveDevelopment/Agents/RemoteFunctions.js

@@ -71,13 +71,21 @@ function RemoteFunctions(experimental) {
     }
 
     // compute the screen offset of an element
-    function _screenOffset(element, key) {
-        var bounds = element.getBoundingClientRect();
-        if (key === "offsetLeft") {
-            return bounds.left + window.pageXOffset;
+    function _screenOffset(element) {
+        var elemBounds = element.getBoundingClientRect(),
+            body = window.document.body,
+            offsetTop,
+            offsetLeft;
+
+        if (window.getComputedStyle(body).position === "static") {
+            offsetLeft = elemBounds.left + window.pageXOffset;
+            offsetTop = elemBounds.top + window.pageYOffset;
         } else {
-            return bounds.top + window.pageYOffset;
+            var bodyBounds = body.getBoundingClientRect();
+            offsetLeft = elemBounds.left - bodyBounds.left;
+            offsetTop = elemBounds.top - bodyBounds.top;
         }
+        return { left: offsetLeft, top: offsetTop };
     }
 
     // set an event on a element
@@ -114,8 +122,9 @@ function RemoteFunctions(experimental) {
             }
 
             // compute the position on screen
-            var x = _screenOffset(this.element, "offsetLeft");
-            var y = _screenOffset(this.element, "offsetTop") + this.element.offsetHeight;
+            var offset = _screenOffset(this.element),
+                x = offset.left,
+                y = offset.top + this.element.offsetHeight;
 
             // create the container
             this.body = document.createElement("div");
@@ -239,9 +248,11 @@ function RemoteFunctions(experimental) {
 
             highlight.className = HIGHLIGHT_CLASSNAME;
 
+            var offset = _screenOffset(element);
+
             var stylesToSet = {
-                "left": _screenOffset(element, "offsetLeft") + "px",
-                "top": _screenOffset(element, "offsetTop") + "px",
+                "left": offset.left + "px",
+                "top": offset.top + "px",
                 "width": elementBounds.width + "px",
                 "height": elementBounds.height + "px",
                 "z-index": 2000000,