Bug 1539265 - Handle ::marker pseudo-elements on shadow roots in walker.js. r=jdescottes

At the moment when devtools.inspector.showAllAnonymousContent is true shadow
hosts with ::marker and ::before pseudos will stop showing the ::before and
won't show the ::marker either.

Differential Revision: https://phabricator.services.mozilla.com/D25058

--HG--
extra : moz-landing-system : lando

devtools/client/inspector/markup/test/browser.ini

@@ -201,6 +201,7 @@ subsuite = clipboard
 [browser_markup_shadowdom_delete.js]
 [browser_markup_shadowdom_dynamic.js]
 [browser_markup_shadowdom_hover.js]
+[browser_markup_shadowdom_marker_and_before_pseudos.js]
 [browser_markup_shadowdom_maxchildren.js]
 [browser_markup_shadowdom_mutations_shadow.js]
 [browser_markup_shadowdom_navigation.js]

devtools/client/inspector/markup/test/browser_markup_shadowdom_marker_and_before_pseudos.js

@@ -0,0 +1,144 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+requestLongerTimeout(1);
+
+// Test a few static pages using webcomponents with ::marker and ::before
+// pseudos and check that they are displayed as expected in the markup view.
+
+const SHOWANON_PREF = "devtools.inspector.showAllAnonymousContent";
+
+const TEST_DATA = [
+  {
+    // Test that ::before on an empty shadow host is displayed when the host
+    // has a ::marker.
+    title: "::before after ::marker, empty node",
+    url: `data:text/html;charset=utf-8,
+      <style>
+        test-component { display: list-item; }
+        test-component::before { content: "before-host" }
+      </style>
+
+      <test-component></test-component>
+
+      <script>
+        'use strict';
+        customElements.define('test-component', class extends HTMLElement {
+          constructor() {
+            super();
+            let shadowRoot = this.attachShadow({mode: "#MODE#"});
+          }
+        });
+      </script>`,
+    tree: `
+      test-component
+        #shadow-root
+        ::before`,
+    anonTree: `
+      test-component
+        #shadow-root
+        _moz_generated_content_marker
+        ::before`,
+
+  }, {
+    // Test ::before on a shadow host with content is displayed when the host
+    // has a ::marker.
+    title: "::before after ::marker, non-empty node",
+    url: `data:text/html;charset=utf-8,
+      <style>
+        test-component { display: list-item }
+        test-component::before { content: "before-host" }
+      </style>
+
+      <test-component>
+        <div class="light-dom"></div>
+      </test-component>
+
+      <script>
+        "use strict";
+        customElements.define("test-component", class extends HTMLElement {
+          constructor() {
+            super();
+            let shadowRoot = this.attachShadow({mode: "#MODE#"});
+            shadowRoot.innerHTML = "<slot>default content</slot>";
+          }
+        });
+      </script>`,
+    tree: `
+      test-component
+        #shadow-root
+          slot
+            div!slotted
+        ::before
+        class="light-dom"`,
+    anonTree: `
+      test-component
+        #shadow-root
+          slot
+            div!slotted
+        _moz_generated_content_marker
+        ::before
+        class="light-dom"`,
+  }, {
+    // Test just ::marker on a shadow host
+    title: "just ::marker, no ::before",
+    url: `data:text/html;charset=utf-8,
+      <style>
+        test-component { display: list-item }
+      </style>
+
+      <test-component></test-component>
+
+      <script>
+        "use strict";
+        customElements.define("test-component", class extends HTMLElement {
+          constructor() {
+            super();
+            let shadowRoot = this.attachShadow({mode: "#MODE#"});
+          }
+        });
+      </script>`,
+    tree: `
+      test-component
+        #shadow-root`,
+    anonTree: `
+      test-component
+        #shadow-root
+        _moz_generated_content_marker`,
+  },
+];
+
+for (const {url, tree, anonTree, title} of TEST_DATA) {
+  // Test each configuration in both open and closed modes
+  add_task(async function() {
+    info(`Testing: [${title}] in OPEN mode`);
+    const {inspector, tab} = await openInspectorForURL(url.replace(/#MODE#/g, "open"));
+    await assertMarkupViewAsTree(tree, "test-component", inspector);
+    await removeTab(tab);
+  });
+  add_task(async function() {
+    info(`Testing: [${title}] in CLOSED mode`);
+    const {inspector, tab} = await openInspectorForURL(url.replace(/#MODE#/g, "closed"));
+    await assertMarkupViewAsTree(tree, "test-component", inspector);
+    await removeTab(tab);
+  });
+  add_task(async function() {
+    await pushPref(SHOWANON_PREF, true);
+    info(`Testing: [${title}] in OPEN mode with showAllAnonymousContent`);
+    const {inspector, tab} = await openInspectorForURL(url.replace(/#MODE#/g, "open"));
+    await assertMarkupViewAsTree(anonTree, "test-component", inspector);
+    await removeTab(tab);
+    await pushPref(SHOWANON_PREF, false);
+  });
+  add_task(async function() {
+    await pushPref(SHOWANON_PREF, true);
+    info(`Testing: [${title}] in CLOSED mode with showAllAnonymousContent`);
+    const {inspector, tab} = await openInspectorForURL(url.replace(/#MODE#/g, "closed"));
+    await assertMarkupViewAsTree(anonTree, "test-component", inspector);
+    await removeTab(tab);
+    await pushPref(SHOWANON_PREF, false);
+  });
+}

devtools/server/actors/inspector/walker.js

@@ -865,10 +865,14 @@ var WalkerActor = protocol.ActorClassWithSpec(walkerSpec, {
     }
 
     if (shadowHost) {
-      // Use anonymous walkers to fetch ::before / ::after pseudo elements
+      // Use anonymous walkers to fetch ::marker / ::before / ::after pseudo
+      // elements
       const firstChildWalker = this.getDocumentWalker(node.rawNode);
       const first = firstChildWalker.firstChild();
-      const hasBefore = first && first.nodeName === "_moz_generated_content_before";
+      const hasMarker = first && first.nodeName === "_moz_generated_content_marker";
+      const maybeBeforeNode = hasMarker ? firstChildWalker.nextSibling() : first;
+      const hasBefore = maybeBeforeNode &&
+        maybeBeforeNode.nodeName === "_moz_generated_content_before";
 
       const lastChildWalker = this.getDocumentWalker(node.rawNode);
       const last = lastChildWalker.lastChild();
@@ -877,8 +881,10 @@ var WalkerActor = protocol.ActorClassWithSpec(walkerSpec, {
       nodes = [
         // #shadow-root
         ...(hideShadowRoot ? [] : [node.rawNode.openOrClosedShadowRoot]),
+        // ::marker
+        ...(hasMarker ? [first] : []),
         // ::before
-        ...(hasBefore ? [first] : []),
+        ...(hasBefore ? [maybeBeforeNode] : []),
         // shadow host direct children
         ...nodes,
         // native anonymous content for UA widgets