DevTools: iterate on object preview style

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

Index: third_party/WebKit/Source/devtools/front_end/object_ui/RemoteObjectPreviewFormatter.js
diff --git a/third_party/WebKit/Source/devtools/front_end/object_ui/RemoteObjectPreviewFormatter.js b/third_party/WebKit/Source/devtools/front_end/object_ui/RemoteObjectPreviewFormatter.js
index cc2234f9a834ff8b48616fec293d7e3fd8c1f0d4..655d5d82f712c0fb855fb17c2161100443d400dc 100644
--- a/third_party/WebKit/Source/devtools/front_end/object_ui/RemoteObjectPreviewFormatter.js
+++ b/third_party/WebKit/Source/devtools/front_end/object_ui/RemoteObjectPreviewFormatter.js
@@ -26,7 +26,8 @@ ObjectUI.RemoteObjectPreviewFormatter = class {
   appendObjectPreview(parentElement, preview, isEntry) {
     const previewExperimentEnabled = Runtime.experiments.isEnabled('objectPreviews');
     var description = preview.description;
-    if (preview.type !== 'object' || preview.subtype === 'null' || (previewExperimentEnabled && isEntry)) {
+    if (preview.type !== 'object' || preview.subtype === 'error' || preview.subtype === 'null' ||
+        preview.subtype === 'regexp' || (previewExperimentEnabled && isEntry)) {

[luoe, 2017/02/28 22:35:51]

These two additional checks have no effect when the experiment is off.  When the
experiment is on, it ensures that properties of type error and regexe do not get
value previews.

       parentElement.appendChild(this.renderPropertyPreview(preview.type, preview.subtype, description));
       return;
     }
@@ -48,16 +49,19 @@ ObjectUI.RemoteObjectPreviewFormatter = class {
       }
     }
 
-    parentElement.createTextChild(isArrayOrTypedArray ? '[' : '{');
+    var valuePreviewElement = parentElement.createChild('span', 'value-preview');
+    valuePreviewElement.createTextChild(isArrayOrTypedArray ? '[' : '{');
     if (preview.entries)
-      this._appendEntriesPreview(parentElement, preview);
+      this._appendEntriesPreview(valuePreviewElement, preview);
     else if (isArrayOrTypedArray)
-      this._appendArrayPropertiesPreview(parentElement, preview);
+      this._appendArrayPropertiesPreview(valuePreviewElement, preview);
     else
-      this._appendObjectPropertiesPreview(parentElement, preview);
-    if (preview.overflow)
-      parentElement.createChild('span').textContent = '\u2026';
-    parentElement.createTextChild(isArrayOrTypedArray ? ']' : '}');
+      this._appendObjectPropertiesPreview(valuePreviewElement, preview);
+    if (preview.overflow) {
+      var ellipsisText = valuePreviewElement.deepTextContent().length > 1 ? ', \u2026' : '\u2026';
+      valuePreviewElement.createChild('span').textContent = ellipsisText;
+    }
+    valuePreviewElement.createTextChild(isArrayOrTypedArray ? ']' : '}');
   }
 
   /**