browser-debugger-cli 0.7.2 → 0.9.0

package/dist/runtime/dom/keyMapping.js

@@ -0,0 +1,232 @@
+/**
+ * Key name to CDP key event parameters mapping.
+ *
+ * Maps human-readable key names to Chrome DevTools Protocol Input.dispatchKeyEvent parameters.
+ */
+import { findSimilar } from '../../utils/suggestions.js';
+/**
+ * Modifier key bit flags for CDP Input.dispatchKeyEvent
+ * (Alt=1, Ctrl=2, Meta/Command=4, Shift=8).
+ */
+export const MODIFIER_FLAGS = {
+    alt: 1,
+    ctrl: 2,
+    meta: 4,
+    shift: 8,
+};
+/**
+ * Map of supported key names to their CDP parameters.
+ *
+ * Keys are case-insensitive for user convenience.
+ */
+const KEY_DEFINITIONS = {
+    enter: { code: 'Enter', key: 'Enter', keyCode: 13, text: '\r' },
+    tab: { code: 'Tab', key: 'Tab', keyCode: 9 },
+    escape: { code: 'Escape', key: 'Escape', keyCode: 27 },
+    space: { code: 'Space', key: ' ', keyCode: 32, text: ' ' },
+    backspace: { code: 'Backspace', key: 'Backspace', keyCode: 8 },
+    delete: { code: 'Delete', key: 'Delete', keyCode: 46 },
+    arrowup: { code: 'ArrowUp', key: 'ArrowUp', keyCode: 38 },
+    arrowdown: { code: 'ArrowDown', key: 'ArrowDown', keyCode: 40 },
+    arrowleft: { code: 'ArrowLeft', key: 'ArrowLeft', keyCode: 37 },
+    arrowright: { code: 'ArrowRight', key: 'ArrowRight', keyCode: 39 },
+    home: { code: 'Home', key: 'Home', keyCode: 36 },
+    end: { code: 'End', key: 'End', keyCode: 35 },
+    pageup: { code: 'PageUp', key: 'PageUp', keyCode: 33 },
+    pagedown: { code: 'PageDown', key: 'PageDown', keyCode: 34 },
+    f1: { code: 'F1', key: 'F1', keyCode: 112 },
+    f2: { code: 'F2', key: 'F2', keyCode: 113 },
+    f3: { code: 'F3', key: 'F3', keyCode: 114 },
+    f4: { code: 'F4', key: 'F4', keyCode: 115 },
+    f5: { code: 'F5', key: 'F5', keyCode: 116 },
+    f6: { code: 'F6', key: 'F6', keyCode: 117 },
+    f7: { code: 'F7', key: 'F7', keyCode: 118 },
+    f8: { code: 'F8', key: 'F8', keyCode: 119 },
+    f9: { code: 'F9', key: 'F9', keyCode: 120 },
+    f10: { code: 'F10', key: 'F10', keyCode: 121 },
+    f11: { code: 'F11', key: 'F11', keyCode: 122 },
+    f12: { code: 'F12', key: 'F12', keyCode: 123 },
+};
+for (let i = 0; i < 26; i++) {
+    const letter = String.fromCharCode(97 + i); // 'a' = 97
+    const upperLetter = letter.toUpperCase();
+    KEY_DEFINITIONS[letter] = {
+        code: `Key${upperLetter}`,
+        key: letter,
+        keyCode: 65 + i, // 'A' = 65
+        text: letter,
+    };
+}
+for (let i = 0; i < 10; i++) {
+    const digit = String(i);
+    KEY_DEFINITIONS[digit] = {
+        code: `Digit${digit}`,
+        key: digit,
+        keyCode: 48 + i, // '0' = 48
+        text: digit,
+        shiftText: ')!@#$%^&*('.charAt(i),
+    };
+}
+/**
+ * Get key definition by name (case-insensitive).
+ *
+ * @param keyName - Human-readable key name (e.g., "Enter", "Tab", "a")
+ * @returns Key definition or undefined if not found
+ *
+ * @example
+ * ```typescript
+ * const def = getKeyDefinition('Enter');
+ * // { code: 'Enter', key: 'Enter', keyCode: 13 }
+ *
+ * const letterDef = getKeyDefinition('a');
+ * // { code: 'KeyA', key: 'a', keyCode: 65 }
+ * ```
+ */
+export function getKeyDefinition(keyName) {
+    const name = keyName.toLowerCase();
+    const digit = keyName.length === 1 ? SHIFTED_DIGITS.indexOf(keyName) : -1;
+    if (digit !== -1)
+        return KEY_DEFINITIONS[String(digit)];
+    return KEY_DEFINITIONS[KEY_ALIASES[name] ?? name];
+}
+/** Other names users write for keys */
+const KEY_ALIASES = {
+    esc: 'escape',
+    return: 'enter',
+    del: 'delete',
+    spacebar: 'space',
+    ' ': 'space',
+    up: 'arrowup',
+    down: 'arrowdown',
+    left: 'arrowleft',
+    right: 'arrowright',
+    pgup: 'pageup',
+    pgdn: 'pagedown',
+    pagedn: 'pagedown',
+};
+/** Characters typed with Shift on the digit keys 0-9 (US layout) */
+const SHIFTED_DIGITS = ')!@#$%^&*(';
+/**
+ * Whether a key name needs Shift to produce it (an uppercase letter, or a
+ * symbol on a digit key such as "!").
+ *
+ * @param keyName - Key name as given
+ * @returns True if Shift is implied
+ */
+export function impliesShift(keyName) {
+    return /^[A-Z]$/.test(keyName) || (keyName.length === 1 && SHIFTED_DIGITS.includes(keyName));
+}
+/**
+ * Key names closest to an unknown one.
+ *
+ * @param keyName - Unknown key name
+ * @returns Up to three key names, in their usual spelling
+ */
+export function similarKeyNames(keyName) {
+    const names = Object.values(KEY_DEFINITIONS)
+        .map((definition) => definition.key)
+        .filter((key) => key.length > 1);
+    return findSimilar(keyName, names);
+}
+/** Accepted modifier names (and common aliases) mapped to their flag. */
+const MODIFIER_NAMES = {
+    alt: 'alt',
+    option: 'alt',
+    opt: 'alt',
+    ctrl: 'ctrl',
+    control: 'ctrl',
+    meta: 'meta',
+    cmd: 'meta',
+    command: 'meta',
+    shift: 'shift',
+};
+/**
+ * Split a comma-separated modifier list into lowercase names.
+ *
+ * @param modifiers - e.g. "Ctrl, shift"
+ * @returns Non-empty names
+ */
+function modifierNames(modifiers) {
+    return modifiers
+        .toLowerCase()
+        .split(',')
+        .map((part) => part.trim())
+        .filter(Boolean);
+}
+/**
+ * Names in a modifier list that are not recognized.
+ *
+ * @param modifiers - Comma-separated modifier names
+ * @returns Unknown names (empty when all are valid)
+ */
+export function findUnknownModifiers(modifiers) {
+    return modifierNames(modifiers).filter((name) => !(name in MODIFIER_NAMES));
+}
+/**
+ * Parse modifier string into CDP modifier flags.
+ *
+ * @param modifiers - Comma-separated modifier names (e.g., "ctrl,shift"; aliases cmd, control, option)
+ * @returns Combined modifier bit flags
+ *
+ * @example
+ * ```typescript
+ * parseModifiers('ctrl,shift'); // Returns 10 (2 + 8)
+ * parseModifiers('cmd');        // Returns 4
+ * parseModifiers('');           // Returns 0
+ * ```
+ */
+export function parseModifiers(modifiers) {
+    if (!modifiers)
+        return 0;
+    return modifierNames(modifiers).reduce((flags, name) => {
+        const flag = MODIFIER_NAMES[name];
+        return flag ? flags | MODIFIER_FLAGS[flag] : flags;
+    }, 0);
+}
+/**
+ * Human-readable names of set modifier flags.
+ *
+ * @param flags - CDP modifier bit flags
+ * @returns e.g. ["Ctrl", "Shift"]
+ */
+export function describeModifiers(flags) {
+    const labels = {
+        ctrl: 'Ctrl',
+        alt: 'Alt',
+        shift: 'Shift',
+        meta: 'Meta',
+    };
+    return Object.keys(labels)
+        .filter((name) => flags & MODIFIER_FLAGS[name])
+        .map((name) => labels[name]);
+}
+/** Editor commands of the standard Ctrl/Cmd shortcuts, by key code */
+const SHORTCUT_COMMANDS = {
+    KeyA: 'selectAll',
+    KeyC: 'copy',
+    KeyX: 'cut',
+    KeyV: 'paste',
+    KeyZ: 'undo',
+};
+/**
+ * Editor commands a key press triggers, like a physical keyboard does.
+ *
+ * Chrome only runs shortcuts such as Ctrl+A (Cmd+A on macOS) for events it
+ * gets from the OS; for CDP key events the command has to be named. Either
+ * Ctrl or Meta works, so scripts behave the same on every platform; Shift+Z
+ * redoes.
+ *
+ * @param code - Key code, e.g. "KeyA"
+ * @param flags - CDP modifier bit flags
+ * @returns Editor commands for `Input.dispatchKeyEvent`, empty if none
+ */
+export function shortcutCommands(code, flags) {
+    const command = SHORTCUT_COMMANDS[code];
+    const shortcutModifier = flags & (MODIFIER_FLAGS.ctrl | MODIFIER_FLAGS.meta);
+    if (!command || !shortcutModifier || flags & MODIFIER_FLAGS.alt)
+        return [];
+    if (command === 'undo' && flags & MODIFIER_FLAGS.shift)
+        return ['redo'];
+    return flags & MODIFIER_FLAGS.shift ? [] : [command];
+}
+//# sourceMappingURL=keyMapping.js.map

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

@@ -0,0 +1,67 @@
+/**
+ * Positions, sizes and visibility of elements (`bdg dom layout`).
+ *
+ * One page-side pass per command measures every match: its box in page and
+ * viewport coordinates (iframe offsets included), what clips it, whether it
+ * is rendered, what covers its center and the styles that decide how it
+ * shows. The measurements are classified outside the page
+ * ({@link classifyViewportPosition}).
+ */
+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
+ * second after a scroll and catch hit tests, which then return the scroller.
+ * The span ends before the strip when it reaches into it and also shows
+ * outside it; without overlay scrollbars along the edge it is unchanged.
+ * Arguments: span start and end, the edge, whether overlay scrollbars show there.
+ */
+export declare const CLEAR_OF_SCROLLBAR_JS = "(start, end, edge, overlay) =>\n  overlay && end > edge - 16 && edge - 16 > start ? edge - 16 : end";
+/** One element as {@link LAYOUT_JS} measures it. */
+export interface RawElementLayout {
+    index: number;
+    tag: string;
+    element: string;
+    text: string;
+    context: string;
+    geometry: ElementGeometry;
+    coveredBy: string | null;
+    computed: LayoutComputedStyle;
+}
+/** What {@link LAYOUT_JS} returns. */
+export interface RawLayout {
+    /** Elements the selector matched */
+    count: number;
+    /** Set when at least one element was measured */
+    page?: PageLayout;
+    elements: RawElementLayout[];
+    /** Measured inside a cross-origin iframe: `page` and the coordinates are that frame's */
+    crossOriginFrame?: boolean;
+}
+/**
+ * Measure the elements a selector (or cached index) refers to.
+ *
+ * @param cdp - CDP connection
+ * @param params - Selector (and index) or backend node id
+ * @returns Layout report
+ * @throws CommandError (83) no match, (81) index out of range or invalid
+ *   selector, (87) the cached element left the page
+ */
+export declare function inspectLayout(cdp: CDPConnection, params: DomLayoutCommand): Promise<LayoutResult>;
+/**
+ * Turn page-side measurements into the layout report: rounded page and
+ * viewport coordinates, viewport position and text preview per element.
+ *
+ * @param raw - Measurements with at least one element
+ * @param params - Request (selector and index)
+ * @returns Layout report
+ */
+export declare function buildLayoutResult(raw: RawLayout & {
+    page: PageLayout;
+}, params: Pick<DomLayoutCommand, 'selector' | 'index'>): LayoutResult;
+//# sourceMappingURL=layout.d.ts.map

package/dist/runtime/dom/layout.js

@@ -0,0 +1,333 @@
+/**
+ * Positions, sizes and visibility of elements (`bdg dom layout`).
+ *
+ * One page-side pass per command measures every match: its box in page and
+ * viewport coordinates (iframe offsets included), what clips it, whether it
+ * is rendered, what covers its center and the styles that decide how it
+ * shows. The measurements are classified outside the page
+ * ({@link classifyViewportPosition}).
+ */
+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';
+import { ELEMENT_CONTEXT_JS, ELEMENT_DESCRIPTION_JS, ELEMENT_TEXT_JS, textPreview, } from './elementInfo.js';
+import { throwIfInvalidSelector } from './formFillHelpers/shared.js';
+import { findFrameOwner, placeInOwnerFrame } from './frameLayout.js';
+import { measureFrameMapping } from './frameScopedConnection.js';
+import { DEEP_QUERY_JS, missingElementError, selectorArgsJS } from './targetNode.js';
+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
+ * second after a scroll and catch hit tests, which then return the scroller.
+ * The span ends before the strip when it reaches into it and also shows
+ * outside it; without overlay scrollbars along the edge it is unchanged.
+ * Arguments: span start and end, the edge, whether overlay scrollbars show there.
+ */
+export const CLEAR_OF_SCROLLBAR_JS = `(start, end, edge, overlay) =>
+  overlay && end > edge - 16 && edge - 16 > start ? edge - 16 : end`;
+/**
+ * Page-side edges of the top-level viewport with overlay scrollbars: the page
+ * scrolls along an axis while its scrollbar takes no space (the window is as
+ * wide or tall as the viewport).
+ */
+const VIEWPORT_OVERLAY_JS = `(view, viewport) => {
+  const scroller = view.document.scrollingElement || view.document.documentElement;
+  return {
+    right: scroller.scrollHeight > viewport.height && view.innerWidth - viewport.width < 1,
+    bottom: scroller.scrollWidth > viewport.width && view.innerHeight - viewport.height < 1
+  };
+}`;
+/** Elements a click on any of their content activates */
+const CLICK_TARGET_SELECTOR = 'a[href], button, [role="button"], [role="link"], label, summary, input, select, textarea';
+/**
+ * Page-side test of whether an element on top of another one is part of the
+ * same click target, so a click there does what a click on the element
+ * would: both are in the same link, button or label (an overlay span inside
+ * the card's link), or in links to the same URL (a card's overlay link next
+ * to its headline link), or the element is plain content (in no link or
+ * button) of a card covered by its "faux block link" (news sites): an
+ * absolutely positioned `<a href>` without visible text of its own (empty,
+ * or an aria-label only), directly in the card (not `<body>`) and spanning
+ * it. Dismiss buttons, promo links with text and `[role=button]` overlays
+ * still count as covers.
+ */
+const SAME_CLICK_TARGET_JS = `(node, hit) => {
+  const parentOf = (n) => n.parentElement || (n.parentNode && n.parentNode.host) || null;
+  const targetOf = (n) => {
+    for (let p = n; p; p = parentOf(p)) {
+      if (p.matches && p.matches(${JSON.stringify(CLICK_TARGET_SELECTOR)})) return p;
+    }
+    return null;
+  };
+  const theirs = targetOf(hit);
+  if (!theirs) return false;
+  const mine = targetOf(node);
+  if (mine) return mine === theirs || (mine.localName === 'a' && theirs.localName === 'a' && mine.href === theirs.href);
+  const card = theirs.parentElement;
+  if (theirs.localName !== 'a' || theirs.hasAttribute('role')) return false;
+  if (!card || card === node.ownerDocument.body || !card.contains(node)) return false;
+  const style = theirs.ownerDocument.defaultView.getComputedStyle(theirs);
+  if (style.position !== 'absolute' || (theirs.innerText || '').trim() !== '') return false;
+  const outer = theirs.getBoundingClientRect();
+  const inner = card.getBoundingClientRect();
+  return outer.left <= inner.left + 1 && outer.top <= inner.top + 1 && outer.right >= inner.right - 1 && outer.bottom >= inner.bottom - 1;
+}`;
+/**
+ * Page function: layout of the matches in `found` (all up to `limit`, or the
+ * one at `index`) and of the top-level page. An element covers another when
+ * it is the topmost element at the center of the largest visible part of the
+ * other's boxes (a wrapped link has one per line; the strip where overlay
+ * scrollbars show is avoided when possible, {@link CLEAR_OF_SCROLLBAR_JS}) and does not lie inside it,
+ * nor part of the element's own click target ({@link SAME_CLICK_TARGET_JS}: the link, button
+ * or label it is in, or the overlay link of its card; a click there does the same). An
+ * ancestor covers it only when the ancestor is painted above it there (its
+ * `::before`/`::after` overlay, or its background over a negative
+ * `z-index`), as `dom click` finds: the element is in the hit-test stack below
+ * the ancestor. Hit-testing goes up through the iframes, so an overlay over
+ * an iframe covers the elements in it. Elements hit-testing skips
+ * (`pointer-events: none`, also through an iframe) get no cover.
+ */
+const LAYOUT_JS = `function (found, index, limit) {
+  const geometryOf = ${ELEMENT_GEOMETRY_JS};
+  const viewportSize = ${VIEWPORT_SIZE_JS};
+  const frameOffset = ${FRAME_OFFSET_JS};
+  const describe = ${ELEMENT_DESCRIPTION_JS};
+  const contextOf = ${ELEMENT_CONTEXT_JS};
+  const textOf = ${ELEMENT_TEXT_JS};
+  const clearOfScrollbar = ${CLEAR_OF_SCROLLBAR_JS};
+  const viewportOverlay = ${VIEWPORT_OVERLAY_JS};
+  const picked = index === null
+    ? found.slice(0, limit).map((el, i) => [i, el])
+    : (found[index] ? [[index, found[index]]] : []);
+  if (picked.length === 0) return { count: found.length, elements: [] };
+  let top = picked[0][1].ownerDocument.defaultView;
+  while (top.frameElement) top = top.parent;
+  const scroller = top.document.scrollingElement || top.document.documentElement;
+  const page = {
+    viewport: viewportSize(top),
+    scroll: { x: top.scrollX, y: top.scrollY },
+    document: { width: scroller.scrollWidth, height: scroller.scrollHeight },
+    colorScheme: top.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  };
+  const pageOverlay = viewportOverlay(top, page.viewport);
+  const encloses = (outer, node) => {
+    for (let n = node; n; n = n.parentNode || n.host) if (n === outer) return true;
+    return false;
+  };
+  const sameTarget = ${SAME_CLICK_TARGET_JS};
+  const coverAt = (node, x, y) => {
+    const root = node.getRootNode();
+    const scope = typeof root.elementFromPoint === 'function' ? root : node.ownerDocument;
+    const hit = scope.elementFromPoint(x, y);
+    if (!hit || encloses(node, hit) || sameTarget(node, hit)) return null;
+    if (!encloses(hit, node)) return hit;
+    return scope.elementsFromPoint(x, y).indexOf(node) > 0 ? hit : null;
+  };
+  const visibleCenter = (el, g) => {
+    const bounds = [{ x: 0, y: 0, width: page.viewport.width, height: page.viewport.height }].concat(g.clip ? [g.clip] : []);
+    let best = null;
+    for (const r of Array.from(el.getClientRects())) {
+      const boxes = bounds.concat([{ x: r.left + g.offset.x, y: r.top + g.offset.y, width: r.width, height: r.height }]);
+      const left = Math.max(...boxes.map((b) => b.x));
+      const top = Math.max(...boxes.map((b) => b.y));
+      const right = Math.min(...boxes.map((b) => b.x + b.width));
+      const bottom = Math.min(...boxes.map((b) => b.y + b.height));
+      const area = (right - left) * (bottom - top);
+      if (!(right > left && bottom > top) || (best && area <= best.area)) continue;
+      let clearRight = clearOfScrollbar(left, right, page.viewport.width, pageOverlay.right);
+      let clearBottom = clearOfScrollbar(top, bottom, page.viewport.height, pageOverlay.bottom);
+      if (g.clip) {
+        clearRight = clearOfScrollbar(left, clearRight, g.clip.x + g.clip.width, g.clipOverlay.right);
+        clearBottom = clearOfScrollbar(top, clearBottom, g.clip.y + g.clip.height, g.clipOverlay.bottom);
+      }
+      best = { area: area, x: (left + clearRight) / 2, y: (top + clearBottom) / 2 };
+    }
+    return best;
+  };
+  const hitTestable = (node) => node.ownerDocument.defaultView.getComputedStyle(node).pointerEvents !== 'none';
+  const coveredBy = (el, g) => {
+    const center = hitTestable(el) && visibleCenter(el, g);
+    if (!center) return null;
+    let x = center.x - g.offset.x;
+    let y = center.y - g.offset.y;
+    let cover = coverAt(el, x, y);
+    for (let view = el.ownerDocument.defaultView; !cover && view.frameElement; view = view.parent) {
+      if (!hitTestable(view.frameElement)) return null;
+      const offset = frameOffset(view.frameElement);
+      x += offset.x;
+      y += offset.y;
+      cover = coverAt(view.frameElement, x, y);
+    }
+    return cover ? describe(cover) : null;
+  };
+  const elements = picked.map(([i, el]) => {
+    const style = el.ownerDocument.defaultView.getComputedStyle(el);
+    const geometry = geometryOf(el);
+    return {
+      index: i,
+      tag: el.tagName.toLowerCase(),
+      element: describe(el),
+      text: String(textOf(el)).replace(/\\s+/g, ' ').trim().slice(0, 1000),
+      context: contextOf(el),
+      geometry: geometry,
+      coveredBy: geometry.hidden ? null : coveredBy(el, geometry),
+      computed: { display: style.display, visibility: style.visibility, position: style.position, opacity: style.opacity, zIndex: style.zIndex }
+    };
+  });
+  return { count: found.length, page: page, elements: elements, crossOriginFrame: top.parent !== top };
+}`;
+/** Distinguishes the object groups of concurrent calls */
+let groupCounter = 0;
+/**
+ * Measure the elements a selector (or cached index) refers to.
+ *
+ * @param cdp - CDP connection
+ * @param params - Selector (and index) or backend node id
+ * @returns Layout report
+ * @throws CommandError (83) no match, (81) index out of range or invalid
+ *   selector, (87) the cached element left the page
+ */
+export async function inspectLayout(cdp, params) {
+    const objectGroup = `bdg-layout-${++groupCounter}`;
+    try {
+        const raw = params.backendNodeId === undefined
+            ? await measureSelector(cdp, params)
+            : await measureNode(cdp, params.backendNodeId, objectGroup);
+        if (!raw.page || raw.elements.length === 0)
+            throw missingElementError(params, raw.count);
+        return buildLayoutResult({ ...raw, page: raw.page }, params);
+    }
+    finally {
+        void cdp
+            .send('Runtime.releaseObjectGroup', { objectGroup })
+            .catch((error) => log.debug(`Object group not released: ${getErrorMessage(error)}`));
+    }
+}
+/**
+ * Measure the matches of a selector (searching open shadow roots and
+ * same-origin frames) in one page evaluation.
+ *
+ * @param cdp - CDP connection
+ * @param params - Selector and optional index
+ * @returns Measurements
+ * @throws CommandError (81) invalid selector, (91) page script failure
+ */
+async function measureSelector(cdp, params) {
+    const found = `(${DEEP_QUERY_JS})(${selectorArgsJS(params.selector)})`;
+    const response = (await cdp.send('Runtime.evaluate', {
+        expression: `(${LAYOUT_JS})(${found}, ${params.index ?? null}, ${LAYOUT_ELEMENT_LIMIT})`,
+        returnByValue: true,
+    }));
+    if (response.exceptionDetails) {
+        throwIfInvalidSelector(response.exceptionDetails, params.selector);
+        const err = operationFailedError('measure the elements', response.exceptionDetails.text);
+        throw new CommandError(err.message, { suggestion: err.suggestion }, EXIT_CODES.SCRIPT_ERROR);
+    }
+    return response.result.value;
+}
+/**
+ * Measure one exact element (from the query cache).
+ *
+ * @param cdp - CDP connection
+ * @param backendNodeId - Backend node id
+ * @param objectGroup - Object group for the handle
+ * @returns Measurements; no elements when the node left the page. An element
+ *   of a cross-origin iframe (from an a11y query) is placed in the top-level
+ *   viewport through the iframe's own measurements.
+ */
+async function measureNode(cdp, backendNodeId, objectGroup) {
+    const resolved = (await cdp
+        .send('DOM.resolveNode', { backendNodeId, objectGroup })
+        .catch((error) => {
+        log.debug(`Node ${backendNodeId} not resolved: ${getErrorMessage(error)}`);
+        return {};
+    }));
+    const objectId = resolved.object?.objectId;
+    if (!objectId)
+        return { count: 0, elements: [] };
+    const response = (await cdp.send('Runtime.callFunctionOn', {
+        objectId,
+        functionDeclaration: `function () { return (${LAYOUT_JS})(this.isConnected ? [this] : [], null, 1); }`,
+        returnByValue: true,
+    }));
+    const raw = response.result.value ?? { count: 0, elements: [] };
+    if (!raw.crossOriginFrame)
+        return raw;
+    const owner = await findFrameOwner(cdp, objectId);
+    if (owner === undefined)
+        return raw;
+    const ownerLayout = await measureNode(cdp, owner, objectGroup);
+    return placeInOwnerFrame(raw, ownerLayout, await measureFrameMapping(cdp, objectId));
+}
+/**
+ * Turn page-side measurements into the layout report: rounded page and
+ * viewport coordinates, viewport position and text preview per element.
+ *
+ * @param raw - Measurements with at least one element
+ * @param params - Request (selector and index)
+ * @returns Layout report
+ */
+export function buildLayoutResult(raw, params) {
+    const omitted = params.index === undefined ? raw.count - raw.elements.length : 0;
+    return {
+        success: true,
+        selector: params.selector,
+        count: raw.count,
+        page: roundPage(raw.page),
+        elements: raw.elements.map((element) => elementLayout(element, raw.page)),
+        ...(omitted > 0 && { omitted }),
+    };
+}
+/**
+ * Page layout with whole pixels.
+ *
+ * @param page - Measured page layout
+ * @returns Rounded page layout
+ */
+function roundPage(page) {
+    return {
+        viewport: { width: Math.round(page.viewport.width), height: Math.round(page.viewport.height) },
+        scroll: { x: Math.round(page.scroll.x), y: Math.round(page.scroll.y) },
+        document: { width: Math.round(page.document.width), height: Math.round(page.document.height) },
+        ...(page.colorScheme && { colorScheme: page.colorScheme }),
+    };
+}
+/**
+ * Layout of one element.
+ *
+ * @param raw - Element measurements
+ * @param page - Page layout (viewport size and scroll position)
+ * @returns Element layout; `coveredBy` only for elements that are in view
+ */
+function elementLayout(raw, page) {
+    const { rect } = raw.geometry;
+    const placement = classifyViewportPosition(raw.geometry, page.viewport);
+    const inView = placement.inViewport === 'visible' || placement.inViewport === 'partly';
+    const text = textPreview(raw.text);
+    return {
+        index: raw.index,
+        tag: raw.tag,
+        element: raw.element,
+        ...(text && { text }),
+        ...(raw.context && { context: raw.context }),
+        bounds: {
+            x: Math.round(rect.x + page.scroll.x),
+            y: Math.round(rect.y + page.scroll.y),
+            width: Math.round(rect.width),
+            height: Math.round(rect.height),
+        },
+        viewport: { x: Math.round(rect.x), y: Math.round(rect.y) },
+        ...placement,
+        ...(inView && raw.coveredBy && { coveredBy: raw.coveredBy }),
+        ...(raw.geometry.invisible && { invisible: raw.geometry.invisible }),
+        ...(raw.geometry.inert && { inert: true }),
+        computed: raw.computed,
+    };
+}
+//# sourceMappingURL=layout.js.map