Add react devtools profiler support

[kmagiera]

This PR adds a new tool – React Profiler

React Profiler integration allows controlling (starting/stopping) of the profile via React Devtools and also to open the profiles in a standalone editor panel.

rprofiler.mp4

Below is an overview of the changes made in this PR:

• We use devtools-hedless package to access react devtools' profiler store to control the profiling
• When profiling is finished, we use the export method exposed via devtools-headless package to dump the profile into a file and save under '.reactprofile' extension
• We're implementing a new editor provider that can open '.reactprofile' files. The editor uses the devtools-inline package to present the UI and uses the profile import method from devtools-headless package to process the profile data.
• We're adding buttons to the tools menu to initiate the profiling and use the CPU profiling style indicator when the profiler is running.
• We're updating vite configuration – for some reason after adding a new input, vite in release mode started splitting CSS into more chunks. Before it was just main chunk and theme chunk. Instead of adding more dependencies I decided it will be easier to force it to not do chunking at all and use single style.css for all the webviews.
• We are adding additional options to the webview CSP because devtools use JS's eval and also boot up a worker thread using blob URL.

How Has This Been Tested:

1. Open IDE panel and wait for app to load
2. Click "Start React Profiler"
3. Observe a profiler indicator appear (similar as with the CPU profiling)
4. Do something with the app
5. Click stop
6. The profiler will stop (indicator is gone) and a profile will be automatically opened in a new editor tab
7. Run everything in release mode (DEV=false in weviewContentGenerator) – check other panels like network to make sure vite changes didn't mess something up

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
radon-ide	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 25, 2025 10:45am

[filip131311]

I believe that the react profiler has an option to be displayed in light mode, if it is possible to set it in the hedless package we use, I think it would look much better for users that use light mode in their vscode

[kmagiera]

forgot about that, just made an update to account for the theme