Overhaul the theme editor and improve user experience

[YuriSizov]

Closes godotengine/godot-proposals#2505.

Most of what is described in the proposal is implemented (it was mostly already implemented back then even 🙃). I've decided to exclude a preview builder tool from this. I think if we were to design such a tool for Godot it needs to be a universally useful tool, for creating UIs in general, not just previews in the theme editor. And to that end, it can also be a plugin.

Changes here are not cherry-pickable to 3.x. For my previous related PRs I've already released dedicated commits that backport the changes which are backportable. I will create a dedicated PR for this one as well when it is approved.

Here are a couple of screenshots of this thing in editor with the latest editor theme:

[KoBeWi]

The preview background confused me. I made a simple scene with Control root and single panel and when used as preview, the panel was stretched over the whole preview. It turned out that the preview uses panel style as default background. It should use default clear color IMO. Or at least use the panel from editor not from the edited theme.

[YuriSizov]

The preview background confused me. I made a simple scene with Control root and single panel and when used as preview, the panel was stretched over the whole preview. It turned out that the preview uses panel style as default background. It should use default clear color IMO. Or at least use the panel from editor not from the edited theme.

I don't think I've changed it in that regard from what it is now, but I agree that it can be confusing. With the clear color you mean the same we use for 2d scenes in previews?

[KoBeWi]

With the clear color you mean the same we use for 2d scenes in previews?

Yes, the default background in 2D editor.

[YuriSizov]

Yeah, okay, made it use the previews have a default clear color as a background. This led me to add a panel to the default preview anyway, just so it looks nicer as a component zoo. Similarly, custom previews would need to add some sort of background as well, if it is desired. Content of the preview is still padded for better usability with single-component scenes (if, for example, your scene is just a button), so a clear-colored fringe is going to be present in all previews.

I've also made the minimal size for the previews much smaller. Here are some pictures:

Default preview
Custom scene w/ a panel
Custom scene w/o a panel
Custom button
Custom clear color

[KoBeWi]

For some reason when you delete a preview scene and try to reload it, nothing happens. I'd expect some error at least. Same when the scene is renamed. Seems like PackedScene is being cached and remains after file was removed.

[KoBeWi]

I think the type panel should have some bigger minimum height. It looks bad when you open it for the first time and there is a list of elements:

[YuriSizov]

I think the type panel should have some bigger minimum height.

Done, now the minimal height is about 4 items big.

For some reason when you delete a preview scene and try to reload it, nothing happens. I'd expect some error at least. Same when the scene is renamed. Seems like PackedScene is being cached and remains after file was removed.

Renames are actually fine, the reference I use correctly updates its path. And for removes it correctly clears the path. So I've added a check for an empty path and for the file existence for good measure. Invalid scene is immediately removed as preview, same as it already does when you change its root from a Control node to something else.

[KoBeWi]

Renames are actually fine, the reference I use correctly updates its path.

Maybe it could update the tab name too.

[YuriSizov]

Maybe it could update the tab name too.

Yes, good call. Done.

[akien-mga]

Thanks!