Skip to content

Conversation

@kanikaa88
Copy link

Summary

Implements component name search functionality in the Profiler trace view as requested in #32995.

Changes

  • Added search state management to ProfilerContext
  • Created ProfilerSearchInput component (similar to ComponentSearchInput)
  • Integrated search input into Profiler toolbar
  • Search only considers components from the selected commit

Features

  • ✅ Cmd+f / Ctrl+f keyboard shortcut (handled by SearchInput component)
  • ✅ Text and regex search support (e.g., /^Button/)
  • ✅ Result count display (e.g., "1 | 5")
  • ✅ Navigation between matches (Enter/Shift+Enter or arrow buttons)
  • ✅ Auto-selects first matching result
  • ✅ Clears when commit changes
  • ✅ Only searches the selected commit (not the whole trace)
  • ✅ Works in both Flamegraph and Ranked views

Implementation Details

  • Follows the same pattern as Components panel search
  • Search input appears conditionally when:
    • Legacy profiler tabs (flame-chart/ranked-chart) are selected
    • Commits are recorded
    • A commit is selected
  • Search filters components recursively through the commit tree
  • Uses existing createRegExp utility for pattern matching

Testing

  • ✅ Linting passed
  • ✅ Flow type checking passed (dom-node renderer)
  • ✅ Tested locally in DevTools shell
  • ✅ Follows existing codebase patterns

Fixes #32995

Implements search functionality for components in Profiler trace as requested in facebook#32995.

Features:
- Adds search input that appears when a commit is selected
- Supports text and regex search (e.g., /^Button/)
- Shows result count and allows navigation between matches
- Only searches components in the selected commit
- Follows same pattern as Components panel search
- Clears search when commit changes
- Cmd+f / Ctrl+f keyboard shortcut support

The search input appears in the Profiler toolbar between the root selector
and settings button, only when a commit is selected in flame-chart or
ranked-chart views.
@meta-cla meta-cla bot added the CLA Signed label Jan 13, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

DevTools: Allow searching by component name in Profiler trace

1 participant