browser-debugger-cli 0.13.0 → 0.14.0

package/dist/ipc/protocol/commands.d.ts

@@ -74,6 +74,10 @@ export interface SessionPeekData {
     totalConsole: number;
     /** Console messages dropped at the limit (the oldest; indices start after them) */
     droppedConsole?: number;
+    /** Finished network requests dropped at the request cap (the oldest) */
+    droppedNetwork?: number;
+    /** Response bodies evicted at the total body budget (the oldest) */
+    evictedNetworkBodies?: number;
     /** Whether there are more network items available. */
     hasMoreNetwork?: boolean;
     /** Whether there are more console items available. */

package/dist/ipc/protocol/inspectTypes.d.ts

@@ -447,7 +447,10 @@ export interface InspectResult {
     rules?: InspectRule[];
     /** `--why <property>`: one entry, or one per longhand of a shorthand whose sides differ */
     why?: InspectWhy[];
-    /** The cascade was not read: Chrome took longer than the time allowed, or failed */
-    cascade?: 'timeout' | 'failed';
+    /**
+     * The cascade was not read: Chrome took longer than the time allowed, failed,
+     * or (hints only) was not asked because it was too slow earlier on this page
+     */
+    cascade?: 'timeout' | 'failed' | 'skipped';
 }
 //# sourceMappingURL=inspectTypes.d.ts.map

package/dist/ipc/session/types.d.ts

@@ -8,8 +8,12 @@ import type { ColorScheme, ViewportSize } from '../../types.js';
  * Session activity metrics.
  */
 export interface SessionActivity {
-    /** Total network requests captured. */
+    /** Network requests kept (finished ones; the newest at the cap). */
     networkRequestsCaptured: number;
+    /** Oldest finished requests dropped at the request cap (left out when none). */
+    networkRequestsDropped?: number;
+    /** Oldest response bodies evicted at the total body budget (left out when none). */
+    networkBodiesEvicted?: number;
     /** Total console messages captured. */
     consoleMessagesCaptured: number;
     /** Timestamp of last network request. */

package/dist/program.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The bdg command tree: root command, its options and every registered command.
+ */
+import { Command, type OutputConfiguration } from 'commander';
+/**
+ * Build the bdg program with every command registered, without parsing
+ * anything. Commander errors throw instead of exiting; the output
+ * configuration is set before commands are registered so they inherit it.
+ *
+ * @param output - Where Commander writes help and errors
+ * @returns Root command
+ */
+export declare function buildProgram(output?: OutputConfiguration): Command;
+//# sourceMappingURL=program.d.ts.map

package/dist/program.js

@@ -0,0 +1,53 @@
+/**
+ * The bdg command tree: root command, its options and every registered command.
+ */
+import { Command, Option } from 'commander';
+import { commandRegistry } from './commands.js';
+import { VERSION } from './utils/version.js';
+const CLI_NAME = 'bdg';
+const CLI_DESCRIPTION = 'Browser telemetry via Chrome DevTools Protocol';
+const SESSION_OPTION_FLAGS = '--session <name>';
+const SESSION_OPTION_DESCRIPTION = 'Use a named session (own daemon, Chrome and port) instead of the default one; env: BDG_SESSION';
+/**
+ * Make `--debug`, `-q` and `--session` accepted after any subcommand (program
+ * options are positional).
+ *
+ * @param command - Command whose subcommands get the hidden global options
+ */
+function addGlobalOptions(command) {
+    for (const sub of command.commands) {
+        if (!sub.options.some((option) => option.long === '--debug')) {
+            sub.addOption(new Option('--debug', 'Enable debug logging').hideHelp());
+        }
+        if (!sub.options.some((option) => option.long === '--quiet')) {
+            sub.addOption(new Option('-q, --quiet', 'Hide tips and hints').hideHelp());
+        }
+        if (!sub.options.some((option) => option.long === '--session')) {
+            sub.addOption(new Option(SESSION_OPTION_FLAGS, SESSION_OPTION_DESCRIPTION).hideHelp());
+        }
+        addGlobalOptions(sub);
+    }
+}
+/**
+ * Build the bdg program with every command registered, without parsing
+ * anything. Commander errors throw instead of exiting; the output
+ * configuration is set before commands are registered so they inherit it.
+ *
+ * @param output - Where Commander writes help and errors
+ * @returns Root command
+ */
+export function buildProgram(output = {}) {
+    const program = new Command()
+        .name(CLI_NAME)
+        .description(CLI_DESCRIPTION)
+        .version(VERSION)
+        .option('--debug', 'Enable debug logging (verbose output)')
+        .option(SESSION_OPTION_FLAGS, SESSION_OPTION_DESCRIPTION)
+        .enablePositionalOptions()
+        .exitOverride()
+        .configureOutput(output);
+    commandRegistry.forEach((register) => register(program));
+    addGlobalOptions(program);
+    return program;
+}
+//# sourceMappingURL=program.js.map

package/dist/runtime/dom/elementGeometry.d.ts

@@ -119,6 +119,29 @@ export declare const FRAME_OFFSET_JS = "(frame) => {\n  const rect = frame.getBo
  * its bounding box is the box itself, scaled.
  */
 export declare const SCALES_ONLY_JS = "(style) => {\n  if (style.rotate && style.rotate !== 'none') return false;\n  if (!style.transform || style.transform === 'none') return true;\n  const matrix = /^matrix\\(([^)]*)\\)$/.exec(style.transform);\n  if (!matrix) return false;\n  const values = matrix[1].split(',').map(parseFloat);\n  return Math.abs(values[1]) < 1e-6 && Math.abs(values[2]) < 1e-6;\n}";
+/**
+ * Page-side clip of a node by its ancestors in the flat tree (through the
+ * slots it is shown in and open shadow roots): the padding boxes
+ * ({@link CLIP_BOX_JS}) of those that cut off overflowing content and hold
+ * the node in their containing-block chain. An absolutely positioned node
+ * skips static ancestors (that are not transformed) up to its containing
+ * block, a fixed one is not clipped at all unless a transformed (or
+ * filtered, contained, …) ancestor holds it like an absolute one, and
+ * inline ancestors and `display: contents` ones have no box to clip with.
+ * The root element is left out (its overflow belongs to the viewport), and
+ * so is the body's overflow unless the root element's overflow is not
+ * `visible` (then the body keeps its own overflow and, e.g. as the page's
+ * scroller, clips like any container).
+ * Returns the clip, whether overlay scrollbars of the containers show along
+ * its right and bottom edges ({@link OVERLAY_SCROLLBARS_JS}), the innermost
+ * ancestor cutting off part of `rect` (null when none does), why the
+ * innermost clipping ancestor with no area (a collapsed
+ * `height: 0; overflow: hidden` accordion) hides it, e.g.
+ * `clipped by div#acc: zero height` (null when none has), and whether the
+ * node is fixed to the viewport (it or a container in its containing-block
+ * chain is `position: fixed`; `fixedBy` is that node).
+ */
+export declare const ANCESTOR_CLIP_JS: string;
 /** Page-side test of a `clip-path` that cuts everything away: `inset()` with percentages leaving no area. */
 export declare const CLIP_PATH_CUTS_ALL_JS = "(clipPath) => {\n  const inset = /^inset\\(([^)]*)\\)/.exec(clipPath || '');\n  const values = inset ? inset[1].split(' round ')[0].trim().split(/\\s+/) : [];\n  if (values.length === 0 || values.some((v) => !/%$/.test(v))) return false;\n  const [top, right = top, bottom = top, left = right] = values.map(parseFloat);\n  return top + bottom >= 100 || left + right >= 100;\n}";
 /**

package/dist/runtime/dom/elementGeometry.js

@@ -152,28 +152,30 @@ const HOLDS_FIXED_JS = `(style) =>
   /transform|filter|perspective/.test(style.willChange) || /paint|layout|strict|content/.test(style.contain)`;
 /**
  * Page-side test of whether a `position: fixed` node is fixed to its
- * document's viewport (no ancestor holds it, {@link HOLDS_FIXED_JS}).
+ * document's viewport (no ancestor in the flat tree holds it,
+ * {@link HOLDS_FIXED_JS}).
  */
 const FIXED_TO_VIEWPORT_JS = `(n) => {
   const holdsFixed = ${HOLDS_FIXED_JS};
-  const parentOf = (node) => node.parentElement || (node.parentNode && node.parentNode.host) || null;
+  const parentOf = ${FLAT_PARENT_JS};
   for (let p = parentOf(n); p && p !== n.ownerDocument.documentElement; p = parentOf(p)) {
     if (holdsFixed(p.ownerDocument.defaultView.getComputedStyle(p))) return false;
   }
   return true;
 }`;
 /**
- * Page-side clip of a node by its ancestors (looked up through open shadow
- * roots): the padding boxes ({@link CLIP_BOX_JS}) of those that cut off
- * overflowing content and hold the node in their containing-block chain. An
- * absolutely positioned node skips static ancestors (that are not
- * transformed) up to its containing block, a fixed one is not clipped at all
- * unless a transformed (or filtered, contained, …) ancestor holds it like an
- * absolute one, and inline ancestors and `display: contents` ones have no box
- * to clip with. The root element is left out (its overflow belongs to the
- * viewport), and so is the body's overflow unless the root element's
- * overflow is not `visible` (then the body keeps its own overflow and, e.g.
- * as the page's scroller, clips like any container).
+ * Page-side clip of a node by its ancestors in the flat tree (through the
+ * slots it is shown in and open shadow roots): the padding boxes
+ * ({@link CLIP_BOX_JS}) of those that cut off overflowing content and hold
+ * the node in their containing-block chain. An absolutely positioned node
+ * skips static ancestors (that are not transformed) up to its containing
+ * block, a fixed one is not clipped at all unless a transformed (or
+ * filtered, contained, …) ancestor holds it like an absolute one, and
+ * inline ancestors and `display: contents` ones have no box to clip with.
+ * The root element is left out (its overflow belongs to the viewport), and
+ * so is the body's overflow unless the root element's overflow is not
+ * `visible` (then the body keeps its own overflow and, e.g. as the page's
+ * scroller, clips like any container).
  * Returns the clip, whether overlay scrollbars of the containers show along
  * its right and bottom edges ({@link OVERLAY_SCROLLBARS_JS}), the innermost
  * ancestor cutting off part of `rect` (null when none does), why the
@@ -183,14 +185,14 @@ const FIXED_TO_VIEWPORT_JS = `(n) => {
  * node is fixed to the viewport (it or a container in its containing-block
  * chain is `position: fixed`; `fixedBy` is that node).
  */
-const ANCESTOR_CLIP_JS = `(node, rect, describe) => {
+export const ANCESTOR_CLIP_JS = `(node, rect, describe) => {
   const clipBox = ${CLIP_BOX_JS};
   const overlayScrollbars = ${OVERLAY_SCROLLBARS_JS};
   const holdsFixed = ${HOLDS_FIXED_JS};
   const fixedToViewport = ${FIXED_TO_VIEWPORT_JS};
   const reasons = ${JSON.stringify(LAYOUT_REASONS)};
   const styleOf = (n) => n.ownerDocument.defaultView.getComputedStyle(n);
-  const parentOf = (n) => n.parentElement || (n.parentNode && n.parentNode.host) || null;
+  const parentOf = ${FLAT_PARENT_JS};
   const doc = node.ownerDocument;
   const rootStyle = styleOf(doc.documentElement);
   const bodyClips = rootStyle.overflowX !== 'visible' || rootStyle.overflowY !== 'visible';

package/dist/runtime/dom/elementInfo.d.ts

@@ -44,12 +44,14 @@ export declare const COMPOSED_JS = "(node) => {\n  const composes = (n) => Boole
  * `visibility: hidden` are left out, elements that are not inline are set
  * apart by line breaks, as is a `<br>`. Fields and editable regions inside
  * it (inputs, textareas, selects, a contenteditable editor) are skipped, so
- * what a user typed is never read; raw text keeps `innerText`'s collapsed
- * whitespace. The text is cut at `limit` characters, and a
+ * what a user typed is never read, unless `fields` is set: then selects
+ * (all their options) and editable regions are read as `innerText` reads
+ * them (inputs and textareas it leaves out too). Raw text keeps
+ * `innerText`'s collapsed whitespace. The text is cut at `limit` characters, and a
  * part whose text alone passes the limit is read from its text nodes
  * (`textContent`) instead of `innerText`, which would lay out all of it.
  */
-export declare const FLAT_TEXT_JS = "(el, limit) => {\n  const composed = (node) => {\n  const composes = (n) => Boolean(n.shadowRoot) || n.localName === 'slot';\n  if (composes(node)) return true;\n  const walker = node.ownerDocument.createTreeWalker(node, NodeFilter.SHOW_ELEMENT);\n  while (walker.nextNode()) if (composes(walker.currentNode)) return true;\n  return false;\n};\n  const view = el.ownerDocument.defaultView;\n  let text = '';\n  const nodesOf = (node) =>\n    node.localName === 'slot' ? node.assignedNodes({ flatten: true }) : Array.from((node.shadowRoot || node).childNodes);\n  const read = (node, visible) => {\n    if (text.length >= limit) return;\n    if (node.nodeType === 3 && visible) text += node.data.replace(/\\s+/g, ' ');\n    if (node.nodeType !== 1) return;\n    if (/^(input|textarea|select)$/.test(node.localName) || node.isContentEditable) return;\n    const style = view.getComputedStyle(node);\n    if (node.checkVisibility && !node.checkVisibility() && style.display !== 'contents') return;\n    if (node.localName === 'br') text += '\\n';\n    const apart = style.display.startsWith('inline') || style.display === 'contents' ? '' : '\\n';\n    text += apart;\n    const own = node.textContent || '';\n    if (composed(node)) nodesOf(node).forEach((child) => read(child, style.visibility === 'visible'));\n    else if (own.length > limit - text.length) text += own.slice(0, limit - text.length);\n    else text += typeof node.innerText === 'string' ? node.innerText : own;\n    text += apart;\n  };\n  const visible = view.getComputedStyle(el).visibility === 'visible';\n  nodesOf(el).forEach((child) => read(child, visible));\n  return text.slice(0, limit);\n}";
+export declare const FLAT_TEXT_JS = "(el, limit, fields) => {\n  const composed = (node) => {\n  const composes = (n) => Boolean(n.shadowRoot) || n.localName === 'slot';\n  if (composes(node)) return true;\n  const walker = node.ownerDocument.createTreeWalker(node, NodeFilter.SHOW_ELEMENT);\n  while (walker.nextNode()) if (composes(walker.currentNode)) return true;\n  return false;\n};\n  const view = el.ownerDocument.defaultView;\n  let text = '';\n  const nodesOf = (node) =>\n    node.localName === 'slot' ? node.assignedNodes({ flatten: true }) : Array.from((node.shadowRoot || node).childNodes);\n  const read = (node, visible) => {\n    if (text.length >= limit) return;\n    if (node.nodeType === 3 && visible) text += node.data.replace(/\\s+/g, ' ');\n    if (node.nodeType !== 1) return;\n    if (/^(input|textarea)$/.test(node.localName)) return;\n    if (!fields && (node.localName === 'select' || node.isContentEditable)) return;\n    const style = view.getComputedStyle(node);\n    if (node.checkVisibility && !node.checkVisibility() && style.display !== 'contents') return;\n    if (node.localName === 'br') text += '\\n';\n    const apart = style.display.startsWith('inline') || style.display === 'contents' ? '' : '\\n';\n    text += apart;\n    const own = node.textContent || '';\n    if (composed(node)) nodesOf(node).forEach((child) => read(child, style.visibility === 'visible'));\n    else if (own.length > limit - text.length) text += own.slice(0, limit - text.length);\n    else text += typeof node.innerText === 'string' ? node.innerText : own;\n    text += apart;\n  };\n  const visible = view.getComputedStyle(el).visibility === 'visible';\n  nodesOf(el).forEach((child) => read(child, visible));\n  return text.slice(0, limit);\n}";
 /**
  * Page-side text of an element as a user sees it: `innerText` for a rendered
  * element (CSS-hidden parts left out, inline elements not split apart), none
@@ -65,7 +67,7 @@ export declare const FLAT_TEXT_JS = "(el, limit) => {\n  const composed = (node)
  * a whole page's text, unless `full` is set. Decorations are left out
  * ({@link WITHOUT_DECORATIONS_JS}).
  */
-export declare const ELEMENT_TEXT_JS = "(el, full) => {\n  const withoutDecorations = (el, text) => {\n  if (!text || typeof el.querySelectorAll !== 'function') return text;\n  const glyph = /^\\s*[\u00D7\u2715\u2716\u2717\u2A2F]\\s*$/;\n  const textOf = (node) => (typeof node.innerText === 'string' ? node.innerText : node.textContent || '').trim();\n  const closer = '.close, [aria-label=\"close\" i], [aria-label=\"dismiss\" i]';\n  const rendered = (node) => !node.checkVisibility || node.checkVisibility();\n  const found = Array.from(el.querySelectorAll(closer + ', [aria-hidden=\"true\"]'))\n    .filter((node) => rendered(node) && (node.matches(closer) || !/[\\p{L}\\p{N}]/u.test(textOf(node))));\n  if (/[\u00D7\u2715\u2716\u2717\u2A2F]/.test(text)) {\n    found.push(...Array.from(el.querySelectorAll('button, a, [role=\"button\"]')).filter((node) => glyph.test(node.textContent || '')));\n  }\n  const unique = Array.from(new Set(found));\n  const outermost = unique.filter((node) => !unique.some((other) => other !== node && other.contains(node)));\n  let result = text;\n  for (const node of outermost) {\n    const part = textOf(node);\n    const at = part ? result.lastIndexOf(part) : -1;\n    if (at >= 0) result = result.slice(0, at) + result.slice(at + part.length);\n  }\n  return result;\n};\n  const composed = (node) => {\n  const composes = (n) => Boolean(n.shadowRoot) || n.localName === 'slot';\n  if (composes(node)) return true;\n  const walker = node.ownerDocument.createTreeWalker(node, NodeFilter.SHOW_ELEMENT);\n  while (walker.nextNode()) if (composes(walker.currentNode)) return true;\n  return false;\n};\n  const flatText = (el, limit) => {\n  const composed = (node) => {\n  const composes = (n) => Boolean(n.shadowRoot) || n.localName === 'slot';\n  if (composes(node)) return true;\n  const walker = node.ownerDocument.createTreeWalker(node, NodeFilter.SHOW_ELEMENT);\n  while (walker.nextNode()) if (composes(walker.currentNode)) return true;\n  return false;\n};\n  const view = el.ownerDocument.defaultView;\n  let text = '';\n  const nodesOf = (node) =>\n    node.localName === 'slot' ? node.assignedNodes({ flatten: true }) : Array.from((node.shadowRoot || node).childNodes);\n  const read = (node, visible) => {\n    if (text.length >= limit) return;\n    if (node.nodeType === 3 && visible) text += node.data.replace(/\\s+/g, ' ');\n    if (node.nodeType !== 1) return;\n    if (/^(input|textarea|select)$/.test(node.localName) || node.isContentEditable) return;\n    const style = view.getComputedStyle(node);\n    if (node.checkVisibility && !node.checkVisibility() && style.display !== 'contents') return;\n    if (node.localName === 'br') text += '\\n';\n    const apart = style.display.startsWith('inline') || style.display === 'contents' ? '' : '\\n';\n    text += apart;\n    const own = node.textContent || '';\n    if (composed(node)) nodesOf(node).forEach((child) => read(child, style.visibility === 'visible'));\n    else if (own.length > limit - text.length) text += own.slice(0, limit - text.length);\n    else text += typeof node.innerText === 'string' ? node.innerText : own;\n    text += apart;\n  };\n  const visible = view.getComputedStyle(el).visibility === 'visible';\n  nodesOf(el).forEach((child) => read(child, visible));\n  return text.slice(0, limit);\n};\n  const all = el.textContent || '';\n  if (el.tagName === 'OPTION') return el.label;\n  if (typeof el.innerText !== 'string') return full ? all : all.slice(0, 2000);\n  const rendered = (node) => !node.checkVisibility || node.checkVisibility();\n  const shown = rendered(el);\n  const boxless = !shown && el.ownerDocument.defaultView.getComputedStyle(el).display === 'contents';\n  if (!shown && !boxless) return '';\n  if (composed(el)) return withoutDecorations(el, flatText(el, full ? Infinity : 2000));\n  if (boxless) return withoutDecorations(el, full ? all : all.slice(0, 2000));\n  if (full || all.length <= 2000) return withoutDecorations(el, el.innerText);\n  const walker = el.ownerDocument.createTreeWalker(el, NodeFilter.SHOW_TEXT);\n  let start = '';\n  while (start.length < 1000 && walker.nextNode()) {\n    const parent = walker.currentNode.parentElement;\n    if (!parent || rendered(parent)) start += walker.currentNode.data;\n  }\n  return withoutDecorations(el, start);\n}";
+export declare const ELEMENT_TEXT_JS = "(el, full) => {\n  const withoutDecorations = (el, text) => {\n  if (!text || typeof el.querySelectorAll !== 'function') return text;\n  const glyph = /^\\s*[\u00D7\u2715\u2716\u2717\u2A2F]\\s*$/;\n  const textOf = (node) => (typeof node.innerText === 'string' ? node.innerText : node.textContent || '').trim();\n  const closer = '.close, [aria-label=\"close\" i], [aria-label=\"dismiss\" i]';\n  const rendered = (node) => !node.checkVisibility || node.checkVisibility();\n  const found = Array.from(el.querySelectorAll(closer + ', [aria-hidden=\"true\"]'))\n    .filter((node) => rendered(node) && (node.matches(closer) || !/[\\p{L}\\p{N}]/u.test(textOf(node))));\n  if (/[\u00D7\u2715\u2716\u2717\u2A2F]/.test(text)) {\n    found.push(...Array.from(el.querySelectorAll('button, a, [role=\"button\"]')).filter((node) => glyph.test(node.textContent || '')));\n  }\n  const unique = Array.from(new Set(found));\n  const outermost = unique.filter((node) => !unique.some((other) => other !== node && other.contains(node)));\n  let result = text;\n  for (const node of outermost) {\n    const part = textOf(node);\n    const at = part ? result.lastIndexOf(part) : -1;\n    if (at >= 0) result = result.slice(0, at) + result.slice(at + part.length);\n  }\n  return result;\n};\n  const composed = (node) => {\n  const composes = (n) => Boolean(n.shadowRoot) || n.localName === 'slot';\n  if (composes(node)) return true;\n  const walker = node.ownerDocument.createTreeWalker(node, NodeFilter.SHOW_ELEMENT);\n  while (walker.nextNode()) if (composes(walker.currentNode)) return true;\n  return false;\n};\n  const flatText = (el, limit, fields) => {\n  const composed = (node) => {\n  const composes = (n) => Boolean(n.shadowRoot) || n.localName === 'slot';\n  if (composes(node)) return true;\n  const walker = node.ownerDocument.createTreeWalker(node, NodeFilter.SHOW_ELEMENT);\n  while (walker.nextNode()) if (composes(walker.currentNode)) return true;\n  return false;\n};\n  const view = el.ownerDocument.defaultView;\n  let text = '';\n  const nodesOf = (node) =>\n    node.localName === 'slot' ? node.assignedNodes({ flatten: true }) : Array.from((node.shadowRoot || node).childNodes);\n  const read = (node, visible) => {\n    if (text.length >= limit) return;\n    if (node.nodeType === 3 && visible) text += node.data.replace(/\\s+/g, ' ');\n    if (node.nodeType !== 1) return;\n    if (/^(input|textarea)$/.test(node.localName)) return;\n    if (!fields && (node.localName === 'select' || node.isContentEditable)) return;\n    const style = view.getComputedStyle(node);\n    if (node.checkVisibility && !node.checkVisibility() && style.display !== 'contents') return;\n    if (node.localName === 'br') text += '\\n';\n    const apart = style.display.startsWith('inline') || style.display === 'contents' ? '' : '\\n';\n    text += apart;\n    const own = node.textContent || '';\n    if (composed(node)) nodesOf(node).forEach((child) => read(child, style.visibility === 'visible'));\n    else if (own.length > limit - text.length) text += own.slice(0, limit - text.length);\n    else text += typeof node.innerText === 'string' ? node.innerText : own;\n    text += apart;\n  };\n  const visible = view.getComputedStyle(el).visibility === 'visible';\n  nodesOf(el).forEach((child) => read(child, visible));\n  return text.slice(0, limit);\n};\n  const all = el.textContent || '';\n  if (el.tagName === 'OPTION') return el.label;\n  if (typeof el.innerText !== 'string') return full ? all : all.slice(0, 2000);\n  const rendered = (node) => !node.checkVisibility || node.checkVisibility();\n  const shown = rendered(el);\n  const boxless = !shown && el.ownerDocument.defaultView.getComputedStyle(el).display === 'contents';\n  if (!shown && !boxless) return '';\n  if (composed(el)) return withoutDecorations(el, flatText(el, full ? Infinity : 2000));\n  if (boxless) return withoutDecorations(el, full ? all : all.slice(0, 2000));\n  if (full || all.length <= 2000) return withoutDecorations(el, el.innerText);\n  const walker = el.ownerDocument.createTreeWalker(el, NodeFilter.SHOW_TEXT);\n  let start = '';\n  while (start.length < 1000 && walker.nextNode()) {\n    const parent = walker.currentNode.parentElement;\n    if (!parent || rendered(parent)) start += walker.currentNode.data;\n  }\n  return withoutDecorations(el, start);\n}";
 /** Shown instead of a secret field value (the same for every length) */
 export declare const MASKED_VALUE = "\u2022\u2022\u2022\u2022";
 /**

package/dist/runtime/dom/elementInfo.js

@@ -84,12 +84,14 @@ export const COMPOSED_JS = `(node) => {
  * `visibility: hidden` are left out, elements that are not inline are set
  * apart by line breaks, as is a `<br>`. Fields and editable regions inside
  * it (inputs, textareas, selects, a contenteditable editor) are skipped, so
- * what a user typed is never read; raw text keeps `innerText`'s collapsed
- * whitespace. The text is cut at `limit` characters, and a
+ * what a user typed is never read, unless `fields` is set: then selects
+ * (all their options) and editable regions are read as `innerText` reads
+ * them (inputs and textareas it leaves out too). Raw text keeps
+ * `innerText`'s collapsed whitespace. The text is cut at `limit` characters, and a
  * part whose text alone passes the limit is read from its text nodes
  * (`textContent`) instead of `innerText`, which would lay out all of it.
  */
-export const FLAT_TEXT_JS = `(el, limit) => {
+export const FLAT_TEXT_JS = `(el, limit, fields) => {
   const composed = ${COMPOSED_JS};
   const view = el.ownerDocument.defaultView;
   let text = '';
@@ -99,7 +101,8 @@ export const FLAT_TEXT_JS = `(el, limit) => {
     if (text.length >= limit) return;
     if (node.nodeType === 3 && visible) text += node.data.replace(/\\s+/g, ' ');
     if (node.nodeType !== 1) return;
-    if (/^(input|textarea|select)$/.test(node.localName) || node.isContentEditable) return;
+    if (/^(input|textarea)$/.test(node.localName)) return;
+    if (!fields && (node.localName === 'select' || node.isContentEditable)) return;
     const style = view.getComputedStyle(node);
     if (node.checkVisibility && !node.checkVisibility() && style.display !== 'contents') return;
     if (node.localName === 'br') text += '\\n';

package/dist/runtime/dom/frameScopedConnection.d.ts

@@ -66,6 +66,13 @@ export declare function mapPoint(mapping: FrameMapping, point: LayoutPoint): Lay
  * @returns Box in the top-level viewport
  */
 export declare function mapBox(mapping: FrameMapping, box: LayoutBox): LayoutBox;
+/**
+ * Page-side choice of the box to measure: the element's, or its document's
+ * root element when the element has no size (hidden, collapsed).
+ */
+export declare const REFERENCE_NODE_FUNCTION = "function () {\n  const r = this.getBoundingClientRect();\n  return r.width > 0 && r.height > 0 ? this : this.ownerDocument.documentElement;\n}";
+/** Page-side `getBoundingClientRect()` as a plain box */
+export declare const CLIENT_RECT_FUNCTION = "function () { const r = this.getBoundingClientRect(); return { x: r.left, y: r.top, width: r.width, height: r.height }; }";
 /**
  * How the element's frame maps into the top-level viewport.
  *

package/dist/runtime/dom/frameScopedConnection.js

@@ -150,12 +150,12 @@ export function mapBox(mapping, box) {
  * Page-side choice of the box to measure: the element's, or its document's
  * root element when the element has no size (hidden, collapsed).
  */
-const REFERENCE_NODE_FUNCTION = `function () {
+export const REFERENCE_NODE_FUNCTION = `function () {
   const r = this.getBoundingClientRect();
   return r.width > 0 && r.height > 0 ? this : this.ownerDocument.documentElement;
 }`;
 /** Page-side `getBoundingClientRect()` as a plain box */
-const CLIENT_RECT_FUNCTION = 'function () { const r = this.getBoundingClientRect(); return { x: r.left, y: r.top, width: r.width, height: r.height }; }';
+export const CLIENT_RECT_FUNCTION = 'function () { const r = this.getBoundingClientRect(); return { x: r.left, y: r.top, width: r.width, height: r.height }; }';
 /**
  * Measure a box of the element's frame both in the frame and through CDP.
  *

package/dist/runtime/dom/inspect.d.ts

@@ -8,9 +8,10 @@
  * tree), `dom layout`'s measurement (page position, hidden, covered,
  * offscreen) and, once the nodes are pushed to CDP, `CSS.getComputedStyleForNode`
  * for the element, its layout parent and its `::before`/`::after`,
- * `CSS.getPlatformFontsForNode` for its text and `DOM.getBoxModel`. DOM and
- * CSS are enabled on the first inspect and kept on. Matched rules are not
- * read (no cascade).
+ * `CSS.getPlatformFontsForNode` for its text and `DOM.getBoxModel`. After
+ * those, for the hints, `--rules` and `--why`, the matched rules
+ * (`CSS.getMatchedStylesForNode`, see {@link matchedStyles}). DOM and CSS are
+ * enabled on the first inspect and kept on.
  */
 import type { CDPConnection } from '../../connection/cdp.js';
 import type { DomInspectCommand } from '../../ipc/protocol/commands.js';
@@ -25,6 +26,19 @@ import type { InspectResult } from '../../ipc/protocol/inspectTypes.js';
  *   selector or unknown property, (87) the cached element left the page
  */
 export declare function inspectElement(cdp: CDPConnection, params: DomInspectCommand): Promise<InspectResult>;
+/**
+ * How a request reads the element's matched rules, when hints, `--rules` or
+ * `--why` need them: within {@link HINTS_BUDGET_MS} for the default hints,
+ * not waited for at all on a document marked slow; within
+ * {@link RULES_BUDGET_MS} when asked for explicitly.
+ *
+ * @param params - Request
+ * @returns Budget and whether to skip on a slow document, or undefined when not needed
+ */
+export declare function matchedStylesRead(params: DomInspectCommand): {
+    budgetMs: number;
+    skipWhenSlow: boolean;
+} | undefined;
 /**
  * Enable DOM and CSS once per connection (kept on: CSS.enable replays every
  * stylesheet, which costs up to a few hundred ms on large sites the first time).

package/dist/runtime/dom/inspect.js

@@ -8,9 +8,10 @@
  * tree), `dom layout`'s measurement (page position, hidden, covered,
  * offscreen) and, once the nodes are pushed to CDP, `CSS.getComputedStyleForNode`
  * for the element, its layout parent and its `::before`/`::after`,
- * `CSS.getPlatformFontsForNode` for its text and `DOM.getBoxModel`. DOM and
- * CSS are enabled on the first inspect and kept on. Matched rules are not
- * read (no cascade).
+ * `CSS.getPlatformFontsForNode` for its text and `DOM.getBoxModel`. After
+ * those, for the hints, `--rules` and `--why`, the matched rules
+ * (`CSS.getMatchedStylesForNode`, see {@link matchedStyles}). DOM and CSS are
+ * enabled on the first inspect and kept on.
  */
 import { CommandError } from '../../errors/index.js';
 import { operationFailedError, unknownCssPropertyError, whyAllPropertyError, } from '../../errors/messages.js';
@@ -19,7 +20,7 @@ import { selectedProps } from './inspectAllStyles.js';
 import { buildCascadeFields } from './inspectCascadeModel.js';
 import { explainUnsetVariables } from './inspectHints.js';
 import { buildInspectResult } from './inspectModel.js';
-import { matchedStyles, sourceLabel, trackStyleSheets } from './inspectRules.js';
+import { HINTS_BUDGET_MS, matchedStyles, RULES_BUDGET_MS, sourceLabel, trackStyleSheets, } from './inspectRules.js';
 import { INSPECT_PAGE_JS, RELATED_NODE_JS, VARIABLE_SETTERS_JS, } from './inspectScripts.js';
 import { DEFAULT_TREE_DEPTH, DEFAULT_TREE_LIMIT } from './inspectTree.js';
 import { inspectLayout } from './layout.js';
@@ -32,10 +33,6 @@ import { findSimilar } from '../../utils/suggestions.js';
 const log = createLogger('dom');
 /** Connections DOM and CSS were enabled on */
 const stylesEnabled = new WeakSet();
-/** Time allowed for the matched rules behind the default hints (large stylesheets take longer) */
-const HINTS_BUDGET_MS = 1000;
-/** Time allowed for them with --rules or --why */
-const RULES_BUDGET_MS = 5000;
 /** Distinguishes the object groups of concurrent calls */
 let groupCounter = 0;
 /**
@@ -171,7 +168,7 @@ function expandCustomPropertyPatterns(names, style) {
  *
  * @param cdp - CDP connection (stylesheet headers for the source labels)
  * @param sources - What was read
- * @returns Cascade fields, or `cascade: 'timeout' | 'failed'` when the rules were not read
+ * @returns Cascade fields, or `cascade: 'timeout' | 'failed' | 'skipped'` when the rules were not read
  */
 function cascadeFields(cdp, sources) {
     if (!sources.matched)
@@ -305,7 +302,10 @@ async function callOn(cdp, objectId, functionDeclaration, args) {
 }
 /**
  * Read everything about the element: the page-side walk, `dom layout`'s
- * measurement and the CDP styles, fonts and box.
+ * measurement and the CDP styles, fonts and box, then the matched rules.
+ * Chrome answers one request at a time and the rules can take seconds on
+ * CSS-heavy pages, so they are asked for last: the other reads do not wait
+ * behind them, only their own budget does.
  *
  * @param cdp - CDP connection
  * @param objectId - The element
@@ -315,14 +315,16 @@ async function callOn(cdp, objectId, functionDeclaration, args) {
  */
 async function readSources(cdp, objectId, params, objectGroup) {
     const related = await relatedNodes(cdp, objectId, objectGroup);
-    const [raw, measured, styles] = await Promise.all([
+    const [raw, measured, { nodeId, ...styles }] = await Promise.all([
         readPage(cdp, objectId, params),
         measure(cdp, params.selector, related.node),
-        readStyles(cdp, related, params),
+        readStyles(cdp, related),
     ]);
+    const matched = await readMatched(cdp, nodeId, params);
     return {
         raw,
         ...styles,
+        ...(matched && { matched }),
         fonts: raw.textHolder ? styles.fonts.textHolder : styles.fonts.node,
         ...measured,
         ...(params.rules && { rules: true }),
@@ -458,20 +460,19 @@ async function nodeIdLookup(cdp, related) {
 }
 /**
  * Computed styles of the element, its parent and pseudo-elements, the
- * platform fonts of its text and its border box size.
+ * platform fonts of its text, its border box size and its node id.
  *
  * @param cdp - CDP connection
  * @param related - Backend node ids
  * @returns CDP styles
  */
-async function readStyles(cdp, related, params) {
+async function readStyles(cdp, related) {
     await enableStyleDomains(cdp);
     const nodeIdOf = await nodeIdLookup(cdp, related);
     const optionalStyle = (backendNodeId) => backendNodeId === undefined
         ? Promise.resolve(undefined)
         : computedStyle(cdp, nodeIdOf(backendNodeId));
-    const [matched, style, parentStyle, holderStyle, nodeFonts, holderFonts, size, pseudo] = await Promise.all([
-        readMatched(cdp, nodeIdOf(related.node), params),
+    const [style, parentStyle, holderStyle, nodeFonts, holderFonts, size, pseudo] = await Promise.all([
         computedStyle(cdp, nodeIdOf(related.node)),
         optionalStyle(related.parent),
         optionalStyle(related.textHolder),
@@ -487,26 +488,39 @@ async function readStyles(cdp, related, params) {
         pseudo,
         fonts: { node: nodeFonts, textHolder: holderFonts },
         ...(size && { size }),
-        ...(matched && { matched }),
+        nodeId: nodeIdOf(related.node),
     };
 }
 /**
- * The element's matched rules, when hints, `--rules` or `--why` need them:
- * within {@link HINTS_BUDGET_MS} for the default hints (skipped on very
- * large stylesheets), {@link RULES_BUDGET_MS} when asked for explicitly.
+ * How a request reads the element's matched rules, when hints, `--rules` or
+ * `--why` need them: within {@link HINTS_BUDGET_MS} for the default hints,
+ * not waited for at all on a document marked slow; within
+ * {@link RULES_BUDGET_MS} when asked for explicitly.
+ *
+ * @param params - Request
+ * @returns Budget and whether to skip on a slow document, or undefined when not needed
+ */
+export function matchedStylesRead(params) {
+    if (params.rules === true || params.why !== undefined) {
+        return { budgetMs: RULES_BUDGET_MS, skipWhenSlow: false };
+    }
+    if (params.hints === false || params.props !== undefined || params.all === true)
+        return undefined;
+    return { budgetMs: HINTS_BUDGET_MS, skipWhenSlow: true };
+}
+/**
+ * The element's matched rules, read as {@link matchedStylesRead} says.
  *
  * @param cdp - CDP connection
  * @param nodeId - Node id of the element
  * @param params - Request
- * @returns Matched styles, `timeout`, or undefined when not needed (or no node id)
+ * @returns Matched styles or why they are missing, or undefined when not needed (or no node id)
  */
 async function readMatched(cdp, nodeId, params) {
-    const explicit = params.rules === true || params.why !== undefined;
-    const skipped = !explicit && (params.hints === false || params.props !== undefined || params.all === true);
-    if (nodeId === undefined || skipped) {
+    const read = matchedStylesRead(params);
+    if (nodeId === undefined || !read)
         return undefined;
-    }
-    return matchedStyles(cdp, nodeId, explicit ? RULES_BUDGET_MS : HINTS_BUDGET_MS);
+    return matchedStyles(cdp, nodeId, read.budgetMs, { skipWhenSlow: read.skipWhenSlow });
 }
 /**
  * A pseudo-element's computed styles and size.

package/dist/runtime/dom/inspectModel.d.ts

@@ -5,11 +5,11 @@
  * tree. Pure: every input is plain data, so the rules are tested without a
  * browser.
  */
-import type { Protocol } from '../../connection/typed-cdp.js';
 import type { ElementLayout } from '../../ipc/protocol/domTypes.js';
 import type { InspectResult, InspectVisibility } from '../../ipc/protocol/inspectTypes.js';
 import { type StyleMap } from './inspectLayoutModel.js';
 import { type PlatformFont, type PseudoSource } from './inspectPaintModel.js';
+import type { MatchedStyles } from './inspectRules.js';
 import type { RawInspect } from './inspectScripts.js';
 /** What one inspect read */
 export interface InspectSources {
@@ -29,8 +29,8 @@ export interface InspectSources {
     /** The element as `dom layout` measures it */
     layout?: ElementLayout;
     colorScheme?: 'light' | 'dark';
-    /** Matched rules for the cascade fields; `timeout` or `failed` when they were not read */
-    matched?: Protocol.CSS.GetMatchedStylesForNodeResponse | 'timeout' | 'failed';
+    /** Matched rules for the cascade fields; `timeout`, `failed` or `skipped` when they were not read */
+    matched?: MatchedStyles;
     /** `--rules` was asked for */
     rules?: boolean;
     /** `--why` property */

package/dist/runtime/dom/inspectRules.d.ts

@@ -22,16 +22,42 @@ export declare function trackStyleSheets(cdp: CDPConnection): void;
  * @returns Headers
  */
 export declare function styleSheetHeaders(cdp: CDPConnection): Iterable<Protocol.CSS.CSSStyleSheetHeader>;
+/** Time allowed for the matched rules behind the default hints; a read within it clears the slow mark */
+export declare const HINTS_BUDGET_MS = 1000;
+/** Time allowed for them with --rules or --why */
+export declare const RULES_BUDGET_MS = 5000;
+/** Matched styles of an element, or why they are missing */
+export type MatchedStyles = Protocol.CSS.GetMatchedStylesForNodeResponse | 'timeout' | 'failed' | 'skipped';
+/**
+ * Forget the kept answers of a connection (requests still running stay
+ * shared). For commands that may change the page in ways CDP reports no
+ * event for: clicks, typing, hovering, scripts, emulation.
+ *
+ * @param cdp - CDP connection
+ */
+export declare function resetMatchedStyles(cdp: CDPConnection): void;
 /**
  * The rules that match an element, with its inline style and what its
- * ancestors pass down, or why they are missing.
+ * ancestors pass down, or why they are missing. A request still running for
+ * the element is shared; a slow answer (over {@link KEEP_ANSWERS_SLOWER_THAN_MS})
+ * is reused for {@link KEPT_ANSWER_TTL_MS} unless the document, its
+ * stylesheets or its DOM change or a command may have changed the page.
+ * Another element's request is sent only after the one Chrome is working on,
+ * within the budget. When the request this call sent or shared outlasts the
+ * budget, the document is marked slow: `skipWhenSlow` reads then return
+ * `skipped` at once (unless the answer is kept) until a read is fast again,
+ * a stylesheet changes or the page navigates.
  *
  * @param cdp - CDP connection
  * @param nodeId - Node id of the element
  * @param budgetMs - Time allowed
- * @returns Matched styles, `timeout` (longer than the budget) or `failed` (CDP error)
+ * @param options - `skipWhenSlow`: do not wait on a document marked slow (the default hints)
+ * @returns Matched styles, `timeout` (longer than the budget), `failed` (CDP error)
+ *   or `skipped` (slow document)
  */
-export declare function matchedStyles(cdp: CDPConnection, nodeId: number, budgetMs: number): Promise<Protocol.CSS.GetMatchedStylesForNodeResponse | 'timeout' | 'failed'>;
+export declare function matchedStyles(cdp: CDPConnection, nodeId: number, budgetMs: number, options?: {
+    skipWhenSlow?: boolean;
+}): Promise<MatchedStyles>;
 /**
  * Where a declaration comes from, for people: the selector and the file
  * with its line (and column, for single-line minified files), or what kind