@vernikr/size-report 2.5.0 → 2.7.0

package/src/page/table.js

@@ -1,45 +1,47 @@
-import { cellParts, commitParts, nowModel, rowModel, valueParts } from '../derived.js';
+import { cellParts, commitParts, deltaOf, nowModel, rowModel, valueParts } from '../derived.js';
 import { appEl } from './dom.js';
-import { appData, appUi, appView, appMetric } from './state.js';
+import { appData, appUi, appView } from './state.js';
 
-/* An approximate cell: the mark comes from the engine's data rather than being derived here from a file's path — the rule
- * of accuracy lives where the numbers are counted. For a file's cell it is that number itself, for a total the worst of
- * what went into it, or the sum would promise an accuracy its terms do not have. Returns the metric's description (its way
- * of counting is what goes into the cell's tooltip) or nothing. */
-export function appApprox(where, files, key) {
-  const marks = appData.approx[key];
-  if (marks === undefined) return null;
-  const row = where === 'now' ? marks.now : marks.rows;
-  const base = where === 'now' ? 0 : where * appData.files.length;
-  for (let i = 0; i < files.length; i++) {
-    if (row.charAt(base + files[i]) === '1') return appMetric[key];
-  }
-  return null;
-}
+/* The table is built once and then only shown and hidden. That rests on three things that do not depend on the
+ * reader: a cell's content and colour come from the pair (commit, file) and a metric (`cellParts`, `valueParts`),
+ * the order of the columns comes from the files alone, and only the visibility and the totals are the choice's.
+ * Hence nothing below builds a node after the first drawing — a click writes a class and a number.
+ *
+ * What makes this cheap is a cache of references to the nodes of every column (`appTable` returns it): reaching a
+ * cell through the markup costs several times what changing it does (measured: `tr.children[i]` 0.0254 ms against
+ * `classList.toggle` 0.0070 ms), and the first drawing creates every node anyway, so collecting them is free. The
+ * columns of the fixed layout — a `<col>` per column, carrying the counted width — are collected there too.
+ *
+ * The totals are the only numbers that move with the choice, and they are carried rather than recounted: a sum is
+ * linear, so a file switched off subtracts exactly its own numbers — the same integers the first drawing wrote.
+ */
 
-/* The cell's class is assembled in one place: both the mark of approximation and the gap ("no such file") are properties
- * of the cell itself rather than of its content. */
-function appCellClass(first, miss, approx) {
-  return 'num' + (first ? ' g' : '') + (miss ? ' miss' : '') + (approx === null ? '' : ' approx');
+/* The cell's class: the metric's track (`m0`, `m1`, … — one class per metric, which is what hides a whole metric
+ * at once), the group it belongs to (every cell of a group, not the first one: the group's left border is carried
+ * by the first *enabled* metric, and the styling decides which that is), and the gap ("no such file"). */
+function appCellClass(mi, miss) {
+  return 'num g m' + mi + (miss ? ' miss' : '');
 }
 
-// The markup of a commit row's cell: the rules live in cellParts, only the node is here.
-export function appCell(cell, first, approx) {
-  const parts = cellParts(cell.value, cell.delta, '−');
-  const td = appEl('td', appCellClass(first, parts.miss, approx));
-  if (approx !== null) td.title = appUi.approxCell + approx.method;
+/* A cell filled where it stands: the totals are written again on every click, and a cell has to forget its own
+ * content first — a delta is a node of its own, so `textContent` alone would leave it behind. */
+function appFill(td, parts) {
+  td.textContent = '';
   if (parts.dir === null) td.textContent = parts.text;
   else td.appendChild(appEl('span', 'delta ' + parts.dir, parts.text));
   return td;
 }
 
+// The markup of a commit row's cell: the rules live in cellParts, only the node is here.
+export function appCell(cell, mi) {
+  const parts = cellParts(cell.value, cell.delta, '−');
+  return appFill(appEl('td', appCellClass(mi, parts.miss)), parts);
+}
+
 // The markup of the top row's cell: the rules live in valueParts.
-export function appValueCell(value, first, approx) {
+export function appValueCell(value, mi) {
   const parts = valueParts(value);
-  const td = appEl('td', appCellClass(first, parts.miss, approx));
-  if (approx !== null) td.title = appUi.approxCell + approx.method;
-  td.textContent = parts.text;
-  return td;
+  return appFill(appEl('td', appCellClass(mi, parts.miss)), parts);
 }
 
 /* A commit's caption: the date, the subject, the journal section's mark. The column's width and the clipping of a long
@@ -61,15 +63,9 @@ export function appCommit(row) {
   return th;
 }
 
-export function appSubHead(metrics) {
-  const tr = appEl('tr');
-  metrics.forEach((m, mi) => tr.appendChild(appEl('th', mi === 0 ? 'g' : '', m.label)));
-  return tr;
-}
-
 /* The empty states: when there will be no numbers at all, the page says so in words rather than showing a grid without
  * columns. Every file can be switched off — then the total volume remains, and the note explains why there are no
- * columns. */
+ * columns. The table itself stands there either way: this is about what is shown, not about what exists. */
 export function appState(metricsCount, filesCount) {
   const state = document.getElementById('state');
   const text = metricsCount === 0 ? appUi.empty : (filesCount === 0 ? appUi.noFiles : '');
@@ -78,26 +74,44 @@ export function appState(metricsCount, filesCount) {
   document.getElementById('shell').hidden = metricsCount === 0;
 }
 
-/* The header: a row of groups (the total and the files) and a row of metrics under it. The metrics repeat for every file,
- * so the sub-header is assembled once and its nodes then move on into the following ones — no copies of the markup are
- * made. */
-export function appHead(shown, files, metrics) {
+/* The order of the columns: the files the last commit touched come first — the report is rebuilt after every
+ * commit, and a reader's first question is what that edit brought. Inside each part the order stays as it comes
+ * from the settings, and it depends on the files rather than on the choice: that is what lets a column be hidden
+ * without moving the others. */
+export function appOrder() {
+  const files = [];
+  appData.files.forEach((_f, i) => files.push(i));
+  files.sort((a, b) => (appData.last[a] === true ? 0 : 1) - (appData.last[b] === true ? 0 : 1));
+  return files;
+}
+
+/* The header: a row of groups (the total and the files) and a row of metrics under it — every metric of every file,
+ * because nothing here knows the choice. The headings whose `colSpan` follows the number of enabled metrics and the
+ * headings of each file's column are collected in the cache: they are the nodes a click has to touch. */
+export function appHead(files, metrics, cache) {
   const head = appEl('tr');
   const commit = appEl('th', 'c-commit', appUi.commit);
   commit.rowSpan = 2;
   head.appendChild(commit);
-  const total = appEl('th', 'g', appUi.total);
-  total.colSpan = metrics.length;
-  head.appendChild(total);
-  files.forEach((i) => {
-    const th = appEl('th', 'g', appData.files[i].label);
+  const subs = appEl('tr');
+  const group = (label, i) => {
+    const th = appEl('th', 'gh', label);
     th.colSpan = metrics.length;
     head.appendChild(th);
-  });
-  const subs = appSubHead(shown);
-  files.forEach(() => {
-    const more = appSubHead(shown);
-    while (more.firstChild) subs.appendChild(more.firstChild);
+    cache.spans.push(th);
+    /* The group's own heading belongs to the column: hiding a file has to take its caption with it, or the header
+     * would keep a name over numbers that are gone. */
+    if (i !== null) cache.cols[i].push(th);
+    metrics.forEach((_key, mi) => {
+      const cell = appEl('th', 'g m' + mi, appData.metrics[mi].label);
+      subs.appendChild(cell);
+      if (i !== null) cache.cols[i].push(cell);
+    });
+  };
+  group(appUi.total, null);
+  files.forEach((i) => {
+    cache.cols[i] = [];
+    group(appData.files[i].label, i);
   });
   const thead = appEl('thead');
   thead.appendChild(head);
@@ -105,38 +119,231 @@ export function appHead(shown, files, metrics) {
   return thead;
 }
 
-/* A commit row: the caption and the numbers. The deltas come from the shared calculation (`rowModel`) rather than from
- * here — two ways to count one row would be two answers. The mark of approximation is each cell's own: for a total it
- * covers every file that went into it, for a file that file alone. */
-export function appRow(r, metrics, files) {
+/* A text's breadth in `ch`, the unit a column is measured in: a digit is exactly one `ch` in this table's font
+ * (measured in Chrome: 8.67px against 8.67px), and a thin space is counted as a third of a digit — nothing else is
+ * discounted. Without that one fraction every number column would come out a fifth wider than the number in it (the
+ * grouping makes a text 21 % narrower than its characters, measured), which would give back more than the padding and
+ * the clipping of this step save. What is left over-measures — a letter is 0.84 of a `ch`, a slash 0.48 — and that is
+ * the safe side: a cell clips nothing, so a column a character short would show a number running over its neighbour. */
+function appBreadth(text) {
+  let wide = 0;
+  for (let i = 0; i < text.length; i++) wide += text[i] === '\u2009' ? 0.35 : 1;
+  return wide;
+}
+
+/* The widest text of every column, counted before a single node is made: the numbers of the commit rows — through
+ * `rowModel`, the very model the cells are drawn from, so a column cannot be sized for a number other than the one
+ * that will stand in it — the absolute sizes of the "now" row and the metric's own caption. */
+function appWidest(files, keys) {
+  const wide = files.map(() => keys.map(() => 0));
+  const total = keys.map(() => 0);
+  const put = (into, mi, breadth) => { if (breadth > into[mi]) into[mi] = breadth; };
+  const delta = (cell) => appBreadth(cellParts(cell.value, cell.delta, '−').text);
+  const value = (v) => appBreadth(valueParts(v).text);
+  appData.rows.forEach((row, r) => {
+    const model = rowModel(row.values, r === 0 ? null : appData.rows[r - 1].values, keys);
+    model.total.forEach((cell, mi) => put(total, mi, delta(cell)));
+    files.forEach((i) => model.files[i].forEach((cell, mi) => put(wide[i], mi, delta(cell))));
+  });
+  const now = nowModel(appData.now, keys);
+  now.total.forEach((v, mi) => put(total, mi, value(v)));
+  files.forEach((i) => now.files[i].forEach((v, mi) => put(wide[i], mi, value(v))));
+  keys.forEach((_key, mi) => {
+    const caption = appBreadth(appData.metrics[mi].label);
+    put(total, mi, caption);
+    wide.forEach((per) => put(per, mi, caption));
+  });
+  return { total: total, files: wide };
+}
+
+/* A group's heading — a file's name, the word over the total — is one line over the columns of that group
+ * (`white-space: nowrap` in the shared styling), so the group as a whole has to be wide enough for it, or the names of
+ * two neighbouring groups would run into one another. The caption is divided among the metrics of the group rather than
+ * weighed against their sum: every column carries at least its share, so the group can never come out narrower than the
+ * caption, while a column that is wider anyway keeps its own count. */
+function appGroupWide(per, label) {
+  const share = Math.ceil(appBreadth(label) / per.length);
+  return per.map((n) => Math.max(n, share));
+}
+
+/* The columns, before the rows: `table-layout: fixed` reads the first row of the table and takes the widths from there,
+ * so they are known while the table is built rather than measured by the browser over every cell of it. A column
+ * carries the metric's class (`m0`, `m1`, …) — which is what hides a whole metric at once — and its counted width in
+ * `ch`; the styling adds the padding and the border to it (`#grid col`), because a count and a drawing are one sum
+ * rather than two. The columns of a file are collected where its cells are, so one switch writes one class over both. */
+function appCols(files, wide, cache) {
+  const group = appEl('colgroup');
+  const add = (n, mi) => {
+    const col = appEl('col', 'm' + mi);
+    col.style.setProperty('--ch', n + 'ch');
+    group.appendChild(col);
+    return col;
+  };
+  group.appendChild(appEl('col', 'c-commit'));
+  appGroupWide(wide.total, appUi.total).forEach(add);
+  files.forEach((i) => appGroupWide(wide.files[i], appData.files[i].label)
+    .forEach((n, mi) => { cache.cols[i].push(add(n, mi)); }));
+  return group;
+}
+
+/* A file's share of a row: one cell per metric, in the order of the table's columns, and each is put into its
+ * column's cache while it is made. The maker is what tells a commit's delta from an absolute size at HEAD — the walk
+ * over the files is one, and there is no second one to drift away. */
+function appRowCells(tr, model, files, cache, make) {
+  files.forEach((i) => {
+    model.files[i].forEach((value, mi) => {
+      const td = make(value, mi);
+      cache.cols[i].push(td);
+      tr.appendChild(td);
+    });
+  });
+}
+
+/* A commit row: the caption and the numbers. The deltas come from the shared calculation (`rowModel`) rather than
+ * from here — two ways to count one row would be two answers. The model is taken whole (every file) because the
+ * table holds every column, and the column order of the table is applied by taking the model by the file's own
+ * index: the model lists the files the way the data does, not the way the columns stand. */
+export function appRow(r, files, metrics, cache) {
   const row = appData.rows[r];
   const prev = r === 0 ? null : appData.rows[r - 1];
-  const model = rowModel(row.values, prev === null ? null : prev.values, metrics, appView.files);
+  const model = rowModel(row.values, prev === null ? null : prev.values, metrics);
   const tr = appEl('tr');
   tr.appendChild(appCommit(row));
   model.total.forEach((cell, mi) => {
-    tr.appendChild(appCell(cell, mi === 0, appApprox(r, files, metrics[mi])));
+    const td = appCell(cell, mi);
+    cache.sums[mi][r] = cell.value;
+    cache.cells[mi][r] = td;
+    tr.appendChild(td);
+  });
+  appRowCells(tr, model, files, cache, appCell);
+  return tr;
+}
+
+/* The top row holds the absolute sizes at HEAD: an absolute number stands in the table once, and it is the one every
+ * delta below it adds up to. Its numbers are the state at HEAD rather than the last commit's cells, which is why the
+ * running sums take them from here instead of assuming they are the row above. */
+export function appNow(files, metrics, cache) {
+  const tr = appEl('tr', 'now');
+  tr.appendChild(appEl('th', 'c-commit', appUi.now));
+  const model = nowModel(appData.now, metrics);
+  const last = appData.rows.length;
+  model.total.forEach((v, mi) => {
+    const td = appValueCell(v, mi);
+    cache.sums[mi][last] = v;
+    cache.cells[mi][last] = td;
+    tr.appendChild(td);
   });
-  model.files.forEach((cells, fi) => cells.forEach((cell, mi) => {
-    tr.appendChild(appCell(cell, mi === 0, appApprox(r, [files[fi]], metrics[mi])));
-  }));
+  appRowCells(tr, model, files, cache, appValueCell);
   return tr;
 }
 
-/* The body: the commit rows built from the newest down, plus the "now" row with the absolute sizes at HEAD. The deltas
+/* The body: the commit rows from the newest down, plus the "now" row with the absolute sizes at HEAD. The deltas
  * under it add up to it, which is why it stands first. */
-export function appBody(metrics, files) {
+export function appBody(files, metrics, cache) {
   const body = appEl('tbody');
-  for (let r = appData.rows.length - 1; r >= 0; r--) body.appendChild(appRow(r, metrics, files));
-
-  const now = appEl('tr', 'now');
-  now.appendChild(appEl('th', 'c-commit', appUi.now));
-  const nowCells = nowModel(appData.now, metrics, appView.files);
-  nowCells.total.forEach((v, mi) => now.appendChild(appValueCell(v, mi === 0,
-    appApprox('now', files, metrics[mi]))));
-  nowCells.files.forEach((cells, fi) => cells.forEach((v, mi) => {
-    now.appendChild(appValueCell(v, mi === 0, appApprox('now', [files[fi]], metrics[mi])));
-  }));
-  body.insertBefore(now, body.firstChild);
+  for (let r = appData.rows.length - 1; r >= 0; r--) body.appendChild(appRow(r, files, metrics, cache));
+  body.insertBefore(appNow(files, metrics, cache), body.firstChild);
   return body;
 }
+
+/* The whole table, built once. What the cache holds is what the reader's choice works with: the nodes of each file's
+ * column — its cells, its headings and its `<col>` (`cols`), the group headings whose colSpan follows the enabled
+ * metrics (`spans`), the cells of the totals (`cells`), the running sums (`sums`) and those same sums with every
+ * column on (`all`) — the sums a view painted again starts from. */
+export function appTable(grid) {
+  const metrics = appData.metrics.map((m) => m.key);
+  const files = appOrder();
+  const cache = { grid: grid, keys: metrics, cols: [], drawn: [], spans: [], cells: [], sums: [], all: [] };
+  /* The columns are built shown: that is the state the nodes carry before anything is drawn. */
+  files.forEach((i) => { cache.drawn[i] = true; });
+  metrics.forEach(() => {
+    cache.cells.push([]);
+    cache.sums.push([]);
+  });
+  grid.textContent = '';
+  grid.appendChild(appHead(files, metrics, cache));
+  grid.appendChild(appBody(files, metrics, cache));
+  /* The columns stand before the rows rather than beside them: a `<colgroup>` is where the fixed layout reads its
+   * widths from, and it has to be in the markup before the browser settles on a layout — the drawing is one pass, not
+   * two. */
+  grid.insertBefore(appCols(files, appWidest(files, metrics), cache), grid.firstChild);
+  cache.all = cache.sums.map((row) => row.slice());
+  return cache;
+}
+
+/* How many nodes a file's column holds — its cells, its captions and its `<col>`. It is the unit the page's bar
+ * counts in (`appDraw`), so it is answered here, where the column's nodes are: the choice's state costs arithmetic,
+ * and the nodes are the table's business. */
+export function appColumnSize(cache, i) {
+  return cache.cols[i].length;
+}
+
+/* Whether a file's column has to be drawn at all: `drawn` is the state its nodes carry (the table is built with every
+ * column shown), so a column that is on and was never drawn is already right. The first drawing of a report has
+ * nothing switched off and therefore costs nothing, and a record from the memory or a link queues exactly the columns
+ * that differ from it — on a table of a few hundred thousand cells that is the difference between a page that opens
+ * and a page that works for a minute after opening. */
+export function appColumnStale(cache, i) {
+  return cache.drawn[i] !== (appView.files[i] === true);
+}
+
+/* A file's column shown or hidden: its cells and its headings together, one class per node and no new node. A hidden
+ * column keeps its place in the markup — the order of the columns is the files' business, not the choice's. What the
+ * nodes carry is remembered (`drawn`), or a repeated switch would walk a column nobody has to see again. */
+export function appColumn(cache, i, on) {
+  cache.cols[i].forEach((node) => node.classList.toggle('off', !on));
+  cache.drawn[i] = on;
+}
+
+/* A file's share of the totals: switched off it takes exactly its own numbers out of the running sums, switched on
+ * it puts them back. Two rows per file are the whole of it — the numbers are the data's, and a sum of integers is
+ * exact in either direction. */
+export function appContribute(cache, i, on) {
+  const sign = on ? 1 : -1;
+  appData.rows.forEach((row, r) => {
+    const values = row.values[i];
+    if (values === null) return;
+    cache.keys.forEach((key, mi) => { cache.sums[mi][r] += sign * values[key]; });
+  });
+  const values = appData.now[i];
+  if (values === null) return;
+  const last = appData.rows.length;
+  cache.keys.forEach((key, mi) => { cache.sums[mi][last] += sign * values[key]; });
+}
+
+/* The totals written where they stand: a data row shows the change against the row below it, the "now" row the
+ * absolute size — the same rules the first drawing used (`cellParts`, `valueParts`), so the reader sees one kind of
+ * number and not two. */
+export function appTotals(cache) {
+  const last = appData.rows.length;
+  cache.cells.forEach((cells, mi) => {
+    cells.forEach((td, r) => {
+      if (r === last) { appFill(td, valueParts(cache.sums[mi][r])); return; }
+      appFill(td, cellParts(cache.sums[mi][r], deltaOf(cache.sums[mi][r], r === 0 ? null : cache.sums[mi][r - 1]), '−'));
+    });
+  });
+}
+
+/* The running sums of the whole view again: a link, a record from the memory and the first drawing change the choice
+ * as a whole rather than a column, so the sums start from the sums with every column on and take the switched-off
+ * ones out — one copy of the numbers instead of a recount. */
+export function appTotalsReset(cache) {
+  cache.sums = cache.all.map((row) => row.slice());
+  appData.files.forEach((_f, i) => { if (!appView.files[i]) appContribute(cache, i, false); });
+  appTotals(cache);
+}
+
+/* The metrics of the choice: a class on the table hides every cell of a metric at once, and the group headings follow
+ * how many are left — two things that change, instead of a pass over the metric's cells (measured: 2.20 ms and 265
+ * operations against 433 ms and 56 496 for walking them). `.m-none` is what the styling reads to drop the group's
+ * left border when there is nothing left to separate. */
+export function appMetrics(cache) {
+  let on = 0;
+  cache.keys.forEach((key, mi) => {
+    const visible = appView.metrics[key] === true;
+    if (visible) on++;
+    cache.grid.classList.toggle('m-off-' + mi, !visible);
+  });
+  cache.grid.classList.toggle('m-none', on === 0);
+  cache.spans.forEach((th) => { th.colSpan = on === 0 ? 1 : on; });
+}

package/src/page/work.js

@@ -0,0 +1,55 @@
+/* The page's long work, and the stripe that says it is going on.
+ *
+ * A switch on a file's box changes a class on every node of that file's column, and a folder or a category is that same
+ * work over every file below it. That alone is cheap — measured at about 2 µs a node, so a whole category of this
+ * repository's report (73 columns, 55 042 nodes) is 120 ms of it — but it is not the price. **The browser lays this
+ * table out again for any change of a column's visibility, and that is close to a second on a table of a few hundred
+ * thousand cells** (`probes/step-12-columns.mjs`: 1 cell toggled 234 ms of layout, 750 cells 287 ms, 6 000 cells
+ * 539 ms, and the whole click on the shipped page 867 ms blocked with a 742 ms task).
+ *
+ * Hence the shape of this chapter, and it is a decision rather than a default. The drawing of a switch is **one task**:
+ * what is queued is drawn in a single go, one layout, one repaint. Slicing it — a queue worked off between timeouts —
+ * was written first and measured (Chrome 153, this repository's report): 37 slices of two columns each paid the table's
+ * relayout 37 times, 2.5–4 s a slice, 95 frames and 169 layouts of 151.9 s of pure layout time against 1.04 s for the
+ * same click when it is not sliced, with the tab growing to several gigabytes of repaint. The slice is the thing that
+ * freezes the page, only more often, so there is none.
+ *
+ * What is left is honesty about it: work short enough to be over before the browser could paint a stripe is done on the
+ * click itself, and above that the stripe appears, the drawing happens in the next task, and the stripe goes away —
+ * so a reader sees that the page is working rather than wondering whether it hung. The stripe carries no share: within
+ * one task the browser cannot repaint, so a bar that filled would be a bar that lies, and the page already knows the
+ * one thing that is true about it (the work is going on).
+ */
+
+/* Above this much node work the drawing is one task with a stripe rather than a task on the click: a stripe that
+ * appears and disappears within the same frame is worse than none, and the figure is one file's column of a report of
+ * this repository's size (754 nodes). */
+export const APP_LONG = 2000;
+
+/* The stripe: on while a switch is being drawn, off when it is done. There is nothing to count here, and the length is
+ * carried by the styling (an indeterminate stripe), which is why this function takes a switch rather than a share. */
+export function appBar(shown) {
+  const bar = document.getElementById('bar');
+  if (bar !== null) bar.hidden = !shown;
+}
+
+/* What a switch asks for: `items` are the columns that have to be drawn (`{i, units}` — the file's index and the nodes
+ * of its column), `step` draws one of them from the view, and the total decides whether the drawing is the reader's own
+ * click or the next task with the stripe over it. Only the columns out of step with the view are asked for at all
+ * (`appColumnStale`), so a report opened with everything switched on has nothing to draw here. */
+export function appDraw(step, items) {
+  /* Counted by a plain walk rather than by `reduce`: the page's shell is held to a rule that it counts no totals of the
+   * table itself, and a guard that has to tell a sum of nodes from a sum of numbers is a guard that will be argued with
+   * one day. The count of nodes is not one of the report's numbers. */
+  let units = 0;
+  items.forEach((item) => { units += item.units; });
+  if (units <= APP_LONG) {
+    items.forEach((item) => step(item.i));
+    return;
+  }
+  appBar(true);
+  setTimeout(() => {
+    items.forEach((item) => step(item.i));
+    appBar(false);
+  }, 0);
+}

package/src/parse.js

@@ -126,7 +126,7 @@ function onNodeCheck(text) {
   } catch (e) {
     const lines = String((e && e.stderr) || (e && e.message) || e).split('\n')
       .map((l) => l.trim()).filter((l) => l !== '');
-    // The fallback reason travels into a printed refusal, so it is Russian like the rest of the output.
+    // The fallback reason travels into a printed refusal, so it is worded like the rest of the output.
     return lines.find((l) => /^\w*Error\b/.test(l)) || lines[0] || 'the module does not parse';
   } finally {
     fs.rmSync(tmp, { force: true });

package/src/project.js

@@ -220,8 +220,8 @@ export function projectConfig(root) {
     output: output,
     fixCommand: fixCommandOf(root),
     metrics: ['raw', 'min', 'tok'],
-    // Real compression and a real dictionary rather than approximations: a new project must not start
-    // with numbers that are honest only by half. Without the optional dependency the metric falls back
+    // Real compression and a real dictionary rather than their cheaper substitutes: a new project must
+    // not start with numbers counted another way. Without the optional dependency the metric falls back
     // to another count and the run returns code 4 — said by the metric label rather than left to a
     // default.
     minify: { engine: 'esbuild' },

package/src/strip/guard.js

@@ -41,9 +41,10 @@ export function assertCompilable(min, rev, p, src) {
       + '  fix: remove this extension from minify.guard or give it '
       + 'minify.ext — for example { "' + path.extname(p).toLowerCase() + '": "strip-lines" }');
   }
-  // The reason comes from the parse the file actually was: blaming the other shape would
-  // explain nothing.
-  throw new Error('the stripper broke ' + p + ' at ' + rev.slice(0, 7) + ': '
+  /* The reason comes from the parse the file actually was: blaming the other shape would explain nothing.
+   * A revision is optional: the assembler of the report's page squeezes a text it built itself, and there is no
+   * revision to name it by — then the message says only what broke. */
+  throw new Error('the stripper broke ' + p + (rev === '' ? '' : ' at ' + rev.slice(0, 7)) + ': '
     + (shape ? asModule : asScript));
 }
 

package/src/strip.js

@@ -4,8 +4,7 @@ import { compactJson, stripCss, stripHtml, stripLines } from './strip/forms.js';
 
 /* Stripping ballast: which form of text applies to which file. Only text transformation —
  * the module knows no history and reads no settings, only the strategy it is handed. What
- * binds the forms to a file lives here: the extension, the strategy, and which strategies
- * count as exact.
+ * binds the forms to a file lives here: the extension and the strategy.
  *
  * The forms are re-exported from here, so that the package entry point has one address for
  * them and a move inside the parsing stays invisible to whoever relied on them. */
@@ -31,9 +30,9 @@ export const STRATEGIES = ['strip-js', 'strip-html', 'strip-css', 'json', 'strip
 
 /* The strategies that are minification itself: JSON loses only insignificant whitespace
  * (numbers take their shortest form) and nobody can make it shorter. The rest are a
- * simplification — they drop ballast but neither rename nor restructure code, so no exact
- * number can be promised for them. The list is owned here, next to the strategies, and the
- * metric reads it to decide whether its number is exact or approximate. */
+ * simplification — they drop ballast but neither rename nor restructure code. The list is owned
+ * here, next to the strategies, and the metric reads it to decide which formats it counts
+ * another way. */
 export const EXACT_STRATEGIES = ['json'];
 
 export function strategyFor(file, cfg) {

package/src/table.css

@@ -1,23 +1,59 @@
 /* One type face for the whole table; numbers line up by their digits thanks to tabular-nums rather than through a
- * monospaced font. */
-table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
-th, td { padding: 2px 7px; border-bottom: 1px solid rgba(127, 127, 127, .25); white-space: nowrap; }
+ * monospaced font.
+ *
+ * The layout is **fixed**, and the widths come from the `<colgroup>` the page builds along with the table (`appCols`):
+ * laying this table out as `auto` means measuring every cell of it — 174 468 of them here — to assign the widths of
+ * 265 columns.
+ *
+ * **Both declarations are needed, and the width is the one that is easy to lose.** A fixed layout with `width: auto`
+ * falls back to the automatic algorithm — the specification says so, and Chrome does it: the columns' widths are then
+ * ignored, the cells are measured all the same, and nothing looks wrong except that nothing is won. `100%` is what
+ * gives the table a definite width: it is the window, and the columns are wider than it, so the table keeps the widths
+ * it was given (`check` and the browser probe both watch this). */
+table { border-collapse: collapse; font-variant-numeric: tabular-nums; table-layout: fixed; width: 100%; }
+/* A counted width is the **border box** of a column — the padding of its cells and the group's border are inside it
+ * (measured in Chrome: `7ch` gave a 47px content box with 4px of padding each side). `--ch` is that count in
+ * characters, written by the page per column; `--clip` is the fixed measure a commit's caption is clipped to, and the
+ * one a narrow window may shorten (app.css). */
+#grid { --cell-pad: 4px; --col-line: 1px; --clip: 190px; }
+th, td { padding: 2px var(--cell-pad); border-bottom: 1px solid rgba(127, 127, 127, .25); white-space: nowrap; }
+/* The count over-measures a sign and a thin space, which is the safe side: a cell clips nothing, so a column a
+ * character short would show a number running over its neighbour. */
+#grid col { width: calc(var(--ch, 0px) + var(--cell-pad) * 2 + var(--col-line)); }
+#grid col.c-commit { width: calc(var(--clip) + var(--cell-pad) * 2 + var(--col-line)); }
 /* A two-row header: both rows stick, so the second is offset by exactly the first one's height (line-height 20 plus the
  * 2px bottom border), or the rows would overlap. */
-thead th { position: sticky; top: 0; z-index: 3; background: Canvas; text-align: center; line-height: 20px; padding: 0 7px; }
+thead th { position: sticky; top: 0; z-index: 3; background: Canvas; text-align: center; line-height: 20px; padding: 0 var(--cell-pad); }
 thead tr:first-child th { border-bottom-width: 2px; }
 thead tr:last-child th { top: 22px; }
 .num { text-align: right; }
-.g { border-left: 1px solid rgba(127, 127, 127, .35); }
+/* The group's left border is carried by the first *enabled* metric: four rules instead of the eight combinations of
+ * "which of them is first", so switching a metric off moves the border by itself and no line of JS knows about it.
+ * The registry holds four metrics (`raw`, `min`, `tok`, `gzip`) — that is the count below, and `test/page-view.test.js`
+ * reddens if a fifth name appears. A group's heading (`.gh`) spans its metrics rather than belonging to one, so its
+ * own left edge is there while any metric is on (`.m-none` is set when the reader switched them all off). */
+#grid .g { border-left: 0; }
+#grid:not(.m-off-0) .g.m0,
+#grid.m-off-0:not(.m-off-1) .g.m1,
+#grid.m-off-0.m-off-1:not(.m-off-2) .g.m2,
+#grid.m-off-0.m-off-1.m-off-2:not(.m-off-3) .g.m3 { border-left: 1px solid rgba(127, 127, 127, .35); }
+#grid:not(.m-none) .gh { border-left: 1px solid rgba(127, 127, 127, .35); }
+/* A metric switched off hides all of its cells and both of its headings at once — one class on the table instead of a
+ * pass over the metric's cells (measured: 265 operations against 56 496). */
+#grid.m-off-0 .m0, #grid.m-off-1 .m1, #grid.m-off-2 .m2, #grid.m-off-3 .m3 { display: none; }
+/* A file's column switched off: its cells and its headings together. The hidden column keeps its place in the markup,
+ * so the columns that stay do not move. */
+#grid .off { display: none; }
 /* The sticky left column: an opaque background (Canvas), or numbers would show through the cell when scrolling sideways. A
  * tier above the neighbouring cells (2) and below the header (3); the header's corner is above them all, or the column groups
  * would crawl over the commit column. */
 .c-commit { position: sticky; left: 0; z-index: 2; background: Canvas; text-align: left; font-weight: 400; }
 .c-commit a { color: inherit; }
 thead .c-commit { z-index: 6; }
-/* This block sets the column's width. Without it the cell's content went past its borders and was drawn over the neighbouring
- * numbers: a table cell clips nothing. */
-.clip { display: flex; align-items: baseline; gap: 6px; width: 300px; }
+/* This block fills the commit column, whose width is set by the column itself (`#grid col.c-commit`). It took the
+ * column's measure with it: the cell's content would otherwise go past its borders and be drawn over the neighbouring
+ * numbers, because a table cell clips nothing. */
+.clip { display: flex; align-items: baseline; gap: 6px; width: 100%; }
 .when { flex: none; opacity: .7; }
 .subj { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: block; }
 .subj.plain { opacity: .7; }