From 19df43ca3ccbfcf8074e42e044be26da5bf67461 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@element.io>
Date: Thu, 18 Feb 2021 11:54:21 +0100
Subject: [PATCH] more compact layout, a few more detail fields and expand
 recursively but

---
 scripts/logviewer/index.html |  7 +++++++
 scripts/logviewer/main.js    | 24 ++++++++++++++++++++----
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/scripts/logviewer/index.html b/scripts/logviewer/index.html
index 2245e7a8..e5f89cac 100644
--- a/scripts/logviewer/index.html
+++ b/scripts/logviewer/index.html
@@ -25,6 +25,11 @@
               overflow-y: auto;
             }
 
+            main section h2 {
+                margin: 2px 14px;
+                font-size: 1rem;
+            }
+
             aside {
               grid-area: details;
               padding: 8px;
@@ -100,6 +105,7 @@
             .timeline ol {
                 list-style: none;
                 padding: 0 0 0 20px;
+                margin: 0;
             }
 
             .timeline div.item {
@@ -112,6 +118,7 @@
                 display: flex;
                 margin: 1px;
                 flex: 1;
+                min-width: 0;
                 cursor: pointer;
             }
 
diff --git a/scripts/logviewer/main.js b/scripts/logviewer/main.js
index 5796e6f4..13d4975d 100644
--- a/scripts/logviewer/main.js
+++ b/scripts/logviewer/main.js
@@ -31,18 +31,22 @@ main.addEventListener("click", event => {
                     item = itemChildren(item)[i];
                 }
             }
-            showItemDetails(item, parent);
+            showItemDetails(item, parent, itemNode);
         }
     }
 });
 
-function showItemDetails(item, parent) {
+function showItemDetails(item, parent, itemNode) {
     const parentOffset = itemStart(parent) ? `${itemStart(item) - itemStart(parent)}ms` : "none";
+    const expandButton = t.button("Expand recursively");
+    expandButton.addEventListener("click", () => expandResursively(itemNode.parentElement.parentElement));
     const aside = t.aside([
         t.h3(itemCaption(item)),
-        t.p([t.strong("Parent offset: "), parentOffset]),
         t.p([t.strong("Log level: "), logLevels[itemLevel(item)]]),
         t.p([t.strong("Error: "), itemError(item) ? `${itemError(item).name} ${itemError(item).stack}` : "none"]),
+        t.p([t.strong("Parent offset: "), parentOffset]),
+        t.p([t.strong("Start: "), new Date(itemStart(item)).toString()]),
+        t.p([t.strong("Duration: "), `${itemDuration(item)}ms`]),
         t.p([t.strong("Child count: "), itemChildren(item) ? `${itemChildren(item).length}` : "none"]),
         t.p(t.strong("Values:")),
         t.ul({class: "values"}, Object.entries(itemValues(item)).map(([key, value]) => {
@@ -50,11 +54,23 @@ function showItemDetails(item, parent) {
                 t.span({className: "key"}, normalizeValueKey(key)),
                 t.span({className: "value"}, value)
             ]);
-        }))
+        })),
+        t.p(expandButton)
     ]);
     document.querySelector("aside").replaceWith(aside);
 }
 
+function expandResursively(li) {
+    li.classList.add("expanded");
+    const ol = li.querySelector("ol");
+    if (ol) {
+        const len = ol.children.length;
+        for (let i = 0; i < len; i += 1) {
+            expandResursively(ol.children[i]);
+        }
+    }
+}
+
 document.getElementById("openFile").addEventListener("click", loadFile);
 
 async function loadFile() {