Skip to content

Conversation

@eps1lon
Copy link
Collaborator

@eps1lon eps1lon commented Oct 19, 2025

Stacked on #34929

Initial idea was to just filter on the frontend but this is hard to do with the reliance on node weights for virtualization. Removing the part below the slice is trivial since that's just collapsing but the part above is harder.

This implements the slices with a backend filter and frontend collapsing. During reconciliation, we keep track on the stack whether we're in the focused Activity or not.

On the frontend, we collapse the Activities at the lower boundary. That way you can see the slice in the Components tab but the Suspense tab shows the full loading sequence of the segment.

Will add the Activity pane to the Components tab in a follow-up. Double clicking an Activity already switches to the slice view. The Activity will not own any Components anyway.

CleanShot.2025-11-07.at.14.17.53.mp4

@meta-cla meta-cla bot added the CLA Signed label Oct 19, 2025
@eps1lon eps1lon force-pushed the sebbie/10-17-_devtools_activity_slices branch from 83ee7f9 to 4c7ddf7 Compare October 19, 2025 11:15
@github-actions github-actions bot added the React Core Team Opened by a member of the React Core Team label Oct 19, 2025
▾ <Layout>
<Activity name="/blog">
[suspense-root] rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}
<Suspense name="Unknown" rects={[{x:1,y:2,width:4,height:1}, {x:1,y:2,width:13,height:1}]}>
Copy link
Collaborator Author

@eps1lon eps1lon Oct 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Name heuristic breaks once the Owner is filtered. Need to think about how to fix this. Only problematic when the Activity and Suspense share the same owner.

@eps1lon eps1lon force-pushed the sebbie/10-17-_devtools_activity_slices branch from 0ab7239 to fe34bef Compare October 19, 2025 11:52
@eps1lon eps1lon changed the title [DevTools] Activity slices in Suspense tab [DevTools] Apply Activity slice filter when double clicking Activity Oct 20, 2025
@eps1lon eps1lon force-pushed the sebbie/10-17-_devtools_activity_slices branch 2 times, most recently from 1e3e641 to ac9430f Compare October 20, 2025 00:21
@eps1lon eps1lon force-pushed the sebbie/10-17-_devtools_activity_slices branch from ac9430f to f8d9db4 Compare October 20, 2025 21:00
@eps1lon eps1lon requested a review from sebmarkbage October 20, 2025 21:03
@eps1lon eps1lon marked this pull request as ready for review October 20, 2025 21:04
@eps1lon eps1lon force-pushed the sebbie/10-17-_devtools_activity_slices branch 2 times, most recently from abc787f to 85f1f2c Compare November 7, 2025 13:32
Copy link
Collaborator

@sebmarkbage sebmarkbage left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is landable. A few things I'd like to see:

  • Fix the bug where you can't dismiss the ActivitySlice component (with multiple roots?)
  • Hide content of other roots than the one the focused ID is in. Not the root itself.
  • Rename everything that refers to Activity here, to just be general focusedFiber, focusedID, FocusedSlice, etc. Also allow double click on any built-in (none of which are owners). Except ActivityList since that one is specifically for help surfacing Activity boundaries.

@sebmarkbage
Copy link
Collaborator

sebmarkbage commented Nov 7, 2025

Ofc additional follow ups include:

  • Making the ActivityList pretty and actually show up by default but only if there's anything inside it. Also, in the Components tab.
  • Selecting the "root" in the Suspense Tab should actually select the current Activity (or any instance?) if we're scoped to one.
  • All the places currently named "Initial Paint" should also be renamed to "Transition" in this mode.
  • Making a discoverable "focus" button in the side-panel so that you can focus any Component. The ActivityList is just for discoverability and not a required UI.

@eps1lon eps1lon force-pushed the sebbie/10-17-_devtools_activity_slices branch from f66641e to 9b496af Compare November 8, 2025 10:59
@eps1lon eps1lon force-pushed the sebbie/10-17-_devtools_activity_slices branch from 72b94c4 to 32164cb Compare November 8, 2025 16:46
@eps1lon eps1lon force-pushed the sebbie/10-17-_devtools_activity_slices branch from 32164cb to e86dd12 Compare November 8, 2025 16:52
@eps1lon eps1lon merged commit 5a9921b into facebook:main Nov 8, 2025
240 checks passed
@eps1lon eps1lon deleted the sebbie/10-17-_devtools_activity_slices branch November 8, 2025 17:10
github-actions bot pushed a commit to code/lib-react that referenced this pull request Nov 9, 2025
github-actions bot pushed a commit to code/lib-react that referenced this pull request Nov 9, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed React Core Team Opened by a member of the React Core Team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants