/* Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ */ "use strict"; // Test that markup-containers in the markup-view do flash when their // corresponding DOM nodes mutate // Have to use the same timer functions used by the inspector. // eslint-disable-next-line mozilla/no-redeclare-with-import-autofix const { clearTimeout } = ChromeUtils.importESModule( "resource://gre/modules/Timer.sys.mjs" ); const TEST_URL = URL_ROOT + "doc_markup_flashing.html"; // The test data contains a list of mutations to test. // Each item is an object: // - desc: a description of the test step, for better logging // - mutate: a generator function that should make changes to the content DOM // - attribute: if set, the test will expect the corresponding attribute to // flash instead of the whole node // - flashedNode: [optional] the css selector of the node that is expected to // flash in the markup-view as a result of the mutation. // If missing, the rootNode (".list") will be expected to flash const TEST_DATA = [ { desc: "Adding a new node should flash the new node", async mutate() { await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => { const newLi = content.document.createElement("LI"); newLi.textContent = "new list item"; content.document.querySelector(".list").appendChild(newLi); }); }, flashedNode: ".list li:nth-child(3)", }, { desc: "Removing a node should flash its parent", async mutate() { await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => { const root = content.document.querySelector(".list"); root.removeChild(root.lastElementChild); }); }, }, { desc: "Re-appending an existing node should only flash this node", async mutate() { await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => { const root = content.document.querySelector(".list"); root.appendChild(root.firstElementChild); }); }, flashedNode: ".list .item:last-child", }, { desc: "Adding an attribute should flash the attribute", attribute: "test-name", async mutate() { await setContentPageElementAttribute( ".list", "test-name", "value-" + Date.now() ); }, }, { desc: "Adding an attribute with css reserved characters should flash the " + "attribute", attribute: "one:two", async mutate() { await setContentPageElementAttribute( ".list", "one:two", "value-" + Date.now() ); }, }, { desc: "Editing an attribute should flash the attribute", attribute: "class", async mutate() { await setContentPageElementAttribute( ".list", "class", "list value-" + Date.now() ); }, }, { desc: "Multiple changes to an attribute should flash the attribute", attribute: "class", async mutate() { await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => { const root = content.document.querySelector(".list"); root.removeAttribute("class"); root.setAttribute("class", "list value-" + Date.now()); root.setAttribute("class", "list value-" + Date.now()); root.removeAttribute("class"); root.setAttribute("class", "list value-" + Date.now()); root.setAttribute("class", "list value-" + Date.now()); }); }, }, { desc: "Removing an attribute should flash the node", async mutate() { await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => { const root = content.document.querySelector(".list"); root.removeAttribute("class"); }); }, }, ]; add_task(async function () { await pushPref("privacy.reduceTimerPrecision", false); const { inspector } = await openInspectorForURL(TEST_URL); // Make sure mutated nodes flash for a very long time so we can more easily // assert they do inspector.markup.CONTAINER_FLASHING_DURATION = 1000 * 60 * 60; info("Getting the