<!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;
overflow-y: auto;
aside {
grid-area: details;
padding: 8px;
aside h3 {
word-wrap: anywhere;
aside p {
margin: 2px 0;
aside .values li span {
word-wrap: ;
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%;
padding-left: 10px;
aside .values li {
display: flex;
aside .values li:not(:first-child) {
border-top: 1px solid lightgray;
nav {
grid-area: nav;
.timeline ol {
padding: 0 0 0 20px;
.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;
margin: 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>
