[DevTools] Fix WhatChanged scrolling out of view in profiler sidebar โฆ
Summary
Previously, WhatChanged and InspectedElementBadges were rendered inside the same scrollable Content div as the commit list. When a component had many render timestamps, scrolling down to pick one caused the "what changed" context to scroll out of view, requiring the user to scroll back up to see it.
While the profiler already exposes render details via hover tooltips on fibers, those are transient and pointer-dependent. This change introduces a sticky header section at the top of the Content div that holds the current commit summary, badges, and WhatChanged. The section is collapsible (click or Enter/Space) so users can reclaim vertical space for the commit list when needed. The commit list now sits below the sticky header as a sibling, so it scrolls independently while the summary remains always visible.
Closes #36525
Current Behavior
https://github.com/user-attachments/assets/05f2889a-4e0d-4464-965a-2821c63c2d30
Proposed UI
Apologies on this one. I had to upload it on YouTube since the video is quite big.
How did you test this change?
Manual Testing
| Case | Screenshot |
|---|---|
| Expanded simple | <img width="1512" height="948" alt="expanded-default" src="https://github.com/user-attachments/assets/00d3bf11-ef98-463e-96ec-c918e58147ff" /> |
| Collapsed Simple | <img width="1512" height="948" alt="collapsed-default" src="https://github.com/user-attachments/assets/75d0ae79-c96f-4c55-9dc1-538ba65037b8" /> |
| Focused using tab navigation while expanded | <img width="1512" height="948" alt="expanded-tab-focused-simple" src="https://github.com/user-attachments/assets/c4098f2d-1c43-4b04-ab69-1e646e79bc8e" /> |
| Focused using tab navigation while collapsed | <img width="1512" height="948" alt="collapsed-tab-focused-simple" src="https://github.com/user-attachments/assets/75840812-b700-44dd-b82d-51d5a867f501" /> |
| Long render info (expanded) | <img width="1512" height="948" alt="long-desc-expanded" src="https://github.com/user-attachments/assets/53c4d776-55d5-4bb0-818d-a70e032e57d7" /> |
| Long render info (collapsed) | <img width="1512" height="948" alt="long-desc-collapsed" src="https://github.com/user-attachments/assets/45eb7f6f-fcc6-4f7b-88e7-e3ece9e59d19" /> |
Hover (expanded)
https://github.com/user-attachments/assets/d04668d3-1e0e-44c7-af7e-087d246ec07d
Hover (collapsed)
https://github.com/user-attachments/assets/86638b8d-60c2-4cfa-b357-c1104e76767e
Why this matters
This is more than a visual polish issue:
- The Profiler is fundamentally a context-driven debugging tool
- Losing the "why did this render?" explanation during navigation interrupts analysis flow
- The issue becomes progressively worse on large applications or heavily interactive surfaces
- Hover tooltips are not an adequate replacement because they are transient and pointer-dependent
- Keyboard users are disproportionately affected due to repeated navigation and scrolling
In practice, this increases cognitive load during performance debugging and makes long profiling sessions unnecessarily cumbersome.
Comments
No comments yet. Start the discussion.