Add tests for frame lifecycle trace events

Tests for trace event data related to frame lifecycle analysis in DevTools Perf panel. This includes Screenshot trace events. Bug: 1383130 Change-Id: I0857c791cfa6b678c04cd0829cbd1c5215dbf07e Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4030386 Reviewed-by: Simon Zünd <szuend@chromium.org> Commit-Queue: Andres Olivares <andoli@chromium.org> Cr-Commit-Position: refs/heads/main@{#1074072}
chromium · Nov 21, 2022 · 8a086eb · 8a086eb
1 parent 097d106
commit 8a086eb
Show file tree

Hide file tree

Showing 3 changed files with 241 additions and 1 deletion.
diff --git a/third_party/blink/web_tests/http/tests/inspector-protocol/resources/web-vitals.html b/third_party/blink/web_tests/http/tests/inspector-protocol/resources/web-vitals.html
@@ -2,7 +2,6 @@
 <html>
   <body>
     <script>
-      (new PerformanceObserver(console.log)).observe({ entryTypes: ["layout-shift"] });
       window.setTimeout(() => {
         const img = document.querySelector('img');
         img.setAttribute('src', './big-image.png');

diff --git a/..._party/blink/web_tests/http/tests/inspector-protocol/tracing/frame-lifecycle-expected.txt b/..._party/blink/web_tests/http/tests/inspector-protocol/tracing/frame-lifecycle-expected.txt
@@ -0,0 +1,147 @@
+Tests the data of page load and web vitals trace events
+Recording started
+Tracing complete
+Got SetLayerTreeId event:
+Object: {
+	args: {
+		data: {
+			frame: string
+			layerTreeId: number
+		}
+	}
+	cat: string
+	name: string
+	ph: string
+	pid: number
+	s: string
+	tid: number
+	ts: number
+	tts: number
+}
+Got BeginFrame event:
+Array: [
+	{
+		args: {
+			frameSeqId: number
+			layerTreeId: number
+		}
+		cat: string
+		name: string
+		ph: string
+		pid: number
+		s: string
+		tid: number
+		ts: number
+	}
+]
+Got DrawFrame event:
+Object: {
+	args: {
+		frameSeqId: number
+		layerTreeId: number
+	}
+	cat: string
+	name: string
+	ph: string
+	pid: number
+	s: string
+	tid: number
+	ts: number
+	tts: number
+}
+Got ActivateLayerTree event:
+Object: {
+	args: {
+		frameId: number
+		layerTreeId: number
+	}
+	cat: string
+	name: string
+	ph: string
+	pid: number
+	s: string
+	tid: number
+	ts: number
+	tts: number
+}
+Got NeedsBeginFrameChanged event:
+Object: {
+	args: {
+		data: {
+			needsBeginFrame: number
+		}
+		layerTreeId: number
+	}
+	cat: string
+	name: string
+	ph: string
+	pid: number
+	s: string
+	tid: number
+	ts: number
+	tts: number
+}
+Got BeginMainThreadFrame event:
+Object: {
+	args: {
+		data: {
+			frameId: number
+		}
+		layerTreeId: number
+	}
+	cat: string
+	name: string
+	ph: string
+	pid: number
+	s: string
+	tid: number
+	ts: number
+	tts: number
+}
+Got Paint event:
+Object: {
+	args: {
+		data: {
+			clip: [
+				number,
+				number,
+				number,
+				number,
+				number,
+				number,
+				number,
+				number,
+			]
+			frame: string
+			layerId: number
+			nodeId: number
+		}
+	}
+	cat: string
+	dur: number
+	name: string
+	ph: string
+	pid: number
+	tdur: number
+	tid: number
+	ts: number
+	tts: number
+}
+Got CompositeLayers event:
+Object: {
+	args: {
+		frameSeqId: number
+		layerTreeId: number
+	}
+	cat: string
+	dur: number
+	name: string
+	ph: string
+	pid: number
+	tdur: number
+	tid: number
+	ts: number
+	tts: number
+}
+All screenshots have image data.
+
diff --git a/third_party/blink/web_tests/http/tests/inspector-protocol/tracing/frame-lifecycle.js b/third_party/blink/web_tests/http/tests/inspector-protocol/tracing/frame-lifecycle.js
@@ -0,0 +1,94 @@
+(async function(testRunner) {
+  const {session, dp} = await testRunner.startBlank(
+      'Tests the data of page load and web vitals trace events');
+
+  const TracingHelper =
+      await testRunner.loadScript('../resources/tracing-test.js');
+  const tracingHelper = new TracingHelper(testRunner, session);
+  await tracingHelper.startTracing(
+      'disabled-by-default-devtools.timeline,disabled-by-default-devtools.timeline.frame,devtools.timeline,loading');
+  await dp.Page.navigate({
+    url: 'http://127.0.0.1:8000/inspector-protocol/resources/web-vitals.html'
+  });
+
+  // Wait for trace events.
+  const largestContentfulPaintPromise = await session.evaluateAsync(`
+      (function() {
+        let resolvePromiseCallback = () => ({});
+        const observerCallBack = entryList => {
+          const entries = entryList.getEntries();
+          for (const entry of entries) {
+            if (entry.element.tagName === 'IMG' && entry.element.getAttribute('src', './big-image.png')) {
+              resolvePromiseCallback();
+            }
+          }
+        };
+        const observer = new PerformanceObserver(observerCallBack);
+        const largestContentfulPaintPromise = new Promise((res) => {resolvePromiseCallback = res})
+        observer.observe({entryTypes: ['largest-contentful-paint']});
+        return largestContentfulPaintPromise;
+      })()
+    `);
+  await largestContentfulPaintPromise;
+  await tracingHelper.stopTracing(
+      /loading|(disabled-by-default)?devtools.timeline(.frame)?|rail/);
+
+  const drawFrame = tracingHelper.findEvents('DrawFrame', 'I').at(-1);
+
+  function hasExpectedFrameSeqId(event) {
+    return event.args.frameSeqId === drawFrame.args.frameSeqId;
+  }
+  function hasExpectedLayerTreeId(event) {
+    return event.args.layerTreeId === drawFrame.args.layerTreeId;
+  }
+
+  // Given a DrawFrame event, find the events marking the other steps
+  // of that frame's life cycle.
+
+  const beginFrame =
+      tracingHelper.findEvents('BeginFrame', 'I', hasExpectedFrameSeqId);
+  const compositeLayers =
+      tracingHelper.findEvent('CompositeLayers', 'X', hasExpectedFrameSeqId);
+  const activateLayerTree =
+      tracingHelper.findEvent('ActivateLayerTree', 'I', hasExpectedLayerTreeId);
+  const needsBeginFrameChanged = tracingHelper.findEvent(
+      'NeedsBeginFrameChanged', 'I', hasExpectedLayerTreeId);
+  const beginMainThreadFrame = tracingHelper.findEvent(
+      'BeginMainThreadFrame', 'I', hasExpectedLayerTreeId);
+
+  // Other trace events in the frame domain that do not necessarily
+  // belong to the life cycle of the DrawFrame event used above.
+ const setLayerTreeId = tracingHelper.findEvent('SetLayerTreeId', 'I');
+  const paint = tracingHelper.findEvent('Paint', 'X');
+  const screenshots = tracingHelper.findEvents('Screenshot', 'O');
+
+  testRunner.log('Got SetLayerTreeId event:');
+  tracingHelper.logEventShape(setLayerTreeId)
+
+  testRunner.log('Got BeginFrame event:');
+  tracingHelper.logEventShape(beginFrame)
+
+  testRunner.log('Got DrawFrame event:');
+  tracingHelper.logEventShape(drawFrame)
+
+  testRunner.log('Got ActivateLayerTree event:');
+  tracingHelper.logEventShape(activateLayerTree)
+
+  testRunner.log('Got NeedsBeginFrameChanged event:');
+  tracingHelper.logEventShape(needsBeginFrameChanged)
+
+  testRunner.log('Got BeginMainThreadFrame event:');
+  tracingHelper.logEventShape(beginMainThreadFrame)
+
+  testRunner.log('Got Paint event:');
+  tracingHelper.logEventShape(paint)
+
+  testRunner.log('Got CompositeLayers event:');
+  tracingHelper.logEventShape(compositeLayers);
+
+  if (screenshots && screenshots.every(s => s.args.snapshot)) {
+    testRunner.log('All screenshots have image data.');
+  }
+
+  testRunner.completeTest();
+})