1 files changed, 107 insertions, 0 deletions
diff --git a/devtools/client/inspector/test/browser_inspector_breadcrumbs_shadowdom.js b/devtools/client/inspector/test/browser_inspector_breadcrumbs_shadowdom.js
new file mode 100644
index 0000000000..80540a528d
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_breadcrumbs_shadowdom.js
@@ -0,0 +1,107 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test that the breadcrumbs widget refreshes correctly when there are markup
+// mutations, even if the currently selected node is a slotted node in the shadow DOM.
+
+const TEST_URL = `data:text/html;charset=utf-8,
+  <test-component>
+    <div slot="slot1" id="el1">content</div>
+  </test-component>
+
+  <script>
+    'use strict';
+    customElements.define('test-component', class extends HTMLElement {
+      constructor() {
+        super();
+        let shadowRoot = this.attachShadow({mode: 'open'});
+        shadowRoot.innerHTML = '<slot class="slot-class" name="slot1"></slot>';
+      }
+    });
+  </script>`;
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const { markup } = inspector;
+  const breadcrumbs = inspector.panelDoc.getElementById(
+    "inspector-breadcrumbs"
+  );
+
+  info("Find and expand the test-component shadow DOM host.");
+  const hostFront = await getNodeFront("test-component", inspector);
+  const hostContainer = markup.getContainer(hostFront);
+  await expandContainer(inspector, hostContainer);
+
+  info("Expand the shadow root");
+  const shadowRootContainer = hostContainer.getChildContainers()[0];
+  await expandContainer(inspector, shadowRootContainer);
+
+  const slotContainer = shadowRootContainer.getChildContainers()[0];
+
+  info("Select the slot node and wait for the breadcrumbs update");
+  const slotNodeFront = slotContainer.node;
+  let onBreadcrumbsUpdated = inspector.once("breadcrumbs-updated");
+  inspector.selection.setNodeFront(slotNodeFront);
+  await onBreadcrumbsUpdated;
+
+  checkBreadcrumbsContent(breadcrumbs, [
+    "html",
+    "body",
+    "test-component",
+    "#shadow-root",
+    "slot.slot-class",
+  ]);
+
+  info("Expand the slot");
+  await expandContainer(inspector, slotContainer);
+
+  const slotChildContainers = slotContainer.getChildContainers();
+  is(slotChildContainers.length, 1, "Expecting 1 slotted child");
+
+  info("Select the slotted node and wait for the breadcrumbs update");
+  const slottedNodeFront = slotChildContainers[0].node;
+  onBreadcrumbsUpdated = inspector.once("breadcrumbs-updated");
+  inspector.selection.setNodeFront(slottedNodeFront);
+  await onBreadcrumbsUpdated;
+
+  checkBreadcrumbsContent(breadcrumbs, [
+    "html",
+    "body",
+    "test-component",
+    "div#el1",
+  ]);
+
+  info(
+    "Update the classname of the real element and wait for the breadcrumbs update"
+  );
+  onBreadcrumbsUpdated = inspector.once("breadcrumbs-updated");
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () {
+    content.document.getElementById("el1").setAttribute("class", "test");
+  });
+  await onBreadcrumbsUpdated;
+
+  checkBreadcrumbsContent(breadcrumbs, [
+    "html",
+    "body",
+    "test-component",
+    "div#el1.test",
+  ]);
+});
+
+function checkBreadcrumbsContent(breadcrumbs, selectors) {
+  info("Check the output of the breadcrumbs widget");
+  const container = breadcrumbs.querySelector(".html-arrowscrollbox-inner");
+  is(
+    container.childNodes.length,
+    selectors.length,
+    "Correct number of buttons"
+  );
+  for (let i = 0; i < container.childNodes.length; i++) {
+    is(
+      container.childNodes[i].textContent,
+      selectors[i],
+      "Text content for button " + i + " is correct"
+    );
+  }
+}