sourcemonkey 0.0.0-stage → 0.5.0

package/dist/extension/compare.js

@@ -0,0 +1,867 @@
+// The compare page (`compare.html`): two copies of one script side by
+// side — their header fields in one table, then a diff of each file
+// they run, tab by tab.
+//
+// Reached from the versions panel's Compare column: a row's DIFF
+// button opens it. One side is the copy that column compared against
+// — the script on screen (`?script=<id>`), or the download an install
+// preview is showing (`?preview=<location>`); `?other=<id>` is the row
+// whose button was pressed. The diff reads left to right, old to new,
+// and which side is which follows from that:
+//   - from the viewer, the script on screen is the BASE and goes on
+//     the left: the diff says what the other copy changed;
+//   - from a preview, the download is the NEW copy and goes on the
+//     right: the diff says what installing it would change.
+// A swap button between the two sides' Collection and Location cells
+// turns it around.
+//
+// What is compared is what runs: the script's own text and every
+// `@require` it declares, which is the same set the Compare column's
+// verdict was computed from (`contentFingerprint`, script-identity.ts).
+// A preview side is fetched afresh here — the preview page holds its
+// download in memory, and nothing is stored until Install — through the
+// same pipeline that page uses, so the `@require`s it resolves are the
+// ones an install would store.
+import { buildScriptFromText, describeError, getCollection, getScript, localFileScope, } from './script-store.js';
+import { attachFiles } from '../external-files.js';
+import { canonicalCollectionInput, collectionCanonicalUrl, fetchSingleFileText, isSingleFileLocation, LOCATION_SHAPES, normalizeCollectionInput, scriptAbsolutePath, } from './directories.js';
+import { appendWithSlashBreaks, displayLocation, formatScriptSize, fullSource, previewUrl, requireBasename, scriptBasename, scriptLabel, viewerUrl, } from '../script-display.js';
+import { collectionCell, declaredHomepage } from './script-details.js';
+import { getValue, getValues } from '../userscript-header.js';
+import { headingPrefixEl, HEADING_SEPARATOR, INSTALLED_HEADING, MISSING_LABEL, setPageTitle, } from './page-heading.js';
+import { installHomeLinkHandler } from './page-links.js';
+import { installGithubAuthListener, loadGithubAuthToken } from '../github-auth.js';
+import { installLocalRootsListener, localRootsReady, localSearchRoots } from '../local-file-overrides.js';
+import { setGlyphButton } from './glyph.js';
+import { HEADING_SITE_ICONS, renderSiteIconInto } from './site-icon.js';
+import { installSelectAll } from './select-all.js';
+import { ignoreResizeObserverLoopErrors } from './resize-observer-loop.js';
+import { countChanges, diffLines, splitLines, toHunks } from './line-diff.js';
+// The heading's page name, between the product's and the script's.
+const COMPARE_HEADING = `${INSTALLED_HEADING}Compare${HEADING_SEPARATOR}`;
+const params = new URLSearchParams(location.search);
+const baseScriptId = params.get('script');
+const previewInput = params.get('preview');
+const otherScriptId = params.get('other');
+const headingEl = document.getElementById('heading');
+const messageEl = document.getElementById('message');
+const fieldsEl = document.getElementById('fields');
+const viewRowEl = document.getElementById('view-row');
+const tabsEl = document.getElementById('tabs');
+const diffEl = document.getElementById('diff');
+// The two sides as they are currently shown: `left` is diffed against
+// `right`. Filled by `load`, swapped by the swap button.
+let left = null;
+let right = null;
+// The copy the page was opened for, whichever side it is on now: the
+// script on screen, or the preview's download. The script's own tab is
+// named from it and the `@require` tabs follow its declaration order,
+// so neither shifts on a swap. (The heading is the LEFT side's — see
+// `renderHeading`.)
+let base = null;
+// Which file's diff is on screen, by index into `filePairs()`. Kept
+// across a swap or a view change, which repaint the same tabs.
+let activeTab = 0;
+const VIEW_KEY = 'compare.view';
+const SCOPE_KEY = 'compare.scope';
+let view = readSetting(VIEW_KEY, 'unified', ['unified', 'split']);
+let scope = readSetting(SCOPE_KEY, 'changes', ['changes', 'whole']);
+function readSetting(key, fallback, allowed) {
+    try {
+        const got = localStorage.getItem(key);
+        return allowed.includes(got) ? got : fallback;
+    }
+    catch {
+        return fallback;
+    }
+}
+function writeSetting(key, value) {
+    try {
+        localStorage.setItem(key, value);
+    }
+    catch {
+        // Storage that refuses a write (a locked-down profile) costs only
+        // the memory of the choice; the page itself is unaffected.
+    }
+}
+installHomeLinkHandler();
+ignoreResizeObserverLoopErrors();
+// Ctrl/Cmd-A selects the diff on screen rather than the page: the one
+// pane there is, or, side by side, the pane focus is in — the left one
+// when it is nowhere in particular. The line numbers and signs are
+// `user-select: none`, so what is copied is the lines.
+installSelectAll(() => {
+    const focused = document.activeElement?.closest('.diff-body .pane');
+    const pane = focused ?? diffEl.querySelector('.diff-body .pane.left') ?? diffEl.querySelector('.diff-body');
+    return pane?.querySelector('table') ?? null;
+});
+installLocalRootsListener();
+installGithubAuthListener();
+const githubTokenReady = loadGithubAuthToken();
+void load();
+async function load() {
+    if (!otherScriptId || (!baseScriptId && !previewInput)) {
+        fail('This page needs two copies to compare: a script and another copy of it');
+        return;
+    }
+    setMessage('Loading…');
+    try {
+        // The preview side reads local stand-ins for its `@require`s the
+        // way the preview page does, and that needs the configured roots.
+        await localRootsReady();
+        const [loadedBase, other] = await Promise.all([
+            baseScriptId ? loadInstalled(baseScriptId, 'The script') : loadPreview(previewInput),
+            loadInstalled(otherScriptId, 'The other copy'),
+        ]);
+        base = loadedBase;
+        [left, right] = baseScriptId ? [loadedBase, other] : [other, loadedBase];
+    }
+    catch (err) {
+        fail(describeError(err));
+        return;
+    }
+    setMessage('');
+    renderViewRow();
+    renderAll();
+}
+// A stored copy. The collection row may be gone — a copy whose
+// collection was removed while this page was opening — and the side
+// still renders, with no Collection cell to show. `what` names the side
+// in the failure, so the message says which copy went missing.
+async function loadInstalled(id, what) {
+    const script = await getScript(id);
+    if (!script)
+        throw new Error(`${what} is no longer installed`);
+    const collection = (await getCollection(script.collectionId)) ?? null;
+    return {
+        kind: 'installed',
+        label: scriptLabel(script.header, script.relativePath),
+        collection,
+        location: displayLocation(collection ? scriptAbsolutePath(collection.path, script.relativePath) : script.relativePath),
+        pageUrl: viewerUrl(script.id),
+        header: script.header,
+        icons: {
+            matching: script.matching,
+            fileUrl: script.fileUrl,
+            // A missing collection row reads as ENABLED, as the viewer's
+            // heading has it.
+            localRoots: localSearchRoots(script.fileUrl, collection ? localFileScope(collection) : { enabled: true }),
+        },
+        text: fullSource(script),
+        requires: script.requires ?? [],
+        size: formatScriptSize(script),
+    };
+}
+// The download an install preview is showing, fetched again here: the
+// preview holds it in memory only. The same normalization and the same
+// `@require` resolution the preview runs, so what this side shows is
+// what installing would store.
+async function loadPreview(input) {
+    if (!isSingleFileLocation(input)) {
+        throw new Error(`This is not a script location. It ${LOCATION_SHAPES}.`);
+    }
+    await githubTokenReady;
+    const previewLocation = canonicalCollectionInput(await normalizeCollectionInput(input));
+    const fileUrl = collectionCanonicalUrl(previewLocation);
+    const text = await fetchSingleFileText(fileUrl);
+    const now = Date.now();
+    const script = await buildScriptFromText({
+        id: 'preview',
+        collectionId: 'preview',
+        relativePath: previewLocation,
+        fileUrl,
+        text,
+        now,
+    });
+    // The preview page refuses to install this; a diff of a file that
+    // cannot be installed would only be misread as one that can.
+    if (script.status !== 'ok') {
+        throw new Error(`The script being previewed cannot be compared: ${script.errorMessage ?? 'It is not a valid userscript'}`);
+    }
+    const fetchCache = new Map();
+    const localRoots = localSearchRoots(fileUrl, { enabled: true });
+    const files = await attachFiles({
+        scriptFileUrl: fileUrl,
+        header: script.header,
+        priorRequires: new Map(),
+        priorResources: new Map(),
+        recheck: 'all',
+        fetchCache,
+        now,
+        localRoots,
+    });
+    if (files.errorMessage) {
+        throw new Error(`The script being previewed cannot be compared: ${files.errorMessage}`);
+    }
+    return {
+        kind: 'preview',
+        label: scriptLabel(script.header, previewLocation),
+        collection: null,
+        location: displayLocation(previewLocation),
+        pageUrl: previewUrl(previewLocation),
+        header: script.header,
+        icons: { matching: script.matching, fileUrl, localRoots },
+        text,
+        requires: files.requires,
+        size: formatScriptSize(script),
+    };
+}
+function fail(message) {
+    setMessage(message, 'error');
+    setPageTitle('Compare: ', MISSING_LABEL);
+}
+function setMessage(text, kind = '') {
+    messageEl.textContent = text;
+    messageEl.className = `message ${kind}`.trim();
+}
+// `SourceMonkey | Compare | <icons> <name>`, as the viewer's heading
+// reads — the favicons and the name of the LEFT side, so a swap
+// repaints it from the other copy. (The names are usually the same;
+// the icons can differ, when one copy's `@match` or `@icon` does.)
+function renderHeading() {
+    const side = left;
+    headingEl.replaceChildren(headingPrefixEl(COMPARE_HEADING));
+    const iconSlot = document.createElement('span');
+    iconSlot.className = 'site-icon';
+    headingEl.appendChild(iconSlot);
+    appendWithSlashBreaks(headingEl, side.label);
+    setPageTitle('Compare: ', side.label);
+    void renderSiteIconInto(iconSlot, { matching: side.icons.matching, fileUrl: side.icons.fileUrl, header: side.header }, side.icons.localRoots, HEADING_SITE_ICONS);
+}
+// Everything that depends on which side is which.
+function renderAll() {
+    renderHeading();
+    renderFields();
+    renderTabs();
+    renderDiff();
+}
+function renderFields() {
+    const l = left;
+    const r = right;
+    const table = document.createElement('table');
+    table.className = 'fields';
+    table.appendChild(fieldsHead(l, r));
+    const tbody = document.createElement('tbody');
+    for (const row of fieldRows(l, r))
+        tbody.appendChild(fieldRow(row));
+    table.appendChild(tbody);
+    fieldsEl.replaceChildren(table);
+}
+// The two rows that say which copy is which — Collection and Location,
+// labelled like the rows under them — with the swap button between
+// the sides, spanning both.
+function fieldsHead(l, r) {
+    const thead = document.createElement('thead');
+    // Tinted like the rows below when the two differ, which for the
+    // collection means two different collections, not two spellings.
+    const collectionRow = document.createElement('tr');
+    const sameCollection = l.collection !== null && r.collection !== null
+        && l.collection.id === r.collection.id;
+    collectionRow.className = `side-collection ${sameCollection ? 'same' : 'differs'}`;
+    collectionRow.appendChild(label('Collection'));
+    collectionRow.appendChild(sideCell(collectionValue(l), 'left'));
+    const swapCell = document.createElement('td');
+    swapCell.className = 'swap-col';
+    swapCell.rowSpan = 2;
+    const swapBtn = document.createElement('button');
+    swapBtn.type = 'button';
+    swapBtn.id = 'swap';
+    setGlyphButton(swapBtn, 'sm-swap', 'Swap the two sides');
+    swapBtn.addEventListener('click', () => {
+        [left, right] = [right, left];
+        renderAll();
+    });
+    swapCell.appendChild(swapBtn);
+    collectionRow.appendChild(swapCell);
+    collectionRow.appendChild(sideCell(collectionValue(r), 'right'));
+    thead.appendChild(collectionRow);
+    const locationRow = document.createElement('tr');
+    locationRow.className = 'side-location ' + (l.location === r.location ? 'same' : 'differs');
+    locationRow.appendChild(label('Location'));
+    locationRow.appendChild(sideCell(locationValue(l), 'left'));
+    locationRow.appendChild(sideCell(locationValue(r), 'right'));
+    thead.appendChild(locationRow);
+    return thead;
+}
+function label(text) {
+    const th = document.createElement('th');
+    th.textContent = text;
+    return th;
+}
+function sideCell(content, side) {
+    const td = document.createElement('td');
+    td.className = `value ${side}`;
+    td.appendChild(content);
+    return td;
+}
+// A side's collection: its type bubble and name, linked to its section
+// on the collections page — or the reason there is none.
+function collectionValue(side) {
+    if (side.collection)
+        return collectionCell(side.collection);
+    const span = document.createElement('span');
+    span.className = side.kind === 'preview' ? 'side-preview' : 'none';
+    span.textContent = side.kind === 'preview' ? 'Not installed' : 'Collection removed';
+    return span;
+}
+// A side's location, linked to that copy's own page: the viewer, or
+// the install preview.
+function locationValue(side) {
+    const a = document.createElement('a');
+    a.href = side.pageUrl;
+    a.target = '_blank';
+    a.rel = 'noopener';
+    a.title = side.kind === 'preview' ? 'Open the install preview' : 'Open this copy in the viewer';
+    appendWithSlashBreaks(a, side.location);
+    return a;
+}
+// The rows, in the viewer's details-panel order. A row appears when
+// either side has something for it; a tag neither declares gets none.
+function fieldRows(l, r) {
+    const rows = [];
+    const single = (label, read) => {
+        const a = l.header ? read(l.header) : undefined;
+        const b = r.header ? read(r.header) : undefined;
+        if (a === undefined && b === undefined)
+            return;
+        rows.push({ label, values: [{ items: a ? [a] : [] }, { items: b ? [b] : [] }] });
+    };
+    const list = (label, tag) => {
+        const a = l.header ? getValues(l.header, tag) : [];
+        const b = r.header ? getValues(r.header, tag) : [];
+        if (a.length === 0 && b.length === 0)
+            return;
+        rows.push({ label, values: [{ items: [...a] }, { items: [...b] }] });
+    };
+    single('Name', (h) => getValue(h, 'name'));
+    single('Description', (h) => getValue(h, 'description'));
+    single('Version', (h) => getValue(h, 'version'));
+    single('Homepage', declaredHomepage);
+    list('Match', 'match');
+    list('Include', 'include');
+    list('Exclude', 'exclude');
+    list('Network access', 'connect');
+    list('Require', 'require');
+    list('Resource', 'resource');
+    rows.push({
+        label: 'Size',
+        values: [{ items: [l.size] }, { items: [r.size] }],
+    });
+    return rows;
+}
+function fieldRow(row) {
+    const tr = document.createElement('tr');
+    const [a, b] = row.values;
+    const differs = !sameItems(a.items, b.items);
+    tr.className = differs ? 'differs' : 'same';
+    tr.appendChild(label(row.label));
+    tr.appendChild(valueCell(a, b, 'left'));
+    const gap = document.createElement('td');
+    gap.className = 'swap-col';
+    tr.appendChild(gap);
+    tr.appendChild(valueCell(b, a, 'right'));
+    return tr;
+}
+function sameItems(a, b) {
+    return a.length === b.length && a.every((item, i) => item === b[i]);
+}
+// A value cell. A list is one item per line, with the items the OTHER
+// side lacks marked, so a Match row with one new pattern shows which
+// one; a single value with no counterpart reads "none".
+function valueCell(value, other, side) {
+    const td = document.createElement('td');
+    td.className = `value ${side}`;
+    if (value.items.length === 0) {
+        const none = document.createElement('span');
+        none.className = 'none';
+        none.textContent = 'none';
+        td.appendChild(none);
+    }
+    else if (value.items.length === 1 && other.items.length <= 1) {
+        td.textContent = value.items[0];
+    }
+    else {
+        const ul = document.createElement('ul');
+        for (const item of value.items) {
+            const li = document.createElement('li');
+            li.textContent = item;
+            if (!other.items.includes(item))
+                li.className = 'only';
+            ul.appendChild(li);
+        }
+        td.appendChild(ul);
+    }
+    return td;
+}
+function filePairs() {
+    const b = base;
+    const other = b === left ? right : left;
+    // A pair in base / other terms, turned into left / right below.
+    const pair = (label, ofBase, ofOther) => ({
+        label,
+        leftText: b === left ? ofBase : ofOther,
+        rightText: b === left ? ofOther : ofBase,
+    });
+    const pairs = [pair(scriptBasename(b.location), b.text, other.text)];
+    const name = (req) => requireBasename(req.url, req.ref);
+    const ambiguous = new Set([...repeatedNames(b.requires), ...repeatedNames(other.requires)]);
+    // Base's requires first, in declaration order — the same tabs in the
+    // same places after a swap — each taking the first unclaimed match on
+    // the other side: by ref, then by basename.
+    const unclaimed = [...other.requires];
+    const claim = (pick) => {
+        const at = unclaimed.findIndex(pick);
+        return at < 0 ? undefined : unclaimed.splice(at, 1)[0];
+    };
+    for (const req of b.requires) {
+        const match = claim((o) => o.ref === req.ref)
+            ?? (ambiguous.has(name(req)) ? undefined : claim((o) => name(o) === name(req)));
+        pairs.push(pair(name(req), req.source, match?.source ?? null));
+    }
+    // Then whatever the other side declares that nothing above claimed.
+    for (const req of unclaimed)
+        pairs.push(pair(name(req), null, req.source));
+    return pairs;
+}
+// The basenames declared more than once on one side.
+function repeatedNames(requires) {
+    const seen = new Set();
+    const repeated = new Set();
+    for (const req of requires) {
+        const n = requireBasename(req.url, req.ref);
+        if (seen.has(n))
+            repeated.add(n);
+        seen.add(n);
+    }
+    return [...repeated];
+}
+// Same means the diff would show nothing: compared line by line, the
+// way the diff reads the texts, so a copy that only gained or lost a
+// final newline is not called different by the chip and then shown
+// with no differences below it.
+function verdict(pair) {
+    if (pair.leftText === null)
+        return 'added';
+    if (pair.rightText === null)
+        return 'removed';
+    return sameItems(splitLines(pair.leftText), splitLines(pair.rightText)) ? 'same' : 'different';
+}
+function renderTabs() {
+    const pairs = filePairs();
+    if (activeTab >= pairs.length)
+        activeTab = 0;
+    tabsEl.replaceChildren();
+    pairs.forEach((pair, i) => {
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'tab' + (i === activeTab ? ' active' : '');
+        btn.setAttribute('role', 'tab');
+        btn.setAttribute('aria-selected', String(i === activeTab));
+        btn.appendChild(document.createTextNode(pair.label));
+        const v = verdict(pair);
+        const chip = document.createElement('span');
+        chip.className = `chip chip-${v}`;
+        chip.textContent = v;
+        btn.appendChild(chip);
+        btn.addEventListener('click', () => {
+            activeTab = i;
+            renderTabs();
+            renderDiff();
+        });
+        tabsEl.appendChild(btn);
+    });
+    tabsEl.hidden = false;
+}
+// ---------- The view controls ----------
+function renderViewRow() {
+    viewRowEl.replaceChildren(segmented([['unified', 'Unified'], ['split', 'Side by side']], () => view, (v) => { view = v; writeSetting(VIEW_KEY, v); }), segmented([['changes', 'Changes only'], ['whole', 'Whole file']], () => scope, (v) => { scope = v; writeSetting(SCOPE_KEY, v); }));
+}
+// A segmented control: one button per choice, the current one pressed.
+function segmented(choices, current, choose) {
+    const seg = document.createElement('span');
+    seg.className = 'seg';
+    seg.setAttribute('role', 'group');
+    for (const [value, label] of choices) {
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.textContent = label;
+        btn.dataset.value = value;
+        btn.setAttribute('aria-pressed', String(value === current()));
+        btn.classList.toggle('on', value === current());
+        btn.addEventListener('click', () => {
+            choose(value);
+            for (const b of seg.querySelectorAll('button')) {
+                b.classList.toggle('on', b === btn);
+                b.setAttribute('aria-pressed', String(b === btn));
+            }
+            renderDiff();
+        });
+        seg.appendChild(btn);
+    }
+    return seg;
+}
+// ---------- The diff ----------
+function renderDiff() {
+    const pair = filePairs()[activeTab];
+    if (!pair) {
+        diffEl.hidden = true;
+        return;
+    }
+    const a = splitLines(pair.leftText ?? '');
+    const b = splitLines(pair.rightText ?? '');
+    const ops = diffLines(a, b);
+    const counts = countChanges(ops);
+    // The lines scroll inside the body, under a summary strip that stays
+    // put — the box fills what is left of the window (compare.html), so
+    // the scroll bars are at the window's edge rather than under a
+    // page's worth of code.
+    const body = document.createElement('div');
+    body.className = 'diff-body';
+    // A file both sides have in full and agree on is shown once, whatever
+    // the view: two identical columns say nothing the one doesn't.
+    const identical = counts.added === 0 && counts.removed === 0;
+    if (view === 'split' && !identical) {
+        body.classList.add('split');
+        body.append(...splitPanes(ops));
+    }
+    else {
+        // The one scroller, focusable like the viewer's code box (side by
+        // side, the panes are the scrollers and the focus targets).
+        body.tabIndex = 0;
+        body.appendChild(unifiedTable(ops, identical));
+    }
+    diffEl.replaceChildren(summaryRow(counts, body), body);
+    diffEl.hidden = false;
+}
+// The summary strip: the counts, then the Up/Down arrows that jump
+// between change blocks (the collections page's move arrows, by glyph).
+// `body` is the scroller the arrows drive.
+function summaryRow(counts, body) {
+    const row = document.createElement('div');
+    row.className = 'diff-summary';
+    const text = document.createElement('span');
+    text.className = 'diff-counts';
+    row.appendChild(text);
+    if (counts.removed === 0 && counts.added === 0) {
+        text.textContent = 'No differences';
+        return row;
+    }
+    const parts = [];
+    if (counts.removed > 0) {
+        const del = document.createElement('span');
+        del.className = 'removed';
+        del.textContent = `−${counts.removed}`;
+        parts.push(del);
+    }
+    if (counts.added > 0) {
+        const add = document.createElement('span');
+        add.className = 'added';
+        add.textContent = `+${counts.added}`;
+        parts.push(add);
+    }
+    parts.forEach((part, i) => {
+        if (i > 0)
+            text.appendChild(document.createTextNode(' '));
+        text.appendChild(part);
+    });
+    text.appendChild(document.createTextNode(counts.removed + counts.added === 1 ? ' line' : ' lines'));
+    row.append(...blockNav(body));
+    return row;
+}
+// ---------- Jumping between change blocks ----------
+// A change block is a run of changed rows — removals, additions, and
+// (side by side) the blanks across from them — between two unchanged
+// rows or seams. Its first row wears `.block-start`; the arrows step
+// between those rows in whichever element scrolls: the unified body,
+// or the left pane, whose scroll the right pane follows.
+//
+// A jump lands a few lines of context ABOVE the block at the top of
+// the box, not the block's first row: a changed line flush with the
+// top edge does not read as the start of anything, and the lines
+// before it are what say what the change is to. The rest of the box
+// is then the block and what follows it.
+//
+// Which block an arrow steps from: the marked one (the last jumped
+// to, `.current`) when any of it is on screen — so the blocks at the
+// ends of the file, whose landing spots are past the scroll range,
+// can still be stepped through by the mark alone, with the box
+// scrolled as far as it goes. When no marked block is on screen
+// (none yet, or the user has scrolled away by hand) the step is from
+// what is on screen instead: Down to the first block whose first row
+// is at or below the top edge, Up to the last one above it. A block
+// index alone would send the click somewhere unrelated to the view.
+// (After a hand scroll, Down can then land a block already near the
+// top by moving the box UP a few rows — the jump's context above —
+// which is the block's own place, not a wrong direction.)
+const CONTEXT_ABOVE = 5;
+function blockNav(body) {
+    const up = arrowButton('up', 'Previous change');
+    const down = arrowButton('down', 'Next change');
+    const scroller = () => body.querySelector('.pane.left') ?? body;
+    // Each block's landing spot is the row CONTEXT_ABOVE rows above its
+    // first — found by walking, not by row height, since a `@@` seam is
+    // not as tall as a line. A row's offsetTop is from its table, which
+    // sits at the top of the scroller, so it is the scrollTop that puts
+    // that row at the top. A block within reach of the top of the file
+    // lands at the top.
+    const blocks = () => [...scroller().querySelectorAll('tr.block-start')].map((tr) => {
+        let row = tr;
+        for (let n = 0; n < CONTEXT_ABOVE && row.previousElementSibling; n++) {
+            row = row.previousElementSibling;
+        }
+        return { tr, top: row.offsetTop };
+    });
+    // The index to step from, or -1 for "what is on screen": the marked
+    // block, when any of its rows is in view — its first row above the
+    // top edge with the rest still showing is still the block in hand.
+    const current = (all) => {
+        const el = scroller();
+        const i = all.findIndex((b) => b.tr.classList.contains('current'));
+        if (i < 0)
+            return -1;
+        let last = all[i].tr;
+        while (last.nextElementSibling?.classList.contains('current'))
+            last = last.nextElementSibling;
+        const top = all[i].tr.offsetTop;
+        const bottom = last.offsetTop + last.offsetHeight;
+        return bottom > el.scrollTop && top < el.scrollTop + el.clientHeight ? i : -1;
+    };
+    const target = (direction) => {
+        const all = blocks();
+        const i = current(all);
+        if (i >= 0)
+            return all[direction === 'up' ? i - 1 : i + 1];
+        const top = scroller().scrollTop;
+        return direction === 'up'
+            ? all.filter((b) => b.tr.offsetTop < top).pop()
+            : all.find((b) => b.tr.offsetTop >= top);
+    };
+    const refresh = () => {
+        up.disabled = !target('up');
+        down.disabled = !target('down');
+    };
+    const step = (direction) => {
+        const block = target(direction);
+        if (!block)
+            return;
+        // Past the scroll range this is clamped: the mark alone moves.
+        scroller().scrollTop = block.top;
+        markCurrent(body, block.tr);
+        refresh();
+    };
+    up.addEventListener('click', () => step('up'));
+    down.addEventListener('click', () => step('down'));
+    for (const el of body.classList.contains('split') ? body.querySelectorAll('.pane') : [body]) {
+        el.addEventListener('scroll', refresh);
+    }
+    // The body is not in the layout yet — it is appended after this
+    // returns — so the first refresh waits for it: the observer reports
+    // once on observe, after layout. A resize also changes what is on
+    // screen, which the arrows' states depend on.
+    new ResizeObserver(refresh).observe(body);
+    return [up, down];
+}
+// Mark the block just jumped to, on every row of it and in both panes:
+// the landing spot has lines of context above the block, and often
+// another block in view, so nothing else says which one the arrow
+// went to. `.current` on the rows; the gutter is what wears it (the
+// line numbers, compare.html). The mark stays until the next jump, or
+// a redraw of the diff (view, scope, tab) — a stale one off screen
+// after a hand scroll costs nothing.
+//
+// The panes hold the same rows at the same indexes (splitPanes), so
+// the block is found by index in the given table and applied to each.
+function markCurrent(body, start) {
+    for (const tr of body.querySelectorAll('tr.current'))
+        tr.classList.remove('current');
+    const table = start.closest('table');
+    if (!table)
+        return;
+    const from = [...table.rows].indexOf(start);
+    for (const t of body.querySelectorAll('table')) {
+        const rows = [...t.rows];
+        for (let i = from; i < rows.length && rows[i].matches('.del, .add, .filler'); i++) {
+            rows[i].classList.add('current');
+        }
+    }
+}
+// An Up or Down arrow, in the same character and box as the collections
+// page's move arrows — `.icon-btn` so it lines up with every other icon
+// button, sized down by the strip to sit in its line.
+function arrowButton(direction, label) {
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = `icon-btn block-${direction === 'up' ? 'prev' : 'next'}`;
+    btn.textContent = direction === 'up' ? '↑' : '↓';
+    btn.title = label;
+    btn.setAttribute('aria-label', label);
+    return btn;
+}
+// Which ops to draw: every line, or the hunks with `@@` seams between
+// them. `whole` is forced for an identical file, where hunks would be
+// nothing at all.
+function visibleOps(ops, whole) {
+    if (whole || scope === 'whole')
+        return [...ops];
+    const out = [];
+    for (const hunk of toHunks(ops)) {
+        out.push({
+            kind: 'hunk',
+            text: `@@ -${range(hunk.aStart, hunk.aCount)} +${range(hunk.bStart, hunk.bCount)} @@`,
+        });
+        out.push(...hunk.ops);
+    }
+    return out;
+}
+// A hunk header's range, as git prints it: the count is left off when
+// it is one.
+function range(start, count) {
+    return count === 1 ? String(start) : `${start},${count}`;
+}
+function unifiedTable(ops, whole) {
+    const table = document.createElement('table');
+    table.className = 'diff unified';
+    // The first changed row after an unchanged row (or a seam, or the
+    // top) starts a block — see blockNav.
+    let inBlock = false;
+    for (const op of visibleOps(ops, whole)) {
+        const tr = document.createElement('tr');
+        if (op.kind === 'hunk') {
+            tr.className = 'hunk';
+            tr.appendChild(td('num', ''));
+            tr.appendChild(td('sign', ''));
+            tr.appendChild(td('code', op.text));
+        }
+        else {
+            tr.className = op.kind === 'same' ? '' : op.kind;
+            // The number from whichever side has the line; a shared line's
+            // two numbers can differ, and the right side's is the base's.
+            tr.appendChild(td('num', String(op.bLine ?? op.aLine ?? '')));
+            tr.appendChild(td('sign', op.kind === 'del' ? '−' : op.kind === 'add' ? '+' : ' '));
+            tr.appendChild(td('code', op.text));
+        }
+        const changed = op.kind === 'del' || op.kind === 'add';
+        if (changed && !inBlock)
+            tr.classList.add('block-start');
+        inBlock = changed;
+        table.appendChild(tr);
+    }
+    return table;
+}
+// Side by side: a pane per side, each scrolling sideways on its own so
+// a long line in one never pushes the other off screen. The two hold
+// the same rows — an unchanged line on both, a removed line beside the
+// added line that replaced it (a run of removals zipped with the run of
+// additions after it), a blank beside a line with no counterpart — so
+// they line up, and their vertical scroll is kept in step.
+function splitPanes(ops) {
+    const leftTable = document.createElement('table');
+    leftTable.className = 'diff';
+    const rightTable = document.createElement('table');
+    rightTable.className = 'diff';
+    const rows = visibleOps(ops, false);
+    let i = 0;
+    while (i < rows.length) {
+        const op = rows[i];
+        if (op.kind === 'hunk') {
+            leftTable.appendChild(paneRow(op, 'left'));
+            rightTable.appendChild(paneRow(op, 'right'));
+            i++;
+            continue;
+        }
+        if (op.kind === 'same') {
+            leftTable.appendChild(paneRow(op, 'left'));
+            rightTable.appendChild(paneRow(op, 'right'));
+            i++;
+            continue;
+        }
+        // The whole changed run, whatever order the diff emits the two
+        // kinds in, so a block here is the block unified view has.
+        const dels = [];
+        const adds = [];
+        for (let next = rows[i]; next && (next.kind === 'del' || next.kind === 'add'); next = rows[++i]) {
+            (next.kind === 'del' ? dels : adds).push(next);
+        }
+        const n = Math.max(dels.length, adds.length);
+        for (let k = 0; k < n; k++) {
+            const left = paneRow(dels[k], 'left');
+            const right = paneRow(adds[k], 'right');
+            // The run is one block (blockNav); its first row starts it, on
+            // both sides so either pane can be measured.
+            if (k === 0) {
+                left.classList.add('block-start');
+                right.classList.add('block-start');
+            }
+            leftTable.appendChild(left);
+            rightTable.appendChild(right);
+        }
+    }
+    const leftPane = pane(leftTable, 'left');
+    const rightPane = pane(rightTable, 'right');
+    linkScroll(leftPane, rightPane);
+    return [leftPane, rightPane];
+}
+// Keep two panes' vertical scroll in step. The scroll one pane is
+// given by the other is remembered and its own event for it ignored:
+// otherwise that event would set the first pane in turn, and the two
+// would fight whenever the second could not scroll quite as far — a
+// drag of one scrollbar then bounces between the two positions.
+//
+// The record is one-shot — consumed by the event it was made for —
+// or a later scroll of the user's own that happens to land on the
+// same value (PageDown then PageUp) would be swallowed too and leave
+// the panes out of step until the next scroll.
+function linkScroll(a, b) {
+    const given = new Map();
+    const follow = (from, to) => {
+        if (given.get(from) === from.scrollTop) {
+            given.delete(from);
+            return;
+        }
+        // Already level: setting the same value fires no event, so a
+        // record left here would swallow a real scroll later.
+        if (to.scrollTop === from.scrollTop)
+            return;
+        to.scrollTop = from.scrollTop;
+        // What `to` actually landed on, which is what its event will say.
+        given.set(to, to.scrollTop);
+    };
+    a.addEventListener('scroll', () => follow(a, b));
+    b.addEventListener('scroll', () => follow(b, a));
+}
+// Focusable, like the viewer's code box: a pane that can be stood in
+// scrolls with the arrow keys, and is what Ctrl-A selects.
+function pane(table, side) {
+    const el = document.createElement('div');
+    el.className = `pane ${side}`;
+    el.tabIndex = 0;
+    el.appendChild(table);
+    return el;
+}
+// One row of one pane. No op is the blank across from a line the other
+// side has alone.
+function paneRow(op, side) {
+    const tr = document.createElement('tr');
+    if (!op) {
+        tr.className = 'filler';
+        tr.appendChild(td('num', ''));
+        tr.appendChild(td('code', ''));
+        return tr;
+    }
+    if (op.kind === 'hunk') {
+        tr.className = 'hunk';
+        tr.appendChild(td('num', ''));
+        tr.appendChild(td('code', op.text));
+        return tr;
+    }
+    tr.className = op.kind === 'same' ? '' : op.kind;
+    tr.appendChild(td('num', String(side === 'left' ? op.aLine : op.bLine)));
+    tr.appendChild(td('code', op.text));
+    return tr;
+}
+function td(className, text) {
+    const cell = document.createElement('td');
+    cell.className = className;
+    cell.textContent = text;
+    return cell;
+}