Bug 1449972 - part3: Add shadowdom support to getCssPath, getXPath;r=bgrins

MozReview-Commit-ID: 1NqIOSqY4Gg

--HG--
extra : rebase_source : 66425564ef9efec7ff7a599d80da3de6d1c64269

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

@@ -167,6 +167,8 @@ skip-if = e10s # Bug 1036409 - The last selected node isn't reselected
 [browser_markup_shadowdom.js]
 [browser_markup_shadowdom_clickreveal.js]
 [browser_markup_shadowdom_clickreveal_scroll.js]
+[browser_markup_shadowdom_copy_paths.js]
+subsuite = clipboard
 [browser_markup_shadowdom_delete.js]
 [browser_markup_shadowdom_dynamic.js]
 [browser_markup_shadowdom_hover.js]

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

@@ -0,0 +1,66 @@
+/* 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";
+
+// Test that using copyCssPath, copyXPath and copyUniqueSelector with an element under a
+// shadow root returns values relevant to the selected element, and relative to the shadow
+// root.
+
+const TEST_URL = `data:text/html;charset=utf-8,
+  <test-component></test-component>
+
+  <script>
+    'use strict';
+    customElements.define('test-component', class extends HTMLElement {
+      constructor() {
+        super();
+        let shadowRoot = this.attachShadow({mode: 'open'});
+        shadowRoot.innerHTML = \`
+          <div id="el1">
+            <span></span>
+            <span></span>
+            <span></span>
+          </div>\`;
+      }
+    });
+  </script>`;
+
+add_task(async function() {
+  await enableWebComponents();
+
+  const {inspector} = await openInspectorForURL(TEST_URL);
+  const {markup} = inspector;
+
+  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);
+
+  info("Select the div under the shadow root");
+  const divContainer = shadowRootContainer.getChildContainers()[0];
+  await selectNode(divContainer.node, inspector);
+
+  info("Check the copied values for the various copy*Path helpers");
+  await waitForClipboardPromise(() => inspector.copyXPath(), '//*[@id="el1"]');
+  await waitForClipboardPromise(() => inspector.copyCssPath(), "div#el1");
+  await waitForClipboardPromise(() => inspector.copyUniqueSelector(), "#el1");
+
+  info("Expand the div");
+  await expandContainer(inspector, divContainer);
+
+  info("Select the third span");
+  const spanContainer = divContainer.getChildContainers()[2];
+  await selectNode(spanContainer.node, inspector);
+
+  info("Check the copied values for the various copy*Path helpers");
+  await waitForClipboardPromise(() => inspector.copyXPath(), "/div/span[3]");
+  await waitForClipboardPromise(() => inspector.copyCssPath(), "div#el1 span");
+  await waitForClipboardPromise(() => inspector.copyUniqueSelector(),
+    "#el1 > span:nth-child(3)");
+});

toolkit/modules/css-selector.js

@@ -105,7 +105,7 @@ const findCssSelector = function(ele) {
   ele = node;
 
   if (!containingDocOrShadow || !containingDocOrShadow.contains(ele)) {
-    // findCssSelector received element not inside document.
+    // findCssSelector received element not inside container.
     return "";
   }
 
@@ -213,10 +213,10 @@ const findAllCssSelectors = function(node) {
  * node to the element.
  */
 function getCssPath(ele) {
-  ele = getRootBindingParent(ele);
-  const document = ele.ownerDocument;
-  if (!document || !document.contains(ele)) {
-    // getCssPath received element not inside document.
+  const { node, containingDocOrShadow } = findNodeAndContainer(ele);
+  ele = node;
+  if (!containingDocOrShadow || !containingDocOrShadow.contains(ele)) {
+    // getCssPath received element not inside container.
     return "";
   }
 
@@ -264,10 +264,10 @@ function getCssPath(ele) {
  * @returns a string that can be used as an XPath to find the element uniquely.
  */
 function getXPath(ele) {
-  ele = getRootBindingParent(ele);
-  const document = ele.ownerDocument;
-  if (!document || !document.contains(ele)) {
-    // getXPath received element not inside document.
+  const { node, containingDocOrShadow } = findNodeAndContainer(ele);
+  ele = node;
+  if (!containingDocOrShadow || !containingDocOrShadow.contains(ele)) {
+    // getXPath received element not inside container.
     return "";
   }