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 11 matching lines @@
  * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 /**
  * @constructor
  * @extends {TreeOutlineInShadow}
  * @param {!WebInspector.RemoteObject} object
  * @param {?string|!Element=} title
+ * @param {?string|!Element=} expandedTitle

[lushnikov, 2016/07/12 02:51:55]

let's only have Element here

[luoe, 2016/07/13 18:06:28]

Done.

  * @param {!WebInspector.Linkifier=} linkifier
  * @param {?string=} emptyPlaceholder
  * @param {boolean=} ignoreHasOwnProperty
  * @param {!Array.<!WebInspector.RemoteObjectProperty>=} extraProperties
  */
-WebInspector.ObjectPropertiesSection = function(object, title, linkifier, emptyPlaceholder, ignoreHasOwnProperty, extraProperties)
+WebInspector.ObjectPropertiesSection = function(object, title, expandedTitle, 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 (typeof expandedTitle === "string") {

[lushnikov, 2016/07/12 02:51:55]

this will go away once you have only Element as input

[luoe, 2016/07/13 18:06:28]

Done.

+        this.expandedTitleElement = this.element.createChild("span");
+        this.expandedTitleElement.textContent = expandedTitle || "";
+    } else if (!!expandedTitle) {
+        this.expandedTitleElement = expandedTitle;
+        this.element.appendChild(expandedTitle);
+    }
+
+    if (this.expandedTitleElement)
+        this.expandedTitleElement.classList.add("hidden");

[lushnikov, 2016/07/12 02:51:55]

Let's use hidden attribute here and everywhere

this.expandedTitleElement.hidden = true;

[luoe, 2016/07/13 18:06:28]

Done.

 
     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;
 
 /**
  * @param {!WebInspector.RemoteObject} object
  * @param {!WebInspector.Linkifier=} linkifier
  * @param {boolean=} skipProto
  * @return {!Element}
  */
 WebInspector.ObjectPropertiesSection.defaultObjectPresentation = function(object, linkifier, skipProto)
 {
     var componentRoot = createElementWithClass("span", "source-code");
     var shadowRoot = WebInspector.createShadowRootWithCoreStyles(componentRoot, "components/objectValue.css");
     shadowRoot.appendChild(WebInspector.ObjectPropertiesSection.createValueElement(object, false));
     if (!object.hasChildren)
         return componentRoot;
 
-    var objectPropertiesSection = new WebInspector.ObjectPropertiesSection(object, componentRoot, linkifier);
+    var objectPropertiesSection = new WebInspector.ObjectPropertiesSection(object, componentRoot, null, linkifier);
     objectPropertiesSection.editable = false;
     if (skipProto)
         objectPropertiesSection.skipProto();
 
     return objectPropertiesSection.element;
 }
 
 WebInspector.ObjectPropertiesSection.prototype = {
     skipProto: function()
     {
@@ skipping 84 matching lines @@
     this.selectable = false;
     this.toggleOnClick = true;
     this.listItemElement.classList.add("object-properties-section-root-element");
     this._linkifier = linkifier;
 }
 
 WebInspector.ObjectPropertiesSection.RootElement.prototype = {
 
     onexpand: function()
     {
-        if (this.treeOutline)
+        if (this.treeOutline) {
             this.treeOutline.element.classList.add("expanded");
+            if (this.treeOutline.expandedTitleElement) {
+                this.treeOutline.titleElement.classList.add("hidden");
+                this.treeOutline.expandedTitleElement.classList.remove("hidden");
+            }
+        }
     },
 
     oncollapse: function()
     {
-        if (this.treeOutline)
+        if (this.treeOutline) {
             this.treeOutline.element.classList.remove("expanded");
+            if (this.treeOutline.expandedTitleElement) {
+                this.treeOutline.titleElement.classList.remove("hidden");
+                this.treeOutline.expandedTitleElement.classList.add("hidden");
+            }
+        }
     },
 
     /**
      * @override
      * @param {!Event} e
      * @return {boolean}
      */
     ondblclick: function(e)
     {
         return true;
@@ skipping 79 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()
+    {
+        if (this.expandedValueElement) {
+            this.valueElement.classList.add("hidden");

[lushnikov, 2016/07/12 02:51:55]

let's extract a _showExpandedValueElement(visible) and call it in onexpand,
oncollapse and _editingCanceled

[luoe, 2016/07/13 18:06:28]

No longer needed when children are swapped.

+            this.expandedValueElement.classList.remove("hidden");
+        }
+    },
+
+    /**
+     * @override
+     */
+    oncollapse: function()
+    {
+        if (this.expandedValueElement) {
+            this.valueElement.classList.remove("hidden");
+            this.expandedValueElement.classList.add("hidden");
+        }
+    },
+
     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 && valueText !== this.property.value.description && !this.property.wasThrown)

[lushnikov, 2016/07/12 02:51:55]

lets drop this optimization as well

[luoe, 2016/07/13 18:06:28]

Done.

+            this.expandedValueElement = WebInspector.ObjectPropertiesSection.createExpandableTitleOrValueElement(this.property.value);
+
         this.listItemElement.removeChildren();
         this.listItemElement.appendChildren(this.nameElement, separatorElement, this.valueElement);
+        if (this.expandedValueElement)
+            this.listItemElement.appendChild(this.expandedValueElement);
     },
 
     _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;
@@ skipping 29 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");
+        if (this.expandedValueElement)

[lushnikov, 2016/07/12 02:51:55]

i believe we'll always have expandedValueElement once we drop that
optimization...

[luoe, 2016/07/13 18:06:28]

We still need this because there are a few exceptions when an
expandedValueElement is not created (when a customPreview is provided by a
custom formatter, DOM Nodes, functions)

+            this.expandedValueElement.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()
     {
         this._prompt.detach();
         delete this._prompt;
         this._editableDiv.remove();
         this._updateExpandable();
         this.listItemElement.scrollLeft = 0;
         this.listItemElement.classList.remove("editing-sub-part");
     },
 
     _editingCancelled: function()
     {
-        this.valueElement.classList.remove("hidden");
+        if (this.expanded && this.expandedValueElement)
+            this.expandedValueElement.classList.remove("hidden");
+        else
+            this.valueElement.classList.remove("hidden");
         this._editingEnded();
     },
 
     /**
      * @param {string} originalContent
      */
     _editingCommitted: function(originalContent)
     {
         var userInput = this._prompt.text();
         if (userInput === originalContent) {
@@ skipping 796 matching lines @@
     function mouseClick(event)
     {
         WebInspector.Revealer.reveal(value);
         event.consume(true);
     }
 
     return valueElement;
 }
 
 /**
+ * @param {!WebInspector.RemoteObject} value
+ * @return {boolean}
+ */
+WebInspector.ObjectPropertiesSection.needsAlternateTitle = function(value)
+{
+    return value && !value.customPreview() && value.hasChildren && value.subtype !== "node" && value.type !== "function";
+}
+
+/**
+ * @param {!WebInspector.RemoteObject} value
+ * @return {?Element}
+ */
+WebInspector.ObjectPropertiesSection.createExpandableTitleOrValueElement = function(value)
+{
+    if (!WebInspector.ObjectPropertiesSection.needsAlternateTitle(value))
+        return null;
+
+    var valueElement = createElementWithClass("span", "value");
+    var type = value.type;

[lushnikov, 2016/07/12 02:51:55]

let's inline type, subtype & desct

[luoe, 2016/07/13 18:06:28]

Done.

+    var subtype = value.subtype;
+    var description = value.description;
+
+    valueElement.setTextContentTruncatedIfNeeded(description || "");
+    valueElement.classList.add("object-value-" + (subtype || type));
+    valueElement.classList.add("hidden");
+    valueElement.title = 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.functionDetails(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;
     }
 }