DevTools: reveal object path in console tooltip

third_party/WebKit/Source/devtools/front_end/components/ObjectPropertiesSection.js

Index: third_party/WebKit/Source/devtools/front_end/components/ObjectPropertiesSection.js
diff --git a/third_party/WebKit/Source/devtools/front_end/components/ObjectPropertiesSection.js b/third_party/WebKit/Source/devtools/front_end/components/ObjectPropertiesSection.js
index 0185ab8db2cc3962b61e354d929110dfcef5bbf7..69e53e84aa4af329b8927bf0d0df2a2c94370236 100644
--- a/third_party/WebKit/Source/devtools/front_end/components/ObjectPropertiesSection.js
+++ b/third_party/WebKit/Source/devtools/front_end/components/ObjectPropertiesSection.js
@@ -301,15 +301,16 @@ WebInspector.ObjectPropertyTreeElement.prototype = {
             this.nameElement.classList.add("properties-accessor-property-name");
         if (this.property.synthetic)
             this.nameElement.classList.add("synthetic-property");
-        if (this.property.symbol)
-            this.nameElement.addEventListener("contextmenu", this._contextMenuFired.bind(this, this.property.symbol), false);
+
+        this._updatePropertyPath();
+        this.nameElement.addEventListener("contextmenu", this._nameContextMenuFired.bind(this, this.property), false);
 
         var separatorElement = createElementWithClass("span", "object-properties-section-separator");
         separatorElement.textContent = ": ";
 
         if (this.property.value) {
             this.valueElement = WebInspector.ObjectPropertiesSection.createValueElementWithCustomSupport(this.property.value, this.property.wasThrown, this.listItemElement);
-            this.valueElement.addEventListener("contextmenu", this._contextMenuFired.bind(this, this.property.value), false);
+            this.valueElement.addEventListener("contextmenu", this._valueContextMenuFired.bind(this, this.property), false);
         } else if (this.property.getter) {
             this.valueElement = WebInspector.ObjectPropertyTreeElement.createRemoteObjectAccessorPropertySpan(this.property.parentObject, [this.property.name], this._onInvokeGetterClick.bind(this));
         } else {
@@ -322,10 +323,44 @@ WebInspector.ObjectPropertyTreeElement.prototype = {
         this.listItemElement.appendChildren(this.nameElement, separatorElement, this.valueElement);
     },
 
-    _contextMenuFired: function(value, event)
+    _updatePropertyPath: function()
+    {
+        if (this.nameElement.title)
+            return;
+
+        var useDotNotation = /^(_|\$|[A-Z])(_|\$|[A-Z]|\d)*$/i;
+        var isInteger = /^[1-9]\d*$/;
+        var name = this.property.name;
+        var parentPath = this.parent.nameElement ? this.parent.nameElement.title : "";
+        if (useDotNotation.test(name))
+            this.nameElement.title = parentPath + "." + name;
+        else if (isInteger.test(name))
+            this.nameElement.title = parentPath + "[" + name + "]";
+        else
+            this.nameElement.title = parentPath + "[\"" + name + "\"]";
+    },
+
+    /**
+     * @param {!WebInspector.RemoteObjectProperty} property
+     * @param {!Event} event
+     */
+    _nameContextMenuFired: function(property, event)

[dgozman, 2016/05/18 00:46:14]

Did you preserve "Store as Global Variable" item?

[luoe, 2016/05/18 21:15:47]

Yes, "Store as Global Variable" and others like "Show Function Definition", and
"Show Generator Location" are preserved.

+    {
+        var contextMenu = new WebInspector.ContextMenu(event);
+        contextMenu.appendItem(WebInspector.copyPropertyPathLabel(), InspectorFrontendHost.copyText.bind(InspectorFrontendHost, this.nameElement.title));
+        if (property.symbol)
+            contextMenu.appendApplicableItems(property.symbol);
+        contextMenu.show();
+    },
+
+    /**
+     * @param {!WebInspector.RemoteObjectProperty} property
+     * @param {!Event} event
+     */
+    _valueContextMenuFired: function(property, event)

[dgozman, 2016/05/18 00:46:14]

I think we should display a single context menu both for name and value.

[luoe, 2016/05/18 21:15:47]

Sure, I'm fine with changing that.  If these two are merged, "Copy property
path" will be the first option in the menu, but I get the feeling that "Store as
global variable" is used more often, and should be first.  Do we have data on
this?

     {
         var contextMenu = new WebInspector.ContextMenu(event);
-        contextMenu.appendApplicableItems(value);
+        contextMenu.appendApplicableItems(property.value);
         contextMenu.show();
     },