chrome-devtools-frontend 1.0.1571007 → 1.0.1572937

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -10,6 +10,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.js';
 import * as Badges from '../../models/badges/badges.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
@@ -170,7 +171,8 @@ export class EnvFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatch
   // clang-format on
   constructor(
       readonly treeElement: StylePropertyTreeElement|null,
-      readonly matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, readonly computedStyles: Map<string, string>) {
+      readonly matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, readonly computedStyles: Map<string, string>,
+      readonly computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null) {
     super();
   }
   override render(match: SDK.CSSPropertyParserMatchers.EnvFunctionMatch, context: RenderingContext): Node[] {
@@ -187,7 +189,8 @@ export class EnvFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatch
 
     const span = document.createElement('span');
     const func =
-        this.treeElement?.getTracingTooltip('env', match.node, this.matchedStyles, this.computedStyles, context) ??
+        this.treeElement?.getTracingTooltip(
+            'env', match.node, this.matchedStyles, this.computedStyles, this.computedStyleExtraFields, context) ??
         'env';
     const valueClass = classMap({'inactive-value': !match.varNameIsValid});
     const fallbackClass = classMap({'inactive-value': match.varNameIsValid});
@@ -315,14 +318,17 @@ export class VariableRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
   readonly #treeElement: StylePropertyTreeElement|null;
   readonly #matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles;
   readonly #computedStyles: Map<string, string>;
+  readonly #computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null;
   constructor(
       stylesPane: StylesSidebarPane, treeElement: StylePropertyTreeElement|null,
-      matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, computedStyles: Map<string, string>) {
+      matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, computedStyles: Map<string, string>,
+      computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null) {
     super();
     this.#treeElement = treeElement;
     this.#stylesPane = stylesPane;
     this.#matchedStyles = matchedStyles;
     this.#computedStyles = computedStyles;
+    this.#computedStyleExtraFields = computedStyleExtraFields;
   }
 
   override render(match: SDK.CSSPropertyParserMatchers.VariableMatch, context: RenderingContext): Node[] {
@@ -343,7 +349,8 @@ export class VariableRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
             {name: declaration.name, value: declaration.value ?? ''},
             substitution.cachedParsedValue(declaration.declaration, this.#matchedStyles, this.#computedStyles),
             getPropertyRenderers(
-                declaration.name, declaration.style, this.#stylesPane, this.#matchedStyles, null, this.#computedStyles),
+                declaration.name, declaration.style, this.#stylesPane, this.#matchedStyles, null, this.#computedStyles,
+                this.#computedStyleExtraFields),
             substitution);
         cssControls.forEach((value, key) => value.forEach(control => context.addControl(key, control)));
         return nodes;
@@ -355,8 +362,8 @@ export class VariableRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
 
     const renderedFallback = match.fallback ? Renderer.render(match.fallback, context) : undefined;
 
-    const varCall =
-        this.#treeElement?.getTracingTooltip('var', match.node, this.#matchedStyles, this.#computedStyles, context);
+    const varCall = this.#treeElement?.getTracingTooltip(
+        'var', match.node, this.#matchedStyles, this.#computedStyles, this.#computedStyleExtraFields, context);
     const tooltipContents =
         this.#stylesPane.getVariablePopoverContents(this.#matchedStyles, match.name, variableValue ?? null);
     const tooltipId = this.#treeElement?.getTooltipId('custom-property-var');
@@ -427,14 +434,17 @@ export class AttributeRenderer extends rendererBase(SDK.CSSPropertyParserMatcher
   readonly #treeElement: StylePropertyTreeElement|null;
   readonly #matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles;
   readonly #computedStyles: Map<string, string>;
+  readonly #computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null;
   constructor(
       stylesPane: StylesSidebarPane, treeElement: StylePropertyTreeElement|null,
-      matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, computedStyles: Map<string, string>) {
+      matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, computedStyles: Map<string, string>,
+      computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null) {
     super();
     this.#treeElement = treeElement;
     this.#stylesPane = stylesPane;
     this.#matchedStyles = matchedStyles;
     this.#computedStyles = computedStyles;
+    this.#computedStyleExtraFields = computedStyleExtraFields;
   }
 
   override render(match: SDK.CSSPropertyParserMatchers.AttributeMatch, context: RenderingContext): Node[] {
@@ -473,7 +483,8 @@ export class AttributeRenderer extends rendererBase(SDK.CSSPropertyParserMatcher
             .renderValueNodes(
                 {name: '--property', value: match.substitutionText}, matching,
                 getPropertyRenderers(
-                    '--property', match.style, this.#stylesPane, this.#matchedStyles, null, this.#computedStyles),
+                    '--property', match.style, this.#stylesPane, this.#matchedStyles, null, this.#computedStyles,
+                    this.#computedStyleExtraFields),
                 substitution)
             .nodes;
       }
@@ -481,8 +492,8 @@ export class AttributeRenderer extends rendererBase(SDK.CSSPropertyParserMatcher
 
     const renderedFallback = match.fallback ? Renderer.render(match.fallback, context) : undefined;
 
-    const attrCall =
-        this.#treeElement?.getTracingTooltip('attr', match.node, this.#matchedStyles, this.#computedStyles, context);
+    const attrCall = this.#treeElement?.getTracingTooltip(
+        'attr', match.node, this.#matchedStyles, this.#computedStyles, this.#computedStyleExtraFields, context);
     const tooltipId = attributeMissing ? undefined : this.#treeElement?.getTooltipId('custom-attribute');
     const tooltip = tooltipId ? {tooltipId} : undefined;
     // clang-format off
@@ -636,7 +647,7 @@ export class ColorRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.Co
         html`${
             this.#treeElement?.getTracingTooltip(
                 func, match.node, this.#treeElement.matchedStyles(), this.#treeElement.getComputedStyles() ?? new Map(),
-                renderingContext) ??
+                this.#treeElement.getComputedStyleExtraFields(), renderingContext) ??
             func}${nodes}`,
         valueChild);
 
@@ -871,15 +882,18 @@ export class ColorMixRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
   readonly #pane: StylesSidebarPane;
   readonly #matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles;
   readonly #computedStyles: Map<string, string>;
+  readonly #computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null;
   readonly #treeElement: StylePropertyTreeElement|null;
 
   constructor(
       pane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
-      computedStyles: Map<string, string>, treeElement: StylePropertyTreeElement|null) {
+      computedStyles: Map<string, string>, computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null,
+      treeElement: StylePropertyTreeElement|null) {
     super();
     this.#pane = pane;
     this.#matchedStyles = matchedStyles;
     this.#computedStyles = computedStyles;
+    this.#computedStyleExtraFields = computedStyleExtraFields;
     this.#treeElement = treeElement;
   }
 
@@ -915,7 +929,8 @@ export class ColorMixRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
     render(
         html`${
             this.#treeElement?.getTracingTooltip(
-                'color-mix', match.node, this.#matchedStyles, this.#computedStyles, context) ??
+                'color-mix', match.node, this.#matchedStyles, this.#computedStyles, this.#computedStyleExtraFields,
+                context) ??
             'color-mix'}(${Renderer.render(match.space, childRenderingContexts[0]).nodes}, ${color1.nodes}, ${
             color2.nodes})`,
         contentChild);
@@ -1190,12 +1205,13 @@ export class BezierRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.B
 
 // clang-format off
 export class AutoBaseRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.AutoBaseMatch) {
-  readonly #computedStyle: Map<string, string>;
+  readonly #computedStyleExtraFields : Protocol.CSS.ComputedStyleExtraFields|null;
   // clang-format on
 
-  constructor(computedStyle: Map<string, string>) {
+  constructor(
+      computedStyle: Map<string, string>, computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null) {
     super();
-    this.#computedStyle = computedStyle;
+    this.#computedStyleExtraFields = computedStyleExtraFields;
   }
 
   override render(match: SDK.CSSPropertyParserMatchers.AutoBaseMatch, context: RenderingContext): Node[] {
@@ -1209,8 +1225,9 @@ export class AutoBaseRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
     Renderer.renderInto(match.auto, context, auto);
     Renderer.renderInto(match.base, context, base);
 
-    const activeAppearance = this.#computedStyle.get('appearance');
-    if (activeAppearance?.startsWith('base')) {
+    // TODO(crbug.com/475522248): Consider cases with nested elements which
+    // support base appearance and ensure the logic matches StyleAdjuster in blink.
+    if (this.#computedStyleExtraFields?.isAppearanceBase) {
       auto.classList.add('inactive-value');
     } else {
       base.classList.add('inactive-value');
@@ -1668,14 +1685,17 @@ export class BaseFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatc
   readonly #stylesPane: StylesSidebarPane;
   readonly #matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles;
   readonly #computedStyles: Map<string, string>;
+  readonly #computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null;
   readonly #treeElement: StylePropertyTreeElement|null;
   readonly #propertyName: string;
   constructor(
       stylesPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
-      computedStyles: Map<string, string>, propertyName: string, treeElement: StylePropertyTreeElement|null) {
+      computedStyles: Map<string, string>, computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null,
+      propertyName: string, treeElement: StylePropertyTreeElement|null) {
     super();
     this.#matchedStyles = matchedStyles;
     this.#computedStyles = computedStyles;
+    this.#computedStyleExtraFields = computedStyleExtraFields;
     this.#stylesPane = stylesPane;
     this.#treeElement = treeElement;
     this.#propertyName = propertyName;
@@ -1694,7 +1714,8 @@ export class BaseFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatc
     render(
         html`${
             this.#treeElement?.getTracingTooltip(
-                match.func, match.node, this.#matchedStyles, this.#computedStyles, context) ??
+                match.func, match.node, this.#matchedStyles, this.#computedStyles, this.#computedStyleExtraFields,
+                context) ??
             match.func}(${renderedArgs.map((arg, idx) => idx === 0 ? [arg] : [html`, `, arg]).flat()})`,
         span);
 
@@ -1911,11 +1932,12 @@ export class PositionTryRenderer extends rendererBase(SDK.CSSPropertyParserMatch
 export function getPropertyRenderers(
     propertyName: string, style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, stylesPane: StylesSidebarPane,
     matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, treeElement: StylePropertyTreeElement|null,
-    computedStyles: Map<string, string>): Array<MatchRenderer<SDK.CSSPropertyParser.Match>> {
+    computedStyles: Map<string, string>, computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null):
+    Array<MatchRenderer<SDK.CSSPropertyParser.Match>> {
   return [
-    new VariableRenderer(stylesPane, treeElement, matchedStyles, computedStyles),
+    new VariableRenderer(stylesPane, treeElement, matchedStyles, computedStyles, computedStyleExtraFields),
     new ColorRenderer(stylesPane, treeElement),
-    new ColorMixRenderer(stylesPane, matchedStyles, computedStyles, treeElement),
+    new ColorMixRenderer(stylesPane, matchedStyles, computedStyles, computedStyleExtraFields, treeElement),
     new URLRenderer(style.parentRule, stylesPane.node()),
     new AngleRenderer(treeElement),
     new LinkableNameRenderer(matchedStyles, stylesPane),
@@ -1929,15 +1951,17 @@ export function getPropertyRenderers(
     new AnchorFunctionRenderer(stylesPane),
     new PositionAnchorRenderer(stylesPane),
     new FlexGridRenderer(stylesPane, treeElement),
-    new EnvFunctionRenderer(treeElement, matchedStyles, computedStyles),
+    new EnvFunctionRenderer(treeElement, matchedStyles, computedStyles, computedStyleExtraFields),
     new PositionTryRenderer(matchedStyles),
     new LengthRenderer(stylesPane, propertyName, treeElement),
-    new MathFunctionRenderer(stylesPane, matchedStyles, computedStyles, propertyName, treeElement),
-    new CustomFunctionRenderer(stylesPane, matchedStyles, computedStyles, propertyName, treeElement),
-    new AutoBaseRenderer(computedStyles),
+    new MathFunctionRenderer(
+        stylesPane, matchedStyles, computedStyles, computedStyleExtraFields, propertyName, treeElement),
+    new CustomFunctionRenderer(
+        stylesPane, matchedStyles, computedStyles, computedStyleExtraFields, propertyName, treeElement),
+    new AutoBaseRenderer(computedStyles, computedStyleExtraFields),
     new BinOpRenderer(),
     new RelativeColorChannelRenderer(treeElement),
-    new AttributeRenderer(stylesPane, treeElement, matchedStyles, computedStyles),
+    new AttributeRenderer(stylesPane, treeElement, matchedStyles, computedStyles, computedStyleExtraFields),
   ];
 }
 
@@ -1962,6 +1986,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
   private lastComputedValue: string|null = null;
   private computedStyles: Map<string, string>|null = null;
   private parentsComputedStyles: Map<string, string>|null = null;
+  private computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null = null;
   private contextForTest!: Context|undefined;
   #gridNames: Set<string>|undefined = undefined;
   #tooltipKeyCounts = new Map<string, number>();
@@ -2070,6 +2095,14 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     return this.computedStyles;
   }
 
+  setComputedStyleExtraFields(computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null): void {
+    this.computedStyleExtraFields = computedStyleExtraFields;
+  }
+
+  getComputedStyleExtraFields(): Protocol.CSS.ComputedStyleExtraFields|null {
+    return this.computedStyleExtraFields;
+  }
+
   setParentsComputedStyles(parentsComputedStyles: Map<string, string>|null): void {
     this.parentsComputedStyles = parentsComputedStyles;
   }
@@ -2345,10 +2378,11 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
 
     const renderers = this.property.parsedOk ?
         getPropertyRenderers(
-            this.name, this.style, this.#parentPane, this.#matchedStyles, this, this.getComputedStyles() ?? new Map()) :
+            this.name, this.style, this.#parentPane, this.#matchedStyles, this, this.getComputedStyles() ?? new Map(),
+            this.getComputedStyleExtraFields()) :
         [];
 
-    if (Root.Runtime.experiments.isEnabled('font-editor') && this.property.parsedOk) {
+    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.FONT_EDITOR) && this.property.parsedOk) {
       renderers.push(new FontRenderer(this));
     }
     this.listItemElement.removeChildren();
@@ -2544,7 +2578,8 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
 
   getTracingTooltip(
       functionName: string, node: CodeMirror.SyntaxNode, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
-      computedStyles: Map<string, string>, context: RenderingContext): Lit.TemplateResult {
+      computedStyles: Map<string, string>, computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null,
+      context: RenderingContext): Lit.TemplateResult {
     if (context.tracing || !context.property) {
       return html`${functionName}`;
     }
@@ -2569,7 +2604,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
                   ?.showTrace(
                     property, text, matchedStyles, computedStyles,
                     getPropertyRenderers(property.name,
-                      property.ownerStyle, stylesPane, matchedStyles, null, computedStyles),
+                      property.ownerStyle, stylesPane, matchedStyles, null, computedStyles, computedStyleExtraFields),
                     expandPercentagesInShorthands, shorthandPositionOffset, this.openedViaHotkey);
               }
             }}

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -576,14 +576,17 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     const nodeId = this.node()?.id;
     const parentNodeId = this.matchedStyles?.getParentLayoutNodeId();
 
-    const [computedStyles, parentsComputedStyles] =
-        await Promise.all([this.fetchComputedStylesFor(nodeId), this.fetchComputedStylesFor(parentNodeId)]);
+    const [computedStyles, parentsComputedStyles, computedStyleExtraFields] = await Promise.all([
+      this.fetchComputedStylesFor(nodeId), this.fetchComputedStylesFor(parentNodeId),
+      this.fetchComputedStyleExtraFieldsFor(nodeId)
+    ]);
 
     if (signal.aborted) {
       return;
     }
 
-    await this.innerRebuildUpdate(signal, this.matchedStyles, computedStyles, parentsComputedStyles);
+    await this.innerRebuildUpdate(
+        signal, this.matchedStyles, computedStyles, parentsComputedStyles, computedStyleExtraFields);
 
     if (signal.aborted) {
       return;
@@ -633,6 +636,15 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     return await node.domModel().cssModel().getComputedStyle(nodeId);
   }
 
+  private async fetchComputedStyleExtraFieldsFor(nodeId: Protocol.DOM.NodeId|undefined):
+      Promise<Protocol.CSS.ComputedStyleExtraFields|null> {
+    const node = this.node();
+    if (node === null || nodeId === undefined) {
+      return null;
+    }
+    return await node.domModel().cssModel().getComputedStyleExtraFields(nodeId);
+  }
+
   override onResize(): void {
     void this.resizeThrottler.schedule(this.#resize.bind(this));
   }
@@ -914,7 +926,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
   private async innerRebuildUpdate(
       signal: AbortSignal, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null,
-      computedStyles: Map<string, string>|null, parentsComputedStyles: Map<string, string>|null): Promise<void> {
+      computedStyles: Map<string, string>|null, parentsComputedStyles: Map<string, string>|null,
+      computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null): Promise<void> {
     // ElementsSidebarPane's throttler schedules this method. Usually,
     // rebuild is suppressed while editing (see onCSSModelChanged()), but we need a
     // 'force' flag since the currently running throttler process cannot be canceled.
@@ -940,7 +953,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     }
 
     const blocks = await this.rebuildSectionsForMatchedStyleRules(
-        (matchedStyles as SDK.CSSMatchedStyles.CSSMatchedStyles), computedStyles, parentsComputedStyles);
+        (matchedStyles as SDK.CSSMatchedStyles.CSSMatchedStyles), computedStyles, parentsComputedStyles,
+        computedStyleExtraFields);
 
     if (signal.aborted) {
       return;
@@ -1023,13 +1037,16 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
   rebuildSectionsForMatchedStyleRulesForTest(
       matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, computedStyles: Map<string, string>|null,
-      parentsComputedStyles: Map<string, string>|null): Promise<SectionBlock[]> {
-    return this.rebuildSectionsForMatchedStyleRules(matchedStyles, computedStyles, parentsComputedStyles);
+      parentsComputedStyles: Map<string, string>|null,
+      computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null): Promise<SectionBlock[]> {
+    return this.rebuildSectionsForMatchedStyleRules(
+        matchedStyles, computedStyles, parentsComputedStyles, computedStyleExtraFields);
   }
 
   private async rebuildSectionsForMatchedStyleRules(
       matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, computedStyles: Map<string, string>|null,
-      parentsComputedStyles: Map<string, string>|null): Promise<SectionBlock[]> {
+      parentsComputedStyles: Map<string, string>|null,
+      computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null): Promise<SectionBlock[]> {
     if (this.idleCallbackManager) {
       this.idleCallbackManager.discard();
     }
@@ -1077,8 +1094,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
           style.type === SDK.CSSStyleDeclaration.Type.Animation;
       if (lastBlock && (!isTransitionOrAnimationStyle || style.allProperties().length > 0)) {
         this.idleCallbackManager.schedule(() => {
-          const section =
-              new StylePropertiesSection(this, matchedStyles, style, sectionIdx, computedStyles, parentsComputedStyles);
+          const section = new StylePropertiesSection(
+              this, matchedStyles, style, sectionIdx, computedStyles, parentsComputedStyles, computedStyleExtraFields);
           sectionIdx++;
           lastBlock.sections.push(section);
         });
@@ -1151,7 +1168,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
         const lastBlock = blocks[blocks.length - 1];
         this.idleCallbackManager.schedule(() => {
           const section = new HighlightPseudoStylePropertiesSection(
-              this, matchedStyles, style, sectionIdx, computedStyles, parentsComputedStyles);
+              this, matchedStyles, style, sectionIdx, computedStyles, parentsComputedStyles, computedStyleExtraFields);
           sectionIdx++;
           lastBlock.sections.push(section);
         });

package/front_end/panels/elements/components/CSSHintDetailsView.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
+import '../../../ui/kit/kit.js';
 import '../../../ui/legacy/legacy.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -51,9 +52,9 @@ export class CSSHintDetailsView extends HTMLElement {
           ` : ''}
           ${link ? html`
                       <div class="footer">
-                        <x-link id="learn-more" href=${link} class="clickable underlined unbreakable-text">
+                        <devtools-link id="learn-more" href=${link} class="clickable underlined unbreakable-text">
                             ${i18nString(UIStrings.learnMore)}
-                        </x-link>
+                        </devtools-link>
                       </div>
                   `: ''}
         </div>

package/front_end/panels/elements/components/CSSPropertyDocsView.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
+import '../../../ui/kit/kit.js';
 import '../../../ui/legacy/legacy.js';
 
 import * as Common from '../../../core/common/common.js';
@@ -250,13 +251,13 @@ export class CSSPropertyDocsView extends HTMLElement {
         ` : nothing}
         ${link ? html`
           <div class="docs-popup-section footer">
-            <x-link
+            <devtools-link
               id="learn-more"
               href=${link}
               class="clickable underlined unbreakable-text"
             >
               ${i18nString(UIStrings.learnMore)}
-            </x-link>
+            </devtools-link>
             <devtools-checkbox
               @change=${this.#dontShowChanged}
               jslog=${VisualLogging.toggle('css-property-doc').track({ change: true })}>

package/front_end/panels/elements/elements-meta.ts

@@ -238,7 +238,7 @@ UI.ViewManager.registerViewExtension({
 });
 
 UI.ViewManager.registerViewExtension({
-  experiment: Root.Runtime.ExperimentName.CAPTURE_NODE_CREATION_STACKS,
+  experiment: Root.ExperimentNames.ExperimentName.CAPTURE_NODE_CREATION_STACKS,
   location: UI.ViewManager.ViewLocationValues.ELEMENTS_SIDEBAR,
   id: 'elements.dom-creation',
   commandPrompt: i18nLazyString(UIStrings.showStackTrace),

package/front_end/panels/emulation/DeviceModeWrapper.ts

@@ -123,73 +123,47 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
             return;
           }
 
+          // Resolve to a remote object to ensure the node is alive in the context.
           const object = await node.resolveToObject();
           if (!object) {
             return;
           }
-          const result = await object.callFunction(function(this: Element) {
-            function getFrameOffset(frame: Element|null): {x: number, y: number} {
-              if (!frame) {
-                return {x: 0, y: 0};
-              }
-
-              // The offset of the frame's content relative to the frame element
-              // contains the border width and the padding.
-              // The border width.
-              const borderTop = frame.clientTop;
-              const borderLeft = frame.clientLeft;
-
-              // The padding can be retrieved via computed styles.
-              const styles = window.getComputedStyle(frame);
-              const paddingTop = parseFloat(styles.paddingTop);
-              const paddingLeft = parseFloat(styles.paddingLeft);
-
-              // The position of the frame in it's parent.
-              const rect = frame.getBoundingClientRect();
-
-              // The offset of the parent frame's content relative to the
-              // document. If there is no parent frame, the offset is 0.
-              // In case of OOPiF, there is no access to the parent frame's
-              // offset.
-              const parentFrameOffset = getFrameOffset(frame.ownerDocument.defaultView?.frameElement ?? null);
-
-              // The scroll position of the frame.
-              const scrollX = frame.ownerDocument.defaultView?.scrollX ?? 0;
-              const scrollY = frame.ownerDocument.defaultView?.scrollY ?? 0;
-
-              return {
-                x: parentFrameOffset.x + rect.left + borderLeft + paddingLeft + scrollX,
-                y: parentFrameOffset.y + rect.top + borderTop + paddingTop + scrollY,
-              };
-            }
-
-            // The bounding client rect of the node relative to the viewport.
-            const rect = this.getBoundingClientRect();
-            const frameOffset = getFrameOffset(this.ownerDocument.defaultView?.frameElement ?? null);
-
-            // The scroll position of the frame.
-            const scrollX = this.ownerDocument.defaultView?.scrollX ?? 0;
-            const scrollY = this.ownerDocument.defaultView?.scrollY ?? 0;
-
-            // The offset of the node's content relative to the top-level
-            // document is the sum of the element offset relative to the
-            // document's viewport, the document's scroll position, and the
-            // parent's offset relative to the top-level document.
-            return JSON.stringify({
-              x: rect.left + frameOffset.x + scrollX,
-              y: rect.top + frameOffset.y + scrollY,
-              width: rect.width,
-              height: rect.height,
-              scale: 1,
-            });
-          });
-          if (!result.object) {
-            throw new Error('Clipping error: could not get object data.');
+
+          // Get the Box Model via CDP.
+          // This returns the quads relative to the target's viewport.
+          // We use the 'border' quad to include the border and padding in the screenshot,
+          // matching the 'width' and 'height' properties which are also Border Box dimensions.
+          const nodeBoxModel = await node.boxModel();
+          if (!nodeBoxModel) {
+            throw new Error(`Unable to get box model of the node: ${new Error().stack}`);
+          }
+          const nodeBorderQuad = nodeBoxModel.border;
+
+          // Get Layout Metrics to account for the Visual Viewport scroll and zoom.
+          const metrics = await node.domModel().target().pageAgent().invoke_getLayoutMetrics();
+          if (metrics.getError()) {
+            throw new Error(`Unable to get metrics: ${new Error().stack}`);
           }
-          const clip = (JSON.parse((result.object.value as string)));
-          const response = await node.domModel().target().pageAgent().invoke_getLayoutMetrics();
-          const error = response.getError();
-          const zoom = !error && response.visualViewport.zoom || 1;
+
+          const scrollX = metrics.cssVisualViewport.pageX;
+          const scrollY = metrics.cssVisualViewport.pageY;
+
+          // Calculate the global offset for OOPiFs (Out-of-Process iframes).
+          // This accounts for the position of the target's frame within the main page.
+          const {x: oopifOffsetX, y: oopifOffsetY} = await getOopifOffset(node.domModel().target());
+
+          // Assemble the final Clip.
+          // The absolute coordinates are: Global (OOPiF) + Viewport Scroll + Local Node Position (Border Box).
+          const clip = {
+            x: oopifOffsetX + scrollX + nodeBorderQuad[0],
+            y: oopifOffsetY + scrollY + nodeBorderQuad[1],
+            width: nodeBoxModel.width,
+            height: nodeBoxModel.height,
+            scale: 1,
+          };
+
+          // Apply Zoom factor.
+          const zoom = metrics.cssVisualViewport.zoom ?? 1;
           clip.x *= zoom;
           clip.y *= zoom;
           clip.width *= zoom;
@@ -210,3 +184,68 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
     return false;
   }
 }
+
+/**
+ * Calculate the offset of the "Local Root" frame relative to the "Global Root" (the main frame).
+ * This involves traversing the CDP Targets for OOPiFs.
+ */
+async function getOopifOffset(target: SDK.Target.Target|null): Promise<{x: number, y: number}> {
+  if (!target) {
+    return {x: 0, y: 0};
+  }
+
+  // Get the parent target. If there's no parent (we are at root) or it's not a frame, we are done.
+  const parentTarget = target.parentTarget();
+  if (!parentTarget || parentTarget.type() !== SDK.Target.Type.FRAME) {
+    return {x: 0, y: 0};
+  }
+
+  // Identify the current frame's ID to find its owner in the parent.
+  const frameId = target.model(SDK.ResourceTreeModel.ResourceTreeModel)?.mainFrame?.id;
+  if (!frameId) {
+    return {x: 0, y: 0};
+  }
+
+  // Get the DOMModel of the parent to query the frame owner element.
+  const parentDOMModel = parentTarget.model(SDK.DOMModel.DOMModel);
+  if (!parentDOMModel) {
+    return {x: 0, y: 0};
+  }
+
+  // Retrieve the frame owner node (e.g. the <iframe> element) in the parent's document.
+  const frameOwnerDeferred = await parentDOMModel.getOwnerNodeForFrame(frameId);
+  const frameOwner = await frameOwnerDeferred?.resolvePromise();
+  if (!frameOwner) {
+    return {x: 0, y: 0};
+  }
+
+  // Get the content box of the iframe element.
+  // This is relative to the parent target's viewport.
+  const boxModel = await frameOwner.boxModel();
+  if (!boxModel) {
+    return {x: 0, y: 0};
+  }
+
+  // content is a Quad [x1, y1, x2, y2, x3, y3, x4, y4]
+  const contentQuad = boxModel.content;
+  const iframeContentX = contentQuad[0];
+  const iframeContentY = contentQuad[1];
+
+  // Get the scroll position of the parent target to convert viewport-relative coordinates
+  // to document-relative coordinates.
+  const parentMetrics = await parentTarget.pageAgent().invoke_getLayoutMetrics();
+  if (parentMetrics.getError()) {
+    return {x: 0, y: 0};
+  }
+
+  const scrollX = parentMetrics.cssVisualViewport.pageX;
+  const scrollY = parentMetrics.cssVisualViewport.pageY;
+
+  // Recursively add the offset of the parent target itself (if it is also an OOPiF).
+  const parentOffset = await getOopifOffset(parentTarget);
+
+  return {
+    x: iframeContentX + scrollX + parentOffset.x,
+    y: iframeContentY + scrollY + parentOffset.y,
+  };
+}