DevTools: show alternate title onexpand of object in console

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 25 matching lines @@
  */
 WebInspector.ObjectPropertiesSection = function(object, title, linkifier, emptyPlaceholder, ignoreHasOwnProperty, extraProperties)
 {
     this._object = object;
     this._editable = true;
     TreeOutlineInShadow.call(this);
     this.hideOverflow();
     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");
     this.registerRequiredCSS("components/objectPropertiesSection.css");
     this.rootElement().childrenListElement.classList.add("source-code", "object-properties-section");
 }
 
 /** @const */
 WebInspector.ObjectPropertiesSection._arrayLoadThreshold = 100;
 
@@ skipping 107 matching lines @@
     TreeElement.call(this, contentElement);
     this.setExpandable(true);
     this.selectable = false;
     this.toggleOnClick = true;
     this.listItemElement.classList.add("object-properties-section-root-element");
     this._linkifier = linkifier;
 }
 
 WebInspector.ObjectPropertiesSection.RootElement.prototype = {
 
+    /**
+     * @override
+     */
     onexpand: function()
     {
-        if (this.treeOutline)
+        if (this.treeOutline) {
             this.treeOutline.element.classList.add("expanded");
-    },
-
-    oncollapse: function()
-    {
-        if (this.treeOutline)
-            this.treeOutline.element.classList.remove("expanded");
+            this._toggleExpandedTitleElement();
+        }
     },
 
     /**
+     * @override
+     */
+    oncollapse: function()
+    {
+        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);
+    },
+
+    /**
      * @override
      * @param {!Event} e
      * @return {boolean}
      */
     ondblclick: function(e)
     {
         return true;
     },
 
     onpopulate: function()
@@ skipping 76 matching lines @@
         var targetValue = this.property.name !== "__proto__" ? propertyValue : this.property.parentObject;
         WebInspector.ObjectPropertyTreeElement._populate(this, propertyValue, skipProto, this._linkifier, undefined, undefined, undefined, targetValue);
     },
 
     /**
      * @override
      * @return {boolean}
      */
     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;
     },
 
     /**
      * @override
      */
     onattach: function()
     {
         this.update();
         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);
         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");
 
         this._updatePropertyPath();
         this.nameElement.addEventListener("contextmenu", this._contextMenuFired.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._linkifier);
             this.valueElement.addEventListener("contextmenu", this._contextMenuFired.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 {
             this.valueElement = createElementWithClass("span", "object-value-undefined");
             this.valueElement.textContent = WebInspector.UIString("<unreadable>");
             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);
     },
 
     _updatePropertyPath: function()
     {
         if (this.nameElement.title)
             return;
 
         var useDotNotation = /^(_|\$|[A-Z])(_|\$|[A-Z]|\d)*$/i;
@@ skipping 31 matching lines @@
 
         this._editableDiv = this.listItemElement.createChild("span");
 
         var text = this.property.value.description;
         if (this.property.value.type === "string" && typeof text === "string")
             text = "\"" + text + "\"";
 
         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();
 
         var proxyElement = this._prompt.attachAndStartEditing(this._editableDiv, this._editingCommitted.bind(this, originalContent));
         this.listItemElement.getComponentSelection().setBaseAndExtent(this._editableDiv, 0, this._editableDiv, 1);
         proxyElement.addEventListener("keydown", this._promptKeyDown.bind(this, originalContent), false);
     },
 
     _editingEnded: function()
     {
@@ skipping 67 matching lines @@
                 return;
             }
 
             if (!expression) {
                 // The property was deleted, so remove this tree element.
                 this.parent.removeChild(this);
             } else {
                 // Call updateSiblings since their value might be based on the value that just changed.
                 var parent = this.parent;
                 parent.invalidateChildren();
-                parent.expand();
+                parent.onpopulate();
             }
         }
     },
 
     /**
      * @param {?WebInspector.RemoteObject} result
      * @param {boolean=} wasThrown
      */
     _onInvokeGetterClick: function(result, wasThrown)
     {
@@ skipping 605 matching lines @@
     function mouseClick(event)
     {
         WebInspector.Revealer.reveal(value);
         event.consume(true);
     }
 
     return valueElement;
 }
 
 /**
+ * @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
  * @param {boolean=} includePreview
  */
 WebInspector.ObjectPropertiesSection.formatObjectAsFunction = function(func, element, linkify, includePreview)
 {
     func.debuggerModel().functionDetailsPromise(func).then(didGetDetails);
 
     /**
@@ skipping 153 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;
     }
 }