DevTools: more previews when formatting logged arrays/objects

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

 // Copyright (c) 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @constructor
  */
 WebInspector.RemoteObjectPreviewFormatter = function()
 {
 }
 
 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
             this._appendPropertiesPreview(parentElement, preview);
     },
 
     /**
      * @param {string} description
      * @return {string}
      */
     _abbreviateFullQualifiedClassName: function(description)
     {
         var abbreviatedDescription = description.split(".");
         for (var i = 0; i < abbreviatedDescription.length - 1; ++i)
             abbreviatedDescription[i] = abbreviatedDescription[i].trimMiddle(3);
         return abbreviatedDescription.join(".");
     },
 
     /**
      * @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;
         if (isArray)
             properties = properties.slice().stableSort(compareIndexesFirst);
 
         /**
          * @param {!RuntimeAgent.PropertyPreview} a
          * @param {!RuntimeAgent.PropertyPreview} b
          */
@@ skipping 13 matching lines @@
         function toArrayIndex(name)
         {
             var index = name >>> 0;
             if (String(index) === name && index < arrayLength)
                 return index;
             return -1;
         }
 
         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 ? "]" : "}");
     },
 
 
     /**
      * @param {!Element} parentElement
      * @param {!RuntimeAgent.ObjectPreview} preview
      */
     _appendEntriesPreview: function(parentElement, preview)
     {
         parentElement.createTextChild("{");
         for (var i = 0; i < preview.entries.length; ++i) {
             if (i > 0)
                 parentElement.createTextChild(", ");
 
             var entry = preview.entries[i];
             if (entry.key) {
                 this.appendObjectPreview(parentElement, entry.key);
                 parentElement.createTextChild(" => ");
             }
             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);
+        }
     },
 
     /**
      * @param {string} type
      * @param {string=} subtype
      * @param {string=} description
      * @return {!Element}
      */
     renderPropertyPreview: function(type, subtype, description)
     {
@@ skipping 18 matching lines @@
 
         if (type === "object" && !subtype) {
             span.textContent = this._abbreviateFullQualifiedClassName(description);
             return span;
         }
 
         span.textContent = description;
         return span;
     }
 }