/* 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,
foo
bar"
);
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,foo
bar"
);
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,foo
bar"
);
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"
);
});