Bug 1356474 - Add units tests for the Grid Outline component. r=gl

MozReview-Commit-ID: 85ZjxjkpIgU

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

@@ -23,7 +23,6 @@ module.exports = createClass({
     grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
     highlighterSettings: PropTypes.shape(Types.highlighterSettings).isRequired,
     setSelectedNode: PropTypes.func.isRequired,
-    showGridOutline: PropTypes.bool.isRequired,
     onHideBoxModelHighlighter: PropTypes.func.isRequired,
     onSetGridOverlayColor: PropTypes.func.isRequired,
     onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
@@ -44,7 +43,6 @@ module.exports = createClass({
       grids,
       highlighterSettings,
       setSelectedNode,
-      showGridOutline,
       onHideBoxModelHighlighter,
       onSetGridOverlayColor,
       onShowBoxModelHighlighterForNode,
@@ -81,14 +79,11 @@ module.exports = createClass({
             onToggleShowInfiniteLines,
           })
         ),
-        showGridOutline ?
-          GridOutline({
-            grids,
-            onShowGridAreaHighlight,
-            onShowGridCellHighlight,
-          })
-          :
-          null
+        GridOutline({
+          grids,
+          onShowGridAreaHighlight,
+          onShowGridCellHighlight,
+        })
       )
       :
       dom.div(

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

@@ -157,9 +157,10 @@ module.exports = createClass({
     const rowNumber = target.dataset.gridRow;
     const columnNumber = target.dataset.gridColumn;
 
+    onShowGridAreaHighlight(grids[id].nodeFront, null, color);
+    onShowGridCellHighlight(grids[id].nodeFront, color);
+
     if (hide) {
-      onShowGridAreaHighlight(grids[id].nodeFront, null, color);
-      onShowGridCellHighlight(grids[id].nodeFront, color);
       return;
     }
 
@@ -297,6 +298,7 @@ module.exports = createClass({
 
     return dom.g(
       {
+        id: "grid-cell-group",
         "className": "grid-cell-group",
         "data-grid-line-color": color,
         "style": { color }
@@ -329,6 +331,7 @@ module.exports = createClass({
     return showOutline ?
       dom.svg(
         {
+          id: "grid-outline",
           width: "100%",
           height: this.getHeight(),
           viewBox: `${TRANSLATE_X} ${TRANSLATE_Y} ${width} ${height}`,
@@ -345,7 +348,8 @@ module.exports = createClass({
     return selectedGrid ?
       dom.div(
         {
-          className: "grid-outline",
+          id: "grid-outline-container",
+          className: "grid-outline-container",
         },
         this.renderOutline()
       )

devtools/client/inspector/grids/grid-inspector.js

@@ -50,7 +50,6 @@ function GridInspector(inspector, window) {
 
   this.onGridLayoutChange = this.onGridLayoutChange.bind(this);
   this.onHighlighterChange = this.onHighlighterChange.bind(this);
-  this.onMarkupMutation = this.onMarkupMutation.bind(this);
   this.onReflow = this.onReflow.bind(this);
   this.onSetGridOverlayColor = this.onSetGridOverlayColor.bind(this);
   this.onShowGridAreaHighlight = this.onShowGridAreaHighlight.bind(this);
@@ -91,7 +90,6 @@ GridInspector.prototype = {
 
     this.highlighters.on("grid-highlighter-hidden", this.onHighlighterChange);
     this.highlighters.on("grid-highlighter-shown", this.onHighlighterChange);
-    this.inspector.on("markupmutation", this.onMarkupMutation);
     this.inspector.sidebar.on("select", this.onSidebarSelect);
 
     this.onSidebarSelect();
@@ -104,7 +102,6 @@ GridInspector.prototype = {
   destroy() {
     this.highlighters.off("grid-highlighter-hidden", this.onHighlighterChange);
     this.highlighters.off("grid-highlighter-shown", this.onHighlighterChange);
-    this.inspector.off("markupmutation", this.onMarkupMutation);
     this.inspector.sidebar.off("select", this.onSidebarSelect);
     this.layoutInspector.off("grid-layout-changed", this.onGridLayoutChange);
 
@@ -343,20 +340,14 @@ GridInspector.prototype = {
     this.lastHighlighterState = null;
   },
 
-  /**
-   * Handler for the "markupmutation" event fired by the inspector. On markup mutations,
-   * update the grid panel content.
-   */
-  onMarkupMutation() {
-    this.updateGridPanel();
-  },
-
   /**
    * Handler for the "reflow" event fired by the inspector's reflow tracker. On reflows,
    * update the grid panel content.
    */
   onReflow() {
-    this.updateGridPanel();
+    if (this.isPanelVisible()) {
+      this.updateGridPanel();
+    }
   },
 
   /**

devtools/client/inspector/grids/test/browser.ini

@@ -24,4 +24,8 @@ support-files =
 [browser_grids_grid-list-on-mutation-element-removed.js]
 [browser_grids_grid-list-toggle-multiple-grids.js]
 [browser_grids_grid-list-toggle-single-grid.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-selected-grid.js]
 [browser_grids_highlighter-setting-rules-grid-toggle.js]

devtools/client/inspector/grids/test/browser_grids_grid-list-no-grids.js

@@ -23,7 +23,7 @@ add_task(function* () {
 
   yield selectNode("#grid", inspector);
   let noGridList = doc.querySelector(".layout-no-grids");
-  let gridList = doc.querySelector("#grid-list");
+  let gridList = doc.getElementById("grid-list");
 
   info("Checking the initial state of the Grid Inspector.");
   ok(noGridList, "The message no grid containers is displayed.");

devtools/client/inspector/grids/test/browser_grids_grid-list-on-mutation-element-added.js

@@ -28,7 +28,7 @@ add_task(function* () {
   let { highlighters, store } = inspector;
 
   yield selectNode("#grid", inspector);
-  let gridList = doc.querySelector("#grid-list");
+  let gridList = doc.getElementById("grid-list");
   let checkbox1 = gridList.children[0].querySelector("input");
 
   info("Checking the initial state of the Grid Inspector.");

devtools/client/inspector/grids/test/browser_grids_grid-list-on-mutation-element-removed.js

@@ -25,7 +25,7 @@ add_task(function* () {
   let { highlighters, store } = inspector;
 
   yield selectNode("#grid", inspector);
-  let gridList = doc.querySelector("#grid-list");
+  let gridList = doc.getElementById("grid-list");
   let checkbox = gridList.children[0].querySelector("input");
 
   info("Checking the initial state of the Grid Inspector.");

devtools/client/inspector/grids/test/browser_grids_grid-list-toggle-multiple-grids.js

@@ -29,7 +29,7 @@ add_task(function* () {
   let { highlighters, store } = inspector;
 
   yield selectNode("#grid1", inspector);
-  let gridList = doc.querySelector("#grid-list");
+  let gridList = doc.getElementById("grid-list");
   let checkbox1 = gridList.children[0].querySelector("input");
   let checkbox2 = gridList.children[1].querySelector("input");
 

devtools/client/inspector/grids/test/browser_grids_grid-list-toggle-single-grid.js

@@ -24,7 +24,7 @@ add_task(function* () {
   let { highlighters, store } = inspector;
 
   yield selectNode("#grid", inspector);
-  let gridList = doc.querySelector("#grid-list");
+  let gridList = doc.getElementById("grid-list");
   let checkbox = gridList.children[0].querySelector("input");
 
   info("Checking the initial state of the Grid Inspector.");

devtools/client/inspector/grids/test/browser_grids_grid-outline-cannot-show-outline.js

@@ -0,0 +1,52 @@
+/* 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: 2px;
+    }
+    .cell {
+      grid-template-columns: 2px;
+    }
+  </style>
+  <div id="grid">
+    <div id="cellA" className="cell">cell A</div>
+    <div id="cellB" className="cell">cell B</div>
+  </div>
+`;
+
+add_task(function* () {
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  let { inspector, gridInspector } = yield openLayoutView();
+  let { document: doc } = gridInspector;
+  let { highlighters, store } = inspector;
+
+  yield selectNode("#grid", inspector);
+  let outline = doc.getElementById("grid-outline-container");
+  let gridList = doc.getElementById("grid-list");
+  let checkbox = gridList.children[0].querySelector("input");
+
+  info("Toggling ON the CSS grid highlighter from the layout panel.");
+  let onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  let onCheckboxChange = waitUntilState(store, state =>
+    state.grids.length == 1 &&
+    state.grids[0].highlighted);
+  checkbox.click();
+  yield onHighlighterShown;
+  yield onCheckboxChange;
+
+  let cannotShowGridOutline = doc.querySelector(".grid-outline-text");
+
+  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.");
+});

devtools/client/inspector/grids/test/browser_grids_grid-outline-highlight-area.js

@@ -0,0 +1,71 @@
+/* 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(function* () {
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  let { inspector, gridInspector } = yield openLayoutView();
+  let { document: doc } = gridInspector;
+  let { highlighters, store } = inspector;
+
+  // Don't track reflows since this might cause intermittent failures.
+  inspector.reflowTracker.untrackReflows(gridInspector, gridInspector.onReflow);
+
+  let gridList = doc.getElementById("grid-list");
+  let checkbox = gridList.children[0].querySelector("input");
+
+  info("Toggling ON the CSS grid highlighter from the layout panel.");
+  let onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  let onGridOutlineRendered = waitForDOM(doc, "#grid-cell-group rect", 3);
+  let onCheckboxChange = waitUntilState(store, state =>
+    state.grids.length == 1 &&
+    state.grids[0].highlighted);
+  checkbox.click();
+  yield onCheckboxChange;
+  yield onHighlighterShown;
+  let elements = yield onGridOutlineRendered;
+
+  let gridCellA = elements[1];
+
+  info("Hovering over grid cell A in the grid outline.");
+  let onCellAHighlight = highlighters.once("grid-highlighter-shown",
+    (event, nodeFront, options) => {
+      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'.");
+    });
+  EventUtils.synthesizeMouse(gridCellA, 5, 5, {type: "mouseover"}, doc.defaultView);
+  yield onCellAHighlight;
+});

devtools/client/inspector/grids/test/browser_grids_grid-outline-highlight-cell.js

@@ -0,0 +1,60 @@
+/* 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(function* () {
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  let { inspector, gridInspector } = yield openLayoutView();
+  let { document: doc } = gridInspector;
+  let { highlighters, store } = inspector;
+
+  // Don't track reflows since this might cause intermittent failures.
+  inspector.reflowTracker.untrackReflows(gridInspector, gridInspector.onReflow);
+
+  let gridList = doc.getElementById("grid-list");
+  let checkbox = gridList.children[0].querySelector("input");
+
+  info("Toggling ON the CSS grid highlighter from the layout panel.");
+  let onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  let onGridOutlineRendered = waitForDOM(doc, "#grid-cell-group rect", 3);
+  let onCheckboxChange = waitUntilState(store, state =>
+    state.grids.length == 1 &&
+    state.grids[0].highlighted);
+  checkbox.click();
+  yield onCheckboxChange;
+  yield onHighlighterShown;
+  let elements = yield onGridOutlineRendered;
+
+  let gridCellA = elements[1];
+
+  info("Hovering over grid cell A in the grid outline.");
+  let onCellAHighlight = highlighters.once("grid-highlighter-shown",
+    (event, nodeFront, options) => {
+      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.");
+    });
+  EventUtils.synthesizeMouse(gridCellA, 10, 5, {type: "mouseover"}, doc.defaultView);
+  yield onCellAHighlight;
+});

devtools/client/inspector/grids/test/browser_grids_grid-outline-selected-grid.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 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(function* () {
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  let { inspector, gridInspector } = yield openLayoutView();
+  let { document: doc } = gridInspector;
+  let { highlighters, store } = inspector;
+
+  let gridList = doc.getElementById("grid-list");
+  let 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.");
+  let onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  let onCheckboxChange = waitUntilState(store, state =>
+    state.grids.length == 1 &&
+    state.grids[0].highlighted);
+  let onGridOutlineRendered = waitForDOM(doc, "#grid-cell-group rect", 4);
+  checkbox.click();
+  yield onHighlighterShown;
+  yield onCheckboxChange;
+  let elements = yield onGridOutlineRendered;
+
+  info("Checking the grid outline is shown.");
+  is(elements.length, 4, "Grid outline is shown.");
+
+  info("Toggling OFF the CSS grid highlighter from the layout panel.");
+  let onHighlighterHidden = highlighters.once("grid-highlighter-hidden");
+  onCheckboxChange = waitUntilState(store, state =>
+    state.grids.length == 1 &&
+    !state.grids[0].highlighted);
+  checkbox.click();
+  yield onHighlighterHidden;
+  yield onCheckboxChange;
+
+  ok(!doc.getElementById("grid-outline-container"), "No grid outline is hidden.");
+});

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

@@ -17,9 +17,11 @@ Services.scriptloader.loadSubScript(
   this);
 
 Services.prefs.setBoolPref("devtools.layoutview.enabled", true);
+Services.prefs.setBoolPref("devtools.promote.layoutview.showPromoteBar", false);
 Services.prefs.setIntPref("devtools.toolbox.footer.height", 350);
 registerCleanupFunction(() => {
   Services.prefs.clearUserPref("devtools.layoutview.enabled");
+  Services.prefs.clearUserPref("devtools.promote.layoutview.showPromoteBar");
   Services.prefs.clearUserPref("devtools.toolbox.footer.height");
 });
 

devtools/client/inspector/layout/layout.js

@@ -15,7 +15,6 @@ const { LocalizationHelper } = require("devtools/shared/l10n");
 const INSPECTOR_L10N =
   new LocalizationHelper("devtools/client/locales/inspector.properties");
 
-const SHOW_GRID_OUTLINE_PREF = "devtools.gridinspector.showGridOutline";
 // @remove after release 56 (See Bug 1355747)
 const PROMOTE_COUNT_PREF = "devtools.promote.layoutview";
 
@@ -75,13 +74,6 @@ LayoutView.prototype = {
        * default.
        */
       showBoxModelProperties: true,
-
-      /**
-       * Shows the grid outline if user preferences are set to true, otherwise, hidden by
-       * default.
-       */
-      showGridOutline: Services.prefs.getBoolPref(SHOW_GRID_OUTLINE_PREF),
-
       onHideBoxModelHighlighter,
       onPromoteLearnMoreClick,
       onSetGridOverlayColor,

devtools/client/preferences/devtools.js

@@ -81,7 +81,6 @@ pref("devtools.promote.layoutview.showPromoteBar", true);
 // Grid highlighter preferences
 pref("devtools.gridinspector.showGridAreas", false);
 pref("devtools.gridinspector.showGridLineNumbers", false);
-pref("devtools.gridinspector.showGridOutline", false);
 pref("devtools.gridinspector.showInfiniteLines", false);
 
 // Whether or not the box model panel is opened in the computed view

devtools/client/themes/layout.css

@@ -127,11 +127,11 @@
  * Grid Outline
  */
 
-.grid-outline {
+.grid-outline-container {
   margin: 5px 0;
 }
 
-.grid-outline svg {
+.grid-outline-container svg {
   overflow: visible;
 }