Add tests for metadata trace events

This enables several features in DevTools Perf Panel since these include
data about the renderer and browser processes, the main thread, the
viewport and several others.

Bug: 1383130
Change-Id: I0c51d6841c166adc5e7b7add8aa2de928728456a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4042589
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Commit-Queue: Andres Olivares <andoli@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1074590}

third_party/blink/web_tests/http/tests/inspector-protocol/tracing/metadata-expected.txt

@@ -0,0 +1,123 @@
+Tests the data of metadata trace events
+Recording started
+Tracing complete
+Got TracingStartedInBrowser event:
+Object: {
+	args: {
+		data: {
+			frameTreeNodeId: number
+			frames: [
+				{
+					frame: string
+					name: string
+					processId: number
+					url: string
+				}
+			]
+			persistentIds: boolean
+		}
+	}
+	cat: string
+	name: string
+	ph: string
+	pid: number
+	s: string
+	tid: number
+	ts: number
+}
+Got Browser process name event:
+Object: {
+	args: {
+		name: string
+	}
+	cat: string
+	name: string
+	ph: string
+	pid: number
+	tid: number
+	ts: number
+}
+Got GPU process name event:
+Object: {
+}
+Got Renderer process name event:
+Object: {
+	args: {
+		name: string
+	}
+	cat: string
+	name: string
+	ph: string
+	pid: number
+	tid: number
+	ts: number
+}
+Got GPU thread name event:
+Object: {
+	args: {
+		name: string
+	}
+	cat: string
+	name: string
+	ph: string
+	pid: number
+	tid: number
+	ts: number
+}
+Got Browser thread name event:
+Object: {
+	args: {
+		name: string
+	}
+	cat: string
+	name: string
+	ph: string
+	pid: number
+	tid: number
+	ts: number
+}
+Got navigarionStart event:
+Object: {
+	args: {
+		data: {
+			documentLoaderURL: string
+			isLoadingMainFrame: boolean
+			isOutermostMainFrame: boolean
+			navigationId: string
+		}
+		frame: string
+	}
+	cat: string
+	name: string
+	ph: string
+	pid: number
+	s: string
+	tid: number
+	ts: number
+}
+Got Viewport event:
+Object: {
+	args: {
+		data: {
+			viewport_rect: [
+				number,
+				number,
+				number,
+				number,
+				number,
+				number,
+				number,
+				number,
+			]
+		}
+	}
+	cat: string
+	name: string
+	ph: string
+	pid: number
+	s: string
+	tid: number
+	ts: number
+}
+Found 3 unique frames
+

third_party/blink/web_tests/http/tests/inspector-protocol/tracing/metadata.js

@@ -0,0 +1,88 @@
+(async function(testRunner) {
+  const {session, dp} =
+      await testRunner.startBlank('Tests the data of metadata trace events');
+
+  const TracingHelper =
+      await testRunner.loadScript('../resources/tracing-test.js');
+  const tracingHelper = new TracingHelper(testRunner, session);
+
+  await tracingHelper.startTracing(
+      '__metadata,loading,blink.user_timing,disabled-by-default-devtools.timeline,devtools.timeline');
+
+  await dp.Page.navigate({
+    url:
+        'http://127.0.0.1:8000/inspector-protocol/resources/iframe-navigation.html'
+  });
+
+  // Wait for trace events.
+  await session.evaluateAsync(`
+    new Promise((res) => {
+      (new PerformanceObserver(res)).observe({entryTypes: ['largest-contentful-paint']});
+    })`);
+
+  await tracingHelper.stopTracing(
+      /__metadata|loading|blink.user_timing|(disabled-by-default-)?devtools.timeline/);
+
+  // Processes and threads
+  const processNames = tracingHelper.findEvents('process_name', 'M');
+  const threadNames = tracingHelper.findEvents('thread_name', 'M');
+
+  const browserProcessName =
+      processNames.find(event => event.args.name === 'Browser');
+  const gpuProcessName = processNames.find(event => event.args.name === 'Gpu');
+  const rendererProcessNames =
+      processNames.filter(event => event.args.name === 'Renderer');
+
+  const gpuThread = threadNames.find(event => event.args.name === 'CrGpuMain');
+  const browserThread =
+      threadNames.find(event => event.args.name === 'CrBrowserMain');
+
+  // Frames in trace
+  const tracingStartedInBrowser =
+      tracingHelper.findEvent('TracingStartedInBrowser', 'I');
+  const frameCommittedInBrowserEvents =
+      tracingHelper.findEvents('FrameCommittedInBrowser', 'I');
+  const commitLoadEvents = tracingHelper.findEvents('CommitLoad', 'X');
+
+  // Other
+  const navigarionStart = tracingHelper.findEvent('navigationStart', 'R');
+  const viewPort =
+      tracingHelper.findEvent('PaintTimingVisualizer::Viewport', 'I');
+
+  // Extract all frames in target from trace.
+  const initialFrames =
+      tracingStartedInBrowser.args.data.frames.map(frame => frame.frame);
+  const commitedFrames = [
+    ...frameCommittedInBrowserEvents, ...commitLoadEvents
+  ].map(event => event.args.data.frame);
+  const allFramesInTrace = new Set([...initialFrames, ...commitedFrames]);
+
+
+  testRunner.log('Got TracingStartedInBrowser event:');
+  tracingHelper.logEventShape(tracingStartedInBrowser);
+
+  testRunner.log('Got Browser process name event:');
+  tracingHelper.logEventShape(browserProcessName);
+
+  testRunner.log('Got GPU process name event:');
+  tracingHelper.logEventShape(gpuProcessName);
+
+  testRunner.log('Got Renderer process name event:');
+  tracingHelper.logEventShape(rendererProcessNames[0]);
+
+  testRunner.log('Got GPU thread name event:');
+  tracingHelper.logEventShape(gpuThread);
+
+  testRunner.log('Got Browser thread name event:');
+  tracingHelper.logEventShape(browserThread);
+
+  testRunner.log('Got navigarionStart event:');
+  tracingHelper.logEventShape(navigarionStart);
+
+  testRunner.log('Got Viewport event:');
+  tracingHelper.logEventShape(viewPort);
+
+  testRunner.log(`Found ${allFramesInTrace.size} unique frames`);
+
+  testRunner.completeTest();
+});

third_party/blink/web_tests/http/tests/inspector-protocol/tracing/page-load-metrics.js

@@ -18,7 +18,7 @@
     })`);
 
   await tracingHelper.stopTracing(
-      /loading|(disabled-by-default)?devtools.timeline/);
+      /loading|(disabled-by-default-)?devtools.timeline/);
 
   // Web vitals
   const firstContentfulPaint =