Inspector v2: Side pane collapsing and undocking #17341
Conversation
…o windows without react re-render
|
Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s). |
|
Building or testing the sandbox has failed. If the tests failed, results can be found here: |
|
Building or testing the playground has failed. If the tests failed, results can be found here: |
|
Snapshot stored with reference name: Test environment: To test a playground add it to the URL, for example: https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/17341/merge/index.html#WGZLGJ#4600 Links to test babylon tools with this snapshot: https://playground.babylonjs.com/?snapshot=refs/pull/17341/merge To test the snapshot in the playground with a playground ID add it after the snapshot query string: https://playground.babylonjs.com/?snapshot=refs/pull/17341/merge#BCU1XR#0 |
|
WebGL2 visualization test reporter: |
|
Visualization tests for WebGPU |
|
You have made possible changes to the playground. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/17341/merge/ The snapshot playground with the CDN snapshot (only when available): Note that neither Babylon scenes nor textures are uploaded to the snapshot directory, so some playgrounds won't work correctly. |
|
You have changed file(s) that made possible changes to the sandbox. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/SANDBOX/refs/pull/17341/merge/ |
|
Devhost visualization test reporter: |
|
WebGL2 visualization test reporter: |
|
Visualization tests for WebGPU |
1 similar comment
|
Visualization tests for WebGPU |
|
You have made possible changes to the playground. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/17341/merge/ The snapshot playground with the CDN snapshot (only when available): Note that neither Babylon scenes nor textures are uploaded to the snapshot directory, so some playgrounds won't work correctly. |
|
You have changed file(s) that made possible changes to the sandbox. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/SANDBOX/refs/pull/17341/merge/ |
|
Devhost visualization test reporter: |
|
WebGL2 visualization test reporter: |
|
Visualization tests for WebGPU |
There was a problem hiding this comment.
Pull Request Overview
This PR implements collapsible and undockable side panes for Inspector v2. Users can now collapse side panes with expand buttons overlaying the canvas corners, or undock panes into separate child windows with proper Fluent UI theming. Child windows automatically close when the main window or Inspector closes, and redocking restores panes to the main window. To improve state persistence, panes remain mounted during tab switches, and the Scene Explorer preserves entity selection when remounting.
Key Changes:
- Added undocking functionality for side panes with automatic child window cleanup
- Implemented side pane collapse/expand with overlay buttons
- Changed pane rendering to keep all tabs mounted (hidden) to preserve state during tab switches
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| packages/dev/inspector-v2/src/services/shellService.tsx | Core implementation of collapsible/undockable side panes with child window management and portal-based rendering |
| packages/dev/inspector-v2/src/components/scene/sceneExplorer.tsx | Enhanced entity selection to work properly when Scene Explorer remounts after undocking |
| packages/dev/inspector-v2/src/services/themeSelectorService.tsx | Removed vertical margin from theme button for consistent toolbar spacing |
| packages/dev/inspector-v2/src/components/gizmoToolbar.tsx | Updated button margin to match new toolbar spacing pattern |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
packages/dev/inspector-v2/src/components/scene/sceneExplorer.tsx
Outdated
Show resolved
Hide resolved
|
You have changed file(s) that made possible changes to the sandbox. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/SANDBOX/refs/pull/17341/merge/ |
|
You have made possible changes to the playground. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/17341/merge/ The snapshot playground with the CDN snapshot (only when available): Note that neither Babylon scenes nor textures are uploaded to the snapshot directory, so some playgrounds won't work correctly. |
|
Devhost visualization test reporter: |
|
WebGL2 visualization test reporter: |
|
Visualization tests for WebGPU |
3 participants
With this PR the whole "side panes" (all tabs, top and bottom, plus toolbars) can be:
Styling in the child windows is easy to manage. No need to copy styles or anything like Inspector v1, it just requires a little bit of Fluent setup in the child window, and then only the used styles will be injected into that window.
In the Inspector v2 implementation, when a child window is closed, it is just re-docked in the main window. Also, child windows will automatically close if Inspector itself is closed, or if the main window is closed.
Unfortunately, the approach I initially used with portals to keep the panes mounted all the time (so we don't lose their state when redocking) does not work with child windows. Simply re-parenting a raw html element into a child window basically bypasses all the fluent theming and also seems to break other things. For this reason, I rolled that part of the change back, which means when you redock a side pane, it is unmounted/remounted and the state is lost. However, I did two things to improve this: