Ideas for improving popup menus across the engine

[mieldepoche]

disclaimer: idk what I'm doing

A recurent problem with the Resource fields in the inspector is how hard it can be to access common operations such as make unique and load/quick load.

the popup contains:

• new resource options
• load options
• resource operations (when the field is not empty)

A common proposal is to reorder them: put common options on top and the variable list of new resource options on the bottom.
However this would harm the experience in the number of cases where you often want to create a new resource in place (collision shape, curve, gradients, etc.).

To sum it up: the popup is bloated. And it's not the only one:

resource popup	rmb on node popup

Here are ideas to rethink the popups in the engine:

idea 1: more sophisticated popup layouts

something common in other software is popups that are not just a vertical list of string options.

Videos of other software

edit: for some reason those stopped playing on my end 🤔 if it's the case, you can right-click them and open them in a new tab...

in bitwig studio	in lightworks (notice how the popup can be moved!)	in unreal
bitwig.popups.webm	lightworks.popups.webm	simplescreenrecorder-2023-09-08_20.05.02.webm

in godot, one could imagine having non-trivial layouts for example, taking inspiration from the above:

Godot mockups

current	new (using a "broken link" icon for make unique instead of a "duplicate" one that looks a bit too much like a "copy" icon, this was a test)	another mockup, spawned from an empty stream field (notice how the load and quick load options don't really harm the experience if you're trying to create a new resource in place)

The benefits of this design idea are that related options are "more" grouped together than if they were so vertically, it saves vertical space and therefore time to find what you're looking for since categories are more clearly separated (maybe debatable but I think so).
The two main menus that would benefit from this is the resource popup in the inspector and the node popup in the scene tree. maybe also the file popup in the FileSystem.

idea 2 (specific to resource field in inspector): add a + button

this is what we're talking about right now:

These buttons all spawn a popup containing things to: create a new resource, copy and paste it, load a new one, clear it.
problem: putting all of this in the same popup is hard, and heavy even with the improvements imaginated in idea 1.

Solution: split the choice before the popup:

an empty field (text in red for information purposes, mockup only)	a field with a resource	a SphereShape3D resource, with no preview

behavior:

• <empty> field
  • + button opens the list of resources to create a new one
  • load button opens the load dialog
  • quick load button opens the quick load dialog
  • rmb doesn't do anything?
• filled field
  • + button opens the list of resources to create a new one (it's smaller, but you'll need it less often. Another quick way to put a new resource in there is clearing the resource and using the big + button from the <empty> state)
  • clicking on the resource enter edit mode, just like it is now
  • the v button opens the load/quick load/clear/copy/paste/show in filesystem/etc. menu, stripped of the resource list!
  • rmb opens the same menu as above

[Mickeon]

A very apparent problem to me with this solution is assuming that only one Resource would be visible. With even more than one, I do feel like it would be overwhelming. It's a lot of buttons all equally as likely to be clicked on.
Furthermore, just because those properties are empty (null) does not mean they need to be filled with a Resource. With these icons, however, it's... as if the icons urge the user to.

I suppose that having the buttons appear only when hovering over them could be a solution. How nicely would all of this work when moving with a keyboard, though?

This is a pretty generous mock-up, too. It actually would look nice. However, the dock can be oftentimes shrunk and tucked to the side. Even when decently expanded, it does currently struggle to display some noteworthy information like the names of nested Resources. An additional button may make that issue worse.

[mieldepoche]

I suppose that having the buttons appear only when hovering over them could be a solution. How nicely would all of this work when moving with a keyboard, though?

that would be nice. I'd say tabbing focus through the field would show the buttons as focus enter, and hide them when it exits (focus going from + to load to quick load).

An additional button may make that issue worse

as you mentionned earlier, only showing it when hovering (and I'll add, only showing the v button when hovering as well) would help.

[mieldepoche]

quick and dirty mockup

simplescreenrecorder-2023-09-10_05.06.59.webm

[mechPenSketch]

For reference, here is how the Resource field works (WIP):

Accessing the Field
Firstly, to get the field, I call the following from the EditorPlugin class: get_editor_interface().get_inspector().get_children(). Unfortunately, this is the further I could get, which are an array of EditorInspectorCategory and EditorInspectorSection. I think the latter needs to be investigated next.

How EditorInspectorSection EditorProperty works
EditorInspectorSection is not available in the docs, so I have to look into Godot's code. It can be found in editor_inspector.cpp. It looks like EditorProperty is the one holding the input for a property, while EditorInspectorSection contains a group of EditorProperty.

NVM ignore this post
@aXu-AP has made an edit on editor_resource_picker.cpp instead.

[aXu-AP]

I think this idea is good, altough I would make some changes:

• There's a lack of paste button in your mockup. However, adding fourth button would make things cramped. Moreover, having 2 folder icons might make the user think longer which one to use. I suggest having only ➕ New and 📂 Quick Load... options on the panel, Load... and Paste in a dropdown menu. Maybe have a redundant quick load also in there, for clarity and for menu to have some content if paste isn't available.
• I would align icons on the right to be less intrusive (and, as Mickeon suggested, show only on mouse hover)
• Keyboard navigation would have 3 targets on that row, but I don't think that's a big problem. There's usually not too many resources on a node for it to make navigation too slow, and even now there's 2 controls per resource (for no reason, both of them open the same menu).

Mockup:

When the resource isn't empty, move the quick load into menu, but leave new icon. Again, right-align the icons.

[aXu-AP]

I tried implementing the resource popup idea so that we can test it in practise: godotengine/godot#91540

[mechPenSketch]

Related, but only to field input: I have proposed a new annotation where the drop menu would list the resource files in a directory given as an arguement: #9937

[pixel-boy]

Maybe add a way to customize the editor, with @export_resource or something like that?

I use custom resources a lot, and being able to access the quick_load menu in 1 click could be handy in some cases, and I wouldn't mind having to create the resources via the resource creation interface.

Resources that would act a bit like @export enums, but whose list would be based on files like quick_load could be really good for workflow in some contexts.