chrome-devtools-frontend 1.0.1549484 → 1.0.1553956

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -47,6 +47,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import {html, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
+import {AdoptedStyleSheetTreeElement} from './AdoptedStyleSheetTreeElement.js';
 import {getElementIssueDetails} from './ElementIssueUtils.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import {ElementsTreeElement, InitialChildrenLimit, isOpeningTag} from './ElementsTreeElement.js';
@@ -119,8 +120,8 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         ElementsTreeOutline.Events.SelectedNodeChanged, input.onSelectedNodeChanged, this);
     output.elementsTreeOutline.addEventListener(
         ElementsTreeOutline.Events.ElementsTreeUpdated, input.onElementsTreeUpdated, this);
-    output.elementsTreeOutline.addEventListener(UI.TreeOutline.Events.ElementExpanded, input.onElementCollapsed, this);
-    output.elementsTreeOutline.addEventListener(UI.TreeOutline.Events.ElementCollapsed, input.onElementExpanded, this);
+    output.elementsTreeOutline.addEventListener(UI.TreeOutline.Events.ElementExpanded, input.onElementExpanded, this);
+    output.elementsTreeOutline.addEventListener(UI.TreeOutline.Events.ElementCollapsed, input.onElementCollapsed, this);
     target.appendChild(output.elementsTreeOutline.element);
   }
   if (input.visibleWidth !== undefined) {
@@ -198,6 +199,8 @@ export class DOMTreeWidget extends UI.Widget.Widget {
            Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode | null, focus: boolean}>) => void = () => {};
   onElementsTreeUpdated: (event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode[]>) => void = () => {};
   onDocumentUpdated: (domModel: SDK.DOMModel.DOMModel) => void = () => {};
+  onElementExpanded: () => void = () => {};
+  onElementCollapsed: () => void = () => {};
 
   #visible = false;
   #visibleWidth?: number;
@@ -263,7 +266,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
       return;
     }
     this.#currentHighlightedNode = null;
-    this.requestUpdate();
+    this.performUpdate();
   }
 
   selectDOMNode(node: SDK.DOMModel.DOMNode|null, focus?: boolean): void {
@@ -299,6 +302,10 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     return this.#viewOutput.elementsTreeOutline;
   }
 
+  treeElementForNode(node: SDK.DOMModel.DOMNode): ElementsTreeElement|null {
+    return this.#viewOutput.elementsTreeOutline?.findTreeElement(node) || null;
+  }
+
   override performUpdate(): void {
     this.#view(
         {
@@ -318,8 +325,14 @@ export class DOMTreeWidget extends UI.Widget.Widget {
             this.#clearHighlightedNode();
             this.onSelectedNodeChanged(event);
           },
-          onElementCollapsed: this.#clearHighlightedNode.bind(this),
-          onElementExpanded: this.#clearHighlightedNode.bind(this),
+          onElementCollapsed: () => {
+            this.#clearHighlightedNode();
+            this.onElementCollapsed();
+          },
+          onElementExpanded: () => {
+            this.#clearHighlightedNode();
+            this.onElementExpanded();
+          },
         },
         this.#viewOutput, this.contentElement);
   }
@@ -358,7 +371,9 @@ export class DOMTreeWidget extends UI.Widget.Widget {
    * FIXME: adorners should be part of the view input.
    */
   updateNodeAdorners(node: SDK.DOMModel.DOMNode): void {
-    void this.#viewOutput.elementsTreeOutline?.findTreeElement(node)?.updateStyleAdorners();
+    const element = this.#viewOutput.elementsTreeOutline?.findTreeElement(node);
+    void element?.updateStyleAdorners();
+    void element?.updateAdorners();
   }
 
   highlightMatch(node: SDK.DOMModel.DOMNode, query?: string): void {
@@ -939,7 +954,10 @@ export class ElementsTreeOutline extends
     this.dispatchEventToListeners(ElementsTreeOutline.Events.ElementsTreeUpdated, nodes);
   }
 
-  findTreeElement(node: SDK.DOMModel.DOMNode): ElementsTreeElement|null {
+  findTreeElement(node: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet): ElementsTreeElement|null {
+    if (node instanceof SDK.DOMModel.AdoptedStyleSheet) {
+      return null;
+    }
     let treeElement = this.lookUpTreeElement(node);
     if (!treeElement && node.nodeType() === Node.TEXT_NODE) {
       // The text node might have been inlined if it was short, so try to find the parent element.
@@ -1512,6 +1530,7 @@ export class ElementsTreeOutline extends
     domModel.addEventListener(SDK.DOMModel.Events.ScrollableFlagUpdated, this.scrollableFlagUpdated, this);
     domModel.addEventListener(
         SDK.DOMModel.Events.AffectedByStartingStylesFlagUpdated, this.affectedByStartingStylesFlagUpdated, this);
+    domModel.addEventListener(SDK.DOMModel.Events.AdoptedStyleSheetsModified, this.adoptedStyleSheetsModified, this);
   }
 
   unwireFromDOMModel(domModel: SDK.DOMModel.DOMModel): void {
@@ -1528,6 +1547,7 @@ export class ElementsTreeOutline extends
     domModel.removeEventListener(SDK.DOMModel.Events.ScrollableFlagUpdated, this.scrollableFlagUpdated, this);
     domModel.removeEventListener(
         SDK.DOMModel.Events.AffectedByStartingStylesFlagUpdated, this.affectedByStartingStylesFlagUpdated, this);
+    domModel.removeEventListener(SDK.DOMModel.Events.AdoptedStyleSheetsModified, this.adoptedStyleSheetsModified, this);
     elementsTreeOutlineByDOMModel.delete(domModel);
   }
 
@@ -1606,6 +1626,12 @@ export class ElementsTreeOutline extends
     this.updateModifiedNodesSoon();
   }
 
+  private adoptedStyleSheetsModified(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode>): void {
+    const node = event.data;
+    this.addUpdateRecord(node).childrenModified();
+    this.updateModifiedNodesSoon();
+  }
+
   private updateModifiedNodesSoon(): void {
     if (!this.updateRecords.size) {
       return;
@@ -1705,7 +1731,11 @@ export class ElementsTreeOutline extends
     this.#topLayerContainerByParent.set(parent, container);
   }
 
-  private createElementTreeElement(node: SDK.DOMModel.DOMNode, isClosingTag?: boolean): ElementsTreeElement {
+  private createElementTreeElement(node: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet, isClosingTag?: boolean):
+      UI.TreeOutline.TreeElement {
+    if (node instanceof SDK.DOMModel.AdoptedStyleSheet) {
+      return new AdoptedStyleSheetTreeElement(node);
+    }
     const treeElement = new ElementsTreeElement(node, isClosingTag);
     treeElement.setExpandable(!isClosingTag && this.hasVisibleChildren(node));
     if (node.nodeType() === Node.ELEMENT_NODE && node.parentNode && node.parentNode.nodeType() === Node.DOCUMENT_NODE &&
@@ -1737,8 +1767,8 @@ export class ElementsTreeOutline extends
     return treeElement.childAt(index) as ElementsTreeElement;
   }
 
-  private visibleChildren(node: SDK.DOMModel.DOMNode): SDK.DOMModel.DOMNode[] {
-    let visibleChildren = ElementsTreeElement.visibleShadowRoots(node);
+  private visibleChildren(node: SDK.DOMModel.DOMNode): Array<SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet> {
+    let visibleChildren = [...node.adoptedStyleSheetsForNode, ...ElementsTreeElement.visibleShadowRoots(node)];
 
     const contentDocument = node.contentDocument();
     if (contentDocument) {
@@ -1864,8 +1894,8 @@ export class ElementsTreeOutline extends
   }
 
   insertChildElement(
-      treeElement: ElementsTreeElement|TopLayerContainer, child: SDK.DOMModel.DOMNode, index: number,
-      isClosingTag?: boolean): ElementsTreeElement {
+      treeElement: ElementsTreeElement|TopLayerContainer, child: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet,
+      index: number, isClosingTag?: boolean): UI.TreeOutline.TreeElement {
     const newElement = this.createElementTreeElement(child, isClosingTag);
     treeElement.insertChild(newElement, index);
     if (child instanceof SDK.DOMModel.DOMDocument) {
@@ -1897,11 +1927,12 @@ export class ElementsTreeOutline extends
 
     const node = treeElement.node();
     const visibleChildren = this.visibleChildren(node);
-    const visibleChildrenSet = new Set<SDK.DOMModel.DOMNode>(visibleChildren);
+    const visibleChildrenSet = new Set<SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet>(visibleChildren);
 
     // Remove any tree elements that no longer have this node as their parent and save
     // all existing elements that could be reused. This also removes closing tag element.
-    const existingTreeElements = new Map<SDK.DOMModel.DOMNode, UI.TreeOutline.TreeElement&ElementsTreeElement>();
+    const existingTreeElements =
+        new Map<SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet, UI.TreeOutline.TreeElement&ElementsTreeElement>();
     for (let i = treeElement.childCount() - 1; i >= 0; --i) {
       const existingTreeElement = treeElement.childAt(i);
       if (!(existingTreeElement instanceof ElementsTreeElement)) {
@@ -1920,6 +1951,7 @@ export class ElementsTreeOutline extends
       treeElement.removeChildAtIndex(i);
     }
 
+    // Insert child nodes.
     for (let i = 0; i < visibleChildren.length && i < treeElement.expandedChildrenLimit(); ++i) {
       const child = visibleChildren[i];
       const existingTreeElement = existingTreeElements.get(child) || this.findTreeElement(child);
@@ -1929,7 +1961,7 @@ export class ElementsTreeOutline extends
       } else {
         // No existing element found, insert a new element.
         const newElement = this.insertChildElement(treeElement, child, i);
-        if (this.updateRecordForHighlight(node) && treeElement.expanded) {
+        if (this.updateRecordForHighlight(node) && treeElement.expanded && newElement instanceof ElementsTreeElement) {
           ElementsTreeElement.animateOnDOMUpdate(newElement);
         }
         // If a node was inserted in the middle of existing list dynamically we might need to increase the limit.
@@ -2007,6 +2039,7 @@ export class ElementsTreeOutline extends
     const treeElement = this.treeElementByNode.get(node);
     if (treeElement && isOpeningTag(treeElement.tagTypeContext)) {
       void treeElement.updateStyleAdorners();
+      void treeElement.updateAdorners();
     }
   }
 }

package/front_end/panels/elements/ShortcutTreeElement.ts

@@ -37,7 +37,7 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import * as ElementsComponents from './components/components.js';
@@ -77,7 +77,7 @@ export class ShortcutTreeElement extends UI.TreeOutline.TreeElement {
         ElementsComponents.AdornerManager.RegisteredAdorners.REVEAL);
     const name = config.name;
     const adornerContent = document.createElement('span');
-    const linkIcon = IconButton.Icon.create('select-element');
+    const linkIcon = createIcon('select-element');
     const slotText = document.createElement('span');
     slotText.textContent = name;
     adornerContent.append(linkIcon);

package/front_end/panels/elements/StyleEditorWidget.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
 
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import type * as ElementsComponents from './components/components.js';
@@ -120,7 +120,7 @@ export class StyleEditorWidget extends UI.Widget.VBox {
   static createTriggerButton(
       pane: StylesSidebarPane, section: StylePropertiesSection, editorClass: {new(): Editor}, buttonTitle: string,
       triggerKey: string): HTMLElement {
-    const triggerButton = IconButton.Icon.create('flex-wrap', 'styles-pane-button');
+    const triggerButton = createIcon('flex-wrap', 'styles-pane-button');
     triggerButton.title = buttonTitle;
     triggerButton.role = 'button';
 

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -14,8 +14,8 @@ 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';
 import type * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as Tooltips from '../../ui/components/tooltips/tooltips.js';
+import {createIcon, Icon} from '../../ui/kit/kit.js';
 import * as ColorPicker from '../../ui/legacy/components/color_picker/color_picker.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -398,7 +398,7 @@ export class VariableRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
     if (fromFallback) {
       renderedFallback?.cssControls.get('color')?.forEach(
           innerSwatch => innerSwatch.addEventListener(InlineEditor.ColorSwatch.ColorChangedEvent.eventName, ev => {
-            colorSwatch.setColor(ev.data.color);
+            colorSwatch.color = ev.data.color;
           }));
     }
 
@@ -516,7 +516,7 @@ export class AttributeRenderer extends rendererBase(SDK.CSSPropertyParserMatcher
     if (fromFallback) {
       renderedFallback?.cssControls.get('color')?.forEach(
           innerSwatch => innerSwatch.addEventListener(InlineEditor.ColorSwatch.ColorChangedEvent.eventName, ev => {
-            colorSwatch.setColor(ev.data.color);
+            colorSwatch.color = ev.data.color;
           }));
     }
 
@@ -691,19 +691,19 @@ export class ColorRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.Co
         context.ast.text(match.node.getChild('Callee')).match(/^(hsla?|hwba?)/)) {
       const [angle] = cssControls.get('angle') ?? [];
       if (angle instanceof InlineEditor.CSSAngle.CSSAngle) {
-        angle.updateProperty(swatch.getColor()?.asString() ?? '');
+        angle.updateProperty(swatch.color?.asString() ?? '');
         angle.addEventListener(InlineEditor.InlineEditorUtils.ValueChangedEvent.eventName, ev => {
           const hue = Common.Color.parseHueNumeric(ev.data.value);
-          const color = swatch.getColor();
+          const color = swatch.color;
           if (!hue || !color) {
             return;
           }
           if (color.is(Common.Color.Format.HSL) || color.is(Common.Color.Format.HSLA)) {
-            swatch.setColor(new Common.Color.HSL(hue, color.s, color.l, color.alpha));
+            swatch.color = new Common.Color.HSL(hue, color.s, color.l, color.alpha);
           } else if (color.is(Common.Color.Format.HWB) || color.is(Common.Color.Format.HWBA)) {
-            swatch.setColor(new Common.Color.HWB(hue, color.w, color.b, color.alpha));
+            swatch.color = new Common.Color.HWB(hue, color.w, color.b, color.alpha);
           }
-          angle.updateProperty(swatch.getColor()?.asString() ?? '');
+          angle.updateProperty(swatch.color?.asString() ?? '');
         });
       }
     }
@@ -716,9 +716,9 @@ export class ColorRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.Co
     const tooltip = editable ? i18nString(UIStrings.openColorPickerS, {PH1: shiftClickMessage}) : '';
 
     const swatch = new InlineEditor.ColorSwatch.ColorSwatch(tooltip);
-    swatch.setReadonly(!editable);
+    swatch.readonly = !editable;
     if (color) {
-      swatch.renderColor(color);
+      swatch.color = color;
     }
 
     if (this.#treeElement?.editable()) {
@@ -742,7 +742,7 @@ export class ColorRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.Co
           new ColorSwatchPopoverIcon(treeElement, treeElement.parentPane().swatchPopoverHelper(), swatch);
       swatchIcon.addEventListener(ColorSwatchPopoverIconEvents.COLOR_CHANGED, ev => {
         valueChild.textContent = ev.data.getAuthoredText() ?? ev.data.asString();
-        swatch.setColor(ev.data);
+        swatch.color = ev.data;
       });
       if (treeElement.property.name === 'color') {
         void this.#addColorContrastInfo(swatchIcon);
@@ -819,14 +819,15 @@ export class LightDarkColorRenderer extends rendererBase(SDK.CSSPropertyParserMa
 
     const activeColorSwatches = (activeColor === match.light ? lightControls : darkControls).get('color');
     activeColorSwatches?.forEach(
-        swatch => swatch.addEventListener(
-            InlineEditor.ColorSwatch.ColorChangedEvent.eventName, ev => colorSwatch.setColor(ev.data.color)));
+        swatch => swatch.addEventListener(InlineEditor.ColorSwatch.ColorChangedEvent.eventName, ev => {
+          colorSwatch.color = ev.data.color;
+        }));
     const inactiveColor = (activeColor === match.light) ? dark : light;
     const colorText = context.matchedResult.getComputedTextRange(activeColor[0], activeColor[activeColor.length - 1]);
     const color = colorText && Common.Color.parse(colorText);
     inactiveColor.classList.add('inactive-value');
     if (color) {
-      colorSwatch.renderColor(color);
+      colorSwatch.color = color;
     }
   }
 
@@ -948,7 +949,7 @@ export class ColorMixRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
           if (results) {
             const color = Common.Color.parse(results[0]);
             if (color) {
-              swatch.setColor(color.as(Common.Color.Format.HEXA));
+              swatch.color = color.as(Common.Color.Format.HEXA);
               return true;
             }
           }
@@ -1134,7 +1135,7 @@ export class LinkableNameRenderer extends rendererBase(SDK.CSSPropertyParserMatc
             return;
           }
 
-          const icon = IconButton.Icon.create('animation', 'open-in-animations-panel');
+          const icon = createIcon('animation', 'open-in-animations-panel');
           icon.setAttribute('jslog', `${VisualLogging.link('open-in-animations-panel').track({click: true})}`);
           icon.setAttribute('role', 'button');
           icon.setAttribute('title', i18nString(UIStrings.jumpToAnimationsPanel));
@@ -1170,7 +1171,7 @@ export class BezierRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.B
       return nodes;
     }
     const swatchPopoverHelper = this.#treeElement.parentPane().swatchPopoverHelper();
-    const icon = IconButton.Icon.create('bezier-curve-filled', 'bezier-swatch-icon');
+    const icon = createIcon('bezier-curve-filled', 'bezier-swatch-icon');
     icon.setAttribute('jslog', `${VisualLogging.showStyleEditor('bezier')}`);
     icon.tabIndex = -1;
     icon.addEventListener('click', () => {
@@ -1954,7 +1955,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
   private expandedDueToFilter = false;
   valueElement: HTMLElement|null = null;
   nameElement: HTMLElement|null = null;
-  private expandElement: IconButton.Icon.Icon|null = null;
+  private expandElement: Icon|null = null;
   private originalPropertyText = '';
   private hasBeenEditedIncrementally = false;
   private prompt: CSSPropertyPrompt|null = null;
@@ -2338,7 +2339,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     this.#tooltipKeyCounts.clear();
     this.updateState();
     if (this.isExpandable()) {
-      this.expandElement = IconButton.Icon.create('triangle-right', 'expand-icon');
+      this.expandElement = createIcon('triangle-right', 'expand-icon');
       this.expandElement.setAttribute('jslog', `${VisualLogging.expand().track({click: true})}`);
     }
 
@@ -2641,7 +2642,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       if (hint) {
         const wrapper = document.createElement('span');
         wrapper.classList.add('hint-wrapper');
-        const hintIcon = new IconButton.Icon.Icon();
+        const hintIcon = new Icon();
         hintIcon.name = 'info';
         hintIcon.classList.add('hint', 'small');
         hintIcon.tabIndex = -1;

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -44,7 +44,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon, Icon} from '../../ui/kit/kit.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -1504,15 +1504,14 @@ export class SectionBlock {
   readonly #titleElement: Element|null;
   sections: StylePropertiesSection[];
   #expanded = false;
-  #icon: IconButton.Icon.Icon|undefined;
+  #icon: Icon|undefined;
   constructor(titleElement: Element|null, expandable?: boolean, expandedByDefault?: boolean) {
     this.#titleElement = titleElement;
     this.sections = [];
     this.#expanded = expandedByDefault ?? false;
 
     if (expandable && titleElement instanceof HTMLElement) {
-      this.#icon =
-          IconButton.Icon.create(this.#expanded ? 'triangle-down' : 'triangle-right', 'section-block-expand-icon');
+      this.#icon = createIcon(this.#expanded ? 'triangle-down' : 'triangle-right', 'section-block-expand-icon');
       titleElement.classList.toggle('empty-section', !this.#expanded);
       UI.ARIAUtils.setExpanded(titleElement, this.#expanded);
       titleElement.appendChild(this.#icon);
@@ -1964,7 +1963,7 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
       if (!iconInfo) {
         continue;
       }
-      const icon = new IconButton.Icon.Icon();
+      const icon = new Icon();
       icon.name = iconInfo.iconName;
       icon.classList.add('extra-small');
       icon.style.transform = `rotate(${iconInfo.rotate}deg) scale(${iconInfo.scaleX * 1.1}, ${iconInfo.scaleY * 1.1})`;
@@ -2024,7 +2023,7 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
 
     function colorSwatchRenderer(color: Common.Color.Color): Element {
       const swatch = new InlineEditor.ColorSwatch.ColorSwatch();
-      swatch.renderColor(color);
+      swatch.color = color;
       swatch.style.pointerEvents = 'none';
       return swatch;
     }

package/front_end/panels/elements/TopLayerContainer.ts

@@ -6,7 +6,7 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import * as ElementsComponents from './components/components.js';
@@ -97,7 +97,7 @@ export class TopLayerContainer extends UI.TreeOutline.TreeElement {
         ElementsComponents.AdornerManager.RegisteredAdorners.TOP_LAYER);
     const adornerContent = document.createElement('span');
     adornerContent.classList.add('adorner-with-icon');
-    const linkIcon = IconButton.Icon.create('select-element');
+    const linkIcon = createIcon('select-element');
     const adornerText = document.createElement('span');
     adornerText.textContent = `top-layer (${topLayerElementIndex})`;
     adornerContent.append(linkIcon);

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

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 import '../../../ui/components/node_text/node_text.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';

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

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import {html, render} from '../../../ui/lit/lit.js';

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

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 import '../../../ui/components/node_text/node_text.js';
 
 import * as SDK from '../../../core/sdk/sdk.js';

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

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Lit from '../../../ui/lit/lit.js';

package/front_end/panels/emulation/DeviceModeWrapper.ts

@@ -128,11 +128,56 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
             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 docRect = this.ownerDocument.documentElement.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 - docRect.left,
-              y: rect.top - docRect.top,
+              x: rect.left + frameOffset.x + scrollX,
+              y: rect.top + frameOffset.y + scrollY,
               width: rect.width,
               height: rect.height,
               scale: 1,