Backed out changeset 830842118f8a (bug 1356474) for failing most of its browser_grids_grid-outline-* tests

MozReview-Commit-ID: FWWM0ftcJHZ

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

@@ -23,6 +23,7 @@ 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,
@@ -43,6 +44,7 @@ module.exports = createClass({
       grids,
       highlighterSettings,
       setSelectedNode,
+      showGridOutline,
       onHideBoxModelHighlighter,
       onSetGridOverlayColor,
       onShowBoxModelHighlighterForNode,
@@ -79,11 +81,14 @@ module.exports = createClass({
             onToggleShowInfiniteLines,
           })
         ),
-        GridOutline({
+        showGridOutline ?
-          grids,
+          GridOutline({
-          onShowGridAreaHighlight,
+            grids,
-          onShowGridCellHighlight,
+            onShowGridAreaHighlight,
-        })
+            onShowGridCellHighlight,
+          })
+          :
+          null
       )
       :
       dom.div(

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

@@ -297,7 +297,6 @@ module.exports = createClass({
 
     return dom.g(
       {
-        id: "grid-cell-group",
         "className": "grid-cell-group",
         "data-grid-line-color": color,
         "style": { color }
@@ -330,7 +329,6 @@ module.exports = createClass({
     return showOutline ?
       dom.svg(
         {
-          id: "grid-outline",
           width: "100%",
           height: this.getHeight(),
           viewBox: `${TRANSLATE_X} ${TRANSLATE_Y} ${width} ${height}`,
@@ -347,8 +345,7 @@ module.exports = createClass({
     return selectedGrid ?
       dom.div(
         {
-          id: "grid-outline-container",
+          className: "grid-outline",
-          className: "grid-outline-container",
         },
         this.renderOutline()
       )

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

@@ -24,8 +24,4 @@ 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-outline-cannot-show-outline.js

@@ -1,52 +0,0 @@
-/* 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.");
-});

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

@@ -1,77 +0,0 @@
-/* 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;
-});

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

@@ -1,65 +0,0 @@
-/* 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;
-});

devtools/client/inspector/grids/test/browser_grids_grid-outline-selected-grid.js

@@ -1,61 +0,0 @@
-/* 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.");
-});

devtools/client/inspector/layout/layout.js

@@ -15,6 +15,8 @@ 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;
@@ -63,6 +65,12 @@ LayoutView.prototype = {
        */
       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,

devtools/client/preferences/devtools.js

@@ -74,6 +74,7 @@ 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

devtools/client/themes/layout.css

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