[DevTools] Support collapsing the entire component tree

[samwinslow]

Similar to #16463, I find myself overwhelmed when trying to navigate the React component tree because everything is expanded by default.

• IMO there should be a simple way to recursively collapse everything and view the tree "top-down" rather than "bottom-up," just as VSCode's [-] button allows you to do.

• It would also be sensible to add vertical lines below each component's expand/collapse handle, because it becomes hard to see which elements are siblings in the tree when it's nested e.g. 15 layers deep.

[bvaughn]

IMO there should be a simple way to recursively collapse everything and view the tree "top-down" rather than "bottom-up," just as VSCode's [-] button allows you to do.

There is. Just click the arrow to the left of the root node, or use the left arrow key.

toggle.mp4

It would also be sensible to add vertical lines below each component's expand/collapse handle, because it becomes hard to see which elements are siblings in the tree when it's nested e.g. 15 layers deep.

I tried this during the design exploration phase, but didn't end up leaving it in because it looked bad when indentation was small:
https://twitter.com/brian_d_vaughn/status/1134862518420090886

Instead, we highlight the subtree:
https://twitter.com/brian_d_vaughn/status/1134834828459687937

[samwinslow]

@bvaughn I see. The indentation lines are an interesting tradeoff. 👍

Re: collapsing, while that toggle is useful, that's separate from what I had in mind by recursively collapsing everything. In your example screencap, I would expect a [-] button (or some similar component) to close all the children as well. That means when you re-open InspectableElements, I shouldn't see any of the children of Contexts, and so on down the tree.

The utility of this is that I can open just InspectableElements > Contexts and see each direct child of Contexts without all its children, which may be dozens of levels deep.

VSCode supports both of these collapsing options, the caret/triangle to represent the existing functionality we have here, and the [-] button to perform a recursive collapse.

[bvaughn]

I think we just have different expectations.

The Component tab is more similar to the browser's Elements tab, which functions the same way as DevTools does. (It does not recursively collapse).

[samwinslow]

The Component tab is more similar to the browser's Elements tab, which functions the same way as DevTools does. (It does not recursively collapse).

Right, it doesn't recursively collapse by default, but that functionality is available in parallel to the typical collapse behavior via a separate UI element. It's a bit harder to find, but it's super useful once you discover it.

Thank you for the quick responses, by the way!

[stale]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!