Inspector v2: Improved extension details #17389
Conversation
|
Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s). |
There was a problem hiding this comment.
Pull Request Overview
This PR enhances the Extensions List UI by adding richer metadata display including author/contributor information, web resources (homepage, repository, bugs), version/license details, and improved visual design with cards and badges. It also implements dynamic importing for the extension list service to improve initial load performance.
Key Changes
- Enhanced extension metadata type with author, contributors, version, license, homepage, repository, and bugs fields
- Redesigned the extensions UI with Card components, presence badges for installed extensions, and improved information display
- Added dynamic import for ExtensionListServiceDefinition to optimize bundle size
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/extensionsListService.tsx | Refactored UI to use Card-based layout, added author/contributor display with popovers, web resource links, and moved accordion structure into ExtensionDetails component |
| packages/dev/inspector-v2/src/modularTool.tsx | Changed ExtensionListServiceDefinition import to dynamic import for code splitting |
| packages/dev/inspector-v2/src/extensibility/extensionFeed.ts | Added PersonMetadata type and extended ExtensionMetadata with additional optional fields (version, license, homepage, repository, bugs, author, contributors) |
| packages/dev/inspector-v2/src/extensibility/defaultInspectorExtensionFeed.ts | Added BabylonWebResources constant and applied it with author information to built-in extensions |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
packages/dev/inspector-v2/src/services/extensionsListService.tsx
Outdated
Show resolved
Hide resolved
packages/dev/inspector-v2/src/services/extensionsListService.tsx
Outdated
Show resolved
Hide resolved
|
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/17389/merge/index.html#WGZLGJ#4600 Links to test babylon tools with this snapshot: https://playground.babylonjs.com/?snapshot=refs/pull/17389/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/17389/merge#BCU1XR#0 |
|
You have made possible changes to the playground. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/17389/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/17389/merge/ |
|
Devhost visualization test reporter: |
|
Visualization tests for WebGPU |
|
WebGL2 visualization test reporter: |
|
You have made possible changes to the playground. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/17389/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/17389/merge/ |
|
Devhost visualization test reporter: |
|
Visualization tests for WebGPU |
|
WebGL2 visualization test reporter: |
3 participants
This is addressing an Inspector v2 forum ask: https://forum.babylonjs.com/t/introducing-inspector-v2/60937/85
It adds more details to extension metadata and displays it in the extensions dialog. It also makes it more clear at a glance whether an extension is currently installed. There is also some general style improvements, like using the Fluent Card component which is made for this type of use case.