[DevTools] Scheduling Profiler umbrella task

[bvaughn]

The Scheduling Profiler is currently only accessible at react-scheduling-profiler.vercel.app and very few people know about it. Furthermore, the User Timing API marks that power this profiler are only enabled in the experimental release channel, which almost no one uses. We believe this profiler is an important part of understanding React’s concurrent scheduling and app performance.

Initial release

• Enable scheduling profiler flag for react-dom profiling builds #21867: Enable the enableSchedulingProfiler flag for all profiling builds (not just in the experimental release channel).
• [DRAFT] Import scheduling profiler into DevTools Profiler #21897: Embed the scheduling Profiler into the Chrome build of the React DevTools extension. (The profiler currently only supports User Timing marks extracted from Chrome’s profiling format.) Add this profiler as a new tab within the ⚛️ Profiler panel.
• [DRAFT] Import scheduling profiler into DevTools Profiler #21897: Design a splash page with instructions on how to record and import data.
• [DRAFT] Import scheduling profiler into DevTools Profiler #21897: Hide the "copy component stack" context menu item if the data doesn't contain a component stack.
• [DevTools] Add native events to the scheduling profiler #21947: Expose events (e.g. mouse click events) in the timeline as well for context
• Scheduling profiler: Improve native events UI #21966: Stack native events vertically so they don't overlap.
• Scheduling profiler: Improve native events UI #21966: Highlight native event handlers that schedule sync/blocking render work.
• Sceduling profiler: Added custom view cursors #21970: Custom cursor system for canvas to improve UX
• Hide commit snapshot selector when Scheduling Profiler tab is active.
• Maybe allow sections to be toggled/collapsed (e.g. native flame graph) and skip rendering?
• Scheduling Profiler: Misc UX and performance improvements #22043: Store imported profile data and zoom/scroll state in new context (above scheduling profiler) so you don't lose it when you tab between profilers
• Updated @reach packages to fix unmount bug #22075: Fix @reach/portal bug unmount bug that gets thrown if you upload an invalid profile to the Scheduling profiler and then a valid profile afterward. ("Uncaught Error: NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.")

Follow up work

• Create a discussion thread on the React 18 Working Group about it and gather usability feedback.
• Implement some sort of feature detection to hide this panel for react-dom builds that don't have enableSchedulingProfiler enabled? (Maybe only show it for v18+) Probably not a good idea. You might want to import a profile on a non-React site.
• Follow ups from DevTools: Scheduling profiler: Add vertical scroll bar #22005
  • Scroll state should be moved up into context
  • Time axis marks should remain fixed and not scroll off screen
  • Can we avoid having to explicitly call surface.displayIfNeeded() after an interaction (see DevTools: Scheduling profiler: Add vertical scroll bar #22005 (comment))
• Try coloring component rendering to match suspense colors for components that suspended. (May require updating the React profiler marks)
• Revisit the concept of batching. It's currently defined as one or more renders followed by a potential commit (unless the render is explicitly cancelled). I think this doesn't properly take into account interleaved work (e.g. offscreen/idle pre-rendering). Batch ID should probably also take lane(s) into consideration.

[bvaughn]

Note some prerequisite was done in #19892

[stale]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!