add expand button to log items

scripts/logviewer/index.html

@@ -72,6 +72,31 @@
               grid-area: nav;
             }
 
+            .timeline li:not(.expanded) > ol {
+                display: none;
+            }
+
+            .timeline li > div {
+                display: flex;
+            }
+
+            .timeline .toggleExpanded {
+                border: none;
+                background: none;
+                width: 24px;
+                height: 24px;
+                margin-right: 4px;
+                cursor: pointer;
+            }
+
+            .timeline .toggleExpanded:before {
+                content: "▶";
+            }
+
+            .timeline li.expanded > div > .toggleExpanded:before {
+                content: "▼";
+            }
+
             .timeline ol {
                 list-style: none;
                 padding: 0 0 0 20px;
@@ -86,6 +111,13 @@
                 padding: 2px;
                 display: flex;
                 margin: 1px;
+                flex: 1;
+                cursor: pointer;
+            }
+
+
+            .timeline div.item:not(.has-children) {
+                margin-left: calc(24px + 4px + 1px);
             }
 
             .timeline div.item .caption {

scripts/logviewer/main.js

@@ -13,6 +13,10 @@ main.addEventListener("click", event => {
         selectedItemNode.classList.remove("selected");
         selectedItemNode = null;
     }
+    if (event.target.classList.contains("toggleExpanded")) {
+        const li = event.target.parentElement.parentElement;
+        li.classList.toggle("expanded");
+    } else {
         const itemNode = event.target.closest(".item");
         if (itemNode) {
             selectedItemNode = itemNode;
@@ -29,6 +33,7 @@ main.addEventListener("click", event => {
             }
             showItemDetails(item, parent);
         }
+    }
 });
 
 function showItemDetails(item, parent) {
@@ -96,17 +101,23 @@ function normalizeValueKey(key) {
 
 // returns the node and the total range (recursively) occupied by the node
 function itemToNode(item, path) {
+    const hasChildren = !!itemChildren(item)?.length;
     const className = {
         item: true,
+        "has-children": hasChildren,
         error: itemError(item),
         [`type-${itemType(item)}`]: !!itemType(item),
         [`level-${itemLevel(item)}`]: true,
     };
+
     const li = t.li([
+        t.div([
+            hasChildren ? t.button({className: "toggleExpanded"}) : "",
             t.div({className, "data-path": path.join("/")}, [
                 t.span({class: "caption"}, itemCaption(item)),
                 t.span({class: "duration"}, `(${itemDuration(item)}ms)`),
             ])
+        ])
     ]);
     if (itemChildren(item) && itemChildren(item).length) {
         li.appendChild(t.ol(itemChildren(item).map((item, i) => {