path_coverage 0.0.1 → 0.0.2

data/lib/path_coverage/html/style.css

@@ -0,0 +1,334 @@
+/* Blue (seen both ways) and orange (missing) stay distinct for
+   red-green colour blindness; states also differ in form. */
+:root {
+  --bg: #FBFBFC;
+  --surface: #FFFFFF;
+  --panel: #F2F4F7;
+  --fg: #1C2230;
+  --muted: #5B6577;
+  --rule: #D5DAE2;
+  --ok: #1F5FBF;
+  --ok-tint: #E6EEFA;
+  --warn: #A35200;
+  --bad: #B54708;
+  --on-status: #FFFFFF;
+  --link: #1F5FBF;
+  /* The tree is inverted from the page, so it never reads as
+     more source lines. */
+  --tree-bg: #1E2638;
+  --tree-fg: #E8ECF4;
+  --tree-muted: #A3AEC2;
+  --tree-rule: #3A4560;
+  --tree-gap: #F5A25D;
+  --font-body: "Helvetica Neue", Arial, sans-serif;
+  --font-code: Menlo, Consolas, "DejaVu Sans Mono", monospace;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #12151C; --surface: #181C25; --panel: #212633; --fg: #E4E8EF;
+    --muted: #9AA4B5; --rule: #323949; --ok: #7FB0FF; --ok-tint: #1A2740;
+    --warn: #F0A35E; --bad: #F08A3C; --on-status: #12151C; --link: #7FB0FF;
+    --tree-bg: #E6EAF2; --tree-fg: #1C2230; --tree-muted: #4E5869;
+    --tree-rule: #BCC4D2; --tree-gap: #A8480A;
+    color-scheme: dark;
+  }
+}
+body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 14px; }
+a { color: var(--link); }
+.page {
+  max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px;
+  padding: 40px max(16px, env(safe-area-inset-right, 0px)) 64px max(16px, env(safe-area-inset-left, 0px));
+}
+h1 { margin: 0; font-size: 24px; font-weight: 600; }
+.box { border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); overflow-x: auto; }
+table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
+th, td { padding: 10px 16px; text-align: left; }
+th { background: var(--panel); }
+td { border-top: 1px solid var(--rule); }
+td:first-child { font-family: var(--font-code); }
+.num, td:not(:first-child) { text-align: right; }
+th button {
+  font: 600 13px var(--font-body); color: var(--fg); background: none; border: 0;
+  padding: 4px 0; cursor: pointer;
+}
+th button::after { content: " \2195"; color: var(--muted); }
+th[aria-sort="ascending"] button::after { content: " \25B2"; color: var(--fg); }
+th[aria-sort="descending"] button::after { content: " \25BC"; color: var(--fg); }
+th button:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
+
+/* A file's page: plain source; on lines holding a condition the
+   line numbers are one button. Every number has the same box, so
+   digits stay aligned whether or not they are on a button. */
+.back { margin: 0; font-size: 13px; }
+h1.path { font-family: var(--font-code); font-size: 18px; }
+/* The back link, path and site lists stick together as one
+   header. */
+.head {
+  position: sticky; top: 0; z-index: 5;
+  display: flex; flex-direction: column; gap: 10px;
+  margin: 0 -16px; padding: 12px 16px; background: var(--bg);
+  border-bottom: 1px solid var(--rule);
+}
+.jumps { display: flex; flex-direction: column; gap: 8px; }
+.jump-list { display: flex; gap: 6px; align-items: center; overflow-x: auto; white-space: nowrap; min-width: 0; }
+.jump-label { width: 64px; flex-shrink: 0; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
+a.jump {
+  font: 600 12px/22px var(--font-code); padding: 0 9px; border-radius: 999px;
+  text-decoration: none; border: 1px solid; font-variant-numeric: tabular-nums;
+}
+/* A site's jump wears the condition tint, edged in its status
+   colour on the top and left only, as its line's button is. */
+a.jump[data-status] { background: var(--cond-tint); border-right-color: transparent; border-bottom-color: transparent; }
+a.jump[data-status="covered"] { color: var(--ok); border-top-color: var(--ok); border-left-color: var(--ok); }
+a.jump[data-status="gaps"] { color: var(--bad); border-top-color: var(--bad); border-left-color: var(--bad); }
+a.jump:focus-visible, .nav a:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
+/* The source pane's border and background start after the nav
+   column, so the arrows sit outside the pane yet scroll with
+   their line. */
+.box:has(> .code) { position: relative; isolation: isolate; border: 0; background: none; border-radius: 0; }
+.box:has(> .code)::before {
+  content: ""; position: absolute; inset: 0 0 0 26px; z-index: -1;
+  border: 1px solid var(--rule); border-radius: 8px;
+  background: var(--surface); pointer-events: none;
+}
+/* The previous-gap arrow sits above the next, each half a line
+   tall, keeping the gutter narrow. */
+.nav { display: flex; flex-direction: column; justify-content: center; width: 26px; flex-shrink: 0; }
+.nav a { width: 22px; text-align: center; line-height: 14px; font-size: 12px; color: var(--bad); text-decoration: none; }
+.nav a:hover { color: var(--fg); }
+/* Clears the sticky header when a link jumps to a line. */
+.lineno { scroll-margin-top: 190px; }
+button.lnum:has(.lineno:target) { outline: 3px solid var(--link); outline-offset: 1px; }
+.code { font-family: var(--font-code); font-size: 13px; line-height: 32px; padding: 10px 0; min-width: 720px; }
+.line, .block { display: flex; align-items: flex-start; }
+.srcs { display: flex; flex-direction: column; }
+.src { white-space: pre; }
+.lineno {
+  display: block; width: 52px; padding-right: 20px; text-align: right;
+  color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0;
+}
+button.lnum {
+  display: flex; flex-direction: column; flex-shrink: 0; margin: 4px 8px 4px 0; padding: 0;
+  border: 1px solid transparent; border-radius: 6px; cursor: pointer;
+  font: 600 13px/24px var(--font-code); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
+}
+button.lnum { position: relative; }
+button.lnum::before {
+  content: "\25B8"; position: absolute; left: 7px; top: 4px;
+  font-size: 11px; line-height: 24px; transition: transform 120ms;
+}
+button.lnum[aria-expanded="true"]::before { transform: rotate(90deg); }
+/* With a site count the count and the triangle share the
+   button's height, one 11px line each. */
+button.lnum:has(.site-count)::before { top: 12px; line-height: 11px; }
+/* On a button over two or more lines the triangle sits at the
+   very bottom. */
+button.lnum:has(.lineno + .lineno)::before { top: auto; bottom: 2px; line-height: 11px; }
+.site-count {
+  position: absolute; left: 7px; top: 1px;
+  font-size: 9px; line-height: 11px; font-weight: 700;
+}
+/* The rule between sites spans the tree's full width, through
+   its 16px side padding. */
+.site + .site {
+  border-top: 1px solid var(--tree-rule); margin: 6px -16px 0; padding: 6px 16px 0;
+}
+button.lnum .lineno { width: 50px; padding-right: 11px; color: inherit; line-height: 32px; margin: -4px 0; }
+/* A site's button wears the condition tint, edged in its
+   status colour on the top and left only, as a method's bar is. */
+button.lnum[data-status] { box-shadow: none; background: var(--cond-tint); border-right-color: transparent; border-bottom-color: transparent; }
+button.lnum[data-status="covered"] { color: var(--ok); border-top-color: var(--ok); border-left-color: var(--ok); }
+button.lnum[data-status="gaps"] { color: var(--bad); border-top-color: var(--bad); border-left-color: var(--bad); }
+button.lnum:hover { filter: brightness(1.1); }
+button.lnum:focus-visible { outline: 3px solid var(--link); outline-offset: 1px; }
+.tree {
+  margin: 4px 20px 12px 120px; padding: 10px 16px; border: 1px solid var(--tree-rule);
+  border-radius: 8px; background: var(--tree-bg); color: var(--tree-fg); line-height: 30px;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
+}
+/* A row is its branch and label, then one fixed-width column per
+   path: flowing by column, each cell after the label takes the
+   next path's column, however many paths the site has. */
+.row {
+  display: grid; grid-template-columns: auto minmax(200px, 1fr);
+  grid-auto-flow: column; grid-auto-columns: 32px; column-gap: 16px;
+}
+.operator { grid-column: span 2; font-weight: 600; }
+.row[data-subtree] .operator { grid-column: auto; }
+.row .arm { white-space: pre; font-weight: 600; }
+.branch { white-space: pre; color: var(--tree-muted); margin-right: -16px; }
+.row .text { white-space: pre; }
+/* A branch glyph drawn as a cell a whole row tall: v a vertical
+   line, t a vertical with a stub right, l the top half of a
+   vertical with a stub right, h a horizontal, s nothing. */
+.bx { display: inline-block; width: 1ch; height: 30px; vertical-align: top; --stroke: linear-gradient(currentColor, currentColor); }
+.bx[data-bx="v"] { background: var(--stroke) 50% 0 / 1px 100% no-repeat; }
+.bx[data-bx="t"] { background: var(--stroke) 50% 0 / 1px 100% no-repeat, var(--stroke) 100% 50% / 50% 1px no-repeat; }
+.bx[data-bx="l"] { background: var(--stroke) 50% 0 / 1px 50% no-repeat, var(--stroke) 100% 50% / 50% 1px no-repeat; }
+.bx[data-bx="h"] { background: var(--stroke) 0 50% / 100% 1px no-repeat; }
+/* Each path's count heads its column, orange for a path never
+   taken; a leaf's T or F on that path sits in a chip, as in a
+   path grid, and a blank means the path never reached it. */
+.row .count { text-align: center; font-variant-numeric: tabular-nums; color: var(--ok); font-weight: 600; }
+.row .count.never { color: var(--tree-gap); }
+.row .cell { text-align: center; }
+.row .cell:not(:empty) {
+  align-self: center; line-height: 22px; border-radius: 3px;
+  background: var(--surface); color: var(--fg); font: 600 12px var(--font-code);
+}
+
+/* SPIKE: the code and a rail share the box; each tree sits in
+   the rail, level with its site (its top set by side.js). */
+body[data-layout="beside"] .page { max-width: 1800px; }
+/* The code sits between two rails, condition trees on the left
+   and path grids on the right, each as wide as --cc-rail or
+   --pc-rail. Both are 0 until one opens; registered, so they
+   animate, sliding the code and its frame aside together. */
+@property --cc-rail { syntax: "<length>"; inherits: true; initial-value: 0px; }
+@property --pc-rail { syntax: "<length>"; inherits: true; initial-value: 0px; }
+body[data-layout="beside"] { transition: --cc-rail 250ms ease, --pc-rail 250ms ease; }
+body[data-open="cc"] { --cc-rail: 560px; }
+body[data-open="pc"] { --pc-rail: 560px; }
+body[data-layout="beside"] .box:has(> .code) {
+  display: grid; column-gap: 12px;
+  grid-template-columns: var(--cc-rail) minmax(0, 1fr) var(--pc-rail);
+}
+/* Every row is as wide as the longest line (or the pane, if
+   wider), so a site's band and outline, and a lit line, reach
+   past the code when it scrolls sideways. */
+body[data-layout="beside"] .code {
+  min-width: 0; overflow-x: auto;
+  display: grid; grid-template-columns: minmax(max-content, 1fr);
+}
+body[data-layout="beside"] .box:has(> .code)::before {
+  left: calc(var(--cc-rail) + 38px); right: calc(var(--pc-rail) + 12px);
+}
+.rail { position: relative; min-width: 0; }
+/* The rail's tree sits on the condition tint, in the page's own
+   text colours, as a path grid sits on the path tint. */
+.rail .tree {
+  --tree-bg: var(--cond-tint); --tree-fg: var(--fg); --tree-muted: var(--muted);
+  --tree-rule: var(--rule); --tree-gap: var(--bad);
+}
+/* The rail's tree has narrower columns, to fit its width; a
+   thin rule under each site's counts row, across the tree's
+   full width through its 16px side padding. */
+.rail .row { grid-template-columns: auto minmax(120px, 1fr); grid-auto-columns: 26px; column-gap: 8px; }
+.rail .site > .row:first-child {
+  border-bottom: 1px solid var(--tree-rule); margin: 0 -16px 6px; padding: 0 16px 4px;
+}
+.rail .tree { position: absolute; left: 0; right: 0; margin: 0; z-index: 2; font-family: var(--font-code); font-size: 13px; }
+/* Beside, a site's whole block, its lines' code included, is
+   tinted by status and opens its tree, so each tree lines up
+   with a band the eye can follow across. */
+:root { --bad-tint: #FBE6D6; }
+@media (prefers-color-scheme: dark) { :root { --bad-tint: #3A2416; } }
+/* Everything a site's grid draws has this tint, as everything
+   a method's grid draws has --path-tint; status is only ever
+   the orange or blue of an edge. */
+:root { --cond-tint: #E2F2D3; }
+@media (prefers-color-scheme: dark) { :root { --cond-tint: #26361A; } }
+body[data-layout="beside"] .block { cursor: pointer; border-radius: 6px; }
+/* A site's own characters are tinted, not its whole lines: the
+   expression is what its grid is about. */
+/* The padding stretches the tint to the full 32px line, as tall
+   as a method's band, without moving the text. */
+mark.site { color: inherit; border-radius: 3px; padding: 8px 0; }
+mark.site { background: var(--cond-tint); }
+mark.site[data-status="gaps"] { box-shadow: inset 0 -1px 0 var(--bad); }
+mark.site[data-status="covered"] { box-shadow: inset 0 -1px 0 var(--ok); }
+/* An open site, like an open method's bar, has its status edges
+   doubled to 2px: its button's top and left, and its
+   expressions' underlines. */
+body[data-layout="beside"] button.lnum[aria-expanded="true"][data-status="gaps"] { box-shadow: inset 1px 1px 0 var(--bad); }
+body[data-layout="beside"] button.lnum[aria-expanded="true"][data-status="covered"] { box-shadow: inset 1px 1px 0 var(--ok); }
+body[data-layout="beside"] .block:has(> button.lnum[aria-expanded="true"]) mark.site[data-status="gaps"] { box-shadow: inset 0 -2px 0 var(--bad); }
+body[data-layout="beside"] .block:has(> button.lnum[aria-expanded="true"]) mark.site[data-status="covered"] { box-shadow: inset 0 -2px 0 var(--ok); }
+/* Beside, a jump to a site opens its tree, whose doubled edges
+   mark it, so its button has no outline of the jump to it; and
+   while a method's paths are open, none keeps a focus outline. */
+body[data-layout="beside"] button.lnum:has(.lineno:target) { outline: none; }
+body[data-open="pc"] button.lnum:focus-visible { outline: none; }
+body[data-layout="beside"] .block .srcs { flex: 1; }
+body[data-layout="beside"] .block:hover { filter: brightness(0.97); }
+/* Beside, an open site's triangle points left, showing that a
+   click closes its tree, rather than down. */
+/* A site's tree opens in the left rail: a closed button points
+   left, where its tree will open, an open one right, the way it
+   will close. */
+body[data-layout="beside"] button.lnum::before { content: "\25C2"; transform: none; }
+body[data-layout="beside"] button.lnum[aria-expanded="true"]::before { content: "\25B8"; transform: none; }
+
+/* SPIKE: a path method's bar on the code pane's right edge,
+   def to end, which opens its grid out into the rail: a column
+   per path, never-taken first, each row level with its line. */
+.pathbar {
+  position: absolute; width: 16px; padding: 0; z-index: 3;
+  border: 0; border-radius: 4px; cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  color: var(--on-status); font-size: 11px;
+}
+.pathbar::after { content: "\25B8"; }
+.pathbar[aria-expanded="true"]::after { content: "\25C2"; }
+/* A method's def line, lit from its def to its bar, under the
+   code's text; the code is its own stacking context so the band
+   can sit beneath its rows. */
+body[data-layout="beside"] .code { position: relative; isolation: isolate; }
+.methodband { position: absolute; z-index: -1; border-radius: 6px 0 0 6px; pointer-events: none; }
+/* A method's band is violet, whatever its status, so it never
+   reads as a site's band; its status is its bar's colour and its
+   bottom line's. */
+:root { --path-tint: #E9E0FB; }
+@media (prefers-color-scheme: dark) { :root { --path-tint: #33284F; } }
+.methodband { background: var(--path-tint); }
+.methodband[data-status="gaps"] { box-shadow: inset 0 1px 0 var(--bad); }
+.methodband[data-status="covered"] { box-shadow: inset 0 1px 0 var(--ok); }
+.line:has(.lineno) { cursor: default; }
+/* A bar is violet like its method's band, so violet always means
+   paths; its status is a line down its right edge, as the band's
+   is a line along its top. */
+.pathbar {
+  background: var(--path-tint); color: var(--fg);
+  border-radius: 0 0 4px 4px; align-items: flex-start; line-height: 32px;
+}
+.pathbar[data-status="gaps"] { box-shadow: inset -1px 0 0 var(--bad), inset 0 1px 0 var(--bad); }
+.pathbar[data-status="covered"] { box-shadow: inset -1px 0 0 var(--ok), inset 0 1px 0 var(--ok); }
+/* Open, a method's status lines thicken, on its bar and band. */
+.pathbar[aria-expanded="true"][data-status="gaps"] { box-shadow: inset -2px 0 0 var(--bad), inset 0 2px 0 var(--bad); }
+.pathbar[aria-expanded="true"][data-status="covered"] { box-shadow: inset -2px 0 0 var(--ok), inset 0 2px 0 var(--ok); }
+.methodband.open[data-status="gaps"] { box-shadow: inset 0 2px 0 var(--bad); }
+.methodband.open[data-status="covered"] { box-shadow: inset 0 2px 0 var(--ok); }
+.pathbar:hover { filter: brightness(1.15); }
+.rail .pathgrid {
+  position: absolute; left: 0; right: 0; z-index: 2; overflow-x: auto; overflow-y: hidden;
+  background: var(--path-tint); border-radius: 6px; font: 600 12px var(--font-code);
+}
+.prow { position: absolute; left: 0; display: flex; gap: 2px; white-space: nowrap; }
+.plabel { width: 48px; flex-shrink: 0; text-align: right; padding-right: 8px; color: var(--muted); line-height: 24px; }
+.pcell { width: 24px; flex-shrink: 0; text-align: center; line-height: 24px; border-radius: 3px; }
+.pcell.ended { background: transparent; }
+.pcell.true, .pcell.false { background: var(--surface); color: var(--fg); }
+.prow.calls .pcell.taken { background: var(--ok-tint); color: var(--ok); }
+.prow.calls .pcell.never { background: var(--bad); color: var(--on-status); }
+.prow.calls .plabel { color: var(--fg); }
+/* SPIKE: hovering a path's column shows it in the code: the
+   column outlined, skipped lines faded, each decision's line
+   chipped with its outcome. */
+.pcell { cursor: default; }
+.pcell { cursor: pointer; }
+.pcell.hot { outline: 2px solid var(--fg); outline-offset: -1px; }
+.pcell.pinned { outline: 3px solid var(--link); outline-offset: -2px; }
+:root { --lit: #FFE98A; }
+@media (prefers-color-scheme: dark) { :root { --lit: #5A4A12; } }
+/* A lit line's background spans the code pane's full width. */
+.line .src { flex: 1; }
+.src.lit { background: var(--path-tint); }
+mark.chars { background: var(--lit); color: inherit; border-radius: 3px; box-shadow: 0 0 0 2px var(--lit); }
+.tree .row[data-at] { cursor: default; }
+.tree .row[data-at]:hover { background: rgba(255, 255, 255, 0.08); }
+.nav[data-chip] { flex-direction: row; align-items: center; justify-content: flex-end; padding-right: 2px; box-sizing: border-box; }
+.nav[data-chip] a { display: none; }
+.nav[data-chip]::after {
+  content: attr(data-chip); padding: 0 7px; border-radius: 4px;
+  font: 700 11px/20px var(--font-body); background: var(--fg); color: var(--bg);
+}

data/lib/path_coverage/html/toggle.js

@@ -0,0 +1,12 @@
+// Opens and closes the tree a line-number button names in its
+// aria-controls, keeping aria-expanded in step.
+(function () {
+  document.querySelectorAll('button[aria-controls]').forEach(function (button) {
+    button.addEventListener('click', function () {
+      var tree = document.getElementById(button.getAttribute('aria-controls'));
+      var open = button.getAttribute('aria-expanded') === 'true';
+      button.setAttribute('aria-expanded', open ? 'false' : 'true');
+      tree.hidden = open;
+    });
+  });
+})();

data/lib/path_coverage/html_file.rb

@@ -0,0 +1,109 @@
+require 'cgi/escape'
+require_relative 'html_nav'
+require_relative 'html_template'
+require_relative 'html_tree'
+
+module PathCoverage
+  # One covered file's HTML page: its source, with the numbers
+  # of the lines holding a condition as the one button that
+  # opens the condition's tree.
+  module HtmlFile
+    # The whole page for the file at path (relative to root),
+    # written at files/<path>.html, so it links back to the
+    # index one folder up for each folder in that.
+    def self.page(path, lines, trees, grids = '')
+      HtmlTemplate.fill(
+        HtmlTemplate.asset('file.html'),
+        'path' => CGI.escapeHTML(path),
+        'index' => "#{'../' * (path.count('/') + 1)}index.html",
+        'style' => HtmlTemplate.asset('style.css'),
+        'script' => script,
+        'grids' => grids,
+        'jumps' => HtmlNav.jumps(lines),
+        'listing' => listing(lines, trees)
+      )
+    end
+
+    # The page's script: its tree toggles, then its side rails.
+    def self.script
+      HtmlTemplate.asset('toggle.js') + HtmlTemplate.asset('side.js')
+    end
+
+    # The source listing of lines, as SourceLines.of gives them:
+    # each run of lines sharing a span is one block, followed
+    # by its hidden tree. trees is { span's first line =>
+    # [SiteTree.of, ...] }.
+    def self.listing(lines, trees = {})
+      blocks = lines.chunk_while do |line, following|
+        line[:span] && line[:span] == following[:span]
+      end
+      gaps = HtmlNav.gap_lines(blocks)
+      body = blocks.map { |block| block(block, trees, gaps) }
+      %(<div class="code">\n#{body.join("\n")}\n</div>)
+    end
+
+    # A plain line, or the lines of one span behind one button
+    # with the span's tree straight after them; either way after
+    # its nav cell.
+    def self.block(lines, trees, gaps)
+      first = lines[0]
+      number = first[:number]
+      cell = HtmlNav.cell(number, gaps)
+      return plain_line(first, cell) if first[:span].nil?
+
+      site_trees = trees.fetch(number, [])
+      open = first[:status] == :gaps
+      span_block(lines, site_trees.size, cell) +
+        HtmlTree.of(number, site_trees, open)
+    end
+
+    # The lines of one span after their nav cell: one button over
+    # all their numbers, and how many sites it opens when that is
+    # two or more, beside their code.
+    def self.span_block(lines, sites, cell)
+      numbers = lines.map { |line| number(line[:number]) }.join
+      codes = lines.map { |line| code(line) }.join
+      srcs = %(<div class="srcs">#{codes}</div>)
+      content = site_count(sites) + numbers
+      button = button(lines[0], content)
+      %(<div class="block">#{cell}#{button}#{srcs}</div>)
+    end
+
+    # The count of a button's sites, shown only for two or more.
+    def self.site_count(sites)
+      return '' if sites < 2
+
+      %(<span class="site-count" data-site-count="">#{sites}</span>)
+    end
+
+    # A line with no condition: its nav cell, number and code.
+    def self.plain_line(line, cell)
+      parts = cell + number(line[:number]) + code(line)
+      %(<div class="line">#{parts}</div>)
+    end
+
+    # The button over a span's numbers, toggling the tree named
+    # after its first line; expanded when that tree starts open.
+    def self.button(first, numbers)
+      expanded = first[:status] == :gaps
+      [
+        %(<button type="button" class="lnum"),
+        %( data-status="#{first[:status]}"),
+        %( aria-expanded="#{expanded}"),
+        %( aria-controls="tree-#{first[:number]}">#{numbers}</button>)
+      ].join
+    end
+
+    # One line's number, the target of a link to #L<number>.
+    def self.number(number)
+      attributes = %(id="L#{number}" data-line="#{number}")
+      %(<span class="lineno" #{attributes}>#{number}</span>)
+    end
+
+    # One line's code, escaped.
+    def self.code(line)
+      text = CGI.escapeHTML(line[:text])
+      %(<span class="src" data-src="">#{text}</span>)
+    end
+  end
+end

data/lib/path_coverage/html_index.rb

@@ -0,0 +1,43 @@
+require 'cgi/escape'
+require_relative 'html_template'
+
+module PathCoverage
+  # The HTML index page: one sortable row per covered file,
+  # each linking to that file's own page.
+  module HtmlIndex
+    # The whole index page: the files table, sortable by any
+    # column, with one row per Summary.files row.
+    def self.page(rows)
+      HtmlTemplate.fill(
+        HtmlTemplate.asset('index.html'),
+        'style' => HtmlTemplate.asset('style.css'),
+        'script' => HtmlTemplate.asset('sort.js'),
+        'rows' => rows.map { |row| row(row) }.join("\n")
+      )
+    end
+
+    # The table row of one Summary.files row; each cell has a
+    # data-sort value for the page's column sorting.
+    def self.row(row)
+      "<tr>#{cells(row).join}</tr>"
+    end
+
+    # The four cells: file, sites, outcomes seen, missing.
+    def self.cells(row)
+      path = CGI.escapeHTML(row[:path])
+      link = %(<a href="files/#{path}.html">#{path}</a>)
+      seen = "#{row[:seen]} / #{row[:outcomes]} · #{row[:percent]}%"
+      [
+        cell(path, link),
+        cell(row[:sites], row[:sites]),
+        cell(row[:percent], seen),
+        cell(row[:missing], row[:missing])
+      ]
+    end
+
+    # One table cell, sorted by sort_value, showing content.
+    def self.cell(sort_value, content)
+      %(<td data-sort="#{sort_value}">#{content}</td>)
+    end
+  end
+end

data/lib/path_coverage/html_nav.rb

@@ -0,0 +1,67 @@
+module PathCoverage
+  # The ways around a file's page: the header's lists of links to
+  # each span, and the arrows between the spans with gaps.
+  module HtmlNav
+    JUMP_LISTS = { 'covered' => 'Covered', 'gaps' => 'Gaps' }.freeze
+
+    # The header's lists of links to the first line of each span:
+    # those covered, then those with gaps.
+    def self.jumps(lines)
+      firsts = lines.select { |line| first_of_span?(line) }
+      lists = JUMP_LISTS.map do |status, label|
+        spans = firsts.select { |line| line[:status].to_s == status }
+        jump_list(status, label, spans.map { |line| line[:number] })
+      end
+      %(<nav class="jumps" aria-label="Sites">#{lists.join}</nav>)
+    end
+
+    # True for the line a span starts on.
+    def self.first_of_span?(line)
+      line[:span]&.begin == line[:number]
+    end
+
+    # One labelled list of links to lines.
+    def self.jump_list(status, label, numbers)
+      links = numbers.map { |number| jump(status, number) }
+      name = %(<span class="jump-label">#{label}</span>)
+      list = %(<div class="jump-list" data-jumps="#{status}">)
+      "#{list}#{name}#{links.join}</div>"
+    end
+
+    # One link to a line.
+    def self.jump(status, number)
+      attributes = %(data-status="#{status}" href="#L#{number}")
+      %(<a class="jump" #{attributes}>#{number}</a>)
+    end
+
+    # The first line of each span whose sites have gaps, given the
+    # listing's blocks.
+    def self.gap_lines(blocks)
+      firsts = blocks.map(&:first)
+      firsts.select { |line| line[:status] == :gaps }.map do |line|
+        line[:number]
+      end
+    end
+
+    # The cell left of a row's number: at a span with gaps, links
+    # to the previous and next such span, wrapping round at the
+    # ends; empty on every other row, so the numbers stay aligned.
+    def self.cell(number, gaps)
+      index = gaps.index(number)
+      links = index ? arrows(gaps, index) : ''
+      %(<span class="nav" data-nav="">#{links}</span>)
+    end
+
+    # The links to the spans with gaps either side of gaps[index].
+    def self.arrows(gaps, index)
+      previous = gaps[index - 1]
+      following = gaps[(index + 1) % gaps.size]
+      [
+        %(<a data-prev="" href="#L#{previous}"),
+        %( aria-label="Previous gap, line #{previous}">&#9650;</a>),
+        %(<a data-next="" href="#L#{following}"),
+        %( aria-label="Next gap, line #{following}">&#9660;</a>)
+      ].join
+    end
+  end
+end