browser-debugger-cli 0.11.0 → 0.13.0

package/dist/runtime/dom/inspectCascadeModel.js

@@ -4,9 +4,10 @@
  * property, sides set by one declaration merged into the shorthand) and
  * `--why` (every declaration of one property).
  */
-import { normalizeProperty } from './inspectAllStyles.js';
-import { physicalName, ownProperties, resolveCascade, shorthandLonghands, } from './inspectCascade.js';
+import { collapsedValue, normalizeProperty } from './inspectAllStyles.js';
+import { physicalName, ownProperties, ruleField, resolveCascade, shorthandLonghands, } from './inspectCascade.js';
 import { formControlFontHints, inactiveHints, undefinedVariableHints, } from './inspectHints.js';
+import { substituteVariables } from './inspectVariables.js';
 import { buildWhy } from './inspectWhyModel.js';
 const SIDES = ['top', 'right', 'bottom', 'left'];
 const sides = (pattern) => SIDES.map((side) => pattern.replace('{side}', side));
@@ -33,6 +34,11 @@ const RULE_GROUPS = [
     },
     { longhands: ['background-color'] },
     { longhands: ['background-image'] },
+    { longhands: ['background-size'] },
+    {
+        shorthand: 'background-position',
+        longhands: ['background-position-x', 'background-position-y'],
+    },
     { longhands: ['color'] },
     { longhands: ['font-family'] },
     { longhands: ['font-size'] },
@@ -63,8 +69,10 @@ const RULE_GROUPS = [
  * @returns `hints` (empty when checked and nothing found), `rules` and `why`
  */
 export function buildCascadeFields(input) {
-    const ruleGroups = input.rules ? (input.props?.map(propertyGroup) ?? RULE_GROUPS) : [];
-    const whyGroup = input.why ? propertyGroup(input.why) : undefined;
+    const ruleGroups = input.rules
+        ? (input.props?.map((name) => propertyGroup(name)) ?? RULE_GROUPS)
+        : [];
+    const whyGroup = input.why ? propertyGroup(input.why, input.whyLonghands) : undefined;
     const wanted = [
         ...new Set([
             ...ownProperties(input.matched),
@@ -73,40 +81,59 @@ export function buildCascadeFields(input) {
         ]),
     ];
     const cascade = resolveCascade(input.matched, wanted);
-    const hints = input.hints === false ? undefined : buildHints(cascade, input);
+    const found = collectHints(cascade, input);
+    const hints = input.hints === false ? undefined : found.map((hint) => toInspectHint(hint, input));
     const rules = buildRules(ruleGroups, cascade, input);
     return {
         ...(hints && { hints }),
         ...(rules.length > 0 && { rules }),
-        ...(whyGroup && { why: buildWhy(whyGroup, cascade, input) }),
+        ...(whyGroup && { why: withInactive(buildWhy(whyGroup, cascade, input, found), input) }),
     };
 }
 /**
  * The longhands a property name stands for.
  *
  * @param name - Shorthand, longhand, logical or custom property
+ * @param expanded - Its longhands as the browser expands it, for a
+ *   shorthand bdg does not list (`transition`, `grid-template`)
  * @returns Group (a shorthand with its longhands, or one physical longhand)
  */
-function propertyGroup(name) {
-    const longhands = shorthandLonghands(name);
+function propertyGroup(name, expanded) {
+    const longhands = shorthandLonghands(name) ?? (expanded && [...new Set(expanded.map(physicalName))]);
     return longhands
         ? { shorthand: name, longhands: [...longhands] }
         : { longhands: [physicalName(name)] };
 }
+/**
+ * The `--why` answer with the rules that would set the property under a
+ * condition that does not apply now (on its first entry).
+ *
+ * @param whys - `--why` entries
+ * @param input - Page-side findings
+ * @returns Entries
+ */
+function withInactive(whys, input) {
+    const [first, ...rest] = whys;
+    if (!first || !input.whyInactive?.length)
+        return whys;
+    return [{ ...first, inactive: input.whyInactive }, ...rest];
+}
 /**
  * Hints: declarations with no effect, and var() of unset custom properties;
  * none without the computed style to check them against.
  *
  * @param cascade - Resolved properties
- * @param input - Styles and the label function
- * @returns Hints
+ * @param input - Styles
+ * @returns Hints with their declarations
  */
-function buildHints(cascade, input) {
+function collectHints(cascade, input) {
     if (input.style['display'] === undefined)
         return [];
+    const declaredDisplay = cascade.get('display')?.winner?.value;
     const ctx = {
         style: input.style,
         parentStyle: input.parentStyle,
+        declaredDisplay: declaredDisplay === input.style['display'] ? undefined : declaredDisplay,
         replaced: input.replaced,
         formControl: input.formControl === true,
     };
@@ -114,14 +141,26 @@ function buildHints(cascade, input) {
         ...inactiveHints(cascade, ctx),
         ...undefinedVariableHints(cascade, input.style),
         ...formControlFontHints(cascade, ctx),
-    ].map((hint) => ({
+    ];
+}
+/**
+ * A hint as the result shows it, with where its declaration is.
+ *
+ * @param hint - Hint
+ * @param input - The label function
+ * @returns Result hint
+ */
+function toInspectHint(hint, input) {
+    return {
         kind: hint.kind,
         property: hint.property,
         value: hint.value,
         reason: hint.reason,
         fix: hint.fix,
+        ...(hint.only && { only: hint.only }),
+        ...(hint.variables && { variables: hint.variables }),
         source: input.label(hint.declaration),
-    }));
+    };
 }
 /**
  * `--rules`: one row per property set by an author declaration; one row for
@@ -139,16 +178,22 @@ function buildRules(groups, cascade, input) {
     const rows = groups.flatMap((group) => {
         const resolutions = group.longhands.map((longhand) => cascade.get(longhand));
         const winners = resolutions.map((resolution) => resolution?.winner);
-        const grouped = group.shorthand !== undefined ? groupedRow(group.shorthand, winners) : undefined;
-        if (grouped)
-            return [toRule(grouped.property, grouped, resolutions[0], input)];
+        const grouped = group.shorthand !== undefined ? groupedRow(winners) : undefined;
+        if (grouped) {
+            const longhands = shorthandLonghands(grouped.property) ?? group.longhands;
+            const partly = longhands.some((longhand) => {
+                const owner = cascade.get(longhand)?.winner;
+                return (owner !== undefined && !(sameSource(owner, grouped) && owner.via === grouped.property));
+            });
+            return [toRule(grouped.property, grouped, resolutions[0], input, longhands, partly)];
+        }
         return group.longhands.flatMap((longhand, i) => {
             const winner = winners[i];
-            if (!winner || winner.source.origin === 'user-agent')
+            if (!winner || (winner.source.origin === 'user-agent' && !input.props))
                 return [];
             const unexpanded = winner.via !== undefined && winner.value === winner.written;
             return unexpanded && winner.via
-                ? [toRule(winner.via, winner, resolutions[i], input)]
+                ? [toRule(winner.via, winner, resolutions[i], input, [longhand])]
                 : [toRule(longhand, winner, resolutions[i], input)];
         });
     });
@@ -163,28 +208,20 @@ function buildRules(groups, cascade, input) {
 }
 /**
  * One row for a group of longhands that a single author declaration sets:
- * the shorthand as written, or (set by a wider shorthand, like `border`
- * for `border-width`) the values it gives the sides; a wider shorthand
- * Chrome could not expand (`var()`) as written.
+ * that declaration as written (`padding: 4px 8px`; a wider shorthand like
+ * `border: none` once, not once per `border-width`/`-style`/`-color` group).
  *
- * @param shorthand - The group's shorthand
  * @param winners - Winning declaration of each longhand
  * @returns The row's declaration, or undefined when the sides differ in source
  */
-function groupedRow(shorthand, winners) {
+function groupedRow(winners) {
     const [first] = winners;
     if (!first?.via || first.source.origin === 'user-agent')
         return undefined;
     const same = winners.every((w) => w && w.via === first.via && sameSource(w, first));
     if (!same)
         return undefined;
-    const written = first.written ?? first.value;
-    if (first.via === shorthand || first.value === written) {
-        return { ...first, property: first.via, value: written };
-    }
-    const values = winners.map((w) => w?.value ?? '');
-    const value = values.every((v) => v === first.value) ? first.value : values.join(' ');
-    return { ...first, property: shorthand, value };
+    return { ...first, property: first.via, value: first.written ?? first.value };
 }
 /**
  * Whether two declarations come from the same place.
@@ -200,6 +237,26 @@ function sameSource(a, b) {
         a.source.line === b.source.line &&
         a.source.column === b.source.column);
 }
+/**
+ * The computed value of a row shown as a shorthand or logical property,
+ * from its longhands: as `--all` writes it (`padding 4 8`), else the
+ * longhands' values with runs of equal ones written once (`border` →
+ * `2px solid red`).
+ *
+ * @param property - Shorthand or logical property
+ * @param longhands - Its longhands
+ * @param style - Computed longhands
+ * @returns Value, or undefined when no longhand has one
+ */
+function shorthandValue(property, longhands, style) {
+    const collapsed = collapsedValue(property, style);
+    if (collapsed !== undefined)
+        return collapsed;
+    const values = longhands.map((longhand) => style[longhand]);
+    if (values.some((value) => value === undefined))
+        return undefined;
+    return values.filter((value, i) => i === 0 || value !== values[i - 1]).join(' ');
+}
 /**
  * A `--rules` row.
  *
@@ -207,21 +264,38 @@ function sameSource(a, b) {
  * @param winner - Winning declaration
  * @param resolution - Its resolution (for what it overrides)
  * @param input - Computed style and the label function
+ * @param longhands - The longhands the row stands for (a shorthand's value comes from them)
+ * @param partly - Other declarations win some of its longhands: the value shown is
+ *   the declaration's own, `var()` substituted, not the computed one
  * @returns Rule
  */
-function toRule(property, winner, resolution, input) {
-    const computed = input.style[property];
+function toRule(property, winner, resolution, input, longhands = [property], partly = false) {
+    const substituted = substituteVariables(winner.value, input.style);
+    const computed = partly
+        ? substituted.includes('var(')
+            ? undefined
+            : substituted
+        : (input.style[property] ?? shorthandValue(property, longhands, input.style));
     const overrides = [
         ...new Set((resolution?.overridden ?? [])
             .filter((d) => d.source.origin !== 'user-agent')
-            .map((d) => d.source.selector ?? d.source.kind)),
+            .map((d) => d.source.selector !== undefined && d.source.selector === winner.source.selector
+            ? input.label(d)
+            : (d.source.selector ?? d.source.kind))),
     ];
     return {
         property,
         value: winner.value,
         ...(winner.value.includes('var(') &&
-            computed !== undefined && { computed: normalizeProperty(property, computed) }),
+            computed !== undefined && {
+            computed: `${normalizeProperty(property, computed)}${partly ? ' (partly overridden)' : ''}`,
+        }),
+        ...(property === 'display' &&
+            computed !== undefined &&
+            computed !== winner.value &&
+            /^(inline|table-|ruby)/.test(winner.value) && { computed: `${computed} (blockified)` }),
         source: input.label(winner),
+        ...ruleField(winner),
         ...(overrides.length > 0 && { overrides }),
         ...(winner.ancestor !== undefined && { inherited: winner.ancestor }),
         ...(winner.important && { important: true }),

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

@@ -4,8 +4,10 @@
  * checked against authored declarations only (never the browser's own
  * styles), and `var()` references to custom properties that are not set.
  */
+import type { InspectHint } from '../../ipc/protocol/inspectTypes.js';
 import type { Declaration, Resolution } from './inspectCascade.js';
 import type { StyleMap } from './inspectLayoutModel.js';
+import type { VariableSetter } from './inspectScripts.js';
 /** A declaration that has no effect */
 export interface CssHint {
     kind: 'inactive' | 'unset-variable' | 'not-inherited';
@@ -17,6 +19,10 @@ export interface CssHint {
     reason: string;
     /** What would make it work */
     fix: string;
+    /** The longhands of a shorthand that have no effect, when the others do (`margin-top`, `margin-bottom`) */
+    only?: string[];
+    /** The custom properties that are not set (`unset-variable`) */
+    variables?: string[];
     /** The declaration */
     declaration: Declaration;
 }
@@ -24,15 +30,19 @@ export interface CssHint {
 interface HintContext {
     style: StyleMap;
     parentStyle: StyleMap | undefined;
+    /** `display` as the winning declaration wrote it, when it differs from the computed one (blockified) */
+    declaredDisplay?: string | undefined;
     /** The element is replaced (img, input, video…) */
     replaced: boolean;
     /** The element is a form control (input, textarea, select, button) */
     formControl?: boolean;
 }
 /**
- * Declarations of the element that have no effect: every longhand a
- * declaration wins is inactive (`margin: 0 4px` on an inline element still
- * moves it sideways, `gap` on a multi-column block still spaces the columns).
+ * Declarations of the element that have no effect: the longhands a
+ * declaration wins that are inactive, unless they only restate a default.
+ * When only some of a `margin` shorthand's longhands are inactive
+ * (`margin: 8px 12px` on an inline element: the sides still move it), the
+ * hint names those; other partly inactive shorthands are not hinted.
  *
  * @param cascade - Resolved properties (winning declarations are checked)
  * @param ctx - Computed styles of the element and its parent
@@ -49,6 +59,19 @@ export declare function inactiveHints(cascade: Map<string, Resolution>, ctx: Hin
  * @returns Hints
  */
 export declare function undefinedVariableHints(cascade: Map<string, Resolution>, style: StyleMap): CssHint[];
+/**
+ * Unset-variable hints told where the page does set the variable, when it
+ * does: only in a rule that does not match now (`.btn:hover`: expected in
+ * the other state), only in `@keyframes` (while the animation runs), or to
+ * `inherit`/`initial`/an empty value in a rule that matches (nothing above
+ * gives it a value). A set variable is not a typo, so the "did you mean"
+ * suggestion goes.
+ *
+ * @param hints - Hints of the result
+ * @param setters - Where each variable is set, by name ({@link VARIABLE_SETTERS_JS})
+ * @returns Hints
+ */
+export declare function explainUnsetVariables(hints: readonly InspectHint[], setters: Readonly<Record<string, VariableSetter>>): InspectHint[];
 /**
  * A form control drawn in the browser's font while its parent uses another:
  * controls do not inherit the font unless told to (a common oversight).

package/dist/runtime/dom/inspectHints.js

@@ -4,12 +4,14 @@
  * checked against authored declarations only (never the browser's own
  * styles), and `var()` references to custom properties that are not set.
  */
+import { isDefaultValue } from './inspectAllStyles.js';
 import { unsetVariables } from './inspectVariables.js';
 import { findSimilarNames } from '../../utils/suggestions.js';
 const display = (style) => style?.['display'] ?? 'inline';
 const isFlex = (value) => /(^|-)flex$/.test(value);
 const isGrid = (value) => /(^|-)grid$/.test(value);
 const isFlexOrGrid = (value) => isFlex(value) || isGrid(value);
+const horizontal = (style) => (style['writing-mode'] ?? 'horizontal-tb') === 'horizontal-tb';
 const isMulticol = (style) => (style['column-count'] ?? 'auto') !== 'auto' || (style['column-width'] ?? 'auto') !== 'auto';
 /** The checks, in DevTools' wording */
 const RULES = [
@@ -120,7 +122,7 @@ const RULES = [
     },
     {
         properties: ['margin-top', 'margin-bottom'],
-        inactive: ({ style, replaced }) => display(style) === 'inline' && !replaced
+        inactive: ({ style, replaced }) => display(style) === 'inline' && !replaced && horizontal(style)
             ? {
                 reason: 'display is inline (vertical margins do not move it)',
                 fix: 'use display: inline-block or block',
@@ -129,10 +131,10 @@ const RULES = [
     },
     {
         properties: ['vertical-align'],
-        inactive: ({ style }) => /^(inline|inline-block|inline-flex|inline-grid|table-cell)$/.test(display(style))
+        inactive: ({ style, parentStyle, declaredDisplay }) => /^(inline|table-cell|ruby)/.test(display(style))
             ? undefined
             : {
-                reason: `display is ${display(style)}`,
+                reason: `display is ${display(style)}${blockified(declaredDisplay, style, parentStyle)}`,
                 fix: 'vertical-align works on inline and table-cell boxes; use flex alignment instead',
             },
     },
@@ -165,9 +167,58 @@ const RULES = [
     },
 ];
 /**
- * Declarations of the element that have no effect: every longhand a
- * declaration wins is inactive (`margin: 0 4px` on an inline element still
- * moves it sideways, `gap` on a multi-column block still spaces the columns).
+ * Why a declared inline-level display computes to a block-level one: the
+ * element is a flex or grid item, floated or positioned (CSS blockification).
+ *
+ * @param declared - `display` as written, when it differs from the computed one
+ * @param style - Computed styles
+ * @param parentStyle - Computed styles of the layout parent
+ * @returns ` (inline-flex blockified: a flex item)`, or empty
+ */
+function blockified(declared, style, parentStyle) {
+    if (!declared || declared === display(style) || !/^(inline|table-|ruby)/.test(declared))
+        return '';
+    const parent = display(parentStyle);
+    const cause = isFlex(parent)
+        ? 'a flex item'
+        : isGrid(parent)
+            ? 'a grid item'
+            : (style['float'] ?? 'none') !== 'none'
+                ? 'floated'
+                : /^(absolute|fixed)$/.test(style['position'] ?? '')
+                    ? 'positioned'
+                    : 'by its context';
+    return ` (${declared} blockified: ${cause})`;
+}
+/**
+ * Shorthands whose inactive longhands are worth a hint while the others
+ * work: vertical margins of an inline element are a common mistake, while
+ * `gap` in a multi-column block or `grid-template-areas: none` are not
+ */
+const PARTIAL_SHORTHANDS = new Set(['margin', 'margin-block']);
+/** Values that change nothing wherever they are written */
+const NO_OP_KEYWORDS = new Set(['initial', 'unset', 'revert', 'revert-layer']);
+/**
+ * Whether a declared longhand value is its default, so writing it has no
+ * effect in any case (`vertical-align: baseline`, `margin-top: 0` from a
+ * reset): such declarations are not worth a hint.
+ *
+ * @param declaration - Declaration of a longhand
+ * @returns True for a default value
+ */
+function isNoOp(declaration) {
+    const value = declaration.value.trim().toLowerCase();
+    if (NO_OP_KEYWORDS.has(value))
+        return true;
+    const zero = /^[+-]?0*\.?0+([a-z]+|%)?$/.test(value) ? '0px' : value;
+    return isDefaultValue(declaration.property, value) || isDefaultValue(declaration.property, zero);
+}
+/**
+ * Declarations of the element that have no effect: the longhands a
+ * declaration wins that are inactive, unless they only restate a default.
+ * When only some of a `margin` shorthand's longhands are inactive
+ * (`margin: 8px 12px` on an inline element: the sides still move it), the
+ * hint names those; other partly inactive shorthands are not hinted.
  *
  * @param cascade - Resolved properties (winning declarations are checked)
  * @param ctx - Computed styles of the element and its parent
@@ -176,16 +227,21 @@ const RULES = [
 export function inactiveHints(cascade, ctx) {
     return [...ownWinnersByDeclaration(cascade).values()].flatMap((winners) => {
         const checks = winners.map((declaration) => RULES.find((rule) => rule.properties.includes(declaration.property))?.inactive(ctx));
+        const inactive = winners.filter((declaration, i) => checks[i] && !isNoOp(declaration));
         const [first] = winners;
-        const [inactive] = checks;
-        if (!first || !inactive || checks.some((check) => !check))
+        const reason = checks.find(Boolean);
+        const partial = checks.some((check) => !check);
+        if (!first || !reason || inactive.length === 0)
+            return [];
+        if (partial && !PARTIAL_SHORTHANDS.has(first.via ?? ''))
             return [];
         return [
             {
                 kind: 'inactive',
                 property: first.via ?? first.property,
                 value: first.written ?? first.value,
-                ...inactive,
+                ...reason,
+                ...(partial && { only: inactive.map((declaration) => declaration.property) }),
                 declaration: first,
             },
         ];
@@ -243,11 +299,71 @@ export function undefinedVariableHints(cascade, style) {
             value,
             reason: `${missing.join(', ')} is not set`,
             fix: variableFix(missing[0] ?? '', style),
+            variables: missing,
             declaration,
         });
     }
     return hints;
 }
+/**
+ * Unset-variable hints told where the page does set the variable, when it
+ * does: only in a rule that does not match now (`.btn:hover`: expected in
+ * the other state), only in `@keyframes` (while the animation runs), or to
+ * `inherit`/`initial`/an empty value in a rule that matches (nothing above
+ * gives it a value). A set variable is not a typo, so the "did you mean"
+ * suggestion goes.
+ *
+ * @param hints - Hints of the result
+ * @param setters - Where each variable is set, by name ({@link VARIABLE_SETTERS_JS})
+ * @returns Hints
+ */
+export function explainUnsetVariables(hints, setters) {
+    return hints.map((hint) => {
+        const variables = hint.variables ?? [];
+        const name = variables.find((variable) => setters[variable]);
+        const setter = name ? setters[name] : undefined;
+        if (!name || !setter)
+            return hint;
+        const explained = setterExplanation(name, setter);
+        if (variables.every((variable) => setters[variable]))
+            return { ...hint, ...explained };
+        return { ...hint, reason: `${hint.reason}; ${explained.reason}` };
+    });
+}
+/**
+ * Why a variable that the page sets is unset here, and the fix.
+ *
+ * @param name - Variable
+ * @param setter - Where it is set
+ * @returns Reason and fix
+ */
+function setterExplanation(name, setter) {
+    const fallback = 'give var() a fallback';
+    if (setter.keyframes) {
+        return {
+            reason: `${name} is set only in @keyframes ${setter.keyframes} (while it runs)`,
+            fix: `${fallback} for when the animation is not running`,
+        };
+    }
+    if (setter.condition) {
+        return {
+            reason: `${name} is set only by ${setter.selector} under ${setter.condition}, which does not apply now`,
+            fix: `expected under other conditions; otherwise ${fallback}`,
+        };
+    }
+    if (setter.matches) {
+        return {
+            reason: `${name} is set to ${setter.value === '' ? 'an empty value' : setter.value} by ${setter.selector}, and nothing above gives it a value`,
+            fix: `set ${name} on an ancestor, or ${fallback}`,
+        };
+    }
+    return {
+        reason: setter.matches === null
+            ? `${name} is set only by ${setter.selector} (whether it applies here is not known)`
+            : `${name} is set only by ${setter.selector}, which does not match now`,
+        fix: `expected in that state; otherwise ${fallback}`,
+    };
+}
 /**
  * How to fix a `var()` of an unset custom property, naming a similar one
  * that is set (a typo or a renamed token).

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

@@ -16,7 +16,10 @@ export interface InspectSources {
     raw: RawInspect;
     style: StyleMap;
     parentStyle?: StyleMap;
+    /** Computed styles of the descendant that draws the text, when it is not the element */
+    holderStyle?: StyleMap;
     pseudo: PseudoSource[];
+    /** Platform fonts of the text (of the descendant that draws it, when there is one) */
     fonts: PlatformFont[];
     /** Border box size from `DOM.getBoxModel`; absent when the element has no box */
     size?: {
@@ -49,7 +52,8 @@ export interface InspectRequest {
     propValues?: InspectResult['props'];
 }
 /**
- * The element's label: tag, id and the first classes, with a count of the rest.
+ * The element's label: tag, id and the first classes ({@link isLabelClass}),
+ * with a count of the rest.
  *
  * @param raw - Tag, id and classes
  * @returns e.g. `a.z-1.max-sm:hidden(+11)`, `input#user-name`

package/dist/runtime/dom/inspectModel.js

@@ -5,26 +5,29 @@
  * tree. Pure: every input is plain data, so the rules are tested without a
  * browser.
  */
+import { isLabelClass } from './elementInfo.js';
 import { allStyles } from './inspectAllStyles.js';
 import { buildBox, buildLayout } from './inspectLayoutModel.js';
-import { buildEffects, buildFills, buildFx, buildOutline, buildPseudo, buildRadius, buildState, buildStrokes, buildText, effectiveBackground, } from './inspectPaintModel.js';
+import { buildEffects, buildFills, buildSvgPaint, buildFx, buildOutline, buildPseudo, buildRadius, buildState, buildStrokes, buildText, effectiveBackground, } from './inspectPaintModel.js';
 import { buildTree, rowText } from './inspectTree.js';
 import { hexColor, relativeLuminance } from '../../utils/color.js';
 import { normalizeCssValue, round1 } from '../../utils/cssValues.js';
 /** Classes shown in the label (the rest are counted) */
 const LABEL_CLASSES = 2;
 /**
- * The element's label: tag, id and the first classes, with a count of the rest.
+ * The element's label: tag, id and the first classes ({@link isLabelClass}),
+ * with a count of the rest.
  *
  * @param raw - Tag, id and classes
  * @returns e.g. `a.z-1.max-sm:hidden(+11)`, `input#user-name`
  */
 export function elementLabel(raw) {
-    const shown = raw.classes
+    const classes = raw.classes.filter(isLabelClass);
+    const shown = classes
         .slice(0, LABEL_CLASSES)
         .map((name) => `.${name}`)
         .join('');
-    const more = raw.classes.length - LABEL_CLASSES;
+    const more = classes.length - LABEL_CLASSES;
     return `${raw.tag}${raw.id ? `#${raw.id}` : ''}${shown}${more > 0 ? `(+${more})` : ''}`;
 }
 /**
@@ -48,8 +51,33 @@ export function visibilityOf(layout, rendered) {
         ...(offscreen && { offscreen }),
         ...(layout.coveredBy && { coveredBy: layout.coveredBy }),
         ...(layout.coverTransparent && { coverTransparent: true }),
+        ...(layout.masked && { masked: layout.masked }),
     };
 }
+/**
+ * The header rectangle: border box size (and the box it covers on screen
+ * when a transform turns it), and the page position, or the
+ * viewport position of an element fixed to the viewport (it or a container
+ * is `position: fixed`: its page position changes with the scroll).
+ *
+ * @param layout - Layout measurements
+ * @param size - Border box size
+ * @param style - Computed styles (transforms)
+ * @returns Rectangle
+ */
+function headerRect(layout, size, style) {
+    const { width, height } = layout.bounds;
+    const transformed = ['transform', 'rotate', 'scale'].some((name) => (style[name] ?? 'none') !== 'none');
+    const turned = transformed && (Math.abs(width - size.w) > 1 || Math.abs(height - size.h) > 1);
+    const box = {
+        w: round1(size.w),
+        h: round1(size.h),
+        ...(turned && { screen: { w: width, h: height } }),
+    };
+    return layout.fixed
+        ? { x: layout.viewport.x, y: layout.viewport.y, ...box, in: 'viewport' }
+        : { x: layout.bounds.x, y: layout.bounds.y, ...box };
+}
 /** Below this relative luminance a page background counts as dark */
 const DARK_LUMINANCE = 0.18;
 /**
@@ -72,10 +100,7 @@ function header(sources, request) {
         ...(content && { content }),
         ...(raw.placeholder && { placeholder: rowText(raw.placeholder) }),
         ...(raw.context && { context: raw.context }),
-        ...(size &&
-            layout && {
-            rect: { x: layout.bounds.x, y: layout.bounds.y, w: round1(size.w), h: round1(size.h) },
-        }),
+        ...(size && layout && { rect: headerRect(layout, size, sources.style) }),
         visibility: visibilityOf(layout, size !== undefined),
         ...(sources.colorScheme && { colorScheme: sources.colorScheme }),
         ...(sources.colorScheme === 'dark' && pageLooksDark(raw) && { theme: 'dark' }),
@@ -104,8 +129,9 @@ function pageLooksDark(raw) {
  */
 function groups(sources) {
     const { style, parentStyle, raw } = sources;
-    const text = buildText(style, parentStyle, raw, sources.fonts);
+    const text = buildText({ style, parentStyle, holderStyle: sources.holderStyle }, raw, sources.fonts);
     const fills = buildFills(style);
+    const paint = buildSvgPaint(style, raw);
     const strokes = buildStrokes(style);
     const radius = buildRadius(style);
     const outline = buildOutline(style);
@@ -120,6 +146,7 @@ function groups(sources) {
         layout: buildLayout(style, parentStyle, raw),
         ...(text && { text }),
         ...(fills.length > 0 && { fills }),
+        ...(paint && { paint }),
         ...(opacity !== 1 && { opacity }),
         ...(blend && blend !== 'normal' && { blend }),
         ...(strokes.length > 0 && { strokes }),
@@ -156,7 +183,7 @@ function treeFields(raw, limit) {
  * @returns Properties and values
  */
 function allFields(sources) {
-    const all = allStyles(sources.style, sources.raw.svg === true);
+    const all = allStyles(sources.style, sources.raw.svg === true, sources.raw.formControl);
     for (const pseudo of sources.pseudo) {
         const content = pseudo.style['content'];
         if (content && content !== 'none' && content !== 'normal') {