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

--HG--
extra : rebase_source : 952dcc4bce3f9f2ae598a98be3b63a70ba4068b2

devtools/client/inspector/grids/components/GridOutline.js

@@ -5,7 +5,6 @@
 "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");
@@ -27,11 +26,6 @@ const GRID_OUTLINE_MAX_ROWS_PREF =
 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;
@@ -192,12 +186,10 @@ class GridOutline extends PureComponent {
       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 };
@@ -264,12 +256,8 @@ class GridOutline extends PureComponent {
 
     // 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",

devtools/client/inspector/grids/test/head.js

@@ -16,10 +16,8 @@ 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");
 });
 

devtools/client/preferences/devtools.js

@@ -82,9 +82,6 @@ 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

devtools/server/actors/highlighters/css-grid.js

@@ -4,8 +4,6 @@
 
 "use strict";
 
-const Services = require("Services");
-const DevToolsUtils = require("devtools/shared/DevToolsUtils");
 const { AutoRefreshHighlighter } = require("./auto-refresh");
 const {
   CANVAS_SIZE,
@@ -76,11 +74,6 @@ const GRID_GAP_ALPHA = 0.5;
 // 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.
  */
@@ -1254,45 +1247,43 @@ class CssGridHighlighter extends AutoRefreshHighlighter {
     }
 
     // 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":
-          boxEdge = rotateEdgeRight(boxEdge);
-          break;
-        case "sideways-lr":
+    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);
-          break;
-        default:
-          console.error(`Unexpected writing-mode: ${writingMode}`);
-      }
+        } else {
+          boxEdge = rotateEdgeRight(boxEdge);
+        }
+        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.

devtools/server/actors/highlighters/utils/canvas.js

@@ -4,9 +4,6 @@
 
 "use strict";
 
-const Services = require("Services");
-const DevToolsUtils = require("devtools/shared/DevToolsUtils");
-
 const {
   apply,
   getNodeTransformationMatrix,
@@ -43,11 +40,6 @@ 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.
@@ -318,16 +310,14 @@ function getCurrentMatrix(element, window) {
   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 };