Add an editor setting to enable border-less mode on Windows and Linux (client-side decorations)

coppolaemilio commented 2 years ago

Describe the project you are working on

Several projects and plugins.

Describe the problem or limitation you are having in your project

Having a small screen and wanting to optimize the space. Right now, the editor window doesn't take advantage of modern OS features that make a better use of the screen's vertical space.

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

By getting rid of the border of the window, Godot can make a better use of its vertical space. Applications like Firefox, Spotify, Figma, or VSCode already do this, so I don't see why Godot won't.

This is a mock up of how Godot would look like as a border-less application:

Here it is side by side showing the difference in heights:

Further more, thanks to this https://github.com/godotengine/godot/pull/59410 in systems like macOS, we could use the native menu bar to host the menus instead of having them on the application

I made macOS mockups because that's the only OS I have available at the moment, but you can imagine how it would look like in Windows since most new applications are using this kind of treatment.

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).

(Original discussion: https://github.com/godotengine/godot-proposals/discussions/4648)

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

On the editor settings you would be able to enable 'borderless mode' to make the editor use less space. I would argue that border-less mode should be the default mode at least on Windows and macOS, but always provide a way to disable it. On Linux, the default mode would be with borders for compatibility.

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

It unfortunately can't be worked around with a few lines of code.

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

I don't think a change like this could be made with an add-on.

mieldepoche commented 2 years ago

Allowing this for apps made with godot would be great too (about integrating native buttons inside the window and using a native thin border).

Calinou commented 2 years ago

coppolaemilio commented 1 year ago

This one was done. Thanks @bruvzg !

Calinou commented 1 year ago

This one was done. Thanks @bruvzg !

This was only implemented for macOS, not Windows and Linux. Note that Windows and most Linux desktop environments lack a global menu, so there needs to be a way to show the menu in the client-side decoration.

sosasees commented 1 year ago

this issue suggets only 2 options for the borderless window setting:

Always On
Always Off

but i might use this setting:

On when Maximized

because in a maximized window there's no reason to worry about gimped window move and resize behavior when dragging the custom-made window decorations.

plebius-lo3 commented 1 year ago

Any update on this issue please?

Calinou commented 1 year ago

Any update on this issue please?

To my knowledge, nobody has started implementing this feature yet. It's not trivial to do as it requires per-platform handling, along with designing an API so that projects can use this feature too.

BoxFoxCode commented 1 year ago

In regards to the related topic of client-side decorations in the engine, I would presume the proper method would be to supply window manager hinting in the per-platform display servers. (Assuming I'm correct in believing the editor is built on the engine.)

For example, on Windows: WM_NCHITTEST – which is already used to hint transparency, HTTRANSPARENT WM_NCHITTEST Microsoft 'learn' page

                case WM_NCHITTEST: {
                        if (windows[window_id].mpass) {
                                return HTTRANSPARENT;
                        }
                } break;

https://github.com/godotengine/godot/blob/bfd78bb917887cfc1fd842ba23570394cad8bedb/platform/windows/display_server_windows.cpp#L2953C2-L2957

Perhaps implementation similar to mouse_passthrough and mouse_passthough_polygon would be appropriate? Such that if client-side decorations are enabled for a certain decoration, then a window manager hint for it will be send using a given polygon or the polygon of the control that was passed to it.

Related to client-side decorations and borderless windows, I believe the titlebar or "caption" can also be left while retaining border decorations for a "titleless window" by not supplying the WS_CAPTION style, which might also be useful, as I'd imagine that often the titlebar is what most use cases want to eliminate or make use of and would like the border decorations. However, as above, the border areas can be hinted for native resizing of borderless windows at their edges by default or otherwise.

Then there's other platform and WM specific things like using DwmExtendFrameIntoClientArea from the dwmapi to modify the frame to get Aero shadow, for example, with the WM_NCCALCSIZE notification. WM_NCCALCSIZE

Starting with Windows Vista, removing the standard frame by simply returning 0 when the wParam is TRUE does not affect frames that are extended into the client area using the DwmExtendFrameIntoClientArea function. Only the standard frame will be removed.

Would have to look into X11 to give an attempt for Linux (EWMH), should be findable ; Wayland doesn't have an implementation yet. Mac would be harder, I presume, as I've never looked into anything Mac specific at all before.

Upon that a titlebar/menu client-side control could be made as a default with such positioning options including hiding itself in response to events, etc.? This could be added manually or be whats added as a top node automatically with a similar setting to the Mac menu, with similar api options/settings?

Additionally, implementing window manager hints might also coincide with the sub-windows implementation. I don't know how it is implemented, so I think it's safe to mention as a potential issue. (At least since sub-windows seem to use window data and screen coordinates, not local nor global coordinates. GDscript to drag a sub-window in GD4 requires getting the mouse position from the DisplayServer singleton.) Since sub-windows act similarly, potential resize area or border would be implemented similarly in taking the border/margin or expand margin size (whichever was appropriate) as potential default hinting for borderless windows that also have the resizeable flag. This might not be desirable though, as it would require removing the resizeable flag from borderless windows for their typical use case and things such as launchers with transparency and custom geometry to them.

geekley commented 11 months ago

Yes, please add this feature. Currently I use Kubuntu/KDE "Window Rules" workaround to achieve this:

Match whole window class regex: ^(godot_engine |godot_editor godot)
Window types: Normal window
Window title regex: ^(?:$\*$|.*? - .*?) - Godot Engine$
No titlebar and frame: Force yes

But the drawback is losing the minimize/maximize/close buttons.

So when you implement this on Linux, you can use a borderless window, making sure this option also reuses the huge free space at the top:

Add equivalent buttons to min/max/close at the far end, like in VSCode (e.g. at the top-right)
Add the godot icon and project name (the part that would show on the titlebar) at the top-left:
- Project name could be before the menus, or after
- Or you could use the project name to replace the "Project" menu and show it before the other menus
Make the window draggable by the empty spaces in the top bar area (when not maximized)

Calinou commented 11 months ago

Yes, please add this feature. Currently I use Kubuntu/KDE "Window Rules" workaround to achieve this:

You can also set a custom shortcut to toggle borderless on any window. Here, I've configured Alt + F12 to do so (and Alt + F11 for fullscreen).

Hilderin commented 2 months ago

I loved this proposal, I always found that the title bar steals some useless space, specially on Linux. So I worked to implement the "extend to title" mode for Windows and Linux. It took a bit more work then expected, but this PR should implement this proposal: https://github.com/godotengine/godot/pull/96310

coppolaemilio commented 2 months ago

Thank you so much for your work @Hilderin !! I've been enjoying this on Mac but it always feel bad when I have to use linux or windows, I usually forget how bad it looks in the other systems 😅

Looking forward for it to get merged 💖

godotengine / godot-proposals