Bug 1356474 - Add units tests for the Grid Outline component. r?gl
MozReview-Commit-ID: 85ZjxjkpIgU
--- 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-areas.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-areas.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-container");
+ 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;