RPP: add tests + refactor TimelineDetailsView

The setSelection method had grown a bit hard to work with and also
lacked tests for its various branches. This CL adds some tests and also
extracts some methods just to make it a bit easier to read.

Bug: 370716587
Change-Id: Ifb73b8fdb3f85a115d93789bde0142aa87ce7919
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5973697
Commit-Queue: Nancy Li <[email protected]>
Reviewed-by: Nancy Li <[email protected]>
Commit-Queue: Jack Franklin <[email protected]>
Auto-Submit: Jack Franklin <[email protected]>

Author: jackfranklin

front_end/panels/timeline/TimelineDetailsView.test.ts

@@ -2,7 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as Trace from '../../models/trace/trace.js';
+import * as Root from '../../core/root/root.js';
+import * as Trace from '../../models/trace/trace.js';
 import {doubleRaf} from '../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
 import {TraceLoader} from '../../testing/TraceLoader.js';
@@ -21,6 +22,7 @@ class MockViewDelegate implements Timeline.TimelinePanel.TimelineModeViewDelegat
 
 describeWithEnvironment('TimelineDetailsView', function() {
   const mockViewDelegate = new MockViewDelegate();
+
   it('displays the details of a network request event correctly', async function() {
     const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'lcp-web-font.json.gz');
     const detailsView = new Timeline.TimelineDetailsView.TimelineDetailsView(mockViewDelegate);
@@ -63,4 +65,64 @@ describeWithEnvironment('TimelineDetailsView', function() {
     assert.isOk(duration);
     assert.strictEqual(duration.innerText, 'Duration37.85 ms (at 109.82 ms)');
   });
+
+  it('renders the layout shift component for a single layout shift', async function() {
+    Root.Runtime.experiments.enableForTest(Root.Runtime.ExperimentName.TIMELINE_INSIGHTS);
+
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'shift-attribution.json.gz');
+    const detailsView = new Timeline.TimelineDetailsView.TimelineDetailsView(mockViewDelegate);
+    await detailsView.setModel(
+        {parsedTrace, selectedEvents: null, traceInsightsSets: null, eventToRelatedInsightsMap: null});
+
+    const layoutShift = parsedTrace.LayoutShifts.clusters.at(0)?.events.at(0);
+    assert.isOk(layoutShift);
+    const selection = Timeline.TimelineSelection.TimelineSelection.fromTraceEvent(layoutShift);
+    await detailsView.setSelection(selection);
+    const detailsContentElement = detailsView.getDetailsContentElementForTest();
+    // Assert that the right component is rendered. This component has its own
+    // tests for its contents so no need to duplicate those here.
+    const layoutShiftDetails = detailsContentElement.querySelector('devtools-performance-layout-shift-details');
+    assert.isNotNull(layoutShiftDetails);
+  });
+
+  it('renders the layout shift component for a selected cluster', async function() {
+    Root.Runtime.experiments.enableForTest(Root.Runtime.ExperimentName.TIMELINE_INSIGHTS);
+
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'shift-attribution.json.gz');
+    const detailsView = new Timeline.TimelineDetailsView.TimelineDetailsView(mockViewDelegate);
+    await detailsView.setModel(
+        {parsedTrace, selectedEvents: null, traceInsightsSets: null, eventToRelatedInsightsMap: null});
+
+    const layoutShiftCluster = parsedTrace.LayoutShifts.clusters.at(0);
+    assert.isOk(layoutShiftCluster);
+    const selection = Timeline.TimelineSelection.TimelineSelection.fromTraceEvent(layoutShiftCluster);
+    await detailsView.setSelection(selection);
+    const detailsContentElement = detailsView.getDetailsContentElementForTest();
+    // Assert that the right component is rendered. This component has its own
+    // tests for its contents so no need to duplicate those here.
+    const layoutShiftDetails = detailsContentElement.querySelector('devtools-performance-layout-shift-details');
+    assert.isNotNull(layoutShiftDetails);
+  });
+
+  it('updates the range details when the user has a range selected', async function() {
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
+    const detailsView = new Timeline.TimelineDetailsView.TimelineDetailsView(mockViewDelegate);
+    await detailsView.setModel({
+      parsedTrace,
+      // We have to set selected events for the range selection UI to be drawn
+      // (without the set of events we can't generate the range stats)
+      selectedEvents: parsedTrace.Renderer.allTraceEntries,
+      traceInsightsSets: null,
+      eventToRelatedInsightsMap: null,
+    });
+    const bounds = Trace.Helpers.Timing.traceWindowMilliSeconds(parsedTrace.Meta.traceBounds);
+    const selection = Timeline.TimelineSelection.TimelineSelection.fromRange(
+        bounds.min,
+        bounds.max,
+    );
+    await detailsView.setSelection(selection);
+    const detailsContentElement = detailsView.getDetailsContentElementForTest();
+    const title = detailsContentElement.querySelector<HTMLElement>('.timeline-details-chip-title');
+    assert.strictEqual(title?.innerText, 'Range:  0 ms – 5.39 s');
+  });
 });

front_end/panels/timeline/TimelineDetailsView.ts

@@ -303,6 +303,48 @@ export class TimelineDetailsView extends UI.Widget.VBox {
       }
     }
   }
+
+  async #setSelectionForNetworkEvent(networkRequest: Trace.Types.Events.SyntheticNetworkRequest): Promise<void> {
+    if (!this.#parsedTrace) {
+      return;
+    }
+    const maybeTarget = targetForEvent(this.#parsedTrace, networkRequest);
+    await this.#networkRequestDetails.setData(this.#parsedTrace, networkRequest, maybeTarget);
+    this.#relatedInsightChips.activeEvent = networkRequest;
+    if (this.#eventToRelatedInsightsMap) {
+      this.#relatedInsightChips.eventToRelatedInsightsMap = this.#eventToRelatedInsightsMap;
+    }
+
+    this.setContent(this.#networkRequestDetails);
+  }
+
+  async #setSelectionForTraceEvent(event: Trace.Types.Events.Event): Promise<void> {
+    if (!this.#parsedTrace) {
+      return;
+    }
+
+    this.#relatedInsightChips.activeEvent = event;
+    if (this.#eventToRelatedInsightsMap) {
+      this.#relatedInsightChips.eventToRelatedInsightsMap = this.#eventToRelatedInsightsMap;
+    }
+
+    // Special case: if Insights experiment is enabled (on by default in M131)
+    // and the user selects a layout shift or a layout shift cluster, render
+    // the new layout shift details component.
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_INSIGHTS) &&
+        (Trace.Types.Events.isSyntheticLayoutShift(event) || Trace.Types.Events.isSyntheticLayoutShiftCluster(event))) {
+      const isFreshRecording = Boolean(this.#parsedTrace && Tracker.instance().recordingIsFresh(this.#parsedTrace));
+      this.#layoutShiftDetails.setData(event, this.#traceInsightsSets, this.#parsedTrace, isFreshRecording);
+      this.setContent(this.#layoutShiftDetails);
+      return;
+    }
+
+    // Otherwise, build the generic trace event details UI.
+    const traceEventDetails =
+        await TimelineUIUtils.buildTraceEventDetails(this.#parsedTrace, event, this.detailsLinkifier, true);
+    this.appendDetailsTabsForTraceEventAndShowDetails(event, traceEventDetails);
+  }
+
   async setSelection(selection: TimelineSelection|null): Promise<void> {
     if (!this.#parsedTrace) {
       // You can't make a selection if we have no trace data.
@@ -319,32 +361,9 @@ export class TimelineDetailsView extends UI.Widget.VBox {
     }
     const selectionObject = this.selection.object;
     if (TimelineSelection.isSyntheticNetworkRequestDetailsEventSelection(selectionObject)) {
-      const networkRequest = selectionObject;
-      const maybeTarget = targetForEvent(this.#parsedTrace, networkRequest);
-      await this.#networkRequestDetails.setData(this.#parsedTrace, networkRequest, maybeTarget);
-      this.#relatedInsightChips.activeEvent = networkRequest;
-      if (this.#eventToRelatedInsightsMap) {
-        this.#relatedInsightChips.eventToRelatedInsightsMap = this.#eventToRelatedInsightsMap;
-      }
-
-      this.setContent(this.#networkRequestDetails);
+      await this.#setSelectionForNetworkEvent(selectionObject);
     } else if (TimelineSelection.isTraceEventSelection(selectionObject)) {
-      const event = selectionObject;
-      this.#relatedInsightChips.activeEvent = event;
-      if (this.#eventToRelatedInsightsMap) {
-        this.#relatedInsightChips.eventToRelatedInsightsMap = this.#eventToRelatedInsightsMap;
-      }
-      if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_INSIGHTS) &&
-          (Trace.Types.Events.isSyntheticLayoutShift(event) ||
-           Trace.Types.Events.isSyntheticLayoutShiftCluster(event))) {
-        const isFreshRecording = Boolean(this.#parsedTrace && Tracker.instance().recordingIsFresh(this.#parsedTrace));
-        this.#layoutShiftDetails.setData(event, this.#traceInsightsSets, this.#parsedTrace, isFreshRecording);
-        this.setContent(this.#layoutShiftDetails);
-      } else {
-        const traceEventDetails =
-            await TimelineUIUtils.buildTraceEventDetails(this.#parsedTrace, event, this.detailsLinkifier, true);
-        this.appendDetailsTabsForTraceEventAndShowDetails(event, traceEventDetails);
-      }
+      await this.#setSelectionForTraceEvent(selectionObject);
     } else if (TimelineSelection.isLegacyTimelineFrame(selectionObject)) {
       this.#setSelectionForTimelineFrame(selectionObject);
     } else if (TimelineSelection.isRangeSelection(selectionObject)) {