Add a toolbar container ("overflow menu")

[timothyqiu]

Describe the project you are working on: Just playing around trying to find & fix bugs

Describe the problem or limitation you are having in your project:

Editor's toolbar can end up with lots of buttons. Currently, it uses a HBoxContainer as toolbar. To keep all the buttons visible, it even pushes dock panels out of the window frame:

The window in the screenshot is maximized. The inspector is pushed off the window.

Describe how this feature / enhancement will help you overcome this problem or limitation:

A toolbar container does not have to make all its children visible, it can have a much smaller minimum width.

Show a mock up screenshots/video or a flow diagram explaining how your proposal will work:

If there is not enough space to show all the buttons on the toolbar, the extra buttons can be put into an overflow menu, as its menu items. (like an Android toolbar / extension toolbar on Chrome.)

Describe implementation detail for your proposal (in code), if possible:

ToolbarContainer is like an HBoxContainer with a hidden trailing overflow menu button. When the container is resized to its minimum size, it only shows the overflow button. The container's children are usually ToolbarItems. ToolbarItem creates an button when on the toolbar, and creates a menu item when in the overflow menu.

Additionally, a ToolbarItemGroup can be added to group ToolbarItems. It has three menu modes:

• always: shows an overflow menu button on the toolbar, or a submenu in the overflow menu
• never: shows a divider separated group of buttons on the toolbar, or a divider separated group of menu options in the overflow menu
• auto: default, one of the above two behaviors depending the available space

There are existing overflow menus that are added manually. For example:

The layout in the above screenshot may be implemented as something like this: (shown in XML for easy display of hierarchy)

<ToolbarContainer>

<ToolbarItemGroup>
    <ToolbarItem icon="aaa">Use Smart Snap</ToolbarItem>
    <ToolbarItem icon="bbb">Use Grid Snap</ToolbarItem>
    <ToolbarItemGroup menu_mode="always">
        <ToolbarItem select_mode="toggle">Use Rotation Snap</ToolbarItem>
        <ToolbarItem select_mode="toggle">Use Scale Snap</ToolbarItem>
        <ToolbarItem select_mode="toggle">Snap Relative</ToolbarItem>
        <ToolbarItem select_mode="toggle">Use Pixel Snap</ToolbarItem> 
        <ToolbarItemGroup menu_mode="always" text="Smart Snapping">
            <ToolbarItem>XXX</ToolbarItem> 
        </ToolbarItemGroup>
        <ToolbarItemGroup menu_mode="never">
            <ToolbarItem>Configure Snap...</ToolbarItem> 
        </ToolbarItemGroup>
    </ToolbarItemGroup>
</ToolbarItemGroup>
<ToolbarItemGroup>
    <ToolbarItem icon="ccc" tooltip="Lock the selected object in place.">Lock Object</ToolbarItem>
    <ToolbarItem icon="ddd" tooltip="Make sure the object's children are not selectable.">Protect Children</ToolbarItem>
</ToolbarItemGroup>
<ToolbarItemGroup icon="bone" menu_mode="always">
    <ToolbarItem>XXX</ToolbarItem>
</ToolbarItemGroup>
<ToolbarItem icon="camera">Game Camera Override</ToolbarItem>

</ToolbarContainer>

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

Seems not achievable using only a few lines of script.

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

Editor can make use of this container for toolbar.

[groud]

I like the idea, it's a simple way to solve the problem we have right now without implementing a flow layout system. I don't think a ToolbarItemGroup as you describe it is needed though, it makes things more complex than what is actually needed I think.

[timothyqiu]

The menu mode thing I described for ToolbarItemGroup is indeed a bit complex. ToolbarItemGroup can just be a way to auto insert separators.

I think explicit grouping (in contrast to inserting separators manually) makes it easy to implement new features. For example, the group highlighting mentioned in #14 (comment) can just be a property of ToolbarItemGroup; the menu mode concept can also be implemented later base on the grouping if needed.

[jordanlis]

I think the conversation derived from the original subject to how to copy blender's UI, which wasn't great at all, even if they get a new UI overhaul.
According to me, the subject is more linked to the number of icons and the fact that we need to group the same kind of icons together, like in the original mockup made by @timothyqiu.
Maybe his mockup is not appreciated by everyone, but in any case it addresses the issue that when doing actions in the viewport, you need to identify quickly the group of actions that you are looking for. We should at least try to find a solution to separate each group of icons/actions to help user readability in order to prevent looking for the desired actions when using the editor.

[theraot]

This is with the font size reduced to 12:

This is with the font size reduced to 10:

Font size reduced to 8:

And I can finally see they didn't pay attention to people talking about animating Controls inside Containers (I mean, Rect Position is hidden, so I can't make a track for it for the AnimationPlayer, but that is not about this proposal).

[jordanlis]

I'm thinking now by the way that this toolbar shouldn't be upper. But the animation toolbar should be in the animation panel.
It doesn't make sense currently how it is, and it could resolve temporarily the issue of missing space for all the icons.

Current :

Proposal :

[YuriSizov]

But the animation toolbar should be in the animation panel.

It's a toolbar for the viewport, not for the animation panel.

It doesn't make sense currently how it is, and it could resolve temporarily the issue of missing space for all the icons.

The animation panel toolbar is equally huge and adding more to it would result in the same ultimate issue. In any case, we use the FlowContainer now, so overflow is getting wrapped, and this is less of an issue.

[jordanlis]

What does it means? It creates a second line in the toolbar?

[theraot]

It creates a second line in the toolbar?

Yes.