DevTools: introduce object previews experiment

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 30cb1a700ee91cca76392ab33f5162e37f90aa55..e195764d352e4130686f730bfc3efcb3b7c0e9a6 100644
--- a/third_party/WebKit/Source/devtools/front_end/components/RemoteObjectPreviewFormatter.js
+++ b/third_party/WebKit/Source/devtools/front_end/components/RemoteObjectPreviewFormatter.js
@@ -24,24 +24,40 @@ Components.RemoteObjectPreviewFormatter = class {
    */
   appendObjectPreview(parentElement, preview) {
     var description = preview.description;
-    if (preview.type !== 'object' || preview.subtype === 'null') {
+    if (preview.type !== 'object' || preview.subtype === 'null' || preview.subtype === 'regexp' ||
+        preview.subtype === 'error' || preview.subtype === 'internal#entry') {
       parentElement.appendChild(this.renderPropertyPreview(preview.type, preview.subtype, description));
       return;
     }
-    if (description && preview.subtype !== 'array')
-      parentElement.createTextChildren(description, ' ');
+    if (description) {
+      if (Runtime.experiments.isEnabled('objectPreviews')) {
+        var text = '';
+        if (preview.subtype === 'typedarray' || preview.subtype === 'map' || preview.subtype === 'set')
+          text = description.replace(/\[([0-9]+)\]|\(([0-9]+)\)/, '');
+        else if (preview.subtype !== 'array')
+          text = description;
+        var size = SDK.RemoteObject.arrayLength(preview) || SDK.RemoteObject.numEntries(preview);
+        if (size > 1)
+          text += '(' + size + ')';
+        if (text.length > 0)
+          parentElement.createChild('span', 'object-description').textContent = text + ' ';
+      } else if (preview.subtype !== 'array') {
+        parentElement.createTextChildren(description, ' ');
+      }
+    }
 
     var isArray = preview.subtype === 'array' || preview.subtype === 'typedarray';
-    parentElement.createTextChild(isArray ? '[' : '{');
+    var previewElement = parentElement.createChild('span', 'object-preview');
+    previewElement.createTextChild(isArray ? '[' : '{');
     if (preview.entries)
-      this._appendEntriesPreview(parentElement, preview);
+      this._appendEntriesPreview(previewElement, preview);
     else if (isArray)
-      this._appendArrayPropertiesPreview(parentElement, preview);
+      this._appendArrayPropertiesPreview(previewElement, preview);
     else
-      this._appendObjectPropertiesPreview(parentElement, preview);
+      this._appendObjectPropertiesPreview(previewElement, preview);
     if (preview.overflow)
-      parentElement.createChild('span').textContent = '\u2026';
-    parentElement.createTextChild(isArray ? ']' : '}');
+      previewElement.createChild('span').textContent = '\u2026';
+    previewElement.createTextChild(isArray ? ']' : '}');
   }
 
   /**
@@ -228,7 +244,7 @@ Components.RemoteObjectPreviewFormatter = class {
       return span;
     }
 
-    span.textContent = description;
+    span.setTextContentTruncatedIfNeeded(description);

[luoe, 2017/01/04 04:10:27]

With regexp and error types are going through here (see line 29), this will
be needed.

     return span;
   }
 };