Return data from trace loading directly

Ref: flaky - "run large cpu profile benchmark"

This simplifies the logic of down consumers to not need a separate
listener. While this most likely won't solve the issue it will
provide better debugging next time it happens as we should get a
proper line that things failed.

Currently the first listener errors first and we lose the
data for the second one.

Bug: none
Change-Id: I02be3975c210bd1d1d8922897adb28714be01308
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7642744
Auto-Submit: Nikolay Vitkov <nvitkov@chromium.org>
Reviewed-by: Alina Varkki <alinavarkki@chromium.org>
Commit-Queue: Alina Varkki <alinavarkki@chromium.org>
Commit-Queue: Nikolay Vitkov <nvitkov@chromium.org>

Author: Lightning00Blade

front_end/panels/timeline/BUILD.gn

@@ -173,8 +173,7 @@ devtools_entrypoint("bundle") {
 
   visibility = [
     ":*",
-    "../../../test/interactions/panels/performance/timeline/*",
-    "../../../test/perf/*",
+    "../../../test/e2e/*",
     "../../entrypoints/*",
     "../../models/trace/handlers:unittests",
     "../../panels/ai_assistance/*",

test/e2e/helpers/BUILD.gn

@@ -37,6 +37,7 @@ node_ts_library("helpers") {
   deps = [
     "../../../extension-api",
     "../../../front_end/panels/recorder:bundle",
+    "../../../front_end/panels/timeline:bundle",
     "../../shared",
     "../shared",
   ]

test/e2e/helpers/performance-helpers.ts

@@ -6,6 +6,7 @@ import * as fs from 'node:fs';
 import * as path from 'node:path';
 import type * as puppeteer from 'puppeteer-core';
 
+import type * as Timeline from '../../../front_end/panels/timeline/timeline.js';
 import {GEN_DIR} from '../../conductor/paths.js';
 import type {DevToolsPage} from '../shared/frontend-helper.js';
 import type {InspectedPage} from '../shared/target-helper.js';
@@ -242,23 +243,24 @@ export async function loadTraceAndWaitToFullyRender(
     devToolsPage: DevToolsPage,
     initiateTraceLoadCb: () => Promise<unknown>,
     checkHasActiveTrace = false,
-) {
+    ): Promise<number> {
   const panelElement = await devToolsPage.waitFor('.widget.panel.timeline');
-  await Promise.all([
+  const [, traceLoadedData] = await Promise.all([
     initiateTraceLoadCb(),
     panelElement.evaluate(
         (el, checkPanelState) => {
-          return new Promise<void>(async res => {
+          return new Promise<number>(async res => {
             // Set-up the event listener first to prevent further
             // race conditions.
-            el.addEventListener('traceload', () => {
-              res();
+            el.addEventListener('traceload', e => {
+              const ev = e as Timeline.BenchmarkEvents.TraceLoadEvent;
+              res(ev.duration);
             }, {once: true});
             if (checkPanelState) {
               // @ts-expect-error This is loaded inside the new DevTools page.
               const TimelineModule = await import('./panels/timeline/timeline.js');
               if (TimelineModule.TimelinePanel.TimelinePanel.instance().hasActiveTrace()) {
-                res();
+                res(-1);
               }
             }
           });
@@ -273,6 +275,8 @@ export async function loadTraceAndWaitToFullyRender(
   await devToolsPage.timeout(200);
   await devToolsPage.raf();
   await devToolsPage.raf();
+
+  return traceLoadedData;
 }
 
 export async function reloadAndRecord(devToolsPage: DevToolsPage) {
@@ -404,5 +408,5 @@ export async function uploadTraceFile(devToolsPage: DevToolsPage, tracePath: str
     throw new Error(`Test trace file not found: ${testTrace}`);
   }
 
-  await loadTraceAndWaitToFullyRender(devToolsPage, () => uploadProfileHandle.uploadFile(testTrace));
+  return await loadTraceAndWaitToFullyRender(devToolsPage, () => uploadProfileHandle.uploadFile(testTrace));
 }

test/perf/panels/performance/BUILD.gn

@@ -8,7 +8,6 @@ ts_e2e_library("performance") {
   sources = [ "trace-load.test.ts" ]
 
   deps = [
-    "../../../../front_end/panels/timeline:bundle",
     "../../../e2e/conductor:implementation",
     "../../../e2e/helpers",
     "../../report",

test/perf/panels/performance/trace-load.test.ts

@@ -2,31 +2,18 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as Timeline from '../../../../front_end/panels/timeline/timeline.js';
 import {
   navigateToPerformanceTab,
   uploadTraceFile,
 } from '../../../e2e/helpers/performance-helpers.js';
 import type {DevToolsPage} from '../../../e2e/shared/frontend-helper.js';
 import type {InspectedPage} from '../../../e2e/shared/target-helper.js';
 import {measurements} from '../../report/report.js';
-
 async function timeFixture(fixture: string, devToolsPage: DevToolsPage, inspectedPage: InspectedPage): Promise<number> {
   await navigateToPerformanceTab(undefined, devToolsPage, inspectedPage);
-  const panelElement = await devToolsPage.waitFor('.widget.panel.timeline');
-  const [result] = await Promise.all([
-    panelElement.evaluate(el => {
-      return new Promise<number>(res => {
-        el.addEventListener('traceload', e => {
-          const ev = e as Timeline.BenchmarkEvents.TraceLoadEvent;
-          res(ev.duration);
-        }, {once: true});
-      });
-    }),
-    uploadTraceFile(devToolsPage, `front_end/panels/timeline/fixtures/traces/${fixture}.gz`),
-  ]);
+  await devToolsPage.waitFor('.widget.panel.timeline');
 
-  return result;
+  return await uploadTraceFile(devToolsPage, `front_end/panels/timeline/fixtures/traces/${fixture}.gz`);
 }
 
 describe('Performance panel trace load performance', () => {