browser_dbg-dom-mutation-breakpoints.js (5721B)
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 5 // Tests adding, disble/enable, and removal of dom mutation breakpoints 6 7 "use strict"; 8 9 // Import helpers for the inspector 10 Services.scriptloader.loadSubScript( 11 "chrome://mochitests/content/browser/devtools/client/inspector/test/shared-head.js", 12 this 13 ); 14 15 const DMB_TEST_URL = 16 "https://example.com/browser/devtools/client/debugger/test/mochitest/examples/doc-dom-mutation.html"; 17 18 async function enableMutationBreakpoints() { 19 await pushPref("devtools.debugger.dom-mutation-breakpoints-visible", true); 20 } 21 22 add_task(async function () { 23 // Enable features 24 await enableMutationBreakpoints(); 25 await pushPref("devtools.debugger.map-scopes-enabled", true); 26 27 info("Switches over to the inspector pane"); 28 29 const { inspector, toolbox } = await openInspectorForURL(DMB_TEST_URL); 30 31 { 32 info("Selecting the body node"); 33 await selectNode("body", inspector); 34 35 info("Adding DOM mutation breakpoints to body"); 36 const allMenuItems = openContextMenuAndGetAllItems(inspector); 37 38 const attributeMenuItem = allMenuItems.find( 39 item => item.id === "node-menu-mutation-breakpoint-attribute" 40 ); 41 attributeMenuItem.click(); 42 43 const subtreeMenuItem = allMenuItems.find( 44 item => item.id === "node-menu-mutation-breakpoint-subtree" 45 ); 46 subtreeMenuItem.click(); 47 } 48 49 { 50 info("Find and expand the shadow host."); 51 const hostFront = await getNodeFront("#host", inspector); 52 const hostContainer = inspector.markup.getContainer(hostFront); 53 await expandContainer(inspector, hostContainer); 54 55 info("Expand the shadow root"); 56 const shadowRootContainer = hostContainer.getChildContainers()[0]; 57 await expandContainer(inspector, shadowRootContainer); 58 59 info("Select the div under the shadow root"); 60 const divContainer = shadowRootContainer.getChildContainers()[0]; 61 await selectNode(divContainer.node, inspector); 62 63 const allMenuItems = openContextMenuAndGetAllItems(inspector); 64 info("Adding attribute breakpoint."); 65 const attributeMenuItem = allMenuItems.find( 66 item => item.id === "node-menu-mutation-breakpoint-attribute" 67 ); 68 attributeMenuItem.click(); 69 } 70 71 info("Switches over to the debugger pane"); 72 await toolbox.selectTool("jsdebugger"); 73 74 const dbg = createDebuggerContext(toolbox); 75 76 info("Confirms that one DOM mutation breakpoint exists"); 77 const mutationItem = await waitForElement(dbg, "domMutationItem"); 78 ok(mutationItem, "A DOM mutation breakpoint exists"); 79 80 mutationItem.scrollIntoView(); 81 82 info("Enabling and disabling the DOM mutation breakpoint works"); 83 const checkbox = mutationItem.querySelector("input"); 84 checkbox.click(); 85 await waitFor(() => !checkbox.checked); 86 checkbox.click(); 87 await waitFor(() => checkbox.checked); 88 89 info("Changing attribute to trigger debugger pause"); 90 SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () { 91 content.document.querySelector("#attribute").click(); 92 }); 93 await waitForPaused(dbg); 94 let whyPaused = await waitFor( 95 () => dbg.win.document.querySelector(".why-paused")?.innerText 96 ); 97 is( 98 whyPaused, 99 `Paused on DOM mutation\nchangeAttribute - dom-mutation.original.js:3:16\nDOM Mutation: 'attributeModified'\nbody` 100 ); 101 102 await resume(dbg); 103 104 info("Changing style to trigger debugger pause"); 105 SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () { 106 content.document.querySelector("#style-attribute").click(); 107 }); 108 await waitForPaused(dbg); 109 await resume(dbg); 110 111 info("Changing attribute in shadow dom to trigger debugger pause"); 112 SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () { 113 content.document.querySelector("#shadow-attribute").click(); 114 }); 115 await waitForPaused(dbg); 116 await resume(dbg); 117 118 info("Adding element in subtree to trigger debugger pause"); 119 SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () { 120 content.document.querySelector("#add-in-subtree").click(); 121 }); 122 await waitForPaused(dbg); 123 whyPaused = await waitFor( 124 () => dbg.win.document.querySelector(".why-paused")?.innerText 125 ); 126 is( 127 whyPaused, 128 `Paused on DOM mutation\naddDivToBody - dom-mutation.js:13:16\nDOM Mutation: 'subtreeModified'\nbodyAdded:div#dynamic` 129 ); 130 131 await resume(dbg); 132 133 info("Removing element in subtree to trigger debugger pause"); 134 SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () { 135 content.document.querySelector("#remove-in-subtree").click(); 136 }); 137 await waitForPaused(dbg); 138 whyPaused = await waitFor( 139 () => dbg.win.document.querySelector(".why-paused")?.innerText 140 ); 141 is( 142 whyPaused, 143 `Paused on DOM mutation\nremoveDivInBody - dom-mutation.js:17:42\nDOM Mutation: 'subtreeModified'\nbodyRemoved:div#dynamic` 144 ); 145 146 await resume(dbg); 147 148 info("Blackboxing the source prevents debugger pause"); 149 const source = await waitForSource(dbg, "dom-mutation.original.js"); 150 151 await selectSource(dbg, source); 152 await clickElement(dbg, "blackbox"); 153 await waitForDispatch(dbg.store, "BLACKBOX_WHOLE_SOURCES"); 154 155 SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () { 156 content.document.querySelector("#blackbox").click(); 157 }); 158 159 await waitForPaused(dbg, "click.js"); 160 await resume(dbg); 161 162 await selectSource(dbg, source); 163 await clickElement(dbg, "blackbox"); 164 await waitForDispatch(dbg.store, "UNBLACKBOX_WHOLE_SOURCES"); 165 166 info("Removing breakpoints works"); 167 dbg.win.document.querySelector(".dom-mutation-list .close-btn").click(); 168 await waitForAllElements(dbg, "domMutationItem", 2, true); 169 });