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() {