Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

6 files changed, 923 insertions, 0 deletions

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..984f57c6a7
--- /dev/null
+++ b/devtools/client/inspector/grids/components/GridItem.js
@@ -0,0 +1,173 @@
+/* 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");
+
+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,
+          }),
+          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.div({
+          className: "layout-color-swatch",
+          "data-color": grid.color,
+          ref: this.swatchEl,
+          style: {
+            backgroundColor: grid.color,
+          },
+          title: 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",
+)