DevTools: more previews when formatting logged arrays/objects

third_party/WebKit/Source/platform/v8_inspector/InjectedScriptSource.js

Index: third_party/WebKit/Source/platform/v8_inspector/InjectedScriptSource.js
diff --git a/third_party/WebKit/Source/platform/v8_inspector/InjectedScriptSource.js b/third_party/WebKit/Source/platform/v8_inspector/InjectedScriptSource.js
index e15ab5e6d2c599086bae6c335f03a8d2b2f5162a..f861a65e4e468a73a03b2fce062ecb6d90e1c50e 100644
--- a/third_party/WebKit/Source/platform/v8_inspector/InjectedScriptSource.js
+++ b/third_party/WebKit/Source/platform/v8_inspector/InjectedScriptSource.js
@@ -346,8 +346,10 @@ InjectedScript.prototype = {
                 descriptor.get = this._wrapObject(descriptor.get, objectGroupName);
             if ("set" in descriptor)
                 descriptor.set = this._wrapObject(descriptor.set, objectGroupName);
-            if ("value" in descriptor)
+            if ("value" in descriptor) {
+                generatePreview = descriptor.name !== "__proto__";

[dgozman, 2016/06/14 09:08:30]

I don't get this change.

[luoe, 2016/06/14 17:49:29]

In another place, I changed a call to getProperties to use generatePreview =
true.  The intent of this line is to never generate a preview for the __proto__,
since it looks strange, especially when not expecting it.

I'll make a note to describe this in the doc.

                 descriptor.value = this._wrapObject(descriptor.value, objectGroupName, false, generatePreview);
+            }
             if (!("configurable" in descriptor))
                 descriptor.configurable = false;
             if (!("enumerable" in descriptor))
@@ -809,6 +811,8 @@ InjectedScript.RemoteObject.prototype = {
         var propertiesThreshold = {
             properties: isTable ? 1000 : max(5, firstLevelKeysCount),
             indexes: isTable ? 1000 : max(100, firstLevelKeysCount),
+            characters: isTable ? Infinity : 120,
+            abbreviatedTextLength: isTable ? Infinity : 40,
             __proto__: null
         };
 
@@ -816,7 +820,7 @@ InjectedScript.RemoteObject.prototype = {
             var descriptors = injectedScript._propertyDescriptors(object, undefined, undefined, firstLevelKeys);
 
             this._appendPropertyDescriptors(preview, descriptors, propertiesThreshold, secondLevelKeys, isTable);
-            if (propertiesThreshold.indexes < 0 || propertiesThreshold.properties < 0)
+            if (propertiesThreshold.indexes < 0 || propertiesThreshold.properties < 0 || propertiesThreshold.characters < 0)
                 return preview;
 
             // Add internal properties to preview.
@@ -842,6 +846,17 @@ InjectedScript.RemoteObject.prototype = {
     },
 
     /**
+     * @param {*} value
+     * @return {!RuntimeAgent.ObjectPreview}
+     */
+    _generateSubPreview: function(value)
+    {
+        var remoteObject = new InjectedScript.RemoteObject(value, undefined, true, undefined, true, undefined, undefined, true);
+        var valuePreview = remoteObject.preview || remoteObject._createEmptyPreview();
+        return valuePreview;
+    },
+
+    /**
      * @param {!RuntimeAgent.ObjectPreview} preview
      * @param {!Array.<*>|!Iterable.<*>} descriptors
      * @param {!Object} propertiesThreshold
@@ -895,10 +910,9 @@ InjectedScript.RemoteObject.prototype = {
                 continue;
             }
 
-            var maxLength = 100;
             if (InjectedScript.primitiveTypes[type]) {
-                if (type === "string" && value.length > maxLength)
-                    value = this._abbreviateString(value, maxLength, true);
+                if (type === "string" && value.length > propertiesThreshold.abbreviatedTextLength)
+                    value = this._abbreviateString(value, Math.min(propertiesThreshold.characters, propertiesThreshold.abbreviatedTextLength), true);
                 this._appendPropertyPreview(preview, { name: name, type: type, value: toStringDescription(value), __proto__: null }, propertiesThreshold);
                 continue;
             }
@@ -911,12 +925,13 @@ InjectedScript.RemoteObject.prototype = {
             if (secondLevelKeys === null || secondLevelKeys) {
                 var subPreview = this._generatePreview(value, secondLevelKeys || undefined, undefined, isTable);
                 property.valuePreview = subPreview;
-                if (subPreview.overflow)
-                    preview.overflow = true;
+            } else if ((preview.subtype === "array" || subtype === "array") && subtype !== "node") {
+                var subPreview = this._generateSubPreview(value);
+                property.valuePreview = subPreview;
             } else {
                 var description = "";
                 if (type !== "function")
-                    description = this._abbreviateString(/** @type {string} */ (injectedScript._describe(value)), maxLength, subtype === "regexp");
+                    description = this._abbreviateString(/** @type {string} */ (injectedScript._describe(value)), propertiesThreshold.characters, subtype === "regexp");
                 property.value = description;
             }
             this._appendPropertyPreview(preview, property, propertiesThreshold);
@@ -930,15 +945,57 @@ InjectedScript.RemoteObject.prototype = {
      */
     _appendPropertyPreview: function(preview, property, propertiesThreshold)
     {
+        // Before updating indexes or properties, make sure we have enough characters to continue appending
+        if (propertiesThreshold.characters <= 0) {
+            preview.overflow = true;
+            return;
+        }
+
+        // If the property name is a number
         if (toString(property.name >>> 0) === property.name)
             propertiesThreshold.indexes--;
-        else
+        else {
             propertiesThreshold.properties--;
+            // Only objects have keynames displayed in previews
+            propertiesThreshold.characters -= property.name.length;
+        }
+        if (property.value)
+            propertiesThreshold.characters -= property.value.length;
+        else if (property.valuePreview) {
+            var minLength = property.description ? property.description.length : 0;
+            if (property.valuePreview.description && property.valuePreview.description.length < minLength)
+                minLength = property.valuePreview.description.length;
+            if (preview.subtype === "array")
+                minLength = estimatePropertyPreviewLength(property);
+
+            propertiesThreshold.characters -= minLength;
+        }
+
+
+        // if (propertiesThreshold.indexes < 0 || propertiesThreshold.properties < 0 || propertiesThreshold.characters < 0) {
         if (propertiesThreshold.indexes < 0 || propertiesThreshold.properties < 0) {
             preview.overflow = true;
+            push(preview.properties, property);
         } else {
             push(preview.properties, property);
         }
+
+        function estimatePropertyPreviewLength(property)
+        {
+            if (!property) {
+                return 0;
+            } else if (property.value) {
+                return property.name.length + property.value.length;
+            } else if (property.valuePreview && property.valuePreview.properties.length) {
+                var valuePreviewPropertyLengths = property.valuePreview.properties.map((prop) => estimatePropertyPreviewLength(prop));
+                var valuePreviewLength = valuePreviewPropertyLengths.reduce((a, b) => a + b, 0);
+                return property.name.length + ": ".length + valuePreviewLength + 2;
+            } else if (property.description) {
+                return property.description.length;
+            } else {
+                return 0;
+            }
+        }
     },
 
     /**
@@ -965,24 +1022,13 @@ InjectedScript.RemoteObject.prototype = {
             }
             var entry = nullifyObjectProto(entries[i]);
             var previewEntry = {
-                value: generateValuePreview(entry.value),
+                value: this._generateSubPreview(entry.value),
                 __proto__: null
             };
             if ("key" in entry)
-                previewEntry.key = generateValuePreview(entry.key);
+                previewEntry.key = this._generateSubPreview(entry.key);
             push(preview.entries, previewEntry);
         }
-
-        /**
-         * @param {*} value
-         * @return {!RuntimeAgent.ObjectPreview}
-         */
-        function generateValuePreview(value)
-        {
-            var remoteObject = new InjectedScript.RemoteObject(value, undefined, true, undefined, true, undefined, undefined, true);
-            var valuePreview = remoteObject.preview || remoteObject._createEmptyPreview();
-            return valuePreview;
-        }
     },
 
     /**