browsertime 27.5.0 → 28.1.0

package/CHANGELOG.md

@@ -1,13 +1,45 @@
 # Browsertime changelog (we do [semantic versioning](https://semver.org))
 
-## 27.5.0 - 2026-06-07
+## 28.1.0 - 2026-07-17
 
 ### Added
+* Long Animation Frames (`pageinfo.loaf`) now ship every per-script field the LoAF API exposes (`startTime`, `duration`, `executionStart`, `pauseDuration`) plus `startTime` and `firstUIEventTimestamp` per frame — enough to attribute blocking time to individual scripts, place each frame on the page timeline and spot frames where an input was waiting [#2522](https://github.com/sitespeedio/browsertime/pull/2522) [#2523](https://github.com/sitespeedio/browsertime/pull/2523) [#2526](https://github.com/sitespeedio/browsertime/pull/2526).
+* New `pageinfo.loafSummary` key (`totalFrames`, `totalBlockingDuration`, `totalDuration`): `pageinfo.loaf` only ships the 10 frames with the most blocking, so totals computed from it understate busy pages [#2524](https://github.com/sitespeedio/browsertime/pull/2524).
+* LoAF script URLs get the same ResourceLoader `label`s as `cpu.urls` (`load.php[startup]` and friends) [#2525](https://github.com/sitespeedio/browsertime/pull/2525).
+* Multi-module `load.php` batches are labeled with their first module name — pages lazy-load several general batches, so the bare `load.php[scripts]` label collided as soon as there was more than one [#2527](https://github.com/sitespeedio/browsertime/pull/2527).
+
+## 28.0.0 - 2026-07-17
+
+### Breaking
+* Browsertime now requires Node.js 22 or later. Node 20 reaches end of life and the TypeScript scripting support already needs a newer runtime [#2510](https://github.com/sitespeedio/browsertime/pull/2510).
+
+### Added
+* New `mainDocument` field per iteration (any browser with a HAR): final URL, status, redirect count and response headers of the main document, with sensitive headers always removed. Tag runs by cache state (`x-cache`, `age`) or experiment enrollment (`server-timing`) without HAR post-processing [#2500](https://github.com/sitespeedio/browsertime/pull/2500).
+* New `cpu.blocking` and `cpu.domains` keys (Chrome/Edge, `--cpu`): long-task blocking time per script (whole trace and before LCP) plus first vs third party CPU totals. Answers "which script should I fix first" [#2503](https://github.com/sitespeedio/browsertime/pull/2503).
+* `cpu.blocking` also splits blocking time by kind of work (`kinds`: script, style/layout, HTML parsing, …), and blocking HTML-parse tasks are attributed to the document URL instead of the anonymous `unknown` bucket. A page blocked by parsing its own large HTML needs a completely different fix than one blocked by JavaScript [#2512](https://github.com/sitespeedio/browsertime/pull/2512).
+* New `cpu.functionCosts` key (Chrome/Edge): the slowest JS functions by main-thread self time, with total time, source position and the owning ResourceLoader module for bundled code, parsed from the V8 sampling profiler that `--enableProfileRun` already enables. Says which function is slow instead of stopping at "this script used 300 ms" [#2511](https://github.com/sitespeedio/browsertime/pull/2511). Rows also carry `callees`, showing where an orchestrator's total went (for example which modules MediaWiki's `runScript` executed) [#2515](https://github.com/sitespeedio/browsertime/pull/2515).
+* New `cpu.selectorStats` key (Chrome only, on `--enableProfileRun`): per-selector CSS matching cost, showing the slowest selectors by elapsed time plus the wasteful ones with thousands of match attempts and zero matches. The only signal that says which selectors the style-recalc time goes to [#2517](https://github.com/sitespeedio/browsertime/pull/2517).
+* New `cpu.styleInvalidations` key (Chrome only, with `--chrome.timeline`): style/layout invalidations aggregated by reason, by trigger (which class/attribute keeps changing) and by source, resolved to the owning ResourceLoader module when coverage runs. The invalidation-tracking events were in every trace for years but never parsed [#2516](https://github.com/sitespeedio/browsertime/pull/2516) [#2521](https://github.com/sitespeedio/browsertime/pull/2521).
+* New `cpu.timers` key (Chrome only, with `--chrome.timeline`): setTimeout/setInterval pressure per script (installs, fires, fire time, timeout-0 and recurring counts) plus the individual timers grouped by install site, resolved to the owning ResourceLoader module when coverage runs. On Wikipedia the timeout-0 offender turns out to be jquery's deferred machinery [#2518](https://github.com/sitespeedio/browsertime/pull/2518) [#2519](https://github.com/sitespeedio/browsertime/pull/2519) [#2520](https://github.com/sitespeedio/browsertime/pull/2520).
+* `cpu.nonCompositedAnimations` entries now include `failureReasons`, the `compositeFailed` bitmask decoded via Blink's FailureReason enum, so consumers can tell a harmless "animation has no visible change" from a real "unsupported CSS property" [#2514](https://github.com/sitespeedio/browsertime/pull/2514).
+* New `cpu.frames` key (Chrome/Edge, `--cpu`): presented/partial/dropped frames, effective FPS and the longest gap between presented frames, from Chrome's PipelineReporter events. Counts only drops Chrome flags as smoothness-affecting [#2506](https://github.com/sitespeedio/browsertime/pull/2506).
+* Per-module coverage for MediaWiki ResourceLoader bundles: `load.php` coverage entries get a `modules` array with used/unused bytes per module, derived from the `mw.loader.impl` boundaries in the bundle source. Automatic, Chrome only [#2502](https://github.com/sitespeedio/browsertime/pull/2502).
+* New `cpu.moduleCosts` key: per-module main-thread CPU time inside ResourceLoader bundles, when both trace and coverage are collected. Per-module `selfTime` plus an `otherTime` bucket for whole-bundle work [#2505](https://github.com/sitespeedio/browsertime/pull/2505).
+* Stable `label` fields (`load.php[startup]`, `load.php[scripts]`, …) on ResourceLoader URLs in `cpu.urls`, `cpu.blocking`, `scriptCosts`, `forcedReflows` and coverage entries [#2504](https://github.com/sitespeedio/browsertime/pull/2504), and on `cpu.moduleCosts` [#2507](https://github.com/sitespeedio/browsertime/pull/2507). The raw URLs embed a `version=` parameter that changes every deploy and breaks per-bundle time series. Additive: `url` is untouched.
+* Inline CSS coverage entries are labeled with the owning MediaWiki template (`TemplateStyles:rNNNNNNN`, from the style element's `data-mw-deduplicate` attribute). Inline sheets all share the document URL (or an empty one), so Wikipedia's CSS coverage collapsed into anonymous buckets and nobody could see which template ships the dead CSS [#2509](https://github.com/sitespeedio/browsertime/pull/2509).
+* The `renderBlocking.recalculateStyle` summary (Chrome only) now includes the event `count` and the largest single event (`maxElements`, `maxDurationInMillis`), before FCP and LCP. Tells one massive style invalidation apart from thousands of small forced recalcs [#2496](https://github.com/sitespeedio/browsertime/pull/2496).
 * Bumped `chromedriver` and `edgedriver` to 149 [#2487](https://github.com/sitespeedio/browsertime/pull/2487).
 * Updated the Docker image to Chrome 149 / Firefox 151 / Edge 149 [#2486](https://github.com/sitespeedio/browsertime/pull/2486) [#2488](https://github.com/sitespeedio/browsertime/pull/2488).
+* Updated `@sitespeed.io/throttle` to 6.0.1 [#2499](https://github.com/sitespeedio/browsertime/pull/2499).
+* Releases are now built and published from GitHub Actions with npm provenance and an SBOM, so the published package can be verified against the source it was built from [#2491](https://github.com/sitespeedio/browsertime/pull/2491).
+
+### Changed
+* Coverage from `--enableProfileRun` is now a single object marked `source: 'profileRun'` instead of a one-element array keyed by iteration; indexing it by run number read `undefined` and reported no coverage. `--chrome.coverage` keeps the per-iteration array shape [#2501](https://github.com/sitespeedio/browsertime/pull/2501).
+* Document body-loading events (`DocumentLoader::*`, `NavigationBodyLoader::*`, `URLLoader::*`) now count as parse time and V8 interrupt/housekeeping as script evaluation in `cpu.categories`, instead of falling into `other`. What remains in `other` is almost entirely Chrome's task-scheduling overhead (RunTask self time), so consumers can present the bucket honestly instead of as unexplained mystery time [#2513](https://github.com/sitespeedio/browsertime/pull/2513).
 
 ### Fixed
-* Navigation-script failures now include the URL being tested and the iteration number in the error message, so failure logs and `markAsFailure` output point at the offending page without cross-referencing the surrounding log lines [#2489](https://github.com/sitespeedio/browsertime/pull/2489).
+* `--enableProfileRun` no longer affects the measured runs: combined with `--cpu` it misnamed every measured trace as `trace-N-extra-run.json`, let the profile trace overwrite iteration 1's trace and suppressed the result log line [#2508](https://github.com/sitespeedio/browsertime/pull/2508).
+* Navigation-script failures now include the URL and iteration number in the error message [#2489](https://github.com/sitespeedio/browsertime/pull/2489).
 
 ## 27.4.1 - 2026-05-25
 

package/bin/browsertime.js

@@ -85,6 +85,15 @@ async function run(urls, options) {
       }
     }
 
+    // To the CLI, enableProfileRun means "make one extra profile run",
+    // but inside the engine it means "this run IS the profile run"
+    // (extra-run trace naming, suppressed result log line). Keep it
+    // away from the measured runs and hand it back to the extra
+    // engine below, so measured traces keep their trace-N.json names
+    // and the profile trace cannot overwrite the first iteration's.
+    const makeProfileRun = options.enableProfileRun;
+    options.enableProfileRun = false;
+
     let engine = new Engine(options);
 
     const scriptCategories = await allScriptCategories();
@@ -159,10 +168,11 @@ async function run(urls, options) {
       }
     }
 
-    if (options.enableProfileRun || options.enableVideoRun) {
+    if (makeProfileRun || options.enableVideoRun) {
       log.info('Make one extra run to collect trace/video information');
       options.iterations = 1;
-      if (options.enableProfileRun) {
+      if (makeProfileRun) {
+        options.enableProfileRun = true;
         if (options.browser === 'firefox') {
           options.firefox.geckoProfiler = true;
           options.firefox.collectMozLog = true;
@@ -170,8 +180,12 @@ async function run(urls, options) {
           options.chrome.timeline = true;
           options.cpu = true;
           options.chrome.enableTraceScreenshots = true;
+          // v8.cpu_profiler feeds cpu.functionCosts; blink.debug
+          // emits SelectorStats for cpu.selectorStats. Both add
+          // overhead, which is fine here — this run is not measured.
           options.chrome.traceCategory = [
-            'disabled-by-default-v8.cpu_profiler'
+            'disabled-by-default-v8.cpu_profiler',
+            'disabled-by-default-blink.debug'
           ];
           options.chrome.coverage = true;
         }
@@ -202,14 +216,24 @@ async function run(urls, options) {
       // the main iterations didn't collect any (--enableProfileRun
       // without --chrome.coverage). Otherwise the main run's
       // per-iteration samples are what the user asked for.
+      // The profile run is a single side iteration, so its sample is
+      // published as one object marked with source instead of a
+      // one-element array pretending to be keyed by iteration.
       let mergedCoverage = false;
       for (const [i, pr] of profileResult.entries()) {
         const main = result[i];
         if (!main || !pr.coverage) continue;
+        if (pr.coverage.js.length === 0 && pr.coverage.css.length === 0) {
+          continue;
+        }
         if (main.coverage.js.length > 0 || main.coverage.css.length > 0) {
           continue;
         }
-        main.coverage = pr.coverage;
+        main.coverage = {
+          source: 'profileRun',
+          js: pr.coverage.js[0],
+          css: pr.coverage.css[0]
+        };
         mergedCoverage = true;
       }
       if (mergedCoverage) {

package/browserscripts/pageinfo/loaf.js

@@ -17,6 +17,11 @@
     // re-package
     for (let entry of longestBlockingLoAFs) {
       const info = {};
+      // startTime places the frame on the page timeline (before or
+      // after FCP/LCP/load); firstUIEventTimestamp > 0 means an input
+      // was waiting while this frame blocked — the INP connection.
+      info.startTime = entry.startTime;
+      info.firstUIEventTimestamp = entry.firstUIEventTimestamp;
       info.blockingDuration = entry.blockingDuration;
       info.duration = entry.duration;
       info.styleAndLayoutStart = entry.styleAndLayoutStart;
@@ -29,6 +34,16 @@
       info.scripts = [];
       for (let script of entry.scripts) {
         const s = {};
+        // startTime + duration make per-script attribution possible:
+        // without them a frame's blocking can only be credited to
+        // every script that ran in it.
+        s.startTime = script.startTime;
+        s.duration = script.duration;
+        // executionStart - startTime is queue/compile delay before the
+        // script ran; pauseDuration separates "computed the whole time"
+        // from "sat in a sync pause" (alert, sync XHR).
+        s.executionStart = script.executionStart;
+        s.pauseDuration = script.pauseDuration;
         s.forcedStyleAndLayoutDuration = script.forcedStyleAndLayoutDuration;
         s.invoker = script.invoker;
         s.invokerType = script.invokerType;

package/browserscripts/pageinfo/loafSummary.js

@@ -0,0 +1,24 @@
+(function () {
+  // The loaf script ships only the 10 frames with the most blocking
+  // time, so its numbers understate busy pages. These totals are
+  // computed over every long animation frame before the cut.
+  if (
+    PerformanceObserver.supportedEntryTypes.includes('long-animation-frame')
+  ) {
+    const observer = new PerformanceObserver(list => {});
+    observer.observe({type: 'long-animation-frame', buffered: true});
+    const entries = observer.takeRecords();
+
+    let totalBlockingDuration = 0;
+    let totalDuration = 0;
+    for (let entry of entries) {
+      totalBlockingDuration += entry.blockingDuration;
+      totalDuration += entry.duration;
+    }
+    return {
+      totalFrames: entries.length,
+      totalBlockingDuration,
+      totalDuration
+    };
+  }
+})();

package/lib/chrome/coverage.js

@@ -1,5 +1,13 @@
 import { getLogger } from '@sitespeed.io/log';
 
+import {
+  isResourceLoaderBundle,
+  labelForStyleAttributes,
+  labelForUrl,
+  resourceLoaderModuleCoverage,
+  resourceLoaderLocationResolver
+} from './mediawikiResourceLoader.js';
+
 const log = getLogger('browsertime.chrome.coverage');
 
 // Sum the union length of half-open [start, end) ranges. Used for the
@@ -25,8 +33,8 @@ function unionLength(ranges) {
   return total;
 }
 
-// Count used bytes for a script under detailed (block-level) V8
-// coverage. The CDP returns nested ranges: the outermost range is the
+// Paint a per-byte used/unused flag array for a script under detailed
+// (block-level) V8 coverage. The CDP returns nested ranges: the outermost range is the
 // function body and inner ranges are sub-blocks. An inner range with
 // count == 0 inside a containing range with count > 0 represents dead
 // code in an otherwise-executed function — those bytes must read as
@@ -38,25 +46,29 @@ function unionLength(ranges) {
 // length descending), painting a per-byte coverage flag; inner ranges
 // overwrite outer ones, so the final flag at each byte reflects the
 // innermost range's count.
-export function usedJsBytes(scriptCoverage, totalBytes) {
+export function paintJsCoverage(scriptCoverage, totalBytes) {
+  const used = new Uint8Array(totalBytes);
   const ranges = [];
   for (const fn of scriptCoverage.functions) {
     for (const r of fn.ranges) {
       if (r.endOffset > r.startOffset) ranges.push(r);
     }
   }
-  if (ranges.length === 0) return 0;
   ranges.sort((a, b) =>
     a.startOffset === b.startOffset
       ? b.endOffset - a.endOffset
       : a.startOffset - b.startOffset
   );
-  const used = new Uint8Array(totalBytes);
   for (const r of ranges) {
     const start = Math.max(0, r.startOffset);
     const end = Math.min(totalBytes, r.endOffset);
     if (end > start) used.fill(r.count > 0 ? 1 : 0, start, end);
   }
+  return used;
+}
+
+export function usedJsBytes(scriptCoverage, totalBytes) {
+  const used = paintJsCoverage(scriptCoverage, totalBytes);
   let count = 0;
   for (let i = 0; i < totalBytes; i++) {
     if (used[i] === 1) count++;
@@ -84,20 +96,21 @@ export class Coverage {
   constructor(cdp) {
     this.rawClient = cdp.getRawClient();
     this.started = false;
-    this.styleSheetUrls = new Map();
+    this.styleSheets = new Map();
     this.disposeStyleSheetListener = undefined;
   }
 
   async start() {
     const client = this.rawClient;
-    this.styleSheetUrls.clear();
+    this.styleSheets.clear();
     this.disposeStyleSheetListener = client.CSS.styleSheetAdded(
       ({ header }) => {
         if (header && header.styleSheetId) {
-          this.styleSheetUrls.set(
-            header.styleSheetId,
-            header.sourceURL || header.sourceMapURL || ''
-          );
+          this.styleSheets.set(header.styleSheetId, {
+            url: header.sourceURL || header.sourceMapURL || '',
+            ownerNode: header.ownerNode,
+            isInline: header.isInline
+          });
         }
       }
     );
@@ -121,9 +134,16 @@ export class Coverage {
 
     let js;
     let css;
+    // Bundle URL → source-location resolver for concatenated bundles
+    // (MediaWiki ResourceLoader). Not part of the coverage result —
+    // the caller hands it to the CPU trace parser so trace stack
+    // frames can be attributed to individual modules.
+    let resourceLoaderBundles;
     try {
       const jsResult = await client.Profiler.takePreciseCoverage();
-      js = await this.#processJs(jsResult.result || []);
+      ({ js, resourceLoaderBundles } = await this.#processJs(
+        jsResult.result || []
+      ));
     } catch (error) {
       log.warn('Could not collect JS coverage: %s', error.message);
       js = {
@@ -161,12 +181,13 @@ export class Coverage {
     }
 
     this.started = false;
-    return { js, css };
+    return { js, css, resourceLoaderBundles };
   }
 
   async #processJs(scripts) {
     const client = this.rawClient;
     const files = [];
+    const resourceLoaderBundles = new Map();
     for (const script of scripts) {
       if (!script.url || !/^https?:/i.test(script.url)) {
         continue;
@@ -185,15 +206,29 @@ export class Coverage {
 
       const usedBytes = usedJsBytes(script, totalBytes);
       const unusedBytes = totalBytes - usedBytes;
-      files.push({
+      const file = {
         url: script.url,
         totalBytes,
         usedBytes,
         unusedBytes,
         unusedPercent: (unusedBytes / totalBytes) * 100
-      });
+      };
+      const label = labelForUrl(script.url);
+      if (label) file.label = label;
+      if (isResourceLoaderBundle(script.url, source)) {
+        const modules = resourceLoaderModuleCoverage(
+          source,
+          paintJsCoverage(script, totalBytes)
+        );
+        if (modules) {
+          file.modules = modules;
+          const resolver = resourceLoaderLocationResolver(source);
+          if (resolver) resourceLoaderBundles.set(script.url, resolver);
+        }
+      }
+      files.push(file);
     }
-    return { ...summarize(files), files };
+    return { js: { ...summarize(files), files }, resourceLoaderBundles };
   }
 
   async #processCss(ruleUsage) {
@@ -204,6 +239,11 @@ export class Coverage {
       list.push(u);
       byStylesheet.set(u.styleSheetId, list);
     }
+    // Inline stylesheets are only worth attributing on MediaWiki pages
+    // (TemplateStyles); ordinary pages skip the extra DOM roundtrips.
+    const mediaWiki = [...this.styleSheets.values()].some(sheet =>
+      labelForUrl(sheet.url)
+    );
     const files = [];
     for (const [styleSheetId, usages] of byStylesheet) {
       let text;
@@ -218,15 +258,45 @@ export class Coverage {
 
       const usedBytes = unionLength(usages.filter(u => u.used));
       const unusedBytes = totalBytes - usedBytes;
-      files.push({
-        url: this.styleSheetUrls.get(styleSheetId) || '',
+      const sheet = this.styleSheets.get(styleSheetId) || {};
+      const url = sheet.url || '';
+      const file = {
+        url,
         styleSheetId,
         totalBytes,
         usedBytes,
         unusedBytes,
         unusedPercent: (unusedBytes / totalBytes) * 100
-      });
+      };
+      let label = labelForUrl(url);
+      if (!label && mediaWiki) {
+        label = await this.#inlineStyleLabel(sheet);
+      }
+      if (label) file.label = label;
+      files.push(file);
     }
     return { ...summarize(files), files };
   }
+
+  // Inline stylesheets have no URL of their own: parser-inserted
+  // <style> sheets report the document URL as sourceURL (isInline is
+  // true) and JS-injected <style> sheets report an empty string. The
+  // owning <style> element's attributes are the only identity they
+  // carry — MediaWiki TemplateStyles stamps data-mw-deduplicate there —
+  // so resolve them via the DOM domain. header.ownerNode is a backend
+  // node id, which DOM.describeNode accepts directly.
+  async #inlineStyleLabel({ ownerNode, isInline, url }) {
+    if (ownerNode === undefined || (!isInline && url)) return;
+    try {
+      const { node } = await this.rawClient.DOM.describeNode({
+        backendNodeId: ownerNode
+      });
+      return labelForStyleAttributes(node && node.attributes);
+    } catch (error) {
+      log.debug(
+        'Could not resolve inline stylesheet owner node: %s',
+        error.message
+      );
+    }
+  }
 }

package/lib/chrome/mediawikiResourceLoader.js

@@ -0,0 +1,225 @@
+// MediaWiki-specific: per-module coverage breakdown for ResourceLoader
+// bundles. MediaWiki serves many JS modules concatenated into a single
+// load.php response. Each module in the bundle is delimited by an
+// mw.loader.impl(...) call whose payload starts with "<name>@<versionHash>".
+// Observed format (en.wikipedia.org, MediaWiki 1.4x, July 2026), one call
+// per line:
+//
+//   mw.loader.impl(function(){return["ext.popups.main@4i3g7",function(...
+//   mw.loader.impl(function(){return["mediawiki.base@h9kwf",{"main":...
+//
+// The delimiter is anchored to the start of a line (ResourceLoader emits
+// each impl call on its own line), which keeps mw.loader.impl occurrences
+// inside string literals from creating phantom modules unless the literal
+// happens to reproduce the full delimiter at a line start — an accepted
+// limitation. Trailing bundle content after the last module (for example
+// mw.loader.state(...)) is attributed to the last module.
+const MODULE_DELIMITER =
+  /^mw\.loader\.impl\(function\(\)\{return\["([\w.-]+)@([^"]*)",/gm;
+
+export function isResourceLoaderBundle(url, source) {
+  return url.includes('load.php') || source.startsWith('mw.loader.impl(');
+}
+
+// MediaWiki-specific: stable, short labels for ResourceLoader load.php
+// URLs. The raw URLs are >1000 chars and carry a version= parameter
+// that changes on every deploy, so any dashboard keying a time series
+// on the URL gets a brand-new key every week. The label is derived
+// only from the request's role — the version, lang and skin parameters
+// are never read — so the same bundle keeps the same label across
+// deploys.
+//
+// Labeling rules (a URL qualifies when its path ends in /load.php):
+//   modules=startup                  -> load.php[startup]
+//   single module, only=styles       -> load.php[styles:<module>]
+//                                       (e.g. load.php[styles:site.styles])
+//   single module, otherwise         -> load.php[scripts:<module>]
+//   multi-module, only=styles        -> load.php[styles]
+//                                       (the top-queue stylesheet batch)
+//   multi-module, only=scripts       -> load.php[scripts:<first>]
+//                                       where <first> is the first name in
+//                                       the sorted expanded modules list
+//                                       (e.g. the base bundle
+//                                       jquery|mediawiki.base becomes
+//                                       load.php[scripts:jquery]); raw
+//                                       script batches are disambiguated
+//                                       this way so they never collide
+//                                       with the general bundle below
+//   multi-module, no only param      -> load.php[scripts]
+//                                       (the big general batch of packaged
+//                                       mw.loader.impl modules)
+//
+// Several combined (no `only`) batches on one page — the main queue
+// plus lazy-loaded batches — intentionally share load.php[scripts]:
+// they are the same kind of payload and label-keyed dashboards want
+// them summed. Exact identity always remains in the untouched url
+// field; the label is additive.
+const RESOURCE_LOADER_PATH = /\/load\.php$/;
+
+// Port of MediaWiki's ResourceLoader::expandModuleNames: groups are
+// pipe-separated; within a group, "foo.bar,baz" expands to foo.bar and
+// foo.baz (the packer only groups modules sharing the prefix before
+// their last dot, so suffixes never contain dots).
+function expandModuleNames(packed) {
+  const names = [];
+  for (const group of packed.split('|')) {
+    if (!group.includes(',')) {
+      if (group) names.push(group);
+      continue;
+    }
+    const pos = group.lastIndexOf('.');
+    if (pos === -1) {
+      names.push(...group.split(','));
+      continue;
+    }
+    const prefix = group.slice(0, pos);
+    for (const suffix of group.slice(pos + 1).split(',')) {
+      names.push(`${prefix}.${suffix}`);
+    }
+  }
+  return names.toSorted();
+}
+
+export function labelForUrl(url) {
+  if (typeof url !== 'string' || !url.includes('load.php')) return;
+  let parsed;
+  try {
+    parsed = new URL(url);
+  } catch {
+    return;
+  }
+  if (!RESOURCE_LOADER_PATH.test(parsed.pathname)) return;
+
+  const only = parsed.searchParams.get('only');
+  const modules = expandModuleNames(parsed.searchParams.get('modules') || '');
+  if (modules.length === 1 && modules[0] === 'startup') {
+    return 'load.php[startup]';
+  }
+  const kind = only === 'styles' ? 'styles' : 'scripts';
+  // Every multi-module batch carries its (alphabetically) first module
+  // name. Real pages lazy-load several general batches (no `only=`)
+  // over time, so a bare load.php[scripts] label collides as soon as
+  // there is more than one — and the single-module case already names
+  // general batches like raw ones.
+  if (modules.length > 0) {
+    return `load.php[${kind}:${modules[0]}]`;
+  }
+  return `load.php[${kind}]`;
+}
+
+// MediaWiki-specific: TemplateStyles. Each templated style block is
+// emitted as <style data-mw-deduplicate="TemplateStyles:rNNNNNNN">, so
+// the deduplication key is the only stable, human-actionable identity
+// an inline stylesheet has — it points straight at the template
+// revision that ships the CSS. Keys may carry a /suffix when the same
+// revision is re-emitted under a different wrapper class (observed on
+// en.wikipedia.org: "TemplateStyles:r1349637415/mw-parser-output/.tmulti");
+// the full value is kept as the label. `attributes` is the flat
+// [name, value, name, value, ...] array that CDP DOM.describeNode
+// returns for the owning <style> element.
+const TEMPLATE_STYLES_KEY = /^TemplateStyles:r\d+(\/|$)/;
+
+export function labelForStyleAttributes(attributes) {
+  if (!Array.isArray(attributes)) return;
+  for (let index = 0; index + 1 < attributes.length; index += 2) {
+    if (
+      attributes[index] === 'data-mw-deduplicate' &&
+      TEMPLATE_STYLES_KEY.test(attributes[index + 1])
+    ) {
+      return attributes[index + 1];
+    }
+  }
+}
+
+function moduleBoundaries(source) {
+  const boundaries = [];
+  for (const match of source.matchAll(MODULE_DELIMITER)) {
+    boundaries.push({
+      name: match[1],
+      version: match[2],
+      start: match.index
+    });
+  }
+  return boundaries;
+}
+
+// Map a source position from a Chrome trace stack frame to the module
+// that owns that byte of the bundle, for per-module CPU attribution.
+// Trace event locations (FunctionCall args.data and stackTrace frames)
+// are 1-based for both lineNumber and columnNumber — Blink adds 1 to
+// V8's 0-based script positions when it emits devtools.timeline
+// events. resolve() returns { name, version } when the position lands
+// inside a named module, and undefined for the preamble or positions
+// outside the source, so callers can bucket unattributable time
+// separately. Returns undefined when the source contains no module
+// delimiters (e.g. the startup bundle, which is plain JS).
+export function resourceLoaderLocationResolver(source) {
+  const boundaries = moduleBoundaries(source);
+  if (boundaries.length === 0) return;
+
+  const sourceLength = source.length;
+  const lineOffsets = [0];
+  for (
+    let index = source.indexOf('\n');
+    index !== -1;
+    index = source.indexOf('\n', index + 1)
+  ) {
+    lineOffsets.push(index + 1);
+  }
+
+  return {
+    resolve(lineNumber, columnNumber) {
+      const line = lineNumber - 1;
+      if (line < 0 || line >= lineOffsets.length) return;
+      const offset = lineOffsets[line] + (columnNumber - 1);
+      if (offset < boundaries[0].start || offset >= sourceLength) return;
+      let low = 0;
+      let high = boundaries.length - 1;
+      while (low < high) {
+        const mid = (low + high + 1) >> 1;
+        if (boundaries[mid].start <= offset) {
+          low = mid;
+        } else {
+          high = mid - 1;
+        }
+      }
+      const { name, version } = boundaries[low];
+      return { name, version };
+    }
+  };
+}
+
+// Intersect the per-byte coverage flags (painted, a Uint8Array where 1 =
+// used) with the module boundaries in the bundle source. Module i spans
+// [start_i, start_i+1); the last module ends at the end of the source.
+// Bytes before the first delimiter go to a '(preamble)' bucket. Returns
+// undefined when the source contains no delimiters.
+export function resourceLoaderModuleCoverage(source, painted) {
+  const boundaries = moduleBoundaries(source);
+  if (boundaries.length === 0) return;
+
+  if (boundaries[0].start > 0) {
+    boundaries.unshift({ name: '(preamble)', version: '', start: 0 });
+  }
+
+  const modules = [];
+  for (const [i, boundary] of boundaries.entries()) {
+    const end =
+      i + 1 < boundaries.length ? boundaries[i + 1].start : source.length;
+    const totalBytes = end - boundary.start;
+    let usedBytes = 0;
+    for (let b = boundary.start; b < end; b++) {
+      if (painted[b] === 1) usedBytes++;
+    }
+    const unusedBytes = totalBytes - usedBytes;
+    modules.push({
+      name: boundary.name,
+      version: boundary.version,
+      totalBytes,
+      usedBytes,
+      unusedBytes,
+      unusedPercent: totalBytes > 0 ? (unusedBytes / totalBytes) * 100 : 0
+    });
+  }
+  return modules.toSorted((a, b) => b.unusedBytes - a.unusedBytes);
+}