chrome-devtools-frontend 1.0.1550444 → 1.0.1555174

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

@@ -0,0 +1,91 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type * as Trace from '../../../../models/trace/trace.js';
+import * as UI from '../../../../ui/legacy/legacy.js';
+
+import type {BaseInsightComponent} from './BaseInsightComponent.js';
+import {Cache} from './Cache.js';
+import {CLSCulprits} from './CLSCulprits.js';
+import {DocumentLatency} from './DocumentLatency.js';
+import {DOMSize} from './DOMSize.js';
+import {DuplicatedJavaScript} from './DuplicatedJavaScript.js';
+import {FontDisplay} from './FontDisplay.js';
+import {ForcedReflow} from './ForcedReflow.js';
+import {ImageDelivery} from './ImageDelivery.js';
+import {INPBreakdown} from './INPBreakdown.js';
+import {LCPBreakdown} from './LCPBreakdown.js';
+import {LCPDiscovery} from './LCPDiscovery.js';
+import {LegacyJavaScript} from './LegacyJavaScript.js';
+import {ModernHTTP} from './ModernHTTP.js';
+import {NetworkDependencyTree} from './NetworkDependencyTree.js';
+import {RenderBlocking} from './RenderBlocking.js';
+import {SlowCSSSelector} from './SlowCSSSelector.js';
+import {ThirdParties} from './ThirdParties.js';
+import {Viewport} from './Viewport.js';
+
+const {widgetConfig} = UI.Widget;
+
+type InsightWidgetElement = UI.Widget.WidgetElement<BaseInsightComponent<Trace.Insights.Types.InsightModel>>;
+
+/**
+ * Every insight (INCLUDING experimental ones).
+ *
+ * Order does not matter (but keep alphabetized).
+ */
+const INSIGHT_NAME_TO_COMPONENT = {
+  Cache,
+  CLSCulprits,
+  DocumentLatency,
+  DOMSize,
+  DuplicatedJavaScript,
+  FontDisplay,
+  ForcedReflow,
+  ImageDelivery,
+  INPBreakdown,
+  LCPDiscovery,
+  LCPBreakdown,
+  LegacyJavaScript,
+  ModernHTTP,
+  NetworkDependencyTree,
+  RenderBlocking,
+  SlowCSSSelector,
+  ThirdParties,
+  Viewport,
+};
+
+export class InsightRenderer {
+  #insightWidgetCache = new WeakMap<Trace.Insights.Types.InsightModel, InsightWidgetElement>();
+
+  renderInsightToWidgetElement(
+      parsedTrace: Trace.TraceModel.ParsedTrace, insightSet: Trace.Insights.Types.InsightSet,
+      model: Trace.Insights.Types.InsightModel, insightName: string,
+      options: Partial<BaseInsightComponent<Trace.Insights.Types.InsightModel>>): InsightWidgetElement {
+    let widgetElement = this.#insightWidgetCache.get(model);
+    if (!widgetElement) {
+      widgetElement = document.createElement('devtools-widget') as InsightWidgetElement;
+
+      const componentClass = INSIGHT_NAME_TO_COMPONENT[insightName as keyof typeof INSIGHT_NAME_TO_COMPONENT];
+      const widget = new componentClass(widgetElement) as BaseInsightComponent<Trace.Insights.Types.InsightModel>;
+      widget.selected = false;
+      widget.parsedTrace = parsedTrace;
+      widget.model = model;
+      widget.bounds = insightSet.bounds;
+      widget.insightSetKey = insightSet.id;
+      Object.assign(widget, options);
+      widgetElement.widgetConfig = widgetConfig(() => {
+        return widget;
+      });
+
+      this.#insightWidgetCache.set(model, widgetElement);
+    }
+
+    const widget = widgetElement.getWidget();
+    if (widget) {
+      Object.assign(widget, options);
+    }
+
+    return widgetElement;
+  }
+}

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

@@ -18,7 +18,6 @@ const {UIStrings, i18nString} = Trace.Insights.Models.LCPBreakdown;
 const {html} = Lit;
 
 export class LCPBreakdown extends BaseInsightComponent<LCPBreakdownInsightModel> {
-  static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-lcp-breakdown`;
   override internalName = 'lcp-by-phase';
   #overlay: Trace.Types.Overlays.TimespanBreakdown|null = null;
 
@@ -136,11 +135,3 @@ export class LCPBreakdown extends BaseInsightComponent<LCPBreakdownInsightModel>
     return html`${sections}`;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-lcp-breakdown': LCPBreakdown;
-  }
-}
-
-customElements.define('devtools-performance-lcp-breakdown', LCPBreakdown);

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

@@ -1,18 +1,19 @@
 // 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-imperative-dom-api */
-
-import './Checklist.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type {LCPDiscoveryInsightModel} from '../../../../models/trace/insights/LCPDiscovery.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as uiI18n from '../../../../ui/i18n/i18n.js';
+import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 
 import {BaseInsightComponent} from './BaseInsightComponent.js';
-import {imageRef} from './EventRef.js';
+import {Checklist} from './Checklist.js';
+import {imageRef} from './ImageRef.js';
+
+const {widgetConfig} = UI.Widget;
 
 const {UIStrings, i18nString, getImageData} = Trace.Insights.Models.LCPDiscovery;
 
@@ -22,7 +23,6 @@ const {html} = Lit;
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/LCPDiscovery.ts', UIStrings);
 
 export class LCPDiscovery extends BaseInsightComponent<LCPDiscoveryInsightModel> {
-  static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-lcp-discovery`;
   override internalName = 'lcp-discovery';
 
   protected override hasAskAiSupport(): boolean {
@@ -61,10 +61,13 @@ export class LCPDiscovery extends BaseInsightComponent<LCPDiscoveryInsightModel>
   }
 
   #renderDiscoveryDelay(delay: Trace.Types.Timing.Micro): HTMLElement {
+    // Trace.Types.Overlays.TimespanBreakdownEntryBreakdown needs an HTMLElement, which we have to localize here.
+    /* eslint-disable @devtools/no-imperative-dom-api */
     const timeWrapper = document.createElement('span');
     timeWrapper.classList.add('discovery-time-ms');
     timeWrapper.innerText = i18n.TimeUtilities.formatMicroSecondsAsMillisFixed(delay);
     return uiI18n.getFormatLocalizedString(str_, UIStrings.lcpLoadDelay, {PH1: timeWrapper});
+    /* eslint-enable @devtools/no-imperative-dom-api */
   }
 
   override renderContent(): Lit.LitTemplate {
@@ -88,17 +91,11 @@ export class LCPDiscovery extends BaseInsightComponent<LCPDiscoveryInsightModel>
     // clang-format off
     return html`
       <div class="insight-section">
-        <devtools-performance-checklist class="insight-section" .checklist=${imageData.checklist}></devtools-performance-checklist>
+        <devtools-widget .widgetConfig=${widgetConfig(Checklist, {
+          checklist: imageData.checklist,
+        })}></devtools-widget>
         <div class="insight-section">${imageRef(imageData.request)}${delayEl}</div>
       </div>`;
     // clang-format on
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-lcp-discovery': LCPDiscovery;
-  }
-}
-
-customElements.define('devtools-performance-lcp-discovery', LCPDiscovery);

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

@@ -22,7 +22,6 @@ const {UIStrings, i18nString} = Trace.Insights.Models.LegacyJavaScript;
 const {html} = Lit;
 
 export class LegacyJavaScript extends BaseInsightComponent<LegacyJavaScriptInsightModel> {
-  static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-legacy-javascript`;
   override internalName = 'legacy-javascript';
 
   override getEstimatedSavingsTime(): Trace.Types.Timing.Milli|null {
@@ -98,11 +97,3 @@ export class LegacyJavaScript extends BaseInsightComponent<LegacyJavaScriptInsig
     // clang-format on
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-legacy-javascript': LegacyJavaScript;
-  }
-}
-
-customElements.define('devtools-performance-legacy-javascript', LegacyJavaScript);

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

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

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

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import './Table.js';
-import './NodeLink.js';
 import '../../../../ui/kit/kit.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
@@ -17,7 +16,7 @@ import {BaseInsightComponent} from './BaseInsightComponent.js';
 import {eventRef} from './EventRef.js';
 import {md} from './Helpers.js';
 import networkDependencyTreeInsightStyles from './networkDependencyTreeInsight.css.js';
-import type {NodeLinkData} from './NodeLink.js';
+import {nodeLink} from './NodeLink.js';
 import {renderOthersLabel, type TableData, type TableDataRow} from './Table.js';
 
 const {UIStrings, i18nString} = Trace.Insights.Models.NetworkDependencyTree;
@@ -27,7 +26,6 @@ const {html} = Lit;
 export const MAX_CHAINS_TO_SHOW = 5;
 
 export class NetworkDependencyTree extends BaseInsightComponent<NetworkDependencyTreeInsightModel> {
-  static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-long-critical-network-tree`;
   override internalName = 'long-critical-network-tree';
 
   #relatedRequests: Set<Trace.Types.Events.SyntheticNetworkRequest>|null = null;
@@ -225,16 +223,11 @@ export class NetworkDependencyTree extends BaseInsightComponent<NetworkDependenc
         };
       }
 
-      // clang-format off
-      const nodeEl = html`
-        <devtools-performance-node-link
-          .data=${{
-            backendNodeId: preconnectOrigin.node_id,
-            frame: preconnectOrigin.frame,
-            fallbackHtmlSnippet: `<link rel="preconnect" href="${preconnectOrigin.url}">`,
-          } as NodeLinkData}>
-        </devtools-performance-node-link>`;
-      // clang-format on
+      const nodeEl = nodeLink({
+        backendNodeId: preconnectOrigin.node_id,
+        frame: preconnectOrigin.frame,
+        fallbackHtmlSnippet: `<link rel="preconnect" href="${preconnectOrigin.url}">`,
+      });
 
       return {
         values: [preconnectOrigin.url, nodeEl],
@@ -310,11 +303,3 @@ export class NetworkDependencyTree extends BaseInsightComponent<NetworkDependenc
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-long-critical-network-tree': NetworkDependencyTree;
-  }
-}
-
-customElements.define('devtools-performance-long-critical-network-tree', NetworkDependencyTree);

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

@@ -1,24 +1,67 @@
 // 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 */
-
-// TODO: move to ui/components/node_link?
 
 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 ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
 import * as LegacyComponents from '../../../../ui/legacy/components/utils/utils.js';
+import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 import * as PanelsCommon from '../../../common/common.js';
 
 const {html} = Lit;
+const {widgetConfig} = UI.Widget;
+
+interface ViewInput {
+  relatedNodeEl: Node|undefined;
+  fallbackUrl?: Platform.DevToolsPath.UrlString;
+  fallbackHtmlSnippet?: string;
+  fallbackText?: string;
+}
+
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const {
+    relatedNodeEl,
+    fallbackUrl,
+    fallbackHtmlSnippet,
+    fallbackText,
+  } = input;
+
+  let template;
+  if (relatedNodeEl) {
+    template = html`<div class='node-link'>${relatedNodeEl}</div>`;
+  } else if (fallbackUrl) {
+    const MAX_URL_LENGTH = 20;
+    const options = {
+      tabStop: true,
+      showColumnNumber: false,
+      inlineFrameIndex: 0,
+      maxLength: MAX_URL_LENGTH,
+    };
+    const linkEl = LegacyComponents.Linkifier.Linkifier.linkifyURL(fallbackUrl, options);
+    template = html`<div class='node-link'>
+      <style>${Buttons.textButtonStyles}</style>
+      ${linkEl}
+    </div>`;
+  } else if (fallbackHtmlSnippet) {
+    // TODO: Use CodeHighlighter.
+    template = html`<pre style='text-wrap: auto'>${fallbackHtmlSnippet}</pre>`;
+  } else if (fallbackText) {
+    template = html`<span>${fallbackText}</span>`;
+  } else {
+    template = Lit.nothing;
+  }
+
+  Lit.render(template, target);
+};
 
 export interface NodeLinkData {
   backendNodeId: Protocol.DOM.BackendNodeId;
-  frame: string;
+  frame?: string;
   options?: PanelsCommon.DOMLinkifier.Options;
   /**
    * URL to display if backendNodeId cannot be resolved (ie for traces loaded from disk).
@@ -37,8 +80,8 @@ export interface NodeLinkData {
   fallbackText?: string;
 }
 
-export class NodeLink extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+export class NodeLink extends UI.Widget.Widget {
+  #view: View;
   #backendNodeId?: Protocol.DOM.BackendNodeId;
   #frame?: string;
   #options?: PanelsCommon.DOMLinkifier.Options;
@@ -51,6 +94,11 @@ export class NodeLink extends HTMLElement {
    */
   #linkifiedNodeForBackendId = new Map<Protocol.DOM.BackendNodeId, Node|'NO_NODE_FOUND'>();
 
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
+  }
+
   set data(data: NodeLinkData) {
     this.#backendNodeId = data.backendNodeId;
     this.#frame = data.frame;
@@ -58,7 +106,7 @@ export class NodeLink extends HTMLElement {
     this.#fallbackUrl = data.fallbackUrl;
     this.#fallbackHtmlSnippet = data.fallbackHtmlSnippet;
     this.#fallbackText = data.fallbackText;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+    this.requestUpdate();
   }
 
   async #linkify(): Promise<Node|undefined> {
@@ -97,42 +145,19 @@ export class NodeLink extends HTMLElement {
     return linkedNode;
   }
 
-  async #render(): Promise<void> {
-    const relatedNodeEl = await this.#linkify();
-
-    let template;
-    if (relatedNodeEl) {
-      template = html`<div class='node-link'>${relatedNodeEl}</div>`;
-    } else if (this.#fallbackUrl) {
-      const MAX_URL_LENGTH = 20;
-      const options = {
-        tabStop: true,
-        showColumnNumber: false,
-        inlineFrameIndex: 0,
-        maxLength: MAX_URL_LENGTH,
-      };
-      const linkEl = LegacyComponents.Linkifier.Linkifier.linkifyURL(this.#fallbackUrl, options);
-      template = html`<div class='node-link'>
-        <style>${Buttons.textButtonStyles}</style>
-        ${linkEl}
-      </div>`;
-    } else if (this.#fallbackHtmlSnippet) {
-      // TODO: Use CodeHighlighter.
-      template = html`<pre style='text-wrap: auto'>${this.#fallbackHtmlSnippet}</pre>`;
-    } else if (this.#fallbackText) {
-      template = html`<span>${this.#fallbackText}</span>`;
-    } else {
-      template = Lit.nothing;
-    }
-
-    Lit.render(template, this.#shadow, {host: this});
+  override async performUpdate(): Promise<void> {
+    const input: ViewInput = {
+      relatedNodeEl: await this.#linkify(),
+      fallbackUrl: this.#fallbackUrl,
+      fallbackHtmlSnippet: this.#fallbackHtmlSnippet,
+      fallbackText: this.#fallbackText,
+    };
+    this.#view(input, undefined, this.contentElement);
   }
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-node-link': NodeLink;
-  }
+export function nodeLink(data: NodeLinkData): Lit.TemplateResult {
+  return html`<devtools-widget .widgetConfig=${widgetConfig(NodeLink, {
+    data,
+  })}></devtools-widget>`;
 }
-
-customElements.define('devtools-performance-node-link', NodeLink);

package/front_end/panels/timeline/components/insights/README.md

@@ -17,10 +17,9 @@ When creating your component, extend the `BaseInsightComponent` class (defined i
 
 In your component you can access all this data via `this.data.X`, where `X` is one of the keys listed above.
 
-You will have to define 4 properties on your component:
+You will have to define some properties on your component:
 
-1. `static readonly litTagName` is the HTML tag name given to your element (define this just as you do for all custom elements).
-2. `override internalName: string` is a name used to identify the insight. It **must be unique across all insights** and is used to track if it is active or not.
+1. `override internalName: string` is a name used to identify the insight. It **must be unique across all insights** and is used to track if it is active or not.
 
 > Go to KnownContextValues.ts and add your insight: `timeline.toggle-insight.your-insight-name` and `timeline.insights.your-insight-name`.
 

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

@@ -16,7 +16,6 @@ const {UIStrings, i18nString, createOverlayForRequest} = Trace.Insights.Models.R
 const {html} = Lit;
 
 export class RenderBlocking extends BaseInsightComponent<RenderBlockingInsightModel> {
-  static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-render-blocking-requests`;
   override internalName = 'render-blocking-requests';
 
   mapToRow(request: Trace.Types.Events.SyntheticNetworkRequest): TableDataRow {
@@ -71,11 +70,3 @@ export class RenderBlocking extends BaseInsightComponent<RenderBlockingInsightMo
     // clang-format on
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-render-blocking-requests': RenderBlocking;
-  }
-}
-
-customElements.define('devtools-performance-render-blocking-requests', RenderBlocking);

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

@@ -22,7 +22,6 @@ const {UIStrings, i18nString} = Trace.Insights.Models.SlowCSSSelector;
 const {html} = Lit;
 
 export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsightModel> {
-  static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-slow-css-selector`;
   override internalName = 'slow-css-selector';
   #selectorLocations = new Map<string, Protocol.CSS.SourceRange[]>();
 
@@ -162,11 +161,3 @@ export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsight
     return html`${sections}`;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-slow-css-selector': SlowCSSSelector;
-  }
-}
-
-customElements.define('devtools-performance-slow-css-selector', SlowCSSSelector);

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

@@ -17,7 +17,6 @@ const {html} = Lit;
 const MAX_TO_SHOW = 5;
 
 export class ThirdParties extends BaseInsightComponent<ThirdPartiesInsightModel> {
-  static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-third-parties`;
   override internalName = 'third-parties';
 
   #mainThreadTimeAggregator: RowLimitAggregator<Trace.Extras.ThirdParties.EntitySummary> = {
@@ -110,11 +109,3 @@ export class ThirdParties extends BaseInsightComponent<ThirdPartiesInsightModel>
     return html`${sections}`;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-third-parties': ThirdParties;
-  }
-}
-
-customElements.define('devtools-performance-third-parties', ThirdParties);

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

@@ -2,18 +2,16 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import './NodeLink.js';
-
 import type {ViewportInsightModel} from '../../../../models/trace/insights/Viewport.js';
 import type * as Trace from '../../../../models/trace/trace.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 
 import {BaseInsightComponent} from './BaseInsightComponent.js';
+import {nodeLink} from './NodeLink.js';
 
 const {html} = Lit;
 
 export class Viewport extends BaseInsightComponent<ViewportInsightModel> {
-  static override readonly litTagName = Lit.StaticHtml.literal`devtools-performance-viewport`;
   override internalName = 'viewport';
 
   protected override hasAskAiSupport(): boolean {
@@ -37,23 +35,13 @@ export class Viewport extends BaseInsightComponent<ViewportInsightModel> {
     // clang-format off
     return html`
       <div>
-        <devtools-performance-node-link
-          .data=${{
-            backendNodeId,
-            frame: this.model.viewportEvent.args.data.frame ?? '',
-            options: {tooltip: this.model.viewportEvent.args.data.content},
-            fallbackHtmlSnippet: `<meta name=viewport content="${this.model.viewportEvent.args.data.content}">`,
-          }}>
-        </devtools-performance-node-link>
+        ${nodeLink({
+          backendNodeId,
+          frame: this.model.viewportEvent.args.data.frame ?? '',
+          options: {tooltip: this.model.viewportEvent.args.data.content},
+          fallbackHtmlSnippet: `<meta name=viewport content="${this.model.viewportEvent.args.data.content}">`,
+        })}
       </div>`;
     // clang-format on
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-viewport': Viewport;
-  }
-}
-
-customElements.define('devtools-performance-viewport', Viewport);

package/front_end/panels/timeline/components/insights/baseInsightComponent.css

@@ -60,6 +60,11 @@
   }
 }
 
+.insight.ai-assistance-context {
+  display: block;
+  min-width: 200px;
+}
+
 .insight-hover-icon {
   position: absolute;
   top: var(--sys-size-5);

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

@@ -15,6 +15,7 @@ import * as ForcedReflow from './ForcedReflow.js';
 import * as Helpers from './Helpers.js';
 import * as ImageDelivery from './ImageDelivery.js';
 import * as INPBreakdown from './INPBreakdown.js';
+import * as InsightRenderer from './InsightRenderer.js';
 import * as LCPBreakdown from './LCPBreakdown.js';
 import * as LCPDiscovery from './LCPDiscovery.js';
 import * as LegacyJavaScript from './LegacyJavaScript.js';
@@ -43,6 +44,7 @@ export {
   Helpers,
   ImageDelivery,
   INPBreakdown,
+  InsightRenderer,
   LCPBreakdown,
   LCPDiscovery,
   LegacyJavaScript,

package/front_end/panels/timeline/components/interactionBreakdown.css

@@ -4,19 +4,21 @@
  * found in the LICENSE file.
  */
 
-:host {
-  display: block;
-}
+@scope to (devtools-widget > *) {
+  :host {
+    display: block;
+  }
 
-.breakdown {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  color: var(--sys-color-token-subtle);
-}
+  .breakdown {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    color: var(--sys-color-token-subtle);
+  }
 
-.value {
-  display: inline-block;
-  padding: 0 5px;
-  color: var(--sys-color-on-surface);
+  .value {
+    display: inline-block;
+    padding: 0 5px;
+    color: var(--sys-color-on-surface);
+  }
 }