DevTools: Fix console.log for arrays in some corner cases.

Source/devtools/front_end/ConsoleMessage.js

 /*
  * Copyright (C) 2011 Google Inc.  All rights reserved.
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * 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
@@ skipping 345 matching lines @@
      * @param {!Element} elem
      * @param {boolean} includePreview
      */
     _formatParameterAsArrayOrObject: function(obj, description, elem, includePreview)
     {
         var titleElement = document.createElement("span");
         if (description)
             titleElement.createTextChild(description);
         if (includePreview && obj.preview) {
             titleElement.classList.add("console-object-preview");
-            var lossless = this._appendObjectPreview(obj, description, titleElement);
+            if (description)
+                titleElement.createTextChild(" ");
+            var lossless = this._appendObjectPreview(obj, titleElement);
             if (lossless) {
                 elem.appendChild(titleElement);
                 return;
             }
         }
         var section = new WebInspector.ObjectPropertiesSection(obj, titleElement);
         section.enableContextMenu();
         elem.appendChild(section.element);
 
         var note = section.titleElement.createChild("span", "object-info-state-note");
         note.title = WebInspector.UIString("Object state below is captured upon first expansion");
     },
 
     /**
      * @param {!WebInspector.RemoteObject} obj
-     * @param {string} description
      * @param {!Element} titleElement
      * @return {boolean} true iff preview captured all information.
      */
-    _appendObjectPreview: function(obj, description, titleElement)
+    _appendObjectPreview: function(obj, titleElement)
     {
         var preview = obj.preview;
         var isArray = obj.subtype === "array";
+        var arrayLength = isArray ? obj.arrayLength() : undefined;
+        var properties = preview.properties;
 
-        if (description)
-            titleElement.createTextChild(" ");
-        titleElement.createTextChild(isArray ? "[" : "{");
-        for (var i = 0; i < preview.properties.length; ++i) {
-            if (i > 0)
-                titleElement.createTextChild(", ");
+        var elements = [];
+        for (var i = 0; i < properties.length; ++i) {
+            var property = properties[i];
+            var name = property.name;
+            elements.push({
+                name: name,
+                element: this._renderPropertyPreviewOrAccessor(obj, [property])
+            });
+        }
 
-            var property = preview.properties[i];
-            var name = property.name;
-            if (!isArray || name != i) {
-                if (/^\s|\s$|^$|\n/.test(name))
-                    name = "\"" + name.replace(/\n/g, "\u21B5") + "\"";
-                titleElement.createChild("span", "name").textContent = name;
-                titleElement.createTextChild(": ");
-            }
-
-            titleElement.appendChild(this._renderPropertyPreviewOrAccessor(obj, [property]));
-        }
-        if (preview.overflow)
-            titleElement.createChild("span").textContent = "\u2026";
-        titleElement.createTextChild(isArray ? "]" : "}");
+        this._appendArrayOrObjectPropertyElements(titleElement, elements, preview.overflow, arrayLength);
         return preview.lossless;
     },
 
     /**
+     * @param {!Element} parent
+     * @param {!Array.<{name: string, element: !Element}>} propertyElements
+     * @param {boolean} overflow
+     * @param {number=} arrayLength
+     */
+    _appendArrayOrObjectPropertyElements: function(parent, propertyElements, overflow, arrayLength)

[pfeldman, 2014/01/23 16:19:02]

This only runs for preview, right? Could you name it as such?

[aandrey, 2014/01/24 06:22:04]

not only for preview: from _printArray also.

+    {
+        const maxFlatArrayLength = 100;
+
+        /**
+         * @param {{name: string, element: !Element}} a
+         * @param {{name: string, element: !Element}} b
+         * @return {number}
+         */
+        function comparator(a, b)
+        {
+            var isIndex1 = String.isArrayIndexPropertyName(a.name, arrayLength);
+            var isIndex2 = String.isArrayIndexPropertyName(b.name, arrayLength);
+            if (isIndex1 && isIndex2)
+                return Number(a.name) - Number(b.name);
+            if (isIndex1)
+                return -1;
+            if (isIndex2)
+                return 1;
+            return 0;
+        }
+
+        var isArray = typeof arrayLength === "number";
+        if (isArray)
+            propertyElements.stableSort(comparator);

[pfeldman, 2014/01/23 16:19:02]

Why sorting properties? They should come in sorted.

[aandrey, 2014/01/24 06:22:04]

They are sorted according to the index in the prototype chain first.
This is needed to handle Array.prototype[0] = value;

+        var isFlatArray = isArray && (arrayLength <= maxFlatArrayLength);

[pfeldman, 2014/01/23 16:19:02]

So we only render as flat when < 100 actual values? I.e. large sparse arrays are
not flat?

[aandrey, 2014/01/24 06:22:04]

Yes. This has been the case up to now - I didn't change this logic.

+
+        parent.createTextChild(isArray ? "[" : "{");
+        var firstElement = true;
+        var lastNonEmptyArrayIndex = -1;
+
+        function appendCommaIfNeeded()
+        {
+            if (firstElement)
+                firstElement = false;
+            else
+                parent.createTextChild(", ");
+        }
+
+        /**
+         * @param {number=} index
+         */
+        function appendUndefinedArrayElements(index)
+        {
+            if (typeof index !== "number")
+                return;
+            var undefinedRange = index - lastNonEmptyArrayIndex - 1;
+            lastNonEmptyArrayIndex = index;
+            if (undefinedRange < 1)
+                return;
+            appendCommaIfNeeded();
+            var span = parent.createChild("span", "console-formatted-undefined");
+            span.textContent = WebInspector.UIString("undefined × %d", undefinedRange);
+        }
+
+        /**
+         * @param {string} name
+         */
+        function appendPropertyName(name)
+        {
+            if (/^\s|\s$|^$|\n/.test(name))
+                name = "\"" + name.replace(/\n/g, "\u21B5") + "\"";
+            parent.createChild("span", "name").textContent = name;
+            parent.createTextChild(": ");
+        }
+
+        for (var i = 0, n = propertyElements.length; i < n; ++i) {
+            var name = propertyElements[i].name;
+            var element = propertyElements[i].element;
+            var isIndex = String.isArrayIndexPropertyName(name, arrayLength);
+            var index = isIndex ? Number(name) : 0;
+
+            if (isFlatArray) {
+                appendUndefinedArrayElements(isIndex ? index : arrayLength);
+                appendCommaIfNeeded();
+                if (!isIndex)
+                    appendPropertyName(name);
+            } else {
+                appendCommaIfNeeded();
+                if (!isArray || !isIndex || index !== i)
+                    appendPropertyName(name);
+            }
+
+            parent.appendChild(element);
+        }
+        if (isFlatArray)
+            appendUndefinedArrayElements(arrayLength);
+
+        if (overflow)
+            parent.createChild("span").textContent = "\u2026";
+        parent.createTextChild(isArray ? "]" : "}");
+    },
+
+    /**
      * @param {!WebInspector.RemoteObject} object
      * @param {!Array.<!RuntimeAgent.PropertyPreview>} propertyPath
      * @return {!Element}
      */
     _renderPropertyPreviewOrAccessor: function(object, propertyPath)
     {
         var property = propertyPath.peekLast();
         if (property.type === "accessor")
             return this._formatAsAccessorProperty(object, propertyPath.select("name"), false);
         return this._renderPropertyPreview(property.type, /** @type {string} */ (property.subtype), property.value);
@@ skipping 79 matching lines @@
     {
         if (this.useArrayPreviewInFormatter(array)) {
             this._formatParameterAsArrayOrObject(array, "", elem, true);
             return;
         }
 
         const maxFlatArrayLength = 100;
         if (this._isOutdated || array.arrayLength() > maxFlatArrayLength)
             this._formatParameterAsObject(array, elem, false);
         else
-            array.getOwnProperties(this._printArray.bind(this, array, elem));
+            array.getAllProperties(false, this._printArray.bind(this, array, elem));
     },
 
     /**
      * @param {!Array.<!WebInspector.RemoteObject>} parameters
      * @return {!Element}
      */
     _formatParameterAsTable: function(parameters)
     {
         var element = document.createElement("span");
         var table = parameters[0];
@@ skipping 62 matching lines @@
         elem.appendChild(document.createTextNode("\""));
     },
 
     /**
      * @param {!WebInspector.RemoteObject} array
      * @param {!Element} elem
      * @param {?Array.<!WebInspector.RemoteObjectProperty>} properties
      */
     _printArray: function(array, elem, properties)
     {
-        if (!properties)
+        if (!properties) {
+            // Fall back to object formatting.
+            this._formatParameterAsObject(array, elem, false);
             return;
+        }
+        const maxNonIndexElements = 5;
+        var arrayLength = array.arrayLength();
 
         var elements = [];
+        var nonIndexElements = 0;
         for (var i = 0; i < properties.length; ++i) {
             var property = properties[i];
             var name = property.name;
-            if (isNaN(name))
-                continue;
+            if (!String.isArrayIndexPropertyName(name, arrayLength)) {
+                if (name === "length" || !property.enumerable)
+                    continue;
+                if (++nonIndexElements > maxNonIndexElements)
+                    continue;
+            }
+            var element = null;
             if (property.getter)
-                elements[name] = this._formatAsAccessorProperty(array, [name], true);
+                element = this._formatAsAccessorProperty(array, [name], true);
             else if (property.value)
-                elements[name] = this._formatAsArrayEntry(property.value);
+                element = this._formatAsArrayEntry(property.value);
+            if (element)
+                elements.push({ name: name, element: element });
         }
 
-        elem.appendChild(document.createTextNode("["));
-        var lastNonEmptyIndex = -1;
-
-        function appendUndefined(elem, index)
-        {
-            if (index - lastNonEmptyIndex <= 1)
-                return;
-            var span = elem.createChild("span", "console-formatted-undefined");
-            span.textContent = WebInspector.UIString("undefined × %d", index - lastNonEmptyIndex - 1);
-        }
-
-        var length = array.arrayLength();
-        for (var i = 0; i < length; ++i) {
-            var element = elements[i];
-            if (!element)
-                continue;
-
-            if (i - lastNonEmptyIndex > 1) {
-                appendUndefined(elem, i);
-                elem.appendChild(document.createTextNode(", "));
-            }
-
-            elem.appendChild(element);
-            lastNonEmptyIndex = i;
-            if (i < length - 1)
-                elem.appendChild(document.createTextNode(", "));
-        }
-        appendUndefined(elem, length);
-
-        elem.appendChild(document.createTextNode("]"));
+        var overflow = (nonIndexElements > maxNonIndexElements);
+        this._appendArrayOrObjectPropertyElements(elem, elements, overflow, arrayLength);
     },
 
     /**
      * @param {!WebInspector.RemoteObject} output
      * @return {!Element}
      */
     _formatAsArrayEntry: function(output)
     {
         // Prevent infinite expansion of cross-referencing arrays.
         return this._formatParameter(output, output.subtype === "array", false);
@@ skipping 431 matching lines @@
     /**
      * @return {!WebInspector.ConsoleMessage}
      */
     clone: function()
     {
         return WebInspector.ConsoleMessage.create(this.source, this.level, this._messageText, this.type, this.url, this.line, this.column, this.repeatCount, this._parameters, this._stackTrace, this._request ? this._request.requestId : undefined, this._isOutdated);
     },
 
     __proto__: WebInspector.ConsoleMessage.prototype
 }