make objects in console nicer, prepare context menu

src/playground_console.js

@@ -30,7 +30,25 @@ export class PlaygroundConsole {
         return typeof arg;
     }
 
-    addKeyValue(_entryType, parent, property, arg) {
+    stringifyObject(obj) {
+        return `Object { ${Object.keys(obj).join(", ")} }`.replace(/\s\s/, " ");
+    }
+
+    getValueString(value) {
+        if (typeof value === "function") {
+            return `function ${value.name}()`;
+        }
+
+        if (typeof value === "object" && value !== null) {
+            return this.stringifyObject(value).length < 50
+                ? this.stringifyObject(value)
+                : "Object { ... }";
+        }
+
+        return `${value}`;
+    }
+
+    addKeyValue(_entryType, parent, property, value) {
         if (property) {
             const keyEl = document.createElement("span");
             keyEl.className = property === "__proto__" ? "prototype" : "property";
@@ -38,12 +56,10 @@ export class PlaygroundConsole {
             parent.appendChild(keyEl);
         }
 
-        const argString = typeof arg === "function" ? `function ${arg.name}()` : `${arg}`;
+        const valueEl = document.createElement("span");
-
+        valueEl.textContent = this.getValueString(value);
-        const value = document.createElement("span");
+        valueEl.dataset.type = this.getTypeName(value);
-        value.textContent = argString;
+        parent.appendChild(valueEl);
-        value.dataset.type = this.getTypeName(arg);
-        parent.appendChild(value);
     }
 
     addEntry(entryType, property, parent, ...args) {
@@ -94,7 +110,7 @@ export class PlaygroundConsole {
 
                 parent.appendChild(details);
 
-                return;
+                return details;
             }
 
             // For non-object values, show it directly
@@ -102,11 +118,19 @@ export class PlaygroundConsole {
             wrapper.className = entryType;
             this.addKeyValue(entryType, wrapper, property, arg);
             parent.appendChild(wrapper);
+
+            return wrapper;
         }
     }
 
     addTopLevelEntry(entryType, ...args) {
-        this.addEntry(entryType, "", this.elem, ...args);
+        const elem = this.addEntry(entryType, "", this.elem, ...args);
+
+        elem.addEventListener("contextmenu", (ev) => {
+            // TODO add context menu
+
+            ev.preventDefault();
+        });
 
         this.elem.scrollTop = this.elem.scrollHeight;
     }

style.css

@@ -174,6 +174,12 @@ div#buttons button {
     color: #ff9800;
 }
 
+#console .log:hover,
+#console .info:hover,
+#console .debug:hover {
+    background-color: #242424;
+}
+
 #console .property {
     color: #9c27b0;
 }