DevTools: more previews when formatting logged arrays/objects

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

Index: third_party/WebKit/Source/devtools/front_end/components/RemoteObjectPreviewFormatter.js
diff --git a/third_party/WebKit/Source/devtools/front_end/components/RemoteObjectPreviewFormatter.js b/third_party/WebKit/Source/devtools/front_end/components/RemoteObjectPreviewFormatter.js
index 8121eac34d38706ebcc9086ac84bbe51334d2a1c..df1dbd931ee9d4987def4faf816ce8b5153f1203 100644
--- a/third_party/WebKit/Source/devtools/front_end/components/RemoteObjectPreviewFormatter.js
+++ b/third_party/WebKit/Source/devtools/front_end/components/RemoteObjectPreviewFormatter.js
@@ -13,18 +13,20 @@ WebInspector.RemoteObjectPreviewFormatter.prototype = {
     /**
      * @param {!Element} parentElement
      * @param {!RuntimeAgent.ObjectPreview} preview
+     * @param {boolean=} noHeading
      */
-    appendObjectPreview: function(parentElement, preview)
+    appendObjectPreview: function(parentElement, preview, noHeading)
     {
         var description = preview.description;
-        if (preview.type !== "object" || preview.subtype === "null") {
+        if (!noHeading && (preview.type !== "object" || preview.subtype === "null")) {
             parentElement.appendChild(this.renderPropertyPreview(preview.type, preview.subtype, description));
             return;
         }
-        if (description && preview.subtype !== "array") {
+        if (!noHeading && description && preview.subtype !== "array") {
             var text = preview.subtype ? description : this._abbreviateFullQualifiedClassName(description);
             parentElement.createTextChildren(text, " ");
         }
+
         if (preview.entries)
             this._appendEntriesPreview(parentElement, preview);
         else
@@ -46,9 +48,11 @@ WebInspector.RemoteObjectPreviewFormatter.prototype = {
     /**
      * @param {!Element} parentElement
      * @param {!RuntimeAgent.ObjectPreview} preview
+     * @param {number=} propertiesCharacterThreshold
      */
-    _appendPropertiesPreview: function(parentElement, preview)
+    _appendPropertiesPreview: function(parentElement, preview, propertiesCharacterThreshold)
     {
+        propertiesCharacterThreshold = propertiesCharacterThreshold || 120;
         var isArray = preview.subtype === "array";
         var arrayLength = WebInspector.RemoteObject.arrayLength(preview);
         var properties = preview.properties;
@@ -82,23 +86,31 @@ WebInspector.RemoteObjectPreviewFormatter.prototype = {
 
         parentElement.createTextChild(isArray ? "[" : "{");
         for (var i = 0; i < properties.length; ++i) {
-            if (i > 0)
+            if (i > 0) {
                 parentElement.createTextChild(", ");
+                propertiesCharacterThreshold -= ", ".length;
+            }
 
             var property = properties[i];
             var name = property.name;
             if (!isArray || name !== String(i) || i >= arrayLength) {
+                var nameElement = parentElement.createChild("span", "name");
                 if (/^\s|\s$|^$|\n/.test(name))
-                    parentElement.createChild("span", "name").createTextChildren("\"", name.replace(/\n/g, "\u21B5"), "\"");
+                    nameElement.createTextChildren("\"", name.replace(/\n/g, "\u21B5"), "\"");
                 else
-                    parentElement.createChild("span", "name").textContent = name;
+                    nameElement.textContent = name;
                 parentElement.createTextChild(": ");
+                propertiesCharacterThreshold -= (nameElement.textContent.length + ": ".length);
             }
 
-            parentElement.appendChild(this._renderPropertyPreviewOrAccessor([property]));
+            var propertyPreviewElement = this._renderPropertyPreviewOrAccessor([property], propertiesCharacterThreshold);
+            parentElement.appendChild(propertyPreviewElement);
+            propertiesCharacterThreshold -= propertyPreviewElement.textContent.length;
+            if (propertiesCharacterThreshold < 0)
+                break;
         }
-        if (preview.overflow)
-            parentElement.createChild("span").textContent = "\u2026";
+        if (i + 1 !== properties.length && (preview.overflow || propertiesCharacterThreshold < 0))
+            parentElement.createChild("span").textContent = ", \u2026";
         parentElement.createTextChild(isArray ? "]" : "}");
     },
 
@@ -122,19 +134,28 @@ WebInspector.RemoteObjectPreviewFormatter.prototype = {
             this.appendObjectPreview(parentElement, entry.value);
         }
         if (preview.overflow)
-            parentElement.createChild("span").textContent = "\u2026";
+            parentElement.createChild("span").textContent = ", \u2026";
         parentElement.createTextChild("}");
     },
 
 
     /**
      * @param {!Array.<!RuntimeAgent.PropertyPreview>} propertyPath
+     * @param {number=} propertiesCharacterThreshold
      * @return {!Element}
      */
-    _renderPropertyPreviewOrAccessor: function(propertyPath)
+    _renderPropertyPreviewOrAccessor: function(propertyPath, propertiesCharacterThreshold)
     {
         var property = propertyPath.peekLast();
-        return this.renderPropertyPreview(property.type, /** @type {string} */ (property.subtype), property.value);
+        if (property.valuePreview && property.valuePreview.description && property.subtype === "array") {
+            return this.renderPropertyPreview(property.type, /** @type {string} */ (property.subtype), property.valuePreview.description);
+        } else if (property.valuePreview) {
+            var span = createElementWithClass("span", "object-value-" + (property.subtype || property.type));
+            this._appendPropertiesPreview(span, property.valuePreview, propertiesCharacterThreshold);
+            return span;
+        } else {
+            return this.renderPropertyPreview(property.type, /** @type {string} */ (property.subtype), property.value);
+        }
     },
 
     /**