DevTools: more previews when formatting logged arrays/objects

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 eb34f0e3918bb50ff2503e662191e8f726c7df23..c632b5e0b93dfbdabad83d74fcc7a5934840b08d 100644
--- a/third_party/WebKit/Source/devtools/front_end/components/ObjectPropertiesSection.js
+++ b/third_party/WebKit/Source/devtools/front_end/components/ObjectPropertiesSection.js
@@ -29,11 +29,12 @@
  * @extends {TreeOutlineInShadow}
  * @param {!WebInspector.RemoteObject} object
  * @param {?string|!Element=} title
+ * @param {?string|!Element=} expandedTitle
  * @param {?string=} emptyPlaceholder
  * @param {boolean=} ignoreHasOwnProperty
  * @param {!Array.<!WebInspector.RemoteObjectProperty>=} extraProperties
  */
-WebInspector.ObjectPropertiesSection = function(object, title, emptyPlaceholder, ignoreHasOwnProperty, extraProperties)
+WebInspector.ObjectPropertiesSection = function(object, title, expandedTitle, emptyPlaceholder, ignoreHasOwnProperty, extraProperties)
 {
     this._object = object;
     this._editable = true;
@@ -42,10 +43,24 @@ WebInspector.ObjectPropertiesSection = function(object, title, emptyPlaceholder,
     this.setFocusable(false);
     this._objectTreeElement = new WebInspector.ObjectPropertiesSection.RootElement(object, 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") {
+        this.expandedTitleElement = this.element.createChild("span");
+        this.expandedTitleElement.textContent = expandedTitle || "";
+    } else if (!!expandedTitle) {
+        this.expandedTitleElement = expandedTitle;
+        this.element.appendChild(expandedTitle);
+    }
+
+    if (!!expandedTitle)
+        this.expandedTitleElement.classList.add("hidden");
 
     this.element._section = this;
     this.registerRequiredCSS("components/objectValue.css");
@@ -172,14 +187,24 @@ 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");
+            }
+        }
     },
 
     /**
@@ -277,8 +302,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;
     },
@@ -292,6 +317,26 @@ WebInspector.ObjectPropertyTreeElement.prototype = {
         this._updateExpandable();
     },
 
+    /**
+     * @override
+     */
+    onexpand: function()
+    {
+        this.valueElement.classList.add("hidden");
+        if (this.expandedValueElement)
+            this.expandedValueElement.classList.remove("hidden");
+    },
+
+    /**
+     * @override
+     */
+    oncollapse: function()
+    {
+        this.valueElement.classList.remove("hidden");
+        if (this.expandedValueElement)
+            this.expandedValueElement.classList.add("hidden");
+    },
+
     update: function()
     {
         this.nameElement = WebInspector.ObjectPropertiesSection.createNameElement(this.property.name);
@@ -319,8 +364,12 @@ WebInspector.ObjectPropertyTreeElement.prototype = {
             this.valueElement.title = WebInspector.UIString("No property getter");
         }
 
+        this.expandedValueElement = WebInspector.ObjectPropertiesSection.createDescriptionValueElement(this.property.value);
+
         this.listItemElement.removeChildren();
         this.listItemElement.appendChildren(this.nameElement, separatorElement, this.valueElement);
+        if (this.expandedValueElement)
+            this.listItemElement.appendChild(this.expandedValueElement);
     },
 
     _updatePropertyPath: function()
@@ -363,18 +412,23 @@ WebInspector.ObjectPropertyTreeElement.prototype = {
 
         this._editableDiv = this.listItemElement.createChild("span");
 
-        var text = this.property.value.description;
-        if (this.property.value.type === "string" && typeof text === "string")
-            text = "\"" + text + "\"";
+        var text = this.valueElement.textContent || this.property.value.description;
+        if (this.property.value.type === "object" && this.property.value.subtype === "array") {
+            var childNodes = Array.prototype.slice.call(this.valueElement.childNodes);
+            var hasLengthLabel = childNodes.length && childNodes[childNodes.length - 1].classList.contains("object-value-array-length");
+            if (hasLengthLabel)
+                text = childNodes.slice(0, childNodes.length - 1).map((el) => el.textContent).join("");
+        }
 
         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)
+            this.expandedValueElement.classList.add("hidden");
 
         this._prompt = new WebInspector.ObjectPropertyPrompt();
 
@@ -395,7 +449,10 @@ WebInspector.ObjectPropertyTreeElement.prototype = {
 
     _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();
     },
 
@@ -1191,7 +1248,14 @@ WebInspector.ObjectPropertiesSection.createValueElement = function(value, wasThr
     } else if (type !== "object" || subtype !== "node") {
         valueText = description;
     }
-    if (type !== "number" || valueText.indexOf("e") === -1) {
+
+    var previewFormatter = new WebInspector.RemoteObjectPreviewFormatter();
+    if (type === "object" && !subtype && value.preview) {
+        previewFormatter.appendObjectPreview(valueElement, value.preview, true);
+    } else if (value.arrayLength && value.preview) {
+        previewFormatter.appendObjectPreview(valueElement, value.preview, true);
+        valueElement.createChild("span", "object-value-array-length").textContent = "(" + value.arrayLength() + ")";
+    } else if (type !== "number" || valueText.indexOf("e") === -1) {
         valueElement.setTextContentTruncatedIfNeeded(valueText || "");
         if (prefix)
             valueElement.insertBefore(createTextNode(prefix), valueElement.firstChild);
@@ -1245,6 +1309,27 @@ WebInspector.ObjectPropertiesSection.createValueElement = function(value, wasThr
 }
 
 /**
+ * @param {!WebInspector.RemoteObject} value
+ * @return {?Element}
+ */
+WebInspector.ObjectPropertiesSection.createDescriptionValueElement = function(value)
+{
+    if (!value || (value.type === "object" && value.subtype === "node"))
+        return null;
+    var valueElement = createElementWithClass("span", "value");
+    var type = value.type;
+    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