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
|
/* Any copyright is dedicated to the Public Domain.
* http://creativecommons.org/publicdomain/zero/1.0/ */
// Test that the ObjectInspector is rendered correctly in the sidebar.
"use strict";
const TEST_URI = `data:text/html;charset=utf8,<!DOCTYPE html><script>
console.log({
a:1,
b:2,
c:[3]
});
</script>`;
add_task(async function () {
// Should be removed when sidebar work is complete
await pushPref("devtools.webconsole.sidebarToggle", true);
const isMacOS = Services.appinfo.OS === "Darwin";
const hud = await openNewTabAndConsole(TEST_URI);
const message = findConsoleAPIMessage(hud, "Object");
const object = message.querySelector(".object-inspector .objectBox-object");
info("Ctrl+click on an object to put it in the sidebar");
const onSidebarShown = waitFor(() =>
hud.ui.document.querySelector(".sidebar")
);
AccessibilityUtils.setEnv({
// Component that renders an object handles keyboard interactions on the
// container level.
mustHaveAccessibleRule: false,
interactiveRule: false,
focusableRule: false,
labelRule: false,
});
EventUtils.sendMouseEvent(
{
type: "click",
[isMacOS ? "metaKey" : "ctrlKey"]: true,
},
object,
hud.ui.window
);
AccessibilityUtils.resetEnv();
await onSidebarShown;
ok(true, "sidebar is displayed after user Ctrl+clicked on it");
const sidebarContents = hud.ui.document.querySelector(".sidebar-contents");
let objectInspectors = [...sidebarContents.querySelectorAll(".tree")];
is(
objectInspectors.length,
1,
"There is the expected number of object inspectors"
);
let [objectInspector] = objectInspectors;
// The object in the sidebar now should look like:
// ▼ { … }
// | a: 1
// | b: 2
// | ▶︎ c: Array [3]
// | ▶︎ <prototype>: Object { … }
await waitFor(() => objectInspector.querySelectorAll(".node").length === 5);
let propertiesNodes = [
...objectInspector.querySelectorAll(".object-label"),
].map(el => el.textContent);
let arrayPropertiesNames = ["a", "b", "c", "<prototype>"];
is(
JSON.stringify(propertiesNodes),
JSON.stringify(arrayPropertiesNames),
"The expected nodes are displayed"
);
is(
message.querySelectorAll(".node").length,
1,
"The message in the content panel wasn't expanded"
);
info(
"Expand the output message and Ctrl+click on the `c` property node to put it in the sidebar"
);
message.querySelector(".node").click();
const cNode = await waitFor(() => message.querySelectorAll(".node")[3]);
AccessibilityUtils.setEnv({
// Component that renders an object handles keyboard interactions on the
// container level.
focusableRule: false,
interactiveRule: false,
labelRule: false,
});
EventUtils.sendMouseEvent(
{
type: "click",
[isMacOS ? "metaKey" : "ctrlKey"]: true,
},
cNode,
hud.ui.window
);
AccessibilityUtils.resetEnv();
objectInspectors = [...sidebarContents.querySelectorAll(".tree")];
is(objectInspectors.length, 1, "There is still only one object inspector");
[objectInspector] = objectInspectors;
// The object in the sidebar now should look like:
// ▼ (1) […]
// | 0: 3
// | length: 1
// | ▶︎ <prototype>: Array []
await waitFor(() => objectInspector.querySelectorAll(".node").length === 4);
propertiesNodes = [...objectInspector.querySelectorAll(".object-label")].map(
el => el.textContent
);
arrayPropertiesNames = ["0", "length", "<prototype>"];
is(
JSON.stringify(propertiesNodes),
JSON.stringify(arrayPropertiesNames),
"The expected nodes are displayed"
);
});
|
