DevTools: [Elements] Implement "Copy CSS Path" context menu item for elements

Source/devtools/front_end/DOMAgent.js

 /*
  * Copyright (C) 2009, 2010 Google Inc. All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
@@ skipping 107 matching lines @@
 WebInspector.DOMNode.ShadowRootTypes = {
     UserAgent: "user-agent",
     Author: "author"
 }
 
 /**
  * @constructor
  * @param {string} value
  * @param {boolean} optimized
  */
-WebInspector.DOMNode.XPathStep = function(value, optimized)
+WebInspector.DOMNode.PathStep = function(value, optimized)
 {
     this.value = value;
     this.optimized = optimized;
 }
 
-WebInspector.DOMNode.XPathStep.prototype = {
+WebInspector.DOMNode.PathStep.prototype = {
     toString: function()
     {
         return this.value;
     }
 }
 
 WebInspector.DOMNode.prototype = {
     /**
      * @return {Array.<WebInspector.DOMNode>}
      */
@@ skipping 278 matching lines @@
         {
             if (!error)
                 InspectorFrontendHost.copyText(text);
         }
         DOMAgent.getOuterHTML(this.id, copy);
     },
 
     /**
      * @param {boolean} optimized
      */
+    copyCSSPath: function(optimized)
+    {
+        InspectorFrontendHost.copyText(this.cssPath(optimized));
+    },
+
+    /**
+     * @param {boolean} optimized
+     */
     copyXPath: function(optimized)
     {
         InspectorFrontendHost.copyText(this.xPath(optimized));
     },
 
     /**
      * @param {string} objectGroupId
      * @param {function(?Protocol.Error)=} callback
      */
     eventListeners: function(objectGroupId, callback)
@@ skipping 235 matching lines @@
      */
     isXMLNode: function()
     {
         return !!this.ownerDocument && !!this.ownerDocument.xmlVersion;
     },
 
     /**
      * @param {boolean} optimized
      * @return {string}
      */
+    cssPath: function(optimized)

[pfeldman, 2013/11/20 14:08:48]

This interesting little feature is about to become a large chunk of DOM agent
comparable to the whole code in size. It needs to be in a class that loads
lazily along with the elements panel. DOMPresentationUtils sounds like a good
match, but it loads with core today. Lets put it there for starters though.

[apavlov, 2013/11/20 14:23:19]

Sounds good.

+    {
+        if (this._nodeType !== Node.ELEMENT_NODE)
+            return "";
+
+        var steps = [];
+        var contextNode = this;
+        while (contextNode) {
+            var step = contextNode._cssPathValue(optimized);
+            if (!step)
+                break; // Error - bail out early.
+            steps.push(step);
+            if (step.optimized)
+                break;
+            contextNode = contextNode.parentNode;
+        }
+
+        steps.reverse();
+        return steps.join(" > ");
+    },
+
+    /**
+     * @param {boolean} optimized
+     * @return {WebInspector.DOMNode.PathStep}
+     */
+    _cssPathValue: function(optimized)
+    {
+        if (this._nodeType !== Node.ELEMENT_NODE)
+            return null;
+        if (optimized) {
+            var id = this.getAttribute("id");
+            if (id)
+                return new WebInspector.DOMNode.PathStep(idSelector(id), true);
+            var nodeNameLower = this._nodeName.toLowerCase();
+            if (nodeNameLower === "body" || nodeNameLower === "head" || nodeNameLower === "html")
+                return new WebInspector.DOMNode.PathStep(this.nodeNameInCorrectCase(), true);
+        }
+        var nodeName = this.nodeNameInCorrectCase();
+        var parent = this.parentNode;
+        if (!parent || parent._nodeType === Node.DOCUMENT_NODE)
+            return new WebInspector.DOMNode.PathStep(nodeName, true);
+
+        /**
+         * @param {WebInspector.DOMNode} node
+         * @return {Object.<string, boolean>}
+         */
+        function elementClassNames(node)
+        {
+            var classAttribute = node.getAttribute("class");
+            if (!classAttribute)
+                return {};
+
+            return classAttribute.split(/\s+/g).filter(Boolean).keySet();
+        }
+
+        /**
+         * @param {string} id
+         * @return {string}
+         */
+        function idSelector(id)
+        {
+            return "#" + escapeIdentifierIfNeeded(id);
+        }
+
+        /**
+         * @param {string} ident
+         * @return {string}
+         */
+        function escapeIdentifierIfNeeded(ident)
+        {
+            if (isCSSIdentifier(ident))
+                return ident;
+            var result = "";
+            var shouldEscapeFirst = /^(?:[0-9]|-[0-9-]?)/.test(ident);

[aandrey, 2013/11/20 12:49:02]

let's use similar regex to the one you already use:

var shouldEscapeFirst = !/^-?[a-zA-Z_]/.test(ident);

[apavlov, 2013/11/20 13:15:28]

This regex does not cover the case of an identifier starting with two dashes.

[aandrey, 2013/11/20 16:20:49]

in console:

/^(?:[0-9]|-[0-9-]?)/.test("--a")
!/^-?[a-zA-Z_]/.test("--a")

==> true
==> true

[apavlov, 2013/11/21 07:31:35]

Right. But I know what breaks. Valid unicode chars do. They do not match the
regex but should NOT be replaced.

+            var lastIndex = ident.length - 1;
+            for (var i = 0; i <= lastIndex; ++i) {
+                var c = ident[i];
+                result += ((!i && shouldEscapeFirst) || !isCSSIdentChar(c)) ? escapeAsciiChar(c, i === lastIndex) : c;

[aandrey, 2013/11/20 12:49:02]

nit: hard to read, but I could not simplify this neither. this is what I got:

return ident.replace(/./g, function(c, i) {
    return ((shouldEscapeFirst && i === 0) || !isCSSIdentChar(c)) ?
escapeAsciiChar(c, i === lastIndex) : c
});

[apavlov, 2013/11/20 13:15:28]

Fine with that, even though running this code might be an overkill (not too
efficient performance-wise)

+            }
+            return result;
+        }
+
+        /**
+         * @param {string} c
+         * @param {boolean} isLast
+         * @return {string}
+         */
+        function escapeAsciiChar(c, isLast)
+        {
+            return "\\" + toHexByte(c) + (isLast ? "" : " ");
+        }
+
+        /**
+         * @param {string} c
+         */
+        function toHexByte(c)
+        {
+            var hexByte = c.charCodeAt(0).toString(16);
+            if (hexByte.length === 1)
+              hexByte = "0" + hexByte;
+            return hexByte;
+        }
+
+        /**
+         * @param {string} c
+         * @return {boolean}
+         */
+        function isCSSIdentChar(c)
+        {
+            if (/[a-zA-Z0-9_-]/.test(c))

[aandrey, 2013/11/20 12:49:02]

/^[a-zA-Z0-9_-]$/

[apavlov, 2013/11/20 13:15:28]

Does it make much sense given that |c| is guaranteed to contain a single
character? This may turn the regex slower to run.

[aandrey, 2013/11/20 16:20:49]

I think adding ^ and $ restrictions should always hasten the regex, no?
Anyway its up to you.

[apavlov, 2013/11/21 07:31:35]

That's the case for multichar strings. In our case, the EOL check and additional
compilation will eat up precious CPU cycles :)

+                return true;
+            return c.charCodeAt(0) >= 0xA0;
+        }
+
+        /**
+         * @param {string} value
+         * @return {boolean}
+         */
+        function isCSSIdentifier(value)

[pfeldman, 2013/11/20 14:08:48]

Also, DOM should not know this much about CSS

[apavlov, 2013/11/20 14:23:19]

I'm fine with adding a lazy-loaded class. Or will DOMPresentationUtils work for
this, too?

+        {
+            return /^-?[a-zA-Z_][a-zA-Z0-9_-]*$/.test(value);
+        }
+
+        var uniqueClassNames = elementClassNames(this);
+        var uniqueClassNamesLeft = 0;
+        for (var name in uniqueClassNames)
+            ++uniqueClassNamesLeft;
+        var needsClassNames = false;
+        var needsNthChild = false;
+        var ownIndex = -1;
+        var siblings = parent.children();
+        for (var i = 0; (ownIndex === -1 || !needsNthChild) && i < siblings.length; ++i) {
+            var sibling = siblings[i];
+            if (sibling === this) {
+                ownIndex = i;
+                continue;
+            }
+            if (sibling.nodeNameInCorrectCase() !== nodeName)
+                continue;
+            if (!uniqueClassNamesLeft) {
+                needsNthChild = true;
+                continue;
+            }
+
+            needsClassNames = true;
+            var siblingClassNames = elementClassNames(sibling);
+            for (var siblingClass in siblingClassNames) {
+                if (!uniqueClassNames.hasOwnProperty(siblingClass))
+                    continue;
+                delete uniqueClassNames[siblingClass];
+                if (!--uniqueClassNamesLeft) {
+                    needsNthChild = true;
+                    break;
+                }
+            }
+        }
+
+        var result = nodeName;
+        if (needsClassNames) {
+            for (var className in uniqueClassNames)
+                result += "." + escapeIdentifierIfNeeded(className);
+        }
+        if (needsNthChild)
+            result += ":nth-child(" + (ownIndex + 1) + ")";
+        return new WebInspector.DOMNode.PathStep(result, false);
+    },
+
+    /**
+     * @param {boolean} optimized
+     * @return {string}
+     */
     xPath: function(optimized)
     {
         if (this._nodeType === Node.DOCUMENT_NODE)
             return "/";
 
         var steps = [];
         var contextNode = this;
         while (contextNode) {
             var step = contextNode._xPathValue(optimized);
             if (!step)
                 break; // Error - bail out early.
             steps.push(step);
             if (step.optimized)
                 break;
             contextNode = contextNode.parentNode;
         }
 
         steps.reverse();
         return (steps.length && steps[0].optimized ? "" : "/") + steps.join("/");
     },
 
     /**
      * @param {boolean} optimized
-     * @return {WebInspector.DOMNode.XPathStep}
+     * @return {WebInspector.DOMNode.PathStep}
      */
     _xPathValue: function(optimized)
     {
         var ownValue;
         var ownIndex = this._xPathIndex();
         if (ownIndex === -1)
             return null; // Error.
 
         switch (this._nodeType) {
         case Node.ELEMENT_NODE:
             if (optimized && this.getAttribute("id"))
-                return new WebInspector.DOMNode.XPathStep("//*[@id=\"" + this.getAttribute("id") + "\"]", true);
+                return new WebInspector.DOMNode.PathStep("//*[@id=\"" + this.getAttribute("id") + "\"]", true);
             ownValue = this._localName;
             break;
         case Node.ATTRIBUTE_NODE:
             ownValue = "@" + this._nodeName;
             break;
         case Node.TEXT_NODE:
         case Node.CDATA_SECTION_NODE:
             ownValue = "text()";
             break;
         case Node.PROCESSING_INSTRUCTION_NODE:
             ownValue = "processing-instruction()";
             break;
         case Node.COMMENT_NODE:
             ownValue = "comment()";
             break;
         case Node.DOCUMENT_NODE:
             ownValue = "";
             break;
         default:
             ownValue = "";
             break;
         }
 
         if (ownIndex > 0)
             ownValue += "[" + ownIndex + "]";
 
-        return new WebInspector.DOMNode.XPathStep(ownValue, this._nodeType === Node.DOCUMENT_NODE);
+        return new WebInspector.DOMNode.PathStep(ownValue, this._nodeType === Node.DOCUMENT_NODE);
     },
 
     /**
      * @return {number}
      */
     _xPathIndex: function()
     {
         // Returns -1 in case of error, 0 if no siblings matching the same expression, <XPath index among the same expression-matching sibling nodes> otherwise.
         function areNodesSimilar(left, right)
         {
@@ skipping 988 matching lines @@
     setInspectModeEnabled: function(enabled, inspectShadowDOM, config, callback)
     {
         DOMAgent.setInspectModeEnabled(enabled, inspectShadowDOM, config, callback);
     }
 }
 
 /**
  * @type {?WebInspector.DOMAgent}
  */
 WebInspector.domAgent = null;