diff options
Diffstat (limited to '')
59 files changed, 5381 insertions, 0 deletions
diff --git a/devtools/client/inspector/grids/actions/grid-highlighter.js b/devtools/client/inspector/grids/actions/grid-highlighter.js new file mode 100644 index 0000000000..6706dc88cd --- /dev/null +++ b/devtools/client/inspector/grids/actions/grid-highlighter.js @@ -0,0 +1,39 @@ +/* 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"; + +/** + * This module exports thunks. + * Thunks are functions that can be dispatched to the Inspector Redux store. + * + * These functions receive one object with options that contains: + * - dispatch() => function to dispatch Redux actions to the store + * - getState() => function to get the current state of the entire Inspector Redux store + * - inspector => object instance of Inspector client + * + * They provide a shortcut for React components to invoke the box model highlighter + * without having to know where the highlighter exists. + */ + +module.exports = { + /** + * Show the grid highlighter for the given node front. + * + * @param {NodeFront} nodeFront + * Node that should be highlighted. + * @param {Object} options + * Optional configuration options passed to the grid highlighter + */ + showGridHighlighter(nodeFront, options = {}) { + return async thunkOptions => { + const { inspector } = thunkOptions; + if (!inspector) { + return; + } + + await inspector.highlighters.showGridHighlighter(nodeFront, options); + }; + }, +}; diff --git a/devtools/client/inspector/grids/actions/grids.js b/devtools/client/inspector/grids/actions/grids.js new file mode 100644 index 0000000000..724582c3d5 --- /dev/null +++ b/devtools/client/inspector/grids/actions/grids.js @@ -0,0 +1,55 @@ +/* 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 { + UPDATE_GRID_COLOR, + UPDATE_GRID_HIGHLIGHTED, + UPDATE_GRIDS, +} = require("resource://devtools/client/inspector/grids/actions/index.js"); + +module.exports = { + /** + * Updates the color used for the grid's highlighter. + * + * @param {NodeFront} nodeFront + * The NodeFront of the DOM node to toggle the grid highlighter. + * @param {String} color + * The color to use for this nodeFront's grid highlighter. + */ + updateGridColor(nodeFront, color) { + return { + type: UPDATE_GRID_COLOR, + color, + nodeFront, + }; + }, + + /** + * Updates the grid highlighted state. + * + * @param {NodeFront} nodeFront + * The NodeFront of the DOM node to toggle the grid highlighter. + * @param {Boolean} highlighted + * Whether or not the grid highlighter is highlighting the grid. + */ + updateGridHighlighted(nodeFront, highlighted) { + return { + type: UPDATE_GRID_HIGHLIGHTED, + highlighted, + nodeFront, + }; + }, + + /** + * Updates the grid state with the new list of grids. + */ + updateGrids(grids) { + return { + type: UPDATE_GRIDS, + grids, + }; + }, +}; diff --git a/devtools/client/inspector/grids/actions/highlighter-settings.js b/devtools/client/inspector/grids/actions/highlighter-settings.js new file mode 100644 index 0000000000..82397a7944 --- /dev/null +++ b/devtools/client/inspector/grids/actions/highlighter-settings.js @@ -0,0 +1,52 @@ +/* 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 { + UPDATE_SHOW_GRID_AREAS, + UPDATE_SHOW_GRID_LINE_NUMBERS, + UPDATE_SHOW_INFINITE_LINES, +} = require("resource://devtools/client/inspector/grids/actions/index.js"); + +module.exports = { + /** + * Updates the grid highlighter's show grid areas preference. + * + * @param {Boolean} enabled + * Whether or not the grid highlighter should show the grid areas. + */ + updateShowGridAreas(enabled) { + return { + type: UPDATE_SHOW_GRID_AREAS, + enabled, + }; + }, + + /** + * Updates the grid highlighter's show grid line numbers preference. + * + * @param {Boolean} enabled + * Whether or not the grid highlighter should show the grid line numbers. + */ + updateShowGridLineNumbers(enabled) { + return { + type: UPDATE_SHOW_GRID_LINE_NUMBERS, + enabled, + }; + }, + + /** + * Updates the grid highlighter's show infinite lines preference. + * + * @param {Boolean} enabled + * Whether or not the grid highlighter should extend grid lines infinitely. + */ + updateShowInfiniteLines(enabled) { + return { + type: UPDATE_SHOW_INFINITE_LINES, + enabled, + }; + }, +}; diff --git a/devtools/client/inspector/grids/actions/index.js b/devtools/client/inspector/grids/actions/index.js new file mode 100644 index 0000000000..1b0c18d0e7 --- /dev/null +++ b/devtools/client/inspector/grids/actions/index.js @@ -0,0 +1,30 @@ +/* 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 { createEnum } = require("resource://devtools/client/shared/enum.js"); + +createEnum( + [ + // Updates the color used for the overlay of a grid. + "UPDATE_GRID_COLOR", + + // Updates the grid highlighted state. + "UPDATE_GRID_HIGHLIGHTED", + + // Updates the entire grids state with the new list of grids. + "UPDATE_GRIDS", + + // Updates the grid highlighter's show grid areas state. + "UPDATE_SHOW_GRID_AREAS", + + // Updates the grid highlighter's show grid line numbers state. + "UPDATE_SHOW_GRID_LINE_NUMBERS", + + // Updates the grid highlighter's show infinite lines state. + "UPDATE_SHOW_INFINITE_LINES", + ], + module.exports +); diff --git a/devtools/client/inspector/grids/actions/moz.build b/devtools/client/inspector/grids/actions/moz.build new file mode 100644 index 0000000000..733ac57ede --- /dev/null +++ b/devtools/client/inspector/grids/actions/moz.build @@ -0,0 +1,12 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +DevToolsModules( + "grid-highlighter.js", + "grids.js", + "highlighter-settings.js", + "index.js", +) diff --git a/devtools/client/inspector/grids/components/Grid.js b/devtools/client/inspector/grids/components/Grid.js new file mode 100644 index 0000000000..0378f1e702 --- /dev/null +++ b/devtools/client/inspector/grids/components/Grid.js @@ -0,0 +1,106 @@ +/* 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 { + createFactory, + PureComponent, +} = require("resource://devtools/client/shared/vendor/react.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); +const { + getStr, +} = require("resource://devtools/client/inspector/layout/utils/l10n.js"); + +// Normally, we would only lazy load GridOutline, but we also lazy load +// GridDisplaySettings and GridList because we assume the CSS grid usage is low +// and usually will not appear on the page. +loader.lazyGetter(this, "GridDisplaySettings", function () { + return createFactory( + require("resource://devtools/client/inspector/grids/components/GridDisplaySettings.js") + ); +}); +loader.lazyGetter(this, "GridList", function () { + return createFactory( + require("resource://devtools/client/inspector/grids/components/GridList.js") + ); +}); +loader.lazyGetter(this, "GridOutline", function () { + return createFactory( + require("resource://devtools/client/inspector/grids/components/GridOutline.js") + ); +}); + +const Types = require("resource://devtools/client/inspector/grids/types.js"); + +class Grid extends PureComponent { + static get propTypes() { + return { + dispatch: PropTypes.func.isRequired, + getSwatchColorPickerTooltip: PropTypes.func.isRequired, + grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired, + highlighterSettings: PropTypes.shape(Types.highlighterSettings) + .isRequired, + onSetGridOverlayColor: PropTypes.func.isRequired, + onToggleGridHighlighter: PropTypes.func.isRequired, + onToggleShowGridAreas: PropTypes.func.isRequired, + onToggleShowGridLineNumbers: PropTypes.func.isRequired, + onToggleShowInfiniteLines: PropTypes.func.isRequired, + setSelectedNode: PropTypes.func.isRequired, + }; + } + + render() { + if (!this.props.grids.length) { + return dom.div( + { className: "devtools-sidepanel-no-result" }, + getStr("layout.noGridsOnThisPage") + ); + } + + const { + dispatch, + getSwatchColorPickerTooltip, + grids, + highlighterSettings, + onSetGridOverlayColor, + onToggleShowGridAreas, + onToggleGridHighlighter, + onToggleShowGridLineNumbers, + onToggleShowInfiniteLines, + setSelectedNode, + } = this.props; + const highlightedGrids = grids.filter(grid => grid.highlighted); + + return dom.div( + { id: "layout-grid-container" }, + dom.div( + { className: "grid-content" }, + GridList({ + dispatch, + getSwatchColorPickerTooltip, + grids, + onSetGridOverlayColor, + onToggleGridHighlighter, + setSelectedNode, + }), + GridDisplaySettings({ + highlighterSettings, + onToggleShowGridAreas, + onToggleShowGridLineNumbers, + onToggleShowInfiniteLines, + }) + ), + highlightedGrids.length === 1 + ? GridOutline({ + dispatch, + grids, + }) + : null + ); + } +} + +module.exports = Grid; diff --git a/devtools/client/inspector/grids/components/GridDisplaySettings.js b/devtools/client/inspector/grids/components/GridDisplaySettings.js new file mode 100644 index 0000000000..af525cc8c7 --- /dev/null +++ b/devtools/client/inspector/grids/components/GridDisplaySettings.js @@ -0,0 +1,116 @@ +/* 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 { + PureComponent, +} = require("resource://devtools/client/shared/vendor/react.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); +const { + getStr, +} = require("resource://devtools/client/inspector/layout/utils/l10n.js"); + +const Types = require("resource://devtools/client/inspector/grids/types.js"); + +class GridDisplaySettings extends PureComponent { + static get propTypes() { + return { + highlighterSettings: PropTypes.shape(Types.highlighterSettings) + .isRequired, + onToggleShowGridAreas: PropTypes.func.isRequired, + onToggleShowGridLineNumbers: PropTypes.func.isRequired, + onToggleShowInfiniteLines: PropTypes.func.isRequired, + }; + } + + constructor(props) { + super(props); + + this.onShowGridAreasCheckboxClick = + this.onShowGridAreasCheckboxClick.bind(this); + this.onShowGridLineNumbersCheckboxClick = + this.onShowGridLineNumbersCheckboxClick.bind(this); + this.onShowInfiniteLinesCheckboxClick = + this.onShowInfiniteLinesCheckboxClick.bind(this); + } + + onShowGridAreasCheckboxClick() { + const { highlighterSettings, onToggleShowGridAreas } = this.props; + + onToggleShowGridAreas(!highlighterSettings.showGridAreasOverlay); + } + + onShowGridLineNumbersCheckboxClick() { + const { highlighterSettings, onToggleShowGridLineNumbers } = this.props; + + onToggleShowGridLineNumbers(!highlighterSettings.showGridLineNumbers); + } + + onShowInfiniteLinesCheckboxClick() { + const { highlighterSettings, onToggleShowInfiniteLines } = this.props; + + onToggleShowInfiniteLines(!highlighterSettings.showInfiniteLines); + } + + render() { + const { highlighterSettings } = this.props; + + return dom.div( + { className: "grid-container" }, + dom.span( + { + role: "heading", + "aria-level": "3", + }, + getStr("layout.gridDisplaySettings") + ), + dom.ul( + {}, + dom.li( + { className: "grid-settings-item" }, + dom.label( + {}, + dom.input({ + id: "grid-setting-show-grid-line-numbers", + type: "checkbox", + checked: highlighterSettings.showGridLineNumbers, + onChange: this.onShowGridLineNumbersCheckboxClick, + }), + getStr("layout.displayLineNumbers") + ) + ), + dom.li( + { className: "grid-settings-item" }, + dom.label( + {}, + dom.input({ + id: "grid-setting-show-grid-areas", + type: "checkbox", + checked: highlighterSettings.showGridAreasOverlay, + onChange: this.onShowGridAreasCheckboxClick, + }), + getStr("layout.displayAreaNames") + ) + ), + dom.li( + { className: "grid-settings-item" }, + dom.label( + {}, + dom.input({ + id: "grid-setting-extend-grid-lines", + type: "checkbox", + checked: highlighterSettings.showInfiniteLines, + onChange: this.onShowInfiniteLinesCheckboxClick, + }), + getStr("layout.extendLinesInfinitely") + ) + ) + ) + ); + } +} + +module.exports = GridDisplaySettings; diff --git a/devtools/client/inspector/grids/components/GridItem.js b/devtools/client/inspector/grids/components/GridItem.js new file mode 100644 index 0000000000..fd2694e27a --- /dev/null +++ b/devtools/client/inspector/grids/components/GridItem.js @@ -0,0 +1,178 @@ +/* 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 { + createElement, + createRef, + Fragment, + PureComponent, +} = require("resource://devtools/client/shared/vendor/react.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); +const { + getFormatStr, + getStr, +} = require("resource://devtools/client/inspector/layout/utils/l10n.js"); + +loader.lazyGetter(this, "Rep", function () { + return require("resource://devtools/client/shared/components/reps/index.js") + .REPS.Rep; +}); +loader.lazyGetter(this, "MODE", function () { + return require("resource://devtools/client/shared/components/reps/index.js") + .MODE; +}); + +loader.lazyRequireGetter( + this, + "translateNodeFrontToGrip", + "resource://devtools/client/inspector/shared/utils.js", + true +); + +const Types = require("resource://devtools/client/inspector/grids/types.js"); + +const { + highlightNode, + unhighlightNode, +} = require("resource://devtools/client/inspector/boxmodel/actions/box-model-highlighter.js"); + +class GridItem extends PureComponent { + static get propTypes() { + return { + dispatch: PropTypes.func.isRequired, + getSwatchColorPickerTooltip: PropTypes.func.isRequired, + grid: PropTypes.shape(Types.grid).isRequired, + grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired, + onSetGridOverlayColor: PropTypes.func.isRequired, + onToggleGridHighlighter: PropTypes.func.isRequired, + setSelectedNode: PropTypes.func.isRequired, + }; + } + + constructor(props) { + super(props); + + this.swatchEl = createRef(); + + this.onGridCheckboxClick = this.onGridCheckboxClick.bind(this); + this.onGridInspectIconClick = this.onGridInspectIconClick.bind(this); + this.setGridColor = this.setGridColor.bind(this); + } + + componentDidMount() { + const tooltip = this.props.getSwatchColorPickerTooltip(); + + let previousColor; + tooltip.addSwatch(this.swatchEl.current, { + onCommit: this.setGridColor, + onPreview: this.setGridColor, + onRevert: () => { + this.props.onSetGridOverlayColor( + this.props.grid.nodeFront, + previousColor + ); + }, + onShow: () => { + previousColor = this.props.grid.color; + }, + }); + } + + componentWillUnmount() { + const tooltip = this.props.getSwatchColorPickerTooltip(); + tooltip.removeSwatch(this.swatchEl.current); + } + + setGridColor() { + const color = this.swatchEl.current.dataset.color; + this.props.onSetGridOverlayColor(this.props.grid.nodeFront, color); + } + + onGridCheckboxClick() { + const { grid, onToggleGridHighlighter } = this.props; + onToggleGridHighlighter(grid.nodeFront); + } + + onGridInspectIconClick(nodeFront) { + const { setSelectedNode } = this.props; + setSelectedNode(nodeFront, { reason: "layout-panel" }); + nodeFront.scrollIntoView().catch(e => console.error(e)); + } + + renderSubgrids() { + const { grid, grids } = this.props; + + if (!grid.subgrids.length) { + return null; + } + + const subgrids = grids.filter(g => grid.subgrids.includes(g.id)); + + return dom.ul( + {}, + subgrids.map(g => { + return createElement(GridItem, { + key: g.id, + dispatch: this.props.dispatch, + getSwatchColorPickerTooltip: this.props.getSwatchColorPickerTooltip, + grid: g, + grids, + onSetGridOverlayColor: this.props.onSetGridOverlayColor, + onToggleGridHighlighter: this.props.onToggleGridHighlighter, + setSelectedNode: this.props.setSelectedNode, + }); + }) + ); + } + + render() { + const { dispatch, grid } = this.props; + + return createElement( + Fragment, + null, + dom.li( + {}, + dom.label( + {}, + dom.input({ + checked: grid.highlighted, + disabled: grid.disabled, + type: "checkbox", + value: grid.id, + onChange: this.onGridCheckboxClick, + title: getStr("layout.toggleGridHighlighter"), + }), + Rep({ + defaultRep: Rep.ElementNode, + mode: MODE.TINY, + object: translateNodeFrontToGrip(grid.nodeFront), + onDOMNodeMouseOut: () => dispatch(unhighlightNode()), + onDOMNodeMouseOver: () => dispatch(highlightNode(grid.nodeFront)), + onInspectIconClick: (_, e) => { + // Stoping click propagation to avoid firing onGridCheckboxClick() + e.stopPropagation(); + this.onGridInspectIconClick(grid.nodeFront); + }, + }) + ), + dom.button({ + className: "layout-color-swatch", + "data-color": grid.color, + ref: this.swatchEl, + style: { + backgroundColor: grid.color, + }, + title: getFormatStr("layout.colorSwatch.tooltip", grid.color), + }) + ), + this.renderSubgrids() + ); + } +} + +module.exports = GridItem; diff --git a/devtools/client/inspector/grids/components/GridList.js b/devtools/client/inspector/grids/components/GridList.js new file mode 100644 index 0000000000..62c7ae5b13 --- /dev/null +++ b/devtools/client/inspector/grids/components/GridList.js @@ -0,0 +1,79 @@ +/* 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 { + createFactory, + PureComponent, +} = require("resource://devtools/client/shared/vendor/react.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); +const { + getStr, +} = require("resource://devtools/client/inspector/layout/utils/l10n.js"); + +const GridItem = createFactory( + require("resource://devtools/client/inspector/grids/components/GridItem.js") +); + +const Types = require("resource://devtools/client/inspector/grids/types.js"); + +class GridList extends PureComponent { + static get propTypes() { + return { + dispatch: PropTypes.func.isRequired, + getSwatchColorPickerTooltip: PropTypes.func.isRequired, + grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired, + onSetGridOverlayColor: PropTypes.func.isRequired, + onToggleGridHighlighter: PropTypes.func.isRequired, + setSelectedNode: PropTypes.func.isRequired, + }; + } + + render() { + const { + dispatch, + getSwatchColorPickerTooltip, + grids, + onSetGridOverlayColor, + onToggleGridHighlighter, + setSelectedNode, + } = this.props; + + return dom.div( + { className: "grid-container" }, + dom.span( + { + role: "heading", + "aria-level": "3", + }, + getStr("layout.overlayGrid") + ), + dom.ul( + { + id: "grid-list", + className: "devtools-monospace", + }, + grids + // Skip subgrids since they are rendered by their parent grids in GridItem. + .filter(grid => !grid.isSubgrid) + .map(grid => + GridItem({ + dispatch, + key: grid.id, + getSwatchColorPickerTooltip, + grid, + grids, + onSetGridOverlayColor, + onToggleGridHighlighter, + setSelectedNode, + }) + ) + ) + ); + } +} + +module.exports = GridList; diff --git a/devtools/client/inspector/grids/components/GridOutline.js b/devtools/client/inspector/grids/components/GridOutline.js new file mode 100644 index 0000000000..65771f3f45 --- /dev/null +++ b/devtools/client/inspector/grids/components/GridOutline.js @@ -0,0 +1,436 @@ +/* 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 { + PureComponent, +} = require("resource://devtools/client/shared/vendor/react.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); +const { + getStr, +} = require("resource://devtools/client/inspector/layout/utils/l10n.js"); +const { + getWritingModeMatrix, + getCSSMatrixTransform, +} = require("resource://devtools/shared/layout/dom-matrix-2d.js"); + +const Types = require("resource://devtools/client/inspector/grids/types.js"); + +// The delay prior to executing the grid cell highlighting. +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" +); + +// 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; +const VIEWPORT_MAX_HEIGHT = 150; + +const { + showGridHighlighter, +} = require("resource://devtools/client/inspector/grids/actions/grid-highlighter.js"); + +class GridOutline extends PureComponent { + static get propTypes() { + return { + dispatch: PropTypes.func.isRequired, + grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired, + }; + } + + static getDerivedStateFromProps(props) { + const selectedGrid = props.grids.find(grid => grid.highlighted); + + // Store the height of the grid container in the component state to prevent overflow + // issues. We want to store the width of the grid container as well so that the + // viewbox is only the calculated width of the grid outline. + const { width, height } = selectedGrid?.gridFragments.length + ? getTotalWidthAndHeight(selectedGrid) + : { width: 0, height: 0 }; + let showOutline; + + if (selectedGrid?.gridFragments.length) { + const { cols, rows } = selectedGrid.gridFragments[0]; + + // Show the grid outline if both the rows/columns are less than or equal + // to their max prefs. + showOutline = + cols.lines.length <= GRID_OUTLINE_MAX_COLUMNS_PREF && + rows.lines.length <= GRID_OUTLINE_MAX_ROWS_PREF; + } + + return { height, width, selectedGrid, showOutline }; + } + + constructor(props) { + super(props); + + this.state = { + height: 0, + selectedGrid: null, + showOutline: true, + width: 0, + }; + + this.doHighlightCell = this.doHighlightCell.bind(this); + this.getGridAreaName = this.getGridAreaName.bind(this); + this.getHeight = this.getHeight.bind(this); + this.onHighlightCell = this.onHighlightCell.bind(this); + this.renderCannotShowOutlineText = + this.renderCannotShowOutlineText.bind(this); + this.renderGrid = this.renderGrid.bind(this); + this.renderGridCell = this.renderGridCell.bind(this); + this.renderGridOutline = this.renderGridOutline.bind(this); + this.renderGridOutlineBorder = this.renderGridOutlineBorder.bind(this); + this.renderOutline = this.renderOutline.bind(this); + } + + doHighlightCell(target, hide) { + const { dispatch, grids } = this.props; + const name = target.dataset.gridAreaName; + const id = target.dataset.gridId; + const gridFragmentIndex = target.dataset.gridFragmentIndex; + const rowNumber = target.dataset.gridRow; + const columnNumber = target.dataset.gridColumn; + const nodeFront = grids[id].nodeFront; + + // The options object has the following properties which corresponds to the + // required parameters for showing the grid cell or area highlights. + // See devtools/server/actors/highlighters/css-grid.js + // { + // showGridArea: String, + // showGridCell: { + // gridFragmentIndex: Number, + // rowNumber: Number, + // columnNumber: Number, + // }, + // } + const options = { + showGridArea: name, + showGridCell: { + gridFragmentIndex, + rowNumber, + columnNumber, + }, + }; + + if (hide) { + // Reset the grid highlighter to default state; no options = hide cell/area outline. + dispatch(showGridHighlighter(nodeFront)); + } else { + dispatch(showGridHighlighter(nodeFront, options)); + } + } + + /** + * Returns the grid area name if the given grid cell is part of a grid area, otherwise + * null. + * + * @param {Number} columnNumber + * The column number of the grid cell. + * @param {Number} rowNumber + * The row number of the grid cell. + * @param {Array} areas + * Array of grid areas data stored in the grid fragment. + * @return {String} If there is a grid area return area name, otherwise null. + */ + getGridAreaName(columnNumber, rowNumber, areas) { + const gridArea = areas.find( + area => + area.rowStart <= rowNumber && + area.rowEnd > rowNumber && + area.columnStart <= columnNumber && + area.columnEnd > columnNumber + ); + + if (!gridArea) { + return null; + } + + return gridArea.name; + } + + /** + * Returns the height of the grid outline ranging between a minimum and maximum height. + * + * @return {Number} The height of the grid outline. + */ + getHeight() { + const { height } = this.state; + + if (height >= VIEWPORT_MAX_HEIGHT) { + return VIEWPORT_MAX_HEIGHT; + } else if (height <= VIEWPORT_MIN_HEIGHT) { + return VIEWPORT_MIN_HEIGHT; + } + + return height; + } + + /** + * Displays a message text "Cannot show outline for this grid". + */ + renderCannotShowOutlineText() { + return dom.div( + { className: "grid-outline-text" }, + dom.span({ + className: "grid-outline-text-icon", + title: getStr("layout.cannotShowGridOutline.title"), + }), + getStr("layout.cannotShowGridOutline") + ); + } + + /** + * Renders the grid outline for the given grid container object. + * + * @param {Object} grid + * A single grid container in the document. + */ + renderGrid(grid) { + // TODO: We are drawing the first fragment since only one is currently being stored. + // In the future we will need to iterate over all fragments of a grid. + const gridFragmentIndex = 0; + const { id, color, gridFragments } = grid; + const { rows, cols, areas } = gridFragments[gridFragmentIndex]; + + const numberOfColumns = cols.lines.length - 1; + const numberOfRows = rows.lines.length - 1; + const rectangles = []; + let x = 0; + let y = 0; + let width = 0; + let height = 0; + + // Draw the cells contained within the grid outline border. + for (let rowNumber = 1; rowNumber <= numberOfRows; rowNumber++) { + height = + GRID_CELL_SCALE_FACTOR * (rows.tracks[rowNumber - 1].breadth / 100); + + for ( + let columnNumber = 1; + columnNumber <= numberOfColumns; + columnNumber++ + ) { + width = + GRID_CELL_SCALE_FACTOR * + (cols.tracks[columnNumber - 1].breadth / 100); + + const gridAreaName = this.getGridAreaName( + columnNumber, + rowNumber, + areas + ); + const gridCell = this.renderGridCell( + id, + gridFragmentIndex, + x, + y, + rowNumber, + columnNumber, + color, + gridAreaName, + width, + height + ); + + rectangles.push(gridCell); + x += width; + } + + x = 0; + y += height; + } + + // Transform the cells as needed to match the grid container's writing mode. + const cellGroupStyle = {}; + const writingModeMatrix = getWritingModeMatrix(this.state, grid); + cellGroupStyle.transform = getCSSMatrixTransform(writingModeMatrix); + const cellGroup = dom.g( + { + id: "grid-cell-group", + style: cellGroupStyle, + }, + rectangles + ); + + // Draw a rectangle that acts as the grid outline border. + const border = this.renderGridOutlineBorder( + this.state.width, + this.state.height, + color + ); + + return [border, cellGroup]; + } + + /** + * Renders the grid cell of a grid fragment. + * + * @param {Number} id + * The grid id stored on the grid fragment + * @param {Number} gridFragmentIndex + * The index of the grid fragment rendered to the document. + * @param {Number} x + * The x-position of the grid cell. + * @param {Number} y + * The y-position of the grid cell. + * @param {Number} rowNumber + * The row number of the grid cell. + * @param {Number} columnNumber + * The column number of the grid cell. + * @param {String|null} gridAreaName + * The grid area name or null if the grid cell is not part of a grid area. + * @param {Number} width + * The width of grid cell. + * @param {Number} height + * The height of the grid cell. + */ + renderGridCell( + id, + gridFragmentIndex, + x, + y, + rowNumber, + columnNumber, + color, + gridAreaName, + width, + height + ) { + return dom.rect({ + key: `${id}-${rowNumber}-${columnNumber}`, + className: "grid-outline-cell", + "data-grid-area-name": gridAreaName, + "data-grid-fragment-index": gridFragmentIndex, + "data-grid-id": id, + "data-grid-row": rowNumber, + "data-grid-column": columnNumber, + x, + y, + width, + height, + fill: "none", + onMouseEnter: this.onHighlightCell, + onMouseLeave: this.onHighlightCell, + }); + } + + renderGridOutline(grid) { + const { color } = grid; + + return dom.g( + { + id: "grid-outline-group", + className: "grid-outline-group", + style: { color }, + }, + this.renderGrid(grid) + ); + } + + renderGridOutlineBorder(borderWidth, borderHeight, color) { + return dom.rect({ + key: "border", + className: "grid-outline-border", + x: 0, + y: 0, + width: borderWidth, + height: borderHeight, + }); + } + + renderOutline() { + const { height, selectedGrid, showOutline, width } = this.state; + + return showOutline + ? dom.svg( + { + id: "grid-outline", + width: "100%", + height: this.getHeight(), + viewBox: `${TRANSLATE_X} ${TRANSLATE_Y} ${width} ${height}`, + }, + this.renderGridOutline(selectedGrid) + ) + : this.renderCannotShowOutlineText(); + } + + onHighlightCell({ target, type }) { + // Debounce the highlighting of cells. + // This way we don't end up sending many requests to the server for highlighting when + // cells get hovered in a rapid succession We only send a request if the user settles + // on a cell for some time. + if (this.highlightTimeout) { + clearTimeout(this.highlightTimeout); + } + + this.highlightTimeout = setTimeout(() => { + this.doHighlightCell(target, type === "mouseleave"); + this.highlightTimeout = null; + }, GRID_HIGHLIGHTING_DEBOUNCE); + } + + render() { + const { selectedGrid } = this.state; + + return selectedGrid?.gridFragments.length + ? dom.div( + { + id: "grid-outline-container", + className: "grid-outline-container", + }, + this.renderOutline() + ) + : null; + } +} + +/** + * Get the width and height of a given grid. + * + * @param {Object} grid + * A single grid container in the document. + * @return {Object} An object like { width, height } + */ +function getTotalWidthAndHeight(grid) { + // TODO: We are drawing the first fragment since only one is currently being stored. + // In the future we will need to iterate over all fragments of a grid. + const { gridFragments } = grid; + const { rows, cols } = gridFragments[0]; + + let height = 0; + for (let i = 0; i < rows.lines.length - 1; i++) { + 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); + } + + // 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 }; +} + +module.exports = GridOutline; diff --git a/devtools/client/inspector/grids/components/moz.build b/devtools/client/inspector/grids/components/moz.build new file mode 100644 index 0000000000..e938e51ad1 --- /dev/null +++ b/devtools/client/inspector/grids/components/moz.build @@ -0,0 +1,13 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +DevToolsModules( + "Grid.js", + "GridDisplaySettings.js", + "GridItem.js", + "GridList.js", + "GridOutline.js", +) diff --git a/devtools/client/inspector/grids/grid-inspector.js b/devtools/client/inspector/grids/grid-inspector.js new file mode 100644 index 0000000000..0055fc4e54 --- /dev/null +++ b/devtools/client/inspector/grids/grid-inspector.js @@ -0,0 +1,783 @@ +/* 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 flags = require("resource://devtools/shared/flags.js"); +const { throttle } = require("resource://devtools/shared/throttle.js"); + +const gridsReducer = require("resource://devtools/client/inspector/grids/reducers/grids.js"); +const highlighterSettingsReducer = require("resource://devtools/client/inspector/grids/reducers/highlighter-settings.js"); +const { + updateGridColor, + updateGridHighlighted, + updateGrids, +} = require("resource://devtools/client/inspector/grids/actions/grids.js"); +const { + updateShowGridAreas, + updateShowGridLineNumbers, + updateShowInfiniteLines, +} = require("resource://devtools/client/inspector/grids/actions/highlighter-settings.js"); + +loader.lazyRequireGetter( + this, + "compareFragmentsGeometry", + "resource://devtools/client/inspector/grids/utils/utils.js", + true +); +loader.lazyRequireGetter( + this, + "parseURL", + "resource://devtools/client/shared/source-utils.js", + true +); +loader.lazyRequireGetter( + this, + "asyncStorage", + "resource://devtools/shared/async-storage.js" +); + +const CSS_GRID_COUNT_HISTOGRAM_ID = "DEVTOOLS_NUMBER_OF_CSS_GRIDS_IN_A_PAGE"; + +const SHOW_GRID_AREAS = "devtools.gridinspector.showGridAreas"; +const SHOW_GRID_LINE_NUMBERS = "devtools.gridinspector.showGridLineNumbers"; +const SHOW_INFINITE_LINES_PREF = "devtools.gridinspector.showInfiniteLines"; + +const TELEMETRY_GRID_AREAS_OVERLAY_CHECKED = + "devtools.grid.showGridAreasOverlay.checked"; +const TELEMETRY_GRID_LINE_NUMBERS_CHECKED = + "devtools.grid.showGridLineNumbers.checked"; +const TELEMETRY_INFINITE_LINES_CHECKED = + "devtools.grid.showInfiniteLines.checked"; + +// Default grid colors. +const GRID_COLORS = [ + "#9400FF", + "#DF00A9", + "#0A84FF", + "#12BC00", + "#EA8000", + "#00B0BD", + "#D70022", + "#4B42FF", + "#B5007F", + "#058B00", + "#A47F00", + "#005A71", +]; + +class GridInspector { + constructor(inspector, window) { + this.document = window.document; + this.inspector = inspector; + this.store = inspector.store; + this.telemetry = inspector.telemetry; + + // Maximum number of grid highlighters that can be displayed. + this.maxHighlighters = Services.prefs.getIntPref( + "devtools.gridinspector.maxHighlighters" + ); + + this.store.injectReducer("grids", gridsReducer); + this.store.injectReducer("highlighterSettings", highlighterSettingsReducer); + + this.onHighlighterShown = this.onHighlighterShown.bind(this); + this.onHighlighterHidden = this.onHighlighterHidden.bind(this); + this.onNavigate = this.onNavigate.bind(this); + this.onReflow = throttle(this.onReflow, 500, this); + this.onSetGridOverlayColor = this.onSetGridOverlayColor.bind(this); + this.onSidebarSelect = this.onSidebarSelect.bind(this); + this.onToggleGridHighlighter = this.onToggleGridHighlighter.bind(this); + this.onToggleShowGridAreas = this.onToggleShowGridAreas.bind(this); + this.onToggleShowGridLineNumbers = + this.onToggleShowGridLineNumbers.bind(this); + this.onToggleShowInfiniteLines = this.onToggleShowInfiniteLines.bind(this); + this.updateGridPanel = this.updateGridPanel.bind(this); + this.listenForGridHighlighterEvents = + this.listenForGridHighlighterEvents.bind(this); + + this.init(); + } + + get highlighters() { + if (!this._highlighters) { + this._highlighters = this.inspector.highlighters; + } + + return this._highlighters; + } + + /** + * Initializes the grid inspector by fetching the LayoutFront from the walker and + * loading the highlighter settings. + */ + async init() { + if (!this.inspector) { + return; + } + + if (flags.testing) { + // In tests, we start listening immediately to avoid having to simulate a mousemove. + this.listenForGridHighlighterEvents(); + } else { + this.document.addEventListener( + "mousemove", + this.listenForGridHighlighterEvents, + { + once: true, + } + ); + } + + this.inspector.sidebar.on("select", this.onSidebarSelect); + this.inspector.on("new-root", this.onNavigate); + + this.onSidebarSelect(); + } + + listenForGridHighlighterEvents() { + this.highlighters.on("grid-highlighter-hidden", this.onHighlighterHidden); + this.highlighters.on("grid-highlighter-shown", this.onHighlighterShown); + } + + /** + * Get the LayoutActor fronts for all interesting targets where we have inspectors. + * + * @return {Array} The list of LayoutActor fronts + */ + async getLayoutFronts() { + const inspectorFronts = await this.inspector.getAllInspectorFronts(); + const layoutFronts = await Promise.all( + inspectorFronts.map(({ walker }) => walker.getLayoutInspector()) + ); + return layoutFronts.filter(front => !front.isDestroyed()); + } + + /** + * Destruction function called when the inspector is destroyed. Removes event listeners + * and cleans up references. + */ + destroy() { + if (this._highlighters) { + this.highlighters.off( + "grid-highlighter-hidden", + this.onHighlighterHidden + ); + this.highlighters.off("grid-highlighter-shown", this.onHighlighterShown); + } + this.document.removeEventListener( + "mousemove", + this.listenForGridHighlighterEvents + ); + + this.inspector.sidebar.off("select", this.onSidebarSelect); + this.inspector.off("new-root", this.onNavigate); + + this.inspector.off("reflow-in-selected-target", this.onReflow); + + this._highlighters = null; + this.document = null; + this.inspector = null; + this.store = null; + } + + getComponentProps() { + return { + onSetGridOverlayColor: this.onSetGridOverlayColor, + onToggleGridHighlighter: this.onToggleGridHighlighter, + onToggleShowGridAreas: this.onToggleShowGridAreas, + onToggleShowGridLineNumbers: this.onToggleShowGridLineNumbers, + onToggleShowInfiniteLines: this.onToggleShowInfiniteLines, + }; + } + + /** + * Returns the initial color linked to a grid container. Will attempt to check the + * current grid highlighter state and the store. + * + * @param {NodeFront} nodeFront + * The NodeFront for which we need the color. + * @param {String} customColor + * The color fetched from the custom palette, if it exists. + * @param {String} fallbackColor + * The color to use if no color could be found for the node front. + * @return {String} color + * The color to use. + */ + getInitialGridColor(nodeFront, customColor, fallbackColor) { + const highlighted = this.highlighters.gridHighlighters.has(nodeFront); + + let color; + if (customColor) { + color = customColor; + } else if ( + highlighted && + this.highlighters.state.grids.has(nodeFront.actorID) + ) { + // If the node front is currently highlighted, use the color from the highlighter + // options. + color = this.highlighters.state.grids.get(nodeFront.actorID).options + .color; + } else { + // Otherwise use the color defined in the store for this node front. + color = this.getGridColorForNodeFront(nodeFront); + } + + return color || fallbackColor; + } + + /** + * Returns the color set for the grid highlighter associated with the provided + * nodeFront. + * + * @param {NodeFront} nodeFront + * The NodeFront for which we need the color. + */ + getGridColorForNodeFront(nodeFront) { + const { grids } = this.store.getState(); + + for (const grid of grids) { + if (grid.nodeFront === nodeFront) { + return grid.color; + } + } + + return null; + } + + /** + * Given a list of new grid fronts, and if there are highlighted grids, check + * if their fragments have changed. + * + * @param {Array} newGridFronts + * A list of GridFront objects. + * @return {Boolean} + */ + haveCurrentFragmentsChanged(newGridFronts) { + const gridHighlighters = this.highlighters.gridHighlighters; + + if (!gridHighlighters.size) { + return false; + } + + const gridFronts = newGridFronts.filter(g => + gridHighlighters.has(g.containerNodeFront) + ); + if (!gridFronts.length) { + return false; + } + + const { grids } = this.store.getState(); + + for (const node of gridHighlighters.keys()) { + const oldFragments = grids.find(g => g.nodeFront === node).gridFragments; + const newFragments = newGridFronts.find( + g => g.containerNodeFront === node + ).gridFragments; + + if (!compareFragmentsGeometry(oldFragments, newFragments)) { + return true; + } + } + + return false; + } + + /** + * Returns true if the layout panel is visible, and false otherwise. + */ + isPanelVisible() { + return ( + this.inspector && + this.inspector.toolbox && + this.inspector.sidebar && + this.inspector.toolbox.currentToolId === "inspector" && + this.inspector.sidebar.getCurrentTabID() === "layoutview" + ); + } + + /** + * Updates the grid panel by dispatching the new grid data. This is called when the + * layout view becomes visible or the view needs to be updated with new grid data. + */ + async updateGridPanel() { + // Stop refreshing if the inspector or store is already destroyed. + if (!this.inspector || !this.store) { + return; + } + + try { + await this._updateGridPanel(); + } catch (e) { + this._throwUnlessDestroyed( + e, + "Inspector destroyed while executing updateGridPanel" + ); + } + } + + async _updateGridPanel() { + const gridFronts = await this.getGrids(); + + if (!gridFronts.length) { + try { + this.store.dispatch(updateGrids([])); + this.inspector.emit("grid-panel-updated"); + return; + } catch (e) { + // This call might fail if called asynchrously after the toolbox is finished + // closing. + return; + } + } + + const currentUrl = this.inspector.currentTarget.url; + + // Log how many CSS Grid elements DevTools sees. + if (currentUrl != this.inspector.previousURL) { + this.telemetry + .getHistogramById(CSS_GRID_COUNT_HISTOGRAM_ID) + .add(gridFronts.length); + this.inspector.previousURL = currentUrl; + } + + // Get the hostname, if there is no hostname, fall back on protocol + // ex: `data:` uri, and `about:` pages + const hostname = + parseURL(currentUrl).hostname || parseURL(currentUrl).protocol; + const customColors = + (await asyncStorage.getItem("gridInspectorHostColors")) || {}; + + const grids = []; + for (let i = 0; i < gridFronts.length; i++) { + const grid = gridFronts[i]; + let nodeFront = grid.containerNodeFront; + + // If the GridFront didn't yet have access to the NodeFront for its container, then + // get it from the walker. This happens when the walker hasn't yet seen this + // particular DOM Node in the tree yet, or when we are connected to an older server. + if (!nodeFront) { + try { + nodeFront = await grid.walkerFront.getNodeFromActor(grid.actorID, [ + "containerEl", + ]); + } catch (e) { + // This call might fail if called asynchrously after the toolbox is finished + // closing. + return; + } + } + + const colorForHost = customColors[hostname] + ? customColors[hostname][i] + : null; + const fallbackColor = GRID_COLORS[i % GRID_COLORS.length]; + const color = this.getInitialGridColor( + nodeFront, + colorForHost, + fallbackColor + ); + const highlighted = this.highlighters.gridHighlighters.has(nodeFront); + const disabled = + !highlighted && + this.maxHighlighters > 1 && + this.highlighters.gridHighlighters.size === this.maxHighlighters; + const isSubgrid = grid.isSubgrid; + const gridData = { + id: i, + actorID: grid.actorID, + color, + disabled, + direction: grid.direction, + gridFragments: grid.gridFragments, + highlighted, + isSubgrid, + nodeFront, + parentNodeActorID: null, + subgrids: [], + writingMode: grid.writingMode, + }; + + if (isSubgrid) { + let parentGridNodeFront; + + try { + parentGridNodeFront = await nodeFront.walkerFront.getParentGridNode( + nodeFront + ); + } catch (e) { + // This call might fail if called asynchrously after the toolbox is finished + // closing. + return; + } + + if (!parentGridNodeFront) { + return; + } + + const parentIndex = grids.findIndex( + g => g.nodeFront.actorID === parentGridNodeFront.actorID + ); + gridData.parentNodeActorID = parentGridNodeFront.actorID; + grids[parentIndex].subgrids.push(gridData.id); + } + + grids.push(gridData); + } + + // We need to make sure that nested subgrids are displayed above their parent grid + // containers, so update the z-index of each grid before rendering them. + for (const root of grids.filter(g => !g.parentNodeActorID)) { + this._updateZOrder(grids, root); + } + + this.store.dispatch(updateGrids(grids)); + this.inspector.emit("grid-panel-updated"); + } + + /** + * Get all GridFront instances from the server(s). + * + * + * @return {Array} The list of GridFronts + */ + async getGrids() { + const promises = []; + try { + const layoutFronts = await this.getLayoutFronts(); + for (const layoutFront of layoutFronts) { + promises.push(layoutFront.getAllGrids()); + } + } catch (e) { + // This call might fail if called asynchrously after the toolbox is finished closing + } + + const gridFronts = (await Promise.all(promises)).flat(); + return gridFronts; + } + + /** + * Handler for "grid-highlighter-shown" events emitted from the + * HighlightersOverlay. Passes nodefront and event name to handleHighlighterChange. + * Required since on and off events need the same reference object. + * + * @param {NodeFront} nodeFront + * The NodeFront of the grid container element for which the grid + * highlighter is shown for. + */ + onHighlighterShown(nodeFront) { + this.onHighlighterChange(nodeFront, true); + } + + /** + * Handler for "grid-highlighter-hidden" events emitted from the + * HighlightersOverlay. Passes nodefront and event name to handleHighlighterChange. + * Required since on and off events need the same reference object. + * + * @param {NodeFront} nodeFront + * The NodeFront of the grid container element for which the grid highlighter + * is hidden for. + */ + onHighlighterHidden(nodeFront) { + this.onHighlighterChange(nodeFront, false); + } + + /** + * Handler for "grid-highlighter-shown" and "grid-highlighter-hidden" events emitted + * from the HighlightersOverlay. Updates the NodeFront's grid highlighted state. + * + * @param {NodeFront} nodeFront + * The NodeFront of the grid container element for which the grid highlighter + * is shown for. + * @param {Boolean} highlighted + * If the grid should be updated to highlight or hide. + */ + onHighlighterChange(nodeFront, highlighted) { + if (!this.isPanelVisible()) { + return; + } + + const { grids } = this.store.getState(); + const grid = grids.find(g => g.nodeFront === nodeFront); + + if (!grid || grid.highlighted === highlighted) { + return; + } + + this.store.dispatch(updateGridHighlighted(nodeFront, highlighted)); + } + + /** + * Handler for "new-root" event fired by the inspector, which indicates a page + * navigation. Updates grid panel contents. + */ + onNavigate() { + if (this.isPanelVisible()) { + this.updateGridPanel(); + } + } + + /** + * Handler for reflow events fired by the inspector when a node is selected. On reflows, + * update the grid panel content, because the shape or number of grids on the page may + * have changed. + * + * Note that there may be frequent reflows on the page and that not all of them actually + * cause the grids to change. So, we want to limit how many times we update the grid + * panel to only reflows that actually either change the list of grids, or those that + * change the current outlined grid. + * To achieve this, this function compares the list of grid containers from before and + * after the reflow, as well as the grid fragment data on the currently highlighted + * grid. + */ + async onReflow() { + try { + if (!this.isPanelVisible()) { + return; + } + + // The list of grids currently displayed. + const { grids } = this.store.getState(); + + // The new list of grids from the server. + const newGridFronts = await this.getGrids(); + + // In some cases, the nodes for current grids may have been removed from the DOM in + // which case we need to update. + if (grids.length && grids.some(grid => !grid.nodeFront.actorID)) { + await this.updateGridPanel(newGridFronts); + return; + } + + // Get the node front(s) from the current grid(s) so we can compare them to them to + // the node(s) of the new grids. + const oldNodeFronts = grids.map(grid => grid.nodeFront.actorID); + const newNodeFronts = newGridFronts + .filter(grid => grid.containerNode) + .map(grid => grid.containerNodeFront.actorID); + + if ( + grids.length === newGridFronts.length && + oldNodeFronts.sort().join(",") == newNodeFronts.sort().join(",") && + !this.haveCurrentFragmentsChanged(newGridFronts) + ) { + // Same list of containers and the geometry of all the displayed grids remained the + // same, we can safely abort. + return; + } + + // Either the list of containers or the current fragments have changed, do update. + await this.updateGridPanel(newGridFronts); + } catch (e) { + this._throwUnlessDestroyed( + e, + "Inspector destroyed while executing onReflow callback" + ); + } + } + + /** + * Handler for a change in the grid overlay color picker for a grid container. + * + * @param {NodeFront} node + * The NodeFront of the grid container element for which the grid color is + * being updated. + * @param {String} color + * A hex string representing the color to use. + */ + async onSetGridOverlayColor(node, color) { + this.store.dispatch(updateGridColor(node, color)); + + const { grids } = this.store.getState(); + const currentUrl = this.inspector.currentTarget.url; + // Get the hostname, if there is no hostname, fall back on protocol + // ex: `data:` uri, and `about:` pages + const hostname = + parseURL(currentUrl).hostname || parseURL(currentUrl).protocol; + const customGridColors = + (await asyncStorage.getItem("gridInspectorHostColors")) || {}; + + for (const grid of grids) { + if (grid.nodeFront !== node) { + continue; + } + + if (!customGridColors[hostname]) { + customGridColors[hostname] = []; + } + // Update the custom color for the grid in this position. + customGridColors[hostname][grid.id] = color; + await asyncStorage.setItem("gridInspectorHostColors", customGridColors); + + if (!this.isPanelVisible()) { + // This call might fail if called asynchrously after the toolbox is finished + // closing. + return; + } + + // If the grid for which the color was updated currently has a highlighter, update + // the color. + if (this.highlighters.gridHighlighters.has(node)) { + this.highlighters.showGridHighlighter(node); + continue; + } + + // If the node is not explicitly highlighted, but is a parent grid which has an + // highlighted subgrid, we also want to update the color. + const subGrid = grids.find(({ id }) => grid.subgrids.includes(id)); + if (subGrid?.highlighted) { + this.highlighters.showParentGridHighlighter(node); + } + } + } + + /** + * Handler for the inspector sidebar "select" event. Starts tracking reflows + * if the layout panel is visible. Otherwise, stop tracking reflows. + * Finally, refresh the layout view if it is visible. + */ + onSidebarSelect() { + if (!this.isPanelVisible()) { + this.inspector.off("reflow-in-selected-target", this.onReflow); + return; + } + + this.inspector.on("reflow-in-selected-target", this.onReflow); + this.updateGridPanel(); + } + + /** + * Handler for a change in the input checkboxes in the GridList component. + * Toggles on/off the grid highlighter for the provided grid container element. + * + * @param {NodeFront} node + * The NodeFront of the grid container element for which the grid + * highlighter is toggled on/off for. + */ + onToggleGridHighlighter(node) { + const { grids } = this.store.getState(); + const grid = grids.find(g => g.nodeFront === node); + this.store.dispatch(updateGridHighlighted(node, !grid.highlighted)); + this.highlighters.toggleGridHighlighter(node, "grid"); + } + + /** + * Handler for a change in the show grid areas checkbox in the GridDisplaySettings + * component. Toggles on/off the option to show the grid areas in the grid highlighter. + * Refreshes the shown grid highlighter for the grids currently highlighted. + * + * @param {Boolean} enabled + * Whether or not the grid highlighter should show the grid areas. + */ + onToggleShowGridAreas(enabled) { + this.store.dispatch(updateShowGridAreas(enabled)); + Services.prefs.setBoolPref(SHOW_GRID_AREAS, enabled); + + if (enabled) { + this.telemetry.scalarSet(TELEMETRY_GRID_AREAS_OVERLAY_CHECKED, 1); + } + + const { grids } = this.store.getState(); + + for (const grid of grids) { + if (grid.highlighted) { + this.highlighters.showGridHighlighter(grid.nodeFront); + } + } + } + + /** + * Handler for a change in the show grid line numbers checkbox in the + * GridDisplaySettings component. Toggles on/off the option to show the grid line + * numbers in the grid highlighter. Refreshes the shown grid highlighter for the + * grids currently highlighted. + * + * @param {Boolean} enabled + * Whether or not the grid highlighter should show the grid line numbers. + */ + onToggleShowGridLineNumbers(enabled) { + this.store.dispatch(updateShowGridLineNumbers(enabled)); + Services.prefs.setBoolPref(SHOW_GRID_LINE_NUMBERS, enabled); + + if (enabled) { + this.telemetry.scalarSet(TELEMETRY_GRID_LINE_NUMBERS_CHECKED, 1); + } + + const { grids } = this.store.getState(); + + for (const grid of grids) { + if (grid.highlighted) { + this.highlighters.showGridHighlighter(grid.nodeFront); + } + } + } + + /** + * Handler for a change in the extend grid lines infinitely checkbox in the + * GridDisplaySettings component. Toggles on/off the option to extend the grid + * lines infinitely in the grid highlighter. Refreshes the shown grid highlighter + * for grids currently highlighted. + * + * @param {Boolean} enabled + * Whether or not the grid highlighter should extend grid lines infinitely. + */ + onToggleShowInfiniteLines(enabled) { + this.store.dispatch(updateShowInfiniteLines(enabled)); + Services.prefs.setBoolPref(SHOW_INFINITE_LINES_PREF, enabled); + + if (enabled) { + this.telemetry.scalarSet(TELEMETRY_INFINITE_LINES_CHECKED, 1); + } + + const { grids } = this.store.getState(); + + for (const grid of grids) { + if (grid.highlighted) { + this.highlighters.showGridHighlighter(grid.nodeFront); + } + } + } + + /** + * Some grid-inspector methods are highly asynchronous and might still run + * after the inspector was destroyed. Swallow errors if the grid inspector is + * already destroyed, throw otherwise. + * + * @param {Error} error + * The original error object. + * @param {String} message + * The message to log in case the inspector is already destroyed and + * the error is swallowed. + */ + _throwUnlessDestroyed(error, message) { + if (!this.inspector) { + console.warn(message); + } else { + // If the grid inspector was not destroyed, this is an unexpected error. + throw error; + } + } + + /** + * Set z-index of each grids so that nested subgrids are always above their parent grid + * container. + * + * @param {Array} grids + * A list of grid data. + * @param {Object} parent + * A grid data of parent. + * @param {Number} zIndex + * z-index for the parent. + */ + _updateZOrder(grids, parent, zIndex = 0) { + parent.zIndex = zIndex; + + for (const childIndex of parent.subgrids) { + // Recurse into children grids. + this._updateZOrder(grids, grids[childIndex], zIndex + 1); + } + } +} + +module.exports = GridInspector; diff --git a/devtools/client/inspector/grids/moz.build b/devtools/client/inspector/grids/moz.build new file mode 100644 index 0000000000..11296ddef2 --- /dev/null +++ b/devtools/client/inspector/grids/moz.build @@ -0,0 +1,20 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +DIRS += [ + "actions", + "components", + "reducers", + "utils", +] + +DevToolsModules( + "grid-inspector.js", + "types.js", +) + +BROWSER_CHROME_MANIFESTS += ["test/browser.toml"] +XPCSHELL_TESTS_MANIFESTS += ["test/xpcshell/xpcshell.toml"] diff --git a/devtools/client/inspector/grids/reducers/grids.js b/devtools/client/inspector/grids/reducers/grids.js new file mode 100644 index 0000000000..5ab8bb5060 --- /dev/null +++ b/devtools/client/inspector/grids/reducers/grids.js @@ -0,0 +1,87 @@ +/* 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 { + UPDATE_GRID_COLOR, + UPDATE_GRID_HIGHLIGHTED, + UPDATE_GRIDS, +} = require("resource://devtools/client/inspector/grids/actions/index.js"); + +const INITIAL_GRIDS = []; + +const reducers = { + [UPDATE_GRID_COLOR](grids, { nodeFront, color }) { + const newGrids = grids.map(g => { + if (g.nodeFront === nodeFront) { + g = Object.assign({}, g, { color }); + } + + return g; + }); + + return newGrids; + }, + + [UPDATE_GRID_HIGHLIGHTED](grids, { nodeFront, highlighted }) { + const maxHighlighters = Services.prefs.getIntPref( + "devtools.gridinspector.maxHighlighters" + ); + const highlightedNodeFronts = grids + .filter(g => g.highlighted) + .map(g => g.nodeFront); + let numHighlighted = highlightedNodeFronts.length; + + // Get the total number of highlighted grids including the one that will be + // highlighted/unhighlighted. + if (!highlightedNodeFronts.includes(nodeFront) && highlighted) { + numHighlighted += 1; + } else if (highlightedNodeFronts.includes(nodeFront) && !highlighted) { + numHighlighted -= 1; + } + + return grids.map(g => { + if (maxHighlighters === 1) { + // When there is only one grid highlighter available, only the given grid + // container nodeFront can be highlighted, and all the other grid containers + // are unhighlighted. + return Object.assign({}, g, { + highlighted: g.nodeFront === nodeFront && highlighted, + }); + } else if ( + numHighlighted === maxHighlighters && + g.nodeFront !== nodeFront + ) { + // The maximum number of highlighted grids have been reached. Disable all the + // other non-highlighted grids. + return Object.assign({}, g, { + disabled: !g.highlighted, + }); + } else if (g.nodeFront === nodeFront) { + // This is the provided grid nodeFront to highlight/unhighlight. + return Object.assign({}, g, { + disabled: false, + highlighted, + }); + } + + return Object.assign({}, g, { + disabled: false, + }); + }); + }, + + [UPDATE_GRIDS](_, { grids }) { + return grids; + }, +}; + +module.exports = function (grids = INITIAL_GRIDS, action) { + const reducer = reducers[action.type]; + if (!reducer) { + return grids; + } + return reducer(grids, action); +}; diff --git a/devtools/client/inspector/grids/reducers/highlighter-settings.js b/devtools/client/inspector/grids/reducers/highlighter-settings.js new file mode 100644 index 0000000000..3568390df6 --- /dev/null +++ b/devtools/client/inspector/grids/reducers/highlighter-settings.js @@ -0,0 +1,54 @@ +/* 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 { + UPDATE_SHOW_GRID_AREAS, + UPDATE_SHOW_GRID_LINE_NUMBERS, + UPDATE_SHOW_INFINITE_LINES, +} = require("resource://devtools/client/inspector/grids/actions/index.js"); + +const SHOW_GRID_AREAS = "devtools.gridinspector.showGridAreas"; +const SHOW_GRID_LINE_NUMBERS = "devtools.gridinspector.showGridLineNumbers"; +const SHOW_INFINITE_LINES = "devtools.gridinspector.showInfiniteLines"; + +const INITIAL_HIGHLIGHTER_SETTINGS = () => { + return { + showGridAreasOverlay: Services.prefs.getBoolPref(SHOW_GRID_AREAS), + showGridLineNumbers: Services.prefs.getBoolPref(SHOW_GRID_LINE_NUMBERS), + showInfiniteLines: Services.prefs.getBoolPref(SHOW_INFINITE_LINES), + }; +}; + +const reducers = { + [UPDATE_SHOW_GRID_AREAS](highlighterSettings, { enabled }) { + return Object.assign({}, highlighterSettings, { + showGridAreasOverlay: enabled, + }); + }, + + [UPDATE_SHOW_GRID_LINE_NUMBERS](highlighterSettings, { enabled }) { + return Object.assign({}, highlighterSettings, { + showGridLineNumbers: enabled, + }); + }, + + [UPDATE_SHOW_INFINITE_LINES](highlighterSettings, { enabled }) { + return Object.assign({}, highlighterSettings, { + showInfiniteLines: enabled, + }); + }, +}; + +module.exports = function ( + highlighterSettings = INITIAL_HIGHLIGHTER_SETTINGS(), + action +) { + const reducer = reducers[action.type]; + if (!reducer) { + return highlighterSettings; + } + return reducer(highlighterSettings, action); +}; diff --git a/devtools/client/inspector/grids/reducers/moz.build b/devtools/client/inspector/grids/reducers/moz.build new file mode 100644 index 0000000000..768e29b542 --- /dev/null +++ b/devtools/client/inspector/grids/reducers/moz.build @@ -0,0 +1,10 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +DevToolsModules( + "grids.js", + "highlighter-settings.js", +) diff --git a/devtools/client/inspector/grids/test/browser.toml b/devtools/client/inspector/grids/test/browser.toml new file mode 100644 index 0000000000..f492362d97 --- /dev/null +++ b/devtools/client/inspector/grids/test/browser.toml @@ -0,0 +1,86 @@ +[DEFAULT] +tags = "devtools" +subsuite = "devtools" +support-files = [ + "doc_iframe_reloaded.html", + "doc_subgrid.html", + "head.js", + "!/devtools/client/inspector/test/head.js", + "!/devtools/client/inspector/test/shared-head.js", + "!/devtools/client/shared/test/shared-head.js", + "!/devtools/client/shared/test/telemetry-test-helpers.js", + "!/devtools/client/shared/test/highlighter-test-actor.js", +] + +["browser_grids_accordion-state.js"] +fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and/or labeled + +["browser_grids_color-in-rules-grid-toggle.js"] + +["browser_grids_display-setting-extend-grid-lines.js"] + +["browser_grids_display-setting-show-grid-areas.js"] + +["browser_grids_display-setting-show-grid-line-numbers.js"] + +["browser_grids_grid-list-color-picker-on-ESC.js"] + +["browser_grids_grid-list-color-picker-on-RETURN.js"] + +["browser_grids_grid-list-element-rep.js"] + +["browser_grids_grid-list-no-grids.js"] + +["browser_grids_grid-list-on-iframe-reloaded.js"] +skip-if = ["verify && (os == 'win' || os == 'linux')"] + +["browser_grids_grid-list-on-mutation-element-added.js"] +skip-if = ["true"] #Bug 1557326 + +["browser_grids_grid-list-on-mutation-element-removed.js"] + +["browser_grids_grid-list-on-target-added-removed.js"] + +["browser_grids_grid-list-subgrids-z-order.js"] + +["browser_grids_grid-list-subgrids_01.js"] + +["browser_grids_grid-list-subgrids_02.js"] + +["browser_grids_grid-list-toggle-grids_01.js"] + +["browser_grids_grid-list-toggle-grids_02.js"] + +["browser_grids_grid-list-toggle-multiple-grids.js"] + +["browser_grids_grid-outline-cannot-show-outline.js"] + +["browser_grids_grid-outline-highlight-area.js"] + +["browser_grids_grid-outline-highlight-cell.js"] + +["browser_grids_grid-outline-multiple-grids.js"] + +["browser_grids_grid-outline-selected-grid.js"] + +["browser_grids_grid-outline-updates-on-grid-change.js"] +skip-if = [ + "os == 'linux'", + "os == 'mac'", + "os == 'win' && (debug || asan)", #Bug 1557181 +] + +["browser_grids_grid-outline-writing-mode.js"] +skip-if = ["verify && os == 'win'"] + +["browser_grids_highlighter-setting-rules-grid-toggle.js"] + +["browser_grids_highlighter-toggle-telemetry.js"] + +["browser_grids_number-of-css-grids-telemetry.js"] + +["browser_grids_persist-color-palette.js"] + +["browser_grids_restored-after-reload.js"] + +["browser_grids_restored-multiple-grids-after-reload.js"] diff --git a/devtools/client/inspector/grids/test/browser_grids_accordion-state.js b/devtools/client/inspector/grids/test/browser_grids_accordion-state.js new file mode 100644 index 0000000000..c02fc85dfa --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_accordion-state.js @@ -0,0 +1,108 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the grid's accordion state is persistent through hide/show in the layout +// view. + +const TEST_URI = ` + <style type='text/css'> + #grid { + display: grid; + } + </style> + <div id="grid"> + <div id="cell1">cell1</div> + <div id="cell2">cell2</div> + </div> +`; + +const GRID_OPENED_PREF = "devtools.layout.grid.opened"; +const GRID_PANE_SELECTOR = "#layout-grid-section"; +const ACCORDION_HEADER_SELECTOR = ".accordion-header"; +const ACCORDION_CONTENT_SELECTOR = ".accordion-content"; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, gridInspector, toolbox } = await openLayoutView(); + const { document: doc } = gridInspector; + + await testAccordionStateAfterClickingHeader(doc); + await testAccordionStateAfterSwitchingSidebars(inspector, doc); + await testAccordionStateAfterReopeningLayoutView(toolbox); + + Services.prefs.clearUserPref(GRID_OPENED_PREF); +}); + +async function testAccordionStateAfterClickingHeader(doc) { + const item = await waitFor(() => doc.querySelector(GRID_PANE_SELECTOR)); + const header = item.querySelector(ACCORDION_HEADER_SELECTOR); + const content = item.querySelector(ACCORDION_CONTENT_SELECTOR); + + info("Checking initial state of the grid panel."); + ok( + !content.hidden && content.childElementCount > 0, + "The grid panel content is visible." + ); + ok( + Services.prefs.getBoolPref(GRID_OPENED_PREF), + `${GRID_OPENED_PREF} is pref on by default.` + ); + + info("Clicking the grid header to hide the grid panel."); + header.click(); + + info("Checking the new state of the grid panel."); + ok(content.hidden, "The grid panel content is hidden."); + ok( + !Services.prefs.getBoolPref(GRID_OPENED_PREF), + `${GRID_OPENED_PREF} is pref off.` + ); +} + +async function testAccordionStateAfterSwitchingSidebars(inspector, doc) { + info( + "Checking the grid accordion state is persistent after switching sidebars." + ); + + info("Selecting the computed view."); + inspector.sidebar.select("computedview"); + + info("Selecting the layout view."); + inspector.sidebar.select("layoutview"); + + const item = await waitFor(() => doc.querySelector(GRID_PANE_SELECTOR)); + const content = item.querySelector(ACCORDION_CONTENT_SELECTOR); + + info("Checking the state of the grid panel."); + ok(content.hidden, "The grid panel content is hidden."); + ok( + !Services.prefs.getBoolPref(GRID_OPENED_PREF), + `${GRID_OPENED_PREF} is pref off.` + ); +} + +async function testAccordionStateAfterReopeningLayoutView(toolbox) { + info( + "Checking the grid accordion state is persistent after closing and re-opening the " + + "layout view." + ); + + info("Closing the toolbox."); + await toolbox.destroy(); + + info("Re-opening the layout view."); + const { gridInspector } = await openLayoutView(); + const { document: doc } = gridInspector; + + const item = await waitFor(() => doc.querySelector(GRID_PANE_SELECTOR)); + const content = item.querySelector(ACCORDION_CONTENT_SELECTOR); + + info("Checking the state of the grid panel."); + ok(content.hidden, "The grid panel content is hidden."); + ok( + !Services.prefs.getBoolPref(GRID_OPENED_PREF), + `${GRID_OPENED_PREF} is pref off.` + ); +} diff --git a/devtools/client/inspector/grids/test/browser_grids_color-in-rules-grid-toggle.js b/devtools/client/inspector/grids/test/browser_grids_color-in-rules-grid-toggle.js new file mode 100644 index 0000000000..a12f4f2435 --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_color-in-rules-grid-toggle.js @@ -0,0 +1,93 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test toggling the grid highlighter in the rule view with changes to the grid color +// from the layout view. + +const TEST_URI = ` + <style type='text/css'> + #grid { + display: grid; + } + </style> + <div id="grid"> + <div id="cell1">cell1</div> + <div id="cell2">cell2</div> + </div> +`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, gridInspector, layoutView } = await openLayoutView(); + const { document: doc } = gridInspector; + const { store } = inspector; + const cPicker = layoutView.swatchColorPickerTooltip; + const spectrum = cPicker.spectrum; + const swatch = doc.querySelector( + "#layout-grid-container .layout-color-swatch" + ); + + info("Scrolling into view of the #grid color swatch."); + swatch.scrollIntoView(); + + info("Opening the color picker by clicking on the #grid color swatch."); + const onColorPickerReady = cPicker.once("ready"); + swatch.click(); + await onColorPickerReady; + + await simulateColorPickerChange(cPicker, [0, 255, 0, 0.5]); + + is( + swatch.style.backgroundColor, + "rgba(0, 255, 0, 0.5)", + "The color swatch's background was updated." + ); + + info("Pressing RETURN to commit the color change."); + const onGridColorUpdate = waitUntilState( + store, + state => state.grids[0].color === "#00FF0080" + ); + const onColorPickerHidden = cPicker.tooltip.once("hidden"); + focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN"); + await onColorPickerHidden; + await onGridColorUpdate; + + is( + swatch.style.backgroundColor, + "rgba(0, 255, 0, 0.5)", + "The color swatch's background was kept after RETURN." + ); + + info("Selecting the rule view."); + const ruleView = selectRuleView(inspector); + const highlighters = ruleView.highlighters; + + await selectNode("#grid", inspector); + + const container = getRuleViewProperty(ruleView, "#grid", "display").valueSpan; + const gridToggle = container.querySelector(".js-toggle-grid-highlighter"); + + info("Toggling ON the CSS grid highlighter from the rule-view."); + const onHighlighterShown = highlighters.once( + "grid-highlighter-shown", + (nodeFront, options) => { + info("Checking the grid highlighter display settings."); + const { + color, + showGridAreasOverlay, + showGridLineNumbers, + showInfiniteLines, + } = options; + + is(color, "#00FF0080", "CSS grid highlighter color is correct."); + ok(!showGridAreasOverlay, "Show grid areas overlay option is off."); + ok(!showGridLineNumbers, "Show grid line numbers option is off."); + ok(!showInfiniteLines, "Show infinite lines option is off."); + } + ); + gridToggle.click(); + await onHighlighterShown; +}); diff --git a/devtools/client/inspector/grids/test/browser_grids_display-setting-extend-grid-lines.js b/devtools/client/inspector/grids/test/browser_grids_display-setting-extend-grid-lines.js new file mode 100644 index 0000000000..89f2bb36dd --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_display-setting-extend-grid-lines.js @@ -0,0 +1,59 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the 'Extend grid lines infinitely' grid highlighter setting will update +// the redux store and pref setting. + +const TEST_URI = ` + <style type='text/css'> + #grid { + display: grid; + } + </style> + <div id="grid"> + <div id="cell1">cell1</div> + <div id="cell2">cell2</div> + </div> +`; + +const SHOW_INFINITE_LINES_PREF = "devtools.gridinspector.showInfiniteLines"; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, gridInspector } = await openLayoutView(); + const { document: doc } = gridInspector; + const { store } = inspector; + + await selectNode("#grid", inspector); + const checkbox = doc.getElementById("grid-setting-extend-grid-lines"); + + ok( + !Services.prefs.getBoolPref(SHOW_INFINITE_LINES_PREF), + "'Extend grid lines infinitely' is pref off by default." + ); + + info("Toggling ON the 'Extend grid lines infinitely' setting."); + let onCheckboxChange = waitUntilState( + store, + state => state.highlighterSettings.showInfiniteLines + ); + checkbox.click(); + await onCheckboxChange; + + info("Toggling OFF the 'Extend grid lines infinitely' setting."); + onCheckboxChange = waitUntilState( + store, + state => !state.highlighterSettings.showInfiniteLines + ); + checkbox.click(); + await onCheckboxChange; + + ok( + !Services.prefs.getBoolPref(SHOW_INFINITE_LINES_PREF), + "'Extend grid lines infinitely' is pref off." + ); + + Services.prefs.clearUserPref(SHOW_INFINITE_LINES_PREF); +}); diff --git a/devtools/client/inspector/grids/test/browser_grids_display-setting-show-grid-areas.js b/devtools/client/inspector/grids/test/browser_grids_display-setting-show-grid-areas.js new file mode 100644 index 0000000000..afc091b7ab --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_display-setting-show-grid-areas.js @@ -0,0 +1,59 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the 'Display grid areas' grid highlighter setting will update +// the redux store and pref setting. + +const TEST_URI = ` + <style type='text/css'> + #grid { + display: grid; + } + </style> + <div id="grid"> + <div id="cell1">cell1</div> + <div id="cell2">cell2</div> + </div> +`; + +const SHOW_GRID_AREAS_PREF = "devtools.gridinspector.showGridAreas"; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, gridInspector } = await openLayoutView(); + const { document: doc } = gridInspector; + const { store } = inspector; + + await selectNode("#grid", inspector); + const checkbox = doc.getElementById("grid-setting-show-grid-areas"); + + ok( + !Services.prefs.getBoolPref(SHOW_GRID_AREAS_PREF), + "'Display grid areas' is pref off by default." + ); + + info("Toggling ON the 'Display grid areas' setting."); + let onCheckboxChange = waitUntilState( + store, + state => state.highlighterSettings.showGridAreasOverlay + ); + checkbox.click(); + await onCheckboxChange; + + info("Toggling OFF the 'Display grid areas' setting."); + onCheckboxChange = waitUntilState( + store, + state => !state.highlighterSettings.showGridAreasOverlay + ); + checkbox.click(); + await onCheckboxChange; + + ok( + !Services.prefs.getBoolPref(SHOW_GRID_AREAS_PREF), + "'Display grid areas' is pref off." + ); + + Services.prefs.clearUserPref(SHOW_GRID_AREAS_PREF); +}); diff --git a/devtools/client/inspector/grids/test/browser_grids_display-setting-show-grid-line-numbers.js b/devtools/client/inspector/grids/test/browser_grids_display-setting-show-grid-line-numbers.js new file mode 100644 index 0000000000..3dee2533cd --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_display-setting-show-grid-line-numbers.js @@ -0,0 +1,65 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the 'Display numbers on lines' grid highlighter setting will update +// the redux store and pref setting. + +const TEST_URI = ` + <style type='text/css'> + #grid { + display: grid; + } + </style> + <div id="grid"> + <div id="cell1">cell1</div> + <div id="cell2">cell2</div> + </div> +`; + +const SHOW_GRID_LINE_NUMBERS = "devtools.gridinspector.showGridLineNumbers"; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, gridInspector } = await openLayoutView(); + const { document: doc } = gridInspector; + const { store } = inspector; + + await selectNode("#grid", inspector); + const checkbox = doc.getElementById("grid-setting-show-grid-line-numbers"); + + info("Checking the initial state of the CSS grid highlighter setting."); + ok( + !Services.prefs.getBoolPref(SHOW_GRID_LINE_NUMBERS), + "'Display numbers on lines' is pref off by default." + ); + + info("Toggling ON the 'Display numbers on lines' setting."); + let onCheckboxChange = waitUntilState( + store, + state => state.highlighterSettings.showGridLineNumbers + ); + checkbox.click(); + await onCheckboxChange; + + ok( + Services.prefs.getBoolPref(SHOW_GRID_LINE_NUMBERS), + "'Display numbers on lines' is pref on." + ); + + info("Toggling OFF the 'Display numbers on lines' setting."); + onCheckboxChange = waitUntilState( + store, + state => !state.highlighterSettings.showGridLineNumbers + ); + checkbox.click(); + await onCheckboxChange; + + ok( + !Services.prefs.getBoolPref(SHOW_GRID_LINE_NUMBERS), + "'Display numbers on lines' is pref off." + ); + + Services.prefs.clearUserPref(SHOW_GRID_LINE_NUMBERS); +}); diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-list-color-picker-on-ESC.js b/devtools/client/inspector/grids/test/browser_grids_grid-list-color-picker-on-ESC.js new file mode 100644 index 0000000000..661c65c6e0 --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-color-picker-on-ESC.js @@ -0,0 +1,75 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the grid item's color change in the colorpicker is reverted when ESCAPE is +// pressed. + +const TEST_URI = ` + <style type='text/css'> + #grid { + display: grid; + } + </style> + <div id="grid"> + <div id="cell1">cell1</div> + <div id="cell2">cell2</div> + </div> +`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, gridInspector, layoutView } = await openLayoutView(); + const { document: doc } = gridInspector; + const { store } = inspector; + const cPicker = layoutView.swatchColorPickerTooltip; + const spectrum = cPicker.spectrum; + const swatch = doc.querySelector( + "#layout-grid-container .layout-color-swatch" + ); + + info("Checking the initial state of the Grid Inspector."); + is( + swatch.style.backgroundColor, + "rgb(148, 0, 255)", + "The color swatch's background is correct." + ); + is( + store.getState().grids[0].color, + "#9400FF", + "The grid color state is correct." + ); + + info("Scrolling into view of the #grid color swatch."); + swatch.scrollIntoView(); + + info("Opening the color picker by clicking on the #grid color swatch."); + const onColorPickerReady = cPicker.once("ready"); + swatch.click(); + await onColorPickerReady; + + await simulateColorPickerChange(cPicker, [0, 255, 0, 0.5]); + + is( + swatch.style.backgroundColor, + "rgba(0, 255, 0, 0.5)", + "The color swatch's background was updated." + ); + + info("Pressing ESCAPE to close the tooltip."); + const onGridColorUpdate = waitUntilState( + store, + state => state.grids[0].color === "#9400FF" + ); + const onColorPickerHidden = cPicker.tooltip.once("hidden"); + focusAndSendKey(spectrum.element.ownerDocument.defaultView, "ESCAPE"); + await onColorPickerHidden; + await onGridColorUpdate; + + is( + swatch.style.backgroundColor, + "rgb(148, 0, 255)", + "The color swatch's background was reverted after ESCAPE." + ); +}); diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-list-color-picker-on-RETURN.js b/devtools/client/inspector/grids/test/browser_grids_grid-list-color-picker-on-RETURN.js new file mode 100644 index 0000000000..9e23d68166 --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-color-picker-on-RETURN.js @@ -0,0 +1,94 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the grid item's color change in the colorpicker is committed when RETURN is +// pressed. + +const TEST_URI = ` + <style type='text/css'> + #grid { + display: grid; + } + </style> + <div id="grid"> + <div id="cell1">cell1</div> + <div id="cell2">cell2</div> + </div> +`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, gridInspector, layoutView } = await openLayoutView(); + const { document: doc } = gridInspector; + const { highlighters, store } = inspector; + const cPicker = layoutView.swatchColorPickerTooltip; + const spectrum = cPicker.spectrum; + const swatch = doc.querySelector( + "#layout-grid-container .layout-color-swatch" + ); + + info("Checking the initial state of the Grid Inspector."); + is( + swatch.style.backgroundColor, + "rgb(148, 0, 255)", + "The color swatch's background is correct." + ); + is( + store.getState().grids[0].color, + "#9400FF", + "The grid color state is correct." + ); + + info("Scrolling into view of the #grid color swatch."); + swatch.scrollIntoView(); + + info("Opening the color picker by clicking on the #grid color swatch."); + const onColorPickerReady = cPicker.once("ready"); + swatch.click(); + await onColorPickerReady; + + await simulateColorPickerChange(cPicker, [0, 255, 0, 0.5]); + + is( + swatch.style.backgroundColor, + "rgba(0, 255, 0, 0.5)", + "The color swatch's background was updated." + ); + + info("Pressing RETURN to commit the color change."); + const EXPECTED_HEX_COLOR = "#00FF0080"; + const onGridColorUpdate = waitUntilState( + store, + state => state.grids[0].color === EXPECTED_HEX_COLOR + ); + const onColorPickerHidden = cPicker.tooltip.once("hidden"); + const onHighlighterShown = highlighters.once("highlighter-shown"); + focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN"); + await onColorPickerHidden; + await onGridColorUpdate; + + is( + swatch.style.backgroundColor, + "rgba(0, 255, 0, 0.5)", + "The color swatch's background was kept after RETURN." + ); + + info("Wait for a bit to ensure the highlighter wasn't shown"); + const raceResult = await Promise.race([ + onHighlighterShown.then(() => "HIGHLIGHTED"), + wait(1000).then(() => "TIMEOUT"), + ]); + is(raceResult, "TIMEOUT", "Highlighter wasn't shown"); + + info("Check that highlighter does show with the expected color"); + doc.querySelector("#grid-list input[type=checkbox]").click(); + const { options } = await onHighlighterShown; + + is( + options.color, + EXPECTED_HEX_COLOR, + "Highlighter was displayed with the right color" + ); +}); diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-list-element-rep.js b/devtools/client/inspector/grids/test/browser_grids_grid-list-element-rep.js new file mode 100644 index 0000000000..a1fba8d5e4 --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-element-rep.js @@ -0,0 +1,68 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the grid item's element rep will display the box model higlighter on hover +// and select the node on click. + +const TEST_URI = ` + <style type='text/css'> + #grid { + display: grid; + } + </style> + <div id="grid"> + <div id="cell1">cell1</div> + <div id="cell2">cell2</div> + </div> +`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, gridInspector } = await openLayoutView(); + const { document: doc } = gridInspector; + const { store } = inspector; + const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector); + + const gridList = doc.querySelector("#grid-list"); + const elementRep = gridList.children[0].querySelector(".open-inspector"); + info("Scrolling into the view the #grid element node rep."); + elementRep.scrollIntoView(); + + info("Listen to node-highlight event and mouse over the widget"); + const onHighlight = waitForHighlighterTypeShown( + inspector.highlighters.TYPES.BOXMODEL + ); + EventUtils.synthesizeMouse( + elementRep, + 10, + 5, + { type: "mouseover" }, + doc.defaultView + ); + const { nodeFront } = await onHighlight; + + ok(nodeFront, "nodeFront was returned from highlighting the node."); + is(nodeFront.tagName, "DIV", "The highlighted node has the correct tagName."); + is( + nodeFront.attributes[0].name, + "id", + "The highlighted node has the correct attributes." + ); + is( + nodeFront.attributes[0].value, + "grid", + "The highlighted node has the correct id." + ); + + const onSelection = inspector.selection.once("new-node-front"); + EventUtils.sendMouseEvent({ type: "click" }, elementRep, doc.defaultView); + await onSelection; + + is( + inspector.selection.nodeFront, + store.getState().grids[0].nodeFront, + "The selected node is the one stored on the grid item's state." + ); +}); diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-list-no-grids.js b/devtools/client/inspector/grids/test/browser_grids_grid-list-no-grids.js new file mode 100644 index 0000000000..ce9cbc7866 --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-no-grids.js @@ -0,0 +1,37 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that no grid list items and a "no grids available" message is displayed when +// there are no grid containers on the page. + +const TEST_URI = ` + <style type='text/css'> + </style> + <div id="grid"> + <div id="cell1">cell1</div> + <div id="cell2">cell2</div> + </div> +`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, gridInspector } = await openLayoutView(); + const { document: doc } = gridInspector; + const { highlighters } = inspector; + + await selectNode("#grid", inspector); + const noGridList = doc.querySelector( + "#layout-grid-section .devtools-sidepanel-no-result" + ); + const gridList = doc.getElementById("grid-list"); + + info("Checking the initial state of the Grid Inspector."); + ok(noGridList, "The message no grid containers is displayed."); + ok(!gridList, "No grid containers are listed."); + ok( + !highlighters.gridHighlighters.size, + "No CSS grid highlighter exists in the highlighters overlay." + ); +}); diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-list-on-iframe-reloaded.js b/devtools/client/inspector/grids/test/browser_grids_grid-list-on-iframe-reloaded.js new file mode 100644 index 0000000000..b5871414f8 --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-on-iframe-reloaded.js @@ -0,0 +1,57 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the list of grids does refresh when an iframe containing a grid is removed +// and re-created. +// See bug 1378306 where this happened with jsfiddle. + +const TEST_URI = URL_ROOT + "doc_iframe_reloaded.html"; + +add_task(async function () { + await addTab(TEST_URI); + const { gridInspector, inspector } = await openLayoutView(); + const { document: doc } = gridInspector; + const { highlighters, store } = inspector; + const gridList = doc.getElementById("grid-list"); + const checkbox = gridList.children[0].querySelector("input"); + + info("Clicking on the first checkbox to highlight the grid"); + const onHighlighterShown = highlighters.once("grid-highlighter-shown"); + const onCheckboxChange = waitUntilState( + store, + state => state.grids.length == 1 && state.grids[0].highlighted + ); + checkbox.click(); + await onHighlighterShown; + await onCheckboxChange; + + ok(checkbox.checked, "The checkbox is checked"); + is(gridList.childNodes.length, 1, "There's one grid in the list"); + is(highlighters.gridHighlighters.size, 1, "There's a highlighter shown"); + is( + highlighters.state.grids.size, + 1, + "There's a saved grid state to be restored." + ); + + info("Reload the iframe in content and expect the grid list to update"); + const oldGrid = store.getState().grids[0]; + const onNewListUnchecked = waitUntilState( + store, + state => + state.grids.length == 1 && + state.grids[0].actorID !== oldGrid.actorID && + !state.grids[0].highlighted + ); + const onHighlighterHidden = highlighters.once("grid-highlighter-hidden"); + SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => + content.wrappedJSObject.reloadIFrame() + ); + await onNewListUnchecked; + await onHighlighterHidden; + + is(gridList.childNodes.length, 1, "There's still one grid in the list"); + ok(!highlighters.state.grids.size, "No grids to be restored on page reload."); +}); diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-list-on-mutation-element-added.js b/devtools/client/inspector/grids/test/browser_grids_grid-list-on-mutation-element-added.js new file mode 100644 index 0000000000..e197f03b02 --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-on-mutation-element-added.js @@ -0,0 +1,100 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the grid list updates when a new grid container is added to the page. + +const TEST_URI = ` + <style type='text/css'> + .grid { + display: grid; + } + </style> + <div id="grid1" class="grid"> + <div class="cell1">cell1</div> + <div class="cell2">cell2</div> + </div> + <div id="grid2"> + <div class="cell1">cell1</div> + <div class="cell2">cell2</div> + </div> +`; + +add_task(async function () { + await pushPref("devtools.gridinspector.maxHighlighters", 1); + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, gridInspector } = await openLayoutView(); + const { document: doc } = gridInspector; + const { highlighters, store } = inspector; + + await selectNode("#grid", inspector); + const gridList = doc.getElementById("grid-list"); + const checkbox1 = gridList.children[0].querySelector("input"); + + info("Checking the initial state of the Grid Inspector."); + is(gridList.childNodes.length, 1, "One grid container is listed."); + ok( + !highlighters.gridHighlighters.size, + "No CSS grid highlighter exists in the highlighters overlay." + ); + + info("Toggling ON the CSS grid highlighter from the layout panel."); + let onHighlighterShown = highlighters.once("grid-highlighter-shown"); + checkbox1.click(); + await onHighlighterShown; + + info("Checking the CSS grid highlighter is created."); + is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown."); + + info("Adding the #grid2 container in the content page."); + const onGridListUpdate = waitUntilState( + store, + state => + state.grids.length == 2 && + state.grids[0].highlighted && + !state.grids[1].highlighted + ); + SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => + content.document.getElementById("grid2").classList.add("grid") + ); + await onGridListUpdate; + + info("Checking the new Grid Inspector state."); + is(gridList.childNodes.length, 2, "Two grid containers are listed."); + is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown."); + + const checkbox2 = gridList.children[1].querySelector("input"); + + info("Toggling ON the CSS grid highlighter for #grid2."); + onHighlighterShown = highlighters.once("grid-highlighter-shown"); + let onCheckboxChange = waitUntilState( + store, + state => + state.grids.length == 2 && + !state.grids[0].highlighted && + state.grids[1].highlighted + ); + checkbox2.click(); + await onHighlighterShown; + await onCheckboxChange; + + info("Checking the CSS grid highlighter is still shown."); + is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown."); + + info("Toggling OFF the CSS grid highlighter from the layout panel."); + const onHighlighterHidden = highlighters.once("grid-highlighter-hidden"); + onCheckboxChange = waitUntilState( + store, + state => + state.grids.length == 2 && + !state.grids[0].highlighted && + !state.grids[1].highlighted + ); + checkbox2.click(); + await onHighlighterHidden; + await onCheckboxChange; + + info("Checking the CSS grid highlighter is not shown."); + ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown."); +}); diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-list-on-mutation-element-removed.js b/devtools/client/inspector/grids/test/browser_grids_grid-list-on-mutation-element-removed.js new file mode 100644 index 0000000000..7a60759071 --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-on-mutation-element-removed.js @@ -0,0 +1,63 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the grid item is removed from the grid list when the grid container is +// removed from the page. + +const TEST_URI = ` + <style type='text/css'> + #grid { + display: grid; + } + </style> + <div id="grid"> + <div id="cell1">cell1</div> + <div id="cell2">cell2</div> + </div> +`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, gridInspector } = await openLayoutView(); + const { document: doc } = gridInspector; + const { highlighters, store } = inspector; + + await selectNode("#grid", inspector); + const gridList = doc.getElementById("grid-list"); + const checkbox = gridList.children[0].querySelector("input"); + + info("Checking the initial state of the Grid Inspector."); + is(gridList.childNodes.length, 1, "One grid container is listed."); + ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown."); + + info("Toggling ON the CSS grid highlighter from the layout panel."); + const onHighlighterShown = highlighters.once("grid-highlighter-shown"); + let onCheckboxChange = waitUntilState( + store, + state => state.grids.length == 1 && state.grids[0].highlighted + ); + checkbox.click(); + await onHighlighterShown; + await onCheckboxChange; + + info("Checking the CSS grid highlighter is created."); + is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown."); + + info("Removing the #grid container in the content page."); + const onHighlighterHidden = highlighters.once("grid-highlighter-hidden"); + onCheckboxChange = waitUntilState(store, state => !state.grids.length); + SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => + content.document.getElementById("grid").remove() + ); + await onHighlighterHidden; + await onCheckboxChange; + + info("Checking the CSS grid highlighter is not shown."); + ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown."); + const noGridList = doc.querySelector( + "#layout-grid-section .devtools-sidepanel-no-result" + ); + ok(noGridList, "The message no grid containers is displayed."); +}); diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-list-on-target-added-removed.js b/devtools/client/inspector/grids/test/browser_grids_grid-list-on-target-added-removed.js new file mode 100644 index 0000000000..051fc14e53 --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-on-target-added-removed.js @@ -0,0 +1,203 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the list of grids does refresh when targets are added or removed (e.g. when +// there's a navigation and iframe are added or removed) + +add_task(async function () { + await addTab(getDocumentBuilderUrl("example.com", "top-level-com-grid")); + const { gridInspector } = await openLayoutView(); + const { document: doc } = gridInspector; + + const checkGridList = (expected, assertionMessage) => + checkGridListItems(doc, expected, assertionMessage); + + checkGridList( + ["div#top-level-com-grid"], + "One grid item is displayed at first" + ); + + info( + "Check that adding same-origin iframe with a grid will update the grid list" + ); + const sameOriginIframeBrowsingContext = await SpecialPowers.spawn( + gBrowser.selectedBrowser, + [getDocumentBuilderUrl("example.com", "iframe-com-grid")], + src => { + const iframe = content.document.createElement("iframe"); + iframe.id = "same-origin"; + iframe.src = src; + content.document.body.append(iframe); + return iframe.browsingContext; + } + ); + + await waitFor(() => getGridListItems(doc).length == 2); + checkGridList( + ["div#top-level-com-grid", "div#iframe-com-grid"], + "The same-origin iframe grid is displayed" + ); + + info("Check that adding remote iframe with a grid will update the grid list"); + const remoteIframeBrowsingContext = await SpecialPowers.spawn( + gBrowser.selectedBrowser, + [getDocumentBuilderUrl("example.org", "iframe-org-grid")], + src => { + const iframe = content.document.createElement("iframe"); + iframe.id = "remote"; + iframe.src = src; + content.document.body.append(iframe); + return iframe.browsingContext; + } + ); + + await waitFor(() => getGridListItems(doc).length == 3); + checkGridList( + ["div#top-level-com-grid", "div#iframe-com-grid", "div#iframe-org-grid"], + "The remote iframe grid is displayed" + ); + + info("Check that adding new grids in iframes does update the grid list"); + SpecialPowers.spawn(sameOriginIframeBrowsingContext, [], () => { + const section = content.document.createElement("section"); + section.id = "com-added-grid-container"; + section.style = "display: grid;"; + content.document.body.append(section); + }); + + await waitFor(() => getGridListItems(doc).length == 4); + checkGridList( + [ + "div#top-level-com-grid", + "div#iframe-com-grid", + "section#com-added-grid-container", + "div#iframe-org-grid", + ], + "The new grid in the same origin iframe is displayed" + ); + + SpecialPowers.spawn(remoteIframeBrowsingContext, [], () => { + const section = content.document.createElement("section"); + section.id = "org-added-grid-container"; + section.style = "display: grid;"; + content.document.body.append(section); + }); + + await waitFor(() => getGridListItems(doc).length == 5); + checkGridList( + [ + "div#top-level-com-grid", + "div#iframe-com-grid", + "section#com-added-grid-container", + "div#iframe-org-grid", + "section#org-added-grid-container", + ], + "The new grid in the same origin iframe is displayed" + ); + + info("Check that removing iframes will update the grid list"); + SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => { + content.document.querySelector("iframe#same-origin").remove(); + }); + + await waitFor(() => getGridListItems(doc).length == 3); + checkGridList( + [ + "div#top-level-com-grid", + "div#iframe-org-grid", + "section#org-added-grid-container", + ], + "The same-origin iframe grids were removed from the list" + ); + + SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => { + content.document.querySelector("iframe#remote").remove(); + }); + + await waitFor(() => getGridListItems(doc).length == 1); + checkGridList( + ["div#top-level-com-grid"], + "The remote iframe grids were removed as well" + ); + + info("Navigate to a new origin"); + await navigateTo(getDocumentBuilderUrl("example.org", "top-level-org-grid")); + await waitFor(() => { + const listItems = getGridListItems(doc); + return ( + listItems.length == 1 && + listItems[0].textContent.includes("#top-level-org-grid") + ); + }); + checkGridList( + ["div#top-level-org-grid"], + "The grid from the new origin document is displayed" + ); + + info("Check that adding remote iframe will still update the grid list"); + SpecialPowers.spawn( + gBrowser.selectedBrowser, + [getDocumentBuilderUrl("example.com", "iframe-com-grid-remote")], + src => { + const iframe = content.document.createElement("iframe"); + iframe.id = "remote"; + iframe.src = src; + content.document.body.append(iframe); + } + ); + + await waitFor(() => getGridListItems(doc).length == 2); + checkGridList( + ["div#top-level-org-grid", "div#iframe-com-grid-remote"], + "The grid from the new origin document is displayed" + ); + + info( + "Check that adding same-origin iframe with a grid will update the grid list" + ); + SpecialPowers.spawn( + gBrowser.selectedBrowser, + [getDocumentBuilderUrl("example.org", "iframe-org-grid-same-origin")], + src => { + const iframe = content.document.createElement("iframe"); + iframe.id = "same-origin"; + iframe.src = src; + content.document.body.append(iframe); + } + ); + await waitFor(() => getGridListItems(doc).length == 3); + checkGridList( + [ + "div#top-level-org-grid", + "div#iframe-com-grid-remote", + "div#iframe-org-grid-same-origin", + ], + "The grid from the new same-origin iframe is displayed" + ); +}); + +function getDocumentBuilderUrl(origin, gridContainerId) { + return `https://${origin}/document-builder.sjs?html=${encodeURIComponent( + `<style> + #${gridContainerId} { + display: grid; + } + </style> + <div id="${gridContainerId}"></div>` + )}`; +} + +function getGridListItems(doc) { + return Array.from(doc.querySelectorAll("#grid-list .objectBox-node")); +} + +function checkGridListItems(doc, expectedItems, assertionText) { + const gridItems = getGridListItems(doc).map(el => el.textContent); + is( + JSON.stringify(gridItems.sort()), + JSON.stringify(expectedItems.sort()), + assertionText + ); +} diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids-z-order.js b/devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids-z-order.js new file mode 100644 index 0000000000..da1b11f4c8 --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids-z-order.js @@ -0,0 +1,83 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test the z order of grids. + +const TEST_URI = URL_ROOT + "doc_subgrid.html"; + +add_task(async () => { + await addTab(TEST_URI); + const { gridInspector, inspector } = await openLayoutView(); + const { document: doc } = gridInspector; + const { highlighters, store } = inspector; + + await selectNode("#grid", inspector); + await waitUntilState(store, state => state.grids.length === 5); + + const parentEl = doc.getElementById("grid-list"); + // Input for .container + const parentInput = parentEl.children[0].querySelector("input"); + const subgridEl = parentEl.children[1]; + // Input for <main> + const subgridInput = subgridEl.children[1].querySelector("input"); + const grandSubgridEl = subgridEl.children[2]; + // Input for .aside1 + const grandSubgridInput = grandSubgridEl.children[0].querySelector("input"); + + info( + "Toggling ON the CSS grid highlighters for .container, <main> and .aside1" + ); + const grandSubgridFront = await toggle(grandSubgridInput, highlighters); + const subgridFront = await toggle(subgridInput, highlighters); + let parentFront = await toggle(parentInput, highlighters); + await waitUntilState( + store, + state => state.grids.filter(g => g.highlighted).length === 3 + ); + + info("Check z-index of grid highlighting"); + is(getZIndex(store, parentFront), 0, "z-index of parent grid is 0"); + is(getZIndex(store, subgridFront), 1, "z-index of subgrid is 1"); + is(getZIndex(store, grandSubgridFront), 2, "z-index of subgrid is 2"); + + info("Toggling OFF the CSS grid highlighters for .container"); + await toggle(parentInput, highlighters); + await waitUntilState( + store, + state => state.grids.filter(g => g.highlighted).length === 2 + ); + + info("Check z-index keeps even if the parent grid is hidden"); + is(getZIndex(store, subgridFront), 1, "z-index of subgrid is 1"); + is(getZIndex(store, grandSubgridFront), 2, "z-index of subgrid is 2"); + + info("Toggling ON again the CSS grid highlighters for .container"); + parentFront = await toggle(parentInput, highlighters); + await waitUntilState( + store, + state => state.grids.filter(g => g.highlighted).length === 3 + ); + + info("Check z-index of all of grids highlighting keeps"); + is(getZIndex(store, parentFront), 0, "z-index of parent grid is 0"); + is(getZIndex(store, subgridFront), 1, "z-index of subgrid is 1"); + is(getZIndex(store, grandSubgridFront), 2, "z-index of subgrid is 2"); +}); + +function getZIndex(store, nodeFront) { + const grids = store.getState().grids; + const gridData = grids.find(g => g.nodeFront === nodeFront); + return gridData.zIndex; +} + +async function toggle(input, highlighters) { + const eventName = input.checked + ? "grid-highlighter-hidden" + : "grid-highlighter-shown"; + const onHighlighterEvent = highlighters.once(eventName); + input.click(); + const nodeFront = await onHighlighterEvent; + return nodeFront; +} diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids_01.js b/devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids_01.js new file mode 100644 index 0000000000..bcb0faeef8 --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids_01.js @@ -0,0 +1,138 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the list of grids show the subgrids in the correct nested list and toggling +// the CSS grid highlighter for a subgrid. + +const TEST_URI = URL_ROOT + "doc_subgrid.html"; + +add_task(async function () { + await addTab(TEST_URI); + const { gridInspector, inspector } = await openLayoutView(); + const { document: doc } = gridInspector; + const { highlighters, store } = inspector; + + await selectNode(".container", inspector); + const gridListEl = doc.getElementById("grid-list"); + const containerSubgridListEl = gridListEl.children[1]; + const mainSubgridListEl = containerSubgridListEl.querySelector("ul"); + + info("Checking the initial state of the Grid Inspector."); + is( + getGridItemElements(gridListEl).length, + 1, + "One grid container is listed." + ); + is( + getGridItemElements(containerSubgridListEl).length, + 2, + "Got the correct number of subgrids in div.container" + ); + is( + getGridItemElements(mainSubgridListEl).length, + 2, + "Got the correct number of subgrids in main.subgrid" + ); + ok( + !highlighters.gridHighlighters.size && + !highlighters.parentGridHighlighters.size, + "No CSS grid highlighter is shown." + ); + + info("Toggling ON the CSS grid highlighter for header."); + let onHighlighterShown = highlighters.once("grid-highlighter-shown"); + let onCheckboxChange = waitUntilState( + store, + state => state.grids[1].highlighted + ); + let checkbox = containerSubgridListEl.children[0].querySelector("input"); + checkbox.click(); + await onHighlighterShown; + await onCheckboxChange; + + info( + "Checking the CSS grid highlighter and parent grid highlighter are created." + ); + is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown."); + is( + highlighters.parentGridHighlighters.size, + 1, + "CSS grid highlighter for parent grid container is shown." + ); + + info("Toggling ON the CSS grid highlighter for main."); + onHighlighterShown = highlighters.once("grid-highlighter-shown"); + onCheckboxChange = waitUntilState( + store, + state => state.grids[1].highlighted && state.grids[2].highlighted + ); + checkbox = containerSubgridListEl.children[1].querySelector("input"); + checkbox.click(); + await onHighlighterShown; + await onCheckboxChange; + + info("Checking the number of CSS grid highlighters present."); + is( + highlighters.gridHighlighters.size, + 2, + "Got the correct number of CSS grid highlighter shown." + ); + is( + highlighters.parentGridHighlighters.size, + 1, + "Only 1 parent grid highlighter should be shown for the same subgrid parent." + ); + + info("Toggling OFF the CSS grid highlighter for main."); + let onHighlighterHidden = highlighters.once("grid-highlighter-hidden"); + onCheckboxChange = waitUntilState( + store, + state => state.grids[1].highlighted && !state.grids[2].highlighted + ); + checkbox.click(); + await onHighlighterHidden; + await onCheckboxChange; + + info("Checking the number of CSS grid highlighters present."); + is( + highlighters.gridHighlighters.size, + 1, + "Got the correct number of CSS grid highlighter shown." + ); + is( + highlighters.parentGridHighlighters.size, + 1, + "Got the correct number of CSS grid parent highlighter shown." + ); + + info("Toggling OFF the CSS grid highlighter for header."); + onHighlighterHidden = highlighters.once("grid-highlighter-hidden"); + onCheckboxChange = waitUntilState( + store, + state => !state.grids[1].highlighted + ); + checkbox = containerSubgridListEl.children[0].querySelector("input"); + checkbox.click(); + await onHighlighterHidden; + await onCheckboxChange; + + info("Checking the CSS grid highlighter is not shown."); + ok( + !highlighters.gridHighlighters.size && + !highlighters.parentGridHighlighters.size, + "No CSS grid highlighter is shown." + ); +}); + +/** + * Returns the grid item elements <li> from the grid list element <ul>. + * + * @param {Element} gridListEl + * The grid list element <ul>. + * @return {Array<Element>} containing the grid item elements <li>. + */ +function getGridItemElements(gridListEl) { + return [...gridListEl.children].filter(node => node.nodeName === "li"); +} diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids_02.js b/devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids_02.js new file mode 100644 index 0000000000..83f07e339a --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids_02.js @@ -0,0 +1,72 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test the state of grid highlighters after toggling the checkbox of subgrids. + +const TEST_URI = URL_ROOT + "doc_subgrid.html"; + +add_task(async () => { + await addTab(TEST_URI); + const { gridInspector, inspector } = await openLayoutView(); + const { document: doc } = gridInspector; + const { highlighters, store } = inspector; + + await selectNode(".container", inspector); + const parentEl = doc.getElementById("grid-list"); + // Input for .container + const parentInput = parentEl.children[0].querySelector("input"); + const subgridEl = parentEl.children[1]; + // Input for <main> + const subgridInput = subgridEl.children[1].querySelector("input"); + const grandSubgridEl = subgridEl.children[2]; + // Input for .aside1 + const grandSubgridInput = grandSubgridEl.children[0].querySelector("input"); + + info( + "Toggling ON the CSS grid highlighters for .container, <main> and .aside1" + ); + await toggleHighlighter(parentInput, highlighters); + await toggleHighlighter(subgridInput, highlighters); + await toggleHighlighter(grandSubgridInput, highlighters); + await waitUntilState( + store, + state => state.grids.filter(g => g.highlighted).length === 3 + ); + + info("Check the state of highlighters"); + is( + highlighters.gridHighlighters.size, + 3, + "All highlighters are use as normal highlighter" + ); + + info("Toggling OFF the CSS grid highlighter for <main>"); + await toggleHighlighter(subgridInput, highlighters); + await waitUntilState( + store, + state => state.grids.filter(g => g.highlighted).length === 2 + ); + + info("Check the state of highlighters after hiding subgrid for <main>"); + is( + highlighters.gridHighlighters.size, + 2, + "2 highlighters are use as normal highlighter" + ); + is( + highlighters.parentGridHighlighters.size, + 1, + "The highlighter for <main> is used as parent highlighter" + ); +}); + +async function toggleHighlighter(input, highlighters) { + const eventName = input.checked + ? "grid-highlighter-hidden" + : "grid-highlighter-shown"; + const onHighlighterEvent = highlighters.once(eventName); + input.click(); + await onHighlighterEvent; +} diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-list-toggle-grids_01.js b/devtools/client/inspector/grids/test/browser_grids_grid-list-toggle-grids_01.js new file mode 100644 index 0000000000..f66e70042c --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-toggle-grids_01.js @@ -0,0 +1,63 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests toggling ON/OFF the grid highlighter from the grid ispector panel. + +const TEST_URI = ` + <style type='text/css'> + #grid { + display: grid; + } + </style> + <div id="grid"> + <div id="cell1">cell1</div> + <div id="cell2">cell2</div> + </div> +`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { gridInspector, inspector } = await openLayoutView(); + const { document: doc } = gridInspector; + const { highlighters, store } = inspector; + + await selectNode("#grid", inspector); + const gridList = doc.getElementById("grid-list"); + const checkbox = gridList.children[0].querySelector("input"); + + info("Checking the initial state of the Grid Inspector."); + is(gridList.childNodes.length, 1, "One grid container is listed."); + ok( + !checkbox.checked, + `Grid item ${checkbox.value} is unchecked in the grid list.` + ); + ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown."); + + info("Toggling ON the CSS grid highlighter from the layout panel."); + const onHighlighterShown = highlighters.once("grid-highlighter-shown"); + let onCheckboxChange = waitUntilState( + store, + state => state.grids.length == 1 && state.grids[0].highlighted + ); + checkbox.click(); + await onHighlighterShown; + await onCheckboxChange; + + info("Checking the CSS grid highlighter is created."); + is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown."); + + info("Toggling OFF the CSS grid highlighter from the layout panel."); + const onHighlighterHidden = highlighters.once("grid-highlighter-hidden"); + onCheckboxChange = waitUntilState( + store, + state => state.grids.length == 1 && !state.grids[0].highlighted + ); + checkbox.click(); + await onHighlighterHidden; + await onCheckboxChange; + + info("Checking the CSS grid highlighter is not shown."); + ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown."); +}); diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-list-toggle-grids_02.js b/devtools/client/inspector/grids/test/browser_grids_grid-list-toggle-grids_02.js new file mode 100644 index 0000000000..82f3d9bef4 --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-toggle-grids_02.js @@ -0,0 +1,96 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test toggling the grid highlighter in the grid inspector panel with multiple grids in +// the page. + +const TEST_URI = ` + <style type='text/css'> + .grid { + display: grid; + } + </style> + <div id="grid1" class="grid"> + <div class="cell1">cell1</div> + <div class="cell2">cell2</div> + </div> + <div id="grid2" class="grid"> + <div class="cell1">cell1</div> + <div class="cell2">cell2</div> + </div> +`; + +add_task(async function () { + await pushPref("devtools.gridinspector.maxHighlighters", 1); + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, gridInspector } = await openLayoutView(); + const { document: doc } = gridInspector; + const { highlighters, store } = inspector; + + await selectNode("#grid1", inspector); + const gridList = doc.getElementById("grid-list"); + const checkbox1 = gridList.children[0].querySelector("input"); + const checkbox2 = gridList.children[1].querySelector("input"); + + info("Checking the initial state of the Grid Inspector."); + is(gridList.childNodes.length, 2, "2 grid containers are listed."); + ok( + !checkbox1.checked, + `Grid item ${checkbox1.value} is unchecked in the grid list.` + ); + ok( + !checkbox2.checked, + `Grid item ${checkbox2.value} is unchecked in the grid list.` + ); + ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown."); + + info("Toggling ON the CSS grid highlighter for #grid1."); + let onHighlighterShown = highlighters.once("grid-highlighter-shown"); + let onCheckboxChange = waitUntilState( + store, + state => + state.grids.length == 2 && + state.grids[0].highlighted && + !state.grids[1].highlighted + ); + checkbox1.click(); + await onHighlighterShown; + await onCheckboxChange; + + info("Checking the CSS grid highlighter is created."); + is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown."); + + info("Toggling ON the CSS grid highlighter for #grid2."); + onHighlighterShown = highlighters.once("grid-highlighter-shown"); + onCheckboxChange = waitUntilState( + store, + state => + state.grids.length == 2 && + !state.grids[0].highlighted && + state.grids[1].highlighted + ); + checkbox2.click(); + await onHighlighterShown; + await onCheckboxChange; + + info("Checking the CSS grid highlighter is still shown."); + is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown."); + + info("Toggling OFF the CSS grid highlighter from the layout panel."); + const onHighlighterHidden = highlighters.once("grid-highlighter-hidden"); + onCheckboxChange = waitUntilState( + store, + state => + state.grids.length == 2 && + !state.grids[0].highlighted && + !state.grids[1].highlighted + ); + checkbox2.click(); + await onHighlighterHidden; + await onCheckboxChange; + + info("Checking the CSS grid highlighter is not shown."); + ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown."); +}); diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-list-toggle-multiple-grids.js b/devtools/client/inspector/grids/test/browser_grids_grid-list-toggle-multiple-grids.js new file mode 100644 index 0000000000..857ff75912 --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-toggle-multiple-grids.js @@ -0,0 +1,243 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test toggling multiple grid highlighters in the grid inspector panel. + +const TEST_URI = ` + <style type='text/css'> + .grid { + display: grid; + } + </style> + <div id="grid1" class="grid"> + <div class="cell1">cell1</div> + <div class="cell2">cell2</div> + </div> + <div id="grid2" class="grid"> + <div class="cell1">cell1</div> + <div class="cell2">cell2</div> + </div> + <div id="grid3" class="grid"> + <div class="cell1">cell1</div> + <div class="cell2">cell2</div> + </div> + <div id="grid4" class="grid"> + <div class="cell1">cell1</div> + <div class="cell2">cell2</div> + </div> +`; + +add_task(async function () { + await pushPref("devtools.gridinspector.maxHighlighters", 3); + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, gridInspector } = await openLayoutView(); + const { document: doc } = gridInspector; + const { highlighters, store } = inspector; + + await selectNode("#grid1", inspector); + const gridList = doc.getElementById("grid-list"); + const checkbox1 = gridList.children[0].querySelector("input"); + const checkbox2 = gridList.children[1].querySelector("input"); + const checkbox3 = gridList.children[2].querySelector("input"); + const checkbox4 = gridList.children[3].querySelector("input"); + + info("Checking the initial state of the Grid Inspector."); + is(gridList.childNodes.length, 4, "4 grid containers are listed."); + ok( + !checkbox1.checked, + `Grid item ${checkbox1.value} is unchecked in the grid list.` + ); + ok( + !checkbox2.checked, + `Grid item ${checkbox2.value} is unchecked in the grid list.` + ); + ok( + !checkbox3.checked, + `Grid item ${checkbox3.value} is unchecked in the grid list.` + ); + ok( + !checkbox4.checked, + `Grid item ${checkbox4.value} is unchecked in the grid list.` + ); + ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown."); + + info("Toggling ON the CSS grid highlighter for #grid1."); + let onHighlighterShown = highlighters.once("grid-highlighter-shown"); + let onCheckboxChange = waitUntilState( + store, + state => + state.grids.length == 4 && + state.grids[0].highlighted && + !state.grids[0].disabled && + !state.grids[1].highlighted && + !state.grids[1].disabled && + !state.grids[2].highlighted && + !state.grids[2].disabled && + !state.grids[3].highlighted && + !state.grids[3].disabled + ); + checkbox1.click(); + await onHighlighterShown; + await onCheckboxChange; + + info( + "Check that the CSS grid highlighter is created and the saved grid state." + ); + is( + highlighters.gridHighlighters.size, + 1, + "Got expected number of grid highlighters shown." + ); + is( + highlighters.state.grids.size, + 1, + "Got expected number of grids in the saved state" + ); + + info("Toggling ON the CSS grid highlighter for #grid2."); + onHighlighterShown = highlighters.once("grid-highlighter-shown"); + onCheckboxChange = waitUntilState( + store, + state => + state.grids.length == 4 && + state.grids[0].highlighted && + !state.grids[0].disabled && + state.grids[1].highlighted && + !state.grids[1].disabled && + !state.grids[2].highlighted && + !state.grids[2].disabled && + !state.grids[3].highlighted && + !state.grids[3].disabled + ); + checkbox2.click(); + await onHighlighterShown; + await onCheckboxChange; + + is( + highlighters.gridHighlighters.size, + 2, + "Got expected number of grid highlighters shown." + ); + is( + highlighters.state.grids.size, + 2, + "Got expected number of grids in the saved state" + ); + + info("Toggling ON the CSS grid highlighter for #grid3."); + onHighlighterShown = highlighters.once("grid-highlighter-shown"); + onCheckboxChange = waitUntilState( + store, + state => + state.grids.length == 4 && + state.grids[0].highlighted && + !state.grids[0].disabled && + state.grids[1].highlighted && + !state.grids[1].disabled && + state.grids[2].highlighted && + !state.grids[2].disabled && + !state.grids[3].highlighted && + state.grids[3].disabled + ); + checkbox3.click(); + await onHighlighterShown; + await onCheckboxChange; + + is( + highlighters.gridHighlighters.size, + 3, + "Got expected number of grid highlighters shown." + ); + is( + highlighters.state.grids.size, + 3, + "Got expected number of grids in the saved state" + ); + + info("Toggling OFF the CSS grid highlighter for #grid3."); + let onHighlighterHidden = highlighters.once("grid-highlighter-hidden"); + onCheckboxChange = waitUntilState( + store, + state => + state.grids.length == 4 && + state.grids[0].highlighted && + !state.grids[0].disabled && + state.grids[1].highlighted && + !state.grids[1].disabled && + !state.grids[2].highlighted && + !state.grids[2].disabled && + !state.grids[3].highlighted && + !state.grids[3].disabled + ); + checkbox3.click(); + await onHighlighterHidden; + await onCheckboxChange; + + is( + highlighters.gridHighlighters.size, + 2, + "Got expected number of grid highlighters shown." + ); + is( + highlighters.state.grids.size, + 2, + "Got expected number of grids in the saved state" + ); + + info("Toggling OFF the CSS grid highlighter for #grid2."); + onHighlighterHidden = highlighters.once("grid-highlighter-hidden"); + onCheckboxChange = waitUntilState( + store, + state => + state.grids.length == 4 && + state.grids[0].highlighted && + !state.grids[0].disabled && + !state.grids[1].highlighted && + !state.grids[1].disabled && + !state.grids[2].highlighted && + !state.grids[2].disabled && + !state.grids[3].highlighted && + !state.grids[3].disabled + ); + checkbox2.click(); + await onHighlighterHidden; + await onCheckboxChange; + + is( + highlighters.gridHighlighters.size, + 1, + "Got expected number of grid highlighters shown." + ); + is( + highlighters.state.grids.size, + 1, + "Got expected number of grids in the saved state" + ); + + info("Toggling OFF the CSS grid highlighter for #grid1."); + onHighlighterHidden = highlighters.once("grid-highlighter-hidden"); + onCheckboxChange = waitUntilState( + store, + state => + state.grids.length == 4 && + !state.grids[0].highlighted && + !state.grids[0].disabled && + !state.grids[1].highlighted && + !state.grids[1].disabled && + !state.grids[2].highlighted && + !state.grids[2].disabled && + !state.grids[3].highlighted && + !state.grids[3].disabled + ); + checkbox1.click(); + await onHighlighterHidden; + await onCheckboxChange; + + info( + "Check that the CSS grid highlighter is not shown and the saved grid state." + ); + ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown."); + ok(!highlighters.state.grids.size, "No grids in the saved state"); +}); diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-outline-cannot-show-outline.js b/devtools/client/inspector/grids/test/browser_grids_grid-outline-cannot-show-outline.js new file mode 100644 index 0000000000..a2f293c44d --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_grid-outline-cannot-show-outline.js @@ -0,0 +1,57 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that grid outline does not show when cells are too small to be drawn and that +// "Cannot show outline for this grid." message is displayed. + +const TEST_URI = ` + <style type='text/css'> + #grid { + display: grid; + grid-template-columns: repeat(51, 20px); + grid-template-rows: repeat(51, 20px); + } + </style> + <div id="grid"> + <div id="cellA">cell A</div> + <div id="cellB">cell B</div> + </div> +`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + + const { inspector, gridInspector } = await openLayoutView(); + const { document: doc } = gridInspector; + const { highlighters, store } = inspector; + + await selectNode("#grid", inspector); + const outline = doc.getElementById("grid-outline-container"); + const gridList = doc.getElementById("grid-list"); + const checkbox = gridList.children[0].querySelector("input"); + + info("Toggling ON the CSS grid highlighter from the layout panel."); + const onHighlighterShown = highlighters.once("grid-highlighter-shown"); + const onGridOutlineRendered = waitForDOM(doc, ".grid-outline-text", 1); + const onCheckboxChange = waitUntilState( + store, + state => state.grids.length == 1 && state.grids[0].highlighted + ); + checkbox.click(); + await onHighlighterShown; + await onCheckboxChange; + const elements = await onGridOutlineRendered; + + const cannotShowGridOutline = elements[0]; + + info( + "Checking the grid outline is not rendered and an appropriate message is shown." + ); + ok(!outline, "Outline component is not shown."); + ok( + cannotShowGridOutline, + "The message 'Cannot show outline for this grid' is displayed." + ); +}); diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-outline-highlight-area.js b/devtools/client/inspector/grids/test/browser_grids_grid-outline-highlight-area.js new file mode 100644 index 0000000000..7a93e561cc --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_grid-outline-highlight-area.js @@ -0,0 +1,77 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the grid area and cell are highlighted when hovering over a grid area in the +// grid outline. + +const TEST_URI = ` + <style type='text/css'> + #grid { + display: grid; + grid-template-areas: + "header" + "footer"; + } + .top { + grid-area: header; + } + .bottom { + grid-area: footer; + } + </style> + <div id="grid"> + <div id="cella" className="top">Cell A</div> + <div id="cellb" className="bottom">Cell B</div> + </div> +`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + + const { inspector, gridInspector } = await openLayoutView(); + const { document: doc } = gridInspector; + const { store } = inspector; + const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID; + const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector); + + const gridList = doc.getElementById("grid-list"); + const checkbox = gridList.children[0].querySelector("input"); + + info("Toggling ON the CSS grid highlighter from the layout panel."); + const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE); + const onGridOutlineRendered = waitForDOM(doc, "#grid-cell-group rect", 2); + const onCheckboxChange = waitUntilState( + store, + state => state.grids.length == 1 && state.grids[0].highlighted + ); + checkbox.click(); + + info("Wait for checkbox to change"); + await onCheckboxChange; + + info("Wait for highlighter to be shown"); + await onHighlighterShown; + + info("Wait for outline to be rendered"); + await onGridOutlineRendered; + + info("Hovering over grid cell A in the grid outline."); + const onCellAHighlight = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE); + + synthesizeMouseOverOnGridCell(doc, 0); + + const { options } = await onCellAHighlight; + + info( + "Checking the grid highlighter options for the show grid area and cell parameters." + ); + const { showGridCell, showGridArea } = options; + const { gridFragmentIndex, rowNumber, columnNumber } = showGridCell; + + is(gridFragmentIndex, "0", "Should be the first grid fragment index."); + is(rowNumber, "1", "Should be the first grid row."); + is(columnNumber, "1", "Should be the first grid column."); + is(showGridArea, "header", "Grid area name should be 'header'."); +}); diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-outline-highlight-cell.js b/devtools/client/inspector/grids/test/browser_grids_grid-outline-highlight-cell.js new file mode 100644 index 0000000000..0f5f329f9b --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_grid-outline-highlight-cell.js @@ -0,0 +1,65 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the grid cell is highlighted when hovering over the grid outline of a +// grid cell. + +const TEST_URI = ` + <style type='text/css'> + #grid { + display: grid; + } + </style> + <div id="grid"> + <div id="cella">Cell A</div> + <div id="cellb">Cell B</div> + </div> +`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + + const { inspector, gridInspector } = await openLayoutView(); + const { document: doc } = gridInspector; + const { store } = inspector; + const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID; + const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector); + + const gridList = doc.getElementById("grid-list"); + const checkbox = gridList.children[0].querySelector("input"); + + info("Toggling ON the CSS grid highlighter from the layout panel."); + const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE); + const onGridOutlineRendered = waitForDOM(doc, "#grid-cell-group rect", 2); + const onCheckboxChange = waitUntilState( + store, + state => state.grids.length == 1 && state.grids[0].highlighted + ); + checkbox.click(); + + info("Wait for checkbox to change"); + await onCheckboxChange; + + info("Wait for highlighter to be shown"); + await onHighlighterShown; + + info("Wait for outline to be rendered"); + await onGridOutlineRendered; + + info("Hovering over grid cell A in the grid outline."); + const onCellAHighlight = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE); + + synthesizeMouseOverOnGridCell(doc, 0); + + const { options } = await onCellAHighlight; + + info("Checking show grid cell options are correct."); + const { showGridCell } = options; + const { gridFragmentIndex, rowNumber, columnNumber } = showGridCell; + + is(gridFragmentIndex, "0", "Should be the first grid fragment index."); + is(rowNumber, "1", "Should be the first grid row."); + is(columnNumber, "1", "Should be the first grid column."); +}); diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-outline-multiple-grids.js b/devtools/client/inspector/grids/test/browser_grids_grid-outline-multiple-grids.js new file mode 100644 index 0000000000..a65cfd7528 --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_grid-outline-multiple-grids.js @@ -0,0 +1,76 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the grid outline is not shown when more than one grid is highlighted. + +const TEST_URI = ` + <style type='text/css'> + .grid { + display: grid; + } + </style> + <div id="grid1" class="grid"> + <div class="cell1">cell1</div> + <div class="cell2">cell2</div> + </div> + <div id="grid2" class="grid"> + <div class="cell1">cell1</div> + <div class="cell2">cell2</div> + </div> +`; + +add_task(async function () { + await pushPref("devtools.gridinspector.maxHighlighters", 2); + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, gridInspector } = await openLayoutView(); + const { document: doc } = gridInspector; + const { highlighters, store } = inspector; + + await selectNode("#grid1", inspector); + const gridList = doc.getElementById("grid-list"); + const checkbox1 = gridList.children[0].querySelector("input"); + const checkbox2 = gridList.children[1].querySelector("input"); + + info("Toggling ON the CSS grid highlighter for #grid1."); + let onHighlighterShown = highlighters.once("grid-highlighter-shown"); + const onGridOutlineRendered = waitForDOM(doc, "#grid-cell-group rect", 2); + let onCheckboxChange = waitUntilState( + store, + state => + state.grids.length === 2 && + state.grids[0].highlighted && + !state.grids[1].highlighted + ); + checkbox1.click(); + await onHighlighterShown; + await onCheckboxChange; + const elements = await onGridOutlineRendered; + + info("Checking the grid outline for #grid1 is shown."); + ok( + doc.getElementById("grid-outline-container"), + "Grid outline container is rendered." + ); + is(elements.length, 2, "Grid outline is shown."); + + info("Toggling ON the CSS grid highlighter for #grid2."); + onHighlighterShown = highlighters.once("grid-highlighter-shown"); + onCheckboxChange = waitUntilState( + store, + state => + state.grids.length === 2 && + state.grids[0].highlighted && + state.grids[1].highlighted + ); + checkbox2.click(); + await onHighlighterShown; + await onCheckboxChange; + + info("Checking the grid outline is not shown."); + ok( + !doc.getElementById("grid-outline-container"), + "Grid outline is not rendered." + ); +}); diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-outline-selected-grid.js b/devtools/client/inspector/grids/test/browser_grids_grid-outline-selected-grid.js new file mode 100644 index 0000000000..ada2a635e4 --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_grid-outline-selected-grid.js @@ -0,0 +1,51 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the grid outline is shown when a grid container is selected. + +const TEST_URI = ` + <style type='text/css'> + #grid { + display: grid; + } + </style> + <div id="grid"> + <div id="cella">Cell A</div> + <div id="cellb">Cell B</div> + <div id="cellc">Cell C</div> + </div> +`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + + const { inspector, gridInspector } = await openLayoutView(); + const { document: doc } = gridInspector; + const { highlighters, store } = inspector; + + const gridList = doc.getElementById("grid-list"); + const checkbox = gridList.children[0].querySelector("input"); + + info("Checking the initial state of the Grid Inspector."); + ok( + !doc.getElementById("grid-outline-container"), + "There should be no grid outline shown." + ); + + info("Toggling ON the CSS grid highlighter from the layout panel."); + const onHighlighterShown = highlighters.once("grid-highlighter-shown"); + const onCheckboxChange = waitUntilState( + store, + state => state.grids.length == 1 && state.grids[0].highlighted + ); + const onGridOutlineRendered = waitForDOM(doc, "#grid-cell-group rect", 3); + checkbox.click(); + await onHighlighterShown; + await onCheckboxChange; + const elements = await onGridOutlineRendered; + + info("Checking the grid outline is shown."); + is(elements.length, 3, "Grid outline is shown."); +}); diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-outline-updates-on-grid-change.js b/devtools/client/inspector/grids/test/browser_grids_grid-outline-updates-on-grid-change.js new file mode 100644 index 0000000000..778217cc40 --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_grid-outline-updates-on-grid-change.js @@ -0,0 +1,64 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the grid outline does reflect the grid in the page even after the grid has +// changed. + +const TEST_URI = ` + <style> + .container { + display: grid; + grid-template-columns: repeat(2, 20vw); + grid-auto-rows: 20px; + } + </style> + <div class="container"> + <div>item 1</div> + <div>item 2</div> + </div> +`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + + const { inspector, gridInspector } = await openLayoutView(); + const { document: doc } = gridInspector; + const { highlighters, store } = inspector; + + info("Clicking on the first checkbox to highlight the grid"); + const checkbox = doc.querySelector("#grid-list input"); + + const onHighlighterShown = highlighters.once("grid-highlighter-shown"); + const onCheckboxChange = waitUntilState( + store, + state => state.grids.length == 1 && state.grids[0].highlighted + ); + const onGridOutlineRendered = waitForDOM(doc, ".grid-outline-cell", 2); + + checkbox.click(); + + await onHighlighterShown; + await onCheckboxChange; + let elements = await onGridOutlineRendered; + + info("Checking the grid outline is shown."); + is(elements.length, 2, "Grid outline is shown."); + + info("Changing the grid in the page"); + const onReflow = inspector.once("reflow-in-selected-target"); + const onGridOutlineChanged = waitForDOM(doc, ".grid-outline-cell", 4); + + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => { + const div = content.document.createElement("div"); + div.textContent = "item 3"; + content.document.querySelector(".container").appendChild(div); + }); + + await onReflow; + elements = await onGridOutlineChanged; + + info("Checking the grid outline is correct."); + is(elements.length, 4, "Grid outline was changed."); +}); diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-outline-writing-mode.js b/devtools/client/inspector/grids/test/browser_grids_grid-outline-writing-mode.js new file mode 100644 index 0000000000..c27a8b481f --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_grid-outline-writing-mode.js @@ -0,0 +1,156 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the grid outline adjusts to match the container's writing mode. + +const TEST_URI = ` + <style type='text/css'> + .grid { + display: grid; + width: 400px; + height: 300px; + } + .rtl { + direction: rtl; + } + .v-rl { + writing-mode: vertical-rl; + } + .v-lr { + writing-mode: vertical-lr; + } + .s-rl { + writing-mode: sideways-rl; + } + .s-lr { + writing-mode: sideways-lr; + } + </style> + <div class="grid"> + <div id="cella">Cell A</div> + <div id="cellb">Cell B</div> + <div id="cellc">Cell C</div> + </div> + <div class="grid rtl"> + <div id="cella">Cell A</div> + <div id="cellb">Cell B</div> + <div id="cellc">Cell C</div> + </div> + <div class="grid v-rl"> + <div id="cella">Cell A</div> + <div id="cellb">Cell B</div> + <div id="cellc">Cell C</div> + </div> + <div class="grid v-lr"> + <div id="cella">Cell A</div> + <div id="cellb">Cell B</div> + <div id="cellc">Cell C</div> + </div> + <div class="grid s-rl"> + <div id="cella">Cell A</div> + <div id="cellb">Cell B</div> + <div id="cellc">Cell C</div> + </div> + <div class="grid s-lr"> + <div id="cella">Cell A</div> + <div id="cellb">Cell B</div> + <div id="cellc">Cell C</div> + </div> +`; + +add_task(async function () { + await pushPref("devtools.gridinspector.maxHighlighters", 1); + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + + const { inspector, gridInspector } = await openLayoutView(); + const { document: doc } = gridInspector; + const { highlighters, store } = inspector; + + info("Checking the initial state of the Grid Inspector."); + ok( + !doc.getElementById("grid-outline-container"), + "There should be no grid outline shown." + ); + + let elements; + + elements = await enableGrid(doc, highlighters, store, 0); + is( + elements[0].style.transform, + "matrix(1, 0, 0, 1, 0, 0)", + "Transform matches for horizontal-tb and ltr." + ); + await disableGrid(doc, highlighters, store, 0); + + elements = await enableGrid(doc, highlighters, store, 1); + is( + elements[0].style.transform, + "matrix(-1, 0, 0, 1, 200, 0)", + "Transform matches for horizontal-tb and rtl" + ); + await disableGrid(doc, highlighters, store, 1); + + elements = await enableGrid(doc, highlighters, store, 2); + is( + elements[0].style.transform, + "matrix(6.12323e-17, 1, -1, 6.12323e-17, 200, 0)", + "Transform matches for vertical-rl and ltr" + ); + await disableGrid(doc, highlighters, store, 2); + + elements = await enableGrid(doc, highlighters, store, 3); + is( + elements[0].style.transform, + "matrix(-6.12323e-17, 1, 1, 6.12323e-17, 0, 0)", + "Transform matches for vertical-lr and ltr" + ); + await disableGrid(doc, highlighters, store, 3); + + elements = await enableGrid(doc, highlighters, store, 4); + is( + elements[0].style.transform, + "matrix(6.12323e-17, 1, -1, 6.12323e-17, 200, 0)", + "Transform matches for sideways-rl and ltr" + ); + await disableGrid(doc, highlighters, store, 4); + + elements = await enableGrid(doc, highlighters, store, 5); + is( + elements[0].style.transform, + "matrix(6.12323e-17, -1, 1, 6.12323e-17, -9.18485e-15, 150)", + "Transform matches for sideways-lr and ltr" + ); + await disableGrid(doc, highlighters, store, 5); +}); + +async function enableGrid(doc, highlighters, store, index) { + info(`Enabling the CSS grid highlighter for grid ${index}.`); + const onHighlighterShown = highlighters.once("grid-highlighter-shown"); + const onCheckboxChange = waitUntilState( + store, + state => state.grids.length == 6 && state.grids[index].highlighted + ); + const onGridOutlineRendered = waitForDOM(doc, "#grid-cell-group"); + const gridList = doc.getElementById("grid-list"); + gridList.children[index].querySelector("input").click(); + await onHighlighterShown; + await onCheckboxChange; + return onGridOutlineRendered; +} + +async function disableGrid(doc, highlighters, store, index) { + info(`Disabling the CSS grid highlighter for grid ${index}.`); + const onHighlighterShown = highlighters.once("grid-highlighter-hidden"); + const onCheckboxChange = waitUntilState( + store, + state => state.grids.length == 6 && !state.grids[index].highlighted + ); + const onGridOutlineRemoved = waitForDOM(doc, "#grid-cell-group", 0); + const gridList = doc.getElementById("grid-list"); + gridList.children[index].querySelector("input").click(); + await onHighlighterShown; + await onCheckboxChange; + return onGridOutlineRemoved; +} diff --git a/devtools/client/inspector/grids/test/browser_grids_highlighter-setting-rules-grid-toggle.js b/devtools/client/inspector/grids/test/browser_grids_highlighter-setting-rules-grid-toggle.js new file mode 100644 index 0000000000..c2c22b8b87 --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_highlighter-setting-rules-grid-toggle.js @@ -0,0 +1,75 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test toggling the grid highlighter in the rule view with changes in the grid +// display setting from the layout view. + +const TEST_URI = ` + <style type='text/css'> + #grid { + display: grid; + } + </style> + <div id="grid"> + <div id="cell1">cell1</div> + <div id="cell2">cell2</div> + </div> +`; + +const SHOW_INFINITE_LINES_PREF = "devtools.gridinspector.showInfiniteLines"; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, gridInspector } = await openLayoutView(); + const { document: doc } = gridInspector; + const { store } = inspector; + + const checkbox = doc.getElementById("grid-setting-extend-grid-lines"); + + ok( + !Services.prefs.getBoolPref(SHOW_INFINITE_LINES_PREF), + "'Extend grid lines infinitely' is pref off by default." + ); + + info("Toggling ON the 'Extend grid lines infinitely' setting."); + const onCheckboxChange = waitUntilState( + store, + state => state.highlighterSettings.showInfiniteLines + ); + checkbox.click(); + await onCheckboxChange; + + info("Selecting the rule view."); + const ruleView = selectRuleView(inspector); + const highlighters = ruleView.highlighters; + + await selectNode("#grid", inspector); + + const container = getRuleViewProperty(ruleView, "#grid", "display").valueSpan; + const gridToggle = container.querySelector(".js-toggle-grid-highlighter"); + + info("Toggling ON the CSS grid highlighter from the rule-view."); + const onHighlighterShown = highlighters.once( + "grid-highlighter-shown", + (nodeFront, options) => { + info("Checking the grid highlighter display settings."); + const { + color, + showGridAreasOverlay, + showGridLineNumbers, + showInfiniteLines, + } = options; + + is(color, "#9400FF", "CSS grid highlighter color is correct."); + ok(!showGridAreasOverlay, "Show grid areas overlay option is off."); + ok(!showGridLineNumbers, "Show grid line numbers option is off."); + ok(showInfiniteLines, "Show infinite lines option is on."); + } + ); + gridToggle.click(); + await onHighlighterShown; + + Services.prefs.clearUserPref(SHOW_INFINITE_LINES_PREF); +}); diff --git a/devtools/client/inspector/grids/test/browser_grids_highlighter-toggle-telemetry.js b/devtools/client/inspector/grids/test/browser_grids_highlighter-toggle-telemetry.js new file mode 100644 index 0000000000..329acf3713 --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_highlighter-toggle-telemetry.js @@ -0,0 +1,63 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that the telemetry count is correct when the grid highlighter is activated from +// the layout view. + +const TEST_URI = ` + <style type='text/css'> + #grid { + display: grid; + } + </style> + <div id="grid"> + <div id="cell1">cell1</div> + <div id="cell2">cell2</div> + </div> +`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + startTelemetry(); + const { gridInspector, inspector } = await openLayoutView(); + const { document: doc } = gridInspector; + const { highlighters, store } = inspector; + + await selectNode("#grid", inspector); + const gridList = doc.getElementById("grid-list"); + const checkbox = gridList.children[0].querySelector("input"); + + info("Toggling ON the CSS grid highlighter from the layout panel."); + const onHighlighterShown = highlighters.once("grid-highlighter-shown"); + let onCheckboxChange = waitUntilState( + store, + state => state.grids.length == 1 && state.grids[0].highlighted + ); + checkbox.click(); + await onHighlighterShown; + await onCheckboxChange; + + info("Toggling OFF the CSS grid highlighter from the layout panel."); + const onHighlighterHidden = highlighters.once("grid-highlighter-hidden"); + onCheckboxChange = waitUntilState( + store, + state => state.grids.length == 1 && !state.grids[0].highlighted + ); + checkbox.click(); + await onHighlighterHidden; + await onCheckboxChange; + + checkResults(); +}); + +function checkResults() { + checkTelemetry("devtools.grid.gridinspector.opened", "", 1, "scalar"); + checkTelemetry( + "DEVTOOLS_GRID_HIGHLIGHTER_TIME_ACTIVE_SECONDS", + "", + null, + "hasentries" + ); +} diff --git a/devtools/client/inspector/grids/test/browser_grids_number-of-css-grids-telemetry.js b/devtools/client/inspector/grids/test/browser_grids_number-of-css-grids-telemetry.js new file mode 100644 index 0000000000..6ec6b32a63 --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_number-of-css-grids-telemetry.js @@ -0,0 +1,56 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the telemetry count for the number of CSS Grid Elements on a page navigation +// is correct when the toolbox is opened. + +const TEST_URI1 = ` + <div></div> +`; + +const TEST_URI2 = ` + <style type='text/css'> + #grid { + display: grid; + } + </style> + <div id="grid"> + <div id="cell1">cell1</div> + <div id="cell2">cell2</div> + </div> +`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI1)); + + startTelemetry(); + + const { inspector } = await openLayoutView(); + const { store } = inspector; + + info("Navigate to TEST_URI2"); + + const onGridListUpdate = waitUntilState( + store, + state => state.grids.length == 1 + ); + await navigateTo( + "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI2) + ); + await onGridListUpdate; + + checkResults(); +}); + +function checkResults() { + // Check for: + // - 1 CSS Grid Element + checkTelemetry( + "DEVTOOLS_NUMBER_OF_CSS_GRIDS_IN_A_PAGE", + "", + { 0: 0, 1: 1, 2: 0 }, + "array" + ); +} diff --git a/devtools/client/inspector/grids/test/browser_grids_persist-color-palette.js b/devtools/client/inspector/grids/test/browser_grids_persist-color-palette.js new file mode 100644 index 0000000000..0a4e10dfa0 --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_persist-color-palette.js @@ -0,0 +1,58 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the when a custom color has been previously set, we initialize +// the grid with that color. + +const TEST_URI = ` + <style type='text/css'> + #grid { + display: grid; + } + </style> + <div id="grid"> + <div class="cell1">cell1</div> + <div class="cell2">cell2</div> + </div> +`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, gridInspector, layoutView, toolbox } = + await openLayoutView(); + const { document: doc } = gridInspector; + const { store } = inspector; + const cPicker = layoutView.swatchColorPickerTooltip; + const swatch = doc.querySelector( + "#layout-grid-container .layout-color-swatch" + ); + + info("Scrolling into view of the #grid color swatch."); + swatch.scrollIntoView(); + + info("Opening the color picker by clicking on the #grid color swatch."); + const onColorPickerReady = cPicker.once("ready"); + swatch.click(); + await onColorPickerReady; + + await simulateColorPickerChange(cPicker, [51, 48, 0, 1]); + + info("Closing the toolbox."); + await toolbox.destroy(); + info("Open the toolbox again."); + await openLayoutView(); + + info("Check that the previously set custom color is used."); + is( + swatch.style.backgroundColor, + "rgb(51, 48, 0)", + "The color swatch's background is correct." + ); + is( + store.getState().grids[0].color, + "#333000", + "The grid color state is correct." + ); +}); diff --git a/devtools/client/inspector/grids/test/browser_grids_restored-after-reload.js b/devtools/client/inspector/grids/test/browser_grids_restored-after-reload.js new file mode 100644 index 0000000000..412bf98af9 --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_restored-after-reload.js @@ -0,0 +1,115 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the grid highlighter is re-displayed after reloading a page and the grid +// item is highlighted. + +const TEST_URI = ` + <style type='text/css'> + #grid { + display: grid; + } + </style> + <div id="grid"> + <div id="cell1">cell1</div> + <div id="cell2">cell2</div> + </div> +`; + +const OTHER_URI = ` + <style type='text/css'> + #grid { + display: grid; + } + </style> + <div id="grid"> + <div id="cell1">cell1</div> + <div id="cell2">cell2</div> + <div id="cell3">cell3</div> + </div> +`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { gridInspector, inspector } = await openLayoutView(); + const { document: doc } = gridInspector; + const { highlighters, store } = inspector; + const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID; + const { waitForHighlighterTypeRestored, waitForHighlighterTypeDiscarded } = + getHighlighterTestHelpers(inspector); + + await selectNode("#grid", inspector); + const gridList = doc.getElementById("grid-list"); + const checkbox = gridList.children[0].querySelector("input"); + + info("Toggling ON the CSS grid highlighter from the layout panel."); + const onHighlighterShown = highlighters.once("grid-highlighter-shown"); + const onCheckboxChange = waitUntilState( + store, + state => state.grids.length == 1 && state.grids[0].highlighted + ); + checkbox.click(); + await onHighlighterShown; + await onCheckboxChange; + + info( + "Check that the CSS grid highlighter is created and the saved grid state." + ); + is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown."); + is( + highlighters.state.grids.size, + 1, + "There's a saved grid state to be restored." + ); + + info( + "Reload the page, expect the highlighter to be displayed once again and " + + "grid is checked" + ); + const onRestored = waitForHighlighterTypeRestored(HIGHLIGHTER_TYPE); + let onGridListRestored = waitUntilState( + store, + state => state.grids.length == 1 && state.grids[0].highlighted + ); + + const onReloaded = inspector.once("reloaded"); + await reloadBrowser(); + info("Wait for inspector to be reloaded after page reload"); + await onReloaded; + + await onRestored; + await onGridListRestored; + + info( + "Check that the grid highlighter can be displayed after reloading the page" + ); + is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown."); + is( + highlighters.state.grids.size, + 1, + "The saved grid state has the correct number of saved states." + ); + + info( + "Navigate to another URL, and check that the highlighter is hidden and " + + "grid is unchecked" + ); + const otherUri = + "data:text/html;charset=utf-8," + encodeURIComponent(OTHER_URI); + const onDiscarded = waitForHighlighterTypeDiscarded(HIGHLIGHTER_TYPE); + onGridListRestored = waitUntilState( + store, + state => state.grids.length == 1 && !state.grids[0].highlighted + ); + await navigateTo(otherUri); + await onDiscarded; + await onGridListRestored; + + info( + "Check that the grid highlighter is hidden after navigating to a different page" + ); + ok(!highlighters.gridHighlighters.size, "CSS grid highlighter is hidden."); + ok(!highlighters.state.grids.size, "No grids to be restored on page reload."); +}); diff --git a/devtools/client/inspector/grids/test/browser_grids_restored-multiple-grids-after-reload.js b/devtools/client/inspector/grids/test/browser_grids_restored-multiple-grids-after-reload.js new file mode 100644 index 0000000000..81ac7619ff --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_restored-multiple-grids-after-reload.js @@ -0,0 +1,156 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the grid highlighters are re-displayed after reloading a page and multiple +// grids are highlighted. + +const TEST_URI = ` + <style type='text/css'> + .grid { + display: grid; + } + </style> + <div id="grid1" class="grid"> + <div class="cell1">cell1</div> + <div class="cell2">cell2</div> + </div> + <div id="grid2" class="grid"> + <div class="cell1">cell1</div> + <div class="cell2">cell2</div> + </div> + <div id="grid3" class="grid"> + <div class="cell1">cell1</div> + <div class="cell2">cell2</div> + </div> + <div id="grid4" class="grid"> + <div class="cell1">cell1</div> + <div class="cell2">cell2</div> + </div> +`; + +add_task(async function () { + await pushPref("devtools.gridinspector.maxHighlighters", 3); + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { gridInspector, inspector } = await openLayoutView(); + const { document: doc } = gridInspector; + const { highlighters, store } = inspector; + + await selectNode("#grid1", inspector); + const gridList = doc.getElementById("grid-list"); + const checkbox1 = gridList.children[0].querySelector("input"); + const checkbox2 = gridList.children[1].querySelector("input"); + const checkbox3 = gridList.children[2].querySelector("input"); + + info("Toggling ON the CSS grid highlighter for #grid1."); + let onHighlighterShown = highlighters.once("grid-highlighter-shown"); + let onCheckboxChange = waitUntilState( + store, + state => + state.grids.length == 4 && + state.grids[0].highlighted && + !state.grids[0].disabled && + !state.grids[1].highlighted && + !state.grids[1].disabled && + !state.grids[2].highlighted && + !state.grids[2].disabled && + !state.grids[3].highlighted && + !state.grids[3].disabled + ); + checkbox1.click(); + await onHighlighterShown; + await onCheckboxChange; + + info("Toggling ON the CSS grid highlighter for #grid2."); + onHighlighterShown = highlighters.once("grid-highlighter-shown"); + onCheckboxChange = waitUntilState( + store, + state => + state.grids.length == 4 && + state.grids[0].highlighted && + !state.grids[0].disabled && + state.grids[1].highlighted && + !state.grids[1].disabled && + !state.grids[2].highlighted && + !state.grids[2].disabled && + !state.grids[3].highlighted && + !state.grids[3].disabled + ); + checkbox2.click(); + await onHighlighterShown; + await onCheckboxChange; + + info("Toggling ON the CSS grid highlighter for #grid3."); + onHighlighterShown = highlighters.once("grid-highlighter-shown"); + onCheckboxChange = waitUntilState( + store, + state => + state.grids.length == 4 && + state.grids[0].highlighted && + !state.grids[0].disabled && + state.grids[1].highlighted && + !state.grids[1].disabled && + state.grids[2].highlighted && + !state.grids[2].disabled && + !state.grids[3].highlighted && + state.grids[3].disabled + ); + checkbox3.click(); + await onHighlighterShown; + await onCheckboxChange; + + info( + "Check that the CSS grid highlighters are created and the saved grid state." + ); + is( + highlighters.gridHighlighters.size, + 3, + "Got expected number of grid highlighters shown." + ); + is( + highlighters.state.grids.size, + 3, + "Got expected number of grids in the saved state" + ); + + info( + "Reload the page, expect the highlighters to be displayed once again and " + + "grids are checked" + ); + const onStateRestored = waitForNEvents( + highlighters, + "highlighter-restored", + 3 + ); + const onGridListRestored = waitUntilState( + store, + state => + state.grids.length == 4 && + state.grids[0].highlighted && + !state.grids[0].disabled && + state.grids[1].highlighted && + !state.grids[1].disabled && + state.grids[2].highlighted && + !state.grids[2].disabled && + !state.grids[3].highlighted && + state.grids[3].disabled + ); + await reloadBrowser(); + await onStateRestored; + await onGridListRestored; + + info( + "Check that the grid highlighters can be displayed after reloading the page" + ); + is( + highlighters.gridHighlighters.size, + 3, + "Got expected number of grid highlighters shown." + ); + is( + highlighters.state.grids.size, + 3, + "Got expected number of grids in the saved state" + ); +}); diff --git a/devtools/client/inspector/grids/test/doc_iframe_reloaded.html b/devtools/client/inspector/grids/test/doc_iframe_reloaded.html new file mode 100644 index 0000000000..a452dd4d8c --- /dev/null +++ b/devtools/client/inspector/grids/test/doc_iframe_reloaded.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<iframe srcdoc="<style>.grid{display:grid;}</style><div class='grid'><span>a</span><span>b</span></div>"></iframe> +<script> +"use strict"; +function reloadIFrame() { // eslint-disable-line no-unused-vars + const iFrame = document.querySelector("iframe"); + iFrame.setAttribute("srcdoc", iFrame.getAttribute("srcdoc")); +} +</script> diff --git a/devtools/client/inspector/grids/test/doc_subgrid.html b/devtools/client/inspector/grids/test/doc_subgrid.html new file mode 100644 index 0000000000..fef13bcc5c --- /dev/null +++ b/devtools/client/inspector/grids/test/doc_subgrid.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8" /> + <style> + .container { + display: grid; + grid-gap: 5px; + grid-template: auto / 1fr 3fr 1fr; + background: lightyellow; + } + + .subgrid { + display: grid; + grid: subgrid / subgrid; + } + + header, aside, section, footer { + background: lightblue; + font-family: sans-serif; + font-size: 3em; + } + + header, footer { + grid-column: span 3; + } + + main { + grid-column: span 3; + } + + .aside1 { + grid-column: 1; + } + + .aside2 { + grid-column: 3; + } + + section { + grid-column: 2; + } + </style> +</head> +<body> + <div class="container"> + <header class="subgrid">Header</header> + <main class="subgrid"> + <aside class="aside1 subgrid">aside</aside> + <section>section</section> + <aside class="aside2 subgrid">aside2</aside> + </main> + <footer>footer</footer> + </div> +</body> +</html> diff --git a/devtools/client/inspector/grids/test/head.js b/devtools/client/inspector/grids/test/head.js new file mode 100644 index 0000000000..5b54004abc --- /dev/null +++ b/devtools/client/inspector/grids/test/head.js @@ -0,0 +1,40 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ +/* eslint no-unused-vars: [2, {"vars": "local"}] */ + +"use strict"; + +// Import the inspector's head.js first (which itself imports shared-head.js). +Services.scriptloader.loadSubScript( + "chrome://mochitests/content/browser/devtools/client/inspector/test/head.js", + this +); + +const asyncStorage = require("resource://devtools/shared/async-storage.js"); + +Services.prefs.setIntPref("devtools.toolbox.footer.height", 350); +registerCleanupFunction(async function () { + Services.prefs.clearUserPref("devtools.toolbox.footer.height"); + await asyncStorage.removeItem("gridInspectorHostColors"); +}); + +/** + * Simulate a mouseover event on a grid cell currently rendered in the grid + * inspector. + * + * @param {Document} doc + * The owner document for the grid inspector. + * @param {Number} gridCellIndex + * The index (0-based) of the grid cell that should be hovered. + */ +function synthesizeMouseOverOnGridCell(doc, gridCellIndex = 0) { + // Make sure to retrieve the current live grid item before attempting to + // interact with it using mouse APIs. + const gridCell = doc.querySelectorAll("#grid-cell-group rect")[gridCellIndex]; + + EventUtils.synthesizeMouseAtCenter( + gridCell, + { type: "mouseover" }, + doc.defaultView + ); +} diff --git a/devtools/client/inspector/grids/test/xpcshell/.eslintrc.js b/devtools/client/inspector/grids/test/xpcshell/.eslintrc.js new file mode 100644 index 0000000000..86bd54c245 --- /dev/null +++ b/devtools/client/inspector/grids/test/xpcshell/.eslintrc.js @@ -0,0 +1,6 @@ +"use strict"; + +module.exports = { + // Extend from the common devtools xpcshell eslintrc config. + extends: "../../../../../.eslintrc.xpcshell.js", +}; diff --git a/devtools/client/inspector/grids/test/xpcshell/head.js b/devtools/client/inspector/grids/test/xpcshell/head.js new file mode 100644 index 0000000000..733c0400da --- /dev/null +++ b/devtools/client/inspector/grids/test/xpcshell/head.js @@ -0,0 +1,10 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/* eslint no-unused-vars: [2, {"vars": "local"}] */ + +const { require } = ChromeUtils.importESModule( + "resource://devtools/shared/loader/Loader.sys.mjs" +); diff --git a/devtools/client/inspector/grids/test/xpcshell/test_compare_fragments_geometry.js b/devtools/client/inspector/grids/test/xpcshell/test_compare_fragments_geometry.js new file mode 100644 index 0000000000..57f617a3ec --- /dev/null +++ b/devtools/client/inspector/grids/test/xpcshell/test_compare_fragments_geometry.js @@ -0,0 +1,129 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const { + compareFragmentsGeometry, +} = require("resource://devtools/client/inspector/grids/utils/utils.js"); + +const TESTS = [ + { + desc: "No fragments", + grids: [[], []], + expected: true, + }, + { + desc: "Different number of fragments", + grids: [ + [{}, {}, {}], + [{}, {}], + ], + expected: false, + }, + { + desc: "Different number of columns", + grids: [ + [{ cols: { lines: [{}, {}] }, rows: { lines: [] } }], + [{ cols: { lines: [{}] }, rows: { lines: [] } }], + ], + expected: false, + }, + { + desc: "Different number of rows", + grids: [ + [{ cols: { lines: [{}, {}] }, rows: { lines: [{}] } }], + [{ cols: { lines: [{}, {}] }, rows: { lines: [{}, {}] } }], + ], + expected: false, + }, + { + desc: "Different number of rows and columns", + grids: [ + [{ cols: { lines: [{}] }, rows: { lines: [{}] } }], + [{ cols: { lines: [{}, {}] }, rows: { lines: [{}, {}] } }], + ], + expected: false, + }, + { + desc: "Different column sizes", + grids: [ + [ + { + cols: { lines: [{ start: 0 }, { start: 500 }] }, + rows: { lines: [] }, + }, + ], + [ + { + cols: { lines: [{ start: 0 }, { start: 1000 }] }, + rows: { lines: [] }, + }, + ], + ], + expected: false, + }, + { + desc: "Different row sizes", + grids: [ + [ + { + cols: { lines: [{ start: 0 }, { start: 500 }] }, + rows: { lines: [{ start: -100 }] }, + }, + ], + [ + { + cols: { lines: [{ start: 0 }, { start: 500 }] }, + rows: { lines: [{ start: 0 }] }, + }, + ], + ], + expected: false, + }, + { + desc: "Different row and column sizes", + grids: [ + [ + { + cols: { lines: [{ start: 0 }, { start: 500 }] }, + rows: { lines: [{ start: -100 }] }, + }, + ], + [ + { + cols: { lines: [{ start: 0 }, { start: 505 }] }, + rows: { lines: [{ start: 0 }] }, + }, + ], + ], + expected: false, + }, + { + desc: "Complete structure, same fragments", + grids: [ + [ + { + cols: { lines: [{ start: 0 }, { start: 100.3 }, { start: 200.6 }] }, + rows: { lines: [{ start: 0 }, { start: 1000 }, { start: 2000 }] }, + }, + ], + [ + { + cols: { lines: [{ start: 0 }, { start: 100.3 }, { start: 200.6 }] }, + rows: { lines: [{ start: 0 }, { start: 1000 }, { start: 2000 }] }, + }, + ], + ], + expected: true, + }, +]; + +function run_test() { + for (const { desc, grids, expected } of TESTS) { + if (desc) { + info(desc); + } + equal(compareFragmentsGeometry(grids[0], grids[1]), expected); + } +} diff --git a/devtools/client/inspector/grids/test/xpcshell/xpcshell.toml b/devtools/client/inspector/grids/test/xpcshell/xpcshell.toml new file mode 100644 index 0000000000..83e821f9cd --- /dev/null +++ b/devtools/client/inspector/grids/test/xpcshell/xpcshell.toml @@ -0,0 +1,6 @@ +[DEFAULT] +tags = "devtools" +firefox-appdir = "browser" +head = "head.js" + +["test_compare_fragments_geometry.js"] diff --git a/devtools/client/inspector/grids/types.js b/devtools/client/inspector/grids/types.js new file mode 100644 index 0000000000..b2a936fef2 --- /dev/null +++ b/devtools/client/inspector/grids/types.js @@ -0,0 +1,57 @@ +/* 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 PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); + +/** + * A single grid container in the document. + */ +exports.grid = { + // The id of the grid + id: PropTypes.number, + + // The color for the grid overlay highlighter + color: PropTypes.string, + + // The text direction of the grid container + direction: PropTypes.string, + + // Whether or not the grid checkbox is disabled as a result of hitting the + // maximum number of grid highlighters shown. + disabled: PropTypes.bool, + + // The grid fragment object of the grid container + gridFragments: PropTypes.array, + + // Whether or not the grid highlighter is highlighting the grid + highlighted: PropTypes.bool, + + // Whether or not the grid is a subgrid + isSubgrid: PropTypes.bool, + + // The node front of the grid container + nodeFront: PropTypes.object, + + // If the grid is a subgrid, this references the parent node front actor ID + parentNodeActorID: PropTypes.string, + + // Array of ids belonging to the subgrid within the grid container + subgrids: PropTypes.arrayOf(PropTypes.number), + + // The writing mode of the grid container + writingMode: PropTypes.string, +}; + +/** + * The grid highlighter settings on what to display in its grid overlay in the document. + */ +exports.highlighterSettings = { + // Whether or not the grid highlighter should show the grid line numbers + showGridLineNumbers: PropTypes.bool, + + // Whether or not the grid highlighter extends the grid lines infinitely + showInfiniteLines: PropTypes.bool, +}; diff --git a/devtools/client/inspector/grids/utils/moz.build b/devtools/client/inspector/grids/utils/moz.build new file mode 100644 index 0000000000..c74e63e617 --- /dev/null +++ b/devtools/client/inspector/grids/utils/moz.build @@ -0,0 +1,9 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +DevToolsModules( + "utils.js", +) diff --git a/devtools/client/inspector/grids/utils/utils.js b/devtools/client/inspector/grids/utils/utils.js new file mode 100644 index 0000000000..fc25de8775 --- /dev/null +++ b/devtools/client/inspector/grids/utils/utils.js @@ -0,0 +1,58 @@ +/* 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"; + +/** + * Compares 2 sets of grid fragments to each other and checks if they have the same + * general geometry. + * This means that things like areas, area names or line names are ignored. + * This only checks if the 2 sets of fragments have as many fragments, as many lines, and + * that those lines are at the same distance. + * + * @param {Array} fragments1 + * A list of gridFragment objects. + * @param {Array} fragments2 + * Another list of gridFragment objects to compare to the first list. + * @return {Boolean} + * True if the fragments are the same, false otherwise. + */ +function compareFragmentsGeometry(fragments1, fragments2) { + // Compare the number of fragments. + if (fragments1.length !== fragments2.length) { + return false; + } + + // Compare the number of areas, rows and columns. + for (let i = 0; i < fragments1.length; i++) { + if ( + fragments1[i].cols.lines.length !== fragments2[i].cols.lines.length || + fragments1[i].rows.lines.length !== fragments2[i].rows.lines.length + ) { + return false; + } + } + + // Compare the offset of lines. + for (let i = 0; i < fragments1.length; i++) { + for (let j = 0; j < fragments1[i].cols.lines.length; j++) { + if ( + fragments1[i].cols.lines[j].start !== fragments2[i].cols.lines[j].start + ) { + return false; + } + } + for (let j = 0; j < fragments1[i].rows.lines.length; j++) { + if ( + fragments1[i].rows.lines[j].start !== fragments2[i].rows.lines[j].start + ) { + return false; + } + } + } + + return true; +} + +module.exports.compareFragmentsGeometry = compareFragmentsGeometry; |