chrome-devtools-frontend 1.0.1549484 → 1.0.1550444

package/front_end/models/issues_manager/StylesheetLoadingIssue.ts

@@ -13,40 +13,35 @@ export const lateImportStylesheetLoadingCode = [
   Protocol.Audits.StyleSheetLoadingIssueReason.LateImportRule,
 ].join('::');
 
-export class StylesheetLoadingIssue extends Issue {
-  #issueDetails: Protocol.Audits.StylesheetLoadingIssueDetails;
+export class StylesheetLoadingIssue extends Issue<Protocol.Audits.StylesheetLoadingIssueDetails> {
   constructor(
       issueDetails: Protocol.Audits.StylesheetLoadingIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel|null) {
     const code =
         `${Protocol.Audits.InspectorIssueCode.StylesheetLoadingIssue}::${issueDetails.styleSheetLoadingIssueReason}`;
-    super(code, issuesModel);
-    this.#issueDetails = issueDetails;
+    super(code, issueDetails, issuesModel);
   }
 
   override sources(): Protocol.Audits.SourceCodeLocation[] {
-    return [this.#issueDetails.sourceCodeLocation];
+    return [this.details().sourceCodeLocation];
   }
   override requests(): Protocol.Audits.AffectedRequest[] {
-    if (!this.#issueDetails.failedRequestInfo) {
+    const details = this.details();
+    if (!details.failedRequestInfo) {
       return [];
     }
-    const {url, requestId} = this.#issueDetails.failedRequestInfo;
+    const {url, requestId} = details.failedRequestInfo;
     if (!requestId) {
       return [];
     }
     return [{url, requestId}];
   }
 
-  details(): Protocol.Audits.StylesheetLoadingIssueDetails {
-    return this.#issueDetails;
-  }
-
   primaryKey(): string {
-    return JSON.stringify(this.#issueDetails);
+    return JSON.stringify(this.details());
   }
 
   getDescription(): MarkdownIssueDescription {
-    switch (this.#issueDetails.styleSheetLoadingIssueReason) {
+    switch (this.details().styleSheetLoadingIssueReason) {
       case Protocol.Audits.StyleSheetLoadingIssueReason.LateImportRule:
         return {
           file: 'stylesheetLateImport.md',

package/front_end/models/issues_manager/UnencodedDigestIssue.ts

@@ -26,9 +26,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('models/issues_manager/UnencodedDigestIssue.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
-export class UnencodedDigestIssue extends Issue<string> {
-  readonly #issueDetails: Protocol.Audits.UnencodedDigestIssueDetails;
-
+export class UnencodedDigestIssue extends Issue<Protocol.Audits.UnencodedDigestIssueDetails> {
   constructor(
       issueDetails: Protocol.Audits.UnencodedDigestIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel|null) {
     super(
@@ -36,12 +34,7 @@ export class UnencodedDigestIssue extends Issue<string> {
           code: `${Protocol.Audits.InspectorIssueCode.UnencodedDigestIssue}::${issueDetails.error}`,
           umaCode: `${Protocol.Audits.InspectorIssueCode.UnencodedDigestIssue}::${issueDetails.error}`,
         },
-        issuesModel);
-    this.#issueDetails = issueDetails;
-  }
-
-  details(): Protocol.Audits.UnencodedDigestIssueDetails {
-    return this.#issueDetails;
+        issueDetails, issuesModel);
   }
 
   override primaryKey(): string {

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -709,11 +709,6 @@ export const NativeFunctions = [
     signatures: [["property","cssText"]],
     receivers: ["CSSStyleValue"]
   },
-  {
-    name: "parse",
-    signatures: [["serializedOrigin"]],
-    receivers: ["Origin"]
-  },
   {
     name: "parse",
     signatures: [["url","?base"]],
@@ -7386,14 +7381,6 @@ export const NativeFunctions = [
     name: "compareComponent",
     signatures: [["component","left","right"]]
   },
-  {
-    name: "Origin",
-    signatures: [["?serializedOrigin"]]
-  },
-  {
-    name: "fromURL",
-    signatures: [["serializedURL"]]
-  },
   {
     name: "isSameOrigin",
     signatures: [["other"]]

package/front_end/panels/application/AppManifestView.ts

@@ -10,8 +10,8 @@ import type * 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 Buttons from '../../ui/components/buttons/buttons.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
+import {createIcon} 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';
@@ -676,7 +676,7 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
       UI.ARIAUtils.setLabel(appIdField, 'App Id');
       appIdField.textContent = appId;
 
-      const helpIcon = IconButton.Icon.create('help', 'inline-icon');
+      const helpIcon = createIcon('help', 'inline-icon');
       helpIcon.title = i18nString(UIStrings.appIdExplainer);
       helpIcon.setAttribute('jslog', `${VisualLogging.action('help').track({hover: true})}`);
       appIdField.appendChild(helpIcon);
@@ -934,7 +934,7 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
     const wcoStatusMessage = this.windowControlsSection.appendRow();
 
     if (hasWco) {
-      const checkmarkIcon = IconButton.Icon.create('check-circle', 'inline-icon');
+      const checkmarkIcon = createIcon('check-circle', 'inline-icon');
       wcoStatusMessage.appendChild(checkmarkIcon);
 
       const wco = document.createElement('code');
@@ -947,7 +947,7 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
         await this.appendWindowControlsToSection(this.overlayModel, url, stringProperty('theme_color'));
       }
     } else {
-      const infoIcon = IconButton.Icon.create('info', 'inline-icon');
+      const infoIcon = createIcon('info', 'inline-icon');
 
       wcoStatusMessage.appendChild(infoIcon);
 

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -40,8 +40,8 @@ import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
+import {createIcon} from '../../ui/kit/kit.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -406,7 +406,7 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
         i18nString(UIStrings.localStorageDescription), 'local-storage');
     this.localStorageListTreeElement.setLink(
         'https://developer.chrome.com/docs/devtools/storage/localstorage/' as Platform.DevToolsPath.UrlString);
-    const localStorageIcon = IconButton.Icon.create('table');
+    const localStorageIcon = createIcon('table');
     this.localStorageListTreeElement.setLeadingIcons([localStorageIcon]);
 
     storageTreeElement.appendChild(this.localStorageListTreeElement);
@@ -415,7 +415,7 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
         i18nString(UIStrings.sessionStorageDescription), 'session-storage');
     this.sessionStorageListTreeElement.setLink(
         'https://developer.chrome.com/docs/devtools/storage/sessionstorage/' as Platform.DevToolsPath.UrlString);
-    const sessionStorageIcon = IconButton.Icon.create('table');
+    const sessionStorageIcon = createIcon('table');
     this.sessionStorageListTreeElement.setLeadingIcons([sessionStorageIcon]);
 
     storageTreeElement.appendChild(this.sessionStorageListTreeElement);
@@ -425,7 +425,7 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
         i18nString(UIStrings.extensionStorageDescription), 'extension-storage');
     this.extensionStorageListTreeElement.setLink(
         'https://developer.chrome.com/docs/extensions/reference/api/storage/' as Platform.DevToolsPath.UrlString);
-    const extensionStorageIcon = IconButton.Icon.create('table');
+    const extensionStorageIcon = createIcon('table');
     this.extensionStorageListTreeElement.setLeadingIcons([extensionStorageIcon]);
 
     storageTreeElement.appendChild(this.extensionStorageListTreeElement);
@@ -440,7 +440,7 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
         'cookies');
     this.cookieListTreeElement.setLink(
         'https://developer.chrome.com/docs/devtools/storage/cookies/' as Platform.DevToolsPath.UrlString);
-    const cookieIcon = IconButton.Icon.create('cookie');
+    const cookieIcon = createIcon('cookie');
     this.cookieListTreeElement.setLeadingIcons([cookieIcon]);
     storageTreeElement.appendChild(this.cookieListTreeElement);
 
@@ -1064,7 +1064,7 @@ export class BackgroundServiceTreeElement extends ApplicationPanelTreeElement {
 
     this.model = null;
 
-    const backgroundServiceIcon = IconButton.Icon.create(this.getIconType());
+    const backgroundServiceIcon = createIcon(this.getIconType());
     this.setLeadingIcons([backgroundServiceIcon]);
   }
 
@@ -1130,7 +1130,7 @@ export class ServiceWorkersTreeElement extends ApplicationPanelTreeElement {
 
   constructor(storagePanel: ResourcesPanel) {
     super(storagePanel, i18n.i18n.lockedString('Service workers'), false, 'service-workers');
-    const icon = IconButton.Icon.create('gears');
+    const icon = createIcon('gears');
     this.setLeadingIcons([icon]);
   }
 
@@ -1153,7 +1153,7 @@ export class AppManifestTreeElement extends ApplicationPanelTreeElement {
   private view: AppManifestView;
   constructor(storagePanel: ResourcesPanel) {
     super(storagePanel, i18nString(UIStrings.manifest), true, 'manifest');
-    const icon = IconButton.Icon.create('document');
+    const icon = createIcon('document');
     this.setLeadingIcons([icon]);
     self.onInvokeElement(this.listItemElement, this.onInvoke.bind(this));
     const emptyView = new UI.EmptyWidget.EmptyWidget(
@@ -1207,7 +1207,7 @@ export class ManifestChildTreeElement extends ApplicationPanelTreeElement {
       storagePanel: ResourcesPanel, element: Element, childTitle: string, fieldElement: HTMLElement,
       jslogContext: string) {
     super(storagePanel, childTitle, false, jslogContext);
-    const icon = IconButton.Icon.create('document');
+    const icon = createIcon('document');
     this.setLeadingIcons([icon]);
     this.#sectionElement = element;
     this.#sectionFieldElement = fieldElement;
@@ -1252,7 +1252,7 @@ export class ClearStorageTreeElement extends ApplicationPanelTreeElement {
   private view?: StorageView;
   constructor(storagePanel: ResourcesPanel) {
     super(storagePanel, i18nString(UIStrings.storage), false, 'storage');
-    const icon = IconButton.Icon.create('database');
+    const icon = createIcon('database');
     this.setLeadingIcons([icon]);
   }
 
@@ -1278,7 +1278,7 @@ export class IndexedDBTreeElement extends ExpandableApplicationPanelTreeElement
     super(
         storagePanel, i18nString(UIStrings.indexeddb), i18nString(UIStrings.noIndexeddb),
         i18nString(UIStrings.indexeddbDescription), 'indexed-db');
-    const icon = IconButton.Icon.create('database');
+    const icon = createIcon('database');
     this.setLeadingIcons([icon]);
     this.idbDatabaseTreeElements = [];
     this.storageBucket = storageBucket;
@@ -1421,7 +1421,7 @@ export class IDBDatabaseTreeElement extends ApplicationPanelTreeElement {
     this.model = model;
     this.databaseId = databaseId;
     this.idbObjectStoreTreeElements = new Map();
-    const icon = IconButton.Icon.create('database');
+    const icon = createIcon('database');
     this.setLeadingIcons([icon]);
     this.model.addEventListener(IndexedDBModelEvents.DatabaseNamesRefreshed, this.refreshIndexedDB, this);
   }
@@ -1546,7 +1546,7 @@ export class IDBObjectStoreTreeElement extends ApplicationPanelTreeElement {
     this.idbIndexTreeElements = new Map();
     this.objectStore = objectStore;
     this.view = null;
-    const icon = IconButton.Icon.create('table');
+    const icon = createIcon('table');
     this.setLeadingIcons([icon]);
   }
 
@@ -1758,7 +1758,7 @@ export class DOMStorageTreeElement extends ApplicationPanelTreeElement {
                                 i18nString(UIStrings.localFiles),
         false, domStorage.isLocalStorage ? 'local-storage-for-domain' : 'session-storage-for-domain');
     this.domStorage = domStorage;
-    const icon = IconButton.Icon.create('table');
+    const icon = createIcon('table');
     this.setLeadingIcons([icon]);
   }
 
@@ -1793,7 +1793,7 @@ export class ExtensionStorageTreeElement extends ApplicationPanelTreeElement {
     super(
         storagePanel, nameForExtensionStorageArea(extensionStorage.storageArea), false, 'extension-storage-for-domain');
     this.extensionStorage = extensionStorage;
-    const icon = IconButton.Icon.create('table');
+    const icon = createIcon('table');
     this.setLeadingIcons([icon]);
   }
 
@@ -1831,7 +1831,7 @@ export class ExtensionStorageTreeParentElement extends ApplicationPanelTreeEleme
   constructor(storagePanel: ResourcesPanel, extensionId: string, extensionName: string) {
     super(storagePanel, extensionName || extensionId, true, 'extension-storage-for-domain');
     this.extensionId = extensionId;
-    const icon = IconButton.Icon.create('table');
+    const icon = createIcon('table');
     this.setLeadingIcons([icon]);
   }
 
@@ -1851,7 +1851,7 @@ export class CookieTreeElement extends ApplicationPanelTreeElement {
     this.target = frame.resourceTreeModel().target();
     this.#cookieDomain = cookieUrl.securityOrigin();
     this.tooltip = i18nString(UIStrings.cookiesUsedByFramesFromS, {PH1: this.#cookieDomain});
-    const icon = IconButton.Icon.create('cookie');
+    const icon = createIcon('cookie');
     // Note that we cannot use `cookieDomainInternal` here since it contains scheme.
     if (IssuesManager.RelatedIssue.hasThirdPartyPhaseoutCookieIssueForDomain(cookieUrl.domain())) {
       icon.name = 'warning-filled';
@@ -2172,7 +2172,7 @@ export class FrameTreeElement extends ApplicationPanelTreeElement {
   }
 
   async frameNavigated(frame: SDK.ResourceTreeModel.ResourceTreeFrame): Promise<void> {
-    const icon = IconButton.Icon.create(this.getIconTypeForFrame(frame));
+    const icon = createIcon(this.getIconTypeForFrame(frame));
     if (frame.unreachableUrl()) {
       icon.classList.add('red-icon');
     }
@@ -2374,7 +2374,7 @@ export class FrameResourceTreeElement extends ApplicationPanelTreeElement {
     this.tooltip = resource.url;
     resourceToFrameResourceTreeElement.set(this.resource, this);
 
-    const icon = IconButton.Icon.create('document', 'navigator-file-tree-item');
+    const icon = createIcon('document', 'navigator-file-tree-item');
     icon.classList.add('navigator-' + resource.resourceType().name() + '-tree-item');
     this.setLeadingIcons([icon]);
   }
@@ -2465,7 +2465,7 @@ class FrameWindowTreeElement extends ApplicationPanelTreeElement {
 
   updateIcon(canAccessOpener: boolean): void {
     const iconType = canAccessOpener ? 'popup' : 'frame';
-    const icon = IconButton.Icon.create(iconType);
+    const icon = createIcon(iconType);
     this.setLeadingIcons([icon]);
   }
 
@@ -2514,7 +2514,7 @@ class WorkerTreeElement extends ApplicationPanelTreeElement {
     super(storagePanel, targetInfo.title || targetInfo.url || i18nString(UIStrings.worker), false, 'worker');
     this.targetInfo = targetInfo;
     this.view = null;
-    const icon = IconButton.Icon.create('gears', 'navigator-file-tree-item');
+    const icon = createIcon('gears', 'navigator-file-tree-item');
     this.setLeadingIcons([icon]);
   }
 

package/front_end/panels/application/BackForwardCacheTreeElement.ts

@@ -5,7 +5,7 @@
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import * as ApplicationComponents from './components/components.js';
@@ -25,7 +25,7 @@ export class BackForwardCacheTreeElement extends ApplicationPanelTreeElement {
 
   constructor(resourcesPanel: ResourcesPanel) {
     super(resourcesPanel, i18nString(UIStrings.backForwardCache), false, 'bfcache');
-    const icon = IconButton.Icon.create('database');
+    const icon = createIcon('database');
     this.setLeadingIcons([icon]);
   }
 

package/front_end/panels/application/BounceTrackingMitigationsTreeElement.ts

@@ -5,8 +5,8 @@
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
+import {createIcon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
@@ -28,7 +28,7 @@ export class BounceTrackingMitigationsTreeElement extends ApplicationPanelTreeEl
 
   constructor(resourcesPanel: ResourcesPanel) {
     super(resourcesPanel, i18nString(UIStrings.bounceTrackingMitigations), false, 'bounce-tracking-mitigations');
-    const icon = IconButton.Icon.create('database');
+    const icon = createIcon('database');
     this.setLeadingIcons([icon]);
   }
 

package/front_end/panels/application/InterestGroupTreeElement.ts

@@ -7,7 +7,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * 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 IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import {InterestGroupStorageView} from './InterestGroupStorageView.js';
@@ -30,7 +30,7 @@ export class InterestGroupTreeElement extends ApplicationPanelTreeElement {
 
   constructor(storagePanel: ResourcesPanel) {
     super(storagePanel, i18nString(UIStrings.interestGroups), false, 'interest-groups');
-    const interestGroupIcon = IconButton.Icon.create('database');
+    const interestGroupIcon = createIcon('database');
     this.setLeadingIcons([interestGroupIcon]);
     this.view = new InterestGroupStorageView(this);
   }

package/front_end/panels/application/OpenedWindowDetailsView.ts

@@ -7,7 +7,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 Protocol from '../../generated/protocol.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 openedWindowDetailsViewStyles from './openedWindowDetailsView.css.js';
@@ -93,7 +93,7 @@ const booleanToYesNo = (b: boolean): Common.UIString.LocalizedString =>
     b ? i18nString(UIStrings.yes) : i18nString(UIStrings.no);
 
 function linkifyIcon(iconType: string, title: string, eventHandler: () => (void|Promise<void>)): Element {
-  const icon = IconButton.Icon.create(iconType, 'icon-link devtools-link');
+  const icon = createIcon(iconType, 'icon-link devtools-link');
   const button = document.createElement('button');
   UI.Tooltip.Tooltip.install(button, title);
   button.classList.add('devtools-link', 'link-style', 'text-button');

package/front_end/panels/application/OriginTrialTreeView.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/legacy/legacy.js';
 import '../../ui/components/adorners/adorners.js';
 

package/front_end/panels/application/PreloadingTreeElement.ts

@@ -5,7 +5,7 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import type * 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 {ApplicationPanelTreeElement, ExpandableApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import * as PreloadingHelper from './preloading/helper/helper.js';
@@ -45,7 +45,7 @@ class PreloadingTreeElementBase<View extends PreloadingRuleSetView|PreloadingAtt
     this.#viewConstructor = viewConstructor;
     this.#path = path;
 
-    const icon = IconButton.Icon.create('speculative-loads');
+    const icon = createIcon('speculative-loads');
     this.setLeadingIcons([icon]);
     this.#selected = false;
 
@@ -94,7 +94,7 @@ export class PreloadingSummaryTreeElement extends ExpandableApplicationPanelTree
   constructor(panel: ResourcesPanel) {
     super(panel, i18nString(UIStrings.speculativeLoads), '', '', 'preloading');
 
-    const icon = IconButton.Icon.create('speculative-loads');
+    const icon = createIcon('speculative-loads');
     this.setLeadingIcons([icon]);
     this.#selected = false;
 

package/front_end/panels/application/ReportingApiTreeElement.ts

@@ -5,7 +5,7 @@
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import {ReportingApiView} from './ReportingApiView.js';
@@ -25,7 +25,7 @@ export class ReportingApiTreeElement extends ApplicationPanelTreeElement {
 
   constructor(storagePanel: ResourcesPanel) {
     super(storagePanel, i18nString(UIStrings.reportingApi), false, 'reporting-api');
-    const icon = IconButton.Icon.create('document');
+    const icon = createIcon('document');
     this.setLeadingIcons([icon]);
   }
 

package/front_end/panels/application/ServiceWorkerCacheTreeElement.ts

@@ -8,7 +8,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * 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 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 {ApplicationPanelTreeElement, ExpandableApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
@@ -48,7 +48,7 @@ export class ServiceWorkerCacheTreeElement extends ExpandableApplicationPanelTre
     super(
         resourcesPanel, i18nString(UIStrings.cacheStorage), i18nString(UIStrings.noCacheStorage),
         i18nString(UIStrings.cacheStorageDescription), 'cache-storage');
-    const icon = IconButton.Icon.create('database');
+    const icon = createIcon('database');
     this.setLink('https://developer.chrome.com/docs/devtools/storage/cache/' as Platform.DevToolsPath.UrlString);
     this.setLeadingIcons([icon]);
     this.swCacheModels = new Set();
@@ -175,7 +175,7 @@ export class SWCacheTreeElement extends ApplicationPanelTreeElement {
     this.model = model;
     this.cache = cache;
     this.view = null;
-    const icon = IconButton.Icon.create('table');
+    const icon = createIcon('table');
     this.setLeadingIcons([icon]);
   }
 

package/front_end/panels/application/SharedStorageListTreeElement.ts

@@ -6,7 +6,7 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import type * as Protocol from '../../generated/protocol.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import type {ResourcesPanel} from './ResourcesPanel.js';
@@ -29,7 +29,7 @@ export class SharedStorageListTreeElement extends ApplicationPanelTreeElement {
     super(resourcesPanel, i18nString(UIStrings.sharedStorage), false, 'shared-storage');
     this.#expandedSetting =
         Common.Settings.Settings.instance().createSetting('resources-shared-storage-expanded', expandedSettingsDefault);
-    const sharedStorageIcon = IconButton.Icon.create('database');
+    const sharedStorageIcon = createIcon('database');
     this.setLeadingIcons([sharedStorageIcon]);
     this.view = new SharedStorageEventsView();
   }

package/front_end/panels/application/StorageBucketsTreeElement.ts

@@ -7,8 +7,8 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * 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 IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
+import {createIcon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import {IndexedDBTreeElement} from './ApplicationPanelSidebar.js';
@@ -49,7 +49,7 @@ export class StorageBucketsTreeParentElement extends ExpandableApplicationPanelT
     super(
         storagePanel, i18nString(UIStrings.storageBuckets), i18nString(UIStrings.noStorageBuckets),
         i18nString(UIStrings.storageBucketsDescription), 'storage-buckets');
-    const icon = IconButton.Icon.create('bucket');
+    const icon = createIcon('bucket');
     this.setLeadingIcons([icon]);
     this.setLink(
         'https://github.com/WICG/storage-buckets/blob/gh-pages/explainer.md' as Platform.DevToolsPath.UrlString);
@@ -153,7 +153,7 @@ export class StorageBucketsTreeElement extends ExpandableApplicationPanelTreeEle
     super(resourcesPanel, `${bucket.name} - ${origin}`, '', '', 'storage-bucket');
     this.bucketModel = model;
     this.storageBucketInfo = bucketInfo;
-    const icon = IconButton.Icon.create('database');
+    const icon = createIcon('database');
     this.setLeadingIcons([icon]);
   }
 

package/front_end/panels/application/StorageView.ts

@@ -9,8 +9,8 @@ import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import type * as Buttons from '../../ui/components/buttons/buttons.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 PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -520,7 +520,7 @@ export class StorageView extends UI.Widget.VBox {
             {PH1: response.usage.toLocaleString(), PH2: response.quota.toLocaleString()}));
 
     if (!response.overrideActive && response.quota < 125829120) {  // 120 MB
-      const icon = new IconButton.Icon.Icon();
+      const icon = new Icon();
       icon.name = 'info';
       icon.style.color = 'var(--icon-info)';
       icon.classList.add('small');

package/front_end/panels/application/TrustTokensTreeElement.ts

@@ -5,7 +5,7 @@
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import * as ApplicationComponents from './components/components.js';
@@ -26,7 +26,7 @@ export class TrustTokensTreeElement extends ApplicationPanelTreeElement {
 
   constructor(storagePanel: ResourcesPanel) {
     super(storagePanel, i18nString(UIStrings.trustTokens), false, 'private-state-tokens');
-    const icon = IconButton.Icon.create('database');
+    const icon = createIcon('database');
     this.setLeadingIcons([icon]);
   }
 

package/front_end/panels/application/components/PermissionsPolicySection.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/report_view/report_view.js';
 
 import * as Common from '../../../core/common/common.js';

package/front_end/panels/application/components/ProtocolHandlersView.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 Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';

package/front_end/panels/application/components/SharedStorageMetadataView.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/application/components/TrustTokensView.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/legacy/components/data_grid/data_grid.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';

package/front_end/panels/application/preloading/components/PreloadingGrid.ts

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

package/front_end/panels/application/preloading/components/RuleSetGrid.ts

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