DevTools: Adds option to copy unoptimized XPath.

The current 'Copy XPath' context menu option defaults to providing the user with
the optimized XPath. This CL adds an extra menu option to get the full,
unoptimized, XPath value.

Bug: 933027
Change-Id: I7ea52896291aea22b00d0ca56258808482883cdb
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1669365
Commit-Queue: Paul Lewis <aerotwist@chromium.org>
Reviewed-by: Erik Luo <luoe@chromium.org>
Cr-Commit-Position: refs/heads/master@{#672477}

third_party/blink/renderer/devtools/front_end/elements/ElementsTreeElement.js

@@ -525,8 +525,11 @@ Elements.ElementsTreeElement = class extends UI.TreeElement {
       section.appendItem(
           Common.UIString('Copy JS path'), this._copyJSPath.bind(this), !Elements.DOMPath.canGetJSPath(this._node));
     }
-    if (!isShadowRoot)
+    if (!isShadowRoot) {
       section.appendItem(Common.UIString('Copy XPath'), this._copyXPath.bind(this));
+      section.appendItem(ls`Copy full XPath`, this._copyFullXPath.bind(this));
+    }
+
     if (!isShadowRoot) {
       menuItem = copyMenu.clipboardSection().appendItem(
           Common.UIString('Cut element'), treeOutline.performCopyOrCut.bind(treeOutline, true, this._node),
@@ -1632,6 +1635,10 @@ Elements.ElementsTreeElement = class extends UI.TreeElement {
     InspectorFrontendHost.copyText(Elements.DOMPath.xPath(this._node, true));
   }
 
+  _copyFullXPath() {
+    InspectorFrontendHost.copyText(Elements.DOMPath.xPath(this._node, false));
+  }
+
   _highlightSearchResults() {
     if (!this._searchQuery || !this._searchHighlightsVisible)
       return;

third_party/blink/renderer/devtools/front_end/elements/elements_strings.grdp

@@ -195,6 +195,9 @@
   <message name="IDS_DEVTOOLS_91d17eff6a1529e8a4f67a5aa4cabec7" desc="">
     No matching property
   </message>
+  <message name="IDS_DEVTOOLS_97d28fbc573f9f331f5b1886b5c1eeef" desc="">
+    Copy full XPath
+  </message>
   <message name="IDS_DEVTOOLS_9a0364b9e99bb480dd25e1f0284c8555" desc="">
     content
   </message>

third_party/blink/web_tests/http/tests/devtools/elements/node-xpath-expected.txt

 Tests node xPath construction
 
-'#document':'' - '/'
-  '#comment':' Pre-comment ' - '/comment()[1]'
-  'html':'' - '/html'
-    'head':'' - '/html/head'
-      'script':'' - '/html/head/script'
-        '#text':'\n// Comment\n//' - '/html/head/script/text()[1]'
-        '#cdata-section':'\nfunction f()\n{\n    document.write("<");\n}\n//' - '/html/head/script/text()[2]'
-    'body':'' - '/html/body'
-      'div':'' - '//*[@id="id1"]'
-      'div':'' - '//*[@id="id2"]'
-      'div':'' - '//*[@id="container"]'
-        'div':'' - '//*[@id="id3"]'
-          '#text':'3 Prefix ' - '//*[@id="id3"]/text()[1]'
-          '#cdata-section':'<greeting>Hello, world!</greeting>' - '//*[@id="id3"]/text()[2]'
-          '#text':' Suffix' - '//*[@id="id3"]/text()[3]'
-        'div':'' - '//*[@id="id4"]'
-          '#text':'4' - '//*[@id="id4"]/text()'
-        'div':'' - '//*[@id="id5"]'
-          '#text':'5' - '//*[@id="id5"]/text()'
-        'div':'' - '//*[@id="id6"]'
-          '#text':'6' - '//*[@id="id6"]/text()'
-  '#comment':' Post-comment ' - '/comment()[2]'
+'#document':'' - '/' - '/'
+  '#comment':' Pre-comment ' - '/comment()[1]' - '/comment()[1]'
+  'html':'' - '/html' - '/html'
+    'head':'' - '/html/head' - '/html/head'
+      'script':'' - '/html/head/script' - '/html/head/script'
+        '#text':'\n// Comment\n//' - '/html/head/script/text()[1]' - '/html/head/script/text()[1]'
+        '#cdata-section':'\nfunction f()\n{\n    document.write("<");\n}\n//' - '/html/head/script/text()[2]' - '/html/head/script/text()[2]'
+    'body':'' - '/html/body' - '/html/body'
+      'div':'' - '//*[@id="id1"]' - '/html/body/div[1]'
+      'div':'' - '//*[@id="id2"]' - '/html/body/div[2]'
+      'div':'' - '//*[@id="container"]' - '/html/body/div[3]'
+        'div':'' - '//*[@id="id3"]' - '/html/body/div[3]/div[1]'
+          '#text':'3 Prefix ' - '//*[@id="id3"]/text()[1]' - '/html/body/div[3]/div[1]/text()[1]'
+          '#cdata-section':'<greeting>Hello, world!</greeting>' - '//*[@id="id3"]/text()[2]' - '/html/body/div[3]/div[1]/text()[2]'
+          '#text':' Suffix' - '//*[@id="id3"]/text()[3]' - '/html/body/div[3]/div[1]/text()[3]'
+        'div':'' - '//*[@id="id4"]' - '/html/body/div[3]/div[2]'
+          '#text':'4' - '//*[@id="id4"]/text()' - '/html/body/div[3]/div[2]/text()'
+        'div':'' - '//*[@id="id5"]' - '/html/body/div[3]/div[3]'
+          '#text':'5' - '//*[@id="id5"]/text()' - '/html/body/div[3]/div[3]/text()'
+        'div':'' - '//*[@id="id6"]' - '/html/body/div[3]/div[4]'
+          '#text':'6' - '//*[@id="id6"]/text()' - '/html/body/div[3]/div[4]/text()'
+  '#comment':' Post-comment ' - '/comment()[2]' - '/comment()[2]'
 

third_party/blink/web_tests/http/tests/devtools/elements/node-xpath.js

@@ -36,7 +36,8 @@
 
   function dumpNodeData(node, prefix) {
     var result = prefix + '\'' + node.nodeName() + '\':\'' + node.nodeValue() + '\' - \'' +
-        Elements.DOMPath.xPath(node, true) + '\'';
+        Elements.DOMPath.xPath(node, true) + '\' - \'' +
+        Elements.DOMPath.xPath(node, false) + '\'';
     TestRunner.addResult(result.replace(/\r?\n/g, '\\n'));
   }
 })();