DevTools: show array entries that are getters

third_party/WebKit/Source/devtools/front_end/components/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
  */
 Components.RemoteObjectPreviewFormatter = class {
   /**
    * @param {!Element} parentElement
    * @param {!Protocol.Runtime.ObjectPreview} preview
+   * @param {!SDK.RemoteObject=} objectForAccessing
    */
-  appendObjectPreview(parentElement, preview) {
+  appendObjectPreview(parentElement, preview, objectForAccessing) {
     var description = preview.description;
     if (preview.type !== 'object' || preview.subtype === 'null') {
       parentElement.appendChild(this.renderPropertyPreview(preview.type, preview.subtype, description));
       return;
     }
     if (description && preview.subtype !== 'array' && preview.subtype !== 'typedarray') {
       var text = preview.subtype ? description : this._abbreviateFullQualifiedClassName(description);
       parentElement.createTextChildren(text, ' ');
     }
     if (preview.entries)
       this._appendEntriesPreview(parentElement, preview);
     else
-      this._appendPropertiesPreview(parentElement, preview);
+      this._appendPropertiesPreview(parentElement, preview, objectForAccessing);
   }
 
   /**
    * @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);
     return abbreviatedDescription.join('.');
   }
 
   /**
    * @param {!Element} parentElement
    * @param {!Protocol.Runtime.ObjectPreview} preview
+   * @param {!SDK.RemoteObject=} objectForAccessing
    */
-  _appendPropertiesPreview(parentElement, preview) {
+  _appendPropertiesPreview(parentElement, preview, objectForAccessing) {
     var isArray = preview.subtype === 'array' || preview.subtype === 'typedarray';
     var arrayLength = SDK.RemoteObject.arrayLength(preview);
     var properties = preview.properties;
     if (isArray)
       properties = properties.slice().stableSort(compareIndexesFirst);
     else
       properties = properties.slice().stableSort(compareFunctionsLast);
 
     /**
      * @param {!Protocol.Runtime.PropertyPreview} a
@@ skipping 38 matching lines @@
       var property = properties[i];
       var name = property.name;
       if (!isArray || name !== String(i) || i >= arrayLength) {
         if (/^\s|\s$|^$|\n/.test(name))
           parentElement.createChild('span', 'name').createTextChildren('"', name.replace(/\n/g, '\u21B5'), '"');
         else
           parentElement.createChild('span', 'name').textContent = name;
         parentElement.createTextChild(': ');
       }
 
-      parentElement.appendChild(this._renderPropertyPreviewOrAccessor([property]));
+      parentElement.appendChild(this.renderPropertyPreviewOrAccessor([property], objectForAccessing));
     }
     if (preview.overflow)
       parentElement.createChild('span').textContent = '\u2026';
     parentElement.createTextChild(isArray ? ']' : '}');
   }
 
   /**
    * @param {!Element} parentElement
    * @param {!Protocol.Runtime.ObjectPreview} preview
    */
@@ skipping 10 matching lines @@
       }
       this.appendObjectPreview(parentElement, entry.value);
     }
     if (preview.overflow)
       parentElement.createChild('span').textContent = '\u2026';
     parentElement.createTextChild('}');
   }
 
   /**
    * @param {!Array.<!Protocol.Runtime.PropertyPreview>} propertyPath
+   * @param {!SDK.RemoteObject=} objectForAccessing
    * @return {!Element}
    */
-  _renderPropertyPreviewOrAccessor(propertyPath) {
+  renderPropertyPreviewOrAccessor(propertyPath, objectForAccessing) {
     var property = propertyPath.peekLast();
+    if (property.type === 'accessor' && objectForAccessing)
+      return this.formatAsAccessorProperty([property.name], objectForAccessing);
     return this.renderPropertyPreview(property.type, /** @type {string} */ (property.subtype), property.value);
   }
 
   /**
    * @param {string} type
    * @param {string=} subtype
    * @param {string=} description
    * @return {!Element}
    */
   renderPropertyPreview(type, subtype, description) {
@@ skipping 16 matching lines @@
     }
 
     if (type === 'object' && !subtype) {
       span.textContent = this._abbreviateFullQualifiedClassName(description);
       return span;
     }
 
     span.textContent = description;
     return span;
   }
+
+  /**
+   * @param {!Array.<string>} propertyPath
+   * @param {?SDK.RemoteObject} object
+   * @return {!Element}
+   */
+  formatAsAccessorProperty(propertyPath, object) {
+    var rootElement = Components.ObjectPropertyTreeElement.createRemoteObjectAccessorPropertySpan(
+        object, propertyPath, onInvokeGetterClick.bind(this));
+
+    /**
+     * @param {?SDK.RemoteObject} result
+     * @param {boolean=} wasThrown
+     * @this {Components.RemoteObjectPreviewFormatter}
+     */
+    function onInvokeGetterClick(result, wasThrown) {
+      if (!result)
+        return;
+      rootElement.removeChildren();
+      if (wasThrown) {
+        var element = rootElement.createChild('span');
+        element.textContent = Common.UIString('<exception>');
+        element.title = /** @type {string} */ (result.description);
+      } else {
+        // Make a PropertyPreview from the RemoteObject similar to the backend logic.
+        const maxLength = 100;
+        var type = result.type;
+        var subtype = result.subtype;
+        var description = '';
+        if (type !== 'function' && result.description) {
+          if (type === 'string' || subtype === 'regexp')
+            description = result.description.trimMiddle(maxLength);
+          else
+            description = result.description.trimEnd(maxLength);
+        }
+        rootElement.appendChild(this.renderPropertyPreview(type, subtype, description));
+      }
+    }
+
+    return rootElement;
+  }
 };