Implement copy css path in elements panel.

Source/devtools/front_end/ElementsTreeOutline.js

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
  * 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:
  *
  * 1.  Redistributions of source code must retain the above copyright
@@ skipping 1160 matching lines @@
     {
         this.expandedChildrenLimit = Math.max(this._visibleChildCount(), this.expandedChildrenLimit + WebInspector.ElementsTreeElement.InitialChildrenLimit);
     },
 
     expandRecursively: function()
     {
         function callback()
         {
             TreeElement.prototype.expandRecursively.call(this, Number.MAX_VALUE);
         }
-        
+
         this._node.getSubtree(-1, callback.bind(this));
     },
 
     onexpand: function()
     {
         if (this._elementCloseTag)
             return;
 
         this.updateTitle();
         this.treeOutline.updateSelection();
@@ skipping 146 matching lines @@
         this.treeOutline._populateContextMenu(contextMenu, this._node);
         this._populateScrollIntoView(contextMenu);
     },
 
     /**
      * @param {WebInspector.ContextMenu} contextMenu
      */
     _populateScrollIntoView: function(contextMenu)
     {
         contextMenu.appendSeparator();
-        contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Scroll into view" : "Scroll into View"), this._scrollIntoView.bind(this)); 
+        contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Scroll into view" : "Scroll into View"), this._scrollIntoView.bind(this));
     },
 
     _populateForcedPseudoStateItems: function(subMenu)
     {
         const pseudoClasses = ["active", "hover", "focus", "visited"];
         var node = this._node;
         var forcedPseudoState = (node ? node.getUserProperty("pseudoState") : null) || [];
         for (var i = 0; i < pseudoClasses.length; ++i) {
             var pseudoClassForced = forcedPseudoState.indexOf(pseudoClasses[i]) >= 0;
             subMenu.appendCheckboxItem(":" + pseudoClasses[i], this.treeOutline._setPseudoClassCallback.bind(null, node.id, pseudoClasses[i], !pseudoClassForced), pseudoClassForced, false);
         }
     },
 
     _populateTextContextMenu: function(contextMenu, textNode)
     {
         contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Edit text" : "Edit Text"), this._startEditingTextNode.bind(this, textNode));
         this._populateNodeContextMenu(contextMenu);
     },
 
     _populateNodeContextMenu: function(contextMenu)
     {
         // Add free-form node-related actions.
         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));
         contextMenu.appendItem(WebInspector.UIString("Copy XPath"), this._copyXPath.bind(this));
+        contextMenu.appendItem(WebInspector.UIString("Copy CSS Path"), this._copyCSSPath.bind(this));

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

This should go into _populateTagContextMenu(). Copying an XPath does make sense
for text nodes, unlike copying a CSS path.

         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));
     },
 
     _startEditing: function()
     {
         if (this.treeOutline.selectedDOMNode() !== this._node)
             return;
 
         var listItem = this._listItemNode;
@@ skipping 77 matching lines @@
         if (attributeName && attributeValueElement && listItemElement && listItemElement.treeElement)
             domNode = listItemElement.treeElement.representedObject;
         var attributeValue = domNode ? domNode.getAttribute(attributeName) : undefined;
         if (typeof attributeValue !== "undefined")
             attributeValueElement.textContent = attributeValue;
 
         // Remove zero-width spaces that were added by nodeTitleInfo.
         removeZeroWidthSpaceRecursive(attribute);
 
         var config = new WebInspector.EditingConfig(this._attributeEditingCommitted.bind(this), this._editingCancelled.bind(this), attributeName);
-        
+
         function handleKeyDownEvents(event)
         {
             var isMetaOrCtrl = WebInspector.isMac() ?
                 event.metaKey && !event.shiftKey && !event.ctrlKey && !event.altKey :
                 event.ctrlKey && !event.shiftKey && !event.metaKey && !event.altKey;
             if (isEnterKey(event) && (event.isMetaOrCtrlForTest || !config.multiline || isMetaOrCtrl))
                 return "commit";
             else if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Esc.code || event.keyIdentifier === "U+001B")
                 return "cancel";
             else if (event.keyIdentifier === "U+0009") // Tab key
@@ skipping 694 matching lines @@
         }
 
         node.getOuterHTML(this._startEditingAsHTML.bind(this, commitChange));
     },
 
     _copyHTML: function()
     {
         this._node.copyNode();
     },
 
+    _copyCSSPath: function()
+    {
+        this._node.copyCSSPath();
+    },
+
     _copyXPath: function()
     {
         this._node.copyXPath(true);
     },
 
     _inspectDOMProperties: function()
     {
         WebInspector.RemoteObject.resolveNode(this._node, "console", callback);
 
         /**
@@ skipping 43 matching lines @@
         function scrollIntoViewCallback(object)
         {
             function scrollIntoView()
             {
                 this.scrollIntoViewIfNeeded(true);
             }
 
             if (object)
                 object.callFunction(scrollIntoView);
         }
-        
+
         WebInspector.RemoteObject.resolveNode(this._node, "", scrollIntoViewCallback);
     },
 
     /**
      * @return {Array.<WebInspector.DOMNode>} visibleChildren
      */
     _visibleChildren: function()
     {
         var visibleChildren = WebInspector.ElementsTreeOutline.showShadowDOM() ? this._node.shadowRoots() : [];
         if (this._node.templateContent())
@@ skipping 189 matching lines @@
  * @constructor
  * @param {boolean} isUpdated
  * @param {WebInspector.DOMNode=} parent
  */
 WebInspector.ElementsTreeUpdater.UpdateEntry = function(isUpdated, parent)
 {
     this.isUpdated = isUpdated;
     if (parent)
         this.parent = parent;
 }