Implement copy css path in elements panel.

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 395 matching lines @@
     copyNode: function()
     {
         function copy(error, text)
         {
             if (!error)
                 InspectorFrontendHost.copyText(text);
         }
         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
      */
     copyXPath: function(optimized)
     {
         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
      */
     eventListeners: function(objectGroupId, callback)
     {
         DOMAgent.getEventListenersForNode(this.id, objectGroupId, callback);
     },
 
     /**
@@ skipping 1301 matching lines @@
     setInspectModeEnabled: function(enabled, inspectShadowDOM, config, callback)
     {
         DOMAgent.setInspectModeEnabled(enabled, inspectShadowDOM, config, callback);
     }
 }
 
 /**
  * @type {?WebInspector.DOMAgent}
  */
 WebInspector.domAgent = null;