[RPP] Add model property to BaseInsightComponent

Stop having each insight component locate its data manually; just give
it to them directly.

Bug: 371615739
Change-Id: Id0836393280422e684520b9d520f5db8c7b34a0a
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6001800
Reviewed-by: Paul Irish <[email protected]>
Commit-Queue: Paul Irish <[email protected]>
Auto-Submit: Connor Clark <[email protected]>

Author: Connor Clark

front_end/models/trace/insights/LCPDiscovery.ts

@@ -12,7 +12,7 @@ export function deps(): ['NetworkRequests', 'PageLoadMetrics', 'LargestImagePain
   return ['NetworkRequests', 'PageLoadMetrics', 'LargestImagePaint', 'Meta'];
 }
 
-export type LCPDiscoveryModel = InsightModel<{
+export type LCPDiscoveryInsightModel = InsightModel<{
   lcpEvent?: Types.Events.LargestContentfulPaintCandidate,
   shouldRemoveLazyLoading?: boolean,
   shouldIncreasePriorityHint?: boolean,
@@ -22,7 +22,8 @@ export type LCPDiscoveryModel = InsightModel<{
   earliestDiscoveryTimeTs?: Types.Timing.MicroSeconds,
 }>;
 
-export function generateInsight(parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): LCPDiscoveryModel {
+export function generateInsight(
+    parsedTrace: RequiredData<typeof deps>, context: InsightSetContext): LCPDiscoveryInsightModel {
   if (!context.navigation) {
     return {};
   }

front_end/models/trace/insights/RenderBlocking.test.ts

@@ -16,7 +16,7 @@ export async function processTrace(testContext: Mocha.Suite|Mocha.Context|null,
   return {data: parsedTrace, insights};
 }
 
-describeWithEnvironment('RenderBlockingRequests', function() {
+describeWithEnvironment('RenderBlocking', function() {
   it('finds render blocking requests', async () => {
     const {data, insights} = await processTrace(this, 'load-simple.json.gz');
     assert.deepStrictEqual(

front_end/panels/timeline/components/SidebarSingleInsightSet.ts

@@ -40,27 +40,27 @@ 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.BaseInsightComponent> = 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.BaseInsightComponent[] = [
-  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,
+  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'});
@@ -193,37 +193,42 @@ export class SidebarSingleInsightSet extends HTMLElement {
     `;
   }
 
-  #insightsForRendering(): typeof Insights.Helpers.BaseInsightComponent[] {
+  #renderInsights(
+      insightSets: Trace.Insights.Types.TraceInsightSets|null,
+      parsedTrace: Trace.Handlers.Types.ParsedTrace|null,
+      insightSetKey: string,
+      ): LitHtml.TemplateResult {
     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 html``;
     }
 
-    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}
+      // clang-format off
+      const component = html`<div data-single-insight-wrapper>
+        <${componentClass.litTagName}
+          .model=${models[name as keyof typeof models]}
           .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 {

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

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../../core/i18n/i18n.js';
+import type {CLSCulpritsInsightModel} from '../../../../models/trace/insights/CLSCulprits.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import type * as Overlays from '../../overlays/overlays.js';
@@ -59,18 +60,16 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/CLSCulprits.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class CLSCulprits extends BaseInsightComponent {
+export class CLSCulprits extends BaseInsightComponent<CLSCulpritsInsightModel> {
   static override readonly litTagName = LitHtml.literal`devtools-performance-cls-culprits`;
   override insightCategory: Category = Category.CLS;
   override internalName: string = 'cls-culprits';
   override userVisibleTitle: string = i18nString(UIStrings.title);
   override description: string = i18nString(UIStrings.description);
 
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
-    const insight = Trace.Insights.Common.getInsight('CLSCulprits', this.data.insights, this.data.insightSetKey);
-
     const clustersByScore =
-        insight?.clusters.toSorted((a, b) => b.clusterCumulativeScore - a.clusterCumulativeScore) ?? [];
+        this.model?.clusters.toSorted((a, b) => b.clusterCumulativeScore - a.clusterCumulativeScore) ?? [];
     const worstCluster = clustersByScore[0];
     if (!worstCluster) {
       return [];
@@ -169,31 +168,29 @@ export class CLSCulprits extends BaseInsightComponent {
   }
 
   override getRelatedEvents(): Trace.Types.Events.Event[] {
-    const insight = Trace.Insights.Common.getInsight('CLSCulprits', this.data.insights, this.data.insightSetKey);
-    return insight?.relatedEvents ?? [];
+    return this.model?.relatedEvents ?? [];
   }
 
   override render(): void {
-    const insight = Trace.Insights.Common.getInsight('CLSCulprits', this.data.insights, this.data.insightSetKey);
-    if (!insight) {
+    if (!this.model) {
       return;
     }
 
-    const culpritsByShift = insight.shifts;
-    const clusters = insight.clusters ?? [];
-    if (!clusters.length || !insight.worstCluster) {
+    const culpritsByShift = this.model.shifts;
+    const clusters = this.model.clusters ?? [];
+    if (!clusters.length || !this.model.worstCluster) {
       return;
     }
 
-    const causes = this.getTopCulprits(insight.worstCluster, culpritsByShift);
+    const causes = this.getTopCulprits(this.model.worstCluster, culpritsByShift);
 
     const hasCulprits = causes.length > 0;
 
     const matchesCategory = shouldRenderForCategory({
       activeCategory: this.data.activeCategory,
       insightCategory: this.insightCategory,
     });
-    const output = hasCulprits && matchesCategory ? this.#render(causes, insight.worstCluster) : LitHtml.nothing;
+    const output = hasCulprits && matchesCategory ? this.#render(causes, this.model.worstCluster) : LitHtml.nothing;
     LitHtml.render(output, this.shadow, {host: this});
   }
 }

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

@@ -5,6 +5,7 @@
 import '../../../../ui/components/icon_button/icon_button.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
+import type {DocumentLatencyInsightModel} from '../../../../models/trace/insights/DocumentLatency.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import type * as Overlays from '../../overlays/overlays.js';
@@ -75,7 +76,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/DocumentLatency.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class DocumentLatency extends BaseInsightComponent {
+export class DocumentLatency extends BaseInsightComponent<DocumentLatencyInsightModel> {
   static override readonly litTagName = LitHtml.literal`devtools-performance-document-latency`;
   override insightCategory: Category = Category.ALL;
   override internalName: string = 'document-latency';
@@ -98,26 +99,26 @@ export class DocumentLatency extends BaseInsightComponent {
   }
 
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
-    const insight = Trace.Insights.Common.getInsight('DocumentLatency', this.data.insights, this.data.insightSetKey);
-    if (!insight?.data?.documentRequest) {
+    if (!this.model?.data?.documentRequest) {
       return [];
     }
 
     const overlays: Overlays.Overlays.TimelineOverlay[] = [];
-    const event = insight.data.documentRequest;
-    const redirectDurationMicro = Trace.Helpers.Timing.millisecondsToMicroseconds(insight.data.redirectDuration);
+    const event = this.model.data.documentRequest;
+    const redirectDurationMicro = Trace.Helpers.Timing.millisecondsToMicroseconds(this.model.data.redirectDuration);
 
     const sections = [];
-    if (insight.data.redirectDuration) {
+    if (this.model.data.redirectDuration) {
       const bounds = Trace.Helpers.Timing.traceWindowFromMicroSeconds(
           event.ts,
           (event.ts + redirectDurationMicro) as Trace.Types.Timing.MicroSeconds,
       );
       sections.push({bounds, label: i18nString(UIStrings.redirectsLabel), showDuration: true});
       overlays.push({type: 'CANDY_STRIPED_TIME_RANGE', bounds, entry: event});
     }
-    if (insight.data.serverResponseTooSlow) {
-      const serverResponseTimeMicro = Trace.Helpers.Timing.millisecondsToMicroseconds(insight.data.serverResponseTime);
+    if (this.model.data.serverResponseTooSlow) {
+      const serverResponseTimeMicro =
+          Trace.Helpers.Timing.millisecondsToMicroseconds(this.model.data.serverResponseTime);
       // NOTE: NetworkRequestHandlers never makes a synthetic network request event if `timing` is missing.
       const sendEnd = event.args.data.timing?.sendEnd ?? Trace.Types.Timing.MilliSeconds(0);
       const sendEndMicro = Trace.Helpers.Timing.millisecondsToMicroseconds(sendEnd);
@@ -127,7 +128,7 @@ export class DocumentLatency extends BaseInsightComponent {
       );
       sections.push({bounds, label: i18nString(UIStrings.serverResponseTimeLabel), showDuration: true});
     }
-    if (insight.data.uncompressedResponseBytes) {
+    if (this.model.data.uncompressedResponseBytes) {
       const bounds = Trace.Helpers.Timing.traceWindowFromMicroSeconds(
           event.args.data.syntheticData.downloadStart,
           (event.args.data.syntheticData.downloadStart + event.args.data.syntheticData.download) as
@@ -141,15 +142,15 @@ export class DocumentLatency extends BaseInsightComponent {
       overlays.push({
         type: 'TIMESPAN_BREAKDOWN',
         sections,
-        entry: insight.data.documentRequest,
+        entry: this.model.data.documentRequest,
         // Always render below because the document request is guaranteed to be
         // the first request in the network track.
         renderLocation: 'BELOW_EVENT',
       });
     }
     overlays.push({
       type: 'ENTRY_SELECTED',
-      entry: insight.data.documentRequest,
+      entry: this.model.data.documentRequest,
     });
 
     return overlays;
@@ -195,22 +196,21 @@ export class DocumentLatency extends BaseInsightComponent {
   }
 
   override getRelatedEvents(): Trace.Types.Events.Event[] {
-    const insight = Trace.Insights.Common.getInsight('DocumentLatency', this.data.insights, this.data.insightSetKey);
-    return insight?.relatedEvents ?? [];
+    return this.model?.relatedEvents ?? [];
   }
 
   override render(): void {
-    const insight = Trace.Insights.Common.getInsight('DocumentLatency', this.data.insights, this.data.insightSetKey);
-    if (insight?.data === undefined) {
+    if (this.model?.data === undefined) {
       return;
     }
+
     const matchesCategory = shouldRenderForCategory({
       activeCategory: this.data.activeCategory,
       insightCategory: this.insightCategory,
     });
-    const hasFailure = insight?.data?.redirectDuration > 0 || insight?.data?.serverResponseTooSlow ||
-        insight.data.uncompressedResponseBytes > 0;
-    const output = (matchesCategory && hasFailure) ? this.#renderInsight(insight) : LitHtml.nothing;
+    const hasFailure = this.model?.data?.redirectDuration > 0 || this.model?.data?.serverResponseTooSlow ||
+        this.model.data.uncompressedResponseBytes > 0;
+    const output = (matchesCategory && hasFailure) ? this.#renderInsight(this.model) : LitHtml.nothing;
     LitHtml.render(output, this.shadow, {host: this});
   }
 }

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

@@ -5,7 +5,8 @@
 import './Table.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
-import * as Trace from '../../../../models/trace/trace.js';
+import type {FontDisplayInsightModel} from '../../../../models/trace/insights/FontDisplay.js';
+import type * as Trace from '../../../../models/trace/trace.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
@@ -34,7 +35,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/FontDisplay.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class FontDisplay extends BaseInsightComponent {
+export class FontDisplay extends BaseInsightComponent<FontDisplayInsightModel> {
   static override readonly litTagName = LitHtml.literal`devtools-performance-font-display`;
   override insightCategory = Category.INP;
   override internalName: string = 'font-display';
@@ -46,12 +47,11 @@ export class FontDisplay extends BaseInsightComponent {
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
     this.#overlayForRequest.clear();
 
-    const insight = Trace.Insights.Common.getInsight('FontDisplay', this.data.insights, this.data.insightSetKey);
-    if (!insight) {
+    if (!this.model) {
       return [];
     }
 
-    for (const font of insight.fonts) {
+    for (const font of this.model.fonts) {
       this.#overlayForRequest.set(font.request, {
         type: 'ENTRY_OUTLINE',
         entry: font.request,
@@ -97,19 +97,18 @@ export class FontDisplay extends BaseInsightComponent {
   }
 
   override getRelatedEvents(): Trace.Types.Events.Event[] {
-    const insight = Trace.Insights.Common.getInsight('FontDisplay', this.data.insights, this.data.insightSetKey);
-    return insight?.relatedEvents ?? [];
+    return this.model?.relatedEvents ?? [];
   }
 
   override render(): void {
-    const insight = Trace.Insights.Common.getInsight('FontDisplay', this.data.insights, this.data.insightSetKey);
-    const shouldShow = insight && insight.fonts.find(font => font.wastedTime);
+    const model = this.model;
+    const shouldShow = model && model.fonts.find(font => font.wastedTime);
 
     const matchesCategory = shouldRenderForCategory({
       activeCategory: this.data.activeCategory,
       insightCategory: this.insightCategory,
     });
-    const output = shouldShow && matchesCategory ? this.#render(insight) : LitHtml.nothing;
+    const output = shouldShow && matchesCategory ? this.#render(model) : LitHtml.nothing;
     LitHtml.render(output, this.shadow, {host: this});
   }
 }