DevTools: more previews when formatting logged arrays/objects

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

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  * Copyright (C) 2013 Google Inc. All rights reserved.
  *
  * 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.
@@ skipping 328 matching lines @@
     getProperties: function(object, objectGroupName, ownProperties, accessorPropertiesOnly, generatePreview)
     {
         var descriptors = [];
         var iter = this._propertyDescriptors(object, ownProperties, accessorPropertiesOnly, undefined);
         // Go over properties, wrap object values.
         for (var descriptor of iter) {
             if ("get" in descriptor)
                 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))
                 descriptor.enumerable = false;
             if ("symbol" in descriptor)
                 descriptor.symbol = this._wrapObject(descriptor.symbol, objectGroupName);
             push(descriptors, descriptor);
         }
         return descriptors;
     },
@@ skipping 441 matching lines @@
      * @return {!RuntimeAgent.ObjectPreview} preview
      */
     _generatePreview: function(object, firstLevelKeys, secondLevelKeys, isTable, skipEntriesPreview)
     {
         var preview = this._createEmptyPreview();
         var firstLevelKeysCount = firstLevelKeys ? firstLevelKeys.length : 0;
 
         var propertiesThreshold = {
             properties: isTable ? 1000 : max(5, firstLevelKeysCount),
             indexes: isTable ? 1000 : max(100, firstLevelKeysCount),
+            characters: isTable ? Infinity : 120,
+            abbreviatedTextLength: isTable ? Infinity : 40,
             __proto__: null
         };
 
         try {
             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.
             var rawInternalProperties = InjectedScriptHost.getInternalProperties(object) || [];
             var internalProperties = [];
             for (var i = 0; i < rawInternalProperties.length; i += 2) {
                 push(internalProperties, {
                     name: rawInternalProperties[i],
                     value: rawInternalProperties[i + 1],
                     isOwn: true,
                     enumerable: true,
                     __proto__: null
                 });
             }
             this._appendPropertyDescriptors(preview, internalProperties, propertiesThreshold, secondLevelKeys, isTable);
 
             if (this.subtype === "map" || this.subtype === "set" || this.subtype === "iterator")
                 this._appendEntriesPreview(object, preview, skipEntriesPreview);
 
         } catch (e) {}
 
         return preview;
     },
 
     /**
+     * @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
      * @param {?Array.<string>=} secondLevelKeys
      * @param {boolean=} isTable
      */
     _appendPropertyDescriptors: function(preview, descriptors, propertiesThreshold, secondLevelKeys, isTable)
     {
         for (var descriptor of descriptors) {
             if (propertiesThreshold.indexes < 0 || propertiesThreshold.properties < 0)
@@ skipping 33 matching lines @@
             // Special-case HTMLAll.
             if (type === "undefined" && injectedScript._isHTMLAllCollection(value))
                 type = "object";
 
             // Render own properties.
             if (value === null) {
                 this._appendPropertyPreview(preview, { name: name, type: "object", subtype: "null", value: "null", __proto__: null }, propertiesThreshold);
                 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;
             }
 
             var property = { name: name, type: type, __proto__: null };
             var subtype = injectedScript._subtype(value);
             if (subtype)
                 property.subtype = subtype;
 
             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);
         }
     },
 
     /**
      * @param {!RuntimeAgent.ObjectPreview} preview
      * @param {!Object} property
      * @param {!Object} propertiesThreshold
      */
     _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;
+            }
+        }
     },
 
     /**
      * @param {!Object} object
      * @param {!RuntimeAgent.ObjectPreview} preview
      * @param {boolean=} skipEntriesPreview
      */
     _appendEntriesPreview: function(object, preview, skipEntriesPreview)
     {
         var entries = InjectedScriptHost.collectionEntries(object);
         if (!entries)
             return;
         if (skipEntriesPreview) {
             if (entries.length)
                 preview.overflow = true;
             return;
         }
         preview.entries = [];
         var entriesThreshold = 5;
         for (var i = 0; i < entries.length; ++i) {
             if (preview.entries.length >= entriesThreshold) {
                 preview.overflow = true;
                 break;
             }
             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;
-        }
     },
 
     /**
      * @param {string} string
      * @param {number} maxLength
      * @param {boolean=} middle
      * @return {string}
      */
     _abbreviateString: function(string, maxLength, middle)
     {
         if (string.length <= maxLength)
             return string;
         if (middle) {
             var leftHalf = maxLength >> 1;
             var rightHalf = maxLength - leftHalf - 1;
             return string.substr(0, leftHalf) + "\u2026" + string.substr(string.length - rightHalf, rightHalf);
         }
         return string.substr(0, maxLength) + "\u2026";
     },
 
     __proto__: null
 }
 
 return injectedScript;
 })