chrome-devtools-frontend 1.0.1549484 → 1.0.1553956

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

@@ -3,8 +3,6 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-import './RequestHeaderSection.js';
-
 import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -22,7 +20,7 @@ import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as Sources from '../../sources/sources.js';
 
-import type {RequestHeaderSectionData} from './RequestHeaderSection.js';
+import {RequestHeaderSection} from './RequestHeaderSection.js';
 import requestHeadersViewStyles from './RequestHeadersView.css.js';
 import {
   RESPONSE_HEADER_SECTION_DATA_KEY,
@@ -366,10 +364,10 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
       >
         ${(this.#showRequestHeadersText && requestHeadersText) ?
             this.#renderRawHeaders(requestHeadersText, false) : html`
-          <devtools-request-header-section .data=${{
+          <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(RequestHeaderSection, {
             request: this.#request,
             toReveal: this.#toReveal,
-          } as RequestHeaderSectionData} jslog=${VisualLogging.section('request-headers')}></devtools-request-header-section>
+          })} jslog=${VisualLogging.section('request-headers')}></devtools-widget>
         `}
       </devtools-request-headers-category>
     `;
@@ -480,30 +478,47 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
         aria-label=${i18nString(UIStrings.general)}
       >
       <div jslog=${VisualLogging.section('general')}>
-        ${this.#renderGeneralRow(i18nString(UIStrings.requestUrl), this.#request.url())}
-        ${this.#request.statusCode? this.#renderGeneralRow(i18nString(UIStrings.requestMethod), this.#request.requestMethod) : Lit.nothing}
-        ${this.#request.statusCode? this.#renderGeneralRow(i18nString(UIStrings.statusCode), statusText, statusClasses) : Lit.nothing}
-        ${this.#request.remoteAddress()? this.#renderGeneralRow(i18nString(UIStrings.remoteAddress), this.#request.remoteAddress()) : Lit.nothing}
-        ${this.#request.referrerPolicy()? this.#renderGeneralRow(i18nString(UIStrings.referrerPolicy), String(this.#request.referrerPolicy())) : Lit.nothing}
+        ${this.#renderGeneralRow(i18nString(UIStrings.requestUrl), this.#request.url(), 'request-url')}
+        ${this.#request.statusCode? this.#renderGeneralRow(i18nString(UIStrings.requestMethod),
+            this.#request.requestMethod, 'request-method') : Lit.nothing}
+        ${this.#request.statusCode? this.#renderGeneralRow(i18nString(UIStrings.statusCode),
+            statusText, 'status-code', statusClasses) : Lit.nothing}
+        ${this.#request.remoteAddress()? this.#renderGeneralRow(i18nString(UIStrings.remoteAddress),
+            this.#request.remoteAddress(), 'remote-address') : Lit.nothing}
+        ${this.#request.referrerPolicy()? this.#renderGeneralRow(i18nString(UIStrings.referrerPolicy),
+            String(this.#request.referrerPolicy()), 'referrer-policy') : Lit.nothing}
       </div>
       </devtools-request-headers-category>
     `;
     // clang-format on
   }
 
-  #renderGeneralRow(name: Common.UIString.LocalizedString, value: string, classNames?: string[]): Lit.LitTemplate {
+  #renderGeneralRow(name: Common.UIString.LocalizedString, value: string, id: string, classNames?: string[]):
+      Lit.LitTemplate {
     const isHighlighted = this.#toReveal?.section === NetworkForward.UIRequestLocation.UIHeaderSection.GENERAL &&
         name.toLowerCase() === this.#toReveal?.header?.toLowerCase();
     return html`
       <div class="row ${isHighlighted ? 'header-highlight' : ''}">
         <div class="header-name">${name}</div>
         <div
+          id=${id}
           class="header-value ${classNames?.join(' ')}"
           @copy=${() => Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue)}
         >${value}</div>
       </div>
     `;
   }
+
+  getHeaderElementById(id: string): Element|null {
+    const categories = this.#shadow.querySelectorAll('devtools-request-headers-category');
+    for (const category of categories) {
+      const element = category.querySelector(`#${id}`);
+      if (element) {
+        return element;
+      }
+    }
+    return null;
+  }
 }
 
 export class ToggleRawHeadersEvent extends Event {

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

@@ -3,20 +3,30 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
-.code {
-  font-family: var(--monospace-font-family);
-  font-size: var(--monospace-font-size);
-}
+@scope to (devtools-widget > *) {
+  .code {
+    font-family: var(--monospace-font-family);
+    font-size: var(--monospace-font-size);
+  }
 
-.issuers-list {
-  display: flex;
-  flex-direction: column;
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-}
+  .issuers-list {
+    display: flex;
+    flex-direction: column;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .status-icon {
+    margin: 0 0.3em 2px 0;
+    vertical-align: middle;
+
+    &.failure {
+      color: var(--icon-error);
+    }
 
-.status-icon {
-  margin: 0 0.3em 2px 0;
-  vertical-align: middle;
+    &.success {
+      color: var(--icon-checkmark-green);
+    }
+  }
 }

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

@@ -1,22 +1,20 @@
 // Copyright 2020 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* 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 * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import requestTrustTokensViewStyles from './RequestTrustTokensView.css.js';
 
-const {html} = Lit;
+const {html, render} = Lit;
 
 const UIStrings = {
   /**
@@ -102,152 +100,183 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/network/components/RequestTrustTokensView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class RequestTrustTokensView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  readonly #request: SDK.NetworkRequest.NetworkRequest;
+type Status = 'Success'|'Failure';
 
-  constructor(request: SDK.NetworkRequest.NetworkRequest) {
-    super();
-    this.#request = request;
+export interface ViewInput {
+  params?: Array<{name: string, value: string|string[], isCode?: boolean}>;
+  status?: Status;
+  description?: string;
+  issuedTokenCount?: number;
+}
+
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+function renderRowIfValuePresent<T>(key: string, value: T, isCode?: boolean): Lit.LitTemplate {
+  if (!value || (Array.isArray(value) && value.length === 0)) {
+    return Lit.nothing;
   }
 
-  override wasShown(): void {
-    super.wasShown();
-    this.#request.addEventListener(SDK.NetworkRequest.Events.TRUST_TOKEN_RESULT_ADDED, this.render, this);
-    void this.render();
+  // clang-format off
+  return html`
+    <devtools-report-key>${key}</devtools-report-key>
+    <devtools-report-value class=${isCode ? 'code' : ''}>
+      ${Array.isArray(value) ? html`
+        <ul class="issuers-list">
+            ${value.map(item => html`<li>${item}</li>`)}
+        </ul>` :
+    value}
+    </devtools-report-value>
+  `;
+  // clang-format on
+}
+
+const renderResultSection = (status?: Status, description?: string, issuedTokenCount?: number): Lit.LitTemplate => {
+  if (!status) {
+    return Lit.nothing;
   }
 
-  override willHide(): void {
-    super.willHide();
-    this.#request.removeEventListener(SDK.NetworkRequest.Events.TRUST_TOKEN_RESULT_ADDED, this.render, this);
+  // clang-format off
+  return html`
+    <devtools-report-section-header>${i18nString(UIStrings.result)}</devtools-report-section-header>
+    <devtools-report-key>${i18nString(UIStrings.status)}</devtools-report-key>
+    <devtools-report-value>
+      <span>
+        <devtools-icon class="status-icon medium ${status === 'Success' ? 'success' : 'failure'}"
+        name=${status === 'Success' ? 'check-circle' : 'cross-circle-filled'}>
+        </devtools-icon>
+        <strong>${status === 'Success' ? i18nString(UIStrings.success) : i18nString(UIStrings.failure)}</strong>
+        ${description ? html` ${description}` : Lit.nothing}
+      </span>
+    </devtools-report-value>
+    ${renderRowIfValuePresent(i18nString(UIStrings.numberOfIssuedTokens), issuedTokenCount)}
+    <devtools-report-divider></devtools-report-divider>
+    `;
+  // clang-format on
+};
+
+const renderParameterSection = (params: ViewInput['params']): Lit.LitTemplate => {
+  if (!params || params.length === 0) {
+    return Lit.nothing;
   }
+  // clang-format off
+  return html`
+    <devtools-report-section-header jslog=${VisualLogging.pane('trust-tokens').track({ resize: true })}>
+      ${i18nString(UIStrings.parameters)}
+    </devtools-report-section-header>
+    ${params.map(param => renderRowIfValuePresent(param.name, param.value, param.isCode))}
+    <devtools-report-divider></devtools-report-divider>
+  `;
+  // clang-format on
+};
 
-  override async render(): Promise<void> {
-    if (!this.#request) {
-      throw new Error('Trying to render a Trust Token report without providing data');
-    }
+// clang-format off
+export const DEFAULT_VIEW: View = (input, output, target): void => {
+  render(html`
+    <style>${requestTrustTokensViewStyles}</style>
+    <devtools-report>
+      ${renderParameterSection(input.params)}
+      ${renderResultSection(input.status, input.description, input.issuedTokenCount)}
+    </devtools-report>
+  `, target);
+};
+// clang-format on
+
+export class RequestTrustTokensView extends UI.Widget.Widget {
+  #request: SDK.NetworkRequest.NetworkRequest|null = null;
+  #view: View;
 
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    Lit.render(html`
-      <style>${requestTrustTokensViewStyles}</style>
-      <devtools-report>
-        ${this.#renderParameterSection()}
-        ${this.#renderResultSection()}
-      </devtools-report>
-    `, this.#shadow, {host: this});
-    // clang-format on
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
   }
 
-  #renderParameterSection(): Lit.LitTemplate {
-    const trustTokenParams = this.#request.trustTokenParams();
-    if (!trustTokenParams) {
-      return Lit.nothing;
-    }
+  get request(): SDK.NetworkRequest.NetworkRequest|null {
+    return this.#request;
+  }
 
-    return html`
-      <devtools-report-section-header jslog=${VisualLogging.pane('trust-tokens').track({
-      resize: true,
-    })}>${i18nString(UIStrings.parameters)}</devtools-report-section-header>
-      ${renderRowWithCodeValue(i18nString(UIStrings.type), trustTokenParams.operation.toString())}
-      ${this.#renderRefreshPolicy(trustTokenParams)}
-      ${this.#renderIssuers(trustTokenParams)}
-      ${this.#renderIssuerAndTopLevelOriginFromResult()}
-      <devtools-report-divider></devtools-report-divider>
-    `;
+  set request(request: SDK.NetworkRequest.NetworkRequest|null) {
+    if (this.#request === request) {
+      return;
+    }
+    this.#unsubscribe();
+    this.#request = request;
+    this.#subscribe();
+    this.requestUpdate();
   }
 
-  #renderRefreshPolicy(params: Protocol.Network.TrustTokenParams): Lit.LitTemplate {
-    if (params.operation !== Protocol.Network.TrustTokenOperationType.Redemption) {
-      return Lit.nothing;
+  #subscribe(): void {
+    if (this.#request && this.isShowing()) {
+      this.#request.addEventListener(SDK.NetworkRequest.Events.TRUST_TOKEN_RESULT_ADDED, this.requestUpdate, this);
     }
-    return renderRowWithCodeValue(i18nString(UIStrings.refreshPolicy), params.refreshPolicy.toString());
   }
 
-  #renderIssuers(params: Protocol.Network.TrustTokenParams): Lit.LitTemplate {
-    if (!params.issuers || params.issuers.length === 0) {
-      return Lit.nothing;
+  #unsubscribe(): void {
+    if (this.#request) {
+      this.#request.removeEventListener(SDK.NetworkRequest.Events.TRUST_TOKEN_RESULT_ADDED, this.requestUpdate, this);
     }
+  }
 
-    return html`
-      <devtools-report-key>${i18nString(UIStrings.issuers)}</devtools-report-key>
-      <devtools-report-value>
-        <ul class="issuers-list">
-          ${params.issuers.map(issuer => html`<li>${issuer}</li>`)}
-        </ul>
-      </devtools-report-value>
-    `;
+  override wasShown(): void {
+    super.wasShown();
+    this.#subscribe();
+    this.requestUpdate();
   }
 
-  // The issuer and top level origin are technically parameters but reported in the
-  // result structure due to the timing when they are calculated in the backend.
-  // Nonetheless, we show them as part of the parameter section.
-  #renderIssuerAndTopLevelOriginFromResult(): Lit.LitTemplate {
-    const trustTokenResult = this.#request.trustTokenOperationDoneEvent();
-    if (!trustTokenResult) {
-      return Lit.nothing;
+  override willHide(): void {
+    super.willHide();
+    this.#unsubscribe();
+  }
+
+  override performUpdate(): void {
+    if (!this.request) {
+      return;
     }
 
-    return html`
-      ${renderSimpleRowIfValuePresent(i18nString(UIStrings.topLevelOrigin), trustTokenResult.topLevelOrigin)}
-      ${renderSimpleRowIfValuePresent(i18nString(UIStrings.issuer), trustTokenResult.issuerOrigin)}`;
-  }
+    const trustTokenParams = this.request.trustTokenParams();
+    const trustTokenResult = this.request.trustTokenOperationDoneEvent();
 
-  #renderResultSection(): Lit.LitTemplate {
-    const trustTokenResult = this.#request.trustTokenOperationDoneEvent();
-    if (!trustTokenResult) {
-      return Lit.nothing;
+    const viewInput: ViewInput = {};
+
+    if (trustTokenParams) {
+      viewInput.params = [
+        {name: i18nString(UIStrings.type), value: trustTokenParams.operation.toString(), isCode: true},
+      ];
+      if (trustTokenParams.operation === Protocol.Network.TrustTokenOperationType.Redemption) {
+        viewInput.params.push({
+          name: i18nString(UIStrings.refreshPolicy),
+          value: trustTokenParams.refreshPolicy.toString(),
+          isCode: true,
+        });
+      }
+      if (trustTokenParams.issuers && trustTokenParams.issuers.length > 0) {
+        viewInput.params.push({name: i18nString(UIStrings.issuers), value: trustTokenParams.issuers});
+      }
+      if (trustTokenResult?.topLevelOrigin) {
+        viewInput.params.push({name: i18nString(UIStrings.topLevelOrigin), value: trustTokenResult.topLevelOrigin});
+      }
+      if (trustTokenResult?.issuerOrigin) {
+        viewInput.params.push({name: i18nString(UIStrings.issuer), value: trustTokenResult.issuerOrigin});
+      }
     }
-    return html`
-      <devtools-report-section-header>${i18nString(UIStrings.result)}</devtools-report-section-header>
-      <devtools-report-key>${i18nString(UIStrings.status)}</devtools-report-key>
-      <devtools-report-value>
-        <span>
-          <devtools-icon class="status-icon medium"
-            .data=${getIconForStatusCode(trustTokenResult.status)}>
-          </devtools-icon>
-          <strong>${getSimplifiedStatusTextForStatusCode(trustTokenResult.status)}</strong>
-          ${getDetailedTextForStatusCode(trustTokenResult.status)}
-        </span>
-      </devtools-report-value>
-      ${this.#renderIssuedTokenCount(trustTokenResult)}
-      <devtools-report-divider></devtools-report-divider>
-      `;
-  }
 
-  #renderIssuedTokenCount(result: Protocol.Network.TrustTokenOperationDoneEvent): Lit.LitTemplate {
-    if (result.type !== Protocol.Network.TrustTokenOperationType.Issuance) {
-      return Lit.nothing;
+    if (trustTokenResult) {
+      viewInput.status = statusConsideredSuccess(trustTokenResult.status) ? 'Success' : 'Failure';
+      viewInput.description = getDetailedTextForStatusCode(trustTokenResult.status) ?? undefined;
+      viewInput.issuedTokenCount = trustTokenResult.type === Protocol.Network.TrustTokenOperationType.Issuance ?
+          trustTokenResult.issuedTokenCount :
+          undefined;
     }
-    return renderSimpleRowIfValuePresent(i18nString(UIStrings.numberOfIssuedTokens), result.issuedTokenCount);
+
+    this.#view(viewInput, undefined, this.contentElement);
   }
 }
 
-const SUCCESS_ICON_DATA: IconButton.Icon.IconWithName = {
-  color: 'var(--icon-checkmark-green)',
-  iconName: 'check-circle',
-};
-
-const FAILURE_ICON_DATA: IconButton.Icon.IconWithName = {
-  color: 'var(--icon-error)',
-  iconName: 'cross-circle-filled',
-};
-
 export function statusConsideredSuccess(status: Protocol.Network.TrustTokenOperationDoneEventStatus): boolean {
   return status === Protocol.Network.TrustTokenOperationDoneEventStatus.Ok ||
       status === Protocol.Network.TrustTokenOperationDoneEventStatus.AlreadyExists ||
       status === Protocol.Network.TrustTokenOperationDoneEventStatus.FulfilledLocally;
 }
 
-function getIconForStatusCode(status: Protocol.Network.TrustTokenOperationDoneEventStatus):
-    IconButton.Icon.IconWithName {
-  return statusConsideredSuccess(status) ? SUCCESS_ICON_DATA : FAILURE_ICON_DATA;
-}
-
-function getSimplifiedStatusTextForStatusCode(status: Protocol.Network.TrustTokenOperationDoneEventStatus): string {
-  return statusConsideredSuccess(status) ? i18nString(UIStrings.success) : i18nString(UIStrings.failure);
-}
-
 function getDetailedTextForStatusCode(status: Protocol.Network.TrustTokenOperationDoneEventStatus): string|null {
   switch (status) {
     case Protocol.Network.TrustTokenOperationDoneEventStatus.Ok:
@@ -274,29 +303,3 @@ function getDetailedTextForStatusCode(status: Protocol.Network.TrustTokenOperati
       return i18nString(UIStrings.perSiteLimit);
   }
 }
-
-function renderSimpleRowIfValuePresent<T>(key: string, value: T|undefined): Lit.LitTemplate {
-  if (value === undefined) {
-    return Lit.nothing;
-  }
-
-  return html`
-    <devtools-report-key>${key}</devtools-report-key>
-    <devtools-report-value>${value}</devtools-report-value>
-  `;
-}
-
-function renderRowWithCodeValue(key: string, value: string): Lit.TemplateResult {
-  return html`
-    <devtools-report-key>${key}</devtools-report-key>
-    <devtools-report-value class="code">${value}</devtools-report-value>
-  `;
-}
-
-customElements.define('devtools-trust-token-report', RequestTrustTokensView);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-trust-token-report': RequestTrustTokensView;
-  }
-}

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/IsolateSelector.ts

@@ -88,7 +88,6 @@ export class IsolateSelector extends UI.Widget.VBox implements UI.ListControl.Li
         this.totalTrendDiv, i18nString(UIStrings.totalPageJsHeapSizeChangeTrend, {PH1: trendIntervalMinutes}));
     UI.Tooltip.Tooltip.install(this.totalValueDiv, i18nString(UIStrings.totalPageJsHeapSizeAcrossAllVm));
 
-    SDK.IsolateManager.IsolateManager.instance().observeIsolates(this);
     SDK.TargetManager.TargetManager.instance().addEventListener(
         SDK.TargetManager.Events.NAME_CHANGED, this.targetChanged, this);
     SDK.TargetManager.TargetManager.instance().addEventListener(
@@ -97,6 +96,7 @@ export class IsolateSelector extends UI.Widget.VBox implements UI.ListControl.Li
 
   override wasShown(): void {
     super.wasShown();
+    SDK.IsolateManager.IsolateManager.instance().observeIsolates(this);
     SDK.IsolateManager.IsolateManager.instance().addEventListener(
         SDK.IsolateManager.Events.MEMORY_CHANGED, this.heapStatsChanged, this);
   }
@@ -105,6 +105,7 @@ export class IsolateSelector extends UI.Widget.VBox implements UI.ListControl.Li
     super.willHide();
     SDK.IsolateManager.IsolateManager.instance().removeEventListener(
         SDK.IsolateManager.Events.MEMORY_CHANGED, this.heapStatsChanged, this);
+    SDK.IsolateManager.IsolateManager.instance().unobserveIsolates(this);
   }
 
   isolateAdded(isolate: SDK.IsolateManager.Isolate): void {

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';