dillon1000/react
Commit
Browse files feat: static Components panel layout (#33696)
## Summary Follow-up to https://github.com/facebook/react/pull/33517. With https://github.com/facebook/react/pull/33517, we now preserve at least some minimal indent. This actually doesn't work with the current setup, because we don't allow the container to overflow, so basically deeply nested elements will go off the screen. With these changes, we completely change the approach: - The layout will be static and it will have a constant indentation that will always be preserved. - The container will allow overflows, so users will be able to scroll horizontally and vertically. - We will implement automatic horizontal and vertical scrolls, if selected element is not in a viewport. - New: added vertical delimiter that can be used for simpler visual navigation. ## Demo ### Current public release https://github.com/user-attachments/assets/58645d42-c6b8-408b-b76f-95fb272f2e1e ### With https://github.com/facebook/react/pull/33517 https://github.com/user-attachments/assets/845285c8-5a01-4739-bcd7-ffc089e771bf ### This PR https://github.com/user-attachments/assets/72086b84-8d84-4626-94b3-e22e114e028e
Changed paths8 files
First-parent comparisonpackages/react-devtools-shared/src/devtools/store.js ModifiedM packages/react-devtools-shared/src/devtools/views/Components/Components.js ModifiedM packages/react-devtools-shared/src/devtools/views/Components/Element.css ModifiedM packages/react-devtools-shared/src/devtools/views/Components/Element.js ModifiedD packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.css DeletedD packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js DeletedM packages/react-devtools-shared/src/devtools/views/Components/Tree.css ModifiedM packages/react-devtools-shared/src/devtools/views/Components/Tree.js ModifiedPatch
Files changed
Rendering syntax-highlighted changes…