chrome-devtools-frontend 1.0.1549484 → 1.0.1550444

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,

package/front_end/panels/explain/components/ConsoleInsight.ts

@@ -529,9 +529,10 @@ function renderSignInFooter(onGoToSignIn: () => void): Lit.LitTemplate {
         .variant=${Buttons.Button.Variant.PRIMARY}
         .jslogContext=${'update-settings'}
       >
-        ${UIStrings.signIn}
+        ${i18nString(UIStrings.signIn)}
       </devtools-button>
     </div>`;
+  // clang-format on
 }
 
 function renderConsentReminderFooter(onReminderSettingsLink: () => void, onConsentReminderConfirmed: () => void): Lit.LitTemplate {
@@ -541,9 +542,9 @@ function renderConsentReminderFooter(onReminderSettingsLink: () => void, onConse
     <div class="buttons">
       <devtools-button
         @click=${onReminderSettingsLink}
-          .variant=${Buttons.Button.Variant.TONAL}
-          jslogContext=${'settings'}
-          title=${'Settings'}
+        .variant=${Buttons.Button.Variant.TONAL}
+        .jslogContext=${'settings'}
+        .title=${'Settings'}
       >
         Settings
       </devtools-button>
@@ -557,6 +558,7 @@ function renderConsentReminderFooter(onReminderSettingsLink: () => void, onConse
         Continue
       </devtools-button>
     </div>`;
+  // clang-format on
 }
 
 function renderInsightFooter(noLogging: ViewInput['noLogging'], selectedRating: ViewInput['selectedRating'], callbacks: ViewInput['callbacks']): Lit.LitTemplate {

package/front_end/panels/issues/AffectedResourcesView.ts

@@ -12,8 +12,8 @@ import type * as Protocol from '../../generated/protocol.js';
 import type * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as Logs from '../../models/logs/logs.js';
 import type * as NetworkForward from '../../panels/network/forward/forward.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as RequestLinkIcon from '../../ui/components/request_link_icon/request_link_icon.js';
+import {Icon} from '../../ui/kit/kit.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -180,7 +180,7 @@ export abstract class AffectedResourcesView extends UI.TreeOutline.TreeElement {
     const frameCell = document.createElement('td');
     frameCell.classList.add('affected-resource-cell');
     if (frame) {
-      const icon = new IconButton.Icon.Icon();
+      const icon = new Icon();
       icon.name = 'code-circle';
       icon.classList.add('link', 'elements-panel', 'medium');
       icon.onclick = async () => {

package/front_end/panels/issues/AttributionReportingIssueDetailsView.ts

@@ -109,7 +109,7 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
     const element = document.createElement('tr');
     element.classList.add('affected-resource-directive');
 
-    const details = issue.issueDetails;
+    const details = issue.details();
 
     switch (issueCode) {
       case IssuesManager.AttributionReportingIssue.IssueCode.INVALID_REGISTER_SOURCE_HEADER:
@@ -154,7 +154,7 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
 
   async #appendElementOrEmptyCell(
       parent: HTMLElement, issue: IssuesManager.AttributionReportingIssue.AttributionReportingIssue): Promise<void> {
-    const details = issue.issueDetails;
+    const details = issue.details();
     if (details.violatingNodeId !== undefined) {
       const target = issue.model()?.target() || null;
       parent.appendChild(await this.createElementCell(

package/front_end/panels/issues/IssueKindView.ts

@@ -7,8 +7,8 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
+import {Icon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import * as Components from './components/components.js';
@@ -93,7 +93,7 @@ export class IssueKindView extends UI.TreeOutline.TreeElement {
     const header = document.createElement('div');
     header.classList.add('header');
 
-    const issueKindIcon = new IconButton.Icon.Icon();
+    const issueKindIcon = new Icon();
     issueKindIcon.name = IssueCounter.IssueCounter.getIssueKindIconName(this.#kind);
     issueKindIcon.classList.add('leading-issue-icon', 'extra-large');
 

package/front_end/panels/issues/IssueView.ts

@@ -12,9 +12,9 @@ import type {AggregatedIssue} from '../../models/issues_manager/IssueAggregator.
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
 import * as MarkdownView from '../../ui/components/markdown_view/markdown_view.js';
+import {Icon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -159,7 +159,7 @@ class AffectedMixedContentView extends AffectedResourcesView {
 
     let count = 0;
     for (const issue of mixedContentIssues) {
-      const details = issue.getDetails();
+      const details = issue.details();
       this.appendAffectedMixedContent(details);
       count++;
     }
@@ -221,7 +221,7 @@ export class IssueView extends UI.TreeOutline.TreeElement {
   affectedResources: UI.TreeOutline.TreeElement;
   readonly #affectedResourceViews: AffectedResourcesView[];
   #aggregatedIssuesCount: HTMLElement|null;
-  #issueKindIcon: IconButton.Icon.Icon|null = null;
+  #issueKindIcon: Icon|null = null;
   #hasBeenExpandedBefore: boolean;
   #throttle: Common.Throttler.Throttler;
   #needsUpdateOnExpand = true;
@@ -336,7 +336,7 @@ export class IssueView extends UI.TreeOutline.TreeElement {
   #appendHeader(): void {
     const header = document.createElement('div');
     header.classList.add('header');
-    this.#issueKindIcon = new IconButton.Icon.Icon();
+    this.#issueKindIcon = new Icon();
     this.#issueKindIcon.classList.add('leading-issue-icon', 'extra-large');
     this.#aggregatedIssuesCount = document.createElement('span');
     const countAdorner = new Adorners.Adorner.Adorner();

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

@@ -4,6 +4,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 UI from '../../ui/legacy/legacy.js';
 import type * as Timeline from '../timeline/timeline.js';
 
@@ -61,9 +62,10 @@ UI.ViewManager.registerViewExtension({
   order: 66,
   hasToolbar: false,
   isPreviewFeature: true,
-  async loadView() {
+  async loadView(universe) {
     const Timeline = await loadTimelineModule();
-    return Timeline.TimelinePanel.TimelinePanel.instance({forceNew: null});
+    const resourceLoader = universe.context.get(SDK.PageResourceLoader.PageResourceLoader);
+    return Timeline.TimelinePanel.TimelinePanel.instance({forceNew: true, resourceLoader});
   },
 });
 

package/front_end/panels/linear_memory_inspector/components/LinearMemoryHighlightChipList.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 {Directives, html, render, type TemplateResult} from '../../../ui/lit/lit.js';

package/front_end/panels/linear_memory_inspector/components/LinearMemoryNavigator.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 Buttons from '../../../ui/components/buttons/buttons.js';

package/front_end/panels/linear_memory_inspector/components/LinearMemoryValueInterpreter.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 './ValueInterpreterDisplay.js';
 import './ValueInterpreterSettings.js';
 

package/front_end/panels/linear_memory_inspector/components/ValueInterpreterDisplay.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 UI from '../../../ui/legacy/legacy.js';

package/front_end/panels/media/PlayerListView.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../ui/components/icon_button/icon_button.js';
+import '../../ui/kit/kit.js';
 
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Protocol from '../../generated/protocol.js';

package/front_end/panels/mobile_throttling/ThrottlingManager.ts

@@ -7,7 +7,7 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.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 {Icon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -392,7 +392,7 @@ export class ThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Thrott
 
     const reset = new UI.Toolbar.ToolbarButton('Reset concurrency', 'undo', undefined, 'hardware-concurrency-reset');
     reset.setTitle(i18nString(UIStrings.resetConcurrency));
-    const icon = new IconButton.Icon.Icon();
+    const icon = new Icon();
     icon.name = 'warning-filled';
     icon.classList.add('small');
     const warning = new UI.Toolbar.ToolbarItem(icon);

package/front_end/panels/mobile_throttling/ThrottlingSettingsTab.ts

@@ -9,8 +9,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 Buttons from '../../ui/components/buttons/buttons.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
-import type {Card} from '../../ui/kit/kit.js';
+import {type Card, createIcon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -352,7 +351,7 @@ export class CPUThrottlingCard {
   private createTextWithIcon(text: string, icon: string): HTMLElement {
     const el = document.createElement('div');
     el.classList.add('text-with-icon');
-    el.append(IconButton.Icon.create(icon));
+    el.append(createIcon(icon));
     el.append(text);
     return el;
   }

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -48,7 +48,7 @@ import * as Logs from '../../models/logs/logs.js';
 import type * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
@@ -1428,7 +1428,7 @@ export class NetworkRequestNode extends NetworkNode {
       case SDK.NetworkRequest.InitiatorType.PREFLIGHT: {
         cell.appendChild(document.createTextNode(i18nString(UIStrings.preflight)));
         if (initiator.initiatorRequest) {
-          const icon = IconButton.Icon.create('arrow-up-down-circle');
+          const icon = createIcon('arrow-up-down-circle');
           const link = Components.Linkifier.Linkifier.linkifyRevealable(
               initiator.initiatorRequest, icon, undefined, i18nString(UIStrings.selectTheRequestThatTriggered),
               'trailing-link-icon', 'initator-request');
@@ -1513,7 +1513,7 @@ export class NetworkRequestNode extends NetworkNode {
       const throttlingConditionsTitle = typeof throttlingConditions.conditions.title === 'string' ?
           throttlingConditions.conditions.title :
           throttlingConditions.conditions.title();
-      const icon = IconButton.Icon.create('watch');
+      const icon = createIcon('watch');
       icon.title = i18nString(UIStrings.wasThrottled, {PH1: throttlingConditionsTitle});
       icon.addEventListener('click', () => void Common.Revealer.reveal(throttlingConditions));
       cell.append(icon);

package/front_end/panels/network/NetworkFrameGrouper.ts

@@ -4,7 +4,7 @@
 
 import * as Common from '../../core/common/common.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 type * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -56,7 +56,7 @@ export class FrameGroupNode extends NetworkGroupNode {
     const columnIndex = (this.dataGrid as DataGrid.DataGrid.DataGridImpl<unknown>).indexOfVisibleColumn(columnId);
     if (columnIndex === 0) {
       const name = this.displayName();
-      cell.appendChild(IconButton.Icon.create('frame', 'network-frame-group-icon'));
+      cell.appendChild(createIcon('frame', 'network-frame-group-icon'));
       UI.UIUtils.createTextChild(cell, name);
       UI.Tooltip.Tooltip.install(cell, name);
       this.setCellAccessibleName(cell.textContent || '', cell, columnId);

package/front_end/panels/network/NetworkItemView.ts

@@ -10,8 +10,8 @@ import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
+import {Icon} from '../../ui/kit/kit.js';
 import type * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -208,7 +208,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
           i18nString(UIStrings.responsePreview));
       const signedExchangeInfo = request.signedExchangeInfo();
       if (signedExchangeInfo?.errors?.length) {
-        const icon = new IconButton.Icon.Icon();
+        const icon = new Icon();
         icon.name = 'cross-circle-filled';
         icon.classList.add('small');
         UI.Tooltip.Tooltip.install(icon, i18nString(UIStrings.signedexchangeError));
@@ -292,7 +292,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
           i18nString(UIStrings.requestAndResponseCookies));
     }
     if (this.#request.hasThirdPartyCookiePhaseoutIssue()) {
-      const icon = new IconButton.Icon.Icon();
+      const icon = new Icon();
       icon.name = 'warning-filled';
       icon.classList.add('small');
       icon.title = i18nString(UIStrings.thirdPartyPhaseout);
@@ -317,7 +317,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
     const trustTokenResult = this.#request.trustTokenOperationDoneEvent();
     if (trustTokenResult &&
         !NetworkComponents.RequestTrustTokensView.statusConsideredSuccess(trustTokenResult.status)) {
-      const icon = new IconButton.Icon.Icon();
+      const icon = new Icon();
       icon.name = 'cross-circle-filled';
       icon.classList.add('small');
       this.setTabIcon(NetworkForward.UIRequestLocation.UIRequestTabs.TRUST_TOKENS, icon);

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -6,7 +6,7 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {Icon} from '../../ui/kit/kit.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -181,7 +181,7 @@ export class NetworkLogViewColumns {
   private waterfallScroller!: HTMLElement;
   private waterfallScrollerContent!: HTMLDivElement;
   private waterfallHeaderElement!: HTMLElement;
-  private waterfallColumnSortIcon!: IconButton.Icon.Icon;
+  private waterfallColumnSortIcon!: Icon;
   private activeWaterfallSortId!: string;
   private popoverHelper?: UI.PopoverHelper.PopoverHelper;
   private hasScrollerTouchStarted?: boolean;
@@ -415,7 +415,7 @@ export class NetworkLogViewColumns {
     this.waterfallHeaderElement.createChild('div', 'hover-layer');
     const innerElement = this.waterfallHeaderElement.createChild('div');
     innerElement.textContent = i18nString(UIStrings.waterfall);
-    this.waterfallColumnSortIcon = new IconButton.Icon.Icon();
+    this.waterfallColumnSortIcon = new Icon();
     this.waterfallColumnSortIcon.className = 'sort-order-icon';
     this.waterfallHeaderElement.createChild('div', 'sort-order-icon-container')
         .appendChild(this.waterfallColumnSortIcon);

package/front_end/panels/network/RequestCookiesView.ts

@@ -7,8 +7,8 @@ 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 Protocol from '../../generated/protocol.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
+import {Icon} from '../../ui/kit/kit.js';
 import * as CookieTable from '../../ui/legacy/components/cookie_table/cookie_table.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -281,7 +281,7 @@ export class RequestCookiesView extends UI.Widget.Widget {
       this.malformedResponseCookiesList.removeChildren();
       for (const malformedCookie of malformedResponseCookies) {
         const listItem = this.malformedResponseCookiesList.createChild('span', 'cookie-line source-code');
-        const icon = new IconButton.Icon.Icon();
+        const icon = new Icon();
         icon.name = 'cross-circle-filled';
         icon.classList.add('cookie-warning-icon', 'small');
         listItem.appendChild(icon);

package/front_end/panels/network/SignedExchangeInfoView.ts

@@ -7,7 +7,7 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {Icon} from '../../ui/kit/kit.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -127,7 +127,7 @@ export class SignedExchangeInfoView extends UI.Widget.VBox {
       const errorMessagesCategory = new Category(root, i18nString(UIStrings.errors));
       for (const error of signedExchangeInfo.errors) {
         const fragment = document.createDocumentFragment();
-        const icon = new IconButton.Icon.Icon();
+        const icon = new Icon();
         icon.name = 'cross-circle-filled';
         icon.classList.add('prompt-icon', 'small');
         fragment.appendChild(icon);

package/front_end/panels/network/components/RequestTrustTokensView.ts

@@ -4,13 +4,13 @@
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../../ui/components/report_view/report_view.js';
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Protocol from '../../../generated/protocol.js';
-import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
+import type {IconWithName} from '../../../ui/kit/kit.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
@@ -223,12 +223,12 @@ export class RequestTrustTokensView extends LegacyWrapper.LegacyWrapper.Wrappabl
   }
 }
 
-const SUCCESS_ICON_DATA: IconButton.Icon.IconWithName = {
+const SUCCESS_ICON_DATA: IconWithName = {
   color: 'var(--icon-checkmark-green)',
   iconName: 'check-circle',
 };
 
-const FAILURE_ICON_DATA: IconButton.Icon.IconWithName = {
+const FAILURE_ICON_DATA: IconWithName = {
   color: 'var(--icon-error)',
   iconName: 'cross-circle-filled',
 };
@@ -239,8 +239,7 @@ export function statusConsideredSuccess(status: Protocol.Network.TrustTokenOpera
       status === Protocol.Network.TrustTokenOperationDoneEventStatus.FulfilledLocally;
 }
 
-function getIconForStatusCode(status: Protocol.Network.TrustTokenOperationDoneEventStatus):
-    IconButton.Icon.IconWithName {
+function getIconForStatusCode(status: Protocol.Network.TrustTokenOperationDoneEventStatus): IconWithName {
   return statusConsideredSuccess(status) ? SUCCESS_ICON_DATA : FAILURE_ICON_DATA;
 }
 

package/front_end/panels/profiler/HeapSnapshotGridNodes.ts

@@ -10,7 +10,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as HeapSnapshotModel from '../../models/heap_snapshot_model/heap_snapshot_model.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -631,12 +631,12 @@ export abstract class HeapSnapshotGenericObjectNode extends HeapSnapshotGridNode
     const div = fragment.$('container');
     this.prefixObjectCell(div);
     if (this.reachableFromWindow) {
-      const frameIcon = IconButton.Icon.create('frame', 'heap-object-tag');
+      const frameIcon = createIcon('frame', 'heap-object-tag');
       UI.Tooltip.Tooltip.install(frameIcon, i18nString(UIStrings.userObjectReachableFromWindow));
       div.appendChild(frameIcon);
     }
     if (this.detachedDOMTreeNode) {
-      const frameIcon = IconButton.Icon.create('scissors', 'heap-object-tag');
+      const frameIcon = createIcon('scissors', 'heap-object-tag');
       UI.Tooltip.Tooltip.install(frameIcon, i18nString(UIStrings.detachedFromDomTree));
       div.appendChild(frameIcon);
     }

package/front_end/panels/profiler/ProfileDataGrid.ts

@@ -31,7 +31,7 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import type * as CPUProfile from '../../models/cpu_profile/cpu_profile.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {Icon} from '../../ui/kit/kit.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -203,7 +203,7 @@ export class ProfileDataGridNode extends DataGrid.DataGrid.DataGridNode<unknown>
         cell.classList.toggle('highlight', this.searchMatchedFunctionColumn);
         if (this.deoptReason) {
           cell.classList.add('not-optimized');
-          const warningIcon = new IconButton.Icon.Icon();
+          const warningIcon = new Icon();
           warningIcon.name = 'warning-filled';
           warningIcon.classList.add('profile-warn-marker', 'small');
           UI.Tooltip.Tooltip.install(warningIcon, i18nString(UIStrings.notOptimizedS, {PH1: this.deoptReason}));

package/front_end/panels/profiler/ProfilesPanel.ts

@@ -33,7 +33,7 @@ import '../../ui/legacy/legacy.js';
 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';
 // eslint-disable-next-line @devtools/es-modules-import
 import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -668,7 +668,7 @@ export class ProfilesSidebarTreeElement extends UI.TreeOutline.TreeElement {
         .createChild('span', 'title-container')
         .createChild('span', 'title')
         .textContent = i18nString(UIStrings.profiles);
-    this.setLeadingIcons([IconButton.Icon.create('tune')]);
+    this.setLeadingIcons([createIcon('tune')]);
   }
 }
 

package/front_end/panels/protocol_monitor/JSONEditor.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../ui/components/icon_button/icon_button.js';
+import '../../ui/kit/kit.js';
 import '../../ui/components/menus/menus.js';
 
 import * as Common from '../../core/common/common.js';

package/front_end/panels/recorder/components/CreateRecordingView.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 import './ControlButton.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';

package/front_end/panels/recorder/components/ExtensionView.ts

@@ -4,7 +4,7 @@
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../../ui/legacy/legacy.js';
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as PublicExtensions from '../../../models/extensions/extensions.js';

package/front_end/panels/recorder/components/RecordingListView.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';

package/front_end/panels/recorder/components/RecordingView.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 import './ExtensionView.js';
 import './ControlButton.js';
 import './ReplaySection.js';

package/front_end/panels/recorder/components/StepView.ts

@@ -7,7 +7,7 @@
    do not define any host for Lit.render and the rule is not happy
    about it. */
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 import './StepEditor.js';
 import './TimelineSection.js';