chrome-devtools-frontend 1.0.1549484 → 1.0.1553956

package/front_end/panels/timeline/components/Utils.ts

@@ -300,3 +300,28 @@ export function determineCompareRating(
 
   return 'similar';
 }
+
+/**
+ * Returns true if LCP or INP are worse in the field than what was observed locally.
+ *
+ * CLS is ignored because the guidance of applying throttling or device emulation doesn't
+ * correlate as much with observing a more average user experience.
+ */
+export function isFieldWorseThanLocal(local: {lcp?: Trace.Types.Timing.Milli, inp?: Trace.Types.Timing.Milli}, field: {
+  lcp?: Trace.Types.Timing.Milli,
+  inp?: Trace.Types.Timing.Milli,
+}): boolean {
+  if (local.lcp !== undefined && field.lcp !== undefined) {
+    if (determineCompareRating('LCP', local.lcp, field.lcp) === 'better') {
+      return true;
+    }
+  }
+
+  if (local.inp !== undefined && field.inp !== undefined) {
+    if (determineCompareRating('LCP', local.inp, field.inp) === 'better') {
+      return true;
+    }
+  }
+
+  return false;
+}

package/front_end/panels/timeline/components/insights/BaseInsightComponent.ts

@@ -1,7 +1,7 @@
 // Copyright 2024 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 */
+/* eslint-disable @devtools/no-imperative-dom-api */
 
 import '../../../../ui/components/markdown_view/markdown_view.js';
 
@@ -12,7 +12,6 @@ import * as Badges from '../../../../models/badges/badges.js';
 import type {InsightModel} from '../../../../models/trace/insights/types.js';
 import type * as Trace from '../../../../models/trace/trace.js';
 import * as Buttons from '../../../../ui/components/buttons/buttons.js';
-import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.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';
@@ -66,6 +65,136 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/BaseInsightComponent.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+interface ViewInput {
+  internalName: string;
+  model: InsightModel;
+  selected: boolean;
+  isAIAssistanceContext: boolean;
+  canShowAskAI: boolean;
+  estimatedSavingsString: string|null;
+  estimatedSavingsAriaLabel: string|null;
+  renderContent: () => Lit.LitTemplate;
+  dispatchInsightToggle: () => void;
+  onHeaderKeyDown: () => void;
+  onAskAIButtonClick: () => void;
+}
+
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+const DEFAULT_VIEW: View = (input, output, target) => {
+  const {
+    internalName,
+    model,
+    selected,
+    estimatedSavingsString,
+    estimatedSavingsAriaLabel,
+    isAIAssistanceContext,
+    canShowAskAI,
+    dispatchInsightToggle,
+    renderContent,
+    onHeaderKeyDown,
+    onAskAIButtonClick,
+  } = input;
+
+  const containerClasses = Lit.Directives.classMap({
+    insight: true,
+    closed: !selected || isAIAssistanceContext,
+    'ai-assistance-context': isAIAssistanceContext,
+  });
+
+  let ariaLabel = `${i18nString(UIStrings.viewDetails, {PH1: model.title})}`;
+  if (estimatedSavingsAriaLabel) {
+    // space prefix is deliberate to add a gap after the view details text
+    ariaLabel += ` ${estimatedSavingsAriaLabel}`;
+  }
+
+  function renderInsightContent(): Lit.LitTemplate {
+    if (!selected) {
+      return Lit.nothing;
+    }
+
+    const aiLabel = 'Debug with AI';
+    const ariaLabel = `Ask AI about ${model.title} insight`;
+    const content = renderContent();
+
+    // clang-format off
+    return html`
+      <div class="insight-body">
+        <div class="insight-description">${md(model.description)}</div>
+        <div class="insight-content">${content}</div>
+        ${canShowAskAI ? html`
+          <div class="ask-ai-btn-wrap">
+            <devtools-button class="ask-ai"
+              .variant=${Buttons.Button.Variant.OUTLINED}
+              .iconName=${'smart-assistant'}
+              data-insights-ask-ai
+              jslog=${VisualLogging.action(`timeline.insight-ask-ai.${internalName}`).track({click: true})}
+              @click=${onAskAIButtonClick}
+              aria-label=${ariaLabel}
+            >${aiLabel}</devtools-button>
+          </div>
+        `: Lit.nothing}
+      </div>`;
+    // clang-format on
+  }
+
+  function renderHoverIcon(): Lit.LitTemplate {
+    if (isAIAssistanceContext) {
+      return Lit.nothing;
+    }
+
+    const containerClasses = Lit.Directives.classMap({
+      'insight-hover-icon': true,
+      active: selected,
+    });
+
+    // clang-format off
+    return html`
+      <div class=${containerClasses} inert>
+        <devtools-button .data=${{
+          variant: Buttons.Button.Variant.ICON,
+          iconName: 'chevron-down',
+          size: Buttons.Button.Size.SMALL,
+        } as Buttons.Button.ButtonData}
+      ></devtools-button>
+      </div>
+    `;
+    // clang-format on
+  }
+
+  // clang-format off
+  Lit.render(html`
+    <style>${baseInsightComponentStyles}</style>
+    <div class=${containerClasses}>
+      <header @click=${dispatchInsightToggle}
+        @keydown=${onHeaderKeyDown}
+        jslog=${VisualLogging.action(`timeline.toggle-insight.${internalName}`).track({click: true})}
+        data-insight-header-title=${model?.title}
+        tabIndex="0"
+        role="button"
+        aria-expanded=${selected}
+        aria-label=${ariaLabel}
+      >
+        ${renderHoverIcon()}
+        <h3 class="insight-title">${model?.title}</h3>
+        ${estimatedSavingsString ?
+          html`
+          <slot name="insight-savings" class="insight-savings">
+            <span title=${estimatedSavingsAriaLabel ?? ''}>${estimatedSavingsString}</span>
+          </slot>
+        </div>`
+        : Lit.nothing}
+      </header>
+      ${renderInsightContent()}
+    </div>
+  `, target);
+  // clang-format on
+
+  if (selected) {
+    requestAnimationFrame(() => requestAnimationFrame(() => target.scrollIntoViewIfNeeded()));
+  }
+};
+
 export interface BaseInsightData {
   /** The trace bounds for the insight set that contains this insight. */
   bounds: Trace.Types.Timing.TraceWindowMicro|null;
@@ -73,26 +202,32 @@ export interface BaseInsightData {
   insightSetKey: string|null;
 }
 
-export abstract class BaseInsightComponent<T extends InsightModel> extends HTMLElement {
+export abstract class BaseInsightComponent<T extends InsightModel> extends UI.Widget.Widget {
+  #view: View;
   abstract internalName: string;
 
-  // So we can use the TypeScript BaseInsight class without getting warnings
-  // about litTagName. Every child should overwrite this.
-  static readonly litTagName = Lit.StaticHtml.literal``;
-  protected readonly shadow = this.attachShadow({mode: 'open'});
-
   // This flag tracks if the Insights AI feature is enabled within Chrome for
   // the active user.
   #askAiEnabled = false;
-
+  // Tracks if this component is rendered withing the AI assistance panel.
+  // Currently only relevant to GreenDev.
+  #isAIAssistanceContext = false;
   #selected = false;
   #model: T|null = null;
   #agentFocus: AIAssistance.AIContext.AgentFocus|null = null;
   #fieldMetrics: Trace.Insights.Common.CrUXFieldMetricResults|null = null;
+  #parsedTrace: Trace.TraceModel.ParsedTrace|null = null;
+  #initialOverlays: Trace.Types.Overlays.Overlay[]|null = null;
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
+  }
 
   get model(): T|null {
     return this.#model;
   }
+
   protected data: BaseInsightData = {
     bounds: null,
     insightSetKey: null,
@@ -102,11 +237,6 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends HTMLE
     selectedRowEl: null,
     selectionIsSticky: false,
   };
-  #initialOverlays: Trace.Types.Overlays.Overlay[]|null = null;
-
-  protected scheduleRender(): void {
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
-  }
 
   // Insights that do support the AI feature can override this to return true.
   // The "Ask AI" button will only be shown for an Insight if this
@@ -116,37 +246,49 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends HTMLE
     return false;
   }
 
-  connectedCallback(): void {
-    this.setAttribute('jslog', `${VisualLogging.section(`timeline.insights.${this.internalName}`)}`);
+  override wasShown(): void {
+    super.wasShown();
+
     // Used for unit test purposes when querying the DOM.
-    this.dataset.insightName = this.internalName;
+    this.element.dataset.insightName = this.internalName;
 
     const {devToolsAiAssistancePerformanceAgent} = Root.Runtime.hostConfig;
     this.#askAiEnabled = Boolean(devToolsAiAssistancePerformanceAgent?.enabled);
   }
 
+  set isAIAssistanceContext(isAIAssistanceContext: boolean) {
+    this.#isAIAssistanceContext = isAIAssistanceContext;
+    this.requestUpdate();
+  }
+
   set selected(selected: boolean) {
     if (!this.#selected && selected) {
       const options = this.getOverlayOptionsForInitialOverlays();
-      this.dispatchEvent(new SidebarInsight.InsightProvideOverlays(this.getInitialOverlays(), options));
+      this.element.dispatchEvent(new SidebarInsight.InsightProvideOverlays(this.getInitialOverlays(), options));
     }
 
-    this.#selected = selected;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+    if (this.#selected !== selected) {
+      this.#selected = selected;
+      this.requestUpdate();
+    }
   }
 
   get selected(): boolean {
     return this.#selected;
   }
 
+  set parsedTrace(trace: Trace.TraceModel.ParsedTrace|null) {
+    this.#parsedTrace = trace;
+  }
+
   set model(model: T) {
     this.#model = model;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+    this.requestUpdate();
   }
 
   set insightSetKey(insightSetKey: string|null) {
     this.data.insightSetKey = insightSetKey;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+    this.requestUpdate();
   }
 
   get bounds(): Trace.Types.Timing.TraceWindowMicro|null {
@@ -155,7 +297,7 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends HTMLE
 
   set bounds(bounds: Trace.Types.Timing.TraceWindowMicro|null) {
     this.data.bounds = bounds;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+    this.requestUpdate();
   }
 
   set agentFocus(agentFocus: AIAssistance.AIContext.AgentFocus) {
@@ -175,14 +317,27 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends HTMLE
   }
 
   #dispatchInsightToggle(): void {
-    if (!this.data.insightSetKey || !this.model) {
+    if (!this.data.insightSetKey || !this.#model) {
       // Shouldn't happen, but needed to satisfy TS.
       return;
     }
 
+    if (this.#parsedTrace && UI.Floaty.enabled()) {
+      const floatyHandled = UI.Floaty.onFloatyClick({
+        type: UI.Floaty.FloatyContextTypes.PERFORMANCE_INSIGHT,
+        data: {
+          insight: this.#model,
+          trace: this.#parsedTrace,
+        }
+      });
+      if (floatyHandled) {
+        return;
+      }
+    }
+
     const focus = UI.Context.Context.instance().flavor(AIAssistance.AIContext.AgentFocus);
     if (this.#selected) {
-      this.dispatchEvent(new SidebarInsight.InsightDeactivated());
+      this.element.dispatchEvent(new SidebarInsight.InsightDeactivated());
 
       // Clear agent (but only if currently focused on an insight).
       if (focus) {
@@ -192,7 +347,7 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends HTMLE
     }
 
     if (focus) {
-      UI.Context.Context.instance().setFlavor(AIAssistance.AIContext.AgentFocus, focus.withInsight(this.model));
+      UI.Context.Context.instance().setFlavor(AIAssistance.AIContext.AgentFocus, focus.withInsight(this.#model));
     }
 
     Badges.UserBadges.instance().recordAction(Badges.BadgeAction.PERFORMANCE_INSIGHT_CLICKED);
@@ -201,34 +356,14 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends HTMLE
     this.sharedTableState.selectedRowEl = null;
     this.sharedTableState.selectionIsSticky = false;
 
-    this.dispatchEvent(new SidebarInsight.InsightActivated(this.model, this.data.insightSetKey));
-  }
-
-  #renderHoverIcon(insightIsActive: boolean): Lit.TemplateResult {
-    // clang-format off
-    const containerClasses = Lit.Directives.classMap({
-      'insight-hover-icon': true,
-      active: insightIsActive,
-    });
-    return html`
-      <div class=${containerClasses} inert>
-        <devtools-button .data=${{
-          variant: Buttons.Button.Variant.ICON,
-          iconName: 'chevron-down',
-          size: Buttons.Button.Size.SMALL,
-        } as Buttons.Button.ButtonData}
-      ></devtools-button>
-      </div>
-
-    `;
-    // clang-format on
+    this.element.dispatchEvent(new SidebarInsight.InsightActivated(this.#model, this.data.insightSetKey));
   }
 
   /**
    * Ensure that if the user presses enter or space on a header, we treat it
    * like a click and toggle the insight.
    */
-  #handleHeaderKeyDown(event: KeyboardEvent): void {
+  #onHeaderKeyDown(event: KeyboardEvent): void {
     if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
       event.stopPropagation();
@@ -252,12 +387,12 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends HTMLE
     }
 
     if (!overlays) {
-      this.dispatchEvent(new SidebarInsight.InsightProvideOverlays(
+      this.element.dispatchEvent(new SidebarInsight.InsightProvideOverlays(
           this.getInitialOverlays(), this.getOverlayOptionsForInitialOverlays()));
       return;
     }
 
-    this.dispatchEvent(new SidebarInsight.InsightProvideOverlays(overlays, options));
+    this.element.dispatchEvent(new SidebarInsight.InsightProvideOverlays(overlays, options));
   }
 
   getInitialOverlays(): Trace.Types.Overlays.Overlay[] {
@@ -270,17 +405,30 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends HTMLE
   }
 
   protected createOverlays(): Trace.Types.Overlays.Overlay[] {
-    return this.model?.createOverlays?.() ?? [];
+    return this.#model?.createOverlays?.() ?? [];
   }
 
   protected abstract renderContent(): Lit.LitTemplate;
 
-  #render(): void {
-    if (!this.model) {
+  override performUpdate(): void {
+    if (!this.#model) {
       return;
     }
 
-    this.#renderWithContent();
+    const input: ViewInput = {
+      internalName: this.internalName,
+      model: this.#model,
+      selected: this.#selected,
+      estimatedSavingsString: this.getEstimatedSavingsString(),
+      estimatedSavingsAriaLabel: this.#getEstimatedSavingsAriaLabel(),
+      isAIAssistanceContext: this.#isAIAssistanceContext,
+      canShowAskAI: this.#canShowAskAI(),
+      dispatchInsightToggle: () => this.#dispatchInsightToggle(),
+      renderContent: () => this.renderContent(),
+      onHeaderKeyDown: () => this.#onHeaderKeyDown,
+      onAskAIButtonClick: () => this.#onAskAIButtonClick(),
+    };
+    this.#view(input, undefined, this.contentElement);
   }
 
   getEstimatedSavingsTime(): Trace.Types.Timing.Milli|null {
@@ -288,7 +436,7 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends HTMLE
   }
 
   getEstimatedSavingsBytes(): number|null {
-    return this.model?.wastedBytes ?? null;
+    return this.#model?.wastedBytes ?? null;
   }
 
   #getEstimatedSavingsTextParts(): {bytesString?: string, timeString?: string} {
@@ -331,7 +479,7 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends HTMLE
     return null;
   }
 
-  #getEstimatedSavingsString(): string|null {
+  getEstimatedSavingsString(): string|null {
     const {bytesString, timeString} = this.#getEstimatedSavingsTextParts();
 
     if (timeString && bytesString) {
@@ -354,7 +502,7 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends HTMLE
     return null;
   }
 
-  #askAIButtonClick(): void {
+  #onAskAIButtonClick(): void {
     if (!this.#agentFocus) {
       return;
     }
@@ -367,7 +515,7 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends HTMLE
 
     let focus = UI.Context.Context.instance().flavor(AIAssistance.AIContext.AgentFocus);
     if (focus) {
-      focus = focus.withInsight(this.model);
+      focus = focus.withInsight(this.#model);
     } else {
       focus = this.#agentFocus;
     }
@@ -379,98 +527,14 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends HTMLE
   }
 
   #canShowAskAI(): boolean {
+    if (this.#isAIAssistanceContext) {
+      return false;
+    }
+
     const aiAvailable = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue !==
             Root.Runtime.GenAiEnterprisePolicyValue.DISABLE &&
         this.#askAiEnabled && Root.Runtime.hostConfig.aidaAvailability?.enabled === true;
 
     return aiAvailable && this.hasAskAiSupport();
   }
-
-  #renderInsightContent(insightModel: T): Lit.LitTemplate {
-    if (!this.#selected) {
-      return Lit.nothing;
-    }
-
-    const aiLabel = Root.Runtime.hostConfig.devToolsAiDebugWithAi?.enabled ||
-            Root.Runtime.hostConfig.devToolsAiSubmenuPrompts?.enabled ?
-        'Debug with AI' :
-        'Ask AI';
-    const ariaLabel = `${aiLabel} about ${insightModel.title} insight`;
-    // Only render the insight body content if it is selected.
-    // To avoid re-rendering triggered from elsewhere.
-    const content = this.renderContent();
-    // clang-format off
-    return html`
-      <div class="insight-body">
-        <div class="insight-description">${md(insightModel.description)}</div>
-        <div class="insight-content">${content}</div>
-        ${this.#canShowAskAI() ? html`
-          <div class="ask-ai-btn-wrap">
-            <devtools-button class="ask-ai"
-              .variant=${Buttons.Button.Variant.OUTLINED}
-              .iconName=${'smart-assistant'}
-              data-insights-ask-ai
-              jslog=${VisualLogging.action(`timeline.insight-ask-ai.${this.internalName}`).track({click: true})}
-              @click=${this.#askAIButtonClick}
-              aria-label=${ariaLabel}
-            >${aiLabel}</devtools-button>
-          </div>
-        `: Lit.nothing}
-      </div>`;
-    // clang-format on
-  }
-
-  #renderWithContent(): void {
-    if (!this.#model) {
-      Lit.render(Lit.nothing, this.shadow, {host: this});
-      return;
-    }
-
-    const containerClasses = Lit.Directives.classMap({
-      insight: true,
-      closed: !this.#selected,
-    });
-    const estimatedSavingsString = this.#getEstimatedSavingsString();
-    const estimatedSavingsAriaLabel = this.#getEstimatedSavingsAriaLabel();
-
-    let ariaLabel = `${i18nString(UIStrings.viewDetails, {PH1: this.#model.title})}`;
-    if (estimatedSavingsAriaLabel) {
-      // space prefix is deliberate to add a gap after the view details text
-      ariaLabel += ` ${estimatedSavingsAriaLabel}`;
-    }
-
-    // clang-format off
-    const output = html`
-      <style>${baseInsightComponentStyles}</style>
-      <div class=${containerClasses}>
-        <header @click=${this.#dispatchInsightToggle}
-          @keydown=${this.#handleHeaderKeyDown}
-          jslog=${VisualLogging.action(`timeline.toggle-insight.${this.internalName}`).track({click: true})}
-          data-insight-header-title=${this.#model?.title}
-          tabIndex="0"
-          role="button"
-          aria-expanded=${this.#selected}
-          aria-label=${ariaLabel}
-        >
-          ${this.#renderHoverIcon(this.#selected)}
-          <h3 class="insight-title">${this.#model?.title}</h3>
-          ${estimatedSavingsString ?
-            html`
-            <slot name="insight-savings" class="insight-savings">
-              <span title=${estimatedSavingsAriaLabel ?? ''}>${estimatedSavingsString}</span>
-            </slot>
-          </div>`
-          : Lit.nothing}
-        </header>
-        ${this.#renderInsightContent(this.#model)}
-      </div>
-    `;
-    // clang-format on
-
-    Lit.render(output, this.shadow, {host: this});
-
-    if (this.#selected) {
-      requestAnimationFrame(() => requestAnimationFrame(() => this.scrollIntoViewIfNeeded()));
-    }
-  }
 }

package/front_end/panels/timeline/components/insights/CLSCulprits.ts

@@ -2,23 +2,21 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import './NodeLink.js';
-
 import * as i18n from '../../../../core/i18n/i18n.js';
+import type * as Platform from '../../../../core/platform/platform.js';
 import type {CLSCulpritsInsightModel} from '../../../../models/trace/insights/CLSCulprits.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 
 import {BaseInsightComponent} from './BaseInsightComponent.js';
 import {EventReferenceClick} from './EventRef.js';
-import type * as NodeLink from './NodeLink.js';
+import {nodeLink} from './NodeLink.js';
 
 const {UIStrings, i18nString} = Trace.Insights.Models.CLSCulprits;
 
 const {html} = Lit;
 
 export class CLSCulprits extends BaseInsightComponent<CLSCulpritsInsightModel> {
-  static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-cls-culprits`;
   override internalName = 'cls-culprits';
 
   protected override hasAskAiSupport(): boolean {
@@ -34,7 +32,7 @@ export class CLSCulprits extends BaseInsightComponent<CLSCulpritsInsightModel> {
   }
 
   #clickEvent(event: Trace.Types.Events.Event): void {
-    this.dispatchEvent(new EventReferenceClick(event));
+    this.element.dispatchEvent(new EventReferenceClick(event));
   }
 
   #renderCulpritsSection(culprits: Trace.Insights.Models.CLSCulprits.LayoutShiftItem[]): Lit.LitTemplate {
@@ -52,13 +50,11 @@ export class CLSCulprits extends BaseInsightComponent<CLSCulpritsInsightModel> {
               return html`
                 <li>
                   ${culprit.description}
-                  <devtools-performance-node-link
-                    .data=${{
-                      backendNodeId: culprit.backendNodeId,
-                      frame: culprit.frame,
-                      fallbackUrl: culprit.url,
-                    } as NodeLink.NodeLinkData}>
-                  </devtools-performance-node-link>
+                  ${nodeLink({
+                    backendNodeId: culprit.backendNodeId,
+                    frame: culprit.frame,
+                    fallbackUrl: culprit.url as Platform.DevToolsPath.UrlString,
+                  })}
                 </li>`;
             }
 
@@ -94,11 +90,3 @@ export class CLSCulprits extends BaseInsightComponent<CLSCulpritsInsightModel> {
     // clang-format on
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-cls-culprits': CLSCulprits;
-  }
-}
-
-customElements.define('devtools-performance-cls-culprits', CLSCulprits);

package/front_end/panels/timeline/components/insights/Cache.ts

@@ -18,7 +18,6 @@ const {UIStrings, i18nString, createOverlayForRequest} = Trace.Insights.Models.C
 const {html} = Lit;
 
 export class Cache extends BaseInsightComponent<CacheInsightModel> {
-  static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-cache`;
   override internalName = 'cache';
 
   protected override hasAskAiSupport(): boolean {
@@ -68,11 +67,3 @@ export class Cache extends BaseInsightComponent<CacheInsightModel> {
     // clang-format on
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-cache': Cache;
-  }
-}
-
-customElements.define('devtools-performance-cache', Cache);

package/front_end/panels/timeline/components/insights/Checklist.ts

@@ -7,7 +7,7 @@
  * @file A list of pass/fail conditions for an insight.
  */
 
-import '../../../../ui/components/icon_button/icon_button.js';
+import '../../../../ui/kit/kit.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type * as Trace from '../../../../models/trace/trace.js';