Skip to content

Conversation

jsdf
Copy link
Contributor

@jsdf jsdf commented Jun 12, 2025

Summary

This PR adds a 'Layout' selector to the devtools shell main example, as well as a resizable split pane, allowing more realistic testing of how the devtools behaves when used in a vertical or horizontal layout and at different sizes (e.g. when resizing the Chrome Dev Tools pane).

How did you test this change?

split.pane.mov

@hoxyq hoxyq self-requested a review June 12, 2025 16:02
@jsdf jsdf marked this pull request as ready for review June 12, 2025 17:28
Copy link
Contributor

@hoxyq hoxyq left a comment

Choose a reason for hiding this comment

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

Amazing, thank you!

@hoxyq hoxyq merged commit ed023cf into facebook:main Jun 13, 2025
250 checks passed
hoxyq pushed a commit that referenced this pull request Jun 13, 2025
## Summary

The devtools Components tab's component tree view currently has a
behavior where the indentation of each level of the tree scales based on
the available width of the view. If the view is narrow or component
names are long, all indentation showing the hierarchy of the tree scales
down with the view width until there is no indentation at all. This
makes it impossible to see the nesting of the tree, making the tree view
much less useful. With long component names and deep hierarchies this
issue is particularly egregious. For comparison, the Chrome Dev Tools
Elements panel uses a fixed indentation size, so it doesn't suffer from
this issue.

This PR adds a minimum pixel value for the indentation width, so that
even when the window is narrow some indentation will still be visible,
maintaining the visual representation of the component tree hierarchy.

Alternatively, we could match the behavior of the Chrome Dev Tools and
just use a constant indentation width.

## How did you test this change?

- tests (yarn test-build-devtools)
- tested in browser:
- added an alternate left/right split pane layout to
react-devtools-shell to test with
(#33516)
- tested resizing the tree view in different layout modes

### before this change:



https://github.com/user-attachments/assets/470991f1-dc05-473f-a2cb-4f7333f6bae4

with a long component name:



https://github.com/user-attachments/assets/1568fc64-c7d7-4659-bfb1-9bfc9592fb9d





### after this change:




https://github.com/user-attachments/assets/f60bd7fc-97f6-4680-9656-f0db3d155411

with a long component name:


https://github.com/user-attachments/assets/6ac3f58c-42ea-4c5a-9a52-c3b397f37b45
hoxyq added a commit that referenced this pull request Jun 27, 2025
Full list of changes:

* devtools: emit performance entries only when profiling
([hoxyq](https://github.com/hoxyq) in
[#33652](#33652))
* Get Server Component Function Location for Parent Stacks using Child's
Owner Stack ([sebmarkbage](https://github.com/sebmarkbage) in
[#33629](#33629))
* Added minimum indent size to Component Tree
([jsdf](https://github.com/jsdf) in
[#33517](#33517))
* [devtools-shell] layout options for testing
([jsdf](https://github.com/jsdf) in
[#33516](#33516))
* Remove feature flag enableRenderableContext
([kassens](https://github.com/kassens) in
[#33505](#33505))
* refactor[devtools]: update css for settings and support css variables
in shadow dom scnenario ([hoxyq](https://github.com/hoxyq) in
[#33487](#33487))
* [mcp] Add MCP tool to print out the component tree of the currently
open React App ([jorge-cab](https://github.com/jorge-cab) in
[#33305](#33305))
* [scripts] Switch back to flow parser for prettier
([rickhanlonii](https://github.com/rickhanlonii) in
[#33414](#33414))
* upgrade json5 ([rickhanlonii](https://github.com/rickhanlonii) in
[#33358](#33358))
* Get source location from structured callsites in prepareStackTrace
([sebmarkbage](https://github.com/sebmarkbage) in
[#33143](#33143))
* Clean up enableSiblingPrerendering flag
([jackpope](https://github.com/jackpope) in
[#32319](#32319))
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