DevTools: introduce object previews experiment

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

 /*
  * Copyright (C) 2008 Apple Inc. All Rights Reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  * 1. Redistributions of source code must retain the above copyright
  *    notice, this list of conditions and the following disclaimer.
  * 2. Redistributions in binary form must reproduce the above copyright
@@ skipping 59 matching lines @@
 
   /**
    * @param {!SDK.RemoteObject} object
    * @param {!Components.Linkifier=} linkifier
    * @param {boolean=} skipProto
    * @return {!Element}
    */
   static defaultObjectPresentation(object, linkifier, skipProto) {
     var componentRoot = createElementWithClass('span', 'source-code');
     var shadowRoot = UI.createShadowRootWithCoreStyles(componentRoot, 'components/objectValue.css');
-    shadowRoot.appendChild(Components.ObjectPropertiesSection.createValueElement(object, false));
+    shadowRoot.appendChild(
+        Components.ObjectPropertiesSection.createValueElement(object, false /* wasThrown */, true /* showPreview */));
     if (!object.hasChildren)
       return componentRoot;
 
     var objectPropertiesSection = new Components.ObjectPropertiesSection(object, componentRoot, linkifier);
     objectPropertiesSection.editable = false;
     if (skipProto)
       objectPropertiesSection.skipProto();
 
     return objectPropertiesSection.element;
   }
@@ skipping 120 matching lines @@
       if (includePreview)
         valueElement.createTextChild(body.trim().trimEnd(maxFunctionBodyLength));
       else
         valueElement.createTextChild(abbreviation.replace(/\n/g, ' '));
     }
   }
 
   /**
    * @param {!SDK.RemoteObject} value
    * @param {boolean} wasThrown
+   * @param {boolean} showPreview
    * @param {!Element=} parentElement
    * @param {!Components.Linkifier=} linkifier
    * @return {!Element}
    */
-  static createValueElementWithCustomSupport(value, wasThrown, parentElement, linkifier) {
+  static createValueElementWithCustomSupport(value, wasThrown, showPreview, parentElement, linkifier) {
     if (value.customPreview()) {
       var result = (new Components.CustomPreviewComponent(value)).element;
       result.classList.add('object-properties-section-custom-section');
       return result;
     }
-    return Components.ObjectPropertiesSection.createValueElement(value, wasThrown, parentElement, linkifier);
+    return Components.ObjectPropertiesSection.createValueElement(
+        value, wasThrown, showPreview, parentElement, linkifier);
   }
 
   /**
    * @param {!SDK.RemoteObject} value
    * @param {boolean} wasThrown
+   * @param {boolean} showPreview
    * @param {!Element=} parentElement
    * @param {!Components.Linkifier=} linkifier
    * @return {!Element}
    */
-  static createValueElement(value, wasThrown, parentElement, linkifier) {
+  static createValueElement(value, wasThrown, showPreview, parentElement, linkifier) {
     var valueElement;
     var type = value.type;
     var subtype = value.subtype;
     var description = value.description;
     if (type === 'object' && subtype === 'internal#location') {
       var rawLocation = value.debuggerModel().createRawLocationByScriptId(
           value.value.scriptId, value.value.lineNumber, value.value.columnNumber);
       if (rawLocation && linkifier)
         return linkifier.linkifyRawLocation(rawLocation, '');
       valueElement = createUnknownInternalLocationElement();
     } else if (type === 'string' && typeof description === 'string') {
       valueElement = createStringElement();
     } else if (type === 'function') {
       valueElement = Components.ObjectPropertiesSection.valueElementForFunctionDescription(description);
     } else if (type === 'object' && subtype === 'node' && description) {
       valueElement = createNodeElement();
     } else if (type === 'number' && description && description.indexOf('e') !== -1) {
       valueElement = createNumberWithExponentElement();
       if (parentElement)  // FIXME: do it in the caller.
         parentElement.classList.add('hbox');
     } else {
       valueElement = createElementWithClass('span', 'object-value-' + (subtype || type));
-      valueElement.setTextContentTruncatedIfNeeded(description);
       valueElement.title = description || '';
+      if (Runtime.experiments.isEnabled('objectPreviews') && value.preview && showPreview) {
+        var previewFormatter = new Components.RemoteObjectPreviewFormatter();
+        previewFormatter.appendObjectPreview(valueElement, value.preview, false /* isEntry */);
+      } else {
+        valueElement.setTextContentTruncatedIfNeeded(description);
+      }
     }
 
     if (wasThrown) {
       var wrapperElement = createElementWithClass('span', 'error value');
       wrapperElement.createTextChild('[' + Common.UIString('Exception') + ': ');
       wrapperElement.appendChild(valueElement);
       wrapperElement.createTextChild(']');
       return wrapperElement;
     }
     valueElement.classList.add('value');
@@ skipping 263 matching lines @@
         return;
 
       extraProperties = extraProperties || [];
       for (var i = 0; i < extraProperties.length; ++i)
         properties.push(extraProperties[i]);
 
       Components.ObjectPropertyTreeElement.populateWithProperties(
           treeElement, properties, internalProperties, skipProto, targetValue || value, linkifier, emptyPlaceholder);
     }
 
+    var generatePreview = Runtime.experiments.isEnabled('objectPreviews');
     if (flattenProtoChain)
-      value.getAllProperties(false, callback);
+      value.getAllProperties(false, generatePreview, callback);
     else
-      SDK.RemoteObject.loadFromObjectPerProto(value, callback);
+      SDK.RemoteObject.loadFromObjectPerProto(value, generatePreview, callback);
   }
 
   /**
    * @param {!UI.TreeElement} treeNode
    * @param {!Array.<!SDK.RemoteObjectProperty>} properties
    * @param {?Array.<!SDK.RemoteObjectProperty>} internalProperties
    * @param {boolean} skipProto
    * @param {?SDK.RemoteObject} value
    * @param {!Components.Linkifier=} linkifier
    * @param {?string=} emptyPlaceholder
@@ skipping 211 matching lines @@
     if (this.property.synthetic)
       this.nameElement.classList.add('synthetic-property');
 
     this._updatePropertyPath();
     this.nameElement.addEventListener('contextmenu', this._contextMenuFired.bind(this, this.property), false);
 
     var separatorElement = createElementWithClass('span', 'object-properties-section-separator');
     separatorElement.textContent = ': ';
 
     if (this.property.value) {
+      var showPreview = this.property.name !== '__proto__';
       this.valueElement = Components.ObjectPropertiesSection.createValueElementWithCustomSupport(
-          this.property.value, this.property.wasThrown, this.listItemElement, this._linkifier);
+          this.property.value, this.property.wasThrown, showPreview, this.listItemElement, this._linkifier);
       this.valueElement.addEventListener('contextmenu', this._contextMenuFired.bind(this, this.property), false);
     } else if (this.property.getter) {
       this.valueElement = Components.ObjectPropertyTreeElement.createRemoteObjectAccessorPropertySpan(
           this.property.parentObject, [this.property.name], this._onInvokeGetterClick.bind(this));
     } else {
       this.valueElement = createElementWithClass('span', 'object-value-undefined');
       this.valueElement.textContent = Common.UIString('<unreadable>');
       this.valueElement.title = Common.UIString('No property getter');
     }
 
@@ skipping 363 matching lines @@
     }
 
     /**
      * @param {?SDK.RemoteObject} arrayFragment
      * @param {boolean=} wasThrown
      * @this {Components.ArrayGroupingTreeElement}
      */
     function processArrayFragment(arrayFragment, wasThrown) {
       if (!arrayFragment || wasThrown)
         return;
-      arrayFragment.getAllProperties(false, processProperties.bind(this));
+      arrayFragment.getAllProperties(
+          false, Runtime.experiments.isEnabled('objectPreviews'), processProperties.bind(this));
     }
 
     /** @this {Components.ArrayGroupingTreeElement} */
     function processProperties(properties, internalProperties) {
       if (!properties)
         return;
 
       properties.sort(Components.ObjectPropertiesSection.CompareProperties);
       for (var i = 0; i < properties.length; ++i) {
         properties[i].parentObject = this._object;
@@ skipping 37 matching lines @@
     }
 
     /**
      * @param {?SDK.RemoteObject} arrayFragment
      * @param {boolean=} wasThrown
      * @this {Components.ArrayGroupingTreeElement}
      */
     function processObjectFragment(arrayFragment, wasThrown) {
       if (!arrayFragment || wasThrown)
         return;
-      arrayFragment.getOwnProperties(processProperties.bind(this));
+      arrayFragment.getOwnProperties(Runtime.experiments.isEnabled('objectPreviews'), processProperties.bind(this));
     }
 
     /**
      * @param {?Array.<!SDK.RemoteObjectProperty>} properties
      * @param {?Array.<!SDK.RemoteObjectProperty>=} internalProperties
      * @this {Components.ArrayGroupingTreeElement}
      */
     function processProperties(properties, internalProperties) {
       if (!properties)
         return;
@@ skipping 127 matching lines @@
     }
     var treeOutlineId = treeElement.treeOutline[Components.ObjectPropertiesSectionExpandController._treeOutlineId];
     result = treeOutlineId + (result ? ':' + result : '');
     treeElement[Components.ObjectPropertiesSectionExpandController._cachedPathSymbol] = result;
     return result;
   }
 };
 
 Components.ObjectPropertiesSectionExpandController._cachedPathSymbol = Symbol('cachedPath');
 Components.ObjectPropertiesSectionExpandController._treeOutlineId = Symbol('treeOutlineId');