210 lines
5.3 KiB
HTML
210 lines
5.3 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;
|
|
padding: 4px;
|
|
}
|
|
|
|
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;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
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 .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;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
|
|
.timeline .item:not(.has-children) {
|
|
margin-left: calc(24px + 4px + 1px);
|
|
}
|
|
|
|
.timeline .item .caption {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
flex: 1;
|
|
}
|
|
|
|
.timeline .item.level-3 {
|
|
--brightness: 90%;
|
|
}
|
|
|
|
.timeline .item.level-2 {
|
|
--brightness: 95%;
|
|
}
|
|
|
|
.timeline .item.level-5 {
|
|
--brightness: 80%;
|
|
}
|
|
|
|
.timeline .item.level-6, .timeline .item.level-7 {
|
|
--hue: 0deg !important;
|
|
}
|
|
|
|
.timeline .item.level-7 {
|
|
--brightness: 50%;
|
|
color: white;
|
|
}
|
|
|
|
.timeline .item.type-network {
|
|
--hue: 30deg;
|
|
}
|
|
|
|
.timeline .item.type-navigation {
|
|
--hue: 200deg;
|
|
}
|
|
|
|
.timeline .item.selected {
|
|
background-color: Highlight;
|
|
border-color: Highlight;
|
|
color: HighlightText;
|
|
}
|
|
|
|
.timeline .item.highlighted {
|
|
background-color: fuchsia;
|
|
color: white;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
#highlight {
|
|
width: 300px;
|
|
}
|
|
|
|
nav form {
|
|
display: inline;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<button id="openFile">Open log file</button>
|
|
<button id="collapseAll">Collapse all</button>
|
|
<button id="hideCollapsed">Hide collapsed root items</button>
|
|
<button id="hideHighlightedSiblings" title="Hide collapsed siblings of highlighted">Hide non-highlighted</button>
|
|
<button id="showAll">Show all</button>
|
|
<form id="highlightForm">
|
|
<input type="text" id="highlight" name="highlight" placeholder="Highlight a search term" autocomplete="on">
|
|
<output id="highlightMatches"></output>
|
|
</form>
|
|
</nav>
|
|
<main></main>
|
|
<aside></aside>
|
|
<script type="module" src="main.js"></script>
|
|
</body>
|
|
</html>
|