chrome-devtools-frontend 1.0.1550444 → 1.0.1553956

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

@@ -1,7 +1,6 @@
 // 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 */
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
@@ -9,17 +8,15 @@ import * as AIAssistance from '../../../models/ai_assistance/ai_assistance.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 ComponentHelpers from '../../../ui/components/helpers/helpers.js';
+import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
-import {nothing} from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
-import type {BaseInsightComponent} from './insights/BaseInsightComponent.js';
 import {md, shouldRenderForCategory} from './insights/Helpers.js';
 import * as Insights from './insights/insights.js';
 import type {ActiveInsight} from './Sidebar.js';
 import sidebarSingleInsightSetStyles from './sidebarSingleInsightSet.css.js';
-import {determineCompareRating, NumberWithUnit} from './Utils.js';
+import {isFieldWorseThanLocal, NumberWithUnit} from './Utils.js';
 
 const {html} = Lit.StaticHtml;
 
@@ -70,6 +67,7 @@ const UIStrings = {
       '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/SidebarSingleInsightSet.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
@@ -80,96 +78,124 @@ export interface SidebarSingleInsightSetData {
   parsedTrace: Trace.TraceModel.ParsedTrace|null;
 }
 
-type InsightNameToComponentMapping =
-    Record<string, typeof Insights.BaseInsightComponent.BaseInsightComponent<Trace.Insights.Types.InsightModel>>;
-
-interface CategorizedInsightData {
-  componentClass: typeof Insights.BaseInsightComponent.BaseInsightComponent<Trace.Insights.Types.InsightModel>;
+interface InsightData {
+  insightName: string;
   model: Trace.Insights.Types.InsightModel;
 }
 
-/**
- * Every insight (INCLUDING experimental ones).
- *
- * Order does not matter (but keep alphabetized).
- */
-const INSIGHT_NAME_TO_COMPONENT: InsightNameToComponentMapping = {
-  Cache: Insights.Cache.Cache,
-  CLSCulprits: Insights.CLSCulprits.CLSCulprits,
-  DocumentLatency: Insights.DocumentLatency.DocumentLatency,
-  DOMSize: Insights.DOMSize.DOMSize,
-  DuplicatedJavaScript: Insights.DuplicatedJavaScript.DuplicatedJavaScript,
-  FontDisplay: Insights.FontDisplay.FontDisplay,
-  ForcedReflow: Insights.ForcedReflow.ForcedReflow,
-  ImageDelivery: Insights.ImageDelivery.ImageDelivery,
-  INPBreakdown: Insights.INPBreakdown.INPBreakdown,
-  LCPDiscovery: Insights.LCPDiscovery.LCPDiscovery,
-  LCPBreakdown: Insights.LCPBreakdown.LCPBreakdown,
-  LegacyJavaScript: Insights.LegacyJavaScript.LegacyJavaScript,
-  ModernHTTP: Insights.ModernHTTP.ModernHTTP,
-  NetworkDependencyTree: Insights.NetworkDependencyTree.NetworkDependencyTree,
-  RenderBlocking: Insights.RenderBlocking.RenderBlocking,
-  SlowCSSSelector: Insights.SlowCSSSelector.SlowCSSSelector,
-  ThirdParties: Insights.ThirdParties.ThirdParties,
-  Viewport: Insights.Viewport.Viewport,
-};
+interface LocalMetrics {
+  lcp: {value: Trace.Types.Timing.Micro, event: Trace.Types.Events.LargestContentfulPaintCandidate}|null;
+  cls: {value: number, worstClusterEvent: Trace.Types.Events.Event|null};
+  inp: {value: Trace.Types.Timing.Micro, event: Trace.Types.Events.SyntheticInteractionPair}|null;
+}
 
-export class SidebarSingleInsightSet extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+interface ViewInput {
+  shownInsights: InsightData[];
+  passedInsights: InsightData[];
+  local: LocalMetrics|null;
+  field: Trace.Insights.Common.CrUXFieldMetricResults|null;
+  activeCategory: Trace.Insights.Types.InsightCategory;
+  showFieldMismatchNotice: boolean;
+  onDismisFieldMismatchNotice: () => void;
+  onClickMetric: (traceEvent: Trace.Types.Events.Event) => void;
+  renderInsightComponent: (insightData: InsightData) => Lit.LitTemplate;
+}
 
-  #activeInsightElement: BaseInsightComponent<Trace.Insights.Types.InsightModel>|null = null;
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const {
+    shownInsights,
+    passedInsights,
+    local,
+    field,
+    activeCategory,
+    showFieldMismatchNotice,
+    onDismisFieldMismatchNotice,
+    onClickMetric,
+    renderInsightComponent,
+  } = input;
+
+  function renderMetrics(): Lit.TemplateResult {
+    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);
 
-  #data: SidebarSingleInsightSetData = {
-    insightSetKey: null,
-    activeCategory: Trace.Insights.Types.InsightCategory.ALL,
-    activeInsight: null,
-    parsedTrace: 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>
+    `;
 
-  #dismissedFieldMismatchNotice = false;
-  #activeHighlightTimeout = -1;
+    let fieldMetricsTemplateResult;
+    if (field) {
+      const {lcp, inp, cls} = field;
 
-  set data(data: SidebarSingleInsightSetData) {
-    this.#data = data;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
-  }
-  connectedCallback(): void {
-    this.#render();
-  }
+      const lcpEl = renderMetricValue('LCP', lcp?.value ?? null, null);
+      const inpEl = renderMetricValue('INP', inp?.value ?? null, null);
+      const clsEl = renderMetricValue('CLS', cls?.value ?? null, null);
 
-  disconnectedCallback(): void {
-    window.clearTimeout(this.#activeHighlightTimeout);
-  }
+      let scope = i18nString(UIStrings.originOption);
+      if (lcp?.pageScope === 'url' || inp?.pageScope === 'url') {
+        scope = i18nString(UIStrings.urlOption);
+      }
 
-  highlightActiveInsight(): void {
-    if (!this.#activeInsightElement) {
-      return;
+      // 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
     }
-    // First clear any existing highlight that is going on.
-    this.#activeInsightElement.removeAttribute('highlight-insight');
-    window.clearTimeout(this.#activeHighlightTimeout);
 
-    requestAnimationFrame(() => {
-      this.#activeInsightElement?.setAttribute('highlight-insight', 'true');
-      this.#activeHighlightTimeout = window.setTimeout(() => {
-        this.#activeInsightElement?.removeAttribute('highlight-insight');
-      }, 2_000);
-    });
-  }
-
-  #metricIsVisible(label: 'LCP'|'CLS'|'INP'): boolean {
-    if (this.#data.activeCategory === Trace.Insights.Types.InsightCategory.ALL) {
-      return true;
+    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
     }
-    return label === this.#data.activeCategory;
-  }
 
-  #onClickMetric(traceEvent: Trace.Types.Events.Event): void {
-    this.dispatchEvent(new Insights.EventRef.EventReferenceClick(traceEvent));
+    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>`;
+
+    return html`
+      ${metricsTableEl}
+      ${fieldIsDifferentEl}
+    `;
   }
 
-  #renderMetricValue(metric: 'LCP'|'CLS'|'INP', value: number|null, relevantEvent: Trace.Types.Events.Event|null):
-      Lit.LitTemplate {
+  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;
@@ -207,9 +233,9 @@ export class SidebarSingleInsightSet extends HTMLElement {
       i18nString(UIStrings.metricScore, {PH1: metric, PH2: valueText, PH3: classification}) :
       i18nString(UIStrings.metricScoreUnavailable, {PH1: metric});
 
-    return this.#metricIsVisible(metric) ? html`
+    return metricIsVisible(activeCategory, metric) ? html`
       <button class="metric"
-        @click=${relevantEvent ? this.#onClickMetric.bind(this, relevantEvent) : null}
+        @click=${relevantEvent ? onClickMetric.bind(relevantEvent) : null}
         title=${title}
         aria-label=${title}
       >
@@ -219,15 +245,103 @@ export class SidebarSingleInsightSet extends HTMLElement {
     // clang-format on
   }
 
-  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-  #getLocalMetrics(insightSetKey: string) {
+  function renderInsights(): Lit.LitTemplate {
+    const shownInsightTemplates = shownInsights.map(renderInsightComponent);
+    const passedInsightsTemplates = passedInsights.map(renderInsightComponent);
+
+    // clang-format off
+    return html`
+      ${shownInsightTemplates}
+      ${passedInsightsTemplates.length ? html`
+        <details class="passed-insights-section">
+          <summary>${i18nString(UIStrings.passedInsights, {
+            PH1: passedInsightsTemplates.length,
+          })}</summary>
+          ${passedInsightsTemplates}
+        </details>
+      ` : Lit.nothing}
+    `;
+    // clang-format on
+  }
+
+  // clang-format off
+  Lit.render(html`
+    <style>${sidebarSingleInsightSetStyles}</style>
+    <div class="navigation">
+      ${renderMetrics()}
+      ${renderInsights()}
+    </div>
+  `, target);
+  // clang-format on
+};
+
+function metricIsVisible(activeCategory: Trace.Insights.Types.InsightCategory, label: 'LCP'|'CLS'|'INP'): boolean {
+  if (activeCategory === Trace.Insights.Types.InsightCategory.ALL) {
+    return true;
+  }
+
+  return label === activeCategory;
+}
+
+export class SidebarSingleInsightSet extends UI.Widget.Widget {
+  #view: View;
+  #insightRenderer = new Insights.InsightRenderer.InsightRenderer();
+  #activeInsightElement: HTMLElement|null = null;
+  #activeHighlightTimeout = -1;
+
+  #data: SidebarSingleInsightSetData = {
+    insightSetKey: null,
+    activeCategory: Trace.Insights.Types.InsightCategory.ALL,
+    activeInsight: null,
+    parsedTrace: null,
+  };
+
+  #didDismissFieldMismatchNotice = false;
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
+  }
+
+  set data(data: SidebarSingleInsightSetData) {
+    this.#data = data;
+    this.requestUpdate();
+  }
+
+  override willHide(): void {
+    super.willHide();
+    window.clearTimeout(this.#activeHighlightTimeout);
+  }
+
+  highlightActiveInsight(): void {
+    if (!this.#activeInsightElement) {
+      return;
+    }
+
+    // First clear any existing highlight that is going on.
+    this.#activeInsightElement.removeAttribute('highlight-insight');
+    window.clearTimeout(this.#activeHighlightTimeout);
+
+    requestAnimationFrame(() => {
+      this.#activeInsightElement?.setAttribute('highlight-insight', 'true');
+      this.#activeHighlightTimeout = window.setTimeout(() => {
+        this.#activeInsightElement?.removeAttribute('highlight-insight');
+      }, 2_000);
+    });
+  }
+
+  #onClickMetric(traceEvent: Trace.Types.Events.Event): void {
+    this.element.dispatchEvent(new Insights.EventRef.EventReferenceClick(traceEvent));
+  }
+
+  #getLocalMetrics(insightSetKey: string): LocalMetrics|null {
     if (!this.#data.parsedTrace) {
-      return {};
+      return null;
     }
 
     const insightSet = this.#data.parsedTrace.insights?.get(insightSetKey);
     if (!insightSet) {
-      return {};
+      return null;
     }
 
     const lcp = Trace.Insights.Common.getLCP(insightSet);
@@ -256,251 +370,108 @@ export class SidebarSingleInsightSet extends HTMLElement {
     return fieldMetricsResults;
   }
 
-  /**
-   * 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.
-   */
-  #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;
-  }
-
-  #dismissFieldMismatchNotice(): void {
-    this.#dismissedFieldMismatchNotice = true;
-    this.#render();
-  }
-
-  #renderMetrics(insightSetKey: string): Lit.TemplateResult {
-    const local = this.#getLocalMetrics(insightSetKey);
-    const field = this.#getFieldMetrics(insightSetKey);
-
-    const lcpEl = this.#renderMetricValue('LCP', local.lcp?.value ?? null, local.lcp?.event ?? null);
-    const inpEl = this.#renderMetricValue('INP', local.inp?.value ?? null, local.inp?.event ?? null);
-    const clsEl = this.#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 = this.#renderMetricValue('LCP', lcp?.value ?? null, null);
-      const inpEl = this.#renderMetricValue('INP', inp?.value ?? null, null);
-      const clsEl = this.#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
-    }
-
-    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,
-    };
-
-    let fieldIsDifferentEl;
-    if (!this.#dismissedFieldMismatchNotice && fieldValues && this.#isFieldWorseThanLocal(localValues, fieldValues)) {
-      // 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=${this.#dismissFieldMismatchNotice}
-          ></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>`;
-
-    return html`
-      ${metricsTableEl}
-      ${fieldIsDifferentEl}
-    `;
+  #onDismisFieldMismatchNotice(): void {
+    this.#didDismissFieldMismatchNotice = true;
+    this.requestUpdate();
   }
 
   static categorizeInsights(
       insightSets: Trace.Insights.Types.TraceInsightSets|null,
       insightSetKey: string,
       activeCategory: Trace.Insights.Types.InsightCategory,
-      ): {shownInsights: CategorizedInsightData[], passedInsights: CategorizedInsightData[]} {
+      ): {shownInsights: InsightData[], passedInsights: InsightData[]} {
     const insightSet = insightSets?.get(insightSetKey);
     if (!insightSet) {
       return {shownInsights: [], passedInsights: []};
     }
 
-    const shownInsights: CategorizedInsightData[] = [];
-    const passedInsights: CategorizedInsightData[] = [];
-
-    for (const [name, model] of Object.entries(insightSet.model)) {
-      const componentClass = INSIGHT_NAME_TO_COMPONENT[name as keyof Trace.Insights.Types.InsightModels];
-      if (!componentClass) {
-        continue;
-      }
+    const shownInsights: InsightData[] = [];
+    const passedInsights: InsightData[] = [];
 
+    for (const [insightName, model] of Object.entries(insightSet.model)) {
       if (!model || !shouldRenderForCategory({activeCategory, insightCategory: model.category})) {
         continue;
       }
 
-      if (model instanceof Error) {
-        continue;
-      }
-
       if (model.state === 'pass') {
-        passedInsights.push({componentClass, model});
+        passedInsights.push({insightName, model});
       } else {
-        shownInsights.push({componentClass, model});
+        shownInsights.push({insightName, model});
       }
     }
     return {shownInsights, passedInsights};
   }
 
-  #renderInsights(
-      insights: Trace.Insights.Types.TraceInsightSets|null,
-      insightSetKey: string,
-      ): Lit.LitTemplate {
-    const insightSet = insights?.get(insightSetKey);
-    if (!insightSet) {
+  #renderInsightComponent(
+      insightSet: Trace.Insights.Types.InsightSet, insightData: InsightData,
+      fieldMetrics: Trace.Insights.Common.CrUXFieldMetricResults|null): Lit.LitTemplate {
+    if (!this.#data.parsedTrace) {
       return Lit.nothing;
     }
 
-    const fieldMetrics = this.#getFieldMetrics(insightSetKey);
-    const {shownInsights: shownInsightsData, passedInsights: passedInsightsData} =
-        SidebarSingleInsightSet.categorizeInsights(
-            insights,
-            insightSetKey,
-            this.#data.activeCategory,
-        );
-
-    const renderInsightComponent = (insightData: CategorizedInsightData): Lit.LitTemplate => {
-      const {componentClass, model} = insightData;
-      if (!this.#data.parsedTrace?.insights) {
-        return nothing;
-      }
+    const {insightName, model} = insightData;
+    const activeInsight = this.#data.activeInsight;
+    const agentFocus = AIAssistance.AIContext.AgentFocus.fromInsight(this.#data.parsedTrace, model);
 
-      const agentFocus = AIAssistance.AIContext.AgentFocus.fromInsight(this.#data.parsedTrace, model);
-      // clang-format off
-      /* eslint-disable lit/binding-positions,lit/no-invalid-html */
-      return html`<div>
-        <${componentClass.litTagName}
-          .selected=${this.#data.activeInsight?.model === model}
-          ${Lit.Directives.ref(elem => {
-            if(this.#data.activeInsight?.model === model && elem) {
-              this.#activeInsightElement = elem as BaseInsightComponent<Trace.Insights.Types.InsightModel>;
-            }
-          })}
-          .model=${model}
-          .bounds=${insightSet.bounds}
-          .insightSetKey=${insightSetKey}
-          .agentFocus=${agentFocus}
-          .fieldMetrics=${fieldMetrics}>
-        </${componentClass.litTagName}>
-      </div>`;
-      /* eslint-enable lit/binding-positions,lit/no-invalid-html */
-      // clang-format on
-    };
+    const widgetElement =
+        this.#insightRenderer.renderInsightToWidgetElement(this.#data.parsedTrace, insightSet, model, insightName, {
+          selected: activeInsight?.model === model,
+          agentFocus,
+          fieldMetrics,
+        });
 
-    const shownInsights = shownInsightsData.map(renderInsightComponent);
-    const passedInsights = passedInsightsData.map(renderInsightComponent);
+    if (activeInsight?.model === model) {
+      this.#activeInsightElement = widgetElement;
+    }
 
-    // clang-format off
-    return html`
-      ${shownInsights}
-      ${passedInsights.length ? html`
-        <details class="passed-insights-section">
-          <summary>${i18nString(UIStrings.passedInsights, {
-            PH1: passedInsights.length,
-          })}</summary>
-          ${passedInsights}
-        </details>
-      ` : Lit.nothing}
-    `;
-    // clang-format on
+    return html`${widgetElement}`;
   }
 
-  #render(): void {
+  override performUpdate(): void {
     const {
       parsedTrace,
       insightSetKey,
     } = this.#data;
+
     if (!parsedTrace?.insights || !insightSetKey) {
-      Lit.render(Lit.nothing, this.#shadow, {host: this});
       return;
     }
 
-    // clang-format off
-    Lit.render(html`
-      <style>${sidebarSingleInsightSetStyles}</style>
-      <div class="navigation">
-        ${this.#renderMetrics(insightSetKey)}
-        ${this.#renderInsights(parsedTrace.insights, insightSetKey)}
-        </div>
-      `, this.#shadow, {host: this});
-    // clang-format on
-  }
-}
+    const insightSet = parsedTrace.insights.get(insightSetKey);
+    if (!insightSet) {
+      return;
+    }
+
+    const local = this.#getLocalMetrics(insightSetKey);
+    const field = this.#getFieldMetrics(insightSetKey);
+    const {shownInsights, passedInsights} = SidebarSingleInsightSet.categorizeInsights(
+        parsedTrace.insights,
+        insightSetKey,
+        this.#data.activeCategory,
+    );
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-sidebar-single-navigation': SidebarSingleInsightSet;
+    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 =
+        !this.#didDismissFieldMismatchNotice && !!fieldValues && isFieldWorseThanLocal(localValues, fieldValues);
+
+    const input: ViewInput = {
+      shownInsights,
+      passedInsights,
+      local,
+      field,
+      activeCategory: this.#data.activeCategory,
+      showFieldMismatchNotice,
+      onDismisFieldMismatchNotice: this.#onDismisFieldMismatchNotice.bind(this),
+      onClickMetric: this.#onClickMetric.bind(this),
+      renderInsightComponent: insightData => this.#renderInsightComponent(insightSet, insightData, field),
+    };
+    this.#view(input, undefined, this.contentElement);
   }
 }
-
-customElements.define('devtools-performance-sidebar-single-navigation', SidebarSingleInsightSet);