1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"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);
}
|
