browser-debugger-cli 0.8.0 → 0.9.0

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

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

@@ -0,0 +1,66 @@
+/**
+ * Page-side functions of `bdg dom listeners`: what only the page can tell
+ * about an element's listeners (handler names and identities, React root
+ * containers, the handlers behind jQuery's dispatcher, React's `on…` props
+ * of the element and its ancestors, the element's iframe).
+ *
+ * Each piece is a function expression in a string, combined into
+ * {@link ELEMENT_INFO_JS}; every lookup of page globals is guarded, so a
+ * page with odd globals (a throwing `jQuery` getter) only loses that detail.
+ */
+/** Most jQuery handlers resolved per call; the rest keep jQuery's dispatcher */
+export declare const MAX_JQUERY_HANDLERS = 50;
+/** Most React prop handlers resolved per call; the rest are counted */
+export declare const MAX_REACT_HANDLERS = 50;
+/**
+ * Page function, called on the element with the listeners (position in the
+ * chain and event type of each), the requested event types (null for all;
+ * React props are filtered before the limit), then the chain's objects, then each
+ * listener's handler, then the function each handler calls (a bound
+ * function's target, else null).
+ *
+ * Returns `[info, ...jQueryHandlers, ...reactHandlers]`. `info` has the
+ * iframe element holding the element's document (`frame`), a framework
+ * label per chain entry (`roots`), per listener the handler's name, the
+ * identity and name of the function it calls (equal identities are the same
+ * function object) and, for jQuery's dispatcher, the jQuery handlers that
+ * run for the element; then the React `on…` props that run for the
+ * element's events (`react`, see {@link REACT_HANDLERS_JS}). Their functions follow `info` in the same order.
+ * After {@link MAX_JQUERY_HANDLERS}, dispatchers stay unresolved and are
+ * counted in `jquerySkipped`; after {@link MAX_REACT_HANDLERS}, React props
+ * are counted in `reactSkipped`.
+ */
+export declare const ELEMENT_INFO_JS: string;
+/** What {@link ELEMENT_INFO_JS} reports, by value */
+export interface ElementInfo {
+    frame: string | null;
+    roots: Array<string | null>;
+    listeners: Array<{
+        name: string | null;
+        identity: number | null;
+        targetName: string | null;
+        jquery?: Array<{
+            type: string;
+            selector: string | null;
+            name: string;
+        }>;
+    }>;
+    /** jQuery handlers left unresolved (over the limit) */
+    jquerySkipped: number;
+    /** React `on…` props that run for the element's events, nearest first */
+    react: Array<{
+        /** Position of the element the prop is on in the chain (0 = the inspected element); null outside it (a portal's React parent) */
+        position: number | null;
+        /** Description of that element when it is outside the chain */
+        node?: string;
+        /** Prop name, e.g. `onClickCapture` */
+        prop: string;
+        /** DOM event type, e.g. `click` */
+        type: string;
+        capture: boolean;
+        name: string;
+    }>;
+    /** React props left unresolved (over the limit) */
+    reactSkipped: number;
+}
+//# sourceMappingURL=listenerPageScripts.d.ts.map

package/dist/runtime/dom/listenerPageScripts.js

@@ -0,0 +1,279 @@
+/**
+ * Page-side functions of `bdg dom listeners`: what only the page can tell
+ * about an element's listeners (handler names and identities, React root
+ * containers, the handlers behind jQuery's dispatcher, React's `on…` props
+ * of the element and its ancestors, the element's iframe).
+ *
+ * Each piece is a function expression in a string, combined into
+ * {@link ELEMENT_INFO_JS}; every lookup of page globals is guarded, so a
+ * page with odd globals (a throwing `jQuery` getter) only loses that detail.
+ */
+/** Most jQuery handlers resolved per call; the rest keep jQuery's dispatcher */
+export const MAX_JQUERY_HANDLERS = 50;
+/** Most React prop handlers resolved per call; the rest are counted */
+export const MAX_REACT_HANDLERS = 50;
+/** `(element, view) => string | null`: the iframe element holding the element's document */
+const FRAME_OF_JS = `(element, view) => {
+  try {
+    const owner = view && view.frameElement;
+    return owner ? owner.tagName.toLowerCase() + (owner.id ? '#' + owner.id : '') : null;
+  } catch (e) { return null; }
+}`;
+/** `(node) => boolean`: whether the node is a React root container */
+const REACT_ROOT_JS = `(node) => {
+  try {
+    return !!node && node.nodeType === 1 &&
+      ('_reactRootContainer' in node || Object.keys(node).some((key) => key.startsWith('__reactContainer$')));
+  } catch (e) { return false; }
+}`;
+/** `(view) => jQuery | undefined`: the page's jQuery, when it has one */
+const JQUERY_OF_JS = `(view) => {
+  try {
+    if (!view) return undefined;
+    return [view.jQuery, view.$].find((c) => c && typeof c._data === 'function');
+  } catch (e) { return undefined; }
+}`;
+/**
+ * `(jq, element, node, type, handler) => handleObj[] | null`: the jQuery
+ * handlers that run for `element` when `handler` is jQuery's dispatcher on
+ * `node` (delegates only when the element, or an element between it and
+ * `node`, matches their selector); null when it is not the dispatcher.
+ */
+const JQUERY_HANDLERS_JS = `(jq, element, node, type, handler) => {
+  try {
+    if (typeof handler !== 'function') return null;
+    const data = jq._data(node);
+    if (!data || data.handle !== handler || !data.events) return null;
+    const find = jq.find;
+    const matches = (el, selector) => {
+      try {
+        return find && typeof find.matchesSelector === 'function' ? find.matchesSelector(el, selector) : el.matches(selector);
+      } catch (e) { return false; }
+    };
+    const delegatedTo = (selector) => {
+      for (let el = element; el && el !== node; el = el.parentNode) {
+        if (el.nodeType === 1 && matches(el, selector)) return true;
+      }
+      return false;
+    };
+    return Array.from(data.events[type] || []).filter((h) => !h.selector || delegatedTo(h.selector));
+  } catch (e) { return null; }
+}`;
+/**
+ * `(object, key) => value`: an own data property, read without running a
+ * getter the page may have defined (undefined for accessors and on errors).
+ */
+const OWN_VALUE_JS = `(object, key) => {
+  try {
+    const descriptor = object ? Object.getOwnPropertyDescriptor(object, key) : undefined;
+    return descriptor ? descriptor.value : undefined;
+  } catch (e) { return undefined; }
+}`;
+/**
+ * `(node, prefixes) => value`: the value of the node's own key starting with
+ * one of `prefixes` (React's keys end in a random suffix).
+ */
+const REACT_KEY_JS = `(node, prefixes) => {
+  try {
+    const key = Object.keys(node).find((k) => prefixes.some((prefix) => k.startsWith(prefix)));
+    return key === undefined ? undefined : (${OWN_VALUE_JS})(node, key);
+  } catch (e) { return undefined; }
+}`;
+/** `(node) => fiber | undefined`: React's fiber of a DOM element */
+const REACT_FIBER_JS = `(node) => (${REACT_KEY_JS})(node, ['__reactFiber$', '__reactInternalInstance$'])`;
+/**
+ * `(node) => object | null`: the props React rendered on a DOM element:
+ * `__reactProps$…` (React 17-19), `__reactEventHandlers$…` (React 16), else
+ * the `memoizedProps` of its fiber.
+ */
+const REACT_PROPS_JS = `(node) => {
+  if (!node || node.nodeType !== 1) return null;
+  const props = (${REACT_KEY_JS})(node, ['__reactProps$', '__reactEventHandlers$']);
+  if (props && typeof props === 'object') return props;
+  const memoized = (${OWN_VALUE_JS})((${REACT_FIBER_JS})(node), 'memoizedProps');
+  return memoized && typeof memoized === 'object' ? memoized : null;
+}`;
+/** Most fibers walked up from the element (guards against cycles) */
+const MAX_FIBER_STEPS = 1000;
+/**
+ * `(element, nodes) => Array<{ node, position }>`: the DOM elements whose
+ * React props run for events on the element, nearest first. With a fiber,
+ * the host components on its `.return` path (so a portal's React parents
+ * count and DOM parents outside the React path don't); `position` is the
+ * node's place in the chain, null outside it. Without one, the chain's elements.
+ */
+const REACT_HOSTS_JS = `(element, nodes) => {
+  const own = ${OWN_VALUE_JS};
+  let fiber = (${REACT_FIBER_JS})(element);
+  if (!fiber) return nodes.flatMap((node, position) => (node && node.nodeType === 1 ? [{ node, position }] : []));
+  const hosts = [];
+  const seen = new Set();
+  for (let step = 0; fiber && typeof fiber === 'object' && !seen.has(fiber) && step < ${MAX_FIBER_STEPS}; step++) {
+    seen.add(fiber);
+    const node = own(fiber, 'stateNode');
+    if (typeof own(fiber, 'type') === 'string' && node && node.nodeType === 1) {
+      const position = nodes.indexOf(node);
+      hosts.push({ node, position: position === -1 ? null : position });
+    }
+    fiber = own(fiber, 'return');
+  }
+  return hosts;
+}`;
+/** `(node) => string`: CDP-like description of an element, e.g. `div#app.card` */
+const DESCRIBE_NODE_JS = `(node) => {
+  try {
+    const classes = Array.from(node.classList || []).map((c) => '.' + c).join('');
+    return String(node.localName || 'element') + (node.id ? '#' + node.id : '') + classes;
+  } catch (e) { return 'element'; }
+}`;
+/**
+ * `(props) => Array<{ prop, handler, name }>`: the event handler props
+ * (`onClick`, `onKeyDownCapture`) among React props, read without
+ * running getters.
+ */
+const REACT_HANDLER_PROPS_JS = `(props) => {
+  const own = ${OWN_VALUE_JS};
+  try {
+    return Object.keys(props).filter((prop) => /^on[A-Z]/.test(prop)).flatMap((prop) => {
+      const handler = own(props, prop);
+      if (typeof handler !== 'function') return [];
+      const name = own(handler, 'name');
+      return [{ prop, handler, name: typeof name === 'string' ? name : '' }];
+    });
+  } catch (e) { return []; }
+}`;
+/**
+ * `(prop) => { type, capture }`: the DOM event type and phase of a React
+ * handler prop: `onClick` → click, `onClickCapture` → click in the capture
+ * phase, `onDoubleClick` → dblclick, `onFocus`/`onBlur` → focusin/focusout
+ * (the events React listens for), `onGotPointerCapture` → gotpointercapture
+ * (and `onGotPointerCaptureCapture` its capture phase).
+ */
+const REACT_EVENT_TYPE_JS = `(prop) => {
+  const base = prop.slice(2);
+  const capture = base.endsWith('Capture') && !/^(?:Got|Lost)PointerCapture$/.test(base);
+  const name = (capture ? base.slice(0, -7) : base).toLowerCase();
+  const types = { doubleclick: 'dblclick', focus: 'focusin', blur: 'focusout' };
+  return { type: types[name] || name, capture };
+}`;
+/**
+ * Event types React does not bubble to parents (their bubble-phase props on
+ * ancestors never run for the element): enter/leave, scroll (React 17+),
+ * and the events React listens for on the element itself (media, load, …).
+ */
+const REACT_NON_BUBBLING_TYPES = [
+    'mouseenter',
+    'mouseleave',
+    'pointerenter',
+    'pointerleave',
+    'scroll',
+    'scrollend',
+    'load',
+    'error',
+    'abort',
+    'cancel',
+    'close',
+    'invalid',
+    'toggle',
+    'canplay',
+    'canplaythrough',
+    'durationchange',
+    'emptied',
+    'encrypted',
+    'ended',
+    'loadeddata',
+    'loadedmetadata',
+    'loadstart',
+    'pause',
+    'play',
+    'playing',
+    'progress',
+    'ratechange',
+    'seeked',
+    'seeking',
+    'stalled',
+    'suspend',
+    'timeupdate',
+    'volumechange',
+    'waiting',
+];
+/**
+ * `(element, nodes, wanted, fns) => { react, reactSkipped }`: the React
+ * `on…` props that run for events on the element (its own, and bubbling or
+ * capture ones of its React parents), limited to the `wanted` types (all
+ * when null); their functions are pushed to `fns`.
+ */
+const REACT_HANDLERS_JS = `(element, nodes, wanted, fns) => {
+  const nonBubbling = new Set(${JSON.stringify(REACT_NON_BUBBLING_TYPES)});
+  const react = [];
+  let reactSkipped = 0;
+  (${REACT_HOSTS_JS})(element, nodes).forEach(({ node, position }, depth) => {
+    const props = (${REACT_PROPS_JS})(node);
+    if (!props) return;
+    for (const { prop, handler, name } of (${REACT_HANDLER_PROPS_JS})(props)) {
+      const { type, capture } = (${REACT_EVENT_TYPE_JS})(prop);
+      if ((wanted && !wanted.has(type)) || (depth > 0 && !capture && nonBubbling.has(type))) continue;
+      if (react.length >= ${MAX_REACT_HANDLERS}) { reactSkipped++; continue; }
+      fns.push(handler);
+      react.push({ position, ...(position === null && { node: (${DESCRIBE_NODE_JS})(node) }), prop, type, capture, name });
+    }
+  });
+  return { react, reactSkipped };
+}`;
+/**
+ * Page function, called on the element with the listeners (position in the
+ * chain and event type of each), the requested event types (null for all;
+ * React props are filtered before the limit), then the chain's objects, then each
+ * listener's handler, then the function each handler calls (a bound
+ * function's target, else null).
+ *
+ * Returns `[info, ...jQueryHandlers, ...reactHandlers]`. `info` has the
+ * iframe element holding the element's document (`frame`), a framework
+ * label per chain entry (`roots`), per listener the handler's name, the
+ * identity and name of the function it calls (equal identities are the same
+ * function object) and, for jQuery's dispatcher, the jQuery handlers that
+ * run for the element; then the React `on…` props that run for the
+ * element's events (`react`, see {@link REACT_HANDLERS_JS}). Their functions follow `info` in the same order.
+ * After {@link MAX_JQUERY_HANDLERS}, dispatchers stay unresolved and are
+ * counted in `jquerySkipped`; after {@link MAX_REACT_HANDLERS}, React props
+ * are counted in `reactSkipped`.
+ */
+export const ELEMENT_INFO_JS = `function (listeners, types, ...rest) {
+  const count = listeners.length;
+  const nodes = rest.slice(0, rest.length - 2 * count);
+  const handlers = rest.slice(nodes.length, nodes.length + count);
+  const targets = rest.slice(nodes.length + count);
+  const view = this.ownerDocument && this.ownerDocument.defaultView;
+  const jq = (${JQUERY_OF_JS})(view);
+  const ids = new Map();
+  const identity = (fn) => {
+    if (typeof fn !== 'function') return null;
+    if (!ids.has(fn)) ids.set(fn, ids.size);
+    return ids.get(fn);
+  };
+  const fns = [];
+  let jquerySkipped = 0;
+  const describeHandler = (h) => {
+    fns.push(h.handler);
+    return { type: h.origType || h.type, selector: h.selector || null,
+      name: typeof h.handler === 'function' ? h.handler.name : '' };
+  };
+  const info = listeners.map((listener, i) => {
+    const handler = handlers[i];
+    const target = typeof targets[i] === 'function' ? targets[i] : handler;
+    const entry = { name: typeof handler === 'function' ? handler.name : null, identity: identity(target),
+      targetName: typeof target === 'function' ? target.name : null };
+    const resolved = jq ? (${JQUERY_HANDLERS_JS})(jq, this, nodes[listener.position], listener.type, handler) : null;
+    if (!resolved) return entry;
+    if (fns.length + resolved.length > ${MAX_JQUERY_HANDLERS}) {
+      jquerySkipped += resolved.length;
+      return entry;
+    }
+    return { ...entry, jquery: resolved.map(describeHandler) };
+  });
+  const roots = nodes.map((node) => ((${REACT_ROOT_JS})(node) ? 'React root' : null));
+  const wanted = types && types.length > 0 ? new Set(types) : null;
+  const { react, reactSkipped } = (${REACT_HANDLERS_JS})(this, nodes, wanted, fns);
+  return [{ frame: (${FRAME_OF_JS})(this, view), roots, listeners: info, jquerySkipped, react, reactSkipped }, ...fns];
+}`;
+//# sourceMappingURL=listenerPageScripts.js.map