Bug 1441465 - Measure window dimensions on grid/flex highlighter updates when the canvas is hidden; r=gl draft
authorPatrick Brosset <pbrosset@mozilla.com>
Tue, 22 May 2018 14:28:37 +0200
changeset 798089 0cfd9d1651e248cc0c3d4792a04213d0a17bee4a
parent 797960 a23b4e769ce042895cd9d743384b9603041fd612
push id110674
push userbmo:pbrosset@mozilla.com
push dateTue, 22 May 2018 12:35:16 +0000
reviewersgl
bugs1441465
milestone62.0a1
Bug 1441465 - Measure window dimensions on grid/flex highlighter updates when the canvas is hidden; r=gl MozReview-Commit-ID: GW35e9s3rLy
devtools/server/actors/highlighters/css-grid.js
devtools/server/actors/highlighters/flexbox.js
--- a/devtools/server/actors/highlighters/css-grid.js
+++ b/devtools/server/actors/highlighters/css-grid.js
@@ -25,16 +25,17 @@ const {
   createSVGNode,
   getComputedStyle,
   moveInfobar,
 } = require("./utils/markup");
 const { apply } = require("devtools/shared/layout/dom-matrix-2d");
 const {
   getCurrentZoom,
   getDisplayPixelRatio,
+  getWindowDimensions,
   setIgnoreLayoutChanges,
 } = require("devtools/shared/layout/utils");
 const { stringifyGridFragments } = require("devtools/server/actors/utils/css-grid-utils");
 const { LocalizationHelper } = require("devtools/shared/l10n");
 
 const LAYOUT_STRINGS_URI = "devtools/client/locales/layout.properties";
 const LAYOUT_L10N = new LocalizationHelper(LAYOUT_STRINGS_URI);
 
@@ -1552,26 +1553,26 @@ class CssGridHighlighter extends AutoRef
    */
   _update() {
     setIgnoreLayoutChanges(true);
 
     let root = this.getElement("root");
     let cells = this.getElement("cells");
     let areas = this.getElement("areas");
 
+    // Set the grid cells and areas fill to the current grid colour.
+    cells.setAttribute("style", `fill: ${this.color}`);
+    areas.setAttribute("style", `fill: ${this.color}`);
+
     // Hide the root element and force the reflow in order to get the proper window's
     // dimensions without increasing them.
     root.setAttribute("style", "display: none");
     this.win.document.documentElement.offsetWidth;
-
-    // Set the grid cells and areas fill to the current grid colour.
-    cells.setAttribute("style", `fill: ${this.color}`);
-    areas.setAttribute("style", `fill: ${this.color}`);
-
-    let { width, height } = this._winDimensions;
+    this._winDimensions = getWindowDimensions(this.win);
+    const { width, height } = this._winDimensions;
 
     // Updates the <canvas> element's position and size.
     // It also clear the <canvas>'s drawing context.
     updateCanvasElement(this.canvas, this._canvasPosition, this.win.devicePixelRatio);
 
     // Clear the grid area highlights.
     this.clearGridAreas();
     this.clearGridCell();
--- a/devtools/server/actors/highlighters/flexbox.js
+++ b/devtools/server/actors/highlighters/flexbox.js
@@ -19,16 +19,17 @@ const {
 const {
   CanvasFrameAnonymousContentHelper,
   createNode,
   getComputedStyle,
 } = require("./utils/markup");
 const {
   getAdjustedQuads,
   getDisplayPixelRatio,
+  getWindowDimensions
   setIgnoreLayoutChanges,
 } = require("devtools/shared/layout/utils");
 
 const FLEXBOX_LINES_PROPERTIES = {
   "edge": {
     lineDash: [12, 10]
   },
   "item": {
@@ -705,18 +706,18 @@ class FlexboxHighlighter extends AutoRef
     setIgnoreLayoutChanges(true);
 
     let root = this.getElement("root");
 
     // Hide the root element and force the reflow in order to get the proper window's
     // dimensions without increasing them.
     root.setAttribute("style", "display: none");
     this.win.document.documentElement.offsetWidth;
-
-    let { width, height } = this._winDimensions;
+    this._winDimensions = getWindowDimensions(this.win);
+    const { width, height } = this._winDimensions;
 
     // Updates the <canvas> element's position and size.
     // It also clear the <canvas>'s drawing context.
     updateCanvasElement(this.canvas, this._canvasPosition, this.win.devicePixelRatio);
 
     // Update the current matrix used in our canvas' rendering
     let { currentMatrix, hasNodeTransformations } = getCurrentMatrix(this.currentNode,
       this.win);