RPP: add test for details view showing a frame

I want to start refactoring some of the `TimelineSelection` logic, but
realised we are missing tests for a few places where it is used. This CL
adds a test to ensure screenshots are shown when the user selects a
frame, and moves the rendering logic into a standalone function to make
it a bit easier to read.

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

Author: jackfranklin

front_end/panels/timeline/TimelineDetailsView.test.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import type * 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';
 
@@ -41,4 +42,25 @@ describeWithEnvironment('TimelineDetailsView', function() {
     // NetworkRequestDetails and RelatedInsightsChips nodes.
     assert.strictEqual(detailsContentElement.childNodes.length, 2);
   });
+
+  it('displays the details for a frame correctly', 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, selectedEvents: null, traceInsightsSets: null, eventToRelatedInsightsMap: null});
+
+    const frame = parsedTrace.Frames.frames.at(0);
+    assert.isOk(frame);
+    const selection = Timeline.TimelineSelection.TimelineSelection.fromFrame(frame);
+    await detailsView.setSelection(selection);
+    await doubleRaf();  // to let the image be fetched + rendered.
+    const detailsContentElement = detailsView.getDetailsContentElementForTest();
+    const frameImg = detailsContentElement.querySelector('.timeline-filmstrip-preview img');
+    assert.instanceOf(frameImg, HTMLImageElement);
+    assert.isDefined(frameImg.src);
+
+    const duration = detailsContentElement.querySelector<HTMLElement>('[data-row-title="Duration"]');
+    assert.isOk(duration);
+    assert.strictEqual(duration.innerText, 'Duration37.85 ms (at 109.82 ms)');
+  });
 });

front_end/panels/timeline/TimelineDetailsView.ts

@@ -290,6 +290,19 @@ export class TimelineDetailsView extends UI.Widget.VBox {
     return frameTimeMilliSeconds - frame.endTime < 10 ? filmStripFrame : null;
   }
 
+  #setSelectionForTimelineFrame(frame: Trace.Types.Events.LegacyTimelineFrame): void {
+    const matchedFilmStripFrame = this.#getFilmStripFrame(frame);
+    this.setContent(TimelineUIUtils.generateDetailsContentForFrame(frame, this.#filmStrip, matchedFilmStripFrame));
+    const target = SDK.TargetManager.TargetManager.instance().rootTarget();
+    if (frame.layerTree && target) {
+      const layerTreeForFrame = new TimelineModel.TracingLayerTree.TracingFrameLayerTree(target, frame.layerTree);
+      const layersView = this.layersView();
+      layersView.showLayerTree(layerTreeForFrame);
+      if (!this.tabbedPane.hasTab(Tab.LayerViewer)) {
+        this.appendTab(Tab.LayerViewer, i18nString(UIStrings.layers), layersView);
+      }
+    }
+  }
   async setSelection(selection: TimelineSelection|null): Promise<void> {
     if (!this.#parsedTrace) {
       // You can't make a selection if we have no trace data.
@@ -333,18 +346,7 @@ export class TimelineDetailsView extends UI.Widget.VBox {
         this.appendDetailsTabsForTraceEventAndShowDetails(event, traceEventDetails);
       }
     } else if (TimelineSelection.isLegacyTimelineFrame(selectionObject)) {
-      const frame = selectionObject;
-      const matchedFilmStripFrame = this.#getFilmStripFrame(frame);
-      this.setContent(TimelineUIUtils.generateDetailsContentForFrame(frame, this.#filmStrip, matchedFilmStripFrame));
-      const target = SDK.TargetManager.TargetManager.instance().rootTarget();
-      if (frame.layerTree && target) {
-        const layerTreeForFrame = new TimelineModel.TracingLayerTree.TracingFrameLayerTree(target, frame.layerTree);
-        const layersView = this.layersView();
-        layersView.showLayerTree(layerTreeForFrame);
-        if (!this.tabbedPane.hasTab(Tab.LayerViewer)) {
-          this.appendTab(Tab.LayerViewer, i18nString(UIStrings.layers), layersView);
-        }
-      }
+      this.#setSelectionForTimelineFrame(selectionObject);
     } else if (TimelineSelection.isRangeSelection(selectionObject)) {
       this.updateSelectedRangeStats(this.selection.startTime, this.selection.endTime);
     }