diff options
Diffstat (limited to '')
| -rw-r--r-- | devtools/client/inspector/markup/test/browser_markup_dom_mutation_breakpoints.js | 196 |
1 files changed, 196 insertions, 0 deletions
diff --git a/devtools/client/inspector/markup/test/browser_markup_dom_mutation_breakpoints.js b/devtools/client/inspector/markup/test/browser_markup_dom_mutation_breakpoints.js new file mode 100644 index 0000000000..b17864ea53 --- /dev/null +++ b/devtools/client/inspector/markup/test/browser_markup_dom_mutation_breakpoints.js @@ -0,0 +1,196 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +Services.scriptloader.loadSubScript( + "chrome://mochitests/content/browser/devtools/client/debugger/test/mochitest/shared-head.js", + this +); + +function toggleMutationBreakpoint(inspector) { + const allMenuItems = openContextMenuAndGetAllItems(inspector); + const attributeMenuItem = allMenuItems.find( + ({ id }) => id === "node-menu-mutation-breakpoint-attribute" + ); + attributeMenuItem.click(); +} + +// Test inspector markup view handling DOM mutation breakpoints icons +// The icon should display when a breakpoint exists for a given node +add_task(async function () { + const { inspector } = await openInspectorForURL( + "data:text/html;charset=utf-8,<h1>foo</h1><span>bar</span>" + ); + + await selectNode("span", inspector); + toggleMutationBreakpoint(inspector); + + const span = await getContainerForSelector("span", inspector); + const mutationMarker = span.tagLine.querySelector( + ".markup-tag-mutation-marker" + ); + + ok( + mutationMarker.classList.contains("has-mutations"), + "has-mutations class is present" + ); + + toggleMutationBreakpoint(inspector); + await waitFor(() => !mutationMarker.classList.contains("has-mutations")); + + ok(true, "has-mutations class is not present"); +}); + +// Test that the inspector markup view dom mutation breakpoint icon behaves +// correctly when disabled +add_task(async function () { + await pushPref("devtools.debugger.dom-mutation-breakpoints-visible", true); + const { inspector, toolbox } = await openInspectorForURL( + "data:text/html;charset=utf-8,<h1>foo</h1><span>bar</span>" + ); + + await selectNode("span", inspector); + toggleMutationBreakpoint(inspector); + + const span = await getContainerForSelector("span", inspector); + const mutationMarker = span.tagLine.querySelector( + ".markup-tag-mutation-marker" + ); + + ok( + mutationMarker.classList.contains("has-mutations"), + "has-mutations class is present" + ); + is( + mutationMarker.classList.contains("mutation-breakpoint-disabled"), + false, + "mutation-breakpoint-disabled class is not present" + ); + + info("Switch over to the debugger pane"); + await toolbox.selectTool("jsdebugger"); + + const dbg = createDebuggerContext(toolbox); + + const mutationItem = await waitForElement(dbg, "domMutationItem"); + mutationItem.scrollIntoView(); + + info("Disable the DOM mutation breakpoint"); + const checkbox = mutationItem.querySelector("input"); + checkbox.click(); + await waitFor(() => !checkbox.checked); + + await waitFor( + () => + mutationMarker.classList.contains("has-mutations") && + mutationMarker.classList.contains("mutation-breakpoint-disabled") + ); + + ok( + true, + "has-mutations and mutation-breakpoint-disabled classes are both present" + ); + + info("Re-enable the DOM mutation breakpoint"); + checkbox.click(); + await waitFor(() => checkbox.checked); + + await waitFor( + () => + mutationMarker.classList.contains("has-mutations") && + !mutationMarker.classList.contains("mutation-breakpoint-disabled") + ); + + ok( + true, + "has-mutation class is present, mutation-breakpoint-disabled is not present" + ); + + // Test re-enabling disabled dom mutation breakpoint from inspector + info("Disable the DOM mutation breakpoint"); + checkbox.click(); + await waitFor(() => !checkbox.checked); + + await waitFor( + () => + mutationMarker.classList.contains("has-mutations") && + mutationMarker.classList.contains("mutation-breakpoint-disabled") + ); + + ok( + true, + "has-mutations and mutation-breakpoint-disabled classes are both present" + ); + + info("Switch over to the inspector pane"); + await toolbox.selectTool("inspector"); + + toggleMutationBreakpoint(inspector); + await waitFor( + () => + mutationMarker.classList.contains("has-mutations") && + !mutationMarker.classList.contains("mutation-breakpoint-disabled") + ); + + ok( + true, + "has-mutation class is present, mutation-breakpoint-disabled is not present" + ); +}); + +// Test icon behavior with multiple breakpoints on the same node. +add_task(async function () { + await pushPref("devtools.debugger.dom-mutation-breakpoints-visible", true); + const { inspector, toolbox } = await openInspectorForURL( + "data:text/html;charset=utf-8,<h1>foo</h1><span>bar</span>" + ); + + await selectNode("span", inspector); + const span = await getContainerForSelector("span", inspector); + const mutationMarker = span.tagLine.querySelector( + ".markup-tag-mutation-marker" + ); + + info("Add 2 DOM mutation breakpoints"); + const allMenuItems = openContextMenuAndGetAllItems(inspector); + + const attributeMenuItem = allMenuItems.find( + item => item.id === "node-menu-mutation-breakpoint-attribute" + ); + attributeMenuItem.click(); + + const subtreeMenuItem = allMenuItems.find( + item => item.id === "node-menu-mutation-breakpoint-subtree" + ); + subtreeMenuItem.click(); + + info("Switch over to the debugger pane"); + await toolbox.selectTool("jsdebugger"); + + const dbg = createDebuggerContext(toolbox); + + info("Confirm that DOM mutation breakpoints exists"); + await waitForAllElements(dbg, "domMutationItem", 2, true); + + const mutationItem = await waitForElement(dbg, "domMutationItem"); + + mutationItem.scrollIntoView(); + + info("Disable 1 dom mutation breakpoint"); + const checkbox = mutationItem.querySelector("input"); + checkbox.click(); + await waitFor(() => !checkbox.checked); + + await waitFor( + () => + mutationMarker.classList.contains("has-mutations") && + !mutationMarker.classList.contains("mutation-breakpoint-disabled") + ); + + ok( + true, + "has-mutation class is present, mutation-breakpoint-disabled is not present" + ); +}); |