browser-debugger-cli 0.9.0 → 0.10.0

package/dist/runtime/dom/actionEffectsScripts.js

@@ -1,7 +1,8 @@
 /**
  * Page scripts behind the "what changed" part of DOM action results: one
  * snapshot before the action ({@link EFFECTS_START_SCRIPT}) and one read after
- * it ({@link EFFECTS_READ_SCRIPT}).
+ * it ({@link EFFECTS_READ_SCRIPT}), plus the snapshot a hover takes of what
+ * is hidden around its target ({@link REVEAL_SNAPSHOT_JS}).
  */
 import { ELEMENT_DESCRIPTION_JS } from './elementInfo.js';
 /** Class or id words that mark an element as a message (flash, toast, field error) */
@@ -23,14 +24,65 @@ const MESSAGE_CANDIDATES = [
     'output',
     ...MESSAGE_WORDS.flatMap((word) => [`[class*="${word}" i]`, `[id*="${word}" i]`]),
 ].join(', ');
+/** Class or id words that mark an element as a loading indicator */
+const LOADER_WORDS = ['loading', 'loader', 'spinner'];
+/** Loading indicators by state or role, plus a cheap prefilter for the class and id words */
+const LOADER_CANDIDATES = [
+    '[aria-busy="true"]',
+    '[role="progressbar"]',
+    ...['load', 'spinner'].flatMap((word) => [`[class*="${word}" i]`, `[id*="${word}" i]`]),
+].join(', ');
+/** Elements anywhere on the page a hover may show (tooltips, menus, popovers) */
+const REVEAL_GLOBAL_CANDIDATES = '[role="tooltip"], [role="menu"], [role="listbox"], [role="dialog"], [popover]';
+/** Elements a hover snapshot looks at, at most */
+const MAX_REVEAL_CANDIDATES = 1500;
+/** Time a hover snapshot may spend before it stops looking (ms) */
+const REVEAL_BUDGET_MS = 8;
+/**
+ * Containers that hold a target and the results of its key presses (a form,
+ * a search box, a dialog); without one, the target's grandparent is used
+ */
+const NEAR_CONTAINERS = 'form, [role="form"], [role="search"], dialog, [role="dialog"], [role="combobox"]';
+/** Added elements reported wherever they are: popups and messages */
+const POPUP_ROLES = /^(tooltip|menu|listbox|dialog|alert|alertdialog|status)$/;
 /** Messages kept per snapshot (after filtering) */
 const MAX_MESSAGES = 50;
 /** Time a message snapshot may spend before it stops looking (ms) */
 const MESSAGES_BUDGET_MS = 5;
+/** Time the list of shown elements may spend before it stops looking (ms) */
+const SHOWN_BUDGET_MS = 10;
+/** Shown elements a read returns at most */
+const MAX_SHOWN = 10;
+/** Added and removed elements a watch keeps */
+const MAX_TRACKED_NODES = 200;
 /** Longer texts are containers (a page, a form), not messages */
 const MAX_MESSAGE_TEXT = 300;
 /** How long a page keeps watching when no read or stop arrives (ms) */
 const MAX_WATCH_MS = 30000;
+/** Bursts of DOM changes a watch keeps (their times) */
+const MAX_BURSTS = 20;
+/**
+ * Page-side test whether an element is shown: rendered, not aria-hidden,
+ * not `visibility: hidden` and not fully transparent.
+ */
+const SHOWN_JS = `(el) => !el.closest('[aria-hidden="true"]') && el.getClientRects().length > 0 &&
+  (!el.checkVisibility || el.checkVisibility({ visibilityProperty: true, opacityProperty: true }))`;
+/**
+ * Page-side visible text of an element, whitespace collapsed: text in
+ * hidden elements, scripts and styles left out, and parts for which `skip`
+ * says so. Stops a little over {@link MAX_MESSAGE_TEXT} characters.
+ */
+const VISIBLE_TEXT_JS = `(el, skip) => {
+  let text = '';
+  const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+  while (text.length <= ${MAX_MESSAGE_TEXT} && walker.nextNode()) {
+    const parent = walker.currentNode.parentElement;
+    if (!parent || /^(script|style|template|noscript)$/.test(parent.localName) || skip(parent)) continue;
+    if (parent.checkVisibility && !parent.checkVisibility({ visibilityProperty: true, opacityProperty: true })) continue;
+    text += ' ' + walker.currentNode.data;
+  }
+  return text.replace(/\\s+/g, ' ').trim();
+}`;
 /**
  * Page-side test whether an element is part of a message's chrome rather
  * than its text: aria-hidden parts, buttons, and elements whose class or
@@ -62,6 +114,8 @@ const MESSAGES_JS = `(ids) => {
   const deadline = performance.now() + ${MESSAGES_BUDGET_MS};
   const description = ${ELEMENT_DESCRIPTION_JS};
   const chrome = ${MESSAGE_CHROME_JS};
+  const shown = ${SHOWN_JS};
+  const visibleText = ${VISIBLE_TEXT_JS};
   const describe = (el) => {
     const text = description(el);
     const role = el.getAttribute('role');
@@ -71,28 +125,15 @@ const MESSAGES_JS = `(ids) => {
   const named = (el) => !/^(timer|marquee|progressbar)$/.test(el.getAttribute('role') || '') &&
     (el.matches('[role="alert"], [role="status"], [aria-live]:not([aria-live="off"]), output') ||
       word.test(el.getAttribute('class') || '') || word.test(el.id || ''));
-  const shown = (el) => !el.closest('[aria-hidden="true"]') && el.getClientRects().length > 0 &&
-    (!el.checkVisibility || el.checkVisibility({ visibilityProperty: true, opacityProperty: true }));
   const inChrome = (node, el) => {
     for (let n = node; n && n !== el; n = n.parentElement) if (chrome(n)) return true;
     return false;
   };
-  const textOf = (el) => {
-    let text = '';
-    const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
-    while (text.length <= ${MAX_MESSAGE_TEXT} && walker.nextNode()) {
-      const parent = walker.currentNode.parentElement;
-      if (!parent || inChrome(parent, el)) continue;
-      if (parent.checkVisibility && !parent.checkVisibility({ visibilityProperty: true, opacityProperty: true })) continue;
-      text += ' ' + walker.currentNode.data;
-    }
-    return text.replace(/\\s+/g, ' ').trim();
-  };
   const found = [];
   for (const el of document.querySelectorAll(${JSON.stringify(MESSAGE_CANDIDATES)})) {
     if (found.length >= ${MAX_MESSAGES} || performance.now() > deadline) break;
     if (!named(el) || !shown(el)) continue;
-    const text = textOf(el);
+    const text = visibleText(el, (node) => inChrome(node, el));
     if (text !== '' && text.length <= ${MAX_MESSAGE_TEXT}) found.push({ el: el, text: text });
   }
   return found
@@ -106,6 +147,102 @@ const MESSAGES_JS = `(ids) => {
       return { id: id, text: m.text, element: describe(m.el) };
     });
 }`;
+/**
+ * Page-side list of the loading indicators shown: elements with
+ * `aria-busy="true"`, a progressbar role, or a class or id word from
+ * {@link LOADER_WORDS} (`is-loading`, `spinner`; not `lazyloading`).
+ */
+const LOADERS_JS = `() => {
+  const shown = ${SHOWN_JS};
+  const word = /\\b(${LOADER_WORDS.join('|')})\\b/i;
+  const loader = (el) => el.getAttribute('aria-busy') === 'true' || el.getAttribute('role') === 'progressbar' ||
+    word.test(el.getAttribute('class') || '') || word.test(el.id || '');
+  return Array.from(document.querySelectorAll(${JSON.stringify(LOADER_CANDIDATES)})).filter((el) => loader(el) && shown(el));
+}`;
+/**
+ * Page-side snapshot a hover takes right before the mouse moves (called by
+ * the click script with the hovered element): the elements around it (its
+ * parent and everything in it) and the tooltips, menus, listboxes, dialogs
+ * and popovers anywhere on the page that are hidden, at most
+ * {@link MAX_REVEAL_CANDIDATES} looked at within {@link REVEAL_BUDGET_MS}.
+ * They are kept by identity in the action's watch, so its read can tell
+ * which of them the hover revealed, also through CSS `:hover` rules that
+ * change no DOM, and elements moving in the page can't pass for revealed
+ * ones. Does nothing without a running watch (another frame).
+ */
+export const REVEAL_SNAPSHOT_JS = `(el) => {
+  const state = window.__bdgEffects;
+  if (!state || state.stopped) return;
+  const deadline = performance.now() + ${REVEAL_BUDGET_MS};
+  const shown = ${SHOWN_JS};
+  const parent = el.parentElement;
+  const scope = parent && !/^(body|html)$/.test(parent.localName) ? parent : el;
+  const hidden = [];
+  let looked = 0;
+  const room = () => looked < ${MAX_REVEAL_CANDIDATES} && performance.now() <= deadline;
+  const look = (candidate) => {
+    looked++;
+    if (!shown(candidate)) hidden.push(candidate);
+  };
+  for (const candidate of document.querySelectorAll(${JSON.stringify(REVEAL_GLOBAL_CANDIDATES)})) {
+    if (!room()) break;
+    look(candidate);
+  }
+  const walker = document.createTreeWalker(scope, NodeFilter.SHOW_ELEMENT);
+  for (let node = scope; node && room(); node = walker.nextNode()) look(node);
+  state.reveal = { target: el, hidden: hidden };
+}`;
+/**
+ * Page-side container whose added elements count as an action's result:
+ * the target's form, search box, dialog or combobox, else its grandparent
+ * (its parent when the grandparent is the body).
+ */
+const NEAR_SCOPE_JS = `(target) => {
+  const container = target.closest(${JSON.stringify(NEAR_CONTAINERS)});
+  if (container) return container;
+  const parent = target.parentElement || target;
+  const grandparent = parent.parentElement;
+  return grandparent && !/^(body|html)$/.test(grandparent.localName) ? grandparent : parent;
+}`;
+/**
+ * Page-side list of the elements an action showed: elements added during
+ * the watch inside the target's container ({@link NEAR_SCOPE_JS}) or, anywhere,
+ * popups and messages (tooltip, menu, listbox, dialog, alert and status
+ * roles, `aria-live`, message-like classes), plus, after a hover, the
+ * elements hidden before it that are shown now ({@link REVEAL_SNAPSHOT_JS}).
+ * Background widgets elsewhere on the page do not count. Only shown ones
+ * with visible text count, the outermost of nested ones, and not those
+ * whose text a removed element had (a re-render). At most
+ * {@link MAX_SHOWN}, within {@link SHOWN_BUDGET_MS}.
+ */
+export const SHOWN_ELEMENTS_JS = `(state) => {
+  const deadline = performance.now() + ${SHOWN_BUDGET_MS};
+  const describe = ${ELEMENT_DESCRIPTION_JS};
+  const shown = ${SHOWN_JS};
+  const visibleText = ${VISIBLE_TEXT_JS};
+  const word = /\\b(${MESSAGE_WORDS.join('|')})\\b/i;
+  const target = state.reveal ? state.reveal.target : state.keyTarget;
+  const scope = target && target.isConnected ? (${NEAR_SCOPE_JS})(target) : null;
+  const popup = (el) => ${POPUP_ROLES}.test(el.getAttribute('role') || '') || el.hasAttribute('popover') ||
+    (el.hasAttribute('aria-live') && el.getAttribute('aria-live') !== 'off') ||
+    word.test(el.getAttribute('class') || '') || word.test(el.id || '');
+  const near = (el) => (scope !== null && scope.contains(el)) || popup(el);
+  const contentOf = (node) => (node.textContent || '').replace(/\\s+/g, ' ').trim();
+  const removed = new Set(state.removed.map(contentOf));
+  const candidates = new Set(state.added.filter((node) => node.isConnected && near(node)));
+  if (state.reveal) for (const el of state.reveal.hidden) if (el.isConnected) candidates.add(el);
+  const found = [];
+  for (const el of candidates) {
+    if (performance.now() > deadline) break;
+    if (!shown(el) || removed.has(contentOf(el))) continue;
+    const text = visibleText(el, () => false);
+    if (text !== '') found.push({ el: el, text: text });
+  }
+  return found
+    .filter((m) => !found.some((other) => other !== m && other.el.contains(m.el)))
+    .slice(0, ${MAX_SHOWN})
+    .map((m) => ({ text: m.text, element: describe(m.el) }));
+}`;
 /**
  * Page-side test whether a mutation is only focus/hover churn: a class
  * change on an element the action's events hit (`targets`) that only adds
@@ -119,6 +256,18 @@ export const CHURN_ONLY_JS = `(record, targets) => {
   const changed = [...before].filter((c) => !after.has(c)).concat([...after].filter((c) => !before.has(c)));
   return changed.every((c) => /focus|hover/i.test(c));
 }`;
+/**
+ * Page-side test whether a mutation changes the page's structure or state
+ * rather than only animating it: elements added or removed, or an attribute
+ * other than `style` changed. Text-only changes (clocks, counters) and style
+ * changes (script-driven animations) do not count.
+ */
+export const STRUCTURAL_CHANGE_JS = `(record) => {
+  if (record.type === 'attributes') return record.attributeName !== 'style';
+  if (record.type !== 'childList') return false;
+  const element = (node) => node.nodeType === 1;
+  return Array.from(record.addedNodes).some(element) || Array.from(record.removedNodes).some(element);
+}`;
 /**
  * Page-side reason why "no effect" can't be claimed even without DOM
  * changes, or undefined: `clipboard` (a copy or cut happened), `no-event`
@@ -148,24 +297,61 @@ export const UNCERTAIN_JS = `(state, active) => {
   if (active && active !== state.focus && !plain(active)) return 'focus';
   return undefined;
 }`;
+/**
+ * Page-side signs, at a read, that the page is still working on the
+ * action's result: how long ago each recent burst of DOM changes was (ms,
+ * newest last), and a loading indicator shown since the start (described).
+ */
+const SETTLE_JS = `(state) => {
+  const now = performance.now();
+  const describe = ${ELEMENT_DESCRIPTION_JS};
+  const loader = (${LOADERS_JS})().find((el) => !state.loaders.has(el));
+  return {
+    burstAges: state.bursts.map((time) => Math.round(now - time)),
+    loading: loader ? describe(loader) : null
+  };
+}`;
 /**
  * Snapshot before an action, left in `window.__bdgEffects`: the messages
- * shown, and a MutationObserver (on the document, its open shadow roots and
- * any shadow root attached while watching, which also counts as a change)
- * counting changes other than {@link CHURN_ONLY_JS}. Capture listeners
- * record which elements the action's events reached, copy/cut events, and
- * the scroll position at the first press (a click scrolls its target into
- * view first). The watch stops itself after {@link MAX_WATCH_MS}, so a
- * snapshot that ran late (after a navigation, with nobody reading it)
- * leaves nothing behind. Evaluates to the URL and the messages.
+ * and loading indicators shown, and a MutationObserver (on the document,
+ * its open shadow roots and any shadow root attached while watching, which
+ * also counts as a change) counting changes other than
+ * {@link CHURN_ONLY_JS}, keeping the elements added and removed and the
+ * times of {@link STRUCTURAL_CHANGE_JS} bursts. Capture listeners record
+ * which elements the action's events reached, the first key press's target,
+ * copy/cut events and the scroll position at the first press (a click
+ * scrolls its target into view first). The watch stops itself after
+ * {@link MAX_WATCH_MS}, so a snapshot that ran late (after a navigation,
+ * with nobody reading it) leaves nothing behind. Evaluates to the URL and
+ * the messages.
  */
 export const EFFECTS_START_SCRIPT = `(() => {
   if (window.__bdgEffects) window.__bdgEffects.stop();
   const churnOnly = ${CHURN_ONLY_JS};
+  const structural = ${STRUCTURAL_CHANGE_JS};
   const ids = { map: new WeakMap(), next: 1 };
-  const state = { ids: ids, changes: 0, targets: new Set(), path: new Set(), focus: document.activeElement, pressScroll: null, copied: false, stopped: false };
+  const state = {
+    ids: ids, changes: 0, targets: new Set(), path: new Set(), focus: document.activeElement,
+    pressScroll: null, copied: false, stopped: false, added: [], removed: [], bursts: [],
+    keyTarget: null, loaders: new Set((${LOADERS_JS})())
+  };
+  const keep = (list, nodes) => {
+    for (const node of nodes) if (node.nodeType === 1 && list.length < ${MAX_TRACKED_NODES}) list.push(node);
+  };
   const count = (records) => {
-    for (const record of records) if (!churnOnly(record, state.targets)) state.changes++;
+    let burst = false;
+    for (const record of records) {
+      if (churnOnly(record, state.targets)) continue;
+      state.changes++;
+      burst = burst || structural(record);
+      if (record.type === 'childList') {
+        keep(state.added, record.addedNodes);
+        keep(state.removed, record.removedNodes);
+      }
+    }
+    if (!burst) return;
+    state.bursts.push(performance.now());
+    if (state.bursts.length > ${MAX_BURSTS}) state.bursts.shift();
   };
   const observer = new MutationObserver(count);
   const options = { subtree: true, childList: true, characterData: true, attributes: true, attributeOldValue: true };
@@ -188,6 +374,7 @@ export const EFFECTS_START_SCRIPT = `(() => {
     if (event.type === 'copy' || event.type === 'cut') state.copied = true;
     const path = event.composedPath().filter((node) => node.nodeType === 1);
     if (path[0]) state.targets.add(path[0]);
+    if (path[0] && !state.keyTarget && event.type === 'keydown') state.keyTarget = path[0];
     path.forEach((node) => state.path.add(node));
     if (!state.pressScroll && pressTypes.includes(event.type)) state.pressScroll = [scrollX, scrollY];
   };
@@ -206,13 +393,16 @@ export const EFFECTS_START_SCRIPT = `(() => {
   return { href: location.href, messages: (${MESSAGES_JS})(ids) };
 })()`;
 /**
- * Read after an action (call with `true` to also stop watching): the URL,
- * the messages shown and, when the snapshot is still there (same document),
- * the number of changes counted (plus one when the page scrolled after the
- * press) and why "no effect" could not be claimed ({@link UNCERTAIN_JS}).
- * `fresh` means a new document (everything shown is new).
+ * Read after an action, called with `(stop, shown)`: `stop` also stops
+ * watching, `shown` lists the elements the action showed
+ * ({@link SHOWN_ELEMENTS_JS}). Returns the URL, the messages shown and,
+ * when the snapshot is still there (same document), the number of changes
+ * counted (plus one when the page scrolled after the press), why "no
+ * effect" could not be claimed ({@link UNCERTAIN_JS}) and whether the page
+ * is still working ({@link SETTLE_JS}). `fresh` means a new document
+ * (everything shown is new).
  */
-export const EFFECTS_READ_SCRIPT = `((stop) => {
+export const EFFECTS_READ_SCRIPT = `((stop, shown) => {
   const state = window.__bdgEffects;
   if (!state) return { href: location.href, fresh: true, messages: (${MESSAGES_JS})({ map: new WeakMap(), next: 1 }) };
   if (!state.stopped) state.flush();
@@ -226,7 +416,9 @@ export const EFFECTS_READ_SCRIPT = `((stop) => {
     fresh: false,
     changes: state.changes + (scrolled ? 1 : 0),
     uncertain: (${UNCERTAIN_JS})(state, document.activeElement),
-    messages: (${MESSAGES_JS})(state.ids)
+    messages: (${MESSAGES_JS})(state.ids),
+    settle: (${SETTLE_JS})(state),
+    shown: shown ? (${SHOWN_ELEMENTS_JS})(state) : undefined
   };
 })`;
 /** Stops the watch {@link EFFECTS_START_SCRIPT} left (when no read stopped it) */

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

@@ -26,6 +26,32 @@ export declare const WITHOUT_DECORATIONS_JS = "(el, text) => {\n  if (!text || t
  * 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 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  if (!rendered(el)) {\n    const boxless = el.ownerDocument.defaultView.getComputedStyle(el).display === 'contents';\n    return boxless ? withoutDecorations(el, full ? all : all.slice(0, 2000)) : '';\n  }\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";
+/**
+ * Page-side check whether a form control holds a secret whose value must
+ * never leave the page: a password field (live type or type attribute), a
+ * field shown masked by CSS (`-webkit-text-security` other than `none`),
+ * one whose `autocomplete` names a password, a payment card (`cc-*`) or a
+ * one-time code, or a field named like a password, one-time code or card code
+ * (`password`, `passwd`, `pwd`, `passcode`, `otp`, `cvv`, `cvc`), which
+ * covers a password field switched to text by a "show password" button.
+ */
+export declare const SENSITIVE_FIELD_JS = "(el) => {\n  const autocomplete = el.getAttribute('autocomplete') || '';\n  if (/(^|\\s)(cc-[a-z-]+|one-time-code|current-password|new-password)(\\s|$)/i.test(autocomplete)) return true;\n  if (el.type === 'password' || /^password$/i.test(el.getAttribute('type') || '')) return true;\n  const names = [el.getAttribute('name'), el.id, autocomplete].join(' ');\n  if (/passw|passwd|pwd|passcode|(^|[^a-z])otp([^a-z]|$)|cvv|cvc/i.test(names)) return true;\n  try {\n    const security = el.ownerDocument.defaultView.getComputedStyle(el).getPropertyValue('-webkit-text-security');\n    return Boolean(security) && security !== 'none';\n  } catch (e) {\n    return false;\n  }\n}";
+/**
+ * Page-side live state of a form control, which its attributes do not show:
+ * the type and current value of an `<input>` (for checkboxes and radios
+ * `checked` and their `value` attribute, not the default "on"), the value of
+ * a `<textarea>`, the labels of a `<select>`'s selected options and the type
+ * of a `<button>` in a form (`submit` when it has none; outside a form only
+ * a type attribute is shown). Empty for other elements.
+ *
+ * Secrets never leave the page: a hidden input's value is left out, and the
+ * value (or selected option) of a sensitive field ({@link SENSITIVE_FIELD_JS})
+ * is replaced by {@link MASKED_VALUE}, whatever its length, with
+ * `sensitive: true`.
+ */
+export declare const ELEMENT_STATE_JS = "(el) => {\n  const isSensitive = (el) => {\n  const autocomplete = el.getAttribute('autocomplete') || '';\n  if (/(^|\\s)(cc-[a-z-]+|one-time-code|current-password|new-password)(\\s|$)/i.test(autocomplete)) return true;\n  if (el.type === 'password' || /^password$/i.test(el.getAttribute('type') || '')) return true;\n  const names = [el.getAttribute('name'), el.id, autocomplete].join(' ');\n  if (/passw|passwd|pwd|passcode|(^|[^a-z])otp([^a-z]|$)|cvv|cvc/i.test(names)) return true;\n  try {\n    const security = el.ownerDocument.defaultView.getComputedStyle(el).getPropertyValue('-webkit-text-security');\n    return Boolean(security) && security !== 'none';\n  } catch (e) {\n    return false;\n  }\n};\n  const mask = (value) => (value ? '\u2022\u2022\u2022\u2022' : '');\n  const guarded = (state) => {\n    if (!isSensitive(el)) return state;\n    const result = { ...state, sensitive: true };\n    if ('value' in result) result.value = mask(result.value);\n    if ('selected' in result) result.selected = mask(result.selected);\n    return result;\n  };\n  switch (el.localName) {\n    case 'input':\n      if (el.type === 'hidden') return { type: 'hidden' };\n      return guarded(\n        /^(checkbox|radio)$/.test(el.type)\n          ? { type: el.type, checked: el.checked, value: el.getAttribute('value') || '' }\n          : { type: el.type, value: el.value }\n      );\n    case 'textarea':\n      return guarded({ value: el.value });\n    case 'select':\n      return guarded({ selected: Array.from(el.selectedOptions || [], (option) => option.label).join(', ') });\n    case 'button':\n      return el.form ? { type: el.type } : {};\n    default:\n      return {};\n  }\n}";
 /**
  * Page-side short description of an element: tag, id and up to two classes,
  * e.g. `button#save.primary.large`.

package/dist/runtime/dom/elementInfo.js

@@ -66,6 +66,71 @@ export const ELEMENT_TEXT_JS = `(el, full) => {
   }
   return withoutDecorations(el, start);
 }`;
+/** Shown instead of a secret field value (the same for every length) */
+export const MASKED_VALUE = '••••';
+/**
+ * Page-side check whether a form control holds a secret whose value must
+ * never leave the page: a password field (live type or type attribute), a
+ * field shown masked by CSS (`-webkit-text-security` other than `none`),
+ * one whose `autocomplete` names a password, a payment card (`cc-*`) or a
+ * one-time code, or a field named like a password, one-time code or card code
+ * (`password`, `passwd`, `pwd`, `passcode`, `otp`, `cvv`, `cvc`), which
+ * covers a password field switched to text by a "show password" button.
+ */
+export const SENSITIVE_FIELD_JS = `(el) => {
+  const autocomplete = el.getAttribute('autocomplete') || '';
+  if (/(^|\\s)(cc-[a-z-]+|one-time-code|current-password|new-password)(\\s|$)/i.test(autocomplete)) return true;
+  if (el.type === 'password' || /^password$/i.test(el.getAttribute('type') || '')) return true;
+  const names = [el.getAttribute('name'), el.id, autocomplete].join(' ');
+  if (/passw|passwd|pwd|passcode|(^|[^a-z])otp([^a-z]|$)|cvv|cvc/i.test(names)) return true;
+  try {
+    const security = el.ownerDocument.defaultView.getComputedStyle(el).getPropertyValue('-webkit-text-security');
+    return Boolean(security) && security !== 'none';
+  } catch (e) {
+    return false;
+  }
+}`;
+/**
+ * Page-side live state of a form control, which its attributes do not show:
+ * the type and current value of an `<input>` (for checkboxes and radios
+ * `checked` and their `value` attribute, not the default "on"), the value of
+ * a `<textarea>`, the labels of a `<select>`'s selected options and the type
+ * of a `<button>` in a form (`submit` when it has none; outside a form only
+ * a type attribute is shown). Empty for other elements.
+ *
+ * Secrets never leave the page: a hidden input's value is left out, and the
+ * value (or selected option) of a sensitive field ({@link SENSITIVE_FIELD_JS})
+ * is replaced by {@link MASKED_VALUE}, whatever its length, with
+ * `sensitive: true`.
+ */
+export const ELEMENT_STATE_JS = `(el) => {
+  const isSensitive = ${SENSITIVE_FIELD_JS};
+  const mask = (value) => (value ? '${MASKED_VALUE}' : '');
+  const guarded = (state) => {
+    if (!isSensitive(el)) return state;
+    const result = { ...state, sensitive: true };
+    if ('value' in result) result.value = mask(result.value);
+    if ('selected' in result) result.selected = mask(result.selected);
+    return result;
+  };
+  switch (el.localName) {
+    case 'input':
+      if (el.type === 'hidden') return { type: 'hidden' };
+      return guarded(
+        /^(checkbox|radio)$/.test(el.type)
+          ? { type: el.type, checked: el.checked, value: el.getAttribute('value') || '' }
+          : { type: el.type, value: el.value }
+      );
+    case 'textarea':
+      return guarded({ value: el.value });
+    case 'select':
+      return guarded({ selected: Array.from(el.selectedOptions || [], (option) => option.label).join(', ') });
+    case 'button':
+      return el.form ? { type: el.type } : {};
+    default:
+      return {};
+  }
+}`;
 /**
  * Page-side short description of an element: tag, id and up to two classes,
  * e.g. `button#save.primary.large`.

package/dist/runtime/dom/eventListeners.js

@@ -249,7 +249,13 @@ async function pageDetails(cdp, chain, found, objectGroup, types) {
             objectId: chain[0]?.objectId,
             functionDeclaration: ELEMENT_INFO_JS,
             arguments: [
-                { value: listeners.map(({ position, listener }) => ({ position, type: listener.type })) },
+                {
+                    value: listeners.map(({ position, listener }) => ({
+                        position,
+                        type: listener.type,
+                        capture: listener.useCapture,
+                    })),
+                },
                 { value: types ?? null },
                 ...chain.map((entry) => ({ objectId: entry.objectId })),
                 ...handlers.map(objectArgument),
@@ -346,13 +352,13 @@ const UNKNOWN_SOURCE = { scriptId: '0', lineNumber: 0, columnNumber: 0 };
  * Combine the page's report with the framework handlers' sources.
  *
  * @param info - Page report
- * @param sources - Source and location of each jQuery handler, then each
- *   React prop handler, in report order
+ * @param sources - Source and location of each jQuery or Preact handler,
+ *   then each React prop handler, in report order
  * @returns Details per listener and the React prop handlers
  */
 function toPageDetails(info, sources) {
     let next = 0;
-    const details = info.listeners.map(({ name, identity, targetName, jquery }) => ({
+    const details = info.listeners.map(({ name, identity, targetName, jquery, preact }) => ({
         name: name ?? undefined,
         identity: identity ?? undefined,
         targetName: targetName ?? undefined,
@@ -362,6 +368,10 @@ function toPageDetails(info, sources) {
             name: handler.name,
             ...(sources[next++] ?? UNKNOWN_SOURCE),
         })),
+        preact: preact && {
+            name: preact.name,
+            ...(sources[next++] ?? UNKNOWN_SOURCE),
+        },
     }));
     const react = info.react.map((handler) => ({
         ...handler,

package/dist/runtime/dom/formFillHelpers/fill.d.ts

@@ -20,10 +20,8 @@ export type PointerAction = 'click' | 'double' | 'right' | 'hover';
  */
 export declare function mouseEvents(action: PointerAction, x: number, y: number): Array<Record<string, unknown>>;
 /**
- * Whether the mouse press just dispatched reached the target element.
- *
- * Any doubt (no probe, evaluation failure) counts as reached, so only a
- * press that the page provably never saw is reported.
+ * Whether the mouse press just dispatched reached the target element
+ * (see {@link readPressProbe}).
  *
  * @param cdp - CDP connection
  * @returns False only when the target received no pointerdown/mousedown
@@ -35,5 +33,6 @@ export declare function pressReachedTarget(cdp: CDPConnection): Promise<boolean>
 export declare function clickElement(cdp: CDPConnection, selector: string, options?: {
     index?: number;
     action?: PointerAction;
+    strict?: boolean;
 }): Promise<ClickResult>;
 //# sourceMappingURL=fill.d.ts.map