DevTools: iterate on object preview style

third_party/WebKit/Source/devtools/front_end/object_ui/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
  */
 ObjectUI.RemoteObjectPreviewFormatter = class {
   /**
    * @param {!Protocol.Runtime.PropertyPreview} a
    * @param {!Protocol.Runtime.PropertyPreview} b
    * @return {number}
    */
   static _objectPropertyComparator(a, b) {
     if (a.type !== 'function' && b.type === 'function')
       return -1;
     if (a.type === 'function' && b.type !== 'function')
       return 1;
     return 0;
   }
 
   /**
    * @param {!Element} parentElement
    * @param {!Protocol.Runtime.ObjectPreview} preview
    * @param {boolean} isEntry
    */
   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;
     }
     const isArrayOrTypedArray = preview.subtype === 'array' || preview.subtype === 'typedarray';
     if (description) {
       if (previewExperimentEnabled) {
         // Hide the description for plain objects and plain arrays.
         const plainObjectDescription = 'Object';
         const size = SDK.RemoteObject.arrayLength(preview) || SDK.RemoteObject.mapOrSetEntriesCount(preview);
         var text = preview.subtype === 'typedarray' ? SDK.RemoteObject.arrayNameFromDescription(description) : '';
         if (isArrayOrTypedArray)
           text += size > 1 ? ('(' + size + ')') : '';
         else
           text = description === plainObjectDescription ? '' : description;
         if (text.length > 0)
           parentElement.createChild('span', 'object-description').textContent = text + ' ';
       } else if (preview.subtype !== 'array') {
         parentElement.createTextChildren(description, ' ');
       }
     }
 
-    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 ? ']' : '}');
   }
 
   /**
    * @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);
@@ skipping 170 matching lines @@
     if (type === 'object' && !subtype) {
       span.textContent = this._abbreviateFullQualifiedClassName(description);
       span.title = description;
       return span;
     }
 
     span.textContent = description;
     return span;
   }
 };