Add option to record and preview CPU profile of the app

[kmagiera]

This PR enables the CPU profiles to be captured via the Radon IDE Panel.

1. We're adding new "Start CPU Profile" button to the tools menu that starts recording CPU profile
2. We use CDP's Profile category that is supported by hermes to record the profile
3. When profiling is ongoing we show a button in the top section of the panel that indicates the profiling process and that also allows for the profiling to be stopped
4. When profiling session is ended, we open a save dialog for .cpuprofile file and open it in the editor
5. For the ready profile, we're annotating the profile data with extra information that the visualizer extension supports. This extra data is only documented via data types in this repo: https://github.com/microsoft/vscode-js-profile-visualizer – we link to specific data structures defined in that repo in the code that produces this format.

Some additional changes that this PR introduces:

1. We're restructuring the tools menu and introduce a section division into "utilities" and "tool panels". We move all the panel checkboxes into the latter section.
2. This PR changes the styling of the top bar allowing the URL bar to shrink when there's not enough space. Previously the URL bar had a min-width set which turns out to not be necessary. Instead, we're making the top bar to align using space-between and allow for the bar to shrink when there are more items than the bar could fit.
3. When flame chart extension isn't installed, we show a dialog recommending that extension and also a button that jumps to a search with that extension. When user opens .cpuprofile file it has a flame chart icon that can be only used when that extension is installed. So the extension isn't essential but without it you cannot use the flame chart preview of the profile.
4. We're changing the recording button to pulsate which better indicates the fact of an ongoing recording process (either video or profile recording). With video recording we show timer so it doesn't help as much there, but with profiling we only show "Profiling CPU" message on the button.
5. We're unifying the styles of the recording button such that it uses the extension theme instead. This change applies to both video and profiling record buttons.

New structure of the tools menu:

Active profiling button in different themes:

Save dialog:

Profile preview:

How Has This Been Tested:

1. Open any test app
2. Start profiling
3. Click on things in the app
4. Use "stop profile" button from the tools menu, but also use the new blue button that appears in the top bar to end profiling session
5. Test both scenarios when you dismiss the profile save dialog and when you save the profile
6. After saving, the .cpuprofile should open
7. Install / uninstall flame chart visualizer extension and when it isn't installed you should see a message recommending to install it
8. When using profile, make sure that methods that belong to the app have proper links in the profile (source-mapping works)

[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	Mar 3, 2025 9:04pm