167 lines
4.1 KiB
HTML
167 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<style type="text/css">
|
|
html, body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
font-family: sans-serif;
|
|
font-size: 1rem;
|
|
margin: 0;
|
|
display: grid;
|
|
grid-template-areas: "nav nav" "items details";
|
|
grid-template-columns: 1fr 400px;
|
|
grid-template-rows: auto 1fr;
|
|
min-height: 0;
|
|
}
|
|
|
|
main {
|
|
grid-area: items;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding: 8px;
|
|
}
|
|
|
|
main section h2 {
|
|
margin: 2px 14px;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
aside .values {
|
|
list-style: none;
|
|
padding: 0;
|
|
border: 1px solid lightgray;
|
|
}
|
|
|
|
aside .values span.key {
|
|
width: 30%;
|
|
display: block;
|
|
}
|
|
|
|
aside .values span.value {
|
|
width: 70%;
|
|
display: block;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
aside .values li {
|
|
display: flex;
|
|
}
|
|
|
|
aside .values li:not(:first-child) {
|
|
border-top: 1px solid lightgray;
|
|
}
|
|
|
|
nav {
|
|
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;
|
|
margin: 0;
|
|
}
|
|
|
|
.timeline div.item {
|
|
--hue: 100deg;
|
|
--brightness: 80%;
|
|
background-color: hsl(var(--hue), 60%, var(--brightness));
|
|
border: 1px solid hsl(var(--hue), 60%, calc(var(--brightness) - 40%));
|
|
border-radius: 4px;
|
|
padding: 2px;
|
|
display: flex;
|
|
margin: 1px;
|
|
flex: 1;
|
|
min-width: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
.timeline div.item:not(.has-children) {
|
|
margin-left: calc(24px + 4px + 1px);
|
|
}
|
|
|
|
.timeline div.item .caption {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
flex: 1;
|
|
}
|
|
|
|
.timeline div.item.level-3 {
|
|
--brightness: 90%;
|
|
}
|
|
|
|
.timeline div.item.level-6 {
|
|
--hue: 0deg !important;
|
|
}
|
|
|
|
.timeline div.item.type-network {
|
|
--hue: 30deg;
|
|
}
|
|
|
|
.timeline div.item.selected {
|
|
background-color: Highlight;
|
|
border-color: Highlight;
|
|
color: HighlightText;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav><button id="openFile">Open log file</button></nav>
|
|
<main></main>
|
|
<aside></aside>
|
|
<script type="module" src="main.js"></script>
|
|
</body>
|
|
</html>
|