Use subtle colors to help distinguish scene tree dock icons from each other

[Calinou]

Related to https://github.com/godotengine/godot-proposals/issues/4558.

Describe the project you are working on

The Godot editor :slightly_smiling_face:

Describe the problem or limitation you are having in your project

Complex scene trees can have a lot of secondary icons (the ones displayed on the right). These can take time to distinguish at a glance, which can hinder productivity.

Modern UI has increasingly adopted monochrome icon trends, which looks nice from a minimalist perspective, but it's not always done in the interest of user experience.

Describe the feature / enhancement and how it helps to overcome the problem or limitation

Use subtle colors to help distinguish scene tree dock icons from each other.

Describe how your proposal will work, with code, pseudo-code, mock-ups, and/or diagrams

The mockup below uses variants of editor node colors, but with 50% of the original saturation to avoid confusion and to be less distracting. The exact colors are open to discussion – I just think the icons should have some kind of color distinction.

Before	After

I have a branch where I started experimenting with this: https://github.com/Calinou/godot/tree/scene-tree-dock-icons-color

Note: If you want to decrease icon saturation globally, there's an editor icon saturation setting in 4.0.alpha.

If this enhancement will not be used often, can it be worked around with a few lines of script?

No.

Is there a reason why this should be core and not an add-on in the asset library?

This is about improving scene tree dock usability out of the box.

[groud]

As I said on RocketChat, I am not sure this is needed, it might make things a little bit too colorful in that area. But I am not strongly against it, so I'd be happy to have other opinions on the matter.

[coppolaemilio]

I don't dislike the idea to make that area easier to parse visually, but adding colors to icons can be tricky since the user will probably expect that the color for the script icon will be the same everywhere that icon shows up, and this won't be the case.

One thing that I feel makes the tree editor busy are the visible/hide eyes. What if that was only shown on hover? (Elements hidden should always show the closed eye icon)

It is not directly addressing the issue stated on this proposal but visual clarity might help distinguish the scene tree dock icons.

[Calinou]

One thing that I feel makes the tree editor busy are the visible/hide eyes. What if that was only shown on hover? (Elements hidden should always show the closed eye icon)

That might harm discoverability if you have no hidden nodes in the scene tree. We could use a smaller eye icon though (without affecting the size of its clickable area).

[Mickeon]

While I do like the idea, the monochrome colouration makes sure the icons don't stand out too much while focusing. I personally find one of Godot's strength compared to other similar programs is minimal visual clutter, so I feel like this is worth keeping in mind, at least.

It also may be a good idea to look at the issue from another perspective, and perhaps minimise the "relevance" and "clutter" of many icons on any given Node, such as with https://github.com/godotengine/godot-proposals/issues/4494 .

[just-like-that]

I recommend to make the colors an alternative choice which might be changed by editor settings to suit everybody's needs ;). To make colorful icons monochrome should be fairly easy.

[MewPurPur]

Colored icons communicate things like dimensionality, and pretty much all of the icons apply to the white CanvasItem node. I'm not against the idea, but colors should communicate something.

For example, inspector properties white (visible), resources orange (script, scene), node properties green (signals, groups), editor stuff blue (locks), and configuration warnings are already yellow. IDK what scene-uniqueness falls under.