dillon1000/react
Commit
Browse files [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
Changed paths15 files
First-parent comparisonpackages/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 ModifiedPatch
Files changed
Rendering syntax-highlighted changes…