Performance: improve focus metric (diff between focus start and type …

…start)
WordPress · Feb 23, 2023 · b848d1d · b848d1d
1 parent 8c68626
commit b848d1d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 10 deletions.
diff --git a/packages/e2e-tests/specs/performance/post-editor.test.js b/packages/e2e-tests/specs/performance/post-editor.test.js
@@ -235,22 +235,24 @@ describe( 'Post Editor Performance', () => {
 	it( 'Selecting blocks', async () => {
 		await load1000Paragraphs();
 		const paragraphs = await canvas().$$( '.wp-block' );
-		await page.tracing.start( {
-			path: traceFile,
-			screenshots: false,
-			categories: [ 'devtools.timeline' ],
-		} );
 		await paragraphs[ 0 ].click();
 		for ( let j = 1; j <= 10; j++ ) {
 			// Wait for the browser to be idle before starting the monitoring.
 			// eslint-disable-next-line no-restricted-syntax
 			await page.waitForTimeout( 1000 );
+			await page.tracing.start( {
+				path: traceFile,
+				screenshots: false,
+				categories: [ 'devtools.timeline' ],
+			} );
 			await paragraphs[ j ].click();
+			await page.keyboard.type( 'a' );
+			await page.tracing.stop();
+			traceResults = JSON.parse( readFile( traceFile ) );
+			const [ focusEvents, keyDownEvents ] =
+				getSelectionEventDurations( traceResults );
+			results.focus.push( keyDownEvents[ 0 ] - focusEvents[ 0 ] );
 		}
-		await page.tracing.stop();
-		traceResults = JSON.parse( readFile( traceFile ) );
-		const [ focusEvents ] = getSelectionEventDurations( traceResults );
-		results.focus = focusEvents;
 	} );
 
 	it( 'Opening persistent list view', async () => {

diff --git a/packages/e2e-tests/specs/performance/utils.js b/packages/e2e-tests/specs/performance/utils.js
@@ -59,6 +59,12 @@ function getEventDurationsForType( trace, filterFunction ) {
 		.map( ( item ) => item.dur / 1000 );
 }
 
+function getEventStartForType( trace, filterFunction ) {
+	return trace.traceEvents
+		.filter( filterFunction )
+		.map( ( item ) => item.ts / 1000 );
+}
+
 export function getTypingEventDurations( trace ) {
 	return [
 		getEventDurationsForType( trace, isKeyDownEvent ),
@@ -68,7 +74,10 @@ export function getTypingEventDurations( trace ) {
 }
 
 export function getSelectionEventDurations( trace ) {
-	return [ getEventDurationsForType( trace, isFocusEvent ) ];
+	return [
+		getEventStartForType( trace, isFocusEvent ),
+		getEventStartForType( trace, isKeyDownEvent ),
+	];
 }
 
 export function getClickEventDurations( trace ) {