Migrate CPU Profile to screenshot test

R=paulirish@chromium.org

Bug: 413413595
Change-Id: I5ce2ab2ecea1eb98234af6c67b4eb5b7915fba59
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6596918
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Paul Irish <paulirish@chromium.org>
Reviewed-by: Paul Irish <paulirish@chromium.org>

Author: jackfranklin

front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -590,6 +590,9 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
 
     if (this.parsedTrace) {
       this.compatibilityTracksAppender = this.compatibilityTracksAppenderInstance();
+      // Note for readers: NodeJS CpuProfiles are purposefully NOT generic.
+      // We wrap them in a `TracingStartedInPage` event, which causes them to
+      // be treated like "real" Chrome traces. This is by design!
       if (this.parsedTrace.Meta.traceIsGeneric) {
         this.#processGenericTrace();
       } else {

front_end/testing/TraceHelpers.ts

@@ -77,8 +77,12 @@ export async function getMainFlameChartWithTracks(
 export interface RenderFlameChartOptions {
   /**
    * The trace file to import. You must include `.json.gz` at the end of the file name.
+   * Alternatively, you can provide the actual file. This is useful only if you
+   * are providing a mocked file; generally you should prefer to pass the file
+   * name so that the TraceLoader can take care of loading and caching the
+   * trace.
    */
-  traceFile: string;
+  traceFile: string|Trace.Handlers.Types.ParsedTrace;
   /**
    * Filter the tracks that will be rendered by their name. The name here is
    * the user visible name that is drawn onto the flame chart.
@@ -131,7 +135,14 @@ export async function renderFlameChartIntoDOM(context: Mocha.Context|null, optio
     debuggerWorkspaceBinding,
   });
 
-  const {parsedTrace} = await TraceLoader.traceEngine(context, options.traceFile);
+  let parsedTrace: Trace.Handlers.Types.ParsedTrace|null = null;
+
+  if (typeof options.traceFile === 'string') {
+    parsedTrace = (await TraceLoader.traceEngine(context, options.traceFile)).parsedTrace;
+  } else {
+    parsedTrace = options.traceFile;
+  }
+
   if (options.preloadScreenshots) {
     await Timeline.Utils.ImageCache.preload(parsedTrace.Screenshots.screenshots ?? []);
   }

front_end/ui/legacy/components/perf_ui/FlameChart.test.ts

@@ -14,6 +14,7 @@ import {
   renderFlameChartIntoDOM,
   renderFlameChartWithFakeProvider,
 } from '../../../../testing/TraceHelpers.js';
+import {TraceLoader} from '../../../../testing/TraceLoader.js';
 
 import * as PerfUI from './perf_ui.js';
 
@@ -1007,6 +1008,26 @@ describeWithEnvironment('FlameChart', () => {
   });
 
   describe('rendering tracks', () => {
+    it('can render a Node CPU Profile', async function() {
+      // We have to do some work to render this trace, as we take the raw CPU
+      // Profile and wrap it in our code that maps it to a "real" trace. This is what happens for real if a user imports a CPU Profile.
+      const rawCPUProfile = await TraceLoader.rawCPUProfile(this, 'node-fibonacci-website.cpuprofile.gz');
+      const rawTrace = Trace.Helpers.SamplesIntegrator.SamplesIntegrator.createFakeTraceFromCpuProfile(
+          rawCPUProfile, Trace.Types.Events.ThreadID(1));
+      const {parsedTrace} = await TraceLoader.executeTraceEngineOnFileContents(rawTrace);
+
+      await renderFlameChartIntoDOM(this, {
+        traceFile: parsedTrace,
+        filterTracks(trackName) {
+          return trackName.startsWith('Main');
+        },
+        expandTracks() {
+          return true;
+        },
+      });
+      await assertScreenshot('timeline/main_thread_node_cpu_profile.png');
+    });
+
     it('renders the main thread correctly', async function() {
       await renderFlameChartIntoDOM(this, {
         traceFile: 'one-second-interaction.json.gz',

test/interactions/goldens/linux/performance/cpu-profile-node.png

@@ -16,19 +16,6 @@ describe('Performance panel', function() {
     this.timeout(20_000);
   }
 
-  itScreenshot('loads a cpuprofile and renders it in non-node mode', async () => {
-    await loadTimelineDocExample('performance_panel/basic.html?cpuprofile=node-fibonacci-website');
-    const panel = await waitFor('body');
-    await assertElementScreenshotUnchanged(panel, 'performance/cpu-profile.png');
-  });
-
-  itScreenshot(
-      'loads a cpuprofile and renders it in node mode with default track source set to new engine', async () => {
-        await loadTimelineDocExample('performance_panel/basic.html?cpuprofile=node-fibonacci-website&isNode=true');
-        const panel = await waitFor('body');
-        await assertElementScreenshotUnchanged(panel, 'performance/cpu-profile-node.png');
-      });
-
   // Flaking.
   itScreenshot.skip(
       '[crbug.com/373792008]: supports the network track being expanded and then clicked', async function() {