more compact layout, a few more detail fields and expand recursively but

This commit is contained in:
Bruno Windels 2021-02-18 11:54:21 +01:00
parent be1650defc
commit 19df43ca3c
2 changed files with 27 additions and 4 deletions

View file

@ -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;
}

View file

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