browser_inspector_initialization.js (5568B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 "use strict"; 5 6 // Tests for different ways to initialize the inspector. 7 8 const HTML = ` 9 <div id="first" style="margin: 10em; font-size: 14pt; 10 font-family: helvetica, sans-serif; color: gray"> 11 <h1>Some header text</h1> 12 <p id="salutation" style="font-size: 12pt">hi.</p> 13 <p id="body" style="font-size: 12pt">I am a test-case. This text exists 14 solely to provide some things to test the inspector initialization.</p> 15 <p>If you are reading this, you should go do something else instead. Maybe 16 read a book. Or better yet, write some test-cases for another bit of code. 17 <span style="font-style: italic">Inspector's!</span> 18 </p> 19 <p id="closing">end transmission</p> 20 </div> 21 `; 22 23 const TEST_URI = "data:text/html;charset=utf-8," + encodeURI(HTML); 24 25 add_task(async function () { 26 const tab = await addTab(TEST_URI); 27 await testToolboxInitialization(tab); 28 await testContextMenuInitialization(tab); 29 await testContextMenuInspectorAlreadyOpen(tab); 30 }); 31 32 async function testToolboxInitialization(tab) { 33 info("Opening inspector with gDevTools."); 34 const toolbox = await gDevTools.showToolboxForTab(tab, { 35 toolId: "inspector", 36 }); 37 const inspector = toolbox.getCurrentPanel(); 38 39 ok(true, "Inspector started, and notification received."); 40 ok(inspector, "Inspector instance is accessible."); 41 42 await selectNode("p", inspector); 43 await testMarkupView("p", inspector); 44 await testBreadcrumbs("p", inspector); 45 46 await scrollContentPageNodeIntoView(gBrowser.selectedBrowser, "span"); 47 48 await selectNode("span", inspector); 49 await testMarkupView("span", inspector); 50 await testBreadcrumbs("span", inspector); 51 52 info("Destroying toolbox"); 53 await toolbox.destroy(); 54 55 ok(true, "'destroyed' notification received."); 56 const toolboxForTab = gDevTools.getToolboxForTab(tab); 57 ok(!toolboxForTab, "Toolbox destroyed."); 58 } 59 60 async function testContextMenuInitialization(tab) { 61 // Sanity check 62 const toolboxForTab = gDevTools.getToolboxForTab(tab); 63 ok(!toolboxForTab, "There's not toolbox for the tab"); 64 65 const onHighlighterVisible = SpecialPowers.spawn( 66 gBrowser.selectedBrowser, 67 [], 68 () => { 69 const doc = content.document; 70 return ContentTaskUtils.waitForCondition(() => { 71 // Highlighters are rendered in the shadow DOM, let's get the shadow roots first 72 const roots = doc.getConnectedShadowRoots(); 73 const getBoxModelHighlighterInfoBarEl = root => 74 root.querySelector( 75 ".highlighter-container.box-model #box-model-infobar-container" 76 ); 77 const boxModelRoot = roots.find(root => 78 getBoxModelHighlighterInfoBarEl(root) 79 ); 80 if (!boxModelRoot) { 81 return false; 82 } 83 const boxModelInfoBarEl = getBoxModelHighlighterInfoBarEl(boxModelRoot); 84 return ( 85 // wait for the infobar to be displayed 86 boxModelInfoBarEl.getAttribute("hidden") === null && 87 // and make sure it's shown for the inspected element 88 boxModelInfoBarEl.querySelector(".box-model-infobar-id") 89 ?.textContent === "#salutation" 90 ); 91 }, "wait for hihglighter to be visible"); 92 } 93 ); 94 95 info("Opening inspector by clicking on 'Inspect Element' context menu item"); 96 await clickOnInspectMenuItem("#salutation"); 97 98 info("Wait for the highlighter to be displayed"); 99 await onHighlighterVisible; 100 ok(true, "Highlighter was displayed for #salutation element"); 101 102 info("Checking inspector state."); 103 const inspector = getActiveInspector(); 104 const markup = inspector.markup; 105 const rootContainer = markup.getContainer(markup._rootNode); 106 is( 107 inspector.markup.doc.activeElement, 108 rootContainer.elt, 109 "Keyboard focus must be on the markup tree container." 110 ); 111 await testMarkupView("#salutation"); 112 await testBreadcrumbs("#salutation"); 113 } 114 115 async function testContextMenuInspectorAlreadyOpen(tab) { 116 // Sanity check 117 const toolboxForTab = gDevTools.getToolboxForTab(tab); 118 ok(toolboxForTab, "There's already a toolbox for the tab"); 119 120 info("Changing node by clicking on 'Inspect Element' context menu item"); 121 122 const inspector = getActiveInspector(); 123 ok(inspector, "Inspector is active"); 124 125 await clickOnInspectMenuItem("#closing"); 126 127 ok(true, "Inspector was updated when 'Inspect Element' was clicked."); 128 await testMarkupView("#closing", inspector); 129 await testBreadcrumbs("#closing", inspector); 130 } 131 132 async function testMarkupView(selector, inspector) { 133 if (!inspector) { 134 inspector = getActiveInspector(); 135 } 136 const nodeFront = await getNodeFront(selector, inspector); 137 try { 138 is( 139 inspector.selection.nodeFront, 140 nodeFront, 141 "Right node is selected in the markup view" 142 ); 143 } catch (ex) { 144 ok(false, "Got exception while resolving selected node of markup view."); 145 console.error(ex); 146 } 147 } 148 149 async function testBreadcrumbs(selector, inspector) { 150 if (!inspector) { 151 inspector = getActiveInspector(); 152 } 153 const nodeFront = await getNodeFront(selector, inspector); 154 155 const b = inspector.breadcrumbs; 156 const expectedText = b.prettyPrintNodeAsText(nodeFront); 157 const button = b.container.querySelector("button[aria-pressed=true]"); 158 ok(button, "A crumbs is pressed"); 159 is( 160 button.getAttribute("title"), 161 expectedText, 162 "Crumb refers to the right node" 163 ); 164 }