DevTools: reveal object path in console tooltip

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

 /*
  * Copyright (C) 2008 Apple 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:
  * 1. Redistributions of source code must retain the above copyright
  *    notice, this list of conditions and the following disclaimer.
  * 2. Redistributions in binary form must reproduce the above copyright
@@ skipping 286 matching lines @@
         this.nameElement = WebInspector.ObjectPropertiesSection.createNameElement(this.property.name);
         if (!this.property.enumerable)
             this.nameElement.classList.add("object-properties-section-dimmed");
         if (this.property.isAccessorProperty())
             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._contextMenuFired.bind(this, this.nameElement), 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);
         } else if (this.property.getter) {
             this.valueElement = WebInspector.ObjectPropertyTreeElement.createRemoteObjectAccessorPropertySpan(this.property.parentObject, [this.property.name], this._onInvokeGetterClick.bind(this));
         } else {
             this.valueElement = createElementWithClass("span", "object-value-undefined");
             this.valueElement.textContent = WebInspector.UIString("<unreadable>");
             this.valueElement.title = WebInspector.UIString("No property getter");
         }
 
         this.listItemElement.removeChildren();
         this.listItemElement.appendChildren(this.nameElement, separatorElement, this.valueElement);
     },
 
+    _updatePropertyPath: function()
+    {
+        if (this.title)

[dgozman, 2016/05/17 02:09:50]

Why this check?

[luoe, 2016/05/18 00:16:23]

In the case when a property is a getter, clicking on the "..." to invoke the
getter makes another call to .updatePropertyPath(), even though it was already
called earlier.  Although calling it twice won't hurt, this check just avoids
the unnecessary call.

Aah, I meant to use 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 : "this";

[dgozman, 2016/05/17 02:09:50]

Could there be no parent?

[luoe, 2016/05/18 00:16:23]

Currently, ObjectPropertiesSection.js is the only file creating instances of
ObjectPropertyTreeElement, and we always create it under a
WebInspector.ObjectPropertiesSection.RootElement.

Also, update() is called after onAttach(), so it should always have a parent.

+        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 + "\"]";
+    },
+
     _contextMenuFired: function(value, event)

[dgozman, 2016/05/17 02:09:50]

Let's annotate parameters.

[luoe, 2016/05/18 00:16:23]

Done.

     {
         var contextMenu = new WebInspector.ContextMenu(event);
+        if (value && value.classList && value.classList.contains("name"))

[dgozman, 2016/05/17 02:09:50]

How can value be null? Or value.classList?

[luoe, 2016/05/18 00:16:23]

Refactored to avoid this check

+            contextMenu.appendItem(WebInspector.copyPropertyPathLabel(), InspectorFrontendHost.copyText.bind(InspectorFrontendHost, value.title));
         contextMenu.appendApplicableItems(value);
         contextMenu.show();
     },
 
     _startEditing: function()
     {
         if (this._prompt || !this.treeOutline._editable || this._readOnly)
             return;
 
         this._editableDiv = this.listItemElement.createChild("span");
@@ skipping 1046 matching lines @@
 
             result = currentName + (result ? "." + result : "");
             current = current.parent;
         }
         var treeOutlineId = treeElement.treeOutline[WebInspector.ObjectPropertiesSectionExpandController._treeOutlineId];
         result = treeOutlineId + (result ? ":" + result : "");
         treeElement[WebInspector.ObjectPropertiesSectionExpandController._cachedPathSymbol] = result;
         return result;
     }
 }