diff --git a/scripts/logviewer/index.html b/scripts/logviewer/index.html index dbf54d70..aed67512 100644 --- a/scripts/logviewer/index.html +++ b/scripts/logviewer/index.html @@ -27,12 +27,17 @@ aside { grid-area: details; + padding: 8px; } aside h3 { word-wrap: anywhere; } + aside p { + margin: 2px 0; + } + aside .values li span { word-wrap: ; word-wrap: anywhere; @@ -41,17 +46,26 @@ aside .values { list-style: none; padding: 0; + border: 1px solid lightgray; } - aside .values span { - width: 50%; + aside .values span.key { + width: 30%; display: block; } + aside .values span.value { + width: 70%; + display: block; + padding-left: 10px; + } + aside .values li { display: flex; - border: ; - border-bottom: 1px solid lightgray; + } + + aside .values li:not(:first-child) { + border-top: 1px solid lightgray; } nav { diff --git a/scripts/logviewer/main.js b/scripts/logviewer/main.js index b2b8a399..2a805787 100644 --- a/scripts/logviewer/main.js +++ b/scripts/logviewer/main.js @@ -6,7 +6,9 @@ const main = document.querySelector("main"); let selectedItemNode; let rootItem; -document.querySelector("main").addEventListener("click", event => { +const logLevels = [undefined, "All", "Debug", "Detail", "Info", "Warn", "Error", "Fatal", "Off"]; + +main.addEventListener("click", event => { if (selectedItemNode) { selectedItemNode.classList.remove("selected"); selectedItemNode = null; @@ -30,12 +32,18 @@ document.querySelector("main").addEventListener("click", event => { }); function showItemDetails(item, parent) { + const parentOffset = itemStart(parent) ? `${itemStart(item) - itemStart(parent)}ms` : "none"; 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("Child count: "), itemChildren(item) ? `${itemChildren(item).length}` : "none"]), + t.p(t.strong("Values:")), t.ul({class: "values"}, Object.entries(itemValues(item)).map(([key, value]) => { return t.li([ - t.span(normalizeValueKey(key)), - t.span(value) + t.span({className: "key"}, normalizeValueKey(key)), + t.span({className: "value"}, value) ]); })) ]);