chrome-devtools-frontend 1.0.1548980 → 1.0.1550444

package/front_end/models/workspace/UISourceCode.ts

@@ -35,9 +35,7 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   #contentType: Common.ResourceType.ResourceType;
   #requestContentPromise: Promise<TextUtils.ContentData.ContentDataOrError>|null = null;
   #decorations = new Map<string, any>();
-  #formattedDecorations = new Map<string, any>();
   #hasCommits = false;
-  #prettied = false;
   #messages: Set<Message>|null = null;
   #content: TextUtils.ContentData.ContentDataOrError|null = null;
   #forceLoadOnCheckContent = false;
@@ -499,9 +497,6 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   }
 
   getDecorationData(type: string): any {
-    if (this.#prettied && this.#formattedDecorations.get(type)) {
-      return this.#formattedDecorations.get(type);
-    }
     return this.#decorations.get(type);
   }
 
@@ -513,45 +508,6 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     return this.#disableEdit;
   }
 
-  formatChanged(format: {originalToFormatted(lineNumber: number, columnNumber?: number): number[]}|null): void {
-    if (this.#prettied === Boolean(format)) {
-      return;
-    }
-    this.#prettied = Boolean(format);
-    if (!format) {
-      this.dispatchEventToListeners(Events.DecorationChanged, DecoratorType.PERFORMANCE);
-      return;
-    }
-    const performanceDecorations = this.#decorations.get(DecoratorType.PERFORMANCE);
-    if (!performanceDecorations) {
-      return;
-    }
-    let formattedPerformanceDecorations: Map<number, Map<number, number>> =
-        this.#formattedDecorations.get(DecoratorType.PERFORMANCE);
-    if (!formattedPerformanceDecorations) {
-      formattedPerformanceDecorations = new Map<number, Map<number, number>>();
-      this.#formattedDecorations.set(DecoratorType.PERFORMANCE, formattedPerformanceDecorations);
-    } else {
-      formattedPerformanceDecorations.clear();
-    }
-
-    for (const [lineNumber, columnData] of performanceDecorations) {
-      for (const [columnNumber, data] of columnData) {
-        const [formattedLineNumber, formattedColumnNumber] =
-            format.originalToFormatted(lineNumber - 1, columnNumber - 1);
-        const oneBasedFormattedLineNumber = formattedLineNumber + 1;
-        const oneBasedFormattedColumnNumber = formattedColumnNumber + 1;
-        let lineData = formattedPerformanceDecorations.get(oneBasedFormattedLineNumber);
-        if (!lineData) {
-          lineData = new Map();
-          formattedPerformanceDecorations.set(oneBasedFormattedLineNumber, lineData);
-        }
-        lineData.set(oneBasedFormattedColumnNumber, (lineData.get(oneBasedFormattedColumnNumber) || 0) + data);
-      }
-    }
-    this.dispatchEventToListeners(Events.DecorationChanged, 'performance');
-  }
-
   isIgnoreListed(): boolean {
     return IgnoreListManager.instance().isUserOrSourceMapIgnoreListedUISourceCode(this);
   }
@@ -677,6 +633,21 @@ export class UILocationRange {
   }
 }
 
+/**
+ * A text range inside a specific {@link UISourceCode}, representing a function.
+ */
+export class UIFunctionBounds {
+  readonly uiSourceCode: UISourceCode;
+  readonly range: TextUtils.TextRange.TextRange;
+  readonly name: string;
+
+  constructor(uiSourceCode: UISourceCode, range: TextUtils.TextRange.TextRange, name: string) {
+    this.uiSourceCode = uiSourceCode;
+    this.range = range;
+    this.name = name;
+  }
+}
+
 /**
  * A message associated with a range in a `UISourceCode`. The range will be
  * underlined starting at the range's start and ending at the line end (the
@@ -746,3 +717,39 @@ export const enum DecoratorType {
   MEMORY = 'memory',
   COVERAGE = 'coverage',
 }
+
+/** 1-based. line => column => value */
+export type LineColumnProfileMap = Map<number, Map<number, number>>;
+/** Used by ProfilePlugin to track runtime/memory costs. */
+export type ProfileDataMap = Map<UISourceCode, LineColumnProfileMap>;
+
+/**
+ * Converts an existing LineColumnProfileMap to a new one using the provided mapping.
+ *
+ * The input and output line/column of originalToMappedLocation is 0-indexed.
+ */
+export function createMappedProfileData(
+    profileData: LineColumnProfileMap,
+    originalToMappedLocation: (line: number, column: number) => number[] | null): LineColumnProfileMap {
+  const mappedProfileData: LineColumnProfileMap = new Map();
+  for (const [lineNumber, columnData] of profileData) {
+    for (const [columnNumber, data] of columnData) {
+      const mappedLocation = originalToMappedLocation(lineNumber - 1, columnNumber - 1);
+      if (!mappedLocation) {
+        continue;
+      }
+
+      const oneBasedFormattedLineNumber = mappedLocation[0] + 1;
+      const oneBasedFormattedColumnNumber = mappedLocation[1] + 1;
+      let mappedColumnData = mappedProfileData.get(oneBasedFormattedLineNumber);
+      if (!mappedColumnData) {
+        mappedColumnData = new Map();
+        mappedProfileData.set(oneBasedFormattedLineNumber, mappedColumnData);
+      }
+      mappedColumnData.set(
+          oneBasedFormattedColumnNumber, (mappedColumnData.get(oneBasedFormattedColumnNumber) || 0) + data);
+    }
+  }
+
+  return mappedProfileData;
+}

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -27,6 +27,7 @@ import * as TimelinePanel from '../timeline/timeline.js';
 
 import aiAssistancePanelStyles from './aiAssistancePanel.css.js';
 import {
+  type AnswerPart,
   type ChatMessage,
   ChatMessageEntity,
   ChatView,
@@ -1420,7 +1421,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     try {
       let systemMessage: ModelChatMessage = {
         entity: ChatMessageEntity.MODEL,
-        steps: [],
+        parts: [],
       };
       let step: Step = {isLoading: true};
 
@@ -1428,9 +1429,14 @@ export class AiAssistancePanel extends UI.Panel.Panel {
        * Commits the step to props only if necessary.
        */
       function commitStep(): void {
-        if (systemMessage.steps.at(-1) !== step) {
-          systemMessage.steps.push(step);
+        const lastPart = systemMessage.parts.at(-1);
+        if (lastPart?.type === 'step' && lastPart.step === step) {
+          return;
         }
+        systemMessage.parts.push({
+          type: 'step',
+          step,
+        });
       }
 
       this.#isLoading = true;
@@ -1447,15 +1453,15 @@ export class AiAssistancePanel extends UI.Panel.Panel {
             });
             systemMessage = {
               entity: ChatMessageEntity.MODEL,
-              steps: [],
+              parts: [],
             };
             this.#messages.push(systemMessage);
             break;
           }
           case AiAssistanceModel.AiAgent.ResponseType.QUERYING: {
             step = {isLoading: true};
-            if (!systemMessage.steps.length) {
-              systemMessage.steps.push(step);
+            if (!systemMessage.parts.length) {
+              commitStep();
             }
 
             break;
@@ -1479,7 +1485,16 @@ export class AiAssistancePanel extends UI.Panel.Panel {
             break;
           }
           case AiAssistanceModel.AiAgent.ResponseType.SUGGESTIONS: {
-            systemMessage.suggestions = data.suggestions;
+            const lastPart = systemMessage.parts.at(-1);
+            if (lastPart?.type === 'answer') {
+              lastPart.suggestions = data.suggestions;
+            } else {
+              systemMessage.parts.push({
+                type: 'answer',
+                text: '',
+                suggestions: data.suggestions,
+              });
+            }
             break;
           }
           case AiAssistanceModel.AiAgent.ResponseType.SIDE_EFFECT: {
@@ -1504,32 +1519,57 @@ export class AiAssistancePanel extends UI.Panel.Panel {
             break;
           }
           case AiAssistanceModel.AiAgent.ResponseType.ANSWER: {
-            systemMessage.suggestions ??= data.suggestions;
-            systemMessage.answer = data.text;
             systemMessage.rpcId = data.rpcId;
+            const lastPart = systemMessage.parts.at(-1);
+            if (lastPart?.type === 'answer') {
+              lastPart.text = data.text;
+              if (data.suggestions) {
+                lastPart.suggestions = data.suggestions;
+              }
+            } else {
+              const newPart: AnswerPart = {
+                type: 'answer',
+                text: data.text,
+              };
+              if (data.suggestions) {
+                newPart.suggestions = data.suggestions;
+              }
+              systemMessage.parts.push(newPart);
+            }
+
             // When there is an answer without any thinking steps, we don't want to show the thinking step.
-            if (systemMessage.steps.length === 1 && systemMessage.steps[0].isLoading) {
-              systemMessage.steps.pop();
+            // TODO(crbug.com/463323934): Remove specially handling this case.
+            if (systemMessage.parts.length > 1) {
+              const firstPart = systemMessage.parts[0];
+              if (firstPart.type === 'step' && firstPart.step.isLoading && !firstPart.step.thought &&
+                  !firstPart.step.code && !firstPart.step.contextDetails) {
+                systemMessage.parts.shift();
+              }
             }
             step.isLoading = false;
             break;
           }
           case AiAssistanceModel.AiAgent.ResponseType.ERROR: {
             systemMessage.error = data.error;
-            systemMessage.rpcId = undefined;
-            const lastStep = systemMessage.steps.at(-1);
-            if (lastStep) {
+            const lastPart = systemMessage.parts.at(-1);
+            if (lastPart?.type === 'step') {
+              const lastStep = lastPart.step;
               // Mark the last step as cancelled to make the UI feel better.
               if (data.error === AiAssistanceModel.AiAgent.ErrorType.ABORT) {
                 lastStep.canceled = true;
                 // If error happens while the step is still loading remove it.
               } else if (lastStep.isLoading) {
-                systemMessage.steps.pop();
+                systemMessage.parts.pop();
               }
             }
+
             if (data.error === AiAssistanceModel.AiAgent.ErrorType.BLOCK) {
-              systemMessage.answer = undefined;
+              const lastPart = systemMessage.parts.at(-1);
+              if (lastPart?.type === 'answer') {
+                systemMessage.parts.pop();
+              }
             }
+            break;
           }
         }
 
@@ -1578,26 +1618,28 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 export function getResponseMarkdown(message: ModelChatMessage): string {
   const contentParts = ['## AI'];
 
-  for (const step of message.steps) {
-    if (step.title) {
-      contentParts.push(`### ${step.title}`);
-    }
-    if (step.contextDetails) {
-      contentParts.push(AiAssistanceModel.AiConversation.generateContextDetailsMarkdown(step.contextDetails));
-    }
-    if (step.thought) {
-      contentParts.push(step.thought);
-    }
-    if (step.code) {
-      contentParts.push(`**Code executed:**\n\`\`\`\n${step.code.trim()}\n\`\`\``);
-    }
-    if (step.output) {
-      contentParts.push(`**Data returned:**\n\`\`\`\n${step.output}\n\`\`\``);
+  for (const part of message.parts) {
+    if (part.type === 'answer') {
+      contentParts.push(`### Answer\n\n${part.text}`);
+    } else {
+      const step = part.step;
+      if (step.title) {
+        contentParts.push(`### ${step.title}`);
+      }
+      if (step.contextDetails) {
+        contentParts.push(AiAssistanceModel.AiConversation.generateContextDetailsMarkdown(step.contextDetails));
+      }
+      if (step.thought) {
+        contentParts.push(step.thought);
+      }
+      if (step.code) {
+        contentParts.push(`**Code executed:**\n\`\`\`\n${step.code.trim()}\n\`\`\``);
+      }
+      if (step.output) {
+        contentParts.push(`**Data returned:**\n\`\`\`\n${step.output}\n\`\`\``);
+      }
     }
   }
-  if (message.answer) {
-    contentParts.push(`### Answer\n\n${message.answer}`);
-  }
   return contentParts.join('\n\n');
 }
 

package/front_end/panels/ai_assistance/aiAssistancePanel.css

@@ -6,6 +6,7 @@
 
 .toolbar-container {
   display: flex;
+  flex-wrap: wrap;
   background-color: var(--sys-color-cdt-base-container);
   border-bottom: 1px solid var(--sys-color-divider);
   flex: 0 0 auto;

package/front_end/panels/ai_assistance/components/ChatView.ts

@@ -204,6 +204,19 @@ export type ImageInputData = {
   inputType: AiAssistanceModel.AiAgent.MultimodalInputType,
 };
 
+export interface AnswerPart {
+  type: 'answer';
+  text: string;
+  suggestions?: [string, ...string[]];
+}
+
+export interface StepPart {
+  type: 'step';
+  step: Step;
+}
+
+export type ModelMessagePart = AnswerPart|StepPart;
+
 export interface UserChatMessage {
   entity: ChatMessageEntity.USER;
   text: string;
@@ -211,9 +224,7 @@ export interface UserChatMessage {
 }
 export interface ModelChatMessage {
   entity: ChatMessageEntity.MODEL;
-  steps: Step[];
-  suggestions?: [string, ...string[]];
-  answer?: string;
+  parts: ModelMessagePart[];
   error?: AiAssistanceModel.AiAgent.ErrorType;
   rpcId?: Host.AidaClient.RpcGlobalId;
 }
@@ -839,20 +850,21 @@ function renderChatMessage({
         </div>
       </div>
       ${Lit.Directives.repeat(
-        message.steps,
+        message.parts,
         (_, index) => index,
-        step => {
+        (part, index) => {
+          const isLastPart = index === message.parts.length - 1;
+          if (part.type === 'answer') {
+            return html`<p>${renderTextAsMarkdown(part.text, markdownRenderer, { animate: !isReadOnly && isLoading && isLast && isLastPart })}</p>`;
+          }
           return renderStep({
-            step,
+            step: part.step,
             isLoading,
             markdownRenderer,
-            isLast: [...message.steps.values()].at(-1) === step && isLast,
+            isLast: isLastPart && isLast,
           });
         },
       )}
-      ${message.answer
-        ? html`<p>${renderTextAsMarkdown(message.answer, markdownRenderer, { animate: !isReadOnly && isLoading && isLast })}</p>`
-        : Lit.nothing}
       ${renderError(message)}
       ${isLast && isLoading
         ? Lit.nothing
@@ -864,7 +876,7 @@ function renderChatMessage({
               }
               onFeedbackSubmit(message.rpcId, rating, feedback);
             },
-            suggestions: (isLast && !isReadOnly) ? message.suggestions : undefined,
+            suggestions: (isLast && !isReadOnly && message.parts.at(-1)?.type === 'answer') ? (message.parts.at(-1) as AnswerPart).suggestions : undefined,
             onSuggestionClick,
             onCopyResponseClick: () => onCopyResponseClick(message),
             canShowFeedbackForm,

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';
@@ -517,7 +517,7 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
     this.protocolHandlersSection =
         this.reportView.appendSection(i18nString(UIStrings.protocolHandlers), 'undefined,protocol-handlers');
     this.protocolHandlersView = new ApplicationComponents.ProtocolHandlersView.ProtocolHandlersView();
-    this.protocolHandlersSection.appendFieldWithCustomView(this.protocolHandlersView);
+    this.protocolHandlersView.show(this.protocolHandlersSection.getFieldElement());
     this.iconsSection = this.reportView.appendSection(i18nString(UIStrings.icons), 'report-section-icons', 'icons');
     this.windowControlsSection =
         this.reportView.appendSection(UIStrings.windowControlsOverlay, undefined, 'window-controls-overlay');
@@ -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);
@@ -753,7 +753,8 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
     }
 
     const protocolHandlers = parsedManifest['protocol_handlers'] || [];
-    this.protocolHandlersView.data = {protocolHandlers, manifestLink: url};
+    this.protocolHandlersView.protocolHandlers = protocolHandlers;
+    this.protocolHandlersView.manifestLink = url;
 
     const icons = parsedManifest['icons'] || [];
     this.iconsSection.clearContent();
@@ -933,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');
@@ -946,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]);
   }