browser-debugger-cli 0.10.0 → 0.12.0

package/dist/runtime/dom/inspectCascade.js

@@ -13,6 +13,7 @@
  * writing). With no declaration of its own, an inherited property comes from
  * the nearest ancestor that declares it.
  */
+import { truncateByLength } from '../../utils/strings.js';
 /**
  * The four side longhands of a pattern.
  *
@@ -64,9 +65,37 @@ const SHORTHANDS = {
         `border-${side}`,
         ['width', 'style', 'color'].map((part) => `border-${side}-${part}`),
     ])),
-    background: ['background-color', 'background-image'],
+    background: [
+        'background-color',
+        'background-image',
+        'background-position-x',
+        'background-position-y',
+        'background-size',
+        'background-repeat',
+        'background-origin',
+        'background-clip',
+        'background-attachment',
+    ],
     font: ['font-style', 'font-weight', 'font-size', 'line-height', 'font-family'],
     flex: ['flex-grow', 'flex-shrink', 'flex-basis'],
+    'flex-flow': ['flex-direction', 'flex-wrap'],
+    outline: ['outline-width', 'outline-style', 'outline-color'],
+    'text-decoration': [
+        'text-decoration-line',
+        'text-decoration-style',
+        'text-decoration-color',
+        'text-decoration-thickness',
+    ],
+    transition: [
+        'transition-property',
+        'transition-duration',
+        'transition-timing-function',
+        'transition-delay',
+        'transition-behavior',
+    ],
+    'background-position': ['background-position-x', 'background-position-y'],
+    'list-style': ['list-style-position', 'list-style-image', 'list-style-type'],
+    columns: ['column-width', 'column-count'],
     'place-items': ['align-items', 'justify-items'],
     'place-content': ['align-content', 'justify-content'],
     'place-self': ['align-self', 'justify-self'],
@@ -91,35 +120,31 @@ const LOGICAL_SIDES = {
     'inline-start': 'left',
     'inline-end': 'right',
 };
-/** Properties that inherit (those `dom inspect` reports) */
+/** Longhands that inherit (CSS, SVG and the prefixed ones Chrome computes) */
 const INHERITED = new Set([
-    'color',
-    'font-family',
-    'font-size',
-    'font-style',
-    'font-weight',
-    'font-variant',
-    'font-feature-settings',
-    'font-variation-settings',
-    'line-height',
-    'letter-spacing',
-    'word-spacing',
-    'text-align',
-    'text-indent',
-    'text-transform',
-    'text-shadow',
-    'white-space-collapse',
-    'text-wrap-mode',
-    'visibility',
-    'cursor',
-    'direction',
-    'list-style-type',
-    'list-style-position',
-    'tab-size',
-    'pointer-events',
-    'user-select',
-    '-webkit-text-security',
-]);
+    'color caret-color accent-color color-scheme forced-color-adjust print-color-adjust',
+    'font-family font-size font-style font-weight font-stretch font-size-adjust font-kerning',
+    'font-optical-sizing font-palette font-language-override font-feature-settings',
+    'font-variation-settings font-variant font-variant-caps font-variant-ligatures',
+    'font-variant-numeric font-variant-east-asian font-variant-alternates',
+    'font-variant-position font-variant-emoji font-synthesis-weight font-synthesis-style',
+    'font-synthesis-small-caps line-height letter-spacing word-spacing text-align',
+    'text-align-last text-indent text-justify text-transform text-shadow text-rendering',
+    'text-size-adjust text-underline-position text-underline-offset text-decoration-skip-ink',
+    'text-emphasis-style text-emphasis-color text-emphasis-position text-orientation',
+    'text-wrap-mode text-wrap-style text-spacing-trim text-autospace white-space-collapse',
+    'word-break overflow-wrap line-break hyphens hyphenate-character hyphenate-limit-chars',
+    'tab-size direction writing-mode ruby-position ruby-align visibility cursor',
+    'pointer-events user-select interpolate-size list-style-type list-style-position',
+    'list-style-image quotes border-collapse border-spacing caption-side empty-cells orphans',
+    'widows image-rendering fill fill-opacity fill-rule stroke stroke-width stroke-opacity',
+    'stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit',
+    'paint-order marker-start marker-mid marker-end clip-rule color-interpolation',
+    'color-interpolation-filters color-rendering shape-rendering text-anchor dominant-baseline',
+    'math-depth math-style math-shift scrollbar-color text-combine-upright',
+    '-webkit-text-security -webkit-text-fill-color',
+    '-webkit-text-stroke-color -webkit-text-stroke-width',
+].flatMap((names) => names.split(' ')));
 /**
  * The longhands of a shorthand.
  *
@@ -133,10 +158,30 @@ export function shorthandLonghands(name) {
  * Whether a property inherits.
  *
  * @param property - Longhand
- * @returns True for inherited properties (custom properties inherit)
+ * @param notInherited - Custom properties registered with `inherits: false`
+ * @returns True for inherited properties (custom properties inherit unless
+ *   registered otherwise)
+ */
+export function isInherited(property, notInherited) {
+    if (property.startsWith('--'))
+        return !notInherited?.has(property);
+    return INHERITED.has(property);
+}
+/**
+ * Custom properties registered not to inherit, with `@property` or
+ * `CSS.registerProperty`.
+ *
+ * @param matched - `CSS.getMatchedStylesForNode` response
+ * @returns Their names
  */
-export function isInherited(property) {
-    return INHERITED.has(property) || property.startsWith('--');
+function nonInheritingProperties(matched) {
+    const fromRules = (matched.cssPropertyRules ?? [])
+        .filter((rule) => rule.style.cssProperties.some((property) => property.name === 'inherits' && property.value.trim() === 'false'))
+        .map((rule) => rule.propertyName.text);
+    const fromScript = (matched.cssPropertyRegistrations ?? [])
+        .filter((registration) => !registration.inherits)
+        .map((registration) => registration.propertyName);
+    return new Set([...fromRules, ...fromScript]);
 }
 /**
  * The physical longhand a logical property sets.
@@ -211,23 +256,43 @@ function declarationsOf(style, source) {
     });
 }
 /**
- * Source of a matched rule: its matching selector, origin, stylesheet,
- * layer (nested ones as `outer.inner`), the media or container condition
- * it is under (`not all and (…)`, as Chrome writes `not (…)`, shortened) and
- * the selector's specificity.
+ * The selector of a rule's list that matched with the highest specificity
+ * (the one the cascade uses: `.title` of `h1, .title`).
+ *
+ * @param match - CDP rule match
+ * @returns Selector
+ */
+function strongestMatchingSelector(match) {
+    const weight = (value) => {
+        const s = value?.specificity;
+        return s ? s.a * 1e6 + s.b * 1e3 + s.c : -1;
+    };
+    const selectors = match.rule.selectorList.selectors;
+    const matching = match.matchingSelectors.map((index) => selectors[index]);
+    return (matching.reduce((best, value) => (weight(value) > weight(best) ? value : best), matching[0]) ??
+        selectors[0]);
+}
+/**
+ * Source of a matched rule: its matching selector (the strongest of a list),
+ * origin, stylesheet, layer (nested ones as `outer.inner`), the media,
+ * container, `@supports` and `@scope` conditions it is under (`not all and
+ * (…)`, as Chrome writes `not (…)`, shortened) and the selector's specificity.
  *
  * @param match - CDP rule match
  * @returns Declaration source
  */
 function ruleSource(match) {
     const { rule } = match;
-    const matching = rule.selectorList.selectors[match.matchingSelectors[0] ?? 0];
+    const matching = strongestMatchingSelector(match);
     const selector = matching?.text ?? rule.selectorList.text;
     const layer = rule.layers?.map((l) => l.text || '(anonymous)').join('.');
-    const condition = [...(rule.media ?? []), ...(rule.containerQueries ?? [])]
-        .map((c) => c.text.replace(/^not all and /, 'not '))
-        .join(' and ');
+    const condition = [
+        ...[...(rule.media ?? []), ...(rule.containerQueries ?? [])].map((c) => c.text.replace(/^not all and /, 'not ')),
+        ...(rule.supports ?? []).map((c) => `supports ${c.text}`),
+        ...(rule.scopes ?? []).map((c) => `scope ${c.text}`),
+    ].join(' and ');
     const specificity = matching?.specificity;
+    const declarations = rule.style.cssText;
     return {
         kind: 'rule',
         selector,
@@ -236,6 +301,9 @@ function ruleSource(match) {
         ...(rule.styleSheetId && { styleSheetId: rule.styleSheetId }),
         ...(layer && { layer }),
         ...(condition && { condition }),
+        ...(declarations && {
+            rule: { selector: collapse(rule.selectorList.text), declarations: collapse(declarations) },
+        }),
     };
 }
 /**
@@ -248,9 +316,23 @@ function orderedDeclarations(entry) {
     return [
         ...declarationsOf(entry.attributesStyle, { kind: 'attribute' }),
         ...(entry.matchedCSSRules ?? []).flatMap((match) => declarationsOf(match.rule.style, ruleSource(match))),
-        ...declarationsOf(entry.inlineStyle, { kind: 'inline' }),
+        ...declarationsOf(entry.inlineStyle, {
+            kind: 'inline',
+            ...(entry.inlineStyle?.cssText && {
+                rule: { declarations: collapse(entry.inlineStyle.cssText) },
+            }),
+        }),
     ];
 }
+/**
+ * Text with runs of whitespace collapsed to one space.
+ *
+ * @param text - CSS text
+ * @returns Collapsed, trimmed
+ */
+function collapse(text) {
+    return text.replace(/\s+/g, ' ').trim();
+}
 /**
  * Whether a declaration comes from the page's authors (not the browser's
  * own stylesheet or an extension's).
@@ -337,6 +419,7 @@ export function ownProperties(matched) {
 export function resolveCascade(matched, properties) {
     const own = orderedDeclarations(matched);
     const ancestors = (matched.inherited ?? []).map(orderedDeclarations);
+    const notInherited = nonInheritingProperties(matched);
     const resolved = new Map();
     for (const property of properties) {
         const ranked = byPrecedence(own.filter((d) => d.property === property));
@@ -345,7 +428,7 @@ export function resolveCascade(matched, properties) {
             resolved.set(property, { winner, overridden });
             continue;
         }
-        resolved.set(property, inheritedWinner(property, ancestors));
+        resolved.set(property, inheritedWinner(property, ancestors, notInherited));
     }
     return resolved;
 }
@@ -354,11 +437,12 @@ export function resolveCascade(matched, properties) {
  *
  * @param property - Longhand
  * @param ancestors - Declarations of each ancestor, nearest first
+ * @param notInherited - Custom properties registered not to inherit
  * @returns The winner and the declarations it beat on that ancestor (none for
  *   non-inherited properties or when no ancestor sets it)
  */
-function inheritedWinner(property, ancestors) {
-    if (!isInherited(property))
+function inheritedWinner(property, ancestors, notInherited) {
+    if (!isInherited(property, notInherited))
         return { overridden: [] };
     for (const [depth, declarations] of ancestors.entries()) {
         const ranked = byPrecedence(declarations.filter((d) => d.property === property)).map((declaration) => ({ ...declaration, ancestor: depth + 1 }));
@@ -368,4 +452,90 @@ function inheritedWinner(property, ancestors) {
     }
     return { overridden: [] };
 }
+/** Longest rule given whole; a longer one (minified CSS) is cut to the declaration */
+const RULE_TEXT_LENGTH = 300;
+/**
+ * The rule a declaration is in, as written: whole when short, else its
+ * selector and that declaration (`.btn { … background-color:var(--bs-btn-bg); … }`).
+ *
+ * @param declaration - Declaration
+ * @returns `{ rule }`, or nothing for a browser, extension or attribute style
+ */
+export function ruleField(declaration) {
+    const { rule } = declaration.source;
+    if (!rule || !isAuthor(declaration))
+        return {};
+    const whole = ruleText(rule.selector, rule.declarations);
+    if (whole.length <= RULE_TEXT_LENGTH)
+        return { rule: whole };
+    const own = lastDeclarationOf(rule.declarations, declaration.via ?? declaration.property);
+    if (!own)
+        return { rule: truncateByLength(whole, RULE_TEXT_LENGTH) };
+    const selector = rule.selector === undefined ? undefined : truncateByLength(rule.selector, 80);
+    return { rule: ruleText(selector, `… ${truncateByLength(own, RULE_TEXT_LENGTH - 100)}; …`) };
+}
+/**
+ * A rule's text: `selector { declarations }`, or `style="declarations"`.
+ *
+ * @param selector - Selector (absent: the style attribute)
+ * @param declarations - Declarations
+ * @returns Text
+ */
+function ruleText(selector, declarations) {
+    return selector === undefined
+        ? `style="${declarations.replaceAll('"', '\\"')}"`
+        : `${selector} { ${declarations} }`;
+}
+/**
+ * The last declaration of a property in a declaration block (the one that
+ * counts when it is repeated), split at semicolons outside strings and
+ * parentheses (`url(data:image/png;base64,…)` stays whole).
+ *
+ * @param declarations - Declaration block
+ * @param property - Property as written (custom properties are case-sensitive)
+ * @returns The declaration, without its semicolon
+ */
+function lastDeclarationOf(declarations, property) {
+    const name = (part) => {
+        const raw = part.slice(0, part.indexOf(':')).trim();
+        return raw.startsWith('--') ? raw : raw.toLowerCase();
+    };
+    const wanted = property.startsWith('--') ? property : property.toLowerCase();
+    return splitDeclarations(declarations)
+        .filter((part) => part.includes(':') && name(part) === wanted)
+        .at(-1);
+}
+/**
+ * Split a declaration block at its top-level semicolons.
+ *
+ * @param block - Declarations
+ * @returns Declarations, trimmed, empty ones dropped
+ */
+function splitDeclarations(block) {
+    const parts = [];
+    let depth = 0;
+    let quote;
+    let start = 0;
+    for (let i = 0; i < block.length; i++) {
+        const char = block[i];
+        if (quote) {
+            if (char === '\\')
+                i++;
+            else if (char === quote)
+                quote = undefined;
+        }
+        else if (char === '"' || char === "'")
+            quote = char;
+        else if (char === '(')
+            depth++;
+        else if (char === ')')
+            depth = Math.max(0, depth - 1);
+        else if (char === ';' && depth === 0) {
+            parts.push(block.slice(start, i));
+            start = i + 1;
+        }
+    }
+    parts.push(block.slice(start));
+    return parts.map((part) => part.trim()).filter(Boolean);
+}
 //# sourceMappingURL=inspectCascade.js.map

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

@@ -8,6 +8,7 @@ import type { Protocol } from '../../connection/typed-cdp.js';
 import type { InspectResult } from '../../ipc/protocol/inspectTypes.js';
 import { type Declaration } from './inspectCascade.js';
 import type { StyleMap } from './inspectLayoutModel.js';
+import type { InactiveRule } from './inspectScripts.js';
 /** Longhands reported together, so a shorthand can stand for its sides */
 export interface PropertyGroup {
     shorthand?: string;
@@ -25,8 +26,15 @@ export interface CascadeInput {
     why?: string;
     /** `--props` names: `--rules` then covers only these */
     props?: string[];
+    /** Longhands of the `--why` shorthand as the browser expands it */
+    whyLonghands?: string[];
+    /** Computed value of the `--why` shorthand, as the page writes it */
+    whyComputed?: string;
+    /** Rules that set the `--why` property under a condition that does not apply now */
+    whyInactive?: InactiveRule[];
     /** Check for declarations that have no effect (default true) */
     hints?: boolean;
+    /** A form control that draws text (its font is checked against the parent's) */
     formControl?: boolean;
 }
 /**

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 }),