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

Source/devtools/front_end/sdk/RemoteObject.js

Index: Source/devtools/front_end/sdk/RemoteObject.js
diff --git a/Source/devtools/front_end/sdk/RemoteObject.js b/Source/devtools/front_end/sdk/RemoteObject.js
index 427f4cafbd56e199f37bc8772c673fbda15a76f2..adae90d55830ba590aaf263c30524379946b8f3c 100644
--- a/Source/devtools/front_end/sdk/RemoteObject.js
+++ b/Source/devtools/front_end/sdk/RemoteObject.js
@@ -867,22 +867,44 @@ WebInspector.LocalJSONObject.prototype = {
             return this._cachedDescription;
 
         /**
+         * @param {?WebInspector.RemoteObject} value
+         * @return {string}
+         */
+        function formatValue(value)
+        {
+            if (!value)
+                return "undefined";
+            var description = value.description || "";
+            if (value.type === "string")
+                return "\"" + description.replace(/\n/g, "\u21B5") + "\"";
+            return description;
+        }
+
+        /**
          * @param {!WebInspector.RemoteObjectProperty} property
+         * @return {string}
          */
         function formatArrayItem(property)
         {
-            return property.value.description;
+            return formatValue(property.value);
         }
 
         /**
          * @param {!WebInspector.RemoteObjectProperty} property
+         * @return {string}
          */
         function formatObjectItem(property)
         {
-            return property.name + ":" + property.value.description;
+            var name = property.name;
+            if (/^\s|\s$|^$|\n/.test(name))
+                name = "\"" + name.replace(/\n/g, "\u21B5") + "\"";

[yurys, 2014/09/14 12:42:03]

Shouldn't we always show the name quoted? It may be confusing when you have only
some of the keys in quotes. WDYT?

[aandrey, 2014/09/15 06:51:57]

There is quite a few places where we do this. The idea was that we should use ""
only when it's really needed (see the regex pattern).

+            return name + ": " + formatValue(property.value);
         }
 
-        if (this.type === "object") {
+        var children = this._children();
+        if (children.length === 2 && children[0].name === "key" && children[1].name === "value") {
+            this._cachedDescription = "{" + formatValue(children[0].value) + " => " + formatValue(children[1].value) + "}";

[yurys, 2014/09/14 12:42:03]

Should this go under case "map" below?

[aandrey, 2014/09/15 06:51:57]

This is a map entry, simulated by a local RemoteObject (i.e. this.subtype is
undefined).

+        } else if (this.type === "object") {
             switch (this.subtype) {
             case "array":
                 this._cachedDescription = this._concatenate("[", "]", formatArrayItem);
@@ -896,8 +918,9 @@ WebInspector.LocalJSONObject.prototype = {
             default:
                 this._cachedDescription = this._concatenate("{", "}", formatObjectItem);
             }
-        } else
+        } else {
             this._cachedDescription = String(this._value);
+        }
 
         return this._cachedDescription;
     },
@@ -910,7 +933,7 @@ WebInspector.LocalJSONObject.prototype = {
      */
     _concatenate: function(prefix, suffix, formatProperty)
     {
-        const previewChars = 100;
+        var previewChars = 100;
 
         var buffer = prefix;
         var children = this._children();