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/ */
// Test that the ObjectInspector in the sidebar can be navigated with the keyboard.
"use strict";
const TEST_URI = `data:text/html;charset=utf8,<!DOCTYPE html>
<script>
console.log({
a:1,
b:2,
c: Array.from({length: 100}, (_, i) => i)
});
</script>`;
add_task(async function () {
// Should be removed when sidebar work is complete
await pushPref("devtools.webconsole.sidebarToggle", true);
const hud = await openNewTabAndConsole(TEST_URI);
const message = await waitFor(() => findConsoleAPIMessage(hud, "Object"));
const object = message.querySelector(".object-inspector .objectBox-object");
const onSideBarVisible = waitFor(() =>
hud.ui.document.querySelector(".sidebar-contents")
);
await openObjectInSidebar(hud, object);
const sidebarContents = await onSideBarVisible;
const objectInspector = sidebarContents.querySelector(".object-inspector");
ok(objectInspector, "The ObjectInspector is displayed");
// There are 5 nodes: the root, a, b, c, and proto.
await waitFor(() => objectInspector.querySelectorAll(".node").length === 5);
objectInspector.focus();
const [root, a, b, c] = objectInspector.querySelectorAll(".node");
ok(root.classList.contains("focused"), "The root node is focused");
await synthesizeKeyAndWaitForFocus("KEY_ArrowDown", a);
ok(true, "`a` node is focused");
await synthesizeKeyAndWaitForFocus("KEY_ArrowDown", b);
ok(true, "`b` node is focused");
await synthesizeKeyAndWaitForFocus("KEY_ArrowDown", c);
ok(true, "`c` node is focused");
EventUtils.synthesizeKey("KEY_ArrowRight");
await waitFor(() => objectInspector.querySelectorAll(".node").length > 5);
ok(true, "`c` node is expanded");
const arrayNodes = objectInspector.querySelectorAll(`[aria-level="3"]`);
await synthesizeKeyAndWaitForFocus("KEY_ArrowDown", arrayNodes[0]);
ok(true, "First item of the `c` array is focused");
await synthesizeKeyAndWaitForFocus("KEY_ArrowLeft", c);
ok(true, "`c` node is focused again");
await synthesizeKeyAndWaitForFocus("KEY_ArrowUp", b);
ok(true, "`b` node is focused again");
info("Select another object in the console output");
const onArrayMessage = waitForMessageByType(hud, "Array", ".console-api");
await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
content.wrappedJSObject.console.log([4, 5, 6]);
});
const arrayMessage = await onArrayMessage;
const array = arrayMessage.node.querySelector(
".object-inspector .objectBox-array"
);
await openObjectInSidebar(hud, array);
await waitFor(() =>
sidebarContents
.querySelector(".tree-node")
.textContent.includes("Array(3) [ 4, 5, 6 ]")
);
ok(
sidebarContents.querySelector(".tree-node").classList.contains("focused"),
"The root node of the new object in the sidebar is focused"
);
});
async function openObjectInSidebar(hud, objectNode) {
const contextMenu = await openContextMenu(hud, objectNode);
const openInSidebarEntry = contextMenu.querySelector(
"#console-menu-open-sidebar"
);
openInSidebarEntry.click();
await hideContextMenu(hud);
}
function synthesizeKeyAndWaitForFocus(keyStr, elementToBeFocused) {
const onFocusChanged = waitFor(() =>
elementToBeFocused.classList.contains("focused")
);
EventUtils.synthesizeKey(keyStr);
return onFocusChanged;
}
|
