DevTools: Show preview in console of ES6 Map, Set, WeakMap and WeakSet entries.

Source/devtools/front_end/console/ConsoleViewMessage.js

 /*
  * Copyright (C) 2011 Google Inc.  All rights reserved.
  * Copyright (C) 2007, 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
@@ skipping 33 matching lines @@
     this._nestingLevel = nestingLevel;
 
     /** @type {!Array.<!WebInspector.DataGrid>} */
     this._dataGrids = [];
     /** @type {!Map.<!WebInspector.DataGrid, ?Element>} */
     this._dataGridParents = new Map();
 
     /** @type {!Object.<string, function(!WebInspector.RemoteObject, !Element, boolean=)>} */
     this._customFormatters = {
         "object": this._formatParameterAsObject,
-        "array":  this._formatParameterAsArray,
-        "node":   this._formatParameterAsNode,
+        "array": this._formatParameterAsArray,
+        "node": this._formatParameterAsNode,
+        "map": this._formatParameterAsObject,
+        "set": this._formatParameterAsObject,
         "string": this._formatParameterAsString
     };
 }
 
 WebInspector.ConsoleViewMessage.prototype = {
     /**
      * @return {?WebInspector.Target}
      */
     _target: function()
     {
@@ skipping 329 matching lines @@
             elem.addEventListener("contextmenu", this._contextMenuEventFired.bind(this, obj), false);
     },
 
     /**
      * @param {!WebInspector.RemoteObject} obj
      * @param {!Element} elem
      * @param {boolean=} includePreview
      */
     _formatParameterAsObject: function(obj, elem, includePreview)
     {
-        this._formatParameterAsArrayOrObject(obj, obj.description || "", elem, includePreview);
+        this._formatParameterAsArrayOrObject(obj, elem, includePreview);
     },
 
     /**
      * @param {!WebInspector.RemoteObject} obj
-     * @param {string} description
      * @param {!Element} elem
      * @param {boolean=} includePreview
      */
-    _formatParameterAsArrayOrObject: function(obj, description, elem, includePreview)
+    _formatParameterAsArrayOrObject: function(obj, elem, includePreview)
     {
         var titleElement = document.createElement("span");
-        if (description)
-            titleElement.createTextChild(description);
         if (includePreview && obj.preview) {
             titleElement.classList.add("console-object-preview");
-            var lossless = this._appendObjectPreview(obj, description, titleElement);
+            var lossless = this._appendObjectPreview(titleElement, obj.preview, obj);
             if (lossless) {
                 elem.appendChild(titleElement);
                 titleElement.addEventListener("contextmenu", this._contextMenuEventFired.bind(this, obj), false);
                 return;
             }
+        } else {
+            titleElement.createTextChild(obj.description || "");
         }
         var section = new WebInspector.ObjectPropertiesSection(obj, titleElement);
         section.enableContextMenu();
         elem.appendChild(section.element);
 
         var note = section.titleElement.createChild("span", "object-info-state-note");
         note.title = WebInspector.UIString("Object state below is captured upon first expansion");
     },
 
     /**
      * @param {!WebInspector.RemoteObject} obj
      * @param {!Event} event
      */
     _contextMenuEventFired: function(obj, event)
     {
         var contextMenu = new WebInspector.ContextMenu(event);
         contextMenu.appendApplicableItems(obj);
         contextMenu.show();
     },
 
     /**
-     * @param {!WebInspector.RemoteObject} obj
-     * @param {string} description
-     * @param {!Element} titleElement
+     * @param {!Element} parentElement
+     * @param {!RuntimeAgent.ObjectPreview} preview
+     * @param {?WebInspector.RemoteObject} object
      * @return {boolean} true iff preview captured all information.
      */
-    _appendObjectPreview: function(obj, description, titleElement)
+    _appendObjectPreview: function(parentElement, preview, object)
     {
-        var preview = obj.preview;
-        var isArray = obj.subtype === "array";
+        var description = preview.description;
+        if (preview.type !== "object" || preview.subtype === "null") {
+            parentElement.appendChild(this._renderPropertyPreview(preview.type, preview.subtype, description));
+            return true;
+        }
+        if (description && preview.subtype !== "array")
+            parentElement.createTextChildren(description, " ");
+        if (preview.entries)
+            return this._appendEntriesPreview(parentElement, preview);
+        return this._appendPropertiesPreview(parentElement, preview, object);
+    },
 
-        if (description)
-            titleElement.createTextChild(" ");
-        titleElement.createTextChild(isArray ? "[" : "{");
+    /**
+     * @param {!Element} parentElement
+     * @param {!RuntimeAgent.ObjectPreview} preview
+     * @param {?WebInspector.RemoteObject} object
+     * @return {boolean} true iff preview captured all information.
+     */
+    _appendPropertiesPreview: function(parentElement, preview, object)
+    {
+        var isArray = preview.subtype === "array";
+        parentElement.createTextChild(isArray ? "[" : "{");
         for (var i = 0; i < preview.properties.length; ++i) {
             if (i > 0)
-                titleElement.createTextChild(", ");
+                parentElement.createTextChild(", ");
 
             var property = preview.properties[i];
             var name = property.name;
             if (!isArray || name != i) {
                 if (/^\s|\s$|^$|\n/.test(name))
-                    titleElement.createChild("span", "name").createTextChildren("\"", name.replace(/\n/g, "\u21B5"), "\"");
+                    parentElement.createChild("span", "name").createTextChildren("\"", name.replace(/\n/g, "\u21B5"), "\"");
                 else
-                    titleElement.createChild("span", "name").textContent = name;
-                titleElement.createTextChild(": ");
+                    parentElement.createChild("span", "name").textContent = name;
+                parentElement.createTextChild(": ");
             }
 
-            titleElement.appendChild(this._renderPropertyPreviewOrAccessor(obj, [property]));
+            parentElement.appendChild(this._renderPropertyPreviewOrAccessor(object, [property]));
         }
         if (preview.overflow)
-            titleElement.createChild("span").textContent = "\u2026";
-        titleElement.createTextChild(isArray ? "]" : "}");
+            parentElement.createChild("span").textContent = "\u2026";
+        parentElement.createTextChild(isArray ? "]" : "}");
         return preview.lossless;
     },
 
     /**
-     * @param {!WebInspector.RemoteObject} object
+     * @param {!Element} parentElement
+     * @param {!RuntimeAgent.ObjectPreview} preview
+     * @return {boolean} true iff preview captured all information.
+     */
+    _appendEntriesPreview: function(parentElement, preview)
+    {
+        var lossless = preview.lossless && !preview.properties.length;
+        parentElement.createTextChild("{");
+        for (var i = 0; i < preview.entries.length; ++i) {
+            if (i > 0)
+                parentElement.createTextChild(", ");
+
+            var entry = preview.entries[i];
+            if (entry.key) {
+                this._appendObjectPreview(parentElement, entry.key, null);
+                parentElement.createTextChild(" => ");
+            }
+            this._appendObjectPreview(parentElement, entry.value, null);
+        }
+        if (preview.overflow)
+            parentElement.createChild("span").textContent = "\u2026";
+        parentElement.createTextChild("}");
+        return lossless;
+    },
+
+    /**
+     * @param {?WebInspector.RemoteObject} object
      * @param {!Array.<!RuntimeAgent.PropertyPreview>} propertyPath
      * @return {!Element}
      */
     _renderPropertyPreviewOrAccessor: function(object, propertyPath)
     {
         var property = propertyPath.peekLast();
         if (property.type === "accessor")
             return this._formatAsAccessorProperty(object, propertyPath.select("name"), false);
         return this._renderPropertyPreview(property.type, /** @type {string} */ (property.subtype), property.value);
     },
 
     /**
      * @param {string} type
      * @param {string=} subtype
      * @param {string=} description
      * @return {!Element}
      */
     _renderPropertyPreview: function(type, subtype, description)
     {
         var span = document.createElementWithClass("span", "console-formatted-" + (subtype || type));
+        description = description || "";
 
         if (type === "function") {
             span.textContent = "function";
             return span;
         }
 
-        if (type === "object" && subtype === "regexp") {
-            span.textContent = description;
-            return span;
-        }
-
         if (type === "object" && subtype === "node" && description) {
             span.classList.add("console-formatted-preview-node");
             WebInspector.DOMPresentationUtils.createSpansForNodeTitle(span, description);
             return span;
         }
 
         if (type === "string") {
             span.createTextChildren("\"", description.replace(/\n/g, "\u21B5"), "\"");
             return span;
         }
@@ skipping 38 matching lines @@
         return this._message.type !== WebInspector.ConsoleMessage.MessageType.DirXML && !!array.preview;
     },
 
     /**
      * @param {!WebInspector.RemoteObject} array
      * @param {!Element} elem
      */
     _formatParameterAsArray: function(array, elem)
     {
         if (this.useArrayPreviewInFormatter(array)) {
-            this._formatParameterAsArrayOrObject(array, "", elem, true);
+            this._formatParameterAsArrayOrObject(array, elem, true);
             return;
         }
 
         const maxFlatArrayLength = 100;
         if (this._message.isOutdated || array.arrayLength() > maxFlatArrayLength)
             this._formatParameterAsObject(array, elem, false);
         else
             array.getOwnProperties(this._printArray.bind(this, array, elem));
     },
 
@@ skipping 138 matching lines @@
      * @param {!WebInspector.RemoteObject} output
      * @return {!Element}
      */
     _formatAsArrayEntry: function(output)
     {
         // Prevent infinite expansion of cross-referencing arrays.
         return this._formatParameter(output, output.subtype === "array", false);
     },
 
     /**
-     * @param {!WebInspector.RemoteObject} object
+     * @param {?WebInspector.RemoteObject} object
      * @param {!Array.<string>} propertyPath
      * @param {boolean} isArrayEntry
      * @return {!Element}
      */
     _formatAsAccessorProperty: function(object, propertyPath, isArrayEntry)
     {
         var rootElement = WebInspector.ObjectPropertyTreeElement.createRemoteObjectAccessorPropertySpan(object, propertyPath, onInvokeGetterClick.bind(this));
 
         /**
          * @param {?WebInspector.RemoteObject} result
@@ skipping 509 matching lines @@
     {
         if (!this._wrapperElement) {
             WebInspector.ConsoleViewMessage.prototype.toMessageElement.call(this);
             this._wrapperElement.classList.toggle("collapsed", this._collapsed);
         }
         return this._wrapperElement;
     },
 
     __proto__: WebInspector.ConsoleViewMessage.prototype
 }