From 676fa88974076e97222210bc35606ddf8fcb7a34 Mon Sep 17 00:00:00 2001 From: Phil Ringnalda Date: Thu, 8 Jun 2017 23:33:48 -0700 Subject: [PATCH] Backed out changeset 830842118f8a (bug 1356474) for failing most of its browser_grids_grid-outline-* tests MozReview-Commit-ID: FWWM0ftcJHZ --- .../client/inspector/grids/components/Grid.js | 15 ++-- .../inspector/grids/components/GridOutline.js | 5 +- .../client/inspector/grids/test/browser.ini | 4 - ..._grids_grid-outline-cannot-show-outline.js | 52 ------------- ...owser_grids_grid-outline-highlight-area.js | 77 ------------------- ...owser_grids_grid-outline-highlight-cell.js | 65 ---------------- ...rowser_grids_grid-outline-selected-grid.js | 61 --------------- devtools/client/inspector/layout/layout.js | 8 ++ devtools/client/preferences/devtools.js | 1 + devtools/client/themes/layout.css | 4 +- 10 files changed, 22 insertions(+), 270 deletions(-) delete mode 100644 devtools/client/inspector/grids/test/browser_grids_grid-outline-cannot-show-outline.js delete mode 100644 devtools/client/inspector/grids/test/browser_grids_grid-outline-highlight-area.js delete mode 100644 devtools/client/inspector/grids/test/browser_grids_grid-outline-highlight-cell.js delete mode 100644 devtools/client/inspector/grids/test/browser_grids_grid-outline-selected-grid.js diff --git a/devtools/client/inspector/grids/components/Grid.js b/devtools/client/inspector/grids/components/Grid.js index 62ece117acee..add0840aaf6e 100644 --- a/devtools/client/inspector/grids/components/Grid.js +++ b/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({ - grids, - onShowGridAreaHighlight, - onShowGridCellHighlight, - }) + showGridOutline ? + GridOutline({ + grids, + onShowGridAreaHighlight, + onShowGridCellHighlight, + }) + : + null ) : dom.div( diff --git a/devtools/client/inspector/grids/components/GridOutline.js b/devtools/client/inspector/grids/components/GridOutline.js index a3f47f4270b1..ddcfa7fbd6a1 100644 --- a/devtools/client/inspector/grids/components/GridOutline.js +++ b/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-container", + className: "grid-outline", }, this.renderOutline() ) diff --git a/devtools/client/inspector/grids/test/browser.ini b/devtools/client/inspector/grids/test/browser.ini index f3aad88eb655..054740f55b2e 100644 --- a/devtools/client/inspector/grids/test/browser.ini +++ b/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] 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 deleted file mode 100644 index 5606bff99bf8..000000000000 --- a/devtools/client/inspector/grids/test/browser_grids_grid-outline-cannot-show-outline.js +++ /dev/null @@ -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 = ` - -
-
cell A
-
cell B
-
-`; - -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."); -}); 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 deleted file mode 100644 index ff4047f4a662..000000000000 --- a/devtools/client/inspector/grids/test/browser_grids_grid-outline-highlight-area.js +++ /dev/null @@ -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 = ` - -
-
Cell A
-
Cell B
-
-`; - -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; -}); 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 deleted file mode 100644 index abb4dffda7f7..000000000000 --- a/devtools/client/inspector/grids/test/browser_grids_grid-outline-highlight-cell.js +++ /dev/null @@ -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 = ` - -
-
Cell A
-
Cell B
-
-`; - -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; -}); 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 deleted file mode 100644 index 239817b176d3..000000000000 --- a/devtools/client/inspector/grids/test/browser_grids_grid-outline-selected-grid.js +++ /dev/null @@ -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 = ` - -
-
Cell A
-
Cell B
-
Cell C
-
-`; - -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."); -}); diff --git a/devtools/client/inspector/layout/layout.js b/devtools/client/inspector/layout/layout.js index 14da81aed386..e8a2c13198e8 100644 --- a/devtools/client/inspector/layout/layout.js +++ b/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, diff --git a/devtools/client/preferences/devtools.js b/devtools/client/preferences/devtools.js index 377d99e4a1be..a85d2a63b00b 100644 --- a/devtools/client/preferences/devtools.js +++ b/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 diff --git a/devtools/client/themes/layout.css b/devtools/client/themes/layout.css index 8156cdd5789a..a0c0fe719cf5 100644 --- a/devtools/client/themes/layout.css +++ b/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; }