tor-browser

browser_inspector_extension_sidebar.js (13292B)

---

/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

const SIDEBAR_ID = "an-extension-sidebar";
const SIDEBAR_TITLE = "Sidebar Title";

let extension;
let fakeExtCallerInfo;

let toolbox;
let inspector;

add_task(async function setupExtensionSidebar() {
 extension = ExtensionTestUtils.loadExtension({
   background() {
     // This is just an empty extension used to ensure that the caller extension uuid
     // actually exists.
   },
 });

 await extension.startup();

 fakeExtCallerInfo = {
   url: WebExtensionPolicy.getByID(extension.id).getURL(
     "fake-caller-script.js"
   ),
   lineNumber: 1,
   addonId: extension.id,
 };

 const res = await openInspectorForURL("about:blank");
 inspector = res.inspector;
 toolbox = res.toolbox;

 const onceSidebarCreated = toolbox.once(
   `extension-sidebar-created-${SIDEBAR_ID}`
 );
 toolbox.registerInspectorExtensionSidebar(SIDEBAR_ID, {
   title: SIDEBAR_TITLE,
 });

 const sidebar = await onceSidebarCreated;

 // Test sidebar properties.
 is(
   sidebar,
   inspector.getPanel(SIDEBAR_ID),
   "Got an extension sidebar instance equal to the one saved in the inspector"
 );
 is(
   sidebar.title,
   SIDEBAR_TITLE,
   "Got the expected title in the extension sidebar instance"
 );
 is(
   sidebar.provider.props.title,
   SIDEBAR_TITLE,
   "Got the expeted title in the provider props"
 );

 // Test sidebar Redux state.
 const inspectorStoreState = inspector.store.getState();
 ok(
   "extensionsSidebar" in inspectorStoreState,
   "Got the extensionsSidebar sub-state in the inspector Redux store"
 );
 Assert.deepEqual(
   inspectorStoreState.extensionsSidebar,
   {},
   "The extensionsSidebar should be initially empty"
 );
});

add_task(async function testSidebarSetObject() {
 const object = {
   propertyName: {
     nestedProperty: "propertyValue",
     anotherProperty: "anotherValue",
   },
 };

 const sidebar = inspector.getPanel(SIDEBAR_ID);
 sidebar.setObject(object);

 // Test updated sidebar Redux state.
 const inspectorStoreState = inspector.store.getState();
 is(
   Object.keys(inspectorStoreState.extensionsSidebar).length,
   1,
   "The extensionsSidebar state contains the newly registered extension sidebar state"
 );
 Assert.deepEqual(
   inspectorStoreState.extensionsSidebar,
   {
     [SIDEBAR_ID]: {
       viewMode: "object-treeview",
       object,
     },
   },
   "Got the expected state for the registered extension sidebar"
 );

 // Select the extension sidebar.
 const waitSidebarSelected = toolbox.once(`inspector-sidebar-select`);
 inspector.sidebar.show(SIDEBAR_ID);
 await waitSidebarSelected;

 const sidebarPanelContent = inspector.sidebar.getTabPanel(SIDEBAR_ID);

 // Test extension sidebar content.
 ok(
   sidebarPanelContent,
   "Got a sidebar panel for the registered extension sidebar"
 );

 assertTreeView(sidebarPanelContent, {
   expectedTreeTables: 1,
   expectedStringCells: 2,
   expectedNumberCells: 0,
 });

 // Test sidebar refreshed on further sidebar.setObject calls.
 info("Change the inspected object in the extension sidebar object treeview");
 sidebar.setObject({ aNewProperty: 123 });

 assertTreeView(sidebarPanelContent, {
   expectedTreeTables: 1,
   expectedStringCells: 0,
   expectedNumberCells: 1,
 });
});

add_task(async function testSidebarSetExpressionResult() {
 const { commands } = toolbox;
 const sidebar = inspector.getPanel(SIDEBAR_ID);
 const sidebarPanelContent = inspector.sidebar.getTabPanel(SIDEBAR_ID);

 info("Testing sidebar.setExpressionResult with rootTitle");

 const expression = `
   var obj = Object.create(null);
   obj.prop1 = 123;
   obj[Symbol('sym1')] = 456;
   obj.cyclic = obj;
   obj;
 `;

 const consoleFront = await toolbox.target.getFront("console");
 let evalResult = await commands.inspectedWindowCommand.eval(
   fakeExtCallerInfo,
   expression,
   {
     consoleFront,
   }
 );

 sidebar.setExpressionResult(evalResult, "Expected Root Title");

 // Wait the ObjectInspector component to be rendered and test its content.
 await testSetExpressionSidebarPanel(sidebarPanelContent, {
   nodesLength: 4,
   propertiesNames: ["cyclic", "prop1", "Symbol(sym1)"],
   rootTitle: "Expected Root Title",
 });

 info("Testing sidebar.setExpressionResult without rootTitle");

 sidebar.setExpressionResult(evalResult);

 // Wait the ObjectInspector component to be rendered and test its content.
 await testSetExpressionSidebarPanel(sidebarPanelContent, {
   nodesLength: 4,
   propertiesNames: ["cyclic", "prop1", "Symbol(sym1)"],
 });

 info("Test expanding the object");
 const oi = sidebarPanelContent.querySelector(".tree");
 const cyclicNode = oi.querySelectorAll(".node")[1];
 ok(cyclicNode.innerText.includes("cyclic"), "Found the expected node");
 cyclicNode.click();

 await TestUtils.waitForCondition(
   () => oi.querySelectorAll(".node").length === 7,
   "Wait for the 'cyclic' node to be expanded"
 );

 await TestUtils.waitForCondition(
   () => oi.querySelector(".tree-node.focused"),
   "Wait for the 'cyclic' node to be focused"
 );
 ok(
   oi.querySelector(".tree-node.focused").innerText.includes("cyclic"),
   "'cyclic' node is focused"
 );

 info("Test keyboard navigation");
 EventUtils.synthesizeKey("KEY_ArrowLeft", {}, oi.ownerDocument.defaultView);
 await TestUtils.waitForCondition(
   () => oi.querySelectorAll(".node").length === 4,
   "Wait for the 'cyclic' node to be collapsed"
 );
 ok(
   oi.querySelector(".tree-node.focused").innerText.includes("cyclic"),
   "'cyclic' node is still focused"
 );

 EventUtils.synthesizeKey("KEY_ArrowDown", {}, oi.ownerDocument.defaultView);
 await TestUtils.waitForCondition(
   () => oi.querySelectorAll(".tree-node")[2].classList.contains("focused"),
   "Wait for the 'prop1' node to be focused"
 );

 ok(
   oi.querySelector(".tree-node.focused").innerText.includes("prop1"),
   "'prop1' node is focused"
 );

 info(
   "Testing sidebar.setExpressionResult for an expression returning a longstring"
 );
 evalResult = await commands.inspectedWindowCommand.eval(
   fakeExtCallerInfo,
   `"ab ".repeat(10000)`,
   {
     consoleFront,
   }
 );
 sidebar.setExpressionResult(evalResult);

 await TestUtils.waitForCondition(() => {
   const longStringEl = sidebarPanelContent.querySelector(
     ".tree .objectBox-string"
   );
   return (
     longStringEl && longStringEl.textContent.includes("ab ".repeat(10000))
   );
 }, "Wait for the longString to be render with its full text");
 ok(true, "The longString is expanded and its full text is displayed");

 info(
   "Testing sidebar.setExpressionResult for an expression returning a primitive"
 );
 evalResult = await commands.inspectedWindowCommand.eval(
   fakeExtCallerInfo,
   `1 + 2`,
   {
     consoleFront,
   }
 );
 sidebar.setExpressionResult(evalResult);
 const numberEl = await TestUtils.waitForCondition(
   () => sidebarPanelContent.querySelector(".objectBox-number"),
   "Wait for the result number element to be rendered"
 );
 is(numberEl.textContent, "3", `The "1 + 2" expression was evaluated as "3"`);
});

add_task(async function testSidebarDOMNodeHighlighting() {
 const { commands } = toolbox;
 const sidebar = inspector.getPanel(SIDEBAR_ID);
 const sidebarPanelContent = inspector.sidebar.getTabPanel(SIDEBAR_ID);

 const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
   getHighlighterTestHelpers(inspector);

 const expression = "({ body: document.body })";

 const consoleFront = await toolbox.target.getFront("console");
 const evalResult = await commands.inspectedWindowCommand.eval(
   fakeExtCallerInfo,
   expression,
   {
     consoleFront,
   }
 );

 sidebar.setExpressionResult(evalResult);

 // Wait the DOM node to be rendered inside the component.
 await waitForObjectInspector(sidebarPanelContent, "node");

 // Wait for the object to be expanded so we only target the "body" property node, and
 // not the root object element.
 await TestUtils.waitForCondition(
   () =>
     sidebarPanelContent.querySelectorAll(".object-inspector .tree-node")
       .length > 1
 );

 // Get and verify the DOMNode and the "open inspector"" icon
 // rendered inside the ObjectInspector.

 assertObjectInspector(sidebarPanelContent, {
   expectedDOMNodes: 2,
   expectedOpenInspectors: 2,
 });

 // Test highlight DOMNode on mouseover.
 info("Highlight the node by moving the cursor on it");

 const onNodeHighlight = waitForHighlighterTypeShown(
   inspector.highlighters.TYPES.BOXMODEL
 );

 moveMouseOnObjectInspectorDOMNode(sidebarPanelContent);

 const { nodeFront } = await onNodeHighlight;
 is(nodeFront.displayName, "body", "The correct node was highlighted");

 // Test unhighlight DOMNode on mousemove.
 info("Unhighlight the node by moving away from the node");
 const onNodeUnhighlight = waitForHighlighterTypeHidden(
   inspector.highlighters.TYPES.BOXMODEL
 );

 moveMouseOnPanelCenter(sidebarPanelContent);

 await onNodeUnhighlight;
 info("The node is no longer highlighted");
});

add_task(async function testSidebarDOMNodeOpenInspector() {
 const sidebarPanelContent = inspector.sidebar.getTabPanel(SIDEBAR_ID);

 // Test DOMNode selected in the inspector when "open inspector"" icon clicked.
 info("Unselect node in the inspector");
 let onceNewNodeFront = inspector.selection.once("new-node-front");
 inspector.selection.setNodeFront(null);
 let nodeFront = await onceNewNodeFront;
 is(nodeFront, null, "The inspector selection should have been unselected");

 info(
   "Select the ObjectInspector DOMNode in the inspector panel by clicking on it"
 );

 // In test mode, shown highlighters are not automatically hidden after a delay to
 // prevent intermittent test failures from race conditions.
 // Restore this behavior just for this test because it is explicitly checked.
 const HIGHLIGHTER_AUTOHIDE_TIMER = inspector.HIGHLIGHTER_AUTOHIDE_TIMER;
 inspector.HIGHLIGHTER_AUTOHIDE_TIMER = 1000;
 registerCleanupFunction(() => {
   // Restore the value to disable autohiding to not impact other tests.
   inspector.HIGHLIGHTER_AUTOHIDE_TIMER = HIGHLIGHTER_AUTOHIDE_TIMER;
 });

 const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
   getHighlighterTestHelpers(inspector);

 // Once we click the open-inspector icon we expect a new node front to be selected
 // and the node to have been highlighted and unhighlighted.
 const onNodeHighlight = waitForHighlighterTypeShown(
   inspector.highlighters.TYPES.BOXMODEL
 );
 const onNodeUnhighlight = waitForHighlighterTypeHidden(
   inspector.highlighters.TYPES.BOXMODEL
 );
 onceNewNodeFront = inspector.selection.once("new-node-front");

 clickOpenInspectorIcon(sidebarPanelContent);

 nodeFront = await onceNewNodeFront;
 is(nodeFront.displayName, "body", "The correct node has been selected");
 const { nodeFront: highlightedNodeFront } = await onNodeHighlight;
 is(
   highlightedNodeFront.displayName,
   "body",
   "The correct node was highlighted"
 );

 await onNodeUnhighlight;
});

add_task(async function testSidebarSetExtensionPage() {
 const sidebar = inspector.getPanel(SIDEBAR_ID);
 const sidebarPanelContent = inspector.sidebar.getTabPanel(SIDEBAR_ID);

 info("Testing sidebar.setExtensionPage");

 const expectedURL = getRootDirectory(gTestPath) + "extension_page.html";

 sidebar.setExtensionPage(expectedURL);

 await testSetExtensionPageSidebarPanel(sidebarPanelContent, expectedURL);
});

add_task(async function teardownExtensionSidebar() {
 info("Remove the sidebar instance");

 toolbox.unregisterInspectorExtensionSidebar(SIDEBAR_ID);

 ok(
   !inspector.sidebar.getTabPanel(SIDEBAR_ID),
   "The rendered extension sidebar has been removed"
 );

 const inspectorStoreState = inspector.store.getState();

 Assert.deepEqual(
   inspectorStoreState.extensionsSidebar,
   {},
   "The extensions sidebar Redux store data has been cleared"
 );

 await extension.unload();

 toolbox = null;
 inspector = null;
 extension = null;
});

add_task(async function testActiveTabOnNonExistingSidebar() {
 // Set a fake non existing sidebar id in the activeSidebar pref,
 // to simulate the scenario where an extension has installed a sidebar
 // which has been saved in the preference but it doesn't exist anymore.
 await SpecialPowers.pushPrefEnv({
   set: [["devtools.inspector.activeSidebar", "unexisting-sidebar-id"]],
 });

 const res = await openInspectorForURL("about:blank");
 inspector = res.inspector;
 toolbox = res.toolbox;

 const onceSidebarCreated = toolbox.once(
   `extension-sidebar-created-${SIDEBAR_ID}`
 );
 toolbox.registerInspectorExtensionSidebar(SIDEBAR_ID, {
   title: SIDEBAR_TITLE,
 });

 // Wait the extension sidebar to be created and then unregister it to force the tabbar
 // to select a new one.
 await onceSidebarCreated;
 toolbox.unregisterInspectorExtensionSidebar(SIDEBAR_ID);

 is(
   inspector.sidebar.getCurrentTabID(),
   "layoutview",
   "Got the expected inspector sidebar tab selected"
 );

 await SpecialPowers.popPrefEnv();
});