Inspector v2: Extension avatar image support#18132
Inspector v2: Extension avatar image support#18132ryantrem merged 7 commits intoBabylonJS:masterfrom
Conversation
|
Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s). |
|
Reviewer - this PR has made changes to one or more package.json files. |
There was a problem hiding this comment.
Pull request overview
Adds avatar image support to Inspector v2’s extension list by extending extension-person metadata with an embedded base64 PNG and wiring it into the Fluent UI people/author UI.
Changes:
- Extend
PersonMetadatawith an optionalavatar(base64 PNG) field and populate it in the default built-in feed. - Update the extensions list UI to render author/contributor avatars in
PersonaandAvatarGroupItem. - Add a dev script (
makeAvatar.mjs) plussharpdev dependency to generate 32×32 PNG base64 avatar strings.
Reviewed changes
Copilot reviewed 5 out of 6 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/dev/inspector-v2/src/services/extensionsListService.tsx | Renders avatars for authors/contributors using the new metadata field. |
| packages/dev/inspector-v2/src/extensibility/extensionFeed.ts | Adds avatar?: string to PersonMetadata. |
| packages/dev/inspector-v2/src/extensibility/defaultInspectorExtensionFeed.ts | Adds a built-in Babylon.js author avatar (base64). |
| packages/dev/inspector-v2/scripts/makeAvatar.mjs | New tooling script to generate 32×32 PNG base64 avatars from file/URL/forum username. |
| packages/dev/inspector-v2/package.json | Adds makeAvatar script and sharp dev dependency. |
| package-lock.json | Locks sharp and its platform-specific optional deps. |
You can also share your feedback on Copilot code review. Take the survey.
packages/dev/inspector-v2/src/extensibility/defaultInspectorExtensionFeed.ts
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/18132/merge/index.html#WGZLGJ#4600 Links to test your changes to core in the published versions of the Babylon tools (does not contain changes you made to the tools themselves): https://playground.babylonjs.com/?snapshot=refs/pull/18132/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/18132/merge#BCU1XR#0 If you made changes to the sandbox or playground in this PR, additional comments will be generated soon containing links to the dev versions of those tools. |
|
You have changed file(s) that made possible changes to the sandbox. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/SANDBOX/refs/pull/18132/merge/ |
|
You have made possible changes to the playground. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/18132/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. |
|
Visualization tests for WebGPU |
|
WebGL2 visualization test reporter: |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
|
@copilot open a new pull request to apply changes based on the comments in this thread |
|
Reviewer - this PR has made changes to one or more package.json files. |
|
You have made possible changes to the playground. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/18132/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/18132/merge/ |
|
Visualization tests for WebGPU |
|
WebGL2 visualization test reporter: |
…' into inspector-v2/extension-avatars
|
Reviewer - this PR has made changes to one or more package.json files. |
|
You have changed file(s) that made possible changes to the sandbox. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/SANDBOX/refs/pull/18132/merge/ |
|
You have made possible changes to the playground. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/18132/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. |
|
WebGL2 visualization test reporter: |
|
Visualization tests for WebGPU |
This pull request adds support for displaying custom avatar images for extension authors and contributors in the Inspector's extension list. It introduces a new script for generating base64-encoded PNG avatars, updates the extension feed and metadata to support avatars, and updates UI components to display these avatars where available.
NOTE: This adds a new dev-only npm dependency, just for tooling (for image resizing for making it simple to create small avatar base64 strings).
Avatar generation and integration:
makeAvatar.mjs, which resizes images (from file, URL, or Babylon.js forum username) to 32x32 PNG and outputs a base64 string for use as an avatar. (packages/dev/inspector-v2/scripts/makeAvatar.mjs)package.jsonto include themakeAvatarscript and addsharpas a dependency for image processing. (packages/dev/inspector-v2/package.json) [1] [2]Extension metadata and feed changes:
PersonMetadatatype to support a base64-encoded PNG avatar image, and updated the default inspector extension feed to include the Babylon.js logo as the author avatar using the new script. (packages/dev/inspector-v2/src/extensibility/extensionFeed.ts,packages/dev/inspector-v2/src/extensibility/defaultInspectorExtensionFeed.ts) [1] [2] [3]UI updates for avatar display:
avatarfield, including in popovers and avatar groups. (packages/dev/inspector-v2/src/services/extensionsListService.tsx) [1] [2] [3]