dillon1000/react

Commit

[Devtools] Added component search to the Profiler's commit view (#36944)

## Summary

Added the search by component name functionality as requested for
https://github.com/react/react/issues/32995#issuecomment-4786856255


Adds a component search to the Profiler's commit view, so you can find a
specific component within the currently selected commit (Flamegraph &
Ranked charts). Previously the only search lived in the Components panel
and covered the live tree, not profiling data.

Behavior is inspired from Chrome DevTools' in-page find:

- Cmd/Ctrl+F opens a collapsible search box floating over the chart (no
always-on input).
- Shows an N | M match count; ↑/↓ buttons and Enter / Shift+Enter step
through matches (with wraparound).
- Each match is selected via the existing selectFiber, so it highlights,
zooms, updates the sidebar, syncs to the Components tab, and scrolls
into view.
- Esc or ✕ closes it.
- Search is scoped to the selected commit only — never the whole trace.
Switching commits re-scopes the count.

## How did you test this change?



https://github.com/user-attachments/assets/ab2396e1-f329-4213-b053-9b3d08988c6b
Browse files
Changed paths15 files
First-parent comparison
M packages/react-devtools-inline/__tests__/__e2e__/profiler.test.js ModifiedM packages/react-devtools-shared/src/devtools/views/ButtonIcon.js ModifiedM packages/react-devtools-shared/src/devtools/views/Icon.js ModifiedM packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.css ModifiedM packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js ModifiedM packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js ModifiedM packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.js ModifiedM packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js ModifiedM packages/react-devtools-shared/src/devtools/views/Profiler/CommitRankedListItem.js ModifiedM packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.css ModifiedM packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js ModifiedM packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js ModifiedA packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerSearchInput.js AddedM packages/react-devtools-shared/src/devtools/views/SearchInput.css ModifiedM packages/react-devtools-shared/src/devtools/views/SearchInput.js Modified
Patch

Files changed

Rendering syntax-highlighted changes…