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

Source/devtools/front_end/ElementsTreeOutline.js

Index: Source/devtools/front_end/ElementsTreeOutline.js
diff --git a/Source/devtools/front_end/ElementsTreeOutline.js b/Source/devtools/front_end/ElementsTreeOutline.js
index 56f48aa68a22592f403dbca33da373fc845bb777..6622f278fe69baa4001e3112748e2e22d448e66b 100644
--- a/Source/devtools/front_end/ElementsTreeOutline.js
+++ b/Source/devtools/front_end/ElementsTreeOutline.js
@@ -1333,7 +1333,6 @@ WebInspector.ElementsTreeElement.prototype = {
             this._populateForcedPseudoStateItems(pseudoSubMenu);
             contextMenu.appendSeparator();
         }
-
         this._populateNodeContextMenu(contextMenu);
         this.treeOutline._populateContextMenu(contextMenu, this._node);
         this._populateScrollIntoView(contextMenu);
@@ -1371,6 +1370,10 @@ WebInspector.ElementsTreeElement.prototype = {
         var openTagElement = this.treeOutline.getCachedTreeElement(this.representedObject) || this;
         contextMenu.appendItem(WebInspector.UIString("Edit as HTML"), openTagElement._editAsHTML.bind(openTagElement));
         contextMenu.appendItem(WebInspector.UIString("Copy as HTML"), this._copyHTML.bind(this));
+
+        // Place it here so that all "Copy"-ing items stick together.
+        if (this.representedObject.nodeType() === Node.ELEMENT_NODE)
+            contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Copy CSS path" : "Copy CSS Path"), this._copyCSSPath.bind(this));
         contextMenu.appendItem(WebInspector.UIString("Copy XPath"), this._copyXPath.bind(this));
         contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Delete node" : "Delete Node"), this.remove.bind(this));
         contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Inspect DOM properties" : "Inspect DOM Properties"), this._inspectDOMProperties.bind(this));
@@ -2194,6 +2197,11 @@ WebInspector.ElementsTreeElement.prototype = {
         this._node.copyNode();
     },
 
+    _copyCSSPath: function()
+    {
+        this._node.copyCSSPath(true);

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

Why aren't we using this when creating new rules? Seems more useful there

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

An excellent idea!

+    },
+
     _copyXPath: function()
     {
         this._node.copyXPath(true);