chrome-devtools-frontend 1.0.1376716 → 1.0.1386602

package/front_end/panels/timeline/components/LiveMetricsView.test.ts

@@ -707,6 +707,7 @@ describeWithMockConnection('LiveMetricsView', () => {
         'url-DESKTOP': null,
         'url-PHONE': null,
         'url-TABLET': null,
+        warnings: [],
       };
 
       sinon.stub(CrUXManager.CrUXManager.instance(), 'getFieldDataForCurrentPage').callsFake(async () => mockFieldData);
@@ -729,7 +730,7 @@ describeWithMockConnection('LiveMetricsView', () => {
       assert.match(fieldMessage!.innerText, /See how your local metrics compare/);
 
       const title = getLiveMetricsTitle(view);
-      assert.strictEqual(title.innerText, 'Local metrics ');
+      assert.strictEqual(title.innerText, 'Local metrics');
     });
 
     it('should show when crux is enabled', async () => {
@@ -760,7 +761,7 @@ describeWithMockConnection('LiveMetricsView', () => {
       assert.match(fieldMessage!.innerText, /Jan.+2024/);
 
       const title = getLiveMetricsTitle(view);
-      assert.strictEqual(title.innerText, 'Local and field metrics ');
+      assert.strictEqual(title.innerText, 'Local and field metrics');
     });
 
     it('should show empty values when crux is enabled but there is no field data', async () => {
@@ -784,7 +785,18 @@ describeWithMockConnection('LiveMetricsView', () => {
       assert.match(fieldMessage!.textContent!, /Not enough data/);
 
       const title = getLiveMetricsTitle(view);
-      assert.strictEqual(title.innerText, 'Local and field metrics ');
+      assert.strictEqual(title.innerText, 'Local and field metrics');
+    });
+
+    it('should display any warning from crux', async () => {
+      mockFieldData.warnings.push('Warning from crux');
+
+      const view = renderLiveMetrics();
+
+      await coordinator.done();
+
+      const fieldMessage = getFieldMessage(view);
+      assert.match(fieldMessage!.textContent!, /Warning from crux/);
     });
 
     it('should make initial request on render when crux is enabled', async () => {

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

@@ -10,7 +10,6 @@ import '../../../ui/components/menus/menus.js';
 import './MetricCard.js';
 
 import * as Common from '../../../core/common/common.js';
-import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
@@ -27,6 +26,7 @@ import * as UI from '../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as MobileThrottling from '../../mobile_throttling/mobile_throttling.js';
+import {md} from '../utils/Helpers.js';
 
 import liveMetricsViewStyles from './liveMetricsView.css.js';
 import type {MetricCardData} from './MetricCard.js';
@@ -167,19 +167,10 @@ const UIStrings = {
    */
   percentDevices: '{PH1}% mobile, {PH2}% desktop',
   /**
-   * @description Text block explaining how to simulate different mobile and desktop devices. The placeholder at the end will be a link with the text "simulate different devices" translated separately.
-   * @example {simulate different devices} PH1
+   * @description Text block explaining how to simulate different mobile and desktop devices.
    */
-  useDeviceToolbar: 'Use the device toolbar to {PH1}.',
-  /**
-   * @description Text for a link that is inserted inside a larger text block that explains how to simulate different mobile and desktop devices.
-   */
-  simulateDifferentDevices: 'simulate different devices',
-  /**
-   * @description Tooltip text that explains how disabling the network cache can simulate the network connections of users that are visiting a page for the first time.
-   */
-  networkCacheExplanation:
-      'Disabling the network cache will simulate a network experience similar to a first time visitor.',
+  useDeviceToolbar:
+      'Use the [device toolbar](https://developer.chrome.com/docs/devtools/device-mode) and configure throttling to simulate real user environments and identify more performance issues.',
   /**
    * @description Text label for a checkbox that controls if the network cache is disabled.
    */
@@ -220,11 +211,15 @@ const UIStrings = {
    * @example {Chrome UX Report} PH1
    */
   seeHowYourLocalMetricsCompare: 'See how your local metrics compare to real user data in the {PH1}.',
+  /**
+   * @description Text for a link that goes to more documentation about local and field data. "Local" refers to performance metrics measured in the developers local environment. "field data" is data measured by real users in the field.
+   */
+  localFieldLearnMoreLink: 'Learn more about local and field data',
   /**
    * @description Tooltip text for a link that goes to documentation explaining the difference between local and field metrics. "Local metrics" are performance metrics measured in the developers local environment. "field data" is data measured by real users in the field.
    */
-  learnMoreAboutMetrics:
-      'Local metrics are captured from the current page using your network connection and device. Field data is measured by real users using many different network connections and devices. Click to learn more about local and field metrics.',
+  localFieldLearnMoreTooltip:
+      'Local metrics are captured from the current page using your network connection and device. Field data is measured by real users using many different network connections and devices.',
   /**
    * @description Tooltip text explaining that this user interaction was ignored when calculating the Interaction to Next Paint (INP) metric because the interaction delay fell beyond the 98th percentile of interaction delays on this page. "INP" is an acronym and should not be translated.
    */
@@ -234,10 +229,6 @@ const UIStrings = {
    * @description Tooltip for a button that will remove everything from the currently selected log.
    */
   clearCurrentLog: 'Clear the current log',
-  /**
-   * @description Title for a section that contains more information about real user environments. This message is meant to prompt the user to understand the conditions experienced by real users.
-   */
-  realUserEnvironments: 'Real user environments',
   /**
    * @description Title for a page load phase that measures the time between when the page load starts and the time when the first byte of the initial document is downloaded.
    */
@@ -627,10 +618,6 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
   #renderRecordingSettings(): LitHtml.LitTemplate {
     const fieldEnabled = CrUXManager.CrUXManager.instance().getConfigSetting().get().enabled;
 
-    const deviceLinkEl = UI.XLink.XLink.create(
-        'https://developer.chrome.com/docs/devtools/device-mode', i18nString(UIStrings.simulateDifferentDevices));
-    const deviceMessage = i18n.i18n.getFormatLocalizedString(str_, UIStrings.useDeviceToolbar, {PH1: deviceLinkEl});
-
     const deviceRecEl = document.createElement('span');
     deviceRecEl.classList.add('environment-rec');
     deviceRecEl.textContent = this.#getDeviceRec() || i18nString(UIStrings.notEnoughData);
@@ -642,9 +629,8 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     // clang-format off
     return html`
       <h3 class="card-title">${i18nString(UIStrings.environmentSettings)}</h3>
-      <div class="device-toolbar-description">${deviceMessage}</div>
+      <div class="device-toolbar-description">${md(i18nString(UIStrings.useDeviceToolbar))}</div>
       ${fieldEnabled ? html`
-        <div class="environment-recs-title">${i18nString(UIStrings.realUserEnvironments)}</div>
         <ul class="environment-recs-list">
           <li>${i18n.i18n.getFormatLocalizedString(str_, UIStrings.device, {PH1: deviceRecEl})}</li>
           <li>${i18n.i18n.getFormatLocalizedString(str_, UIStrings.network, {PH1: networkRecEl})}</li>
@@ -664,12 +650,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
             textOverride: i18nString(UIStrings.disableNetworkCache),
           } as Settings.SettingCheckbox.SettingCheckboxData}
         ></setting-checkbox>
-        <devtools-icon
-          class="setting-hint"
-          name="help"
-          title=${i18nString(UIStrings.networkCacheExplanation)}
-        ></devtools-icon>
-        </div>
+      </div>
     `;
     // clang-format on
   }
@@ -879,8 +860,15 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
       PH1: dateEl,
     });
 
+    const warnings = this.#cruxPageResult?.warnings || [];
+
     return html`
-      <div class="field-data-message">${message}</div>
+      <div class="field-data-message">
+        <div>${message}</div>
+        ${warnings.map(warning => html`
+          <div class="field-data-warning">${warning}</div>
+        `)}
+      </div>
     `;
   }
 
@@ -1106,18 +1094,8 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     const output = html`
       <div class="container">
         <div class="live-metrics-view">
-          <main class="live-metrics"
-          >
-            <h2 class="section-title">
-              ${liveMetricsTitle}
-              <devtools-button
-                class="section-title-help"
-                title=${i18nString(UIStrings.learnMoreAboutMetrics)}
-                .iconName=${'help'}
-                .variant=${Buttons.Button.Variant.ICON}
-                @click=${() => Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(helpLink)}
-              ></devtools-button>
-            </h2>
+          <main class="live-metrics">
+            <h2 class="section-title">${liveMetricsTitle}</h2>
             <div class="metric-cards"
               on-render=${ComponentHelpers.Directives.nodeRenderedCallback(node => {
                 this.#tooltipContainerEl = node;
@@ -1133,6 +1111,11 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
                 ${this.#renderInpCard()}
               </div>
             </div>
+            <x-link
+              href=${helpLink}
+              class="local-field-link"
+              title=${i18nString(UIStrings.localFieldLearnMoreTooltip)}
+            >${i18nString(UIStrings.localFieldLearnMoreLink)}</x-link>
             ${this.#renderLogSection()}
           </main>
           <aside class="next-steps" aria-labelledby="next-steps-section-title">

package/front_end/panels/timeline/components/MetricCard.test.ts

@@ -145,7 +145,7 @@ describeWithMockConnection('MetricCard', () => {
 
     const localValueEl = getLocalMetricValue(view);
     assert.strictEqual(localValueEl.className, 'metric-value poor');
-    assert.strictEqual(localValueEl.innerText, '2000 ms');
+    assert.strictEqual(localValueEl.innerText, '2,000 ms');
 
     const fieldValueEl = getFieldMetricValue(view);
     assert.strictEqual(fieldValueEl!.className, 'metric-value good');

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

@@ -2,9 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Host from '../../../core/host/host.js';
 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 Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
@@ -121,6 +123,20 @@ const UIStrings = {
    * @description Column header for table cell values representing a phase duration (in milliseconds) that was measured in the developers local environment.
    */
   duration: 'Local duration (ms)',
+  /**
+   * @description Tooltip text for a link that goes to documentation explaining the Largest Contentful Paint (LCP) metric. "LCP" is an acronym and should not be translated.
+   */
+  lcpHelpTooltip:
+      'LCP reports the render time of the largest image, text block, or video visible in the viewport. Click here to learn more about LCP.',
+  /**
+   * @description Tooltip text for a link that goes to documentation explaining the Cumulative Layout Shift (CLS) metric. "CLS" is an acronym and should not be translated.
+   */
+  clsHelpTooltip: 'CLS measures the amount of unexpected shifted content. Click here to learn more about CLS.',
+  /**
+   * @description Tooltip text for a link that goes to documentation explaining the Interaction to Next Paint (INP) metric. "INP" is an acronym and should not be translated.
+   */
+  inpHelpTooltip:
+      'INP measures the overall responsiveness to all click, tap, and keyboard interactions. Click here to learn more about INP.',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/MetricCard.ts', UIStrings);
@@ -291,6 +307,28 @@ export class MetricCard extends HTMLElement {
     }
   }
 
+  #getHelpLink(): Platform.DevToolsPath.UrlString {
+    switch (this.#data.metric) {
+      case 'LCP':
+        return 'https://web.dev/articles/lcp' as Platform.DevToolsPath.UrlString;
+      case 'CLS':
+        return 'https://web.dev/articles/cls' as Platform.DevToolsPath.UrlString;
+      case 'INP':
+        return 'https://web.dev/articles/inp' as Platform.DevToolsPath.UrlString;
+    }
+  }
+
+  #getHelpTooltip(): string {
+    switch (this.#data.metric) {
+      case 'LCP':
+        return i18nString(UIStrings.lcpHelpTooltip);
+      case 'CLS':
+        return i18nString(UIStrings.clsHelpTooltip);
+      case 'INP':
+        return i18nString(UIStrings.inpHelpTooltip);
+    }
+  }
+
   #getLocalValue(): number|undefined {
     const {localValue} = this.#data;
     if (localValue === undefined) {
@@ -579,12 +617,20 @@ export class MetricCard extends HTMLElement {
 
   #render = (): void => {
     const fieldEnabled = CrUXManager.CrUXManager.instance().getConfigSetting().get().enabled;
+    const helpLink = this.#getHelpLink();
 
     // clang-format off
     const output = html`
       <div class="metric-card">
         <h3 class="title">
           ${this.#getTitle()}
+          <devtools-button
+            class="title-help"
+            title=${this.#getHelpTooltip()}
+            .iconName=${'help'}
+            .variant=${Buttons.Button.Variant.ICON}
+            @click=${() => Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(helpLink)}
+          ></devtools-button>
         </h3>
         <div tabindex="0" class="metric-values-section"
           @mouseenter=${() => this.#showTooltip(500)}

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

@@ -5,7 +5,7 @@
 import '../../../ui/components/request_link_icon/request_link_icon.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
-import * as Platform from '../../../core/platform/platform.js';
+import type * as Platform from '../../../core/platform/platform.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
 import * as Helpers from '../../../models/trace/helpers/helpers.js';
 import * as Trace from '../../../models/trace/trace.js';
@@ -223,8 +223,7 @@ export class NetworkRequestDetails extends HTMLElement {
       lengthText += i18nString(UIStrings.FromServiceWorker);
     }
     if (this.#networkRequest.args.data.encodedDataLength || !lengthText) {
-      lengthText =
-          `${Platform.NumberUtilities.bytesToString(this.#networkRequest.args.data.encodedDataLength)}${lengthText}`;
+      lengthText = `${i18n.ByteUtilities.bytesToString(this.#networkRequest.args.data.encodedDataLength)}${lengthText}`;
     }
     return this.#renderRow(i18nString(UIStrings.encodedData), lengthText);
   }
@@ -325,7 +324,7 @@ export class NetworkRequestDetails extends HTMLElement {
           ${this.#renderRow(i18nString(UIStrings.priority), NetworkRequestTooltip.renderPriorityValue(this.#networkRequest))}
           ${this.#renderRow(i18nString(UIStrings.mimeType), networkData.mimeType)}
           ${this.#renderEncodedDataLength()}
-          ${this.#renderRow(i18nString(UIStrings.decodedBody), Platform.NumberUtilities.bytesToString(this.#networkRequest.args.data.decodedBodyLength))}
+          ${this.#renderRow(i18nString(UIStrings.decodedBody), i18n.ByteUtilities.bytesToString(this.#networkRequest.args.data.decodedBodyLength))}
           ${this.#renderBlockingRow()}
           ${this.#renderFromCache()}
         </div>

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

@@ -7,16 +7,13 @@ import * as Root from '../../../core/root/root.js';
 import type * as Trace from '../../../models/trace/trace.js';
 import * as Adorners from '../../../ui/components/adorners/adorners.js';
 import * as UI from '../../../ui/legacy/legacy.js';
-import type * as Overlays from '../overlays/overlays.js';
 
 import {SidebarAnnotationsTab} from './SidebarAnnotationsTab.js';
 import {SidebarInsightsTab} from './SidebarInsightsTab.js';
 
 export interface ActiveInsight {
-  name: string;
+  model: Trace.Insights.Types.InsightModel<{}>;
   insightSetKey: string;
-  overlays: Overlays.Overlays.TimelineOverlay[];
-  relatedEvents: Trace.Types.Events.Event[];
 }
 
 export class RemoveAnnotation extends Event {

package/front_end/panels/timeline/components/SidebarAnnotationsTab.test.ts

@@ -127,7 +127,7 @@ describeWithEnvironment('SidebarAnnotationsTab', () => {
     assert.isNotNull(component.shadowRoot);
 
     const label = component.shadowRoot.querySelector<HTMLElement>('.annotation-identifier');
-    assert.strictEqual(label?.innerText, 'private-aggregation-test.js (shared-sto…');
+    assert.strictEqual(label?.innerText, 'private-aggregation-test.js (shared-storage-demo-content-producer.web.app)');
   });
 
   it('dispatches RemoveAnnotation Events when delete annotation button is clicked', async function() {

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

@@ -43,7 +43,7 @@ export class SidebarInsightsTab extends HTMLElement {
   #parsedTrace: Trace.Handlers.Types.ParsedTrace|null = null;
   #insights: Trace.Insights.Types.TraceInsightSets|null = null;
   #activeInsight: ActiveInsight|null = null;
-  #selectedCategory = Insights.Types.Category.ALL;
+  #selectedCategory = Trace.Insights.Types.InsightCategory.ALL;
   /**
    * When a trace has sets of insights, we show an accordion with each
    * set within. A set can be specific to a single navigation, or include the

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

@@ -3,43 +3,24 @@
 // found in the LICENSE file.
 
 import * as Root from '../../../core/root/root.js';
+import * as Trace from '../../../models/trace/trace.js';
 import {getCleanTextContentFromElements, renderElementIntoDOM} from '../../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
 import {TraceLoader} from '../../../testing/TraceLoader.js';
 import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 
 import * as Components from './components.js';
-import * as InsightComponents from './insights/insights.js';
+import type * as InsightComponents from './insights/insights.js';
+
+type BaseInsightComponent =
+    InsightComponents.BaseInsightComponent.BaseInsightComponent<Trace.Insights.Types.InsightModel<{}>>;
 
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 function getUserVisibleInsights(component: Components.SidebarSingleInsightSet.SidebarSingleInsightSet):
-    InsightComponents.SidebarInsight.SidebarInsight[] {
+    BaseInsightComponent[] {
   assert.isOk(component.shadowRoot);
-  const insightWrappers = [...component.shadowRoot.querySelectorAll<HTMLDivElement>('[data-single-insight-wrapper]')];
-
-  // We have to jump through some hoops here => each insight is rendered in its
-  // own component, but within it they all use the
-  // devtools-performance-sidebar-insight component to render the header +
-  // body.
-  // So we first have to find the specific insight component (e.g.
-  // devtools-performance-render-blocking), then look inside its shadow dom for
-  // the devtools-performance-sidebar-insight component.
-  // If you are here debugging something, I highly recommend loading up
-  // DevTools and inspecting the DOM in the Insights sidebar. It will be much
-  // easier!
-  const userVisibleInsightComponents =
-      insightWrappers
-          .map(div => {
-            const component = div.querySelector('[data-insight-name]');
-            assert.instanceOf(component, HTMLElement);
-            const insightComponent =
-                component.shadowRoot?.querySelector<InsightComponents.SidebarInsight.SidebarInsight>(
-                    'devtools-performance-sidebar-insight');
-            return insightComponent ?? null;
-          })
-          .filter(x => x !== null);
-  return userVisibleInsightComponents;
+  return [...component.shadowRoot.querySelectorAll<BaseInsightComponent>('[data-insight-name]')];
 }
 
 describeWithEnvironment('SidebarSingleInsightSet', () => {
@@ -59,7 +40,7 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
       parsedTrace,
       insights,
       insightSetKey: navigationId,
-      activeCategory: InsightComponents.Types.Category.ALL,
+      activeCategory: Trace.Insights.Types.InsightCategory.ALL,
       activeInsight: null,
     };
     await coordinator.done();
@@ -86,7 +67,7 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
       parsedTrace,
       insights,
       insightSetKey: firstNavigation,
-      activeCategory: InsightComponents.Types.Category.ALL,
+      activeCategory: Trace.Insights.Types.InsightCategory.ALL,
       activeInsight: null,
     };
     await coordinator.done();
@@ -96,7 +77,9 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
     // Does not include "font display", which is experimental.
     assert.deepEqual(userVisibleTitles, [
       'LCP by phase',
+      'LCP request discovery',
       'Layout shift culprits',
+      'Improve image delivery',
       'Third parties',
     ]);
   });
@@ -114,7 +97,7 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
       parsedTrace,
       insights,
       insightSetKey: firstNavigation,
-      activeCategory: InsightComponents.Types.Category.ALL,
+      activeCategory: Trace.Insights.Types.InsightCategory.ALL,
       activeInsight: null,
     };
     await coordinator.done();
@@ -124,7 +107,9 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
     // Does not include "font display", which is experimental.
     assert.deepEqual(userVisibleTitles, [
       'LCP by phase',
+      'LCP request discovery',
       'Layout shift culprits',
+      'Improve image delivery',
       'Font display',
       'Third parties',
     ]);
@@ -140,26 +125,29 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
     const navigationId = '8463DF94CD61B265B664E7F768183DE3';
     assert.isTrue(insights.has(navigationId));
 
+    const model = insights.get(navigationId)?.model.LCPPhases;
+    if (!model) {
+      throw new Error('missing LCPPhases model');
+    }
+
     const component = new Components.SidebarSingleInsightSet.SidebarSingleInsightSet();
     renderElementIntoDOM(component);
     component.data = {
       parsedTrace,
       insights,
       insightSetKey: navigationId,
-      activeCategory: InsightComponents.Types.Category.ALL,
+      activeCategory: Trace.Insights.Types.InsightCategory.ALL,
       activeInsight: {
-        name: 'lcp-by-phase',
+        model,
         insightSetKey: navigationId,
-        overlays: [],
-        relatedEvents: [],
       },
     };
     await coordinator.done();
 
     const expandedInsight = getUserVisibleInsights(component).find(insight => {
-      return 'insightExpanded' in insight.dataset;
+      return insight.selected;
     });
     assert.isOk(expandedInsight);
-    assert.strictEqual(expandedInsight.dataset.insightTitle, 'LCP by phase');
+    assert.strictEqual(expandedInsight.model?.title, 'LCP by phase');
   });
 });

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

@@ -8,6 +8,7 @@ import * as Trace from '../../../models/trace/trace.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
+import {shouldRenderForCategory} from './insights/Helpers.js';
 import * as Insights from './insights/insights.js';
 import type {ActiveInsight} from './Sidebar.js';
 import styles from './sidebarSingleInsightSet.css.js';
@@ -31,7 +32,7 @@ export interface SidebarSingleInsightSetData {
   parsedTrace: Trace.Handlers.Types.ParsedTrace|null;
   insights: Trace.Insights.Types.TraceInsightSets|null;
   insightSetKey: Trace.Types.Events.NavigationId|null;
-  activeCategory: Insights.Types.Category;
+  activeCategory: Trace.Insights.Types.InsightCategory;
   activeInsight: ActiveInsight|null;
 }
 
@@ -40,27 +41,28 @@ export interface SidebarSingleInsightSetData {
  * "enable experimental performance insights" experiment. This is used to enable
  * us to ship incrementally without turning insights on by default for all
  * users. */
-const EXPERIMENTAL_INSIGHTS: ReadonlySet<typeof Insights.Helpers.BaseInsight> = new Set([
-  Insights.FontDisplay.FontDisplay,
+const EXPERIMENTAL_INSIGHTS: ReadonlySet<string> = new Set([
+  'FontDisplay',
 ]);
 
 /**
  * Every insight (INCLUDING experimental ones)
- * The order of this array is the order the insights will be shown in the sidebar.
+ * The order of these properties is the order the insights will be shown in the sidebar.
  * TODO(crbug.com/368135130): sort this in a smart way!
  */
-const ALL_INSIGHTS: typeof Insights.Helpers.BaseInsight[] = [
-  Insights.InteractionToNextPaint.InteractionToNextPaint,
-  Insights.LCPPhases.LCPPhases,
-  Insights.LCPDiscovery.LCPDiscovery,
-  Insights.CLSCulprits.CLSCulprits,
-  Insights.RenderBlocking.RenderBlockingRequests,
-  Insights.DocumentLatency.DocumentLatency,
-  Insights.FontDisplay.FontDisplay,
-  Insights.Viewport.Viewport,
-  Insights.ThirdParties.ThirdParties,
-  Insights.SlowCSSSelector.SlowCSSSelector,
-] as const;
+const INSIGHT_NAME_TO_COMPONENT = {
+  InteractionToNextPaint: Insights.InteractionToNextPaint.InteractionToNextPaint,
+  LCPPhases: Insights.LCPPhases.LCPPhases,
+  LCPDiscovery: Insights.LCPDiscovery.LCPDiscovery,
+  CLSCulprits: Insights.CLSCulprits.CLSCulprits,
+  RenderBlocking: Insights.RenderBlocking.RenderBlocking,
+  ImageDelivery: Insights.ImageDelivery.ImageDelivery,
+  DocumentLatency: Insights.DocumentLatency.DocumentLatency,
+  FontDisplay: Insights.FontDisplay.FontDisplay,
+  Viewport: Insights.Viewport.Viewport,
+  ThirdParties: Insights.ThirdParties.ThirdParties,
+  SlowCSSSelector: Insights.SlowCSSSelector.SlowCSSSelector,
+};
 
 export class SidebarSingleInsightSet extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
@@ -70,7 +72,7 @@ export class SidebarSingleInsightSet extends HTMLElement {
     parsedTrace: null,
     insights: null,
     insightSetKey: null,
-    activeCategory: Insights.Types.Category.ALL,
+    activeCategory: Trace.Insights.Types.InsightCategory.ALL,
     activeInsight: null,
   };
 
@@ -84,7 +86,7 @@ export class SidebarSingleInsightSet extends HTMLElement {
   }
 
   #metricIsVisible(label: 'LCP'|'CLS'|'INP'): boolean {
-    if (this.#data.activeCategory === Insights.Types.Category.ALL) {
+    if (this.#data.activeCategory === Trace.Insights.Types.InsightCategory.ALL) {
       return true;
     }
     return label === this.#data.activeCategory;
@@ -135,7 +137,7 @@ export class SidebarSingleInsightSet extends HTMLElement {
 
   #getLCP(insightSetKey: string):
       {value: Trace.Types.Timing.MicroSeconds, event: Trace.Types.Events.LargestContentfulPaintCandidate}|null {
-    const insight = Trace.Insights.Common.getInsight('LargestContentfulPaint', this.#data.insights, insightSetKey);
+    const insight = Trace.Insights.Common.getInsight('LCPPhases', this.#data.insights, insightSetKey);
     if (!insight || !insight.lcpMs || !insight.lcpEvent) {
       return null;
     }
@@ -145,7 +147,7 @@ export class SidebarSingleInsightSet extends HTMLElement {
   }
 
   #getCLS(insightSetKey: string): {value: number, worstShiftEvent: Trace.Types.Events.Event|null} {
-    const insight = Trace.Insights.Common.getInsight('CumulativeLayoutShift', this.#data.insights, insightSetKey);
+    const insight = Trace.Insights.Common.getInsight('CLSCulprits', this.#data.insights, insightSetKey);
     if (!insight) {
       // Unlike the other metrics, there is still a value for this metric even with no data.
       // This means this view will always display a CLS score.
@@ -193,37 +195,47 @@ export class SidebarSingleInsightSet extends HTMLElement {
     `;
   }
 
-  #insightsForRendering(): typeof Insights.Helpers.BaseInsight[] {
+  #renderInsights(
+      insightSets: Trace.Insights.Types.TraceInsightSets|null,
+      parsedTrace: Trace.Handlers.Types.ParsedTrace|null,
+      insightSetKey: string,
+      ): LitHtml.LitTemplate {
     const includeExperimental = Root.Runtime.experiments.isEnabled(
         Root.Runtime.ExperimentName.TIMELINE_EXPERIMENTAL_INSIGHTS,
     );
 
-    if (includeExperimental) {
-      return ALL_INSIGHTS;
+    const models = insightSets?.get(insightSetKey)?.model;
+    if (!models) {
+      return LitHtml.nothing;
     }
 
-    return ALL_INSIGHTS.filter(insight => !EXPERIMENTAL_INSIGHTS.has(insight));
-  }
+    const components: LitHtml.TemplateResult[] = [];
+    for (const [name, componentClass] of Object.entries(INSIGHT_NAME_TO_COMPONENT)) {
+      if (!includeExperimental && EXPERIMENTAL_INSIGHTS.has(name)) {
+        continue;
+      }
 
-  #renderInsights(
-      insights: Trace.Insights.Types.TraceInsightSets|null,
-      parsedTrace: Trace.Handlers.Types.ParsedTrace|null,
-      insightSetKey: string,
-      ): LitHtml.TemplateResult {
-    const insightComponents = this.#insightsForRendering();
-    // clang-format off
-    return html`${insightComponents.map(component => {
-      return html`<div data-single-insight-wrapper>
-        <${component.litTagName}
-          .insights=${insights}
+      const model = models[name as keyof typeof models];
+      if (!model || !model.shouldShow ||
+          !shouldRenderForCategory({activeCategory: this.#data.activeCategory, insightCategory: model.category})) {
+        continue;
+      }
+
+      // clang-format off
+      const component = html`<div>
+        <${componentClass.litTagName}
+          .selected=${this.#data.activeInsight?.model === model}
+          .model=${model}
           .parsedTrace=${parsedTrace}
           .insightSetKey=${insightSetKey}
-          .activeInsight=${this.#data.activeInsight}
-          .activeCategory=${this.#data.activeCategory}>
-        </${component.litTagName}>
+        </${componentClass.litTagName}>
       </div>`;
-    })}`;
-    // clang-format on
+      // clang-format on
+
+      components.push(component);
+    }
+
+    return html`${components}`;
   }
 
   #render(): void {