forked from mystiq/hydrogen-web
more compact layout, a few more detail fields and expand recursively but
This commit is contained in:
parent
be1650defc
commit
19df43ca3c
2 changed files with 27 additions and 4 deletions
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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() {
|
||||
|
|
Loading…
Reference in a new issue