diff options
Diffstat (limited to 'browser/components/extensions/test/browser/browser_ext_devtools_panels_elements_sidebar.js')
| -rw-r--r-- | browser/components/extensions/test/browser/browser_ext_devtools_panels_elements_sidebar.js | 323 |
1 files changed, 323 insertions, 0 deletions
diff --git a/browser/components/extensions/test/browser/browser_ext_devtools_panels_elements_sidebar.js b/browser/components/extensions/test/browser/browser_ext_devtools_panels_elements_sidebar.js new file mode 100644 index 0000000000..0abc8c44e7 --- /dev/null +++ b/browser/components/extensions/test/browser/browser_ext_devtools_panels_elements_sidebar.js @@ -0,0 +1,323 @@ +/* -*- Mode: indent-tabs-mode: nil; js-indent-level: 2 -*- */ +/* vim: set sts=2 sw=2 et tw=80: */ +"use strict"; + +/* globals getExtensionSidebarActors, expectNoSuchActorIDs, testSetExpressionSidebarPanel */ + +// Import the shared test helpers from the related devtools tests. +loadTestSubscript("head_devtools.js"); +loadTestSubscript("head_devtools_inspector_sidebar.js"); + +function isActiveSidebarTabTitle(inspector, expectedTabTitle, message) { + const actualTabTitle = inspector.panelDoc.querySelector( + "#inspector-sidebar .tabs-menu-item.is-active" + ).innerText; + is(actualTabTitle, expectedTabTitle, message); +} + +function testSetObjectSidebarPanel(panel, expectedCellType, expectedTitle) { + is( + panel.querySelectorAll("table.treeTable").length, + 1, + "The sidebar panel contains a rendered TreeView component" + ); + + is( + panel.querySelectorAll(`table.treeTable .${expectedCellType}Cell`).length, + 1, + `The TreeView component contains the expected a cell of type ${expectedCellType}` + ); + + if (expectedTitle) { + const panelTree = panel.querySelector("table.treeTable"); + ok( + panelTree.innerText.includes(expectedTitle), + "The optional root object title has been included in the object tree" + ); + } +} + +async function testSidebarPanelSelect(extension, inspector, tabId, expected) { + const { sidebarShown, sidebarHidden, activeSidebarTabTitle } = expected; + + inspector.sidebar.show(tabId); + + const shown = await extension.awaitMessage("devtools_sidebar_shown"); + is( + shown, + sidebarShown, + "Got the shown event on the second extension sidebar" + ); + + if (sidebarHidden) { + const hidden = await extension.awaitMessage("devtools_sidebar_hidden"); + is( + hidden, + sidebarHidden, + "Got the hidden event on the first extension sidebar" + ); + } + + isActiveSidebarTabTitle( + inspector, + activeSidebarTabTitle, + "Got the expected title on the active sidebar tab" + ); +} + +add_task(async function test_devtools_panels_elements_sidebar() { + let tab = await BrowserTestUtils.openNewForegroundTab( + gBrowser, + "http://mochi.test:8888/" + ); + + async function devtools_page() { + const sidebar1 = await browser.devtools.panels.elements.createSidebarPane( + "Test Sidebar 1" + ); + const sidebar2 = await browser.devtools.panels.elements.createSidebarPane( + "Test Sidebar 2" + ); + const sidebar3 = await browser.devtools.panels.elements.createSidebarPane( + "Test Sidebar 3" + ); + const sidebar4 = await browser.devtools.panels.elements.createSidebarPane( + "Test Sidebar 4" + ); + + const onShownListener = (event, sidebarInstance) => { + browser.test.sendMessage(`devtools_sidebar_${event}`, sidebarInstance); + }; + + sidebar1.onShown.addListener(() => onShownListener("shown", "sidebar1")); + sidebar2.onShown.addListener(() => onShownListener("shown", "sidebar2")); + sidebar3.onShown.addListener(() => onShownListener("shown", "sidebar3")); + sidebar4.onShown.addListener(() => onShownListener("shown", "sidebar4")); + + sidebar1.onHidden.addListener(() => onShownListener("hidden", "sidebar1")); + sidebar2.onHidden.addListener(() => onShownListener("hidden", "sidebar2")); + sidebar3.onHidden.addListener(() => onShownListener("hidden", "sidebar3")); + sidebar4.onHidden.addListener(() => onShownListener("hidden", "sidebar4")); + + // Refresh the sidebar content on every inspector selection. + browser.devtools.panels.elements.onSelectionChanged.addListener(() => { + const expression = ` + var obj = Object.create(null); + obj.prop1 = 123; + obj[Symbol('sym1')] = 456; + obj.cyclic = obj; + obj; + `; + sidebar1.setExpression(expression, "sidebar.setExpression rootTitle"); + }); + + sidebar2.setObject({ anotherPropertyName: 123 }); + sidebar3.setObject( + { propertyName: "propertyValue" }, + "Optional Root Object Title" + ); + + sidebar4.setPage("sidebar.html"); + + browser.test.sendMessage("devtools_page_loaded"); + } + + function sidebar() { + browser.test.sendMessage("sidebar-loaded"); + } + + let extension = ExtensionTestUtils.loadExtension({ + manifest: { + devtools_page: "devtools_page.html", + }, + files: { + "devtools_page.html": `<!DOCTYPE html> + <html> + <head> + <meta charset="utf-8"> + </head> + <body> + <script src="devtools_page.js"></script> + </body> + </html>`, + "devtools_page.js": devtools_page, + "sidebar.html": `<!DOCTYPE html> + <html> + <head> + <meta charset="utf-8"> + </head> + <body> + sidebar panel + <script src="sidebar.js"></script> + </body> + </html>`, + "sidebar.js": sidebar, + }, + }); + + await extension.startup(); + + const toolbox = await openToolboxForTab(tab); + + await extension.awaitMessage("devtools_page_loaded"); + + const waitInspector = toolbox.once("inspector-selected"); + toolbox.selectTool("inspector"); + await waitInspector; + + const sidebarIds = Array.from(toolbox._inspectorExtensionSidebars.keys()); + + const inspector = await toolbox.getPanel("inspector"); + + info("Test extension inspector sidebar 1 (sidebar.setExpression)"); + + inspector.sidebar.show(sidebarIds[0]); + + const shownSidebarInstance = await extension.awaitMessage( + "devtools_sidebar_shown" + ); + + is( + shownSidebarInstance, + "sidebar1", + "Got the shown event on the first extension sidebar" + ); + + isActiveSidebarTabTitle( + inspector, + "Test Sidebar 1", + "Got the expected title on the active sidebar tab" + ); + + const sidebarPanel1 = inspector.sidebar.getTabPanel(sidebarIds[0]); + + ok( + sidebarPanel1, + "Got a rendered sidebar panel for the first registered extension sidebar" + ); + + info("Waiting for the first panel to be rendered"); + + // Verify that the panel contains an ObjectInspector, with the expected number of nodes + // and with the expected property names. + await testSetExpressionSidebarPanel(sidebarPanel1, { + nodesLength: 4, + propertiesNames: ["cyclic", "prop1", "Symbol(sym1)"], + rootTitle: "sidebar.setExpression rootTitle", + }); + + // Retrieve the actors currently rendered into the extension sidebars. + const actors = getExtensionSidebarActors(inspector); + + info( + "Test extension inspector sidebar 2 (sidebar.setObject without a root title)" + ); + + await testSidebarPanelSelect(extension, inspector, sidebarIds[1], { + sidebarShown: "sidebar2", + sidebarHidden: "sidebar1", + activeSidebarTabTitle: "Test Sidebar 2", + }); + + const sidebarPanel2 = inspector.sidebar.getTabPanel(sidebarIds[1]); + + ok( + sidebarPanel2, + "Got a rendered sidebar panel for the second registered extension sidebar" + ); + + testSetObjectSidebarPanel(sidebarPanel2, "number"); + + info( + "Test extension inspector sidebar 3 (sidebar.setObject with a root title)" + ); + + await testSidebarPanelSelect(extension, inspector, sidebarIds[2], { + sidebarShown: "sidebar3", + sidebarHidden: "sidebar2", + activeSidebarTabTitle: "Test Sidebar 3", + }); + + const sidebarPanel3 = inspector.sidebar.getTabPanel(sidebarIds[2]); + + ok( + sidebarPanel3, + "Got a rendered sidebar panel for the third registered extension sidebar" + ); + + testSetObjectSidebarPanel( + sidebarPanel3, + "string", + "Optional Root Object Title" + ); + + info( + "Unloading the extension and check that all the sidebar have been removed" + ); + + inspector.sidebar.show(sidebarIds[3]); + + const shownSidebarInstance4 = await extension.awaitMessage( + "devtools_sidebar_shown" + ); + const hiddenSidebarInstance3 = await extension.awaitMessage( + "devtools_sidebar_hidden" + ); + + is( + shownSidebarInstance4, + "sidebar4", + "Got the shown event on the third extension sidebar" + ); + is( + hiddenSidebarInstance3, + "sidebar3", + "Got the hidden event on the second extension sidebar" + ); + + isActiveSidebarTabTitle( + inspector, + "Test Sidebar 4", + "Got the expected title on the active sidebar tab" + ); + + await extension.awaitMessage("sidebar-loaded"); + + await extension.unload(); + + is( + Array.from(toolbox._inspectorExtensionSidebars.keys()).length, + 0, + "All the registered sidebars have been unregistered on extension unload" + ); + + is( + inspector.sidebar.getTabPanel(sidebarIds[0]), + null, + "The first registered sidebar has been removed" + ); + + is( + inspector.sidebar.getTabPanel(sidebarIds[1]), + null, + "The second registered sidebar has been removed" + ); + + is( + inspector.sidebar.getTabPanel(sidebarIds[2]), + null, + "The third registered sidebar has been removed" + ); + + is( + inspector.sidebar.getTabPanel(sidebarIds[3]), + null, + "The fourth registered sidebar has been removed" + ); + + await expectNoSuchActorIDs(toolbox.target.client, actors); + + await closeToolboxForTab(tab); + + BrowserTestUtils.removeTab(tab); +}); |