[RPP] Remove parsedTrace from insight components

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

Author: Connor Clark

front_end/panels/timeline/components/SidebarInsightsTab.ts

@@ -193,7 +193,6 @@ export class SidebarInsightsTab extends HTMLElement {
       <div class="insight-sets-wrapper">
         ${[...this.#insights.values()].map(({id, url}, index) => {
           const data = {
-            parsedTrace: this.#parsedTrace,
             insights: this.#insights,
             insightSetKey: id,
             activeCategory: this.#selectedCategory,

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

@@ -32,7 +32,7 @@ function getPassedInsights(component: Components.SidebarSingleInsightSet.Sidebar
 
 describeWithEnvironment('SidebarSingleInsightSet', () => {
   it('renders a list of insights', async function() {
-    const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+    const {insights} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
 
     assert.isOk(insights);
     // only one navigation in this trace.
@@ -44,7 +44,6 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
     const component = new Components.SidebarSingleInsightSet.SidebarSingleInsightSet();
     renderElementIntoDOM(component);
     component.data = {
-      parsedTrace,
       insights,
       insightSetKey: navigationId,
       activeCategory: Trace.Insights.Types.InsightCategory.ALL,
@@ -83,7 +82,6 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
     const firstNavigation = parsedTrace.Meta.mainFrameNavigations.at(0)?.args.data?.navigationId;
     assert.isOk(firstNavigation);
     component.data = {
-      parsedTrace,
       insights,
       insightSetKey: firstNavigation,
       activeCategory: Trace.Insights.Types.InsightCategory.ALL,
@@ -97,7 +95,6 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
     assert.deepEqual(userVisibleTitles, [
       'LCP by phase',
       'LCP request discovery',
-      'Layout shift culprits',
       'Improve image delivery',
       'Third parties',
       'Document request latency',
@@ -126,7 +123,6 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
     const firstNavigation = parsedTrace.Meta.mainFrameNavigations.at(0)?.args.data?.navigationId;
     assert.isOk(firstNavigation);
     component.data = {
-      parsedTrace,
       insights,
       insightSetKey: firstNavigation,
       activeCategory: Trace.Insights.Types.InsightCategory.ALL,
@@ -140,7 +136,6 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
     assert.deepEqual(userVisibleTitles, [
       'LCP by phase',
       'LCP request discovery',
-      'Layout shift culprits',
       'Improve image delivery',
       'Font display',
       'Third parties',
@@ -160,7 +155,7 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
   });
 
   it('will render the active insight fully', async function() {
-    const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+    const {insights} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
 
     assert.isOk(insights);
     // only one navigation in this trace.
@@ -177,7 +172,6 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
     const component = new Components.SidebarSingleInsightSet.SidebarSingleInsightSet();
     renderElementIntoDOM(component);
     component.data = {
-      parsedTrace,
       insights,
       insightSetKey: navigationId,
       activeCategory: Trace.Insights.Types.InsightCategory.ALL,

front_end/panels/timeline/components/SidebarSingleInsightSet.ts

@@ -34,7 +34,6 @@ const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/SidebarSing
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export interface SidebarSingleInsightSetData {
-  parsedTrace: Trace.Handlers.Types.ParsedTrace|null;
   insights: Trace.Insights.Types.TraceInsightSets|null;
   insightSetKey: Trace.Types.Events.NavigationId|null;
   activeCategory: Trace.Insights.Types.InsightCategory;
@@ -74,7 +73,6 @@ export class SidebarSingleInsightSet extends HTMLElement {
   #renderBound = this.#render.bind(this);
 
   #data: SidebarSingleInsightSetData = {
-    parsedTrace: null,
     insights: null,
     insightSetKey: null,
     activeCategory: Trace.Insights.Types.InsightCategory.ALL,
@@ -202,18 +200,18 @@ export class SidebarSingleInsightSet extends HTMLElement {
 
   #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,
     );
 
-    const models = insightSets?.get(insightSetKey)?.model;
-    if (!models) {
+    const insightSet = insightSets?.get(insightSetKey);
+    if (!insightSet) {
       return LitHtml.nothing;
     }
 
+    const models = insightSet.model;
     const shownInsights: LitHtml.TemplateResult[] = [];
     const passedInsights: LitHtml.TemplateResult[] = [];
     for (const [name, componentClass] of Object.entries(INSIGHT_NAME_TO_COMPONENT)) {
@@ -232,7 +230,7 @@ export class SidebarSingleInsightSet extends HTMLElement {
         <${componentClass.litTagName}
           .selected=${this.#data.activeInsight?.model === model}
           .model=${model}
-          .parsedTrace=${parsedTrace}
+          .bounds=${insightSet.bounds}
           .insightSetKey=${insightSetKey}
         </${componentClass.litTagName}>
       </div>`;
@@ -262,11 +260,10 @@ export class SidebarSingleInsightSet extends HTMLElement {
 
   #render(): void {
     const {
-      parsedTrace,
       insights,
       insightSetKey,
     } = this.#data;
-    if (!parsedTrace || !insights || !insightSetKey) {
+    if (!insights || !insightSetKey) {
       LitHtml.render(html``, this.#shadow, {host: this});
       return;
     }
@@ -275,7 +272,7 @@ export class SidebarSingleInsightSet extends HTMLElement {
     LitHtml.render(html`
       <div class="navigation">
         ${this.#renderMetrics(insightSetKey)}
-        ${this.#renderInsights(insights, parsedTrace, insightSetKey)}
+        ${this.#renderInsights(insights, insightSetKey)}
         </div>
       `, this.#shadow, {host: this});
     // clang-format on

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

@@ -44,7 +44,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/Ba
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export interface BaseInsightData {
-  parsedTrace: Trace.Handlers.Types.ParsedTrace|null;
+  bounds: Trace.Types.Timing.TraceWindowMicroSeconds|null;
   /** The key into `insights` that contains this particular insight. */
   insightSetKey: string|null;
 }
@@ -65,7 +65,7 @@ export abstract class BaseInsightComponent<T extends InsightModel<{}>> extends H
   }
 
   protected data: BaseInsightData = {
-    parsedTrace: null,
+    bounds: null,
     insightSetKey: null,
   };
 
@@ -107,13 +107,13 @@ export abstract class BaseInsightComponent<T extends InsightModel<{}>> extends H
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
   }
 
-  set parsedTrace(parsedTrace: Trace.Handlers.Types.ParsedTrace|null) {
-    this.data.parsedTrace = parsedTrace;
+  set insightSetKey(insightSetKey: string|null) {
+    this.data.insightSetKey = insightSetKey;
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
   }
 
-  set insightSetKey(insightSetKey: string|null) {
-    this.data.insightSetKey = insightSetKey;
+  set bounds(bounds: Trace.Types.Timing.TraceWindowMicroSeconds|null) {
+    this.data.bounds = bounds;
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
   }
 

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

@@ -127,7 +127,11 @@ export class CLSCulprits extends BaseInsightComponent<CLSCulpritsInsightModel> {
 
   #renderContent(culprits: Array<string>, worstCluster: Trace.Types.Events.SyntheticLayoutShiftCluster):
       LitHtml.LitTemplate {
-    const ts = Trace.Types.Timing.MicroSeconds(worstCluster.ts - (this.data.parsedTrace?.Meta.traceBounds.min ?? 0));
+    if (!this.bounds) {
+      return LitHtml.nothing;
+    }
+
+    const ts = Trace.Types.Timing.MicroSeconds(worstCluster.ts - this.bounds.min);
     const clusterTs = i18n.TimeUtilities.formatMicroSecondsTime(ts);
 
     // clang-format off