DevTools: object formatter renders arrays the same way as printArrayResult()

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.
 /**
  * @unrestricted
  */
 Components.RemoteObjectPreviewFormatter = class {
   /**
    * @param {!Element} parentElement
    * @param {!Protocol.Runtime.ObjectPreview} preview
    * @param {!SDK.RemoteObject=} objectForAccessing
    */
   appendObjectPreview(parentElement, preview, objectForAccessing) {
     var description = preview.description;
     if (preview.type !== 'object' || preview.subtype === 'null') {
       parentElement.appendChild(this.renderPropertyPreview(preview.type, preview.subtype, description));
       return;
     }
-    if (description && preview.subtype !== 'array' && preview.subtype !== 'typedarray') {
+    var isArray = preview.subtype === 'array' || preview.subtype === 'typedarray';
+    if (description && !isArray) {
       var text = preview.subtype ? description : this._abbreviateFullQualifiedClassName(description);
       parentElement.createTextChildren(text, ' ');
     }
+
+    parentElement.createTextChild(isArray ? '[' : '{');
     if (preview.entries)
       this._appendEntriesPreview(parentElement, preview);
+    else if (isArray)
+      this._appendArrayPropertiesPreview(parentElement, preview, objectForAccessing);
     else
       this._appendPropertiesPreview(parentElement, preview, objectForAccessing);
+    if (preview.overflow)
+      parentElement.createChild('span').textContent = '\u2026';
+    parentElement.createTextChild(isArray ? ']' : '}');
   }
 
   /**
    * @param {string} description
    * @return {string}
    */
   _abbreviateFullQualifiedClassName(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 {!Protocol.Runtime.ObjectPreview} preview
    * @param {!SDK.RemoteObject=} objectForAccessing
    */
   _appendPropertiesPreview(parentElement, preview, objectForAccessing) {
-    var isArray = preview.subtype === 'array' || preview.subtype === 'typedarray';
-    var arrayLength = SDK.RemoteObject.arrayLength(preview);
-    var properties = preview.properties;
-    if (isArray)
-      properties = properties.slice().stableSort(compareIndexesFirst);
-    else
-      properties = properties.slice().stableSort(compareFunctionsLast);
+    var properties = preview.properties.slice().stableSort(compareFunctionsLast);
 
     /**
      * @param {!Protocol.Runtime.PropertyPreview} a
      * @param {!Protocol.Runtime.PropertyPreview} b
      */
     function compareFunctionsLast(a, b) {
       if (a.type !== 'function' && b.type === 'function')
         return -1;
       if (a.type === 'function' && b.type !== 'function')
         return 1;
       return 0;
     }
 
+    for (var i = 0; i < properties.length; ++i) {
+      if (i > 0)
+        parentElement.createTextChild(', ');
+
+      var property = properties[i];
+      var name = property.name;
+      if (/^\s|\s$|^$|\n/.test(name))
+        parentElement.createChild('span', 'name').createTextChildren('"', name.replace(/\n/g, '\u21B5'), '"');
+      else
+        parentElement.createChild('span', 'name').textContent = name;
+      parentElement.createTextChild(': ');
+      parentElement.appendChild(this.renderPropertyPreviewOrAccessor([property], objectForAccessing));
+    }
+  }
+
+  /**
+   * @param {!Element} parentElement
+   * @param {!Protocol.Runtime.ObjectPreview} preview
+   * @param {!SDK.RemoteObject=} objectForAccessing
+   */
+  _appendArrayPropertiesPreview(parentElement, preview, objectForAccessing) {
+    var arrayLength = SDK.RemoteObject.arrayLength(preview);
+    var properties = preview.properties.slice().stableSort(compareIndexesFirst);
+    var lastNonEmptyArrayIndex = -1;
+    for (var i = 0; i < properties.length; ++i) {
+      var property = properties[i];
+      var name = property.name;
+      if (isNaN(name))
+        continue;
+      if (i > 0)
+        parentElement.createTextChild(', ');
+      var index = parseInt(name, 10);
+      if (index - lastNonEmptyArrayIndex > 1) {
+        appendUndefined(index);
+        parentElement.createTextChild(', ');
+      }
+      parentElement.appendChild(this.renderPropertyPreviewOrAccessor([property], objectForAccessing));
+      lastNonEmptyArrayIndex = index;
+    }
+    if (lastNonEmptyArrayIndex > -1 && arrayLength - lastNonEmptyArrayIndex > 1) {
+      parentElement.createTextChild(', ');
+      appendUndefined(arrayLength);
+    }
+
+    /**
+     * @param {number} index
+     */
+    function appendUndefined(index) {
+      var span = parentElement.createChild('span', 'object-value-undefined');
+      var gapSize = index - lastNonEmptyArrayIndex - 1;
+      span.textContent = gapSize > 1 ? Common.UIString('undefined × %d', gapSize) : Common.UIString('undefined');
+    }
+
     /**
      * @param {!Protocol.Runtime.PropertyPreview} a
      * @param {!Protocol.Runtime.PropertyPreview} b
      */
     function compareIndexesFirst(a, b) {
       var index1 = toArrayIndex(a.name);
       var index2 = toArrayIndex(b.name);
       if (index1 < 0)
         return index2 < 0 ? 0 : 1;
       return index2 < 0 ? -1 : index1 - index2;
     }
 
     /**
      * @param {string} name
      * @return {number}
      */
     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)
-        parentElement.createTextChild(', ');
-
-      var property = properties[i];
-      var name = property.name;
-      if (!isArray || name !== String(i) || i >= arrayLength) {
-        if (/^\s|\s$|^$|\n/.test(name))
-          parentElement.createChild('span', 'name').createTextChildren('"', name.replace(/\n/g, '\u21B5'), '"');
-        else
-          parentElement.createChild('span', 'name').textContent = name;
-        parentElement.createTextChild(': ');
-      }
-
-      parentElement.appendChild(this.renderPropertyPreviewOrAccessor([property], objectForAccessing));
-    }
-    if (preview.overflow)
-      parentElement.createChild('span').textContent = '\u2026';
-    parentElement.createTextChild(isArray ? ']' : '}');
   }
 
   /**
    * @param {!Element} parentElement
    * @param {!Protocol.Runtime.ObjectPreview} preview
    */
   _appendEntriesPreview(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.createTextChild('}');
   }
 
   /**
    * @param {!Array.<!Protocol.Runtime.PropertyPreview>} propertyPath
    * @param {!SDK.RemoteObject=} objectForAccessing
    * @return {!Element}
    */
   renderPropertyPreviewOrAccessor(propertyPath, objectForAccessing) {
     var property = propertyPath.peekLast();
     if (property.type === 'accessor' && objectForAccessing)
@@ skipping 69 matching lines @@
           else
             description = result.description.trimEnd(maxLength);
         }
         rootElement.appendChild(this.renderPropertyPreview(type, subtype, description));
       }
     }
 
     return rootElement;
   }
 };