Refactor browser per widget to extension

What does this MR do and why?

This MR refactors the browser performance widget to utilize MR Widget Extensions

Closes #338279 (closed)

Screenshots or screen recordings

Top is the new refactor, bottom is the previous implementation

How to set up and validate locally

Enable refactor_mr_widgets_extensions feature flag in rails console

Feature.enable(:refactor_mr_widgets_extensions)

Follow the docs https://docs.gitlab.com/ee/user/project/merge_requests/browser_performance_testing.html#browser-performance-testing

OR

Clone the following project and make sure to have a runner registered and available

Create a merge request that changes the browser_performance.json, you can use the following changes

Click to expand

[{"subject":"/","metrics":[{"name":"Total Score","value":84,"desiredSize":"larger"},{"name":"Requests","value":8,"desiredSize":"smaller"},{"name":"Speed Index","value":796,"desiredSize":"smaller"},{"name":"First Contentful Paint","value":878,"desiredSize":"smaller"},{"name":"Largest Contentful Paint","value":878,"desiredSize":"smaller"},{"name":"Total Blocking Time","value":4,"desiredSize":"smaller"},{"name":"Transfer Size (KB)","value":"63.2","desiredSize":"smaller"}]}]

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.