Bug 1430919 - Enable grid highlighter writing mode support. r=gl draft
authorJ. Ryan Stinnett <jryans@gmail.com>
Mon, 12 Feb 2018 12:49:22 -0600
changeset 754050 b2ae6982239b1c7e64a281ccf207fd42685626aa
parent 753978 cc4fe98a1086ad123e7e02f98f010f719818fc10
push id98739
push userbmo:jryans@gmail.com
push dateMon, 12 Feb 2018 19:27:26 +0000
reviewersgl
bugs1430919
milestone60.0a1
Bug 1430919 - Enable grid highlighter writing mode support. r=gl As well as flipping the pref on, this also moves the pref to the common all.js prefs file because the pref is used by DevTools server code. MozReview-Commit-ID: GfkLfXg1EiR
devtools/client/inspector/grids/components/GridOutline.js
devtools/client/inspector/grids/test/head.js
devtools/client/preferences/devtools.js
devtools/server/actors/highlighters/css-grid.js
devtools/server/actors/highlighters/utils/canvas.js
--- a/devtools/client/inspector/grids/components/GridOutline.js
+++ b/devtools/client/inspector/grids/components/GridOutline.js
@@ -1,16 +1,15 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const Services = require("Services");
-const DevToolsUtils = require("devtools/shared/DevToolsUtils");
 const { PureComponent } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { getStr } = require("devtools/client/inspector/layout/utils/l10n");
 const {
   getWritingModeMatrix,
   getCSSMatrixTransform,
 } = require("devtools/shared/layout/dom-matrix-2d");
@@ -22,21 +21,16 @@ const GRID_HIGHLIGHTING_DEBOUNCE = 50;
 
 // Prefs for the max number of rows/cols a grid container can have for
 // the outline to display.
 const GRID_OUTLINE_MAX_ROWS_PREF =
   Services.prefs.getIntPref("devtools.gridinspector.gridOutlineMaxRows");
 const GRID_OUTLINE_MAX_COLUMNS_PREF =
   Services.prefs.getIntPref("devtools.gridinspector.gridOutlineMaxColumns");
 
-// Boolean pref to enable adjustment for writing mode and RTL content.
-DevToolsUtils.defineLazyGetter(this, "WRITING_MODE_ADJUST_ENABLED", () => {
-  return Services.prefs.getBoolPref("devtools.highlighter.writingModeAdjust");
-});
-
 // Move SVG grid to the right 100 units, so that it is not flushed against the edge of
 // layout border
 const TRANSLATE_X = 0;
 const TRANSLATE_Y = 0;
 
 const GRID_CELL_SCALE_FACTOR = 50;
 
 const VIEWPORT_MIN_HEIGHT = 100;
@@ -187,22 +181,20 @@ class GridOutline extends PureComponent 
       height += GRID_CELL_SCALE_FACTOR * (rows.tracks[i].breadth / 100);
     }
 
     let width = 0;
     for (let i = 0; i < cols.lines.length - 1; i++) {
       width += GRID_CELL_SCALE_FACTOR * (cols.tracks[i].breadth / 100);
     }
 
-    if (WRITING_MODE_ADJUST_ENABLED) {
-      // All writing modes other than horizontal-tb (the initial value) involve a 90 deg
-      // rotation, so swap width and height.
-      if (grid.writingMode != "horizontal-tb") {
-        [ width, height ] = [ height, width ];
-      }
+    // All writing modes other than horizontal-tb (the initial value) involve a 90 deg
+    // rotation, so swap width and height.
+    if (grid.writingMode != "horizontal-tb") {
+      [ width, height ] = [ height, width ];
     }
 
     return { width, height };
   }
 
   /**
    * Displays a message text "Cannot show outline for this grid".
    */
@@ -259,22 +251,18 @@ class GridOutline extends PureComponent 
       }
 
       x = 0;
       y += height;
     }
 
     // Transform the cells as needed to match the grid container's writing mode.
     let cellGroupStyle = {};
-
-    if (WRITING_MODE_ADJUST_ENABLED) {
-      let writingModeMatrix = getWritingModeMatrix(this.state, grid);
-      cellGroupStyle.transform = getCSSMatrixTransform(writingModeMatrix);
-    }
-
+    let writingModeMatrix = getWritingModeMatrix(this.state, grid);
+    cellGroupStyle.transform = getCSSMatrixTransform(writingModeMatrix);
     let cellGroup = dom.g(
       {
         id: "grid-cell-group",
         style: cellGroupStyle,
       },
       rectangles
     );
 
--- a/devtools/client/inspector/grids/test/head.js
+++ b/devtools/client/inspector/grids/test/head.js
@@ -11,20 +11,18 @@ Services.scriptloader.loadSubScript(
   "chrome://mochitests/content/browser/devtools/client/inspector/test/head.js",
   this);
 
 // Load the shared Redux helpers into this compartment.
 Services.scriptloader.loadSubScript(
   "chrome://mochitests/content/browser/devtools/client/framework/test/shared-redux-head.js",
   this);
 
-Services.prefs.setBoolPref("devtools.highlighter.writingModeAdjust", true);
 Services.prefs.setIntPref("devtools.toolbox.footer.height", 350);
 registerCleanupFunction(() => {
-  Services.prefs.clearUserPref("devtools.highlighter.writingModeAdjust");
   Services.prefs.clearUserPref("devtools.toolbox.footer.height");
 });
 
 const HIGHLIGHTER_TYPE = "CssGridHighlighter";
 
 /**
  * Simulate a color change in a given color picker tooltip.
  *
--- a/devtools/client/preferences/devtools.js
+++ b/devtools/client/preferences/devtools.js
@@ -77,19 +77,16 @@ pref("devtools.new-animationinspector.en
 
 // Grid highlighter preferences
 pref("devtools.gridinspector.gridOutlineMaxColumns", 50);
 pref("devtools.gridinspector.gridOutlineMaxRows", 50);
 pref("devtools.gridinspector.showGridAreas", false);
 pref("devtools.gridinspector.showGridLineNumbers", false);
 pref("devtools.gridinspector.showInfiniteLines", false);
 
-// Common highlighter preferences
-pref("devtools.highlighter.writingModeAdjust", false);
-
 // Whether or not the box model panel is opened in the computed view
 pref("devtools.computed.boxmodel.opened", true);
 // Whether or not the box model panel is opened in the layout view
 pref("devtools.layout.boxmodel.opened", true);
 // Whether or not the flexbox panel is opened in the layout view
 pref("devtools.layout.flexbox.opened", true);
 // Whether or not the grid inspector panel is opened in the layout view
 pref("devtools.layout.grid.opened", true);
--- a/devtools/server/actors/highlighters/css-grid.js
+++ b/devtools/server/actors/highlighters/css-grid.js
@@ -1,16 +1,14 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
-const Services = require("Services");
-const DevToolsUtils = require("devtools/shared/DevToolsUtils");
 const { AutoRefreshHighlighter } = require("./auto-refresh");
 const {
   CANVAS_SIZE,
   DEFAULT_COLOR,
   drawBubbleRect,
   drawLine,
   drawRect,
   drawRoundedRect,
@@ -71,21 +69,16 @@ const GRID_GAP_PATTERN_WIDTH = 14; // px
 const GRID_GAP_PATTERN_HEIGHT = 14; // px
 const GRID_GAP_PATTERN_LINE_DASH = [5, 3]; // px
 const GRID_GAP_ALPHA = 0.5;
 
 // 25 is a good margin distance between the document grid container edge without cutting
 // off parts of the arrow box container.
 const OFFSET_FROM_EDGE = 25;
 
-// Boolean pref to enable adjustment for writing mode and RTL content.
-DevToolsUtils.defineLazyGetter(this, "WRITING_MODE_ADJUST_ENABLED", () => {
-  return Services.prefs.getBoolPref("devtools.highlighter.writingModeAdjust");
-});
-
 /**
  * Given an `edge` of a box, return the name of the edge one move to the right.
  */
 function rotateEdgeRight(edge) {
   switch (edge) {
     case "top": return "right";
     case "right": return "bottom";
     case "bottom": return "left";
@@ -1249,55 +1242,53 @@ class CssGridHighlighter extends AutoRef
       if (lineNumber > 0) {
         boxEdge = "left";
       } else {
         boxEdge = "right";
       }
     }
 
     // Rotate box edge as needed for writing mode and text direction.
-    if (WRITING_MODE_ADJUST_ENABLED) {
-      let { direction, writingMode } = getComputedStyle(this.currentNode);
+    let { direction, writingMode } = getComputedStyle(this.currentNode);
 
-      switch (writingMode) {
-        case "horizontal-tb":
-          // This is the initial value.  No further adjustment needed.
-          break;
-        case "vertical-rl":
-          boxEdge = rotateEdgeRight(boxEdge);
-          break;
-        case "vertical-lr":
-          if (dimensionType === COLUMNS) {
-            boxEdge = rotateEdgeLeft(boxEdge);
-          } else {
-            boxEdge = rotateEdgeRight(boxEdge);
-          }
-          break;
-        case "sideways-rl":
+    switch (writingMode) {
+      case "horizontal-tb":
+        // This is the initial value.  No further adjustment needed.
+        break;
+      case "vertical-rl":
+        boxEdge = rotateEdgeRight(boxEdge);
+        break;
+      case "vertical-lr":
+        if (dimensionType === COLUMNS) {
+          boxEdge = rotateEdgeLeft(boxEdge);
+        } else {
           boxEdge = rotateEdgeRight(boxEdge);
-          break;
-        case "sideways-lr":
-          boxEdge = rotateEdgeLeft(boxEdge);
-          break;
-        default:
-          console.error(`Unexpected writing-mode: ${writingMode}`);
-      }
+        }
+        break;
+      case "sideways-rl":
+        boxEdge = rotateEdgeRight(boxEdge);
+        break;
+      case "sideways-lr":
+        boxEdge = rotateEdgeLeft(boxEdge);
+        break;
+      default:
+        console.error(`Unexpected writing-mode: ${writingMode}`);
+    }
 
-      switch (direction) {
-        case "ltr":
-          // This is the initial value.  No further adjustment needed.
-          break;
-        case "rtl":
-          if (dimensionType === ROWS) {
-            boxEdge = reflectEdge(boxEdge);
-          }
-          break;
-        default:
-          console.error(`Unexpected direction: ${direction}`);
-      }
+    switch (direction) {
+      case "ltr":
+        // This is the initial value.  No further adjustment needed.
+        break;
+      case "rtl":
+        if (dimensionType === ROWS) {
+          boxEdge = reflectEdge(boxEdge);
+        }
+        break;
+      default:
+        console.error(`Unexpected direction: ${direction}`);
     }
 
     // Default to drawing outside the edge, but move inside when close to viewport.
     let minOffsetFromEdge = OFFSET_FROM_EDGE * displayPixelRatio;
     let { width, height } = this._winDimensions;
     width *= displayPixelRatio;
     height *= displayPixelRatio;
 
--- a/devtools/server/actors/highlighters/utils/canvas.js
+++ b/devtools/server/actors/highlighters/utils/canvas.js
@@ -1,17 +1,14 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
-const Services = require("Services");
-const DevToolsUtils = require("devtools/shared/DevToolsUtils");
-
 const {
   apply,
   getNodeTransformationMatrix,
   getWritingModeMatrix,
   identity,
   isIdentity,
   multiply,
   scale,
@@ -38,21 +35,16 @@ const { getComputedStyle } = require("./
 // the displayport API instead.
 //
 // Using a fixed value should also solve bug 1348293.
 const CANVAS_SIZE = 4096;
 
 // The default color used for the canvas' font, fill and stroke colors.
 const DEFAULT_COLOR = "#9400FF";
 
-// Boolean pref to enable adjustment for writing mode and RTL content.
-DevToolsUtils.defineLazyGetter(this, "WRITING_MODE_ADJUST_ENABLED", () => {
-  return Services.prefs.getBoolPref("devtools.highlighter.writingModeAdjust");
-});
-
 /**
  * Draws a rect to the context given and applies a transformation matrix if passed.
  * The coordinates are the start and end points of the rectangle's diagonal.
  *
  * @param  {CanvasRenderingContext2D} ctx
  *         The 2D canvas context.
  * @param  {Number} x1
  *         The x-axis coordinate of the rectangle's diagonal start point.
@@ -313,26 +305,24 @@ function getCurrentMatrix(element, windo
     currentMatrix = multiply(currentMatrix, nodeMatrix);
     hasNodeTransformations = true;
   }
 
   // Translate the origin based on the node's padding and border values.
   currentMatrix = multiply(currentMatrix,
     translate(paddingLeft + borderLeft, paddingTop + borderTop));
 
-  if (WRITING_MODE_ADJUST_ENABLED) {
-    // Adjust as needed to match the writing mode and text direction of the element.
-    let size = {
-      width: element.offsetWidth,
-      height: element.offsetHeight,
-    };
-    let writingModeMatrix = getWritingModeMatrix(size, computedStyle);
-    if (!isIdentity(writingModeMatrix)) {
-      currentMatrix = multiply(currentMatrix, writingModeMatrix);
-    }
+  // Adjust as needed to match the writing mode and text direction of the element.
+  let size = {
+    width: element.offsetWidth,
+    height: element.offsetHeight,
+  };
+  let writingModeMatrix = getWritingModeMatrix(size, computedStyle);
+  if (!isIdentity(writingModeMatrix)) {
+    currentMatrix = multiply(currentMatrix, writingModeMatrix);
   }
 
   return { currentMatrix, hasNodeTransformations };
 }
 
 /**
  * Given an array of four points, returns a string represent a path description.
  *