browser-debugger-cli 0.11.0 → 0.13.0

package/dist/runtime/dom/formDiscovery.js

@@ -4,6 +4,7 @@
  * Discovers forms, extracts semantic labels, detects state and validation,
  * and returns structured data for agent consumption.
  */
+import { MASKED_VALUE, SENSITIVE_FIELD_JS } from './elementInfo.js';
 /**
  * Page-context script for form discovery.
  *
@@ -11,7 +12,11 @@
  * - Native form elements and inputs
  * - Custom components with ARIA roles
  * - Labels via priority chain (label[for], aria-label, placeholder, etc.)
- * - Current values and validation state
+ * - Current values and validation state (never a secret: a hidden input's
+ *   value is left out, a sensitive text field's or select's
+ *   ({@link SENSITIVE_FIELD_JS}; checkboxes and radios named like one keep
+ *   their checked state) is {@link MASKED_VALUE} when filled, and a
+ *   sensitive select's options do not say which is chosen)
  * - Form relevance scoring for multi-form pages
  */
 export const FORM_DISCOVERY_SCRIPT = `
@@ -206,6 +211,10 @@ export const FORM_DISCOVERY_SCRIPT = `
   function getFieldValue(element) {
     const tag = element.tagName.toLowerCase();
     const type = element.type?.toLowerCase() || 'text';
+    if (type === 'hidden') return '';
+    if (isSecret(element)) {
+      return (element.isContentEditable ? element.textContent : element.value) ? '${MASKED_VALUE}' : '';
+    }
     if (tag === 'select') {
       if (element.multiple) {
         return Array.from(element.selectedOptions).map(o => o.value);
@@ -265,12 +274,20 @@ export const FORM_DISCOVERY_SCRIPT = `
     return tag === 'input' || tag === 'textarea' || tag === 'select';
   }
 
+  function isSecret(element) {
+    const type = element.type?.toLowerCase() || 'text';
+    if (type === 'checkbox' || type === 'radio') return false;
+    if (element.getAttribute('role') === 'checkbox' || element.getAttribute('role') === 'switch') return false;
+    return (${SENSITIVE_FIELD_JS})(element);
+  }
+
   function getSelectOptions(element) {
     if (element.tagName.toLowerCase() !== 'select') return undefined;
+    const secret = isSecret(element);
     return Array.from(element.options).map(opt => ({
-      value: opt.value,
+      value: secret ? '' : opt.value,
       label: opt.textContent.trim(),
-      selected: opt.selected
+      selected: secret ? false : opt.selected
     }));
   }
 

package/dist/runtime/dom/formFillHelpers/fill.js

@@ -5,9 +5,9 @@
 import * as fs from 'node:fs';
 import * as path from 'node:path';
 import { CommandError } from '../../../errors/index.js';
-import { fileNotFoundError, uploadDirectoryError, singleFileInputError, fillableElementNotFoundError, clickableElementNotFoundError, clickTargetDetachedError, unexpectedResponseFormatError, operationFailedError, pressNotReceivedError, unreachableElementError, } from '../../../errors/messages.js';
-import { escapeValueForJS, formatScriptExecutionError, throwIfInvalidSelector, withMultipleMatchesWarning, withValueMismatchWarning, } from './shared.js';
-import { FILL_READ_BACK_SCRIPT, REACT_FILL_SCRIPT, CLICK_ELEMENT_SCRIPT, isFillResult, isClickResult, } from '../reactEventHelpers.js';
+import { fileNotFoundError, uploadDirectoryError, singleFileInputError, fillableElementNotFoundError, clickTargetDetachedError, unexpectedResponseFormatError, operationFailedError, pressNotReceivedError, unreachableElementError, } from '../../../errors/messages.js';
+import { ActionScriptError, escapeValueForJS, exceptionSummary, throwIfInvalidSelector, withMultipleMatchesWarning, withValueMismatchWarning, } from './shared.js';
+import { FILL_READ_BACK_SCRIPT, FIRE_EVENT_JS, REACT_FILL_SCRIPT, CLICK_ELEMENT_SCRIPT, SHADOW_FIELD_JS, isFillResult, isClickResult, } from '../reactEventHelpers.js';
 import { FIND_ELEMENTS_JS, LABEL_CONTROL_JS, selectorArgsJS } from '../targetNode.js';
 import { createLogger } from '../../../ui/logging/index.js';
 import { CLICK_NOT_RECEIVED_WARNING, POINTER_ACTION_DONE, POINTER_ACTION_NOUN, domClickFallbackWarning, } from '../../../ui/messages/commands.js';
@@ -32,9 +32,7 @@ export async function fillElement(cdp, selector, value, options = {}) {
         const cdpResponse = response;
         if (cdpResponse.exceptionDetails) {
             throwIfInvalidSelector(cdpResponse.exceptionDetails, selector);
-            const errorMessage = formatScriptExecutionError(cdpResponse.exceptionDetails, selector, 'fill', expression);
-            const err = fillableElementNotFoundError(selector);
-            throw new CommandError(errorMessage, { suggestion: err.suggestion }, EXIT_CODES.SOFTWARE_ERROR);
+            throw new ActionScriptError('fill', exceptionSummary(cdpResponse.exceptionDetails), selector);
         }
         if (cdpResponse.result?.value && isFillResult(cdpResponse.result.value)) {
             const result = cdpResponse.result.value;
@@ -106,8 +104,8 @@ function isValueMismatch(value) {
 /** Empties a file input as a user removing the selection would (with events). */
 const CLEAR_FILE_INPUT_FUNCTION = `function () {
   this.value = '';
-  this.dispatchEvent(new Event('input', { bubbles: true }));
-  this.dispatchEvent(new Event('change', { bubbles: true }));
+  (${FIRE_EVENT_JS})(this, 'input');
+  (${FIRE_EVENT_JS})(this, 'change');
 }`;
 /** Object group for remote objects created while selecting files. */
 const UPLOAD_OBJECT_GROUP = 'bdg-upload';
@@ -176,7 +174,7 @@ async function setFileInput(cdp, selector, value, options) {
         return problem;
     try {
         const located = (await cdp.send('Runtime.evaluate', {
-            expression: `((el) => (${LABEL_CONTROL_JS})(el) || el)((${FIND_ELEMENTS_JS})(${selectorArgsJS(selector)})[${options.index ?? 0}])`,
+            expression: `((el) => (${LABEL_CONTROL_JS})(el) || (${SHADOW_FIELD_JS})(el) || el)((${FIND_ELEMENTS_JS})(${selectorArgsJS(selector)})[${options.index ?? 0}])`,
             objectGroup: UPLOAD_OBJECT_GROUP,
         }));
         if (located.exceptionDetails)
@@ -441,9 +439,7 @@ export async function clickElement(cdp, selector, options = {}) {
         const cdpResponse = response;
         if (cdpResponse.exceptionDetails) {
             throwIfInvalidSelector(cdpResponse.exceptionDetails, selector);
-            const errorMessage = formatScriptExecutionError(cdpResponse.exceptionDetails, selector, 'click', expression);
-            const err = clickableElementNotFoundError(selector);
-            throw new CommandError(errorMessage, { suggestion: err.suggestion }, EXIT_CODES.SOFTWARE_ERROR);
+            throw new ActionScriptError(POINTER_ACTION_NOUN[action], exceptionSummary(cdpResponse.exceptionDetails), selector);
         }
         if (cdpResponse.result?.value && isClickResult(cdpResponse.result.value)) {
             return await performClick(cdp, cdpResponse.result.value, action, options.strict === true);

package/dist/runtime/dom/formFillHelpers/pressKey.js

@@ -5,7 +5,7 @@
  */
 import { CommandError } from '../../../errors/index.js';
 import { VIA_LABEL_SUFFIX, keyPressFailedError, operationFailedError, unknownKeyError, } from '../../../errors/messages.js';
-import { ELEMENT_IDENTITY_JS } from '../elementInfo.js';
+import { DISABLED_CAUSE_JS, ELEMENT_IDENTITY_JS } from '../elementInfo.js';
 import { throwIfInvalidSelector, withMultipleMatchesWarning, } from './shared.js';
 import { describeModifiers, getKeyDefinition, impliesShift, MODIFIER_FLAGS, parseModifiers, similarKeyNames, shortcutCommands, } from '../keyMapping.js';
 import { FIND_ELEMENTS_JS, LABEL_CONTROL_JS, selectorArgsJS } from '../targetNode.js';
@@ -60,7 +60,7 @@ const FOCUS_ELEMENT_SCRIPT = `
       return {
         success: false,
         reason: 'not-focusable',
-        error: 'Element <' + el.tagName.toLowerCase() + '> cannot receive keyboard focus' + (el.matches(':disabled') ? ' (it is disabled)' : '')
+        error: 'Element <' + el.tagName.toLowerCase() + '> cannot receive keyboard focus' + ((${DISABLED_CAUSE_JS})(el) !== null ? ' (it is disabled)' : '')
       };
     }
   }

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

@@ -1,13 +1,10 @@
 /**
- * Shared internal helpers for form-fill operations: script-error formatting
- * and JS string escaping.
+ * Shared internal helpers for form-fill operations: script errors and JS
+ * string escaping.
  */
 import type { Protocol } from '../../../connection/typed-cdp.js';
+import { CommandError } from '../../../errors/index.js';
 import type { FillResult } from '../../../ipc/protocol/domTypes.js';
-/**
- * Escape a CSS selector for embedding in a single-quoted JS string.
- */
-export declare function escapeSelectorForJS(selector: string): string;
 /**
  * Add a warning when the selector matched several elements and no index was
  * given, so the caller knows which one was used. Keeps an existing warning.
@@ -34,11 +31,20 @@ export declare function withValueMismatchWarning(result: FillResult): FillResult
  */
 export declare function escapeValueForJS(value: string): string;
 /**
- * Format a CDP exception into a user-friendly error with troubleshooting
- * hints. Detects shell-quote-damaged selectors and recommends the
- * query-then-act pattern.
+ * An action's page script threw. The action that ran it reports what was
+ * thrown; when the page replaced built-ins the script uses,
+ * `onScriptTarget` makes that the error instead.
  */
-export declare function formatScriptExecutionError(exceptionDetails: Protocol.Runtime.ExceptionDetails, selector: string, operationType?: 'fill' | 'click', expression?: string): string;
+export declare class ActionScriptError extends CommandError {
+    readonly action: string;
+    readonly exception: string;
+    /**
+     * @param action - The action, e.g. `fill`
+     * @param exception - What the script threw, in one line
+     * @param selector - Selector the action was for
+     */
+    constructor(action: string, exception: string, selector: string);
+}
 /**
  * What a page script threw, in one line (`TypeError: Cannot read …` rather
  * than CDP's bare "Uncaught").

package/dist/runtime/dom/formFillHelpers/shared.js

@@ -1,18 +1,11 @@
 /**
- * Shared internal helpers for form-fill operations: script-error formatting
- * and JS string escaping.
+ * Shared internal helpers for form-fill operations: script errors and JS
+ * string escaping.
  */
 import { CommandError } from '../../../errors/index.js';
-import { invalidSelectorError } from '../../../errors/messages.js';
+import { actionScriptFailedError, invalidSelectorError } from '../../../errors/messages.js';
 import { multipleMatchesWarning, valueMismatchWarning } from '../../../ui/messages/commands.js';
 import { EXIT_CODES } from '../../../utils/exitCodes.js';
-import { detectSelectorQuoteDamage } from '../../../utils/shellDetection.js';
-/**
- * Escape a CSS selector for embedding in a single-quoted JS string.
- */
-export function escapeSelectorForJS(selector) {
-    return JSON.stringify(selector).slice(1, -1).replace(/'/g, "\\'");
-}
 /**
  * Add a warning when the selector matched several elements and no index was
  * given, so the caller knows which one was used. Keeps an existing warning.
@@ -49,50 +42,24 @@ export function escapeValueForJS(value) {
     return JSON.stringify(value).slice(1, -1).replace(/'/g, "\\'");
 }
 /**
- * Format a CDP exception into a user-friendly error with troubleshooting
- * hints. Detects shell-quote-damaged selectors and recommends the
- * query-then-act pattern.
+ * An action's page script threw. The action that ran it reports what was
+ * thrown; when the page replaced built-ins the script uses,
+ * `onScriptTarget` makes that the error instead.
  */
-export function formatScriptExecutionError(exceptionDetails, selector, operationType = 'fill', expression) {
-    const errorText = exceptionDetails.text || 'Unknown error';
-    const location = exceptionDetails.lineNumber !== undefined && exceptionDetails.columnNumber !== undefined
-        ? ` at line ${exceptionDetails.lineNumber + 1}, column ${exceptionDetails.columnNumber + 1}`
-        : '';
-    const lines = [];
-    lines.push(`Script execution failed: ${errorText}${location}`);
-    if (expression) {
-        const truncated = expression.length > 150 ? expression.slice(0, 150) + '...' : expression;
-        lines.push('');
-        lines.push(`Expression received: ${truncated}`);
-        const selectorCheck = detectSelectorQuoteDamage(selector);
-        if (selectorCheck.damaged) {
-            lines.push('');
-            lines.push('Shell quote damage detected in selector:');
-            if (selectorCheck.details) {
-                lines.push(`  ${selectorCheck.details}`);
-            }
-            lines.push('');
-            lines.push('Try using the two-step pattern:');
-            lines.push(`  1. bdg dom query '${selector}'`);
-            lines.push(`  2. bdg dom ${operationType} 0${operationType === 'fill' ? ' "value"' : ''}`);
-            return lines.join('\n');
-        }
+export class ActionScriptError extends CommandError {
+    action;
+    exception;
+    /**
+     * @param action - The action, e.g. `fill`
+     * @param exception - What the script threw, in one line
+     * @param selector - Selector the action was for
+     */
+    constructor(action, exception, selector) {
+        const err = actionScriptFailedError(action, exception, selector);
+        super(err.message, { suggestion: err.suggestion }, EXIT_CODES.SOFTWARE_ERROR);
+        this.action = action;
+        this.exception = exception;
     }
-    const troubleshootingSteps = operationType === 'fill'
-        ? [
-            `1. Verify element exists: bdg dom query "${selector}"`,
-            '2. Check element is visible and not disabled',
-            `3. Try direct eval: bdg dom eval "document.querySelector('${escapeSelectorForJS(selector)}').value = 'your-value'"`,
-        ]
-        : [
-            `1. Verify element exists: bdg dom query "${selector}"`,
-            '2. Check element is visible and clickable',
-            `3. Try direct eval: bdg dom eval "document.querySelector('${escapeSelectorForJS(selector)}').click()"`,
-        ];
-    lines.push('');
-    lines.push('Troubleshooting:');
-    lines.push(`  ${troubleshootingSteps.join('\n  ')}`);
-    return lines.join('\n');
 }
 /**
  * What a page script threw, in one line (`TypeError: Cannot read …` rather

package/dist/runtime/dom/formSubmitHelpers.js

@@ -4,7 +4,7 @@
 import { CDPTimeoutError } from '../../connection/errors.js';
 import { trackInFlightRequests } from '../../connection/inFlightRequests.js';
 import { submitNetworkBusyWarning, submitTimeoutError } from '../../errors/messages.js';
-import { ELEMENT_IDENTITY_JS } from './elementInfo.js';
+import { DISABLED_CAUSE_JS, ELEMENT_IDENTITY_JS } from './elementInfo.js';
 import { throwIfInvalidSelector } from './formFillHelpers/shared.js';
 import { FIND_ELEMENTS_JS, selectorArgsJS } from './targetNode.js';
 import { summarizePendingRequests } from '../page/loadingState.js';
@@ -49,7 +49,8 @@ const PREPARE_SUBMIT_SCRIPT = `
         f.matches('button:not([type]), button[type=submit], input[type=submit], input[type=image]')
       )
     : [];
-  if (submitters.length > 0 && submitters.every((f) => f.matches(':disabled'))) {
+  const disabled = (f) => (${DISABLED_CAUSE_JS})(f) !== null;
+  if (submitters.length > 0 && submitters.every(disabled)) {
     // A user could not submit: Enter does nothing while the default button is disabled
     return { action: 'fail', reason: 'disabled', error: 'The form\\'s submit button is disabled' };
   }
@@ -62,7 +63,7 @@ const PREPARE_SUBMIT_SCRIPT = `
   if (isForm) {
     // Like pressing Enter: the form's default button is the submitter, so its
     // name=value is sent too
-    const submitter = submitters.find((f) => !f.matches(':disabled'));
+    const submitter = submitters.find((f) => !disabled(f));
     const element = (${ELEMENT_IDENTITY_JS})(submitter || el);
     if (submitter) el.requestSubmit(submitter);
     else el.requestSubmit();

package/dist/runtime/dom/frameLayout.js

@@ -127,6 +127,7 @@ export function placeInOwnerFrame(raw, owner, mapping) {
                 clipper: inner.clipper ?? (inside(rect, frameView) ? outer.clipper : frame.element),
                 hidden: inner.hidden ?? (outer.hidden ? 'inside a hidden iframe' : null),
                 invisible: inner.invisible ?? outer.invisible,
+                masked: inner.invisible ? null : (inner.masked ?? outer.masked ?? null),
                 fixed: outer.fixed,
                 sticky: outer.sticky ?? false,
                 pageScroll: outer.pageScroll,

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

@@ -25,4 +25,11 @@ import type { InspectResult } from '../../ipc/protocol/inspectTypes.js';
  *   selector or unknown property, (87) the cached element left the page
  */
 export declare function inspectElement(cdp: CDPConnection, params: DomInspectCommand): Promise<InspectResult>;
+/**
+ * Enable DOM and CSS once per connection (kept on: CSS.enable replays every
+ * stylesheet, which costs up to a few hundred ms on large sites the first time).
+ *
+ * @param cdp - CDP connection
+ */
+export declare function enableStyleDomains(cdp: CDPConnection): Promise<void>;
 //# sourceMappingURL=inspect.d.ts.map

package/dist/runtime/dom/inspect.js

@@ -13,16 +13,18 @@
  * read (no cascade).
  */
 import { CommandError } from '../../errors/index.js';
-import { operationFailedError, unknownCssPropertyError } from '../../errors/messages.js';
+import { operationFailedError, unknownCssPropertyError, whyAllPropertyError, } from '../../errors/messages.js';
 import { throwIfInvalidSelector } from './formFillHelpers/shared.js';
 import { selectedProps } from './inspectAllStyles.js';
 import { buildCascadeFields } from './inspectCascadeModel.js';
+import { explainUnsetVariables } from './inspectHints.js';
 import { buildInspectResult } from './inspectModel.js';
 import { matchedStyles, sourceLabel, trackStyleSheets } from './inspectRules.js';
-import { INSPECT_PAGE_JS, RELATED_NODE_JS } from './inspectScripts.js';
+import { INSPECT_PAGE_JS, RELATED_NODE_JS, VARIABLE_SETTERS_JS, } from './inspectScripts.js';
 import { DEFAULT_TREE_DEPTH, DEFAULT_TREE_LIMIT } from './inspectTree.js';
 import { inspectLayout } from './layout.js';
 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';
@@ -36,12 +38,18 @@ const HINTS_BUDGET_MS = 1000;
 const RULES_BUDGET_MS = 5000;
 /** Distinguishes the object groups of concurrent calls */
 let groupCounter = 0;
-/** Page-side choice of a match: the index asked for, else the first rendered one (the first when none is) */
+/**
+ * Page-side choice of a match: the index asked for, else the first visible
+ * one (rendered, not `visibility: hidden`, not `opacity: 0`), else the first
+ * rendered one, else the first
+ */
 const PICK_MATCH_JS = `function (i) {
   if (i !== null) return i;
-  const shown = (el) => (el.checkVisibility ? el.checkVisibility() : el.getClientRects().length > 0);
-  const first = Array.prototype.findIndex.call(this, shown);
-  return first < 0 ? 0 : first;
+  const check = (el, options) => (el.checkVisibility ? el.checkVisibility(options) : el.getClientRects().length > 0);
+  const visible = Array.prototype.findIndex.call(this, (el) => check(el, { visibilityProperty: true, opacityProperty: true }));
+  if (visible >= 0) return visible;
+  const rendered = Array.prototype.findIndex.call(this, (el) => check(el, {}));
+  return rendered < 0 ? 0 : rendered;
 }`;
 /**
  * Inspect one element.
@@ -54,10 +62,20 @@ const PICK_MATCH_JS = `function (i) {
  */
 export async function inspectElement(cdp, params) {
     const started = Date.now();
+    if (params.why === 'all') {
+        const err = whyAllPropertyError();
+        throw new CommandError(err.message, { suggestion: err.suggestion }, EXIT_CODES.INVALID_ARGUMENTS);
+    }
+    const pseudoOf = /::?(before|after)\s*$/i.exec(params.selector)?.[1]?.toLowerCase();
+    const request = pseudoOf
+        ? { ...params, selector: params.selector.replace(/::?(before|after)\s*$/i, '') }
+        : params;
     const objectGroup = `bdg-inspect-${++groupCounter}`;
     try {
-        const found = await findElement(cdp, params, objectGroup);
-        const sources = await readSources(cdp, found.objectId, params, objectGroup);
+        const found = await findElement(cdp, request, objectGroup);
+        const sources = await readSources(cdp, found.objectId, request, objectGroup);
+        if (sources.raw.unknownWhy)
+            throwUnknownProperties([params.why ?? ''], sources);
         const propValues = sources.props ? checkedProps(sources.props, sources) : undefined;
         const built = buildInspectResult(sources, {
             selector: params.selector,
@@ -67,8 +85,14 @@ export async function inspectElement(cdp, params) {
             ...(params.all && { all: true }),
             ...(propValues && { propValues }),
         });
-        const withCascade = { ...built, ...cascadeFields(cdp, sources) };
-        const result = found.picked ? { ...withCascade, picked: found.picked } : withCascade;
+        const cascade = cascadeFields(cdp, sources);
+        const hints = cascade.hints && (await explainedHints(cdp, found.objectId, cascade.hints));
+        const withCascade = { ...built, ...cascade, ...(hints && { hints }) };
+        const result = {
+            ...withCascade,
+            ...(found.picked && { picked: found.picked }),
+            ...(pseudoOf && { pseudoOf: `::${pseudoOf}` }),
+        };
         log.debug(`Inspected ${result.element} in ${Date.now() - started} ms`);
         return result;
     }
@@ -78,6 +102,25 @@ export async function inspectElement(cdp, params) {
             .catch((error) => log.debug(`Object group not released: ${getErrorMessage(error)}`));
     }
 }
+/**
+ * Hints with unset variables told where the page sets them
+ * ({@link VARIABLE_SETTERS_JS}); unchanged when there are none or the
+ * search fails.
+ *
+ * @param cdp - CDP connection
+ * @param objectId - The element
+ * @param hints - Hints
+ * @returns Hints
+ */
+async function explainedHints(cdp, objectId, hints) {
+    const names = [...new Set(hints.flatMap((hint) => hint.variables ?? []))];
+    if (names.length === 0)
+        return hints;
+    const setters = await callOn(cdp, objectId, VARIABLE_SETTERS_JS, [
+        names,
+    ]);
+    return setters ? explainUnsetVariables(hints, setters) : hints;
+}
 /**
  * The properties asked for with `--props`.
  *
@@ -87,9 +130,19 @@ export async function inspectElement(cdp, params) {
  * @throws CommandError (81) for a name no value was found for
  */
 function checkedProps(names, sources) {
-    const { props, unknown } = selectedProps(names, sources.style, sources.raw.props, sources.raw.unknownProps);
+    const { props, unknown } = selectedProps(names, sources.style, sources.raw.props, sources.raw.unknownProps, sources.raw.rootFontSize);
     if (unknown.length === 0)
         return props;
+    return throwUnknownProperties(unknown, sources);
+}
+/**
+ * Reject names that are not CSS properties, with the closest computed ones.
+ *
+ * @param unknown - Names
+ * @param sources - What was read (computed property names)
+ * @throws CommandError (81) always
+ */
+function throwUnknownProperties(unknown, sources) {
     const suggestions = unknown.flatMap((name) => findSimilar(name, Object.keys(sources.style), { maxSuggestions: 1 }));
     const err = unknownCssPropertyError(unknown, suggestions);
     throw new CommandError(err.message, { suggestion: err.suggestion }, EXIT_CODES.INVALID_ARGUMENTS);
@@ -130,11 +183,14 @@ function cascadeFields(cdp, sources) {
         style: sources.style,
         parentStyle: sources.parentStyle,
         replaced: sources.raw.replaced === true,
-        formControl: sources.raw.formControl,
+        formControl: sources.raw.formControl && sources.raw.hasText,
         ...(sources.hints === false && { hints: false }),
         label: (declaration) => sourceLabel(declaration, cdp),
         ...(sources.rules && { rules: true }),
         ...(sources.why && { why: sources.why }),
+        ...(sources.raw.whyLonghands && { whyLonghands: sources.raw.whyLonghands }),
+        ...(sources.raw.whyComputed && { whyComputed: sources.raw.whyComputed }),
+        ...(sources.raw.whyInactive && { whyInactive: sources.raw.whyInactive }),
         ...(sources.props && { props: sources.props }),
     });
 }
@@ -193,9 +249,7 @@ function pickedHow(params, count, index) {
  * @returns Remote object id, or undefined when the node left the page
  */
 async function resolveCachedNode(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 {};
     }));
@@ -215,10 +269,10 @@ async function resolveCachedNode(cdp, backendNodeId, objectGroup) {
  * @throws CommandError (81) invalid selector, (91) page script failure
  */
 async function querySelector(cdp, selector, objectGroup) {
-    const response = (await cdp.send('Runtime.evaluate', {
+    const response = await evaluateInBdgWorld(cdp, {
         expression: `(${DEEP_QUERY_JS})(${selectorArgsJS(selector)})`,
         objectGroup,
-    }));
+    });
     if (response.exceptionDetails || !response.result.objectId) {
         if (response.exceptionDetails)
             throwIfInvalidSelector(response.exceptionDetails, selector);
@@ -269,7 +323,7 @@ async function readSources(cdp, objectId, params, objectGroup) {
     return {
         raw,
         ...styles,
-        fonts: raw.ownText || raw.formControl ? styles.fonts.node : styles.fonts.textHolder,
+        fonts: raw.textHolder ? styles.fonts.textHolder : styles.fonts.node,
         ...measured,
         ...(params.rules && { rules: true }),
         ...(params.why && { why: params.why }),
@@ -290,6 +344,7 @@ async function readPage(cdp, objectId, params) {
     const raw = await callOn(cdp, objectId, INSPECT_PAGE_JS, [
         params.props || params.all ? 0 : (params.tree ?? DEFAULT_TREE_DEPTH),
         params.props ?? null,
+        params.why ?? null,
     ]);
     if (raw)
         return raw;
@@ -297,11 +352,12 @@ async function readPage(cdp, objectId, params) {
     throw new CommandError(err.message, { suggestion: err.suggestion }, EXIT_CODES.SCRIPT_ERROR);
 }
 /**
- * The backend node id of the element's layout parent or first text holder.
+ * The backend node id of the element's layout parent, the element that
+ * draws most of its text, or the parent of that text's nodes.
  *
  * @param cdp - CDP connection
  * @param objectId - The element
- * @param which - `parent` or `textHolder`
+ * @param which - `parent`, `textHolder` or `fontHolder`
  * @param objectGroup - Object group for handles
  * @returns Backend node id, or undefined when there is none
  */
@@ -316,8 +372,8 @@ async function relatedNode(cdp, objectId, which, objectGroup) {
     return id ? (await describe(cdp, id)).backendNodeId : undefined;
 }
 /**
- * The backend node ids of the element, its layout parent, its first text
- * holder and its generated pseudo-elements.
+ * The backend node ids of the element, its layout parent, its text holder
+ * (with the parent of its text nodes) and its generated pseudo-elements.
  *
  * @param cdp - CDP connection
  * @param objectId - The element
@@ -325,10 +381,11 @@ async function relatedNode(cdp, objectId, which, objectGroup) {
  * @returns Backend node ids
  */
 async function relatedNodes(cdp, objectId, objectGroup) {
-    const [node, parent, textHolder] = await Promise.all([
+    const [node, parent, textHolder, fontHolder] = await Promise.all([
         describe(cdp, objectId),
         relatedNode(cdp, objectId, 'parent', objectGroup),
         relatedNode(cdp, objectId, 'textHolder', objectGroup),
+        relatedNode(cdp, objectId, 'fontHolder', objectGroup),
     ]);
     const pseudo = (node.pseudoElements ?? [])
         .filter((p) => p.pseudoType === 'before' || p.pseudoType === 'after')
@@ -339,7 +396,8 @@ async function relatedNodes(cdp, objectId, objectGroup) {
     return {
         node: node.backendNodeId,
         ...(parent && { parent }),
-        ...(textHolder && { textHolder }),
+        ...(textHolder && textHolder !== node.backendNodeId && { textHolder }),
+        ...(fontHolder && { fontHolder }),
         pseudo,
     };
 }
@@ -392,6 +450,7 @@ async function nodeIdLookup(cdp, related) {
         related.node,
         related.parent,
         related.textHolder,
+        related.fontHolder,
         ...related.pseudo.map((p) => p.backendNodeId),
     ];
     const ids = await pushNodes(cdp, order.filter((id) => id !== undefined));
@@ -408,18 +467,23 @@ async function nodeIdLookup(cdp, related) {
 async function readStyles(cdp, related, params) {
     await enableStyleDomains(cdp);
     const nodeIdOf = await nodeIdLookup(cdp, related);
-    const [matched, style, parentStyle, nodeFonts, holderFonts, size, pseudo] = await Promise.all([
+    const optionalStyle = (backendNodeId) => backendNodeId === undefined
+        ? Promise.resolve(undefined)
+        : computedStyle(cdp, nodeIdOf(backendNodeId));
+    const [matched, style, parentStyle, holderStyle, nodeFonts, holderFonts, size, pseudo] = await Promise.all([
         readMatched(cdp, nodeIdOf(related.node), params),
         computedStyle(cdp, nodeIdOf(related.node)),
-        related.parent === undefined ? undefined : computedStyle(cdp, nodeIdOf(related.parent)),
+        optionalStyle(related.parent),
+        optionalStyle(related.textHolder),
         platformFonts(cdp, nodeIdOf(related.node)),
-        platformFonts(cdp, nodeIdOf(related.textHolder)),
+        platformFonts(cdp, nodeIdOf(related.fontHolder)),
         borderBoxSize(cdp, related.node),
         Promise.all(related.pseudo.map((p) => pseudoSource(cdp, p.type, p.backendNodeId, nodeIdOf(p.backendNodeId)))),
     ]);
     return {
         style,
         ...(parentStyle && { parentStyle }),
+        ...(holderStyle && { holderStyle }),
         pseudo,
         fonts: { node: nodeFonts, textHolder: holderFonts },
         ...(size && { size }),
@@ -466,7 +530,7 @@ async function pseudoSource(cdp, type, backendNodeId, nodeId) {
  *
  * @param cdp - CDP connection
  */
-async function enableStyleDomains(cdp) {
+export async function enableStyleDomains(cdp) {
     if (stylesEnabled.has(cdp))
         return;
     trackStyleSheets(cdp);

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

@@ -3,13 +3,13 @@
  *
  * `--all` lists every computed longhand that is not noise and not its
  * default, collapsed into shorthands (margin, padding, inset, border,
- * radius, overflow, gap, flex, grid area, outline, animation). Defaults are
+ * radius, overflow, gap, flex, grid area, outline, animation, transition). Defaults are
  * the CSS initial values as Chrome computes them; the UA stylesheet's
  * per-tag values (a `<p>`'s margins, a button's padding) are real values and
  * are listed. Display, font, size, line height and color are always listed.
  *
  * Noise: custom properties, logical duplicates of physical properties,
- * width/height (in the header), transitions, origins without a transform,
+ * width/height (in the header), origins without a transform,
  * colors that only repeat `color` (currentColor), properties of borders,
  * outlines and rules that are not drawn, SVG paint properties on HTML
  * elements, and vendor-prefixed internals.
@@ -34,15 +34,25 @@ export declare function isDefaultValue(name: string, value: string): boolean;
  * @returns Normalized value
  */
 export declare function normalizeProperty(name: string, value: string): string;
+/**
+ * A shorthand's computed value as `--all` writes it (`margin 0 8`,
+ * `outline 2 solid #f00`, `transition color 1s ease-in`).
+ *
+ * @param shorthand - Shorthand name
+ * @param style - Computed longhands
+ * @returns Value, or undefined for a shorthand `--all` does not collapse
+ */
+export declare function collapsedValue(shorthand: string, style: StyleMap): string | undefined;
 /**
  * Every computed longhand that is not noise and not a default, normalized
  * and collapsed into shorthands.
  *
  * @param style - Computed styles
  * @param svg - The element is an SVG element (SVG properties are listed)
+ * @param formControl - A form control (`appearance: none` is not its default)
  * @returns Properties and values
  */
-export declare function allStyles(style: StyleMap, svg: boolean): Record<string, string>;
+export declare function allStyles(style: StyleMap, svg: boolean, formControl?: boolean): Record<string, string>;
 /**
  * The properties asked for with `--props`, raw and normalized. CDP's
  * computed longhands come first; shorthands and custom properties come from
@@ -52,10 +62,12 @@ export declare function allStyles(style: StyleMap, svg: boolean): Record<string,
  * @param style - Computed longhands (CDP)
  * @param pageValues - Values the page read
  * @param pageUnknown - Names the page does not know as CSS properties
+ * @param rootFontSize - Root font size (px): a custom property that is one
+ *   rem length is also given in px
  * @returns Values by name (an unset custom property is empty), and the
  *   names that are not properties
  */
-export declare function selectedProps(names: readonly string[], style: StyleMap, pageValues: Record<string, string> | undefined, pageUnknown?: readonly string[]): {
+export declare function selectedProps(names: readonly string[], style: StyleMap, pageValues: Record<string, string> | undefined, pageUnknown?: readonly string[], rootFontSize?: number): {
     props: Record<string, InspectProp>;
     unknown: string[];
 };