DevTools: show alternate title onexpand of object in console

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 56ec6f38b1fee481f23fbed00bbfef19c6f9c735..f96310e6b2925d5fdef7c705dbd509b49a5ff8bc 100644
--- a/third_party/WebKit/Source/devtools/front_end/components/ObjectPropertiesSection.js
+++ b/third_party/WebKit/Source/devtools/front_end/components/ObjectPropertiesSection.js
@@ -43,10 +43,22 @@ WebInspector.ObjectPropertiesSection = function(object, title, linkifier, emptyP
     this.setFocusable(false);
     this._objectTreeElement = new WebInspector.ObjectPropertiesSection.RootElement(object, linkifier, emptyPlaceholder, ignoreHasOwnProperty, extraProperties);
     this.appendChild(this._objectTreeElement);
-    if (typeof title === "string" || !title)
-        this.element.createChild("span").textContent = title || "";
-    else
+    if (typeof title === "string" || !title) {
+        this.titleElement = this.element.createChild("span");
+        this.titleElement.textContent = title || "";
+    } else {
+        this.titleElement = title;
         this.element.appendChild(title);
+    }
+
+    if (object.description && WebInspector.ObjectPropertiesSection.needsAlternateTitle(object)) {
+        this.expandedTitleElement = createElement("span");
+        this.expandedTitleElement.createTextChild(object.description);
+
+        var note = this.expandedTitleElement.createChild("span", "object-state-note");
+        note.classList.add("info-note");
+        note.title = WebInspector.UIString("Value below was evaluated just now.");
+    }
 
     this.element._section = this;
     this.registerRequiredCSS("components/objectValue.css");
@@ -174,16 +186,39 @@ WebInspector.ObjectPropertiesSection.RootElement = function(object, linkifier, e
 
 WebInspector.ObjectPropertiesSection.RootElement.prototype = {
 
+    /**
+     * @override
+     */
     onexpand: function()
     {
-        if (this.treeOutline)
+        if (this.treeOutline) {
             this.treeOutline.element.classList.add("expanded");
+            this._toggleExpandedTitleElement();
+        }
     },
 
+    /**
+     * @override
+     */
     oncollapse: function()
     {
-        if (this.treeOutline)
+        if (this.treeOutline) {
             this.treeOutline.element.classList.remove("expanded");
+            this._toggleExpandedTitleElement();
+        }
+    },
+
+    _toggleExpandedTitleElement: function()
+    {
+        if (!this.treeOutline.expandedTitleElement)
+            return;
+        var currentTitleElement = this.treeOutline.titleElement;

[lushnikov, 2016/07/30 00:29:49]

AFAIU this code is there for the sake of editing the value of exandable
property.

And AFAIU, this scenario is not something we have today.
So, can we just disallow editing values of expandable properties?

[luoe, 2016/07/30 01:46:37]

True, we can't edit titles via double click.  I'll switch this code to something
nicer.

+        var expandedTitleElement = this.treeOutline.expandedTitleElement;
+        var copyOfChildren = Array.prototype.slice.call(currentTitleElement.childNodes);
+        currentTitleElement.removeChildren();
+        currentTitleElement.appendChildren.apply(currentTitleElement, expandedTitleElement.childNodes);
+        expandedTitleElement.removeChildren();
+        expandedTitleElement.appendChildren.apply(expandedTitleElement, copyOfChildren);
     },
 
     /**
@@ -283,8 +318,8 @@ WebInspector.ObjectPropertyTreeElement.prototype = {
      */
     ondblclick: function(event)
     {
-        var editableElement = this.valueElement;
-        if (!this.property.value.customPreview() && (this.property.writable || this.property.setter) && event.target.isSelfOrDescendant(editableElement))
+        var inEditableElement = event.target.isSelfOrDescendant(this.valueElement) || (this.expandedValueElement && event.target.isSelfOrDescendant(this.expandedValueElement));
+        if (!this.property.value.customPreview() && inEditableElement && (this.property.writable || this.property.setter))
             this._startEditing();
         return false;
     },
@@ -298,6 +333,33 @@ WebInspector.ObjectPropertyTreeElement.prototype = {
         this._updateExpandable();
     },
 
+    /**
+     * @override
+     */
+    onexpand: function()
+    {
+        this._toggleExpandedValueElement();
+    },
+
+    /**
+     * @override
+     */
+    oncollapse: function()
+    {
+        this._toggleExpandedValueElement();
+    },
+
+    _toggleExpandedValueElement: function()
+    {
+        if (!this.expandedValueElement)
+            return;
+        var copyOfChildren = Array.prototype.slice.call(this.valueElement.childNodes);
+        this.valueElement.removeChildren();

[lushnikov, 2016/07/30 00:29:49]

same idea as for _toggleExpandedTitleElement might apply here

[luoe, 2016/07/30 01:46:37]

For values, we do currently support editing them via double click, so this
children swapping supports the current editing behavior.

[lushnikov, 2016/08/02 17:08:07]

Yes, but maybe we don't want this scenario at all? It doesn't work
in many cases for me ATM (try edit object into object, or putting "Array[4]"
instead of "Array[5]" and so on)

+        this.valueElement.appendChildren.apply(this.valueElement, this.expandedValueElement.childNodes);
+        this.expandedValueElement.removeChildren();
+        this.expandedValueElement.appendChildren.apply(this.expandedValueElement, copyOfChildren);
+    },
+
     update: function()
     {
         this.nameElement = WebInspector.ObjectPropertiesSection.createNameElement(this.property.name);
@@ -325,6 +387,10 @@ WebInspector.ObjectPropertyTreeElement.prototype = {
             this.valueElement.title = WebInspector.UIString("No property getter");
         }
 
+        var valueText = this.valueElement.textContent;
+        if (this.property.value && valueText && !this.property.wasThrown)
+            this.expandedValueElement = WebInspector.ObjectPropertiesSection.createExpandedValueElement(this.property.value);
+
         this.listItemElement.removeChildren();
         this.listItemElement.appendChildren(this.nameElement, separatorElement, this.valueElement);
     },
@@ -376,11 +442,10 @@ WebInspector.ObjectPropertyTreeElement.prototype = {
         this._editableDiv.setTextContentTruncatedIfNeeded(text, WebInspector.UIString("<string is too large to edit>"));
         var originalContent = this._editableDiv.textContent;
 
-        this.valueElement.classList.add("hidden");
-
         // Lie about our children to prevent expanding on double click and to collapse subproperties.
         this.setExpandable(false);
         this.listItemElement.classList.add("editing-sub-part");
+        this.valueElement.classList.add("hidden");
 
         this._prompt = new WebInspector.ObjectPropertyPrompt();
 
@@ -468,7 +533,7 @@ WebInspector.ObjectPropertyTreeElement.prototype = {
                 // Call updateSiblings since their value might be based on the value that just changed.
                 var parent = this.parent;
                 parent.invalidateChildren();
-                parent.expand();
+                parent.onpopulate();
             }
         }
     },
@@ -1094,6 +1159,31 @@ WebInspector.ObjectPropertiesSection.createValueElement = function(value, wasThr
 }
 
 /**
+ * @param {!WebInspector.RemoteObject} object
+ * @return {boolean}
+ */
+WebInspector.ObjectPropertiesSection.needsAlternateTitle = function(object)

[lushnikov, 2016/07/30 00:29:49]

let's make this a private method of WI.ObjectPropertiesSection

[luoe, 2016/07/30 01:46:37]

Done.

+{
+    return object && object.hasChildren && !object.customPreview() && object.subtype !== "node" && object.type !== "function" && (object.type !== "object" || object.preview);
+}
+
+/**
+ * @param {!WebInspector.RemoteObject} value
+ * @return {?Element}
+ */
+WebInspector.ObjectPropertiesSection.createExpandedValueElement = function(value)

[lushnikov, 2016/07/30 00:29:49]

let's make this a private method of WI.ObjectPropertiesSection

[luoe, 2016/07/30 01:46:37]

Done.

+{
+    if (!WebInspector.ObjectPropertiesSection.needsAlternateTitle(value))
+        return null;
+
+    var valueElement = createElementWithClass("span", "value");
+    valueElement.setTextContentTruncatedIfNeeded(value.description || "");
+    valueElement.classList.add("object-value-" + (value.subtype || value.type));
+    valueElement.title = value.description || "";
+    return valueElement;
+}
+
+/**
  * @param {!WebInspector.RemoteObject} func
  * @param {!Element} element
  * @param {boolean} linkify