Implement copy css path in elements panel.

Source/devtools/front_end/DOMAgent.js

Index: Source/devtools/front_end/DOMAgent.js
diff --git a/Source/devtools/front_end/DOMAgent.js b/Source/devtools/front_end/DOMAgent.js
index 45467bc785d2b124fa86413c1df121a4feaaf940..1061e1c13f5344a4908ba84e9d1227936fccd822 100644
--- a/Source/devtools/front_end/DOMAgent.js
+++ b/Source/devtools/front_end/DOMAgent.js
@@ -413,6 +413,30 @@ WebInspector.DOMNode.prototype = {
         DOMAgent.getOuterHTML(this.id, copy);
     },
 
+    _cssPathValue: function() {

[apavlov, 2013/10/15 07:55:11]

AFAIU, in general a "CSS path" should be as short as possible [yet unique]
(similar to the XPath "optimized" mode, where we bail out immediately if a node
has an ID).

[apavlov, 2013/10/15 07:55:11]

Please add a JSDoc

[ericduran, 2013/11/05 14:00:59]

Hmm, Same assumption but that wasn't what I was going for here. I was going for
what Firebug does which is gives you a full path to the css. Do we want bail
once we find an ID? 

On 2013/10/15 07:55:11, apavlov wrote:

[apavlov, 2013/11/05 14:05:51]

Hmm, I'm not sure why Firebug does this, but as I said, you might want to
introduce two modes, "full" and "optimized", the latter bailing out seeing an
#id. Then we could easily switch between the two variations.

+      if (!this._localName)
+        return "null";

[apavlov, 2013/10/15 07:55:11]

Blink indents are 4 spaces wide

[apavlov, 2013/10/15 07:55:11]

I believe this should be

return null;

+
+      var label = this.nodeNameInCorrectCase();
+
+      var id = this.getAttribute("id");
+      if (id)
+        label += "#" + id;
+
+      var className = this.getAttribute("class");
+      if (className) {

[apavlov, 2013/10/15 07:55:11]

This will break for <span class="  ">. You should check

if (className && className.trim())

+          var selector = "." + className.trim().replace(/\s+/g, ".");
+          label = label + selector;
+      }
+
+      return label;
+    },
+
+    copyCSSPath: function()
+    {
+      InspectorFrontendHost.copyText(this.cssPath());
+    },
+
     /**
      * @param {boolean} optimized
      */
@@ -421,6 +445,20 @@ WebInspector.DOMNode.prototype = {
         InspectorFrontendHost.copyText(this.xPath(optimized));
     },
 
+    cssPath: function() {
+

[apavlov, 2013/10/15 07:55:11]

You should check if the node is Node.ELEMENT_NODE up front, and bail out early.

+      var selectors = [],
+          contextNode = this;

[apavlov, 2013/10/15 07:55:11]

DevTools use a "var" per each declaration. But in this case you can move "var
contextNode = this" into the "for" init-clause.

+      for (; contextNode && contextNode._nodeType == Node.ELEMENT_NODE; contextNode = contextNode.parentNode) {
+          var selector = contextNode._cssPathValue();

[apavlov, 2013/10/15 07:55:11]

You should check if the selector is valid (i.e. !== null). Also, you can stop
once a pure #id selector is encountered right?

+          selectors.push(selector);
+      }
+
+      selectors.reverse();
+      return selectors.length ? selectors.join(" ") : "";

[apavlov, 2013/10/15 07:55:11]

If you implement the early bailout above, you should not need this additional
check.

+
+    },
+
     /**
      * @param {string} objectGroupId
      * @param {function(?Protocol.Error)=} callback