diff --git a/ui/logview.html b/ui/logview.html index e5dc7a4..3e4c0d9 100644 --- a/ui/logview.html +++ b/ui/logview.html @@ -16,6 +16,7 @@ --plan: #0550ae; --bar-bg: #f2f2f2; --hl: #fff8c5; + --bg-line: #f2dd2650; } @media (prefers-color-scheme: dark) { :root { @@ -28,6 +29,7 @@ --plan: #809fff; --bar-bg: #282828; --hl: #4a3f1a; + --bg-line: #f2dd2650; } } html, body { @@ -76,6 +78,7 @@ .ln-diag { color: var(--dim); } .ln-totals { color: var(--plan); } .ln-err { color: var(--fail); } + .ln-bg { background-color: var(--bg-line); } .fold-toggle { cursor: pointer; color: var(--plan); @@ -158,32 +161,41 @@ const lines = text.split("\n"); let pass = 0, fail = 0, skip = 0; - function renderLine(line) { + function renderLine(line, i) { + i += this.add; + var classes = [] const cls = classify(line); if (cls === "ln-pass") pass++; else if (cls === "ln-fail") fail++; else if (cls === "ln-skip") skip++; + if (cls) classes.push(cls); + if (this.bg == i) classes.push("ln-bg") const e = esc(line); - return cls ? `${e}` : e; + const c = classes.length > 0 ? `class="${classes.join(" ")}"` : ``; + return `${e}`; } // Group runs of deeply-nested "# #" diagnostic lines into a foldable // block (rendered expanded; collapse via the marker or "fold all"). // Totals lines are kept out so the summary stays visible. const foldable = l => l.startsWith("# #") && !/Totals: pass/.test(l); + const anchor = window.location.hash.match(/^#L(\d+)/); + this.bg = anchor && anchor.length > 1 ? anchor[1] : -1; + this.add = 0; const pieces = []; let i = 0; while (i < lines.length) { if (foldable(lines[i])) { let j = i; while (j < lines.length && foldable(lines[j])) j++; - const body = lines.slice(i, j).map(renderLine).join("\n"); + const body = lines.slice(i, j).map(renderLine, + {add: i, bg: bg}).join("\n"); pieces.push( `${j - i} lines` + `\n${body}`); i = j; } else { - pieces.push(renderLine(lines[i])); + pieces.push(renderLine(lines[i], i)); i++; } } @@ -199,6 +211,11 @@ out.addEventListener("click", e => { const t = e.target.closest(".fold-toggle"); if (t) t.parentElement.classList.toggle("open"); + + // Set #Line in url + var id = e.target.id; + if (id && id.startsWith("L")) + history.pushState(null, null, "#" + id); }); // Fold/unfold all button.