chrome-devtools-frontend 1.0.1595925 → 1.0.1596535

package/front_end/panels/recorder/components/stepView.css

@@ -13,18 +13,18 @@
 .title-container {
   /* Vertically center items with min-width: 0; */
   min-width: 0;
-  font-size: 13px;
-  line-height: 16px;
-  letter-spacing: 0.03em;
+  font-size: var(--sys-size-7);
   display: flex;
   flex-direction: row;
-  gap: 3px;
-  outline-offset: 3px;
+  gap: var(--sys-size-2);
+  outline-offset: var(--sys-size-2);
+  flex-grow: 1;
+  align-items: center;
 }
 
 .action {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
 }
 
 .title {
@@ -58,7 +58,7 @@
   cy: 8px;
 }
 
-.is-start-of-group .circle-icon {
+.is-start-of-group:not(:first-of-type) .circle-icon {
   r: 7px;
   fill: var(--sys-color-cdt-base-container);
   stroke: var(--sys-color-primary);
@@ -143,7 +143,7 @@
   height: 14px;
   transition: 200ms;
   position: absolute;
-  top: 18px;
+  top: 14px;
   left: 24px;
   transform: rotate(-90deg);
   color: var(--sys-color-on-surface);
@@ -183,7 +183,11 @@ devtools-recorder-step-editor:hover {
 }
 
 devtools-recorder-step-editor.is-selected {
-  background-color: color-mix(in srgb, var(--sys-color-tonal-container), var(--sys-color-cdt-base-container) 50%);
+  background-color: color-mix(
+    in srgb,
+    var(--sys-color-tonal-container),
+    var(--sys-color-cdt-base-container) 50%
+  );
   border: 1px solid var(--sys-color-tonal-outline);
 }
 
@@ -192,10 +196,6 @@ devtools-recorder-step-editor.is-selected {
   flex-flow: row nowrap;
 }
 
-.filler {
-  flex-grow: 1;
-}
-
 .subtitle {
   font-weight: normal;
   color: var(--sys-color-on-surface-subtle);

package/front_end/panels/recorder/components/timelineSection.css

@@ -13,7 +13,7 @@
 
 .timeline-section {
   position: relative;
-  padding: 16px 0 0 40px;
+  padding: 8px 0 8px 40px;
   margin-left: 8px;
 
   --override-color-recording-successful-text: #36a854;
@@ -52,12 +52,12 @@
   z-index: 4;
 }
 
-.is-start-of-group {
-  padding-top: 28px;
+.is-start-of-group:not(:first-of-type) {
+  padding-top: 16px;
 }
 
 .is-end-of-group {
-  padding-bottom: 24px;
+  padding-bottom: 16px;
 }
 
 .icon {
@@ -73,7 +73,7 @@
   display: block;
   transform: translateX(-50%);
   top: 18px;
-  height: calc(100% + 8px);
+  height: 100%;
   z-index: 1; /* We want this to be below of `.overlay` for stopped case */
 }
 
@@ -86,8 +86,7 @@
 }
 
 .is-first-section .bar {
-  top: 32px;
-  height: calc(100% - 8px);
+  height: 100%;
   display: none;
 }
 

package/front_end/panels/settings/components/SyncSection.ts

@@ -10,10 +10,10 @@ import * as Common from '../../../core/common/common.js';
 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 SDK from '../../../core/sdk/sdk.js';
 import * as Badges from '../../../models/badges/badges.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import type * as SettingsComponents from '../../../ui/components/settings/settings.js';
+import * as UIHelpers from '../../../ui/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';
@@ -343,19 +343,10 @@ export class SyncSection extends UI.Widget.Widget {
   }
 
   #onWarningClick(event: Event): void {
-    const rootTarget = SDK.TargetManager.TargetManager.instance().rootTarget();
-    if (rootTarget === null) {
-      return;
-    }
     // TODO: investigate if /advance link is alive
-    const warningLink = !this.#syncInfo.isSyncActive ?
-        ('chrome://settings/syncSetup' as Platform.DevToolsPath.UrlString) :
-        ('chrome://settings/syncSetup/advanced' as Platform.DevToolsPath.UrlString);
-    void rootTarget.targetAgent().invoke_createTarget({url: warningLink}).then(result => {
-      if (result.getError()) {
-        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(warningLink);
-      }
-    });
+    const warningLink =
+        this.#syncInfo.isSyncActive ? 'chrome://settings/syncSetup/advanced' : 'chrome://settings/syncSetup';
+    UIHelpers.openInNewTab(warningLink);
     event.consume();
   }
 

package/front_end/panels/timeline/CompatibilityTracksAppender.ts

@@ -36,17 +36,6 @@ export interface PopoverInfo {
   additionalElements: HTMLElement[];
 }
 
-let showPostMessageEvents: boolean|undefined;
-function isShowPostMessageEventsEnabled(): boolean {
-  // Everytime the experiment is toggled devtools is reloaded so the
-  // cache is updated automatically.
-  if (showPostMessageEvents === undefined) {
-    showPostMessageEvents =
-        Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.TIMELINE_SHOW_POST_MESSAGE_EVENTS);
-  }
-  return showPostMessageEvents;
-}
-
 export function entryIsVisibleInTimeline(
     entry: Trace.Types.Events.Event, parsedTrace?: Trace.TraceModel.ParsedTrace): boolean {
   if (parsedTrace?.data.Meta.traceIsGeneric) {
@@ -64,10 +53,8 @@ export function entryIsVisibleInTimeline(
     return true;
   }
 
-  if (isShowPostMessageEventsEnabled()) {
-    if (Trace.Types.Events.isSchedulePostMessage(entry) || Trace.Types.Events.isHandlePostMessage(entry)) {
-      return true;
-    }
+  if (Trace.Types.Events.isSchedulePostMessage(entry) || Trace.Types.Events.isHandlePostMessage(entry)) {
+    return true;
   }
 
   if (Trace.Types.Extensions.isSyntheticExtensionEntry(entry)) {

package/front_end/panels/timeline/RecordingMetadata.ts

@@ -39,7 +39,7 @@ async function innerForTraceCalculate({recordingStartTime, cruxFieldData}: DataF
   const deviceModeModel = EmulationModel.DeviceModeModel.DeviceModeModel.tryInstance();
   let emulatedDeviceTitle;
   if (deviceModeModel?.type() === EmulationModel.DeviceModeModel.Type.Device) {
-    emulatedDeviceTitle = deviceModeModel.device()?.title ?? undefined;
+    emulatedDeviceTitle = deviceModeModel.device()?.title;
   } else if (deviceModeModel?.type() === EmulationModel.DeviceModeModel.Type.Responsive) {
     emulatedDeviceTitle = 'Responsive';
   }

package/front_end/panels/timeline/TimelineDetailsView.ts

@@ -149,7 +149,7 @@ export class TimelineDetailsPane extends
     this.#thirdPartyTree.addEventListener(TimelineTreeView.Events.TREE_ROW_HOVERED, node => {
       // Re-dispatch through 3P event to get 3P dimmer.
       this.dispatchEventToListeners(
-          TimelineTreeView.Events.TREE_ROW_HOVERED, {node: node.data.node, events: node.data.events ?? undefined});
+          TimelineTreeView.Events.TREE_ROW_HOVERED, {node: node.data.node, events: node.data.events});
     });
 
     this.#thirdPartyTree.addEventListener(TimelineTreeView.Events.BOTTOM_UP_BUTTON_CLICKED, node => {
@@ -158,7 +158,7 @@ export class TimelineDetailsPane extends
     this.#thirdPartyTree.addEventListener(TimelineTreeView.Events.TREE_ROW_CLICKED, node => {
       // Re-dispatch through 3P event to get 3P dimmer.
       this.dispatchEventToListeners(
-          TimelineTreeView.Events.TREE_ROW_CLICKED, {node: node.data.node, events: node.data.events ?? undefined});
+          TimelineTreeView.Events.TREE_ROW_CLICKED, {node: node.data.node, events: node.data.events});
     });
 
     this.tabbedPane.addEventListener(UI.TabbedPane.Events.TabSelected, this.tabSelected, this);

package/front_end/panels/timeline/TimelinePanel.ts

@@ -3054,6 +3054,17 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.#setActiveInsight({model: insightModel, insightSetKey}, {highlightInsight: true});
   }
 
+  revealCoreVitals(revealable: Utils.Helpers.RevealableCoreVitals): void {
+    if (this.#splitWidget.showMode() !== UI.SplitWidget.ShowMode.BOTH) {
+      this.#splitWidget.showBoth();
+    }
+    this.#sideBar.openInsightsTab();
+    if (revealable.insightSetKey) {
+      this.#sideBar.setActiveInsightSet(revealable.insightSetKey);
+      this.#setActiveInsight(null);
+    }
+  }
+
   static async executeRecordAndReload(): Promise<Trace.TraceModel.ParsedTrace> {
     await UI.ViewManager.ViewManager.instance().showView('timeline');
     const panelInstance = TimelinePanel.instance();
@@ -3238,6 +3249,13 @@ export class InsightRevealer implements Common.Revealer.Revealer<Utils.Helpers.R
   }
 }
 
+export class CoreVitalsRevealer implements Common.Revealer.Revealer<Utils.Helpers.RevealableCoreVitals> {
+  async reveal(revealable: Utils.Helpers.RevealableCoreVitals): Promise<void> {
+    await UI.ViewManager.ViewManager.instance().showView('timeline');
+    TimelinePanel.instance().revealCoreVitals(revealable);
+  }
+}
+
 export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
   handleAction(context: UI.Context.Context, actionId: string): boolean {
     const panel = context.flavor(TimelinePanel);

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -34,6 +34,8 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+import '../../ui/kit/kit.js';
+
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
@@ -50,13 +52,13 @@ import * as CodeHighlighter from '../../ui/components/code_highlighter/code_high
 // eslint-disable-next-line @devtools/es-modules-import
 import codeHighlighterStyles from '../../ui/components/code_highlighter/codeHighlighter.css.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
-import {Link} from '../../ui/kit/kit.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 // eslint-disable-next-line @devtools/es-modules-import
 import imagePreviewStyles from '../../ui/legacy/components/utils/imagePreview.css.js';
 import * as LegacyComponents from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
+import {html, render} from '../../ui/lit/lit.js';
 import * as PanelsCommon from '../common/common.js';
 
 import {getDurationString} from './AppenderUtils.js';
@@ -833,9 +835,10 @@ export class TimelineUIUtils {
         break;
     }
 
-    const html = UI.Fragment.html`<div>${
-        Link.create(link, i18nString(UIStrings.learnMore), undefined, 'learn-more')} about ${name}.</div>`;
-    return html as HTMLElement;
+    const div = document.createElement('div');
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(html`<devtools-link href=${link}>${i18nString(UIStrings.learnMore)}</devtools-link> about ${name}.`, div);
+    return div;
   }
 
   static buildConsumeCacheDetails(

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

@@ -0,0 +1,339 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as Platform from '../../../core/platform/platform.js';
+import * as CrUXManager from '../../../models/crux-manager/crux-manager.js';
+import * as Trace from '../../../models/trace/trace.js';
+import * as Buttons from '../../../ui/components/buttons/buttons.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 cwvMetricsStyles from './cwvMetrics.css.js';
+import {md} from './insights/Helpers.js';
+import * as Insights from './insights/insights.js';
+import {isFieldWorseThanLocal, NumberWithUnit} from './Utils.js';
+
+const {html} = Lit.StaticHtml;
+
+const UIStrings = {
+  /**
+   * @description title used for a metric value to tell the user about its score classification
+   * @example {INP} PH1
+   * @example {1.2s} PH2
+   * @example {poor} PH3
+   */
+  metricScore: '{PH1}: {PH2} {PH3} score',
+  /**
+   * @description title used for a metric value to tell the user that the data is unavailable
+   * @example {INP} PH1
+   */
+  metricScoreUnavailable: '{PH1}: unavailable',
+  /**
+   * @description Label denoting that metrics were observed in the field, from real use data (CrUX). Also denotes if from URL or Origin dataset.
+   * @example {URL} PH1
+   */
+  fieldScoreLabel: 'Field ({PH1})',
+  /**
+   * @description Label for an option that selects the page's specific URL as opposed to it's entire origin/domain.
+   */
+  urlOption: 'URL',
+  /**
+   * @description Label for an option that selects the page's entire origin/domain as opposed to it's specific URL.
+   */
+  originOption: 'Origin',
+  /**
+   * @description Title for button that closes a warning popup.
+   */
+  dismissTitle: 'Dismiss',
+  /**
+   * @description Title shown in a warning dialog when field metrics (collected from real users) is worse than the locally observed metrics.
+   */
+  fieldMismatchTitle: 'Field & local metrics mismatch',
+  /**
+   * @description Text shown in a warning dialog when field metrics (collected from real users) is worse than the locally observed metrics.
+   * Asks user to use features such as throttling and device emulation.
+   */
+  fieldMismatchNotice:
+      'There are many reasons why local and field metrics [may not match](https://web.dev/articles/lab-and-field-data-differences). ' +
+      'Adjust [throttling settings and device emulation](https://developer.chrome.com/docs/devtools/device-mode) to analyze traces more similar to the average user\'s environment.',
+} as const;
+
+const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/CWVMetrics.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+interface LocalMetrics {
+  lcp: {value: Trace.Types.Timing.Micro, event: Trace.Types.Events.AnyLargestContentfulPaintCandidate}|null;
+  cls: {value: number, worstClusterEvent: Trace.Types.Events.Event|null};
+  inp: {value: Trace.Types.Timing.Micro, event: Trace.Types.Events.SyntheticInteractionPair}|null;
+}
+
+function getLocalMetrics(parsedTrace: Trace.TraceModel.ParsedTrace|null, insightSetKey: string|null): LocalMetrics|
+    null {
+  if (!parsedTrace || !insightSetKey) {
+    return null;
+  }
+
+  const insightSet = parsedTrace.insights?.get(insightSetKey);
+  if (!insightSet) {
+    return null;
+  }
+
+  const lcp = Trace.Insights.Common.getLCP(insightSet);
+  const cls = Trace.Insights.Common.getCLS(insightSet);
+  const inp = Trace.Insights.Common.getINP(insightSet);
+
+  return {lcp, cls, inp};
+}
+
+export function getFieldMetrics(parsedTrace: Trace.TraceModel.ParsedTrace|null, insightSetKey: string|null):
+    Trace.Insights.Common.CrUXFieldMetricResults|null {
+  if (!parsedTrace || !parsedTrace.metadata?.cruxFieldData || !insightSetKey) {
+    return null;
+  }
+
+  const insightSet = parsedTrace.insights?.get(insightSetKey);
+  if (!insightSet) {
+    return null;
+  }
+
+  let scope: CrUXManager.Scope|null = null;
+  try {
+    scope = CrUXManager.CrUXManager.instance().getSelectedScope();
+  } catch {
+    // test environment
+  }
+
+  const fieldMetricsResults =
+      Trace.Insights.Common.getFieldMetricsForInsightSet(insightSet, parsedTrace.metadata, scope);
+  if (!fieldMetricsResults) {
+    return null;
+  }
+
+  return fieldMetricsResults;
+}
+
+interface MetricsViewInput {
+  parsedTrace: Trace.TraceModel.ParsedTrace|null;
+  insightSetKey: string|null;
+  didDismissFieldMismatchNotice: boolean;
+  onDismisFieldMismatchNotice: () => void;
+  onClickMetric: (traceEvent: Trace.Types.Events.Event) => void;
+}
+
+type MetricsView = (input: MetricsViewInput, output: undefined, target: HTMLElement) => void;
+
+const CWV_METRICS_VIEW: MetricsView = (input, _output, target) => {
+  const {
+    parsedTrace,
+    insightSetKey,
+    didDismissFieldMismatchNotice,
+    onDismisFieldMismatchNotice,
+    onClickMetric,
+  } = input;
+
+  const local = getLocalMetrics(parsedTrace, insightSetKey);
+  const field = getFieldMetrics(parsedTrace, insightSetKey);
+
+  const localValues = {
+    lcp: local?.lcp?.value !== undefined ? Trace.Helpers.Timing.microToMilli(local?.lcp.value) : undefined,
+    inp: local?.inp?.value !== undefined ? Trace.Helpers.Timing.microToMilli(local?.inp.value) : undefined,
+  };
+  const fieldValues = field && {
+    lcp: field.lcp?.value !== undefined ? Trace.Helpers.Timing.microToMilli(field.lcp.value) : undefined,
+    inp: field.inp?.value !== undefined ? Trace.Helpers.Timing.microToMilli(field.inp.value) : undefined,
+  };
+  const showFieldMismatchNotice =
+      !didDismissFieldMismatchNotice && !!fieldValues && isFieldWorseThanLocal(localValues, fieldValues);
+
+  function renderMetricValue(
+      metric: 'LCP'|'CLS'|'INP', value: number|null, relevantEvent: Trace.Types.Events.Event|null): Lit.LitTemplate {
+    let valueText: string;
+    let valueDisplay: HTMLElement|string;
+    let classification;
+    if (value === null) {
+      valueText = valueDisplay = '-';
+      classification = Trace.Handlers.ModelHandlers.PageLoadMetrics.ScoreClassification.UNCLASSIFIED;
+    } else if (metric === 'LCP') {
+      const micros = value as Trace.Types.Timing.Micro;
+      const {text, element} = NumberWithUnit.formatMicroSecondsAsSeconds(micros);
+      valueText = text;
+      valueDisplay = element;
+      classification =
+          Trace.Handlers.ModelHandlers.PageLoadMetrics.scoreClassificationForLargestContentfulPaint(micros);
+    } else if (metric === 'CLS') {
+      valueText = valueDisplay = value ? value.toFixed(2) : '0';
+      classification = Trace.Handlers.ModelHandlers.LayoutShifts.scoreClassificationForLayoutShift(value);
+    } else if (metric === 'INP') {
+      const micros = value as Trace.Types.Timing.Micro;
+      const {text, element} = NumberWithUnit.formatMicroSecondsAsMillisFixed(micros);
+      valueText = text;
+      valueDisplay = element;
+      classification =
+          Trace.Handlers.ModelHandlers.UserInteractions.scoreClassificationForInteractionToNextPaint(micros);
+    } else {
+      Platform.TypeScriptUtilities.assertNever(metric, `Unexpected metric ${metric}`);
+    }
+
+    // NOTE: it is deliberate to use the same value for the title and
+    // aria-label; the aria-label is used to give more context to
+    // screen-readers, and the title is to aid users who may not know what
+    // the red/orange/green classification is, or those who are unable to
+    // easily distinguish the visual colour differences.
+    // clang-format off
+    const title = value !== null ?
+      i18nString(UIStrings.metricScore, {PH1: metric, PH2: valueText, PH3: classification}) :
+      i18nString(UIStrings.metricScoreUnavailable, {PH1: metric});
+
+    return html`
+      <button class="metric"
+        @click=${relevantEvent ? onClickMetric.bind(relevantEvent) : null}
+        title=${title}
+        aria-label=${title}
+      >
+        <div class="metric-value metric-value-${classification}">${valueDisplay}</div>
+      </button>
+    `;
+    // clang-format on
+  }
+
+  const lcpEl = renderMetricValue('LCP', local?.lcp?.value ?? null, local?.lcp?.event ?? null);
+  const inpEl = renderMetricValue('INP', local?.inp?.value ?? null, local?.inp?.event ?? null);
+  const clsEl = renderMetricValue('CLS', local?.cls?.value ?? null, local?.cls?.worstClusterEvent ?? null);
+
+  const localMetricsTemplateResult = html`
+    <div class="metrics-row">
+      <span>${lcpEl}</span>
+      <span>${inpEl}</span>
+      <span>${clsEl}</span>
+      <span class="row-label">Local</span>
+    </div>
+    <span class="row-border"></span>
+  `;
+
+  let fieldMetricsTemplateResult;
+  if (field) {
+    const {lcp, inp, cls} = field;
+
+    const lcpEl = renderMetricValue('LCP', lcp?.value ?? null, null);
+    const inpEl = renderMetricValue('INP', inp?.value ?? null, null);
+    const clsEl = renderMetricValue('CLS', cls?.value ?? null, null);
+
+    let scope = i18nString(UIStrings.originOption);
+    if (lcp?.pageScope === 'url' || inp?.pageScope === 'url') {
+      scope = i18nString(UIStrings.urlOption);
+    }
+
+    // clang-format off
+    fieldMetricsTemplateResult = html`
+      <div class="metrics-row">
+        <span>${lcpEl}</span>
+        <span>${inpEl}</span>
+        <span>${clsEl}</span>
+        <span class="row-label">${i18nString(UIStrings.fieldScoreLabel, {PH1: scope})}</span>
+      </div>
+      <span class="row-border"></span>
+    `;
+    // clang-format on
+  }
+
+  let fieldIsDifferentEl;
+  if (showFieldMismatchNotice) {
+    // clang-format off
+    fieldIsDifferentEl = html`
+      <div class="field-mismatch-notice" jslog=${VisualLogging.section('timeline.insights.field-mismatch')}>
+        <h3>${i18nString(UIStrings.fieldMismatchTitle)}</h3>
+        <devtools-button
+          title=${i18nString(UIStrings.dismissTitle)}
+          .iconName=${'cross'}
+          .variant=${Buttons.Button.Variant.ICON}
+          .jslogContext=${'timeline.insights.dismiss-field-mismatch'}
+          @click=${onDismisFieldMismatchNotice}
+        ></devtools-button>
+        <div class="field-mismatch-notice__body">${md(i18nString(UIStrings.fieldMismatchNotice))}</div>
+      </div>
+    `;
+    // clang-format on
+  }
+
+  const classes = {metrics: true, 'metrics--field': Boolean(fieldMetricsTemplateResult)};
+  const metricsTableEl = html`<div class=${Lit.Directives.classMap(classes)}>
+    <div class="metrics-row">
+      <span class="metric-label">LCP</span>
+      <span class="metric-label">INP</span>
+      <span class="metric-label">CLS</span>
+      <span class="row-label"></span>
+    </div>
+    ${localMetricsTemplateResult}
+    ${fieldMetricsTemplateResult}
+  </div>`;
+
+  Lit.render(
+      html`
+    <style>${cwvMetricsStyles}</style>
+    ${metricsTableEl}
+    ${fieldIsDifferentEl}
+  `,
+      target);
+};
+
+export interface CWVMetricsData {
+  insightSetKey: Trace.Types.Events.NavigationId|null;
+  parsedTrace: Trace.TraceModel.ParsedTrace|null;
+}
+
+export class CWVMetrics extends UI.Widget.Widget {
+  #view: MetricsView;
+  #data: CWVMetricsData = {
+    insightSetKey: null,
+    parsedTrace: null,
+  };
+
+  #didDismissFieldMismatchNotice = false;
+
+  constructor(element?: HTMLElement, view: MetricsView = CWV_METRICS_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
+  }
+
+  set data(data: CWVMetricsData) {
+    this.#data = data;
+    this.requestUpdate();
+  }
+
+  #onClickMetric(traceEvent: Trace.Types.Events.Event): void {
+    this.element.dispatchEvent(new Insights.EventRef.EventReferenceClick(traceEvent));
+  }
+
+  #onDismisFieldMismatchNotice(): void {
+    this.#didDismissFieldMismatchNotice = true;
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    const {
+      parsedTrace,
+      insightSetKey,
+    } = this.#data;
+
+    if (!parsedTrace?.insights || !insightSetKey || !(parsedTrace.insights instanceof Map)) {
+      return;
+    }
+
+    const insightSet = parsedTrace.insights.get(insightSetKey);
+    if (!insightSet) {
+      return;
+    }
+
+    const input: MetricsViewInput = {
+      parsedTrace,
+      insightSetKey,
+      didDismissFieldMismatchNotice: this.#didDismissFieldMismatchNotice,
+      onDismisFieldMismatchNotice: this.#onDismisFieldMismatchNotice.bind(this),
+      onClickMetric: this.#onClickMetric.bind(this),
+    };
+    this.#view(input, undefined, this.contentElement);
+  }
+}

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

@@ -163,6 +163,14 @@ export class SidebarWidget extends UI.Widget.VBox {
     }
   }
 
+  openInsightsTab(): void {
+    this.#tabbedPane.selectTab(SidebarTabs.INSIGHTS);
+  }
+
+  setActiveInsightSet(insightSetKey: string): void {
+    this.#insightsView.setActiveInsightSet(insightSetKey);
+  }
+
   /**
    * True if the sidebar has been visible at least one time. This is persisted
    * to the user settings so it persists across sessions. This is used because
@@ -213,6 +221,15 @@ class InsightsView extends UI.Widget.VBox {
       });
     }
   }
+
+  setActiveInsightSet(insightSetKey: string): void {
+    const widget = this.#component.getWidget();
+    if (!widget) {
+      return;
+    }
+
+    widget.setActiveInsightSet(insightSetKey);
+  }
 }
 
 class AnnotationsView extends UI.Widget.VBox {

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

@@ -200,6 +200,16 @@ export class SidebarInsightsTab extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
+  setActiveInsightSet(insightSetKey: string): void {
+    if (this.#parsedTrace?.insights) {
+      const insightSet = this.#parsedTrace.insights.get(insightSetKey);
+      if (insightSet) {
+        this.#selectedInsightSet = insightSet;
+        this.requestUpdate();
+      }
+    }
+  }
+
   #onInsightSetToggled(insightSet: Trace.Insights.Types.InsightSet): void {
     this.#selectedInsightSet = this.#selectedInsightSet === insightSet ? null : insightSet;
     // Update the active insight set.