From a17e3637e6352126aaa9c72725a7f9f8cdbaf967 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 12 Feb 2018 12:49:22 -0600 Subject: [PATCH] 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 --- .../inspector/grids/components/GridOutline.js | 24 ++---- devtools/client/inspector/grids/test/head.js | 2 - devtools/client/preferences/devtools.js | 3 - .../server/actors/highlighters/css-grid.js | 77 ++++++++----------- .../actors/highlighters/utils/canvas.js | 26 ++----- 5 files changed, 48 insertions(+), 84 deletions(-) diff --git a/devtools/client/inspector/grids/components/GridOutline.js b/devtools/client/inspector/grids/components/GridOutline.js index fa6207b7dea7..816d279ceaad 100644 --- a/devtools/client/inspector/grids/components/GridOutline.js +++ b/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", diff --git a/devtools/client/inspector/grids/test/head.js b/devtools/client/inspector/grids/test/head.js index 556081d6c725..5f5cf110657e 100644 --- a/devtools/client/inspector/grids/test/head.js +++ b/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"); }); diff --git a/devtools/client/preferences/devtools.js b/devtools/client/preferences/devtools.js index 16a2ecfae0d5..be31904dfda5 100644 --- a/devtools/client/preferences/devtools.js +++ b/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 diff --git a/devtools/server/actors/highlighters/css-grid.js b/devtools/server/actors/highlighters/css-grid.js index 10d636a2a3ff..952d63c5c660 100644 --- a/devtools/server/actors/highlighters/css-grid.js +++ b/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. diff --git a/devtools/server/actors/highlighters/utils/canvas.js b/devtools/server/actors/highlighters/utils/canvas.js index 15317e88fc11..38eb86a7d18b 100644 --- a/devtools/server/actors/highlighters/utils/canvas.js +++ b/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 };