Bug 1539265 - Make ::marker pseudo-elements always visible in the markup view. r=jdescottes,mbalfanz,pbro
☠☠ backed out by 85c0179c84be ☠ ☠
authorIan Moody <moz-ian@perix.co.uk>
Mon, 01 Apr 2019 21:46:11 +0000
changeset 467487 8206b880f9ecf19c5933efe72addf9c350977199
parent 467486 be9f5f73bdfec24cef79d9802f0b7275241d0052
child 467488 ccc1a9b4ea13fa06f5f4b6b024a638401aab9098
push id112626
push usercbrindusan@mozilla.com
push dateTue, 02 Apr 2019 08:40:51 +0000
treeherdermozilla-inbound@ea0977445697 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes, mbalfanz, pbro
bugs1539265
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1539265 - Make ::marker pseudo-elements always visible in the markup view. r=jdescottes,mbalfanz,pbro Instead of only when setting devtools.inspector.showAllAnonymousContent. Differential Revision: https://phabricator.services.mozilla.com/D25166
devtools/client/inspector/markup/test/browser_markup_accessibility_semantics.js
devtools/client/inspector/markup/test/browser_markup_dragdrop_before_marker_pseudo.js
devtools/client/inspector/markup/test/browser_markup_shadowdom_marker_and_before_pseudos.js
devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js
devtools/client/inspector/rules/test/browser_rules_pseudo-element_02.js
devtools/server/actors/inspector/utils.js
--- a/devtools/client/inspector/markup/test/browser_markup_accessibility_semantics.js
+++ b/devtools/client/inspector/markup/test/browser_markup_accessibility_semantics.js
@@ -9,28 +9,28 @@
 
 const TOP_CONTAINER_LEVEL = 3;
 
 add_task(async function() {
   const {inspector} = await openInspectorForURL(`
     data:text/html;charset=utf-8,
     <h1>foo</h1>
     <span>bar</span>
-    <ul>
-      <li></li>
-    </ul>`);
+    <dl>
+      <dt></dt>
+    </dl>`);
   const markup = inspector.markup;
   const doc = markup.doc;
   const win = doc.defaultView;
 
   const rootElt = markup.getContainer(markup._rootNode).elt;
   const bodyContainer = await getContainerForSelector("body", inspector);
   const spanContainer = await getContainerForSelector("span", inspector);
   const headerContainer = await getContainerForSelector("h1", inspector);
-  const listContainer = await getContainerForSelector("ul", inspector);
+  const listContainer = await getContainerForSelector("dl", inspector);
 
   // Focus on the tree element.
   rootElt.focus();
 
   // Test tree related semantics
   is(rootElt.getAttribute("role"), "tree",
     "Root container should have tree semantics");
   is(rootElt.getAttribute("aria-dropeffect"), "none",
@@ -66,26 +66,26 @@ add_task(async function() {
   ok(!spanContainer.tagLine.hasAttribute("aria-expanded"),
     "Non expandable tree items should not have aria-expanded attribute");
   ok(!headerContainer.tagLine.hasAttribute("aria-expanded"),
     "Non expandable tree items should not have aria-expanded attribute");
   is(listContainer.tagLine.getAttribute("aria-expanded"), "false",
     "Closed tree item should have aria-expanded unset");
 
   info("Selecting and expanding list container");
-  await selectNode("ul", inspector);
+  await selectNode("dl", inspector);
   EventUtils.synthesizeKey("VK_RIGHT", {}, win);
   await waitForMultipleChildrenUpdates(inspector);
 
   is(rootElt.getAttribute("aria-activedescendant"),
     listContainer.tagLine.getAttribute("id"),
     "Active descendant should not be set to list container tagLine");
   is(listContainer.tagLine.getAttribute("aria-expanded"), "true",
     "Open tree item should have aria-expanded set");
-  const listItemContainer = await getContainerForSelector("li", inspector);
+  const listItemContainer = await getContainerForSelector("dt", inspector);
   is(listItemContainer.tagLine.getAttribute("aria-level"),
     TOP_CONTAINER_LEVEL + 1,
     "Grand child container tagLine should have nested level up to date");
   is(listItemContainer.children.getAttribute("role"), "presentation",
     "Container with no children should have its children element ignored by " +
     "accessibility");
 
   info("Collapsing list container");
--- a/devtools/client/inspector/markup/test/browser_markup_dragdrop_before_marker_pseudo.js
+++ b/devtools/client/inspector/markup/test/browser_markup_dragdrop_before_marker_pseudo.js
@@ -2,20 +2,18 @@
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test drag and dropping a node before a ::marker pseudo.
 
 const TEST_URL = URL_ROOT + "doc_markup_dragdrop.html";
-const SHOWANON_PREF = "devtools.inspector.showAllAnonymousContent";
 
 add_task(async function() {
-  await pushPref(SHOWANON_PREF, true);
   const {inspector} = await openInspectorForURL(TEST_URL);
 
   info("Expand #list node");
   const parentFront = await getNodeFront("#list", inspector);
   await inspector.markup.expandNode(parentFront.parentNode());
   await inspector.markup.expandNode(parentFront);
   await waitForMultipleChildrenUpdates(inspector);
 
--- a/devtools/client/inspector/markup/test/browser_markup_shadowdom_marker_and_before_pseudos.js
+++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_marker_and_before_pseudos.js
@@ -4,18 +4,16 @@
 
 "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; }
@@ -31,20 +29,16 @@ const TEST_DATA = [
             super();
             let shadowRoot = this.attachShadow({mode: "#MODE#"});
           }
         });
       </script>`,
     tree: `
       test-component
         #shadow-root
-        ::before`,
-    anonTree: `
-      test-component
-        #shadow-root
         ::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,
@@ -67,23 +61,16 @@ const TEST_DATA = [
           }
         });
       </script>`,
     tree: `
       test-component
         #shadow-root
           slot
             div!slotted
-        ::before
-        class="light-dom"`,
-    anonTree: `
-      test-component
-        #shadow-root
-          slot
-            div!slotted
         ::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>
@@ -98,47 +85,28 @@ const TEST_DATA = [
           constructor() {
             super();
             let shadowRoot = this.attachShadow({mode: "#MODE#"});
           }
         });
       </script>`,
     tree: `
       test-component
-        #shadow-root`,
-    anonTree: `
-      test-component
         #shadow-root
         ::marker`,
   },
 ];
 
-for (const {url, tree, anonTree, title} of TEST_DATA) {
+for (const {url, tree, 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);
-  });
 }
--- a/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js
+++ b/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js
@@ -3,21 +3,19 @@
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that pseudoelements are displayed correctly in the rule view
 
 const TEST_URI = URL_ROOT + "doc_pseudoelement.html";
 const PSEUDO_PREF = "devtools.inspector.show_pseudo_elements";
-const SHOWANON_PREF = "devtools.inspector.showAllAnonymousContent";
 
 add_task(async function() {
   await pushPref(PSEUDO_PREF, true);
-  await pushPref(SHOWANON_PREF, true);
 
   await addTab(TEST_URI);
   const {inspector, view} = await openRuleView();
 
   await testTopLeft(inspector, view);
   await testTopRight(inspector, view);
   await testBottomRight(inspector, view);
   await testBottomLeft(inspector, view);
--- a/devtools/client/inspector/rules/test/browser_rules_pseudo-element_02.js
+++ b/devtools/client/inspector/rules/test/browser_rules_pseudo-element_02.js
@@ -2,21 +2,19 @@
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that pseudoelements are displayed correctly in the markup view.
 
 const TEST_URI = URL_ROOT + "doc_pseudoelement.html";
-const SHOWANON_PREF = "devtools.inspector.showAllAnonymousContent";
 
 add_task(async function() {
   await addTab(TEST_URI);
-  await pushPref(SHOWANON_PREF, true);
   const {inspector} = await openRuleView();
 
   const node = await getNodeFront("#topleft", inspector);
   const children = await inspector.markup.walker.children(node);
 
   is(children.nodes.length, 3, "Element has correct number of children");
 
   const beforeElement = children.nodes[0];
--- a/devtools/server/actors/inspector/utils.js
+++ b/devtools/server/actors/inspector/utils.js
@@ -55,23 +55,24 @@ function isInXULDocument(el) {
   const doc = nodeDocument(el);
   return doc &&
          doc.documentElement &&
          doc.documentElement.namespaceURI === XUL_NS;
 }
 
 /**
  * This DeepTreeWalker filter skips whitespace text nodes and anonymous
- * content with the exception of ::before and ::after and anonymous content
- * in XUL document (needed to show all elements in the browser toolbox).
+ * content with the exception of ::marker, ::before, and ::after, plus anonymous
+ * content in XUL document (needed to show all elements in the browser toolbox).
  */
 function standardTreeWalkerFilter(node) {
-  // ::before and ::after are native anonymous content, but we always
+  // ::marker, ::before, and ::after are native anonymous content, but we always
   // want to show them
-  if (node.nodeName === "_moz_generated_content_before" ||
+  if (node.nodeName === "_moz_generated_content_marker" ||
+      node.nodeName === "_moz_generated_content_before" ||
       node.nodeName === "_moz_generated_content_after") {
     return nodeFilterConstants.FILTER_ACCEPT;
   }
 
   // Ignore empty whitespace text nodes that do not impact the layout.
   if (isWhitespaceTextNode(node)) {
     return nodeHasSize(node)
            ? nodeFilterConstants.FILTER_ACCEPT