Reduce vertical space by going borderless

[coppolaemilio]

The problem

Currently the editor has an top bar with a lot of empty space. I believe this elements can be moved somewhere else to better use the vertical space while in editor.

---

An existing proposal

There is this proposal #492 which tries to merge the tabs and the menus in one line:

Unfortunately, this only works in the default layout, as soon as you start moving the panels around you will find many issues when implementing this solution. A user highlighted this issue showing their preferred layout:

So, if we have to keep that line of content in a separated row we can't take the space from the other elements already existing in the editor.

---

A new proposal

Instead of merging those two, the obvious solution would be to get rid of the "border" of the window and go with an integrated border-less mode. Applications like Figma, Spotify, Firefox or VSCode already do this:

Integrating the system minimize, maximize or close with the menu and run options could save vertical space.

This could look something like this:

(side by side)

Further more, in systems like Mac or some Linux distributions, you can take advantage of the native menu bar and move the options there. This should be already be possible thanks to godotengine/godot#59410

Don't look too close to the examples and mockups I made since they are not pixel perfect, just a demonstration.

This borderless style should be optional since there are many desktop environments that won't be able to deal with this kind of layout. There should also be options to choose where to place the close/minimize/maximize options (left or right).

Let me know if you have any questions or if you have any issues with this approach, I'm happy to keep updating the discussion answering any question that you have.

(Of course, after publishing and searching again I found another related discussion: #4132 adding it as a reference)

[graugraugrau]

In general I like this idea, but it may not work well on Linux. There are a lot of desktop environments (e.g. Gnome, KDE, Xfce, i3, ...) that on top also allow configuration on the window titlebar (placement of close at the right/left, hide minimize, hide maximize). This would lead to some further design topics and more OS dependencies.
I'm not saying it's impossible, but it's probably not that simple for Linux and the different desktop environments.

[coppolaemilio]

@Griseus I see your point. I made a mac mockup because that's the only OS I have available at the moment, but maybe this update can also be "optional" and leave the regular borders as a fallback in case the OS doesn't support this type of windows.

I like what Calinou is saying about allowing to customize the location of the close/minimize/maximize buttons, so it might be doable?

[graugraugrau]

I would probably deactivate it. Other cross platform IDEs seem to not solve this problem either. For example Visual Code, Rider, MonoDevelop or MATLAB.

[coppolaemilio]

Well, it seems like it should be an optional setting then, but I wonder if there is any project that deals with this gracefully 🤔
(I updated the description to clarify that it can be just an option, not the only way to see the main editor)

[Calinou]

Regular borders will have to remain supported no matter what, as mobile platforms and HTML5 don't allow using client-side decorations – there is no global menu to speak of there. (The Godot editor can run on mobile platforms and HTML5.)

[eon-s]

And don't forget that addons can add more items there too (in menu, toolbar, etc.), this will make it harder to manage...

[sztrovacsek92]

Good idea, but it might be a bit overengineered (I'm also not a big fan of custom windows :D).

Wouldn't this be the easiest solution?

Just ditch the horizontal tabs for the scenes, and use the already existing script selector (which can conveniently be hidden, by a click of a button at the bottom), to browse between scenes. And we can put the whole top shelf in the newly created space.

[coppolaemilio]

Which tabs? The scene selector is already there.

These are the tabs I mean:

Edit: I see that you did the side bar to the main panel, but that would be take much more relevant realstate than the tabs ever will on the main viewport

[sztrovacsek92]

You can show/hide it with one click, there's a button at the bottom.

[coppolaemilio]

This is starting to sound more over-engineered than making the window borderless 😅
I could even argue that even your new layout could be better being borderless by just moving the window controls to that same line.

[sztrovacsek92]

But... but... I'm only using built-in Control nodes, duh! 😄

[Jake012345]

Doesn't matter in basic... From now on, godot-android has the high-ground 😎

[azur-wolve]

Godot 4 will have multi-screen support, to take into account.

[Calinou]

Godot 4.0's editor will not have full multi-screen support. It'll only have splitting docks to separate windows and using separate windows for dialogs (such as popups, project/editor settings, etc).

Full multi-screen support is planned for a future 4.x release.

[azur-wolve]

it will allow splitting also the workspaces?

[Calinou]

No, not in 4.0. This is also planned for a future release.

[Goutte]

On KDE I always use ALT+F3, M, N to remove the window borders in Godot (and Firefox). Not as tight as the proposed examples, but it already provides some comfort.