test: Added bridge user action benchmark

[davibroc]

Description

This PR adds the following benchmark tests for Bridge to help catch performance issues introduced by new features.

• Loading the Bridge page
• Loading the asset-picker when there are more than 30 tokens available for a network
• Searching for a token in the asset-picker

Gating for these tests has not been added yet. We plan to do this later after a system to gate test has been added to the framework

Related issues

Fixes:

Manual testing steps

1. yarn && yarn build:test
2. yarn tsx test/e2e/user-actions-benchmark.ts

Screenshots/Recordings

Before

After

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
• I've completed the PR template to the best of my ability
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[metamaskbot]

✨ Files requiring CODEOWNER review ✨

🔄 @MetaMask/swaps-engineers

• test/e2e/page-objects/pages/bridge/quote-page.ts
• test/e2e/tests/bridge/bridge-test-utils.ts

[metamaskbot]

Builds ready [dd29654]

• builds: chrome, firefox
• builds (flask): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• bundle size: Bundle Size Stats
• user-actions-benchmark: User Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all CircleCI artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7, 8
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • content-script: 0
  • offscreen: 0

UI Startup Metrics (1240 ± 73 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1240	1093	1536	73	1264	1419
			load	1070	956	1250	68	1094	1232
			domContentLoaded	1063	924	1243	68	1086	1219
			domInteractive	19	13	65	9	18	40
			firstPaint	733	144	1239	421	1080	1209
			backgroundConnect	7	4	33	4	8	14
			firstReactRender	22	16	148	14	22	34
			getState	12	5	32	7	16	27
			initialActions	0	0	1	0	0	1
			loadScripts	822	684	995	65	848	966
			setupStore	7	5	14	2	8	12
	Webpack	Home	uiStartup	2073	1650	2466	174	2178	2318
			load	1578	1271	2079	141	1682	1781
			domContentLoaded	1568	1262	1872	132	1676	1777
			domInteractive	16	11	58	10	13	46
			firstPaint	179	82	350	55	202	320
			backgroundConnect	28	9	333	44	24	58
			firstReactRender	209	54	501	126	342	361
			getState	10	3	38	6	12	21
			initialActions	3	1	5	1	3	4
			loadScripts	1563	1261	1849	132	1674	1766
			setupStore	20	6	291	39	18	28
Firefox	Browserify	Home	uiStartup	1343	1154	1960	113	1411	1543
			load	1196	1013	1780	110	1265	1341
			domContentLoaded	1196	1013	1779	110	1265	1341
			domInteractive	107	35	351	44	114	194
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	20	12	120	12	20	30
			firstReactRender	22	19	37	3	22	27
			getState	10	4	176	24	8	14
			initialActions	0	0	1	0	0	1
			loadScripts	1177	999	1762	111	1249	1324
			setupStore	6	3	28	4	6	9
	Webpack	Home	uiStartup	1512	1338	1974	121	1585	1730
			load	1291	1119	1710	109	1361	1480
			domContentLoaded	1290	1119	1709	109	1360	1480
			domInteractive	84	31	313	38	94	151
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	21	15	82	8	22	33
			firstReactRender	35	29	49	4	37	45
			getState	9	5	43	7	9	28
			initialActions	0	0	2	1	1	1
			loadScripts	1272	1106	1692	109	1342	1460
			setupStore	8	5	33	5	8	23

[metamaskbot]

Builds ready [f62b3b6]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• bundle size: Bundle Size Stats
• user-actions-benchmark: User Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all CircleCI artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7, 8
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • content-script: 0
  • offscreen: 0

UI Startup Metrics (1213 ± 63 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1213	1100	1387	63	1247	1344
			load	1054	960	1218	59	1080	1173
			domContentLoaded	1048	954	1213	58	1074	1166
			domInteractive	18	13	103	11	16	28
			firstPaint	717	132	1226	406	1061	1163
			backgroundConnect	7	4	14	1	7	9
			firstReactRender	22	16	55	7	22	39
			getState	12	4	32	7	18	27
			initialActions	0	0	1	0	0	1
			loadScripts	810	719	961	58	833	927
			setupStore	8	5	19	3	7	13
	Webpack	Home	uiStartup	2194	1753	2765	158	2293	2417
			load	1692	1365	2164	126	1785	1868
			domContentLoaded	1685	1361	2138	125	1778	1864
			domInteractive	17	11	63	11	14	46
			firstPaint	183	65	597	79	242	304
			backgroundConnect	30	9	373	37	30	65
			firstReactRender	226	56	421	120	344	365
			getState	15	4	209	21	16	33
			initialActions	3	1	8	1	4	5
			loadScripts	1680	1360	2114	125	1774	1863
			setupStore	20	6	183	18	23	33
Firefox	Browserify	Home	uiStartup	1414	1218	1824	117	1467	1692
			load	1253	1071	1658	113	1317	1486
			domContentLoaded	1252	1071	1658	113	1316	1486
			domInteractive	107	37	255	32	120	156
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	25	14	147	17	25	63
			firstReactRender	23	19	59	4	24	28
			getState	8	4	38	5	8	24
			initialActions	0	0	1	0	0	1
			loadScripts	1229	1057	1632	114	1298	1469
			setupStore	8	4	166	16	6	10
	Webpack	Home	uiStartup	1511	1325	1863	118	1581	1766
			load	1294	1127	1584	99	1355	1489
			domContentLoaded	1293	1126	1583	99	1355	1489
			domInteractive	83	53	254	27	88	137
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	23	16	49	7	23	44
			firstReactRender	35	29	51	4	37	44
			getState	9	4	30	5	9	23
			initialActions	0	0	6	1	1	1
			loadScripts	1274	1111	1563	100	1335	1473
			setupStore	9	5	52	6	8	19

Bundle size diffs

• background: 0 Bytes (0%)
• ui: 0 Bytes (0%)
• common: 0 Bytes (0%)