[DevTools] Fix WhatChanged scrolling out of view in profiler sidebar โ€ฆ
GitHub Commits - Example: React

[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.