DevTools: merge array formatting logic

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

Index: third_party/WebKit/Source/devtools/front_end/components/RemoteObjectPreviewFormatter.js
diff --git a/third_party/WebKit/Source/devtools/front_end/components/RemoteObjectPreviewFormatter.js b/third_party/WebKit/Source/devtools/front_end/components/RemoteObjectPreviewFormatter.js
index 54b36b0506c204d162804a7155aecbb6f9195e9d..d8f4d4bd741e870493c8c054b860235c2de49886 100644
--- a/third_party/WebKit/Source/devtools/front_end/components/RemoteObjectPreviewFormatter.js
+++ b/third_party/WebKit/Source/devtools/front_end/components/RemoteObjectPreviewFormatter.js
@@ -8,8 +8,9 @@ Components.RemoteObjectPreviewFormatter = class {
   /**
    * @param {!Element} parentElement
    * @param {!Protocol.Runtime.ObjectPreview} preview
+   * @param {boolean=} formatArrayByIndices
    */
-  appendObjectPreview(parentElement, preview) {
+  appendObjectPreview(parentElement, preview, formatArrayByIndices) {
     var description = preview.description;
     if (preview.type !== 'object' || preview.subtype === 'null') {
       parentElement.appendChild(this.renderPropertyPreview(preview.type, preview.subtype, description));
@@ -25,7 +26,7 @@ Components.RemoteObjectPreviewFormatter = class {
     if (preview.entries)
       this._appendEntriesPreview(parentElement, preview);
     else if (isArray)
-      this._appendArrayPropertiesPreview(parentElement, preview);
+      this._appendArrayPropertiesPreview(parentElement, preview, formatArrayByIndices);

[luoe, 2016/12/08 22:36:45]

The plan is to pass preview.entries / preview.properties instead of passing in
the entire preview.  Each _append() will call some helper to allocate lengths to
each property to handle cutoff logic.

This will happen in a future patch.

     else
       this._appendObjectPropertiesPreview(parentElement, preview);
     if (preview.overflow)
@@ -77,11 +78,15 @@ Components.RemoteObjectPreviewFormatter = class {
   /**
    * @param {!Element} parentElement
    * @param {!Protocol.Runtime.ObjectPreview} preview
+   * @param {boolean=} formatArrayByIndices
    */
-  _appendArrayPropertiesPreview(parentElement, preview) {
+  _appendArrayPropertiesPreview(parentElement, preview, formatArrayByIndices) {
     var arrayLength = SDK.RemoteObject.arrayLength(preview);
     var properties = preview.properties;
-    properties = properties.slice().stableSort(compareIndexesFirst);
+    if (formatArrayByIndices)
+      properties = properties.filter(p => !isNaN(p.name)).stableSort(compareIndexesFirst);
+    else
+      properties = properties.slice().stableSort(compareIndexesFirst);
 
     /**
      * @param {!Protocol.Runtime.PropertyPreview} a
@@ -106,17 +111,38 @@ Components.RemoteObjectPreviewFormatter = class {
       return -1;
     }
 
+    var lastNonEmptyArrayIndex = -1;
     for (var i = 0; i < properties.length; ++i) {
       if (i > 0)
         parentElement.createTextChild(', ');
 
       var property = properties[i];
-      if (property.name !== String(i) || i >= arrayLength) {
+      if (formatArrayByIndices) {
+        var index = parseInt(property.name, 10);
+        if (index - lastNonEmptyArrayIndex > 1) {
+          appendUndefined(index);
+          parentElement.createTextChild(', ');
+        }
+        lastNonEmptyArrayIndex = index;
+      } else if (property.name !== String(i) || i >= arrayLength) {
         parentElement.appendChild(this._renderDisplayName(property.name));
         parentElement.createTextChild(': ');
       }
       parentElement.appendChild(this._renderPropertyPreviewOrAccessor([property]));
     }
+    if (formatArrayByIndices && arrayLength - lastNonEmptyArrayIndex > 1) {
+      if (lastNonEmptyArrayIndex > -1)
+        parentElement.createTextChild(', ');
+      appendUndefined(arrayLength);
+    }
+
+    /**
+     * @param {number} index
+     */
+    function appendUndefined(index) {
+      var span = parentElement.createChild('span', 'object-value-undefined');
+      span.textContent = Common.UIString('undefined × %d', index - lastNonEmptyArrayIndex - 1);
+    }
   }
 
   /**