Allow VS-code to respect native titlebar decorations configuration on GNOME/Linux

[adhadse]

Coming from #21 on vscode-adwaita, on GNOME Desktop environment (and on other distros as well) we can configure what titlebar decorations appear, viz Minimize, maximize buttons can appear or disappear via GNOME tweaks app.

VS-code doesn't support this by default, and for maximum cross-compatibility, we would like this feature to be customizable.

TLDR:

• allows maximize/minimize button to appear or disappear via settings, just like Microsoft Edge browser does by having a small corner allocated for the native title bar buttons, while the rest of it is the internal browser GUI.
• Support native titlebar decorations depending on the Distribution/Platform.

Attaching image of window decorations on VS code with window.titleBarStyle set to custom, GNOME files (Nautilus) on libadwaita 1.2x, GNOME 43.2 and Microsoft Edge browser (Version 109.0.1518.70 (Official build) (64-bit)) with GNOME tweaks, disabling maximise and minimize buttons

And with GNOME tweaks enabling Maximise/Minimize buttons:

[sbatten]

This would come from WCO on linux, right @deepak1556

[adhadse]

@sbatten Can I please know what is WCO on linux?

[sbatten]

Window Controls Overlay, a feature of browsers and electron (our platform) which draws native window controls in a reserved area over our application. It allows you to get the same native features of window controls that we cannot implement in HTML/JS

[fedorenchik]

@adhadse @sbatten can we also add feature to respect window titlebar buttons position (left / right side) ?

[TomiOhl]

Let me +1 these. Also, take into account that sometimes not all controls are at the same side, e.g. on elementary OS/Pantheon the close button is on the left, the maximize button is on the right.

[suwermave]

This is needed, please implement.

[sousaakira]

How do I move the title bar buttons to the left side?

[VSCodeTriageBot]

This feature request is now a candidate for our backlog. The community has 60 days to upvote the issue. If it receives 20 upvotes we will move it to our backlog. If not, we will close it. To learn more about how we handle feature requests, please see our documentation.

Happy Coding!

[ropodl]

+1

[VSCodeTriageBot]

🙂 This feature request received a sufficient number of community upvotes and we moved it to our backlog. To learn more about how we handle feature requests, please see our documentation.

Happy Coding!

[mbeps]

+1

[rodrigoGA]

I understand that respecting the configuration also refers to the window corners' rounding being set by the GNOME theme, and the windows title bar color being set by the VS Code theme.

The same behavior that VS Code already offers to Windows and OSX is expected to be offered to Linux as well.

[do-sch]

To get the configured button layout the GSettings key button-layout in org.gnome.desktop.wm.preferences has to be parsed. It is a Gnome setting, but other desktop environments like KDE or Cinnamon change this key too, so that GTK applications look as native as possible. Therefore, this solution would work everywhere.

It contains a string with the components close, minimize, maximize, icon, appmenu, menu and :. : represents the middle of the title bar. Examples:

Gnome default appmenu:close

KDE default and what vscode currently shows icon,appmenu:minimize,maximize,close

close:appmenu

Even this would be possible close:appmenu,minimize,icon,maximize

I have tried to implement this. The title bar is compiled in src/vs/workbench/browser/parts/titlebar/titlebarPart.ts and src/vs/workbench/electron-sandbox/parts/titlebar/titlebarPart.ts.
However, I was not able to obtain the GSettings. The cleanest way would be to use the C API. But it would need some additional dependencies to make it work in TypeScript.

Alternatively, the D-Bus service org.freedesktop.portal.Desktop /org.freedesktop/portal/desktop org.freedesktop.portal.Settings.Read("org.gnome.desktop.wm.preferences", "button-layout") could be used to get the value. However, I have not found a native API in TypeScript for this either. In addition, D-Bus would be slower than the C-API and this service has not been around that long, so those who rely on an ancient Debian would not have this implementation available.

The last option would be to call gsettings from the command line. But this would almost certainly not be authorized in a pull request. That's why I didn't even try.

[2zqa]

This would come from WCO on linux, right @deepak1556

WCO has since landed for Linux: electron/electron#41769. Does this mean we will soonTM automatically see GTK-like buttons in VS Code on GNOME?