Issue 1082 - Use Element.getBoundingClientRect() to position overlays

include.postload.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-2015 Eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ skipping 217 matching lines @@
 
   // We only generate filters based on the "style" attribute,
   // if this is the only way we can generate a filter, and
   // only if there are at least two CSS properties defined.
   if (/:.+:/.test(element.getAttribute("style")))
     return true;
 
   return false;
 }
 
-// Gets the absolute position of an element by walking up the DOM tree,
-// adding up offsets.
-// I hope there's a better way because it just seems absolutely stupid
-// that the DOM wouldn't have a direct way to get this, given that it
-// has hundreds and hundreds of other methods that do random junk.
-function getAbsolutePosition(elt) {
-  var l = 0;
-  var t = 0;
-  for(; elt; elt = elt.offsetParent) {
-    l += elt.offsetLeft;
-    t += elt.offsetTop;
-  }
-  return [l, t];
-}
-
 // Adds an overlay to an element, which is probably a Flash object
 function addElementOverlay(elt) {
   var zIndex = "auto";
   var position = "absolute";
 
   for (var e = elt; e; e = e.parentElement)
   {
     var style = getComputedStyle(e);
 
     // If the element isn't rendered (since its or one of its ancestor's
@@ skipping 16 matching lines @@
         zIndex = style.zIndex;
       else
         zIndex = Math.max(zIndex, style.zIndex);
     }
   }
 
   var overlay = document.createElement('div');
   overlay.prisoner = elt;
   overlay.className = "__adblockplus__overlay";
   overlay.setAttribute('style', 'opacity:0.4; display:inline-box; overflow:hidden; box-sizing:border-box;');
-  var pos = getAbsolutePosition(elt);
-  overlay.style.width = elt.offsetWidth + "px";
-  overlay.style.height = elt.offsetHeight + "px";
-  overlay.style.left = pos[0] + "px";
-  overlay.style.top = pos[1] + "px";
+  var rect = elt.getBoundingClientRect();
+  overlay.style.width = rect.width + "px";
+  overlay.style.height = rect.height + "px";
+  overlay.style.left = (rect.left + window.scrollX) + "px";
+  overlay.style.top = (rect.top + window.scrollY) + "px";
   overlay.style.position = position;
   overlay.style.zIndex = zIndex;
 
   // elt.parentNode.appendChild(overlay, elt);
   document.body.appendChild(overlay);
   return overlay;
 }
 
 // Show dialog asking user whether she wants to add the proposed filters derived
 // from selected page element
@@ skipping 425 matching lines @@
           lastRightClickEventValid = false;
         else
           lastRightClickEvent = null;
         break;
     }
   });
 
   if (window == window.top)
     ext.backgroundPage.sendMessage({type: "report-html-page"});
 }