mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-12 04:45:45 +00:00
Bug 1356474 - Add units tests for the Grid Outline component. r=gl
MozReview-Commit-ID: 85ZjxjkpIgU
This commit is contained in:
parent
8f1db3dfce
commit
c4243d211b
@ -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(
|
||||
|
@ -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()
|
||||
)
|
||||
|
@ -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();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
|
@ -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]
|
||||
|
@ -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.");
|
||||
|
@ -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.");
|
||||
|
@ -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.");
|
||||
|
@ -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");
|
||||
|
||||
|
@ -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.");
|
||||
|
@ -0,0 +1,54 @@
|
||||
/* 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 onGridOutlineRendered = waitForDOM(doc, ".grid-outline-text", 1);
|
||||
let onCheckboxChange = waitUntilState(store, state =>
|
||||
state.grids.length == 1 &&
|
||||
state.grids[0].highlighted);
|
||||
checkbox.click();
|
||||
yield onHighlighterShown;
|
||||
yield onCheckboxChange;
|
||||
let elements = yield onGridOutlineRendered;
|
||||
|
||||
let cannotShowGridOutline = elements[0];
|
||||
|
||||
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.");
|
||||
});
|
@ -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;
|
||||
});
|
@ -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;
|
||||
});
|
@ -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;
|
||||
|
||||
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);
|
||||
let onGridOutlineHidden = waitForDOM(doc, "#grid-outline-container", 0);
|
||||
checkbox.click();
|
||||
yield onHighlighterHidden;
|
||||
yield onCheckboxChange;
|
||||
elements = yield onGridOutlineHidden;
|
||||
|
||||
ok(!elements.length, "Grid outline is hidden.");
|
||||
});
|
@ -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");
|
||||
});
|
||||
|
||||
|
@ -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,
|
||||
|
@ -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
|
||||
|
@ -127,11 +127,11 @@
|
||||
* Grid Outline
|
||||
*/
|
||||
|
||||
.grid-outline {
|
||||
.grid-outline-container {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.grid-outline svg {
|
||||
.grid-outline-container svg {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user