From 7ba8d0616c00e47c95e70c86a4f2ee7aac990711 Mon Sep 17 00:00:00 2001
From: Reimar <mail@reim.ar>
Date: Thu, 16 Oct 2025 15:37:11 +0200
Subject: [PATCH] make objects in console nicer, prepare context menu

---
 src/playground_console.js | 42 ++++++++++++++++++++++++++++++---------
 style.css                 |  6 ++++++
 2 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/src/playground_console.js b/src/playground_console.js
index 7b82ab7..2e3e71c 100644
--- a/src/playground_console.js
+++ b/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 value = document.createElement("span");
-        value.textContent = argString;
-        value.dataset.type = this.getTypeName(arg);
-        parent.appendChild(value);
+        const valueEl = document.createElement("span");
+        valueEl.textContent = this.getValueString(value);
+        valueEl.dataset.type = this.getTypeName(value);
+        parent.appendChild(valueEl);
     }
 
     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;
     }
diff --git a/style.css b/style.css
index de9f720..6f813b7 100644
--- a/style.css
+++ b/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;
 }