[DevTools] Inlcude Activity list in Components tab

[everettbu]

Mirror of facebook/react#35165
Original author: eps1lon

---

Stacked on react/react#35164

Uses the same layout as the Suspense tab with the exception of not having a toggle for the inspected element pane.

Mostly because I don't know where to put the toggle icon for the horizontal layout. There's no footer in the tree like in the Suspense tab. Maybe we can think of one later that isn't too hard to implement with the list virtualisation.

[greptile-apps]

Greptile Overview

Greptile Summary

Integrated the ActivityList component into the Components tab, mirroring the layout from the Suspense tab. The implementation adds a collapsible left panel showing named Activity boundaries with resizable panels and keyboard navigation support.

• Renamed state management from "resize" to "layout" with expanded state tracking for activity list visibility and dimensions
• Added ToggleActivityList button component to show/hide the activity list panel
• Implemented separate resize handlers for tree and activity list panels with proper boundary checks
• Enhanced ActivityList.js to support an "All" option with improved keyboard navigation (Home/End/Arrow keys with wrapping)
• Updated CSS with flexbox layouts and container queries for responsive behavior
• Activity list is automatically hidden when no named Activity boundaries are present

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The changes are well-structured, maintain consistent patterns with the existing Suspense tab implementation, and include proper conditional rendering and boundary checks. The code follows React DevTools conventions and doesn't introduce any apparent bugs or security issues.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
packages/react-devtools-shared/src/devtools/views/Components/Components.js	4/5	Integrated ActivityList into Components tab with resize functionality, renamed state management from resize to layout, added toggle button
packages/react-devtools-shared/src/devtools/views/SuspenseTab/ActivityList.js	5/5	Enhanced keyboard navigation to support "All" option and improved arrow key handling with proper wrapping behavior

[greptile-apps]

_{5 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}