diff options
Diffstat (limited to 'devtools/client/webconsole/test/browser/browser_webconsole_object_in_sidebar_keyboard_nav.js')
-rw-r--r-- | devtools/client/webconsole/test/browser/browser_webconsole_object_in_sidebar_keyboard_nav.js | 105 |
1 files changed, 105 insertions, 0 deletions
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_object_in_sidebar_keyboard_nav.js b/devtools/client/webconsole/test/browser/browser_webconsole_object_in_sidebar_keyboard_nav.js new file mode 100644 index 0000000000..8576886935 --- /dev/null +++ b/devtools/client/webconsole/test/browser/browser_webconsole_object_in_sidebar_keyboard_nav.js @@ -0,0 +1,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; +} |