browser-debugger-cli 0.13.0 → 0.15.0

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

@@ -84,11 +84,12 @@ export declare function frameContextLostError(conn: Pick<CDPConnection, 'send'>,
  * @param script - JavaScript expression
  * @param query - Requested frame (index, name/id attribute, or part of the name, id or URL)
  * @param listedIds - Frame id behind each index of the last `dom frames` listing, if any
+ * @param full - `--full`: copy the result with every entry
  * @returns Value, type and the frame's URL
  * @throws CommandError (81/83) when the frame is ambiguous or missing, (87)
  *   when an index names another frame than when it was listed, (83) when it
  *   navigated or was removed while the script ran, else as evaluateScript
  */
-export declare function evaluateInFrame(page: CDPConnection, wsUrl: string, script: string, query: string, listedIds?: string[]): Promise<DomEvalData>;
+export declare function evaluateInFrame(page: CDPConnection, wsUrl: string, script: string, query: string, listedIds?: string[], full?: boolean): Promise<DomEvalData>;
 export {};
 //# sourceMappingURL=frames.d.ts.map

package/dist/runtime/dom/frames.js

@@ -529,12 +529,13 @@ export async function frameContextLostError(conn, page, frame) {
  * @param script - JavaScript expression
  * @param query - Requested frame (index, name/id attribute, or part of the name, id or URL)
  * @param listedIds - Frame id behind each index of the last `dom frames` listing, if any
+ * @param full - `--full`: copy the result with every entry
  * @returns Value, type and the frame's URL
  * @throws CommandError (81/83) when the frame is ambiguous or missing, (87)
  *   when an index names another frame than when it was listed, (83) when it
  *   navigated or was removed while the script ran, else as evaluateScript
  */
-export async function evaluateInFrame(page, wsUrl, script, query, listedIds) {
+export async function evaluateInFrame(page, wsUrl, script, query, listedIds, full = false) {
     return withFrameConnection(page, wsUrl, async (fc) => {
         const { frame, uniqueContextId } = await resolveFrame(fc, query, listedIds);
         try {
@@ -542,6 +543,7 @@ export async function evaluateInFrame(page, wsUrl, script, query, listedIds) {
                 ...(frame.sessionId && { sessionId: frame.sessionId }),
                 uniqueContextId,
                 recovery: recoverySender(fc, frame.sessionId),
+                full,
             });
             return { ...result, frame: frame.info.url };
         }

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

package/dist/runtime/dom/inspectRules.js

@@ -37,24 +37,218 @@ export function trackStyleSheets(cdp) {
 export function styleSheetHeaders(cdp) {
     return headersByConnection.get(cdp)?.values() ?? [];
 }
+/** Time allowed for the matched rules behind the default hints; a read within it clears the slow mark */
+export const HINTS_BUDGET_MS = 1000;
+/** Time allowed for them with --rules or --why */
+export const RULES_BUDGET_MS = 5000;
+/** Answers that came faster are not kept: reading again is cheap and always current */
+const KEEP_ANSWERS_SLOWER_THAN_MS = 300;
+/**
+ * How long a kept answer is reused. Page state such as `:checked`, `:hover`
+ * or `:focus` changes without any CDP event, so answers are kept only briefly
+ * (and dropped by every command that may change the page, see {@link resetMatchedStyles}).
+ */
+const KEPT_ANSWER_TTL_MS = 5000;
+/** Answers kept per document (one can be several MB on CSS-heavy pages) */
+const MAX_KEPT_ANSWERS = 4;
+/** Stylesheet events: kept answers are dropped and the slow mark cleared */
+const STYLESHEET_EVENTS = ['CSS.styleSheetAdded', 'CSS.styleSheetChanged', 'CSS.styleSheetRemoved'];
+/** Other events after which kept answers may be stale */
+const STYLE_CHANGE_EVENTS = [
+    'CSS.mediaQueryResultChanged',
+    'DOM.attributeModified',
+    'DOM.attributeRemoved',
+    'DOM.inlineStyleInvalidated',
+    'DOM.childNodeInserted',
+    'DOM.childNodeRemoved',
+    'DOM.childNodeCountUpdated',
+    'DOM.pseudoElementAdded',
+    'DOM.pseudoElementRemoved',
+];
+/** Matched-styles state per connection */
+const documentStylesByConnection = new WeakMap();
+/**
+ * The matched-styles state of a connection, tracked from its first use: a
+ * new document (`DOM.documentUpdated`) starts afresh (a request still running
+ * for the old one no longer holds back new ones), stylesheet changes drop the
+ * kept answers and the slow mark, style and DOM changes the kept answers.
+ * Events of other sessions (iframes) are ignored.
+ *
+ * @param cdp - CDP connection
+ * @returns State
+ */
+function documentStyles(cdp) {
+    const existing = documentStylesByConnection.get(cdp);
+    if (existing)
+        return existing;
+    const state = { requests: new Map(), slow: false, document: 0 };
+    documentStylesByConnection.set(cdp, state);
+    cdp.on('DOM.documentUpdated', (_params, sessionId) => {
+        if (sessionId)
+            return;
+        state.document++;
+        state.requests.clear();
+        state.running = undefined;
+        state.slow = false;
+    });
+    for (const event of STYLESHEET_EVENTS) {
+        cdp.on(event, (_params, sessionId) => {
+            if (sessionId)
+                return;
+            state.requests.clear();
+            state.slow = false;
+        });
+    }
+    for (const event of STYLE_CHANGE_EVENTS) {
+        cdp.on(event, (_params, sessionId) => {
+            if (!sessionId)
+                state.requests.clear();
+        });
+    }
+    return state;
+}
+/**
+ * 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 function resetMatchedStyles(cdp) {
+    documentStylesByConnection.get(cdp)?.requests.clear();
+}
+/**
+ * Record an answer: a fast one clears the slow mark and is dropped, a slow
+ * one is kept for {@link KEPT_ANSWER_TTL_MS}, a failed one is dropped.
+ *
+ * @param state - Document state
+ * @param nodeId - Node id of the element
+ * @param request - The request
+ * @param tookMs - How long Chrome took
+ */
+function settleRequest(state, nodeId, request, tookMs) {
+    if (state.running === request.promise)
+        state.running = undefined;
+    if (request.document !== state.document)
+        return;
+    const answered = request.answer !== 'failed';
+    if (answered && tookMs <= HINTS_BUDGET_MS)
+        state.slow = false;
+    if (answered && tookMs > KEEP_ANSWERS_SLOWER_THAN_MS) {
+        request.expiresAt = Date.now() + KEPT_ANSWER_TTL_MS;
+    }
+    else if (state.requests.get(nodeId) === request) {
+        state.requests.delete(nodeId);
+    }
+}
+/**
+ * Send a matched-styles request and share it while it runs, dropping the
+ * least recently used entries beyond {@link MAX_KEPT_ANSWERS}.
+ *
+ * @param cdp - CDP connection
+ * @param state - Document state
+ * @param nodeId - Node id of the element
+ * @returns The request
+ */
+function sendMatchedRequest(cdp, state, nodeId) {
+    const sentAt = Date.now();
+    const request = {
+        document: state.document,
+        promise: cdp
+            .send('CSS.getMatchedStylesForNode', { nodeId })
+            .then((response) => response)
+            .catch((error) => {
+            log.debug(`CSS.getMatchedStylesForNode failed: ${String(error)}`);
+            return 'failed';
+        }),
+    };
+    state.running = request.promise;
+    void request.promise.then((answer) => {
+        request.answer = answer;
+        settleRequest(state, nodeId, request, Date.now() - sentAt);
+    });
+    state.requests.set(nodeId, request);
+    for (const oldest of state.requests.keys()) {
+        if (state.requests.size <= MAX_KEPT_ANSWERS)
+            break;
+        state.requests.delete(oldest);
+    }
+    return request;
+}
+/**
+ * The element's request still running or kept answer, unless expired;
+ * marked as the most recently used.
+ *
+ * @param state - Document state
+ * @param nodeId - Node id of the element
+ * @returns The request, or undefined
+ */
+function keptRequest(state, nodeId) {
+    const kept = state.requests.get(nodeId);
+    if (!kept)
+        return undefined;
+    state.requests.delete(nodeId);
+    if (kept.expiresAt !== undefined && kept.expiresAt <= Date.now())
+        return undefined;
+    state.requests.set(nodeId, kept);
+    return kept;
+}
+/**
+ * The element's request, sent once Chrome has answered the one it is
+ * working on (another element's, or this one's sent by a concurrent call).
+ *
+ * @param cdp - CDP connection
+ * @param state - Document state
+ * @param nodeId - Node id of the element
+ * @param deadline - When to give up waiting
+ * @returns The request, or undefined when the running one outlasted the deadline
+ */
+async function requestWhenFree(cdp, state, nodeId, deadline) {
+    while (state.running) {
+        const kept = state.requests.get(nodeId);
+        if (kept)
+            return kept;
+        if ((await raceTimeout(state.running, deadline - Date.now())) === undefined)
+            return undefined;
+    }
+    return state.requests.get(nodeId) ?? sendMatchedRequest(cdp, state, nodeId);
+}
 /**
  * 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 async function matchedStyles(cdp, nodeId, budgetMs) {
-    const request = cdp
-        .send('CSS.getMatchedStylesForNode', { nodeId })
-        .then((response) => response)
-        .catch((error) => {
-        log.debug(`CSS.getMatchedStylesForNode failed: ${String(error)}`);
-        return 'failed';
-    });
-    return (await raceTimeout(request, budgetMs)) ?? 'timeout';
+export async function matchedStyles(cdp, nodeId, budgetMs, options = {}) {
+    const state = documentStyles(cdp);
+    const kept = keptRequest(state, nodeId);
+    if (kept?.answer)
+        return kept.answer;
+    if (options.skipWhenSlow && state.slow)
+        return 'skipped';
+    const deadline = Date.now() + budgetMs;
+    const request = kept ?? (await requestWhenFree(cdp, state, nodeId, deadline));
+    if (!request)
+        return 'timeout';
+    const answer = await raceTimeout(request.promise, deadline - Date.now());
+    if (answer)
+        return answer;
+    if (request.document === state.document)
+        state.slow = true;
+    return 'timeout';
 }
 /**
  * File name of a URL, without query or hash; the host for a site's root.

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

@@ -11,8 +11,6 @@ import type { CDPConnection } from '../../connection/cdp.js';
 import type { DomLayoutCommand } from '../../ipc/protocol/commands.js';
 import type { LayoutComputedStyle, LayoutResult, PageLayout } from '../../ipc/protocol/domTypes.js';
 import { type ElementGeometry } from './elementGeometry.js';
-/** Matches measured per command (the rest are counted as omitted) */
-export declare const LAYOUT_ELEMENT_LIMIT = 100;
 /**
  * Page-side end of a visible span kept clear of an overlay scrollbar along
  * an edge (16 CSS px wide): overlay scrollbars (macOS, mobile) show for about a

package/dist/runtime/dom/layout.js

@@ -7,6 +7,7 @@
  * shows. The measurements are classified outside the page
  * ({@link classifyViewportPosition}).
  */
+import { LAYOUT_ELEMENT_LIMIT } from '../../constants.js';
 import { CommandError } from '../../errors/index.js';
 import { operationFailedError } from '../../errors/messages.js';
 import { ELEMENT_GEOMETRY_JS, FRAME_OFFSET_JS, VIEWPORT_SIZE_JS, classifyViewportPosition, } from './elementGeometry.js';
@@ -20,8 +21,6 @@ import { createLogger } from '../../ui/logging/index.js';
 import { getErrorMessage } from '../../utils/errors.js';
 import { EXIT_CODES } from '../../utils/exitCodes.js';
 const log = createLogger('dom');
-/** Matches measured per command (the rest are counted as omitted) */
-export const LAYOUT_ELEMENT_LIMIT = 100;
 /**
  * Page-side end of a visible span kept clear of an overlay scrollbar along
  * an edge (16 CSS px wide): overlay scrollbars (macOS, mobile) show for about a

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

@@ -107,7 +107,10 @@ export declare const FILL_READ_BACK_SCRIPT: string;
  * dialog or bubble can swallow input while the page looks normal.
  * Slotted text hit-tests as its shadow host, so an element in a shadow root
  * that shows slotted content (a button labelled through a `<slot>`) is
- * topmost where its host is hit.
+ * topmost where its host is hit. An element that is not topmost because an
+ * ancestor in the flat tree clips it away (a collapsed
+ * `height: 0; overflow: hidden` accordion, {@link ANCESTOR_CLIP_JS}) is
+ * reported as hidden by it, not as covered.
  */
 export declare const CLICK_ELEMENT_SCRIPT: string;
 /**

package/dist/runtime/dom/reactEventHelpers.js

@@ -7,6 +7,7 @@
  */
 import { FILL_REFUSALS, LABEL_WITHOUT_CONTROL, NAME_QUERY_PLACEHOLDER, VIA_LABEL_SUFFIX, } from '../../errors/messages.js';
 import { REVEAL_SNAPSHOT_JS } from './actionEffectsScripts.js';
+import { ANCESTOR_CLIP_JS } from './elementGeometry.js';
 import { DISABLED_CAUSE_JS, ELEMENT_DESCRIPTION_JS, ELEMENT_IDENTITY_JS, } from './elementInfo.js';
 import { FIND_ELEMENTS_JS, LABEL_CONTROL_JS } from './targetNode.js';
 /**
@@ -484,7 +485,10 @@ export const FILL_READ_BACK_SCRIPT = `(() => {
  * dialog or bubble can swallow input while the page looks normal.
  * Slotted text hit-tests as its shadow host, so an element in a shadow root
  * that shows slotted content (a button labelled through a `<slot>`) is
- * topmost where its host is hit.
+ * topmost where its host is hit. An element that is not topmost because an
+ * ancestor in the flat tree clips it away (a collapsed
+ * `height: 0; overflow: hidden` accordion, {@link ANCESTOR_CLIP_JS}) is
+ * reported as hidden by it, not as covered.
  */
 export const CLICK_ELEMENT_SCRIPT = `
 (function(selector, parts, index, action) {
@@ -639,7 +643,10 @@ export const CLICK_ELEMENT_SCRIPT = `
   else if (el.closest('[inert]')) obstruction = 'inert (the page made it non-interactive)';
   else if (style.pointerEvents === 'none') obstruction = 'not clickable (pointer-events: none)';
   else if (!hasSize) obstruction = 'zero-size';
-  else if (!hittable) obstruction = 'covered by another element' + coveredBy();
+  else if (!hittable) {
+    const collapsed = (${ANCESTOR_CLIP_JS})(el, rect, describe).collapsed;
+    obstruction = collapsed ? 'hidden (' + collapsed + ')' : 'covered by another element' + coveredBy();
+  }
 
   if (action === 'hover') (${REVEAL_SNAPSHOT_JS})(el);