Bug 1356474 - Add units tests for the Grid Outline component. r=gl
☠☠ backed out by 0156ad061c5d ☠ ☠
authorMicah Tigley <tigleym@gmail.com>
Thu, 08 Jun 2017 19:12:25 -0600
changeset 413633 830842118f8a0f636aa298dd27a34918d924f746
parent 413632 45a389969f2594c63f22e4fcf3c4dcb17a702915
child 413634 ea0c86248f0aee0133154de3d763917f42748300
push id1490
push usermtabara@mozilla.com
push dateMon, 31 Jul 2017 14:08:16 +0000
treeherdermozilla-release@70e32e6bf15e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1356474
milestone55.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1356474 - Add units tests for the Grid Outline component. r=gl MozReview-Commit-ID: 85ZjxjkpIgU
devtools/client/inspector/grids/components/Grid.js
devtools/client/inspector/grids/components/GridOutline.js
devtools/client/inspector/grids/test/browser.ini
devtools/client/inspector/grids/test/browser_grids_grid-outline-cannot-show-outline.js
devtools/client/inspector/grids/test/browser_grids_grid-outline-highlight-area.js
devtools/client/inspector/grids/test/browser_grids_grid-outline-highlight-cell.js
devtools/client/inspector/grids/test/browser_grids_grid-outline-selected-grid.js
devtools/client/inspector/layout/layout.js
devtools/client/preferences/devtools.js
devtools/client/themes/layout.css
--- a/devtools/client/inspector/grids/components/Grid.js
+++ b/devtools/client/inspector/grids/components/Grid.js
@@ -18,17 +18,16 @@ module.exports = createClass({
 
   displayName: "Grid",
 
   propTypes: {
     getSwatchColorPickerTooltip: PropTypes.func.isRequired,
     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,
     onShowGridAreaHighlight: PropTypes.func.isRequired,
     onShowGridCellHighlight: PropTypes.func.isRequired,
     onShowGridLineNamesHighlight: PropTypes.func.isRequired,
     onToggleGridHighlighter: PropTypes.func.isRequired,
     onToggleShowGridAreas: PropTypes.func.isRequired,
@@ -39,17 +38,16 @@ module.exports = createClass({
   mixins: [ addons.PureRenderMixin ],
 
   render() {
     let {
       getSwatchColorPickerTooltip,
       grids,
       highlighterSettings,
       setSelectedNode,
-      showGridOutline,
       onHideBoxModelHighlighter,
       onSetGridOverlayColor,
       onShowBoxModelHighlighterForNode,
       onShowGridAreaHighlight,
       onShowGridCellHighlight,
       onToggleShowGridAreas,
       onToggleGridHighlighter,
       onToggleShowGridLineNumbers,
@@ -76,24 +74,21 @@ module.exports = createClass({
           }),
           GridDisplaySettings({
             highlighterSettings,
             onToggleShowGridAreas,
             onToggleShowGridLineNumbers,
             onToggleShowInfiniteLines,
           })
         ),
-        showGridOutline ?
-          GridOutline({
-            grids,
-            onShowGridAreaHighlight,
-            onShowGridCellHighlight,
-          })
-          :
-          null
+        GridOutline({
+          grids,
+          onShowGridAreaHighlight,
+          onShowGridCellHighlight,
+        })
       )
       :
       dom.div(
         {
           className: "layout-no-grids",
         },
         getStr("layout.noGridsOnThisPage")
       );
--- a/devtools/client/inspector/grids/components/GridOutline.js
+++ b/devtools/client/inspector/grids/components/GridOutline.js
@@ -292,16 +292,17 @@ module.exports = createClass({
     );
   },
 
   renderGridOutline(grid) {
     let { color } = grid;
 
     return dom.g(
       {
+        id: "grid-cell-group",
         "className": "grid-cell-group",
         "data-grid-line-color": color,
         "style": { color }
       },
       this.renderGrid(grid)
     );
   },
 
@@ -324,33 +325,35 @@ module.exports = createClass({
       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();
   },
 
   render() {
     const { selectedGrid } = this.state;
 
     return selectedGrid ?
       dom.div(
         {
-          className: "grid-outline",
+          id: "grid-outline-container",
+          className: "grid-outline-container",
         },
         this.renderOutline()
       )
       :
       null;
   },
 
 });
--- a/devtools/client/inspector/grids/test/browser.ini
+++ b/devtools/client/inspector/grids/test/browser.ini
@@ -19,9 +19,13 @@ support-files =
 [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-mutation-element-added.js]
 [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]
new file mode 100644
--- /dev/null
+++ b/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.querySelector("#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.");
+});
new file mode 100644
--- /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 mouseovering a grid area in the
+// grid outline.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+      height: 100px;
+      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;
+
+  yield selectNode("#grid", inspector);
+  let gridList = doc.querySelector("#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 gridOutline = doc.querySelector("#grid-outline");
+  let gridCellA = gridOutline.children[0].querySelectorAll(
+    "[data-grid-id='0'][data-grid-row='1'][data-grid-column='1']");
+
+  info("Scrolling into the view of the #grid-outline.");
+  gridCellA[0].scrollIntoView();
+
+  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;
+
+        ok(showGridCell, "Show grid cell options are available.");
+        ok(showGridArea, "Show grid areas options are available.");
+
+        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[0], 10, 5, {type: "mouseover"}, doc.defaultView);
+  yield onCellAHighlight;
+});
new file mode 100644
--- /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 mouseovering 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;
+
+  yield selectNode("#grid", inspector);
+  let gridList = doc.querySelector("#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 gridOutline = doc.querySelector("#grid-outline");
+  let gridCellA = gridOutline.children[0].querySelectorAll(
+    "[data-grid-id='0'][data-grid-row='1'][data-grid-column='1']");
+
+  info("Checking Grid Cell A and B have been rendered.");
+  is(gridCellA.length, 1, "Only one grid cell A should be rendered.");
+
+  info("Scrolling into the view the #grid-outline-container.");
+  gridCellA[0].scrollIntoView();
+
+  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;
+
+        ok(showGridCell, "Show grid cell options are available.");
+        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[0], 10, 5, {type: "mouseover"}, doc.defaultView);
+  yield onCellAHighlight;
+});
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-outline-selected-grid.js
@@ -0,0 +1,61 @@
+/* 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;
+
+  yield selectNode("#grid", inspector);
+  let outline = doc.getElementById("grid-outline-container");
+  let gridList = doc.querySelector("#grid-list");
+  let checkbox = gridList.children[0].querySelector("input");
+
+  info("Checking the initial state of the Grid Inspector.");
+  ok(!outline, "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);
+  checkbox.click();
+  yield onHighlighterShown;
+  yield onCheckboxChange;
+
+  outline = doc.getElementById("grid-outline");
+  info("Checking the grid outline is shown.");
+  is(outline.childNodes.length, 1, "One grid container 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;
+
+  outline = doc.getElementById("grid-outline-container");
+  info("Checking the grid outline is hidden.");
+  ok(!outline, "There should be no outline shown.");
+});
--- a/devtools/client/inspector/layout/layout.js
+++ b/devtools/client/inspector/layout/layout.js
@@ -10,18 +10,16 @@ const { createFactory, createElement } =
 const { Provider } = require("devtools/client/shared/vendor/react-redux");
 
 const App = createFactory(require("./components/App"));
 
 const { LocalizationHelper } = require("devtools/shared/l10n");
 const INSPECTOR_L10N =
   new LocalizationHelper("devtools/client/locales/inspector.properties");
 
-const SHOW_GRID_OUTLINE_PREF = "devtools.gridinspector.showGridOutline";
-
 function LayoutView(inspector, window) {
   this.document = window.document;
   this.inspector = inspector;
   this.store = inspector.store;
 
   this.init();
 }
 
@@ -60,22 +58,16 @@ LayoutView.prototype = {
       getSwatchColorPickerTooltip,
       setSelectedNode,
       /**
        * Shows the box model properties under the box model if true, otherwise, hidden by
        * 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,
       onSetGridOverlayColor,
       onShowBoxModelEditor,
       onShowBoxModelHighlighter,
       onShowBoxModelHighlighterForNode,
       onShowGridAreaHighlight,
       onShowGridCellHighlight,
       onShowGridLineNamesHighlight,
--- a/devtools/client/preferences/devtools.js
+++ b/devtools/client/preferences/devtools.js
@@ -69,17 +69,16 @@ pref("devtools.inspector.colorWidget.ena
 pref("devtools.fontinspector.enabled", true);
 
 // Enable the Layout View
 pref("devtools.layoutview.enabled", false);
 
 // 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
 pref("devtools.computed.boxmodel.opened", true);
 // Whether or not the box model panel is opened in the layout view
 pref("devtools.layout.boxmodel.opened", true);
 // Whether or not the grid inspector panel is opened in the layout view
 pref("devtools.layout.grid.opened", true);
--- a/devtools/client/themes/layout.css
+++ b/devtools/client/themes/layout.css
@@ -72,21 +72,21 @@
 .grid-container:first-child {
   margin-bottom: 10px;
 }
 
 /**
  * Grid Outline
  */
 
-.grid-outline {
+.grid-outline-container {
   margin: 5px 0;
 }
 
-.grid-outline svg {
+.grid-outline-container svg {
   overflow: visible;
 }
 
 .grid-outline-border {
   fill: none;
   stroke: currentColor;
   stroke-width: 0.75;
   vector-effect: non-scaling-stroke;