Skip to content

[DevTools] feat: display subtree for Activity and dim in hidden mode#36094

Merged
hoxyq merged 1 commit intomainfrom
devtools/activity-hidden
Mar 23, 2026
Merged

[DevTools] feat: display subtree for Activity and dim in hidden mode#36094
hoxyq merged 1 commit intomainfrom
devtools/activity-hidden

Conversation

@hoxyq
Copy link
Contributor

@hoxyq hoxyq commented Mar 18, 2026

With this change, Components panel will display subtree of the Activity. When it is in hidden mode, the subtree will be dimmed.

Added Jest tests and a sandbox case to react-devtools-shell.

Demo:

Screen.Recording.2026-03-18.at.20.02.48.mov

@hoxyq hoxyq requested a review from eps1lon March 18, 2026 20:18
@meta-cla meta-cla bot added the CLA Signed label Mar 18, 2026
@hoxyq hoxyq force-pushed the devtools/activity-hidden branch from e52b290 to eb0b2d1 Compare March 18, 2026 20:35
@eps1lon
Copy link
Collaborator

eps1lon commented Mar 20, 2026

I fear that this will make the tree way too busy. Can we collapse hidden subtrees by default?

@hoxyq
Copy link
Contributor Author

hoxyq commented Mar 20, 2026

I fear that this will make the tree way too busy. Can we collapse hidden subtrees by default?

The tree is already too big on larger modern applications. Yes, I think there is a way to auto-collapse these, will implement that, great idea.

@hoxyq hoxyq force-pushed the devtools/activity-hidden branch from eb0b2d1 to a765a61 Compare March 20, 2026 14:07
@hoxyq
Copy link
Contributor Author

hoxyq commented Mar 20, 2026

@eps1lon Updated!

Screen.Recording.2026-03-20.at.14.05.58.mov

@hoxyq hoxyq force-pushed the devtools/activity-hidden branch from a765a61 to 52a4ae5 Compare March 20, 2026 14:09
Copy link
Collaborator

@eps1lon eps1lon left a comment

Choose a reason for hiding this comment

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

Looks great!

Comment on lines +5302 to +5305
// Detect Activity hidden/visible mode changes.
if (
nextFiber.tag === ActivityComponent &&
fiberInstance.kind === FIBER_INSTANCE
Copy link
Collaborator

Choose a reason for hiding this comment

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

Should this also check that the previous Fiber was an Activity?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Nice catch, updated

Comment on lines +5315 to +5316
const prevHidden = prevOffscreen.memoizedState !== null;
const nextHidden = nextOffscreen.memoizedState !== null;
Copy link
Collaborator

Choose a reason for hiding this comment

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

Can we use isHiddenOffscreen here?

@hoxyq hoxyq force-pushed the devtools/activity-hidden branch from 52a4ae5 to a0194b3 Compare March 23, 2026 14:22
@hoxyq hoxyq force-pushed the devtools/activity-hidden branch from a0194b3 to 0b4b19d Compare March 23, 2026 14:23
@hoxyq hoxyq merged commit ed69815 into main Mar 23, 2026
239 checks passed
@hoxyq hoxyq deleted the devtools/activity-hidden branch March 23, 2026 14:29
@ericadalton124-stack
Copy link

ericadalton124-stack commented Mar 23, 2026 via email

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.

3 participants