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
--- 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.
*