Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-24 10:45:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Backed out changeset ad742747a8d0 (bug 1321238) for (at least) eslint failures

Browse Source 
MozReview-Commit-ID: Em8hWRGDB3Y
This commit is contained in:
Phil Ringnalda 2017-05-29 11:45:33 -07:00
parent 632ef747e7
commit 40aaa48351
22 changed files with 27 additions and 772 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
devtools/client/inspector/boxmodel/box-model.js
View File

@ -127,19 +127,16 @@ BoxModel.prototype = {
}
let lastRequest = Task.spawn((function* () {
if (!this.inspector ||
!this.isPanelVisible() ||
!this.inspector.selection.isConnected() ||
!this.inspector.selection.isElementNode()) {
if (!(this.isPanelVisible() &&
this.inspector.selection.isConnected() &&
this.inspector.selection.isElementNode())) {
return null;
}
let node = this.inspector.selection.nodeFront;
let layout = yield this.inspector.pageStyle.getLayout(node, {
autoMargins: true,
});
let styleEntries = yield this.inspector.pageStyle.getApplied(node, {
// We don't need styles applied to pseudo elements of the current node.
skipPseudo: true
@ -149,13 +146,12 @@ BoxModel.prototype = {
// Update the layout properties with whether or not the element's position is
// editable with the geometry editor.
let isPositionEditable = yield this.inspector.pageStyle.isPositionEditable(node);
layout = Object.assign({}, layout, {
isPositionEditable,
});
const actorCanGetOffSetParent =
yield this.inspector.target.actorHasMethod("domwalker", "getOffsetParent");
const actorCanGetOffSetParent
= yield this.inspector.target.actorHasMethod("domwalker", "getOffsetParent");
if (actorCanGetOffSetParent) {
// Update the redux store with the latest offset parent DOM node

2
devtools/client/inspector/grids/components/GridDisplaySettings.js
View File

@ -63,7 +63,6 @@ module.exports = createClass({
{},
dom.input(
{
id: "grid-setting-extend-grid-lines",
type: "checkbox",
checked: highlighterSettings.showInfiniteLines,
onChange: this.onShowInfiniteLinesCheckboxClick,
@ -80,7 +79,6 @@ module.exports = createClass({
{},
dom.input(
{
id: "grid-setting-show-grid-line-numbers",
type: "checkbox",
checked: highlighterSettings.showGridLineNumbers,
onChange: this.onShowGridLineNumbersCheckboxClick,

4
devtools/client/inspector/grids/components/GridList.js
View File

@ -48,9 +48,7 @@ module.exports = createClass({
getStr("layout.overlayGrid")
),
dom.ul(
{
id: "grid-list",
},
{},
grids.map(grid => GridItem({
key: grid.id,
getSwatchColorPickerTooltip,

20
devtools/client/inspector/grids/grid-inspector.js
View File

@ -253,27 +253,13 @@ GridInspector.prototype = {
// Get all the GridFront from the server if no gridFronts were provided.
if (!gridFronts) {
try {
gridFronts = yield this.layoutInspector.getAllGrids(this.walker.rootNode);
} catch(e) {
// This call might fail if called asynchrously after the toolbox is finished
// closing.
return;
}
gridFronts = yield this.layoutInspector.getAllGrids(this.walker.rootNode);
}
let grids = [];
for (let i = 0; i < gridFronts.length; i++) {
let grid = gridFronts[i];
let nodeFront;
try {
nodeFront = yield this.walker.getNodeFromActor(grid.actorID, ["containerEl"]);
} catch (e) {
// This call might fail if called asynchrously after the toolbox is finished
// closing.
return;
}
let nodeFront = yield this.walker.getNodeFromActor(grid.actorID, ["containerEl"]);
let fallbackColor = GRID_COLORS[i % GRID_COLORS.length];
let color = this.getInitialGridColor(nodeFront, fallbackColor);
@ -314,7 +300,7 @@ GridInspector.prototype = {
* @param {Object} options
* The highlighter options used for the highlighter being shown/hidden.
*/
onHighlighterChange(event, nodeFront, options = {}) {
onHighlighterChange(event, nodeFront, options) {
let highlighted = event === "grid-highlighter-shown";
let { color } = options;

2
devtools/client/inspector/grids/moz.build
View File

@ -15,5 +15,3 @@ DevToolsModules(
'grid-inspector.js',
'types.js',
)
BROWSER_CHROME_MANIFESTS += ['test/browser.ini']

2
devtools/client/inspector/grids/reducers/grids.js
View File

@ -17,7 +17,7 @@ let reducers = {
[UPDATE_GRID_COLOR](grids, { nodeFront, color }) {
let newGrids = grids.map(g => {
if (g.nodeFront == nodeFront) {
g = Object.assign({}, g, { color });
g.color = color;
}
return g;

6
devtools/client/inspector/grids/test/.eslintrc.js
View File

@ -1,6 +0,0 @@
"use strict";
module.exports = {
// Extend from the shared list of defined globals for mochitests.
"extends": "../../../../.eslintrc.mochitests.js"
};

23
devtools/client/inspector/grids/test/browser.ini
View File

@ -1,23 +0,0 @@
[DEFAULT]
tags = devtools
subsuite = devtools
support-files =
head.js
!/devtools/client/commandline/test/helpers.js
!/devtools/client/framework/test/shared-head.js
!/devtools/client/inspector/test/head.js
!/devtools/client/inspector/test/shared-head.js
!/devtools/client/shared/test/test-actor.js
!/devtools/client/shared/test/test-actor-registry.js
!/devtools/client/framework/test/shared-redux-head.js
[browser_grids_display-setting-extend-grid-lines.js]
[browser_grids_display-setting-show-grid-line-numbers.js]
[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]

51
devtools/client/inspector/grids/test/browser_grids_display-setting-extend-grid-lines.js
View File

@ -1,51 +0,0 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that the 'Extend grid lines infinitely' grid highlighter setting will update
// the redux store and pref setting.
const TEST_URI = `
<style type='text/css'>
#grid {
display: grid;
}
</style>
<div id="grid">
<div id="cell1">cell1</div>
<div id="cell2">cell2</div>
</div>
`;
const SHOW_INFINITE_LINES_PREF = "devtools.gridinspector.showInfiniteLines";
add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let { inspector, gridInspector } = yield openLayoutView();
let { document: doc } = gridInspector;
let { store } = inspector;
yield selectNode("#grid", inspector);
let checkbox = doc.getElementById("grid-setting-extend-grid-lines");
ok(!Services.prefs.getBoolPref(SHOW_INFINITE_LINES_PREF),
"'Extend grid lines infinitely' is pref off by default.");
info("Toggling ON the 'Extend grid lines infinitely' setting.");
let onCheckboxChange = waitUntilState(store, state =>
state.highlighterSettings.showInfiniteLines);
checkbox.click();
yield onCheckboxChange;
info("Toggling OFF the 'Extend grid lines infinitely' setting.");
onCheckboxChange = waitUntilState(store, state =>
!state.highlighterSettings.showInfiniteLines);
checkbox.click();
yield onCheckboxChange;
ok(!Services.prefs.getBoolPref(SHOW_INFINITE_LINES_PREF),
"'Extend grid lines infinitely' is pref off.");
Services.prefs.clearUserPref(SHOW_INFINITE_LINES_PREF);
});

55
devtools/client/inspector/grids/test/browser_grids_display-setting-show-grid-line-numbers.js
View File

@ -1,55 +0,0 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that the 'Display numbers on lines' grid highlighter setting will update
// the redux store and pref setting.
const TEST_URI = `
<style type='text/css'>
#grid {
display: grid;
}
</style>
<div id="grid">
<div id="cell1">cell1</div>
<div id="cell2">cell2</div>
</div>
`;
const SHOW_GRID_LINE_NUMBERS = "devtools.gridinspector.showGridLineNumbers";
add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let { inspector, gridInspector } = yield openLayoutView();
let { document: doc } = gridInspector;
let { store } = inspector;
yield selectNode("#grid", inspector);
let checkbox = doc.getElementById("grid-setting-show-grid-line-numbers");
info("Checking the initial state of the CSS grid highlighter setting.");
ok(!Services.prefs.getBoolPref(SHOW_GRID_LINE_NUMBERS),
"'Display numbers on lines' is pref off by default.");
info("Toggling ON the 'Display numbers on lines' setting.");
let onCheckboxChange = waitUntilState(store, state =>
state.highlighterSettings.showGridLineNumbers);
checkbox.click();
yield onCheckboxChange;
ok(Services.prefs.getBoolPref(SHOW_GRID_LINE_NUMBERS),
"'Display numbers on lines' is pref on.");
info("Toggling OFF the 'Display numbers on lines' setting.");
onCheckboxChange = waitUntilState(store, state =>
!state.highlighterSettings.showGridLineNumbers);
checkbox.click();
yield onCheckboxChange;
ok(!Services.prefs.getBoolPref(SHOW_GRID_LINE_NUMBERS),
"'Display numbers on lines' is pref off.");
Services.prefs.clearUserPref(SHOW_GRID_LINE_NUMBERS);
});

58
devtools/client/inspector/grids/test/browser_grids_grid-list-color-picker-on-ESC.js
View File

@ -1,58 +0,0 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that the grid item's color change in the colorpicker is reverted when ESCAPE is
// pressed.
const TEST_URI = `
<style type='text/css'>
#grid {
display: grid;
}
</style>
<div id="grid">
<div id="cell1">cell1</div>
<div id="cell2">cell2</div>
</div>
`;
add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let { inspector, gridInspector, toolbox } = yield openLayoutView();
let { document: doc } = gridInspector;
let { store } = inspector;
let cPicker = gridInspector.getSwatchColorPickerTooltip();
let spectrum = cPicker.spectrum;
let swatch = doc.querySelector(".grid-color-swatch");
info("Checking the initial state of the Grid Inspector.");
is(swatch.style.backgroundColor, "rgb(75, 0, 130)",
"The color swatch's background is correct.");
is(store.getState().grids[0].color, "#4B0082", "The grid color state is correct.");
info("Scrolling into view of the #grid color swatch.");
swatch.scrollIntoView();
info("Opening the color picker by clicking on the #grid color swatch.");
let onColorPickerReady = cPicker.once("ready");
swatch.click();
yield onColorPickerReady;
yield simulateColorPickerChange(cPicker, [0, 255, 0, .5]);
is(swatch.style.backgroundColor, "rgba(0, 255, 0, 0.5)",
"The color swatch's background was updated.");
info("Pressing ESCAPE to close the tooltip.");
let onGridColorUpdate = waitUntilState(store, state =>
state.grids[0].color === "#4B0082");
let onColorPickerHidden = cPicker.tooltip.once("hidden");
focusAndSendKey(spectrum.element.ownerDocument.defaultView, "ESCAPE");
yield onColorPickerHidden;
yield onGridColorUpdate;
is(swatch.style.backgroundColor, "rgb(75, 0, 130)",
"The color swatch's background was reverted after ESCAPE.");
});

58
devtools/client/inspector/grids/test/browser_grids_grid-list-color-picker-on-RETURN.js
View File

@ -1,58 +0,0 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that the grid item's color change in the colorpicker is committed when RETURN is
// pressed.
const TEST_URI = `
<style type='text/css'>
#grid {
display: grid;
}
</style>
<div id="grid">
<div id="cell1">cell1</div>
<div id="cell2">cell2</div>
</div>
`;
add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let { inspector, gridInspector, toolbox } = yield openLayoutView();
let { document: doc } = gridInspector;
let { store } = inspector;
let cPicker = gridInspector.getSwatchColorPickerTooltip();
let spectrum = cPicker.spectrum;
let swatch = doc.querySelector(".grid-color-swatch");
info("Checking the initial state of the Grid Inspector.");
is(swatch.style.backgroundColor, "rgb(75, 0, 130)",
"The color swatch's background is correct.");
is(store.getState().grids[0].color, "#4B0082", "The grid color state is correct.");
info("Scrolling into view of the #grid color swatch.");
swatch.scrollIntoView();
info("Opening the color picker by clicking on the #grid color swatch.");
let onColorPickerReady = cPicker.once("ready");
swatch.click();
yield onColorPickerReady;
yield simulateColorPickerChange(cPicker, [0, 255, 0, .5]);
is(swatch.style.backgroundColor, "rgba(0, 255, 0, 0.5)",
"The color swatch's background was updated.");
info("Pressing RETURN to commit the color change.");
let onGridColorUpdate = waitUntilState(store, state =>
state.grids[0].color === "#00FF0080");
let onColorPickerHidden = cPicker.tooltip.once("hidden");
focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
yield onColorPickerHidden;
yield onGridColorUpdate;
is(swatch.style.backgroundColor, "rgba(0, 255, 0, 0.5)",
"The color swatch's background was kept after RETURN.");
});

49
devtools/client/inspector/grids/test/browser_grids_grid-list-element-rep.js
View File

@ -1,49 +0,0 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that the grid item's element rep will display the box model higlighter on hover
// and select the node on click.
const TEST_URI = `
<style type='text/css'>
#grid {
display: grid;
}
</style>
<div id="grid">
<div id="cell1">cell1</div>
<div id="cell2">cell2</div>
</div>
`;
add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let { inspector, gridInspector, toolbox } = yield openLayoutView();
let { document: doc } = gridInspector;
let { store } = inspector;
let gridList = doc.querySelector("#grid-list");
let elementRep = gridList.children[0].querySelector(".open-inspector");
info("Scrolling into the view the #grid element node rep.");
elementRep.scrollIntoView();
info("Listen to node-highlight event and mouse over the widget");
let onHighlight = toolbox.once("node-highlight");
EventUtils.synthesizeMouse(elementRep, 10, 5, {type: "mouseover"}, doc.defaultView);
let nodeFront = yield onHighlight;
ok(nodeFront, "nodeFront was returned from highlighting the node.");
is(nodeFront.tagName, "DIV", "The highlighted node has the correct tagName.");
is(nodeFront.attributes[0].name, "id",
"The highlighted node has the correct attributes.");
is(nodeFront.attributes[0].value, "grid", "The highlighted node has the correct id.");
let onSelection = inspector.selection.once("new-node-front");
EventUtils.sendMouseEvent({type: "click"}, elementRep, doc.defaultView);
yield onSelection;
is(inspector.selection.nodeFront, store.getState().grids[0].nodeFront,
"The selected node is the one stored on the grid item's state.")
});

34
devtools/client/inspector/grids/test/browser_grids_grid-list-no-grids.js
View File

@ -1,34 +0,0 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that no grid list items and a "no grids available" message is displayed when
// there are no grid containers on the page.
const TEST_URI = `
<style type='text/css'>
</style>
<div id="grid">
<div id="cell1">cell1</div>
<div id="cell2">cell2</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 } = inspector;
yield selectNode("#grid", inspector);
let noGridList = doc.querySelector(".layout-no-grids");
let gridList = doc.querySelector("#grid-list");
info("Checking the initial state of the Grid Inspector.");
ok(noGridList, "The message no grid containers is displayed.");
ok(!gridList, "No grid containers are listed.");
ok(!highlighters.highlighters[HIGHLIGHTER_TYPE],
"No CSS grid highlighter exists in the highlighters overlay.");
ok(!highlighters.gridHighlighterShown, "No CSS grid highlighter is shown.");
});

93
devtools/client/inspector/grids/test/browser_grids_grid-list-on-mutation-element-added.js
View File

@ -1,93 +0,0 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that the grid list updates when a new grid container is added to the page.
const TEST_URI = `
<style type='text/css'>
.grid {
display: grid;
}
</style>
<div id="grid1" class="grid">
<div class="cell1">cell1</div>
<div class="cell2">cell2</div>
</div>
<div id="grid2">
<div class="cell1">cell1</div>
<div class="cell2">cell2</div>
</div>
`;
add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let { inspector, gridInspector, testActor } = yield openLayoutView();
let { document: doc } = gridInspector;
let { highlighters, store } = inspector;
yield selectNode("#grid", inspector);
let gridList = doc.querySelector("#grid-list");
let checkbox1 = gridList.children[0].querySelector("input");
info("Checking the initial state of the Grid Inspector.");
is(gridList.childNodes.length, 1, "One grid container is listed.");
ok(!highlighters.highlighters[HIGHLIGHTER_TYPE],
"No CSS grid highlighter exists in the highlighters overlay.");
ok(!highlighters.gridHighlighterShown, "No CSS grid highlighter is shown.");
info("Toggling ON the CSS grid highlighter from the layout panel.");
let onHighlighterShown = highlighters.once("grid-highlighter-shown");
checkbox1.click();
yield onHighlighterShown;
info("Checking the CSS grid highlighter is created.");
ok(highlighters.highlighters[HIGHLIGHTER_TYPE],
"CSS grid highlighter is created in the highlighters overlay.");
ok(highlighters.gridHighlighterShown, "CSS grid highlighter is shown.");
info("Adding the #grid2 container in the content page.");
let onGridListUpdate = waitUntilState(store, state =>
state.grids.length == 2 &&
state.grids[0].highlighted &&
!state.grids[1].highlighted);
testActor.eval(`
content.document.getElementById("grid2").classList.add("grid");
`);
yield onGridListUpdate;
info("Checking the new Grid Inspector state.");
is(gridList.childNodes.length, 2, "Two grid containers are listed.");
ok(highlighters.highlighters[HIGHLIGHTER_TYPE],
"CSS grid highlighter is created in the highlighters overlay.");
ok(highlighters.gridHighlighterShown, "CSS grid highlighter is shown.");
let checkbox2 = gridList.children[1].querySelector("input");
info("Toggling ON the CSS grid highlighter for #grid2.")
onHighlighterShown = highlighters.once("grid-highlighter-shown");
let onCheckboxChange = waitUntilState(store, state =>
state.grids.length == 2 &&
!state.grids[0].highlighted &&
state.grids[1].highlighted);
checkbox2.click();
yield onHighlighterShown;
yield onCheckboxChange;
info("Checking the CSS grid highlighter is still shown.");
ok(highlighters.gridHighlighterShown, "CSS grid highlighter 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 == 2 &&
!state.grids[0].highlighted &&
!state.grids[1].highlighted);
checkbox2.click();
yield onHighlighterHidden;
yield onCheckboxChange;
info("Checking the CSS grid highlighter is not shown.");
ok(!highlighters.gridHighlighterShown, "No CSS grid highlighter is shown.");
});

63
devtools/client/inspector/grids/test/browser_grids_grid-list-on-mutation-element-removed.js
View File

@ -1,63 +0,0 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that the grid item is removed from the grid list when the grid container is
// removed from the page.
const TEST_URI = `
<style type='text/css'>
#grid {
display: grid;
}
</style>
<div id="grid">
<div id="cell1">cell1</div>
<div id="cell2">cell2</div>
</div>
`;
add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let { inspector, gridInspector, testActor } = 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("Checking the initial state of the Grid Inspector.");
is(gridList.childNodes.length, 1, "One grid container is listed.");
ok(!highlighters.highlighters[HIGHLIGHTER_TYPE],
"No CSS grid highlighter exists in the highlighters overlay.");
ok(!highlighters.gridHighlighterShown, "No CSS grid highlighter is 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;
info("Checking the CSS grid highlighter is created.");
ok(highlighters.highlighters[HIGHLIGHTER_TYPE],
"CSS grid highlighter is created in the highlighters overlay.");
ok(highlighters.gridHighlighterShown, "CSS grid highlighter is shown.");
info("Removing the #grid container in the content page.");
let onHighlighterHidden = highlighters.once("grid-highlighter-hidden");
onCheckboxChange = waitUntilState(store, state => state.grids.length == 0);
testActor.eval(`
content.document.getElementById("grid").remove();
`);
yield onHighlighterHidden;
yield onCheckboxChange;
info("Checking the CSS grid highlighter is not shown.");
ok(!highlighters.gridHighlighterShown, "No CSS grid highlighter is shown.");
let noGridList = doc.querySelector(".layout-no-grids");
ok(noGridList, "The message no grid containers is displayed.");
});

84
devtools/client/inspector/grids/test/browser_grids_grid-list-toggle-multiple-grids.js
View File

@ -1,84 +0,0 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test toggling the grid highlighter in the grid inspector panel with multiple grids in
// the page.
const TEST_URI = `
<style type='text/css'>
.grid {
display: grid;
}
</style>
<div id="grid1" class="grid">
<div class="cell1">cell1</div>
<div class="cell2">cell2</div>
</div>
<div id="grid2" class="grid">
<div class="cell1">cell1</div>
<div class="cell2">cell2</div>
</div>
`;
add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let { inspector, gridInspector, testActor } = yield openLayoutView();
let { document: doc } = gridInspector;
let { highlighters, store } = inspector;
yield selectNode("#grid1", inspector);
let gridList = doc.querySelector("#grid-list");
let checkbox1 = gridList.children[0].querySelector("input");
let checkbox2 = gridList.children[1].querySelector("input");
info("Checking the initial state of the Grid Inspector.");
is(gridList.childNodes.length, 2, "2 grid containers are listed.");
ok(!checkbox1.checked, `Grid item ${checkbox1.value} is unchecked in the grid list.`);
ok(!checkbox2.checked, `Grid item ${checkbox2.value} is unchecked in the grid list.`);
ok(!highlighters.highlighters[HIGHLIGHTER_TYPE],
"No CSS grid highlighter exists in the highlighters overlay.");
ok(!highlighters.gridHighlighterShown, "No CSS grid highlighter is shown.");
info("Toggling ON the CSS grid highlighter for #grid1.");
let onHighlighterShown = highlighters.once("grid-highlighter-shown");
let onCheckboxChange = waitUntilState(store, state =>
state.grids.length == 2 &&
state.grids[0].highlighted &&
!state.grids[1].highlighted);
checkbox1.click();
yield onHighlighterShown;
yield onCheckboxChange;
info("Checking the CSS grid highlighter is created.");
ok(highlighters.highlighters[HIGHLIGHTER_TYPE],
"CSS grid highlighter is created in the highlighters overlay.");
ok(highlighters.gridHighlighterShown, "CSS grid highlighter is shown.");
info("Toggling ON the CSS grid highlighter for #grid2.")
onHighlighterShown = highlighters.once("grid-highlighter-shown");
onCheckboxChange = waitUntilState(store, state =>
state.grids.length == 2 &&
!state.grids[0].highlighted &&
state.grids[1].highlighted);
checkbox2.click();
yield onHighlighterShown;
yield onCheckboxChange;
info("Checking the CSS grid highlighter is still shown.");
ok(highlighters.gridHighlighterShown, "CSS grid highlighter 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 == 2 &&
!state.grids[0].highlighted &&
!state.grids[1].highlighted);
checkbox2.click();
yield onHighlighterHidden;
yield onCheckboxChange;
info("Checking the CSS grid highlighter is not shown.");
ok(!highlighters.gridHighlighterShown, "No CSS grid highlighter is shown.");
});

62
devtools/client/inspector/grids/test/browser_grids_grid-list-toggle-single-grid.js
View File

@ -1,62 +0,0 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests toggling ON/OFF the grid highlighter from the grid ispector panel.
const TEST_URI = `
<style type='text/css'>
#grid {
display: grid;
}
</style>
<div id="grid">
<div id="cell1">cell1</div>
<div id="cell2">cell2</div>
</div>
`;
add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let { gridInspector, inspector } = 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("Checking the initial state of the Grid Inspector.");
is(gridList.childNodes.length, 1, "One grid container is listed.");
ok(!checkbox.checked, `Grid item ${checkbox.value} is unchecked in the grid list.`);
ok(!highlighters.highlighters[HIGHLIGHTER_TYPE],
"No CSS grid highlighter exists in the highlighters overlay.");
ok(!highlighters.gridHighlighterShown, "No CSS grid highlighter is 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;
info("Checking the CSS grid highlighter is created.");
ok(highlighters.highlighters[HIGHLIGHTER_TYPE],
"CSS grid highlighter is created in the highlighters overlay.");
ok(highlighters.gridHighlighterShown, "CSS grid highlighter 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;
info("Checking the CSS grid highlighter is not shown.");
ok(!highlighters.gridHighlighterShown, "No CSS grid highlighter is shown.");
});

74
devtools/client/inspector/grids/test/head.js
View File

@ -1,74 +0,0 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
/* eslint no-unused-vars: [2, {"vars": "local"}] */
/* import-globals-from ../../../framework/test/shared-head.js */
/* import-globals-from ../../test/head.js */
"use strict";
// Import the inspector's head.js first (which itself imports shared-head.js).
Services.scriptloader.loadSubScript(
"chrome://mochitests/content/browser/devtools/client/inspector/test/head.js",
this);
// Load the shared Redux helpers into this compartment.
Services.scriptloader.loadSubScript(
"chrome://mochitests/content/browser/devtools/client/framework/test/shared-redux-head.js",
this);
Services.prefs.setBoolPref("devtools.layoutview.enabled", true);
Services.prefs.setIntPref("devtools.toolbox.footer.height", 350);
registerCleanupFunction(() => {
Services.prefs.clearUserPref("devtools.layoutview.enabled");
Services.prefs.clearUserPref("devtools.toolbox.footer.height");
});
const HIGHLIGHTER_TYPE = "CssGridHighlighter";
/**
* Open the toolbox, with the inspector tool visible, and the layout view
* sidebar tab selected to display the box model view with properties.
*
* @return {Promise} a promise that resolves when the inspector is ready and the box model
* view is visible and ready.
*/
function openLayoutView() {
return openInspectorSidebarTab("layoutview").then(data => {
// The actual highligher show/hide methods are mocked in box model tests.
// The highlighter is tested in devtools/inspector/test.
function mockHighlighter({highlighter}) {
highlighter.showBoxModel = function () {
return promise.resolve();
};
highlighter.hideBoxModel = function () {
return promise.resolve();
};
}
mockHighlighter(data.toolbox);
return {
toolbox: data.toolbox,
inspector: data.inspector,
gridInspector: data.inspector.gridInspector,
testActor: data.testActor
};
});
}
/**
* Simulate a color change in a given color picker tooltip.
*
* @param {Spectrum|ColorWidget} colorPicker
* The color picker widget.
* @param {Array} newRgba
* Array of the new rgba values to be set in the color widget.
*/
var simulateColorPickerChange = Task.async(function* (colorPicker, newRgba) {
info("Getting the spectrum colorpicker object");
let spectrum = yield colorPicker.spectrum;
info("Setting the new color");
spectrum.rgb = newRgba;
info("Applying the change");
spectrum.updateUI();
spectrum.onChange();
});

10
devtools/client/inspector/rules/test/head.js
View File

@ -497,6 +497,16 @@ function* clickSelectorIcon(icon, view) {
yield onToggled;
}
/**
* Make sure window is properly focused before sending a key event.
* @param {Window} win
* @param {Event} key
*/
function focusAndSendKey(win, key) {
win.document.documentElement.focus();
EventUtils.sendKey(key, win);
}
/**
* Toggle one of the checkboxes inside the class-panel. Resolved after the DOM mutation
* has been recorded.

22
devtools/client/inspector/shared/highlighters-overlay.js
View File

@ -267,26 +267,18 @@ HighlightersOverlay.prototype = {
* The highlighter type. One of this.highlighters.
* @return {Promise} that resolves to the highlighter
*/
_getHighlighter: Task.async(function* (type) {
_getHighlighter: function (type) {
let utils = this.highlighterUtils;
if (this.highlighters[type]) {
return this.highlighters[type];
return promise.resolve(this.highlighters[type]);
}
let highlighter;
try {
highlighter = yield utils.getHighlighterByType(type);
} catch (e) {}
if (!highlighter) {
return;
}
this.highlighters[type] = highlighter;
return highlighter;
}),
return utils.getHighlighterByType(type).then(highlighter => {
this.highlighters[type] = highlighter;
return highlighter;
});
},
_handleRejection: function (error) {
if (!this.destroyed) {

13
devtools/client/inspector/test/head.js
View File

@ -643,19 +643,6 @@ function synthesizeKeys(input, win) {
}
}
/**
* Make sure window is properly focused before sending a key event.
*
* @param {Window} win
* The window containing the panel
* @param {String} key
* The string value to input
*/
function focusAndSendKey(win, key) {
win.document.documentElement.focus();
EventUtils.sendKey(key, win);
}
/**
* Given a Tooltip instance, fake a mouse event on the `target` DOM Element
* and assert that the `tooltip` is correctly displayed.