Bug 1351081 - added `relativeTo` to getBoxQuads, improved scrolling with fixed nodes; r=pbro
☠☠ backed out by 530358f38866 ☠ ☠
authorZER0 <zer0.kaos@gmail.com>
Tue, 29 Aug 2017 14:45:15 +0200
changeset 378011 2a69de9c73c65db3a24f2e1fe5e5ab3bd807ca4c
parent 378010 79c33fb4ac95e9d9fe99d90d2c0ee22bd76d32c2
child 378012 1fd2ed14e73a5e9485731b19b27963dd2efe0bdf
push id50149
push usermferretti@mozilla.com
push dateThu, 31 Aug 2017 16:41:43 +0000
treeherderautoland@2a69de9c73c6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1351081
milestone57.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1351081 - added `relativeTo` to getBoxQuads, improved scrolling with fixed nodes; r=pbro Now the quads are always relative to the boundary window; I also forced the update during the scrolling for the box-model, since for element with position fixed this is still needed. I also reduce a bit the maths to check if the quads are different. MozReview-Commit-ID: 93zXH0Um3Ck
devtools/server/actors/highlighters/auto-refresh.js
devtools/server/actors/highlighters/box-model.js
devtools/shared/layout/utils.js
--- a/devtools/server/actors/highlighters/auto-refresh.js
+++ b/devtools/server/actors/highlighters/auto-refresh.js
@@ -8,39 +8,37 @@ const { Cu } = require("chrome");
 const EventEmitter = require("devtools/shared/old-event-emitter");
 const { isNodeValid } = require("./utils/markup");
 const { getAdjustedQuads, getCurrentZoom,
         getWindowDimensions } = require("devtools/shared/layout/utils");
 
 // Note that the order of items in this array is important because it is used
 // for drawing the BoxModelHighlighter's path elements correctly.
 const BOX_MODEL_REGIONS = ["margin", "border", "padding", "content"];
-const QUADS_PROPS = ["p1", "p2", "p3", "p4", "bounds"];
+const QUADS_PROPS = ["p1", "p2", "p3", "p4"];
 
 function areValuesDifferent(oldValue, newValue, zoom) {
   let delta = Math.abs(oldValue.toFixed(4) - newValue.toFixed(4));
   return delta / zoom > 1 / zoom;
 }
 
 function areQuadsDifferent(oldQuads, newQuads, zoom) {
   for (let region of BOX_MODEL_REGIONS) {
     if (oldQuads[region].length !== newQuads[region].length) {
       return true;
     }
 
     for (let i = 0; i < oldQuads[region].length; i++) {
       for (let prop of QUADS_PROPS) {
-        let oldProp = oldQuads[region][i][prop];
-        let newProp = newQuads[region][i][prop];
+        let oldPoint = oldQuads[region][i][prop];
+        let newPoint = newQuads[region][i][prop];
 
-        for (let key of Object.keys(oldProp)) {
-          if (areValuesDifferent(oldProp[key], newProp[key], zoom)) {
-            return true;
-          }
-        }
+        return areValuesDifferent(oldPoint.x, newPoint.x, zoom) ||
+               areValuesDifferent(oldPoint.y, newPoint.y, zoom) ||
+               areValuesDifferent(oldPoint.w, newPoint.w, zoom);
       }
     }
   }
 
   return false;
 }
 
 /**
--- a/devtools/server/actors/highlighters/box-model.js
+++ b/devtools/server/actors/highlighters/box-model.js
@@ -346,16 +346,20 @@ class BoxModelHighlighter extends AutoRe
 
     setIgnoreLayoutChanges(false, this.highlighterEnv.window.document.documentElement);
 
     return shown;
   }
 
   _scrollUpdate() {
     this._moveInfobar();
+
+    // We need to call manually update, even when we're scrolling, since the element, or
+    // one of its ancestors, might have position fixed.
+    this._update();
   }
 
   /**
    * Hide the highlighter, the outline and the infobar.
    */
   _hide() {
     setIgnoreLayoutChanges(true);
 
--- a/devtools/shared/layout/utils.js
+++ b/devtools/shared/layout/utils.js
@@ -195,29 +195,29 @@ exports.getFrameOffsets = getFrameOffset
  *        getBoxQuads. An empty array if the node has no quads or is invalid.
  */
 function getAdjustedQuads(boundaryWindow, node, region) {
   if (!node || !node.getBoxQuads) {
     return [];
   }
 
   let quads = node.getBoxQuads({
-    box: region
+    box: region,
+    relativeTo: boundaryWindow.document
   });
 
   if (!quads.length) {
     return [];
   }
 
-  let [xOffset, yOffset] = getFrameOffsets(boundaryWindow, node);
   let scale = getCurrentZoom(node);
   let { scrollX, scrollY } = boundaryWindow;
 
-  xOffset += scrollX * scale;
-  yOffset += scrollY * scale;
+  let xOffset = scrollX * scale;
+  let yOffset = scrollY * scale;
 
   let adjustedQuads = [];
   for (let quad of quads) {
     adjustedQuads.push({
       p1: {
         w: quad.p1.w * scale,
         x: quad.p1.x * scale + xOffset,
         y: quad.p1.y * scale + yOffset,