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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
/* Any copyright is dedicated to the Public Domain.
* http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Create a simple page for the iframe
const httpServer = createTestHTTPServer();
httpServer.registerPathHandler(`/`, function (request, response) {
response.setStatusLine(request.httpVersion, 200, "OK");
response.write(`
<html>
<head>
<meta charset="utf-8">
<style>
.subframe {
color: blouge;
}
</style>
</head>
<body class="subframe">
<h1 class="subframe">Hello</h1>
<p class="subframe">sub-frame</p>
</body>
</html>`);
});
const TEST_URI = `data:text/html,<!DOCTYPE html><meta charset=utf8>
<style>
main {
& button {
cursor: unknownCursor;
}
}
</style>
<main>
<button id=1>Button 1</button>
<button id=2>Button 2</button>
</main>
<button id=out>Button 3</button>
<iframe src="http://localhost:${httpServer.identity.primaryPort}/"></iframe>
`;
add_task(async function () {
// Enable CSS Warnings
await pushPref("devtools.webconsole.filter.css", true);
const hud = await openNewTabAndConsole(TEST_URI);
const toolbox = hud.toolbox;
// Load the inspector panel to make it possible to listen for new node selections
await toolbox.loadTool("inspector");
const inspector = toolbox.getPanel("inspector");
info("Check the CSS warning message for the top level document");
let messageNode = await waitFor(() =>
findWarningMessage(hud, "Error in parsing value for ‘cursor’", ".css")
);
info("Click on the expand arrow");
messageNode.querySelector(".arrow").click();
const impactedElementsLabel = await waitFor(() =>
messageNode.querySelector(".elements-label")
);
is(
impactedElementsLabel.innerText,
"Elements matching selector: :is(main) button",
"The message was expanded and shows the expected selector"
);
const objectInspector = messageNode.querySelector(".object-inspector");
ok(
objectInspector.textContent.includes("NodeList [ button#1, button#2 ]"),
`The message shows the impacted elements (got "${objectInspector.textContent}")`
);
let node = objectInspector.querySelector(".objectBox-node");
let openInInspectorIcon = node.querySelector(".open-inspector");
Assert.notStrictEqual(
openInInspectorIcon,
null,
"The is an open in inspector icon"
);
info(
"Clicking on the inspector icon and waiting for the inspector to be selected"
);
let onInspectorSelected = toolbox.once("inspector-selected");
let onInspectorUpdated = inspector.once("inspector-updated");
let onNewNode = toolbox.selection.once("new-node-front");
openInInspectorIcon.click();
await onInspectorSelected;
await onInspectorUpdated;
let nodeFront = await onNewNode;
ok(true, "Inspector selected and new node got selected");
is(nodeFront.displayName, "button", "The expected node was selected");
is(nodeFront.id, "1", "The expected node was selected");
info("Go back to the console");
await toolbox.selectTool("webconsole");
info("Check the CSS warning message for the third-party iframe");
messageNode = await waitFor(() =>
findWarningMessage(hud, "Error in parsing value for ‘color’", ".css")
);
info("Click on the expand arrow");
messageNode.querySelector(".arrow").click();
await waitFor(
() => messageNode.querySelectorAll(".objectBox-node").length == 3
);
ok(
messageNode.textContent.includes(
"NodeList(3) [ body.subframe, h1.subframe, p.subframe ]"
),
"The message was expanded and shows the impacted elements"
);
node = messageNode.querySelectorAll(".objectBox-node")[2];
openInInspectorIcon = node.querySelector(".open-inspector");
Assert.notStrictEqual(
openInInspectorIcon,
null,
"The is an open in inspector icon"
);
info(
"Clicking on the inspector icon and waiting for the inspector to be selected"
);
onInspectorSelected = toolbox.once("inspector-selected");
onInspectorUpdated = inspector.once("inspector-updated");
onNewNode = toolbox.selection.once("new-node-front");
openInInspectorIcon.click();
await onInspectorSelected;
await onInspectorUpdated;
nodeFront = await onNewNode;
ok(true, "Inspector selected and new node got selected");
is(nodeFront.displayName, "p", "The expected node was selected");
is(nodeFront.className, "subframe", "The expected node was selected");
});
|
