Introducing Inspector v2

[ryantrem]

Thanks @labris and sorry for the slow reply - busy week! This was actually a bug in AnimationGroup itself, and I have a PR to fix it here. Should be deployed early next week!

[ryantrem]

@labris

Well, that was just the example. But actually I would like to show to the app users only the minimal set of default panes, to give them so-called “freedom-from-choice”

@labris there is not an Inspector v2 option named sidePaneRemapper that can help with this. It is a function that takes as an input each side pane definition, and as an output an overridden horizontal/vertical location, or null to exclude the pane entirely. Something like this was needed for back compat with Inspector v1, so I tried to set it up to support your scenario as well.

[Tumble-wd]

The design of the new inspector looks “cleaner” in the screenshots, but when I tried it in practice, I discovered a number of issues.

1. Colors - It has become less convenient to find the necessary objects in the SceneExplorer because now all icons are the same color. What were the reasons for abandoning color differentiation?

2. The Properties panel - Due to the removal of horizontal dividing lines, it is now difficult to match a property name with its value. Now everything is a jumbled mess. Also, the dark theme is too high-contrast; my eyes started hurting after a few minutes of work. Honestly, 100% black background and 100% white text is terrible for the eyes.

I just wanted to bring this to your attention. I hope the design is not final and that you will pay attention to colors, padding, and font sizes. The old interface was much more convenient to work with, and I’m sure it’s not just a matter of habit.

[yamaciller]

Hi.

Just a very brief response.
My first impression of the design is the same like diving in some Microsoft Windows menues.
Am i wrong to see the same font and gui elements or is this OS dependent?
It makes it more like setting some settings rather than as a tool for development.
Less powerful, less deep feeling (as Windows does the same to me).
Probably need to get used to it, as we would use it.

Best. Werner

[samuelgirardin]

Hi @ryantrem, I’ve found a weird behavior: for example, when I deploy nodes and select one, I can’t close the Nodes panel; but if I open the Materials panel, the Nodes panel can then be closed, and the Materials panel subsequently inherits this strange behavior. Maybe this was raised before ? “@babylonjs/inspector”: “^8.39.0-preview”,

[ryantrem]

@Tumble-wd

Colors - It has become less convenient to find the necessary objects in the SceneExplorer because now all icons are the same color. What were the reasons for abandoning color differentiation?

No real reason, its just not the default behavior with the new UI system we are using. We could definitely add icon colors if this is the community preference! I’ve added it to the list of requests in this tracking issue: Inspector v2 bugs and feedback · Issue #17293 · BabylonJS/Babylon.js · GitHub

@Tumble-wd

The Properties panel - Due to the removal of horizontal dividing lines, it is now difficult to match a property name with its value. Now everything is a jumbled mess.

Would love to hear more community feedback on this one! We tried to make the UI less busy and easier to read, but if it is having the opposite effect for most people, we definitely want to know! @PatrickRyan

@Tumble-wd

Also, the dark theme is too high-contrast; my eyes started hurting after a few minutes of work. Honestly, 100% black background and 100% white text is terrible for the eyes.

Oh wow, totally missed this! The contrast ratio looks good to me in Scene Explorer, but I can see in the other side panes the text appears white (whereas in Scene Explorer it is more of a light gray). This seems like a bug and we’ll look into it, thanks for pointing it out!

@Tumble-wd

I just wanted to bring this to your attention. I hope the design is not final and that you will pay attention to colors, padding, and font sizes. The old interface was much more convenient to work with, and I’m sure it’s not just a matter of habit.

Appreciate the feedback. We don’t have significant UX changes planned, but are always open to feedback from the community. More feedback is always helpful so we can choose a design that works for most people, or add options when preferences are really divided.

@yamaciller

My first impression of the design is the same like diving in some Microsoft Windows menues.
Am i wrong to see the same font and gui elements or is this OS dependent?
It makes it more like setting some settings rather than as a tool for development.
Less powerful, less deep feeling (as Windows does the same to me).
Probably need to get used to it, as we would use it.

There is a broader effort to overhaul the UI across all our tools (@georgie) so we can spend less time on generic React component development and more time on unique Babylon platform (libraries and tools) development. We chose @fluentui/react-components as our UI system. There were a few contenders, but we ultimately went with this choice because we felt it was the best fit for what we were looking for:

• UI library specifically for React
• Broad array of components out of the box, including more complex components we don’t want to build and maintain, like color pickers
• High performance with good support for things like tree view virtualization so we can scale to very large scenes
• CSS-in-JS to make bundling simple and avoid CSS collision issues with the host app
• Well maintained with good support options

@samuelgirardin

Hi @ryantrem, I’ve found a weird behavior: for example, when I deploy nodes and select one, I can’t close the Nodes panel; but if I open the Materials panel, the Nodes panel can then be closed, and the Materials panel subsequently inherits this strange behavior. Maybe this was raised before ?

This is definitely a bug that we were not aware of, thanks a ton for letting us know! I’ll try to get this addressed soon!

[ryantrem]

@samuelgirardin

when I deploy nodes and select one, I can’t close the Nodes panel; but if I open the Materials panel, the Nodes panel can then be closed, and the Materials panel subsequently inherits this strange behavior.

@samuelgirardin this is now fixed and has been deployed to Sandbox/Playground. Thanks again for reporting the issue!