<!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>