browser-debugger-cli 0.11.0 → 0.13.0

package/dist/runtime/dom/inspectWhyModel.js

@@ -5,8 +5,8 @@
  * declaration sets all its longhands (listing every declaration it beats on
  * any of them), else one per longhand.
  */
-import { normalizeProperty } from './inspectAllStyles.js';
-import { resolveCascade } from './inspectCascade.js';
+import { collapsedValue, normalizeProperty } from './inspectAllStyles.js';
+import { isInherited, resolveCascade, ruleField, } from './inspectCascade.js';
 import { substituteVariables, unsetVariables, usedVariables, } from './inspectVariables.js';
 /**
  * `--why` for a property.
@@ -16,8 +16,8 @@ import { substituteVariables, unsetVariables, usedVariables, } from './inspectVa
  * @param input - Matched rules, computed style and the label function
  * @returns One entry, or one per longhand when they differ
  */
-export function buildWhy(group, cascade, input) {
-    const whys = group.longhands.map((longhand) => whyOf(longhand, cascade.get(longhand), input));
+export function buildWhy(group, cascade, input, hints = []) {
+    const whys = group.longhands.map((longhand) => whyOf(longhand, cascade.get(longhand), input, hints));
     const [first] = whys;
     if (!first || group.shorthand === undefined)
         return whys;
@@ -25,9 +25,13 @@ export function buildWhy(group, cascade, input) {
     if (!whys.every((why) => JSON.stringify(why.chain[0]) === winner))
         return whys;
     const values = whys.map((why) => why.computed);
-    const computed = values.every((value) => value === first.computed)
+    const joined = values.every((value) => value === first.computed)
         ? first.computed
         : values.join(' ');
+    const fromPage = input.whyComputed
+        ? normalizeProperty(group.shorthand, input.whyComputed)
+        : undefined;
+    const computed = collapsedValue(group.shorthand, input.style) ?? fromPage ?? joined;
     const beaten = whys.flatMap((why) => why.chain.slice(1));
     const overridden = [...new Map(beaten.map((entry) => [JSON.stringify(entry), entry])).values()];
     const chain = [...first.chain.slice(0, 1), ...overridden];
@@ -39,14 +43,14 @@ export function buildWhy(group, cascade, input) {
  * @param property - Longhand
  * @param resolution - Its resolution
  * @param input - Matched rules, computed style and the label function
+ * @param hints - Hints, for a winner that has no effect
  * @returns Why
  */
-function whyOf(property, resolution, input) {
+function whyOf(property, resolution, input, hints) {
     const winner = resolution?.winner;
+    const status = winner?.ancestor !== undefined ? 'inherited' : 'applied';
     const chain = [
-        ...(winner
-            ? [whyEntry(winner, winner.ancestor !== undefined ? 'inherited' : 'applied', input)]
-            : []),
+        ...(winner ? [withNote(whyEntry(winner, status, input), winner, property, hints)] : []),
         ...(resolution?.overridden ?? []).map((d) => whyEntry(d, 'overridden', input)),
     ];
     const variables = winner ? variableSources(winner, input) : [];
@@ -68,7 +72,10 @@ function whyOf(property, resolution, input) {
  * @returns Entry
  */
 function whyEntry(declaration, status, input) {
-    const value = declaration.via ? (declaration.written ?? declaration.value) : declaration.value;
+    const written = declaration.via ? (declaration.written ?? declaration.value) : declaration.value;
+    const value = written === ''
+        ? `${input.style[declaration.property] ?? ''} (set by the browser)`.trim()
+        : written;
     const unset = value.includes('var(') ? unsetVariables(value, input.style) : [];
     const resolved = value.includes('var(') ? resolvedValue(declaration, value, input) : value;
     const { specificity, layer, condition } = declaration.source;
@@ -77,6 +84,7 @@ function whyEntry(declaration, status, input) {
         ...(declaration.via && { via: declaration.via }),
         ...(unset.length > 0 ? { unset } : resolved !== value && { resolved }),
         source: input.label(declaration),
+        ...ruleField(declaration),
         ...(specificity && { specificity }),
         status,
         ...(declaration.important && { important: true }),
@@ -84,6 +92,40 @@ function whyEntry(declaration, status, input) {
         ...(condition && { condition }),
     };
 }
+/**
+ * The winner's entry with why it changes nothing: the hint that says it has
+ * no effect, or what applies instead of an invalid `var()`.
+ *
+ * @param entry - Winner's entry
+ * @param winner - Winning declaration
+ * @param property - Longhand
+ * @param hints - Hints
+ * @returns Entry, with `note` when there is one
+ */
+function withNote(entry, winner, property, hints) {
+    if (entry.unset) {
+        const fallback = isInherited(property) ? 'the inherited value' : 'the initial value';
+        return { ...entry, note: `falls back to ${fallback}` };
+    }
+    const inactive = hints.find((hint) => hint.kind === 'inactive' &&
+        sameDeclaration(hint.declaration, winner) &&
+        (hint.only?.includes(property) ?? true));
+    return inactive ? { ...entry, note: `no effect: ${inactive.reason}` } : entry;
+}
+/**
+ * Whether two longhand declarations come from the same declaration as written.
+ *
+ * @param a - Declaration
+ * @param b - Declaration
+ * @returns True for the same place and property
+ */
+function sameDeclaration(a, b) {
+    return (a.source.kind === b.source.kind &&
+        a.source.styleSheetId === b.source.styleSheetId &&
+        a.source.line === b.source.line &&
+        a.source.column === b.source.column &&
+        (a.via ?? a.property) === (b.via ?? b.property));
+}
 /** How many levels of custom properties set from others are followed */
 const MAX_VARIABLE_DEPTH = 5;
 /**

package/dist/runtime/dom/layout.js

@@ -15,6 +15,7 @@ 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 { evaluateInBdgWorld, resolveNodeInBdgWorld } from '../page/bdgWorld.js';
 import { createLogger } from '../../ui/logging/index.js';
 import { getErrorMessage } from '../../utils/errors.js';
 import { EXIT_CODES } from '../../utils/exitCodes.js';
@@ -81,7 +82,7 @@ const SAME_CLICK_TARGET_JS = `(node, hit) => {
 /**
  * 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
+ * it is painted above it 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
@@ -91,7 +92,12 @@ const SAME_CLICK_TARGET_JS = `(node, hit) => {
  * `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.
+ * (`pointer-events: none`, also through an iframe) get no cover. The cover
+ * named is the first element above that paints there (a sticky header's
+ * background, not the transparent logo on it; inside a shadow host, what its
+ * shadow root paints), else the topmost one, marked transparent; named by
+ * its outermost fixed or sticky ancestor that does not hold the element (the
+ * fixed banner, not a span inside it).
  */
 const LAYOUT_JS = `function (found, index, limit) {
   const geometryOf = ${ELEMENT_GEOMETRY_JS};
@@ -121,13 +127,21 @@ const LAYOUT_JS = `function (found, index, limit) {
     return false;
   };
   const sameTarget = ${SAME_CLICK_TARGET_JS};
+  const paintsAt = (n, x, y) => {
+    if (!paintsNothing(n)) return true;
+    if (!n.shadowRoot) return false;
+    return n.shadowRoot.elementsFromPoint(x, y).some((e) => e !== n && encloses(n, e) && !paintsNothing(e));
+  };
   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 scope = typeof root.elementsFromPoint === 'function' ? root : node.ownerDocument;
+    const stack = scope.elementsFromPoint(x, y);
+    const at = stack.indexOf(node);
+    const above = (at < 0 ? stack.slice(0, 1) : stack.slice(0, at)).filter((hit) =>
+      !encloses(node, hit) && !sameTarget(node, hit) && (at >= 0 || !encloses(hit, node)));
+    if (above.length === 0) return null;
+    const painter = above.find((hit) => paintsAt(hit, x, y));
+    return { element: overlayOf(painter || above[0], node), transparent: !painter };
   };
   const visibleCenter = (el, g) => {
     const bounds = [{ x: 0, y: 0, width: page.viewport.width, height: page.viewport.height }].concat(g.clip ? [g.clip] : []);
@@ -154,7 +168,15 @@ const LAYOUT_JS = `function (found, index, limit) {
     const s = node.ownerDocument.defaultView.getComputedStyle(node);
     const clearColor = (c) => c === 'transparent' || /^rgba\\(.*,\\s*0\\)$/.test(c);
     const ownText = Array.from(node.childNodes).some((n) => n.nodeType === 3 && n.data.trim() !== '');
-    return clearColor(s.backgroundColor) && s.backgroundImage === 'none' && s.boxShadow === 'none' && !ownText;
+    const replaced = /^(img|video|canvas|iframe|embed|object|input|textarea|select)$/.test(node.localName);
+    return !replaced && clearColor(s.backgroundColor) && s.backgroundImage === 'none' && s.boxShadow === 'none' && !ownText;
+  };
+  const overlayOf = (hit, node) => {
+    let overlay = hit;
+    for (let p = hit.parentElement || (hit.parentNode && hit.parentNode.host); p && p !== p.ownerDocument.body && !encloses(p, node); p = p.parentElement || (p.parentNode && p.parentNode.host)) {
+      if (/^(fixed|sticky)$/.test(p.ownerDocument.defaultView.getComputedStyle(p).position)) overlay = p;
+    }
+    return overlay;
   };
   const hitTestable = (node) => node.ownerDocument.defaultView.getComputedStyle(node).pointerEvents !== 'none';
   const coveredBy = (el, g) => {
@@ -170,7 +192,7 @@ const LAYOUT_JS = `function (found, index, limit) {
       y += offset.y;
       cover = coverAt(view.frameElement, x, y);
     }
-    return cover ? { element: describe(cover), transparent: paintsNothing(cover) } : null;
+    return cover ? { element: describe(cover.element), transparent: cover.transparent } : null;
   };
   const elements = picked.map(([i, el]) => {
     const style = el.ownerDocument.defaultView.getComputedStyle(el);
@@ -226,10 +248,10 @@ export async function inspectLayout(cdp, params) {
  */
 async function measureSelector(cdp, params) {
     const found = `(${DEEP_QUERY_JS})(${selectorArgsJS(params.selector)})`;
-    const response = (await cdp.send('Runtime.evaluate', {
+    const response = await evaluateInBdgWorld(cdp, {
         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);
@@ -248,9 +270,7 @@ async function measureSelector(cdp, params) {
  *   viewport through the iframe's own measurements.
  */
 async function measureNode(cdp, backendNodeId, objectGroup) {
-    const resolved = (await cdp
-        .send('DOM.resolveNode', { backendNodeId, objectGroup })
-        .catch((error) => {
+    const resolved = (await resolveNodeInBdgWorld(cdp, { backendNodeId, objectGroup }).catch((error) => {
         log.debug(`Node ${backendNodeId} not resolved: ${getErrorMessage(error)}`);
         return {};
     }));
@@ -305,14 +325,16 @@ function roundPage(page) {
     };
 }
 /**
- * Layout of one element.
+ * Layout of one element. A `display: contents` element (no box of its own)
+ * is placed by the box around its shown children.
  *
  * @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 { content } = raw.geometry;
+    const rect = raw.computed.display === 'contents' && content ? content : raw.geometry.rect;
     const placement = classifyViewportPosition(raw.geometry, page.viewport);
     const inView = placement.inViewport === 'visible' || placement.inViewport === 'partly';
     const text = textPreview(raw.text);
@@ -333,7 +355,9 @@ function elementLayout(raw, page) {
         ...(inView && raw.cover && { coveredBy: raw.cover.element }),
         ...(inView && raw.cover?.transparent && { coverTransparent: true }),
         ...(raw.geometry.invisible && { invisible: raw.geometry.invisible }),
+        ...(raw.geometry.masked && { masked: raw.geometry.masked }),
         ...(raw.geometry.inert && { inert: true }),
+        ...(raw.geometry.fixed && { fixed: true }),
         computed: raw.computed,
     };
 }

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

@@ -18,7 +18,7 @@ import type { FillResult, ClickResult } from '../../ipc/protocol/domTypes.js';
  * whitespace collapsed. A value cut to the field's maxlength sets
  * `truncatedTo`; a password mismatch gives masked values and both lengths.
  */
-export declare const FILL_VALUE_MISMATCH_JS = "(field, expected) => {\n  const type = (field.type || '').toLowerCase();\n  const actual = field.isContentEditable\n    ? (field.textContent || '')\n    : type === 'checkbox' || type === 'radio'\n      ? (field.checked ? 'checked' : 'unchecked')\n      : field.localName === 'select' && field.multiple\n        ? Array.from(field.selectedOptions).map((o) => o.value).join(', ')\n        : String(field.value);\n  const time = (text) => text.trim().replace(' ', 'T').replace(/(\\d\\d:\\d\\d):00(\\.0+)?$/, '$1');\n  const normalize = (text) => {\n    text = String(text);\n    if (field.isContentEditable) return text.replace(/\\s+/g, ' ').trim();\n    if (field.localName === 'textarea') return text.replace(/\\r\\n?/g, '\\n');\n    if (type === 'color') return text.trim().toLowerCase();\n    if (type === 'email') return text.trim();\n    if (type === 'time' || type === 'datetime-local') return time(text);\n    return text;\n  };\n  const numeric = (type === 'number' || type === 'range') && actual.trim() !== '' && String(expected).trim() !== '';\n  const same = numeric ? Number(actual) === Number(expected) : normalize(actual) === normalize(expected);\n  if (same) return undefined;\n  if (type === 'password') {\n    const mask = (text) => (text === '' ? '' : '********');\n    return { expected: mask(expected), actual: mask(actual), expectedLength: expected.length, actualLength: actual.length };\n  }\n  const cut = field.maxLength > 0 && actual.length === field.maxLength && expected.length > actual.length &&\n    expected.startsWith(actual);\n  return cut ? { expected: expected, actual: actual, truncatedTo: actual.length } : { expected: expected, actual: actual };\n}";
+export declare const FILL_VALUE_MISMATCH_JS = "(field, expected) => {\n  const type = (field.type || '').toLowerCase();\n  const actual = field.isContentEditable\n    ? (field.textContent || '')\n    : type === 'checkbox' || type === 'radio'\n      ? (field.checked ? 'checked' : 'unchecked')\n      : field.localName === 'select' && field.multiple\n        ? ((list) => {\n  const items = [];\n  for (let i = 0; i < list.length; i++) items[items.length] = list[i];\n  return items;\n})(field.selectedOptions).map((o) => o.value).join(', ')\n        : String(field.value);\n  const time = (text) => text.trim().replace(' ', 'T').replace(/(\\d\\d:\\d\\d):00(\\.0+)?$/, '$1');\n  const normalize = (text) => {\n    text = String(text);\n    if (field.isContentEditable) return text.replace(/\\s+/g, ' ').trim();\n    if (field.localName === 'textarea') return text.replace(/\\r\\n?/g, '\\n');\n    if (type === 'color') return text.trim().toLowerCase();\n    if (type === 'email') return text.trim();\n    if (type === 'time' || type === 'datetime-local') return time(text);\n    return text;\n  };\n  const numeric = (type === 'number' || type === 'range') && actual.trim() !== '' && String(expected).trim() !== '';\n  const same = numeric ? Number(actual) === Number(expected) : normalize(actual) === normalize(expected);\n  if (same) return undefined;\n  if (type === 'password') {\n    const mask = (text) => (text === '' ? '' : '********');\n    return { expected: mask(expected), actual: mask(actual), expectedLength: expected.length, actualLength: actual.length };\n  }\n  const cut = field.maxLength > 0 && actual.length === field.maxLength && expected.length > actual.length &&\n    expected.startsWith(actual);\n  return cut ? { expected: expected, actual: actual, truncatedTo: actual.length } : { expected: expected, actual: actual };\n}";
 /**
  * Page-side list of the other text-like fields of a field's form (of the
  * document when it has none), with their values: taken before a fill, so
@@ -34,6 +34,20 @@ export declare const FIELD_VALUES_JS = "(field) => {\n  const fields = field.for
  * fillable kind of element. Messages are {@link FILL_REFUSALS}.
  */
 export declare const FILL_REFUSAL_JS: string;
+/**
+ * Page-side: the one text field, select or editable element in an element's
+ * open shadow root (a web component such as `<sl-input>` wrapping a native
+ * input), which `dom fill` fills in its place; null when the element is a
+ * field itself or its shadow root has none or several.
+ */
+export declare const SHADOW_FIELD_JS = "(el) => {\n  if (!el.shadowRoot || /^(input|textarea|select)$/.test(el.localName) || el.isContentEditable) return null;\n  const fields = el.shadowRoot.querySelectorAll('input:not([type=\"hidden\"]), textarea, select, [contenteditable]:not([contenteditable=\"false\"])');\n  return fields.length === 1 ? fields[0] : null;\n}";
+/**
+ * Page-side: fire a bubbling, non-cancelable event of a type on an element,
+ * like `new Event(type, { bubbles: true })`. The event comes from
+ * `document.createEvent`, which keeps working on pages that replace the
+ * `Event` constructor (MooTools 1.2 does).
+ */
+export declare const FIRE_EVENT_JS = "(target, type) => {\n  const event = target.ownerDocument.createEvent('Event');\n  event.initEvent(type, true, false);\n  return target.dispatchEvent(event);\n}";
 /**
  * JavaScript function to fill an input element in a React-compatible way.
  *
@@ -60,7 +74,7 @@ export declare const REACT_FILL_SCRIPT: string;
  * name (`input#first-name`, `input[name="first"]`) or else its
  * description, or undefined. Passwords are never searched for.
  */
-export declare const MOVED_VALUE_JS = "(field, expected, before) => {\n  const wanted = String(expected).trim();\n  if (!before || wanted.length < 2 || (field.type || '').toLowerCase() === 'password') return undefined;\n  const other = Array.from(before.keys()).find((f) =>\n    String(f.value).trim() === wanted && String(before.get(f)).trim() !== wanted);\n  if (!other) return undefined;\n  if (other.id) return other.localName + '#' + other.id;\n  return other.name ? other.localName + '[name=\"' + other.name + '\"]' : ((node) => node.tagName.toLowerCase() +\n  (node.id ? '#' + node.id : '') +\n  (node.classList && node.classList.length ? '.' + Array.from(node.classList).slice(0, 2).join('.') : ''))(other);\n}";
+export declare const MOVED_VALUE_JS: string;
 /**
  * Page script reading back the field the last fill left in
  * `window.__bdgFillCheck`, after one macrotask (so frameworks that render
@@ -71,11 +85,11 @@ export declare const MOVED_VALUE_JS = "(field, expected, before) => {\n  const w
  * value matches, nothing was left (the page navigated) or the field left the
  * page.
  */
-export declare const FILL_READ_BACK_SCRIPT = "(() => {\n  const check = window.__bdgFillCheck;\n  delete window.__bdgFillCheck;\n  if (!check) return null;\n  const readBack = () => {\n    if (!check.el.isConnected) return null;\n    const mismatch = ((field, expected) => {\n  const type = (field.type || '').toLowerCase();\n  const actual = field.isContentEditable\n    ? (field.textContent || '')\n    : type === 'checkbox' || type === 'radio'\n      ? (field.checked ? 'checked' : 'unchecked')\n      : field.localName === 'select' && field.multiple\n        ? Array.from(field.selectedOptions).map((o) => o.value).join(', ')\n        : String(field.value);\n  const time = (text) => text.trim().replace(' ', 'T').replace(/(\\d\\d:\\d\\d):00(\\.0+)?$/, '$1');\n  const normalize = (text) => {\n    text = String(text);\n    if (field.isContentEditable) return text.replace(/\\s+/g, ' ').trim();\n    if (field.localName === 'textarea') return text.replace(/\\r\\n?/g, '\\n');\n    if (type === 'color') return text.trim().toLowerCase();\n    if (type === 'email') return text.trim();\n    if (type === 'time' || type === 'datetime-local') return time(text);\n    return text;\n  };\n  const numeric = (type === 'number' || type === 'range') && actual.trim() !== '' && String(expected).trim() !== '';\n  const same = numeric ? Number(actual) === Number(expected) : normalize(actual) === normalize(expected);\n  if (same) return undefined;\n  if (type === 'password') {\n    const mask = (text) => (text === '' ? '' : '********');\n    return { expected: mask(expected), actual: mask(actual), expectedLength: expected.length, actualLength: actual.length };\n  }\n  const cut = field.maxLength > 0 && actual.length === field.maxLength && expected.length > actual.length &&\n    expected.startsWith(actual);\n  return cut ? { expected: expected, actual: actual, truncatedTo: actual.length } : { expected: expected, actual: actual };\n})(check.el, check.expected);\n    if (!mismatch) return null;\n    const movedTo = ((field, expected, before) => {\n  const wanted = String(expected).trim();\n  if (!before || wanted.length < 2 || (field.type || '').toLowerCase() === 'password') return undefined;\n  const other = Array.from(before.keys()).find((f) =>\n    String(f.value).trim() === wanted && String(before.get(f)).trim() !== wanted);\n  if (!other) return undefined;\n  if (other.id) return other.localName + '#' + other.id;\n  return other.name ? other.localName + '[name=\"' + other.name + '\"]' : ((node) => node.tagName.toLowerCase() +\n  (node.id ? '#' + node.id : '') +\n  (node.classList && node.classList.length ? '.' + Array.from(node.classList).slice(0, 2).join('.') : ''))(other);\n})(check.el, check.expected, check.before);\n    return movedTo ? Object.assign(mismatch, { movedTo: movedTo }) : mismatch;\n  };\n  return new Promise((resolve) => {\n    const channel = new MessageChannel();\n    channel.port1.onmessage = () => {\n      channel.port1.close();\n      resolve(readBack());\n    };\n    channel.port2.postMessage(null);\n  });\n})()";
+export declare const FILL_READ_BACK_SCRIPT: string;
 /**
  * JavaScript function to locate an element for clicking.
  *
- * Scrolls the element into view and reports its center point and whether it
+ * Scrolls the element into view (reporting how far the page moved) and reports its center point and whether it
  * is the topmost element there (`hittable`). It does not click; see
  * `clickElement`, which dispatches real mouse events or falls back to
  * `el.click()`.
@@ -91,6 +105,9 @@ export declare const FILL_READ_BACK_SCRIPT = "(() => {\n  const check = window._
  * a press, a probe (`window.__bdgPressProbe`) records whether the press
  * reaches the element, and otherwise which element it landed on: a browser
  * 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.
  */
 export declare const CLICK_ELEMENT_SCRIPT: string;
 /**

package/dist/runtime/dom/reactEventHelpers.js

@@ -7,8 +7,17 @@
  */
 import { FILL_REFUSALS, LABEL_WITHOUT_CONTROL, NAME_QUERY_PLACEHOLDER, VIA_LABEL_SUFFIX, } from '../../errors/messages.js';
 import { REVEAL_SNAPSHOT_JS } from './actionEffectsScripts.js';
-import { ELEMENT_DESCRIPTION_JS, ELEMENT_IDENTITY_JS } from './elementInfo.js';
+import { DISABLED_CAUSE_JS, ELEMENT_DESCRIPTION_JS, ELEMENT_IDENTITY_JS, } from './elementInfo.js';
 import { FIND_ELEMENTS_JS, LABEL_CONTROL_JS } from './targetNode.js';
+/**
+ * Page-side copy of a list (`select.options`, a NodeList) as an array,
+ * without `Array.from`, which pages replace.
+ */
+const LIST_JS = `(list) => {
+  const items = [];
+  for (let i = 0; i < list.length; i++) items[items.length] = list[i];
+  return items;
+}`;
 /**
  * Page-side read-back of a filled field: a mismatch when its value is not
  * what was asked for (the page rejected, reformatted or moved the input),
@@ -28,7 +37,7 @@ export const FILL_VALUE_MISMATCH_JS = `(field, expected) => {
     : type === 'checkbox' || type === 'radio'
       ? (field.checked ? 'checked' : 'unchecked')
       : field.localName === 'select' && field.multiple
-        ? Array.from(field.selectedOptions).map((o) => o.value).join(', ')
+        ? (${LIST_JS})(field.selectedOptions).map((o) => o.value).join(', ')
         : String(field.value);
   const time = (text) => text.trim().replace(' ', 'T').replace(/(\\d\\d:\\d\\d):00(\\.0+)?$/, '$1');
   const normalize = (text) => {
@@ -81,9 +90,8 @@ export const FILL_REFUSAL_JS = `(el) => {
   });
   const tag = el.localName;
   if (tag === 'input' || tag === 'textarea' || tag === 'select') {
-    if (el.disabled || el.matches(':disabled')) {
-      return refuse('disabled', el.hasAttribute('disabled') ? 'disabled attribute' : el.closest('fieldset[disabled]') ? 'inside a disabled <fieldset>' : '');
-    }
+    const disabled = (${DISABLED_CAUSE_JS})(el);
+    if (disabled !== null) return refuse('disabled', disabled);
     return el.readOnly ? refuse('readOnly', 'readonly attribute') : null;
   }
   if (el.isContentEditable) return null;
@@ -94,8 +102,34 @@ export const FILL_REFUSAL_JS = `(el) => {
   if (el.closest('[inert]')) return refuse('inert', 'inside an inert element');
   if (el.getAttribute('aria-readonly') === 'true') return refuse('readOnly', 'aria-readonly="true"');
   if (el.getAttribute('aria-disabled') === 'true') return refuse('disabled', 'aria-disabled="true"');
+  if (el.shadowRoot) {
+    const fields = el.shadowRoot.querySelectorAll('input:not([type="hidden"]), textarea, select, [contenteditable]:not([contenteditable="false"])').length;
+    return refuse('notFillable', '<' + tag + '> has ' + (fields === 0 ? 'no field' : fields + ' fields') + ' in its shadow root; select the one to fill, e.g. its [part~=…] or class');
+  }
   return refuse('notFillable', '<' + tag + '> is not an input, textarea, select or contenteditable element');
 }`;
+/**
+ * Page-side: the one text field, select or editable element in an element's
+ * open shadow root (a web component such as `<sl-input>` wrapping a native
+ * input), which `dom fill` fills in its place; null when the element is a
+ * field itself or its shadow root has none or several.
+ */
+export const SHADOW_FIELD_JS = `(el) => {
+  if (!el.shadowRoot || /^(input|textarea|select)$/.test(el.localName) || el.isContentEditable) return null;
+  const fields = el.shadowRoot.querySelectorAll('input:not([type="hidden"]), textarea, select, [contenteditable]:not([contenteditable="false"])');
+  return fields.length === 1 ? fields[0] : null;
+}`;
+/**
+ * Page-side: fire a bubbling, non-cancelable event of a type on an element,
+ * like `new Event(type, { bubbles: true })`. The event comes from
+ * `document.createEvent`, which keeps working on pages that replace the
+ * `Event` constructor (MooTools 1.2 does).
+ */
+export const FIRE_EVENT_JS = `(target, type) => {
+  const event = target.ownerDocument.createEvent('Event');
+  event.initEvent(type, true, false);
+  return target.dispatchEvent(event);
+}`;
 /**
  * JavaScript function to fill an input element in a React-compatible way.
  *
@@ -117,6 +151,8 @@ export const FILL_REFUSAL_JS = `(el) => {
 export const REACT_FILL_SCRIPT = `
 (function(selector, parts, value, options) {
   const allMatches = (${FIND_ELEMENTS_JS})(selector, parts);
+  const fire = ${FIRE_EVENT_JS};
+  const listOf = ${LIST_JS};
   const warnings = [];
   let expected = value;
   // Why a user could not reach the field (the value is still set, so scripted
@@ -199,6 +235,9 @@ export const REACT_FILL_SCRIPT = `
   }
   const viaLabel = labelControl ? ${JSON.stringify(VIA_LABEL_SUFFIX)} : '';
   if (labelControl) el = labelControl;
+  const shadowField = (${SHADOW_FIELD_JS})(el);
+  const viaShadow = shadowField ? ' in the shadow root of <' + el.localName + '>' : '';
+  if (shadowField) el = shadowField;
 
   const tagName = el.tagName.toLowerCase();
   const inputType = el.type?.toLowerCase();
@@ -208,7 +247,7 @@ export const REACT_FILL_SCRIPT = `
     return {
       success: false,
       error: refusal.error,
-      elementType: tagName + viaLabel,
+      elementType: tagName + viaLabel + viaShadow,
       suggestion: refusal.suggestion,
       unsuitableElement: refusal.kind === 'notFillable'
     };
@@ -225,7 +264,7 @@ export const REACT_FILL_SCRIPT = `
   if (tagName === 'select' && el.multiple) {
     // Several options, separated by commas (an option whose value contains a
     // comma matches as a whole); "" selects none
-    const options = Array.from(el.options);
+    const options = listOf(el.options);
     const whole = options.some((o) => o.value === value || o.text.trim() === value);
     const wanted = whole ? [value] : value.split(',').map((part) => part.trim()).filter(Boolean);
     const chosen = wanted.map((part) =>
@@ -237,17 +276,17 @@ export const REACT_FILL_SCRIPT = `
         success: false,
         error: 'Option not found: ' + missing,
         exitCode: 81,
-        elementType: tagName + viaLabel,
+        elementType: tagName + viaLabel + viaShadow,
         suggestion: 'Available options: ' + options.slice(0, 10).map((o) => o.value || o.text.trim()).join(', ')
       };
     }
     options.forEach((o) => { o.selected = chosen.includes(o); });
     expected = chosen.map((o) => o.value).join(', ');
-    el.dispatchEvent(new Event('input', { bubbles: true }));
-    el.dispatchEvent(new Event('change', { bubbles: true }));
+    fire(el, 'input');
+    fire(el, 'change');
   } else if (tagName === 'select') {
     // Match by option value first, then by visible label
-    const options = Array.from(el.options);
+    const options = listOf(el.options);
     const option =
       options.find((o) => o.value === value) ||
       options.find((o) => o.text.trim() === value);
@@ -256,14 +295,14 @@ export const REACT_FILL_SCRIPT = `
         success: false,
         error: 'Option not found: ' + value,
         exitCode: 81,
-        elementType: tagName + viaLabel,
+        elementType: tagName + viaLabel + viaShadow,
         suggestion: 'Available options: ' + options.slice(0, 10).map((o) => o.value || o.text.trim()).join(', ')
       };
     }
     el.value = option.value;
     expected = option.value;
-    el.dispatchEvent(new Event('input', { bubbles: true }));
-    el.dispatchEvent(new Event('change', { bubbles: true }));
+    fire(el, 'input');
+    fire(el, 'change');
   } else if (inputType === 'checkbox' || inputType === 'radio') {
     // Toggle through a click, like a user: frameworks (React) track checkable
     // state via click events and revert a programmatic \`checked\` assignment
@@ -274,7 +313,7 @@ export const REACT_FILL_SCRIPT = `
       return {
         success: false,
         error: 'Expected true or false for a ' + inputType + ', got "' + value + '"',
-        elementType: tagName + viaLabel,
+        elementType: tagName + viaLabel + viaShadow,
         inputType: inputType,
         suggestion: 'Use true/false (also yes/no, on/off, 1/0)'
       };
@@ -284,7 +323,7 @@ export const REACT_FILL_SCRIPT = `
       return {
         success: false,
         error: 'A radio button cannot be unchecked',
-        elementType: tagName + viaLabel,
+        elementType: tagName + viaLabel + viaShadow,
         inputType: inputType,
         suggestion: 'Select another option in the same group instead'
       };
@@ -297,13 +336,13 @@ export const REACT_FILL_SCRIPT = `
     return {
       success: false,
       fileInput: true,
-      elementType: tagName + viaLabel,
+      elementType: tagName + viaLabel + viaShadow,
       inputType: inputType,
       error: 'File input'
     };
   } else if (el.isContentEditable) {
     el.textContent = value;
-    el.dispatchEvent(new Event('input', { bubbles: true }));
+    fire(el, 'input');
   } else {
     const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
       el.ownerDocument.defaultView.HTMLInputElement.prototype,
@@ -323,7 +362,7 @@ export const REACT_FILL_SCRIPT = `
       return {
         success: false,
         error: 'Value is ' + value.length + ' characters; the field accepts at most ' + el.maxLength,
-        elementType: tagName + viaLabel,
+        elementType: tagName + viaLabel + viaShadow,
         inputType: inputType || null,
         suggestion: 'Shorten the value (a user could not type more than maxlength characters)'
       };
@@ -339,14 +378,14 @@ export const REACT_FILL_SCRIPT = `
       return {
         success: false,
         error: rejection.error,
-        elementType: tagName + viaLabel,
+        elementType: tagName + viaLabel + viaShadow,
         inputType: inputType,
         suggestion: rejection.suggestion
       };
     }
 
-    el.dispatchEvent(new Event('input', { bubbles: true }));
-    el.dispatchEvent(new Event('change', { bubbles: true }));
+    fire(el, 'input');
+    fire(el, 'change');
     if (el.validity && (el.validity.rangeOverflow || el.validity.rangeUnderflow)) {
       warnings.push('The value is outside the allowed range (' + (el.min || 'no minimum') + ' to ' + (el.max || 'no maximum') + '); the form will not submit until it is fixed');
     }
@@ -365,10 +404,10 @@ export const REACT_FILL_SCRIPT = `
       : inputType === 'password'
         ? '********'
         : tagName === 'select' && el.multiple
-          ? Array.from(el.selectedOptions).map((o) => o.value).join(', ')
+          ? listOf(el.selectedOptions).map((o) => o.value).join(', ')
           : el.value,
     element: (${ELEMENT_IDENTITY_JS})(el),
-    elementType: tagName + viaLabel,
+    elementType: tagName + viaLabel + viaShadow,
     inputType: inputType || null,
     checked: inputType === 'checkbox' || inputType === 'radio' ? el.checked : undefined,
     matchCount: allMatches.length,
@@ -427,7 +466,7 @@ export const FILL_READ_BACK_SCRIPT = `(() => {
 /**
  * JavaScript function to locate an element for clicking.
  *
- * Scrolls the element into view and reports its center point and whether it
+ * Scrolls the element into view (reporting how far the page moved) and reports its center point and whether it
  * is the topmost element there (`hittable`). It does not click; see
  * `clickElement`, which dispatches real mouse events or falls back to
  * `el.click()`.
@@ -443,6 +482,9 @@ export const FILL_READ_BACK_SCRIPT = `(() => {
  * a press, a probe (`window.__bdgPressProbe`) records whether the press
  * reaches the element, and otherwise which element it landed on: a browser
  * 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.
  */
 export const CLICK_ELEMENT_SCRIPT = `
 (function(selector, parts, index, action) {
@@ -522,7 +564,7 @@ export const CLICK_ELEMENT_SCRIPT = `
     };
   }
   // Disabled elements still get hover (tooltips often explain why)
-  if (action !== 'hover' && (el.disabled || el.matches(':disabled'))) {
+  if (action !== 'hover' && (${DISABLED_CAUSE_JS})(el) !== null) {
     return {
       success: false,
       error: 'Element is disabled',
@@ -531,7 +573,11 @@ export const CLICK_ELEMENT_SCRIPT = `
       suggestion: 'A user cannot click a disabled element; enable it first (it may depend on other fields)'
     };
   }
-  el.scrollIntoView({ behavior: 'auto', block: 'center' });
+  let topView = el.ownerDocument.defaultView;
+  while (topView.frameElement) topView = topView.parent;
+  const scrollBefore = { x: topView.scrollX, y: topView.scrollY };
+  el.scrollIntoView({ behavior: 'instant', block: 'center' });
+  const scrolledBy = { x: Math.round(topView.scrollX - scrollBefore.x), y: Math.round(topView.scrollY - scrollBefore.y) };
 
   // The caller clicks with real mouse events at (x, y) when the element is the
   // topmost thing there; otherwise it falls back to el.click() via this handle.
@@ -542,10 +588,11 @@ export const CLICK_ELEMENT_SCRIPT = `
   window.__bdgClickTarget = el;
   const rect = el.getBoundingClientRect();
   const view = el.ownerDocument.defaultView;
+  const showsSlotted = (node) => Array.from(node.querySelectorAll('slot')).some((slot) => slot.assignedNodes().length > 0);
   const hitTest = (node, px, py) => {
     const root = node.getRootNode();
     const hit = (typeof root.elementFromPoint === 'function' ? root : node.ownerDocument).elementFromPoint(px, py);
-    return hit !== null && (hit === node || node.contains(hit));
+    return hit !== null && (hit === node || node.contains(hit) || (hit === root.host && showsSlotted(node)));
   };
   const toTopPage = (px, py) => {
     let hittable = hitTest(el, px, py);
@@ -569,16 +616,16 @@ export const CLICK_ELEMENT_SCRIPT = `
   const fractions = [[0.5, 0.5], [0.5, 0.25], [0.5, 0.75], [0.25, 0.5], [0.75, 0.5], [0.25, 0.25], [0.75, 0.25], [0.25, 0.75], [0.75, 0.75]];
   const hasSize = rect.width > 0 && rect.height > 0;
   let point = null;
-  for (const [fx, fy] of hasSize ? fractions : [[0.5, 0.5]]) {
-    const candidate = toTopPage(area.left + area.width * fx, area.top + area.height * fy);
+  const tried = hasSize ? fractions : [[0.5, 0.5]];
+  for (let i = 0; i < tried.length; i++) {
+    const candidate = toTopPage(area.left + area.width * tried[i][0], area.top + area.height * tried[i][1]);
     point = point || candidate;
     if (hasSize && candidate.hittable) { point = candidate; break; }
   }
   const x = point.x;
   const y = point.y;
   const hittable = hasSize && point.hittable;
-  const describe = (node) => node.tagName.toLowerCase() + (node.id ? '#' + node.id : '') +
-    (node.classList && node.classList.length ? '.' + Array.from(node.classList).slice(0, 2).join('.') : '');
+  const describe = ${ELEMENT_DESCRIPTION_JS};
   const coveredBy = () => {
     const root = el.getRootNode();
     const hit = (typeof root.elementFromPoint === 'function' ? root : el.ownerDocument)
@@ -600,11 +647,17 @@ export const CLICK_ELEMENT_SCRIPT = `
     const probe = { reached: false, landedOn: null };
     const markReached = (event) => {
       const path = event.composedPath();
-      if (path.includes(el)) probe.reached = true;
+      let reached = false;
+      for (let i = 0; i < path.length; i++) reached = reached || path[i] === el;
+      if (reached) probe.reached = true;
       else if (!probe.landedOn && path[0] && path[0].nodeType === 1) probe.landedOn = describe(path[0]);
     };
-    ['pointerdown', 'mousedown'].forEach((type) => view.addEventListener(type, markReached, true));
-    probe.stop = () => ['pointerdown', 'mousedown'].forEach((type) => view.removeEventListener(type, markReached, true));
+    view.addEventListener('pointerdown', markReached, true);
+    view.addEventListener('mousedown', markReached, true);
+    probe.stop = () => {
+      view.removeEventListener('pointerdown', markReached, true);
+      view.removeEventListener('mousedown', markReached, true);
+    };
     window.__bdgPressProbe = probe;
   }
 
@@ -618,7 +671,8 @@ export const CLICK_ELEMENT_SCRIPT = `
     x: x,
     y: y,
     hittable: hittable,
-    obstruction: obstruction
+    obstruction: obstruction,
+    scrolledBy: scrolledBy.x !== 0 || scrolledBy.y !== 0 ? scrolledBy : undefined
   };
 })
 `;