Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"use strict";
// Test that the rule view refreshes when a stylesheet is added or modified
const TEST_URI = "<h1>Hello DevTools</h1>";
add_task(async function () {
// Disable transition so changes made in styleeditor are instantly applied
await pushPref("devtools.styleeditor.transitions", false);
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const { inspector, view } = await openRuleView();
await selectNode("h1", inspector);
info("Add a stylesheet with matching rule for the h1 node");
let onUpdated = inspector.once("rule-view-refreshed");
await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
const addedStylesheet = content.document.createElement("style");
addedStylesheet.textContent = "h1 { background: tomato }";
content.document.head.append(addedStylesheet);
});
await onUpdated;
ok(true, "Rules view was refreshed when adding a stylesheet");
checkRulesViewSelectors(view, ["element", "h1"]);
is(
getRuleViewPropertyValue(view, "h1", "background"),
"tomato",
"Expected value is displayed for the background property"
);
info("Modify the stylesheet added previously");
onUpdated = inspector.once("rule-view-refreshed");
await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
const addedStylesheet = content.document.querySelector("style");
addedStylesheet.textContent = "body h1 { background: gold; color: navy; }";
});
await onUpdated;
ok(true, "Rules view was refreshed when updating the stylesheet");
checkRulesViewSelectors(view, ["element", "body h1"]);
is(
getRuleViewPropertyValue(view, "body h1", "background"),
"gold",
"Expected value is displayed for the background property"
);
is(
getRuleViewPropertyValue(view, "body h1", "color"),
"navy",
"Expected value is displayed for the color property"
);
info("Add Stylesheet from StyleEditor");
const styleEditor = await inspector.toolbox.selectTool("styleeditor");
const onEditorAdded = styleEditor.UI.once("editor-added");
// create a new style sheet
styleEditor.panelWindow.document
.querySelector(".style-editor-newButton")
.click();
const editor = await onEditorAdded;
await editor.getSourceEditor();
if (!editor.sourceEditor.hasFocus()) {
info("Waiting for stylesheet editor to gain focus");
await editor.sourceEditor.once("focus");
}
ok(editor.sourceEditor.hasFocus(), "new editor has focus");
const stylesheetText = `:is(h1) { font-size: 36px; }`;
await new Promise(resolve => {
waitForFocus(function () {
for (const c of stylesheetText) {
EventUtils.synthesizeKey(c, {}, styleEditor.panelWindow);
}
resolve();
}, styleEditor.panelWindow);
});
info("Select inspector again");
await inspector.toolbox.selectTool("inspector");
await waitFor(() => getRuleSelectors(view).includes(":is(h1)"));
ok(true, "Rules view was refreshed when selecting the inspector");
checkRulesViewSelectors(view, ["element", "body h1", ":is(h1)"]);
is(
getRuleViewPropertyValue(view, ":is(h1)", "font-size"),
"36px",
"Expected value is displayed for the font-size property"
);
});
function checkRulesViewSelectors(view, expectedSelectors) {
Assert.deepEqual(
getRuleSelectors(view),
expectedSelectors,
"Expected selectors are displayed"
);
}
function getRuleSelectors(view) {
return Array.from(
view.styleDocument.querySelectorAll(".ruleview-selectors-container")
).map(el => el.textContent);
}