mirror of
https://github.com/zebrajr/react.git
synced 2026-01-15 12:15:22 +00:00
12bc60f509
## 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 (https://github.com/facebook/react/pull/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