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?

[vscodenpa]

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

[vscodenpa]

🙂 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?

[bpasero]

👋 we now have a VS Code insiders build ready that can draw native window controls when custom title is enabled:

• 👉 get it from https://code.visualstudio.com/insiders/
• configure window.titleBarStyle to custom in settings

Can people report back how that feels?

[TomiOhl]

Tried the insiders build. Here is a comparison on elementary OS: stable vs code with native title bar <> the insiders build with custom title bar:

So while this definitely feels less windows-like, there are still two problems:

• the icon arrangement is different
• the icons are different - this might be a stylesheet issue of the distro though

[2zqa]

Thanks bpasero, this is a great improvement over what it used to be! It is using the correct images for the buttons now.

I feel like it could be improved if it also listens to which buttons are enabled. On Fedora by default, the maximize and minimize buttons are hidden by default, as seen in the attachments of this comment. I am unsure how to detect this, I hope someone else can chip in on that.

And to make it perfect, it would be great if it mirrored the default GNOME theme ("libadwaita") even more, by adding the circles around the images and having more padding. For this, see also the differences in the screenshots provided. I think the Human Interface Guidelines of GNOME could use used as a resource for this, but I don't have any further info on this so far.

[LasseRosenow]

@2zqa I think this is an Electron issue. I asked in the Pull Request that landed support for Linux support of custom title bar styling, if they intend to fix this :)

See electron/electron#41769

[rodrigoGA]

Although it is an improvement, the images seem far from being a solution to this problem. The maximize icon does not seem to be respected; the size appears to be different, and it causes the window borders to break the operating system's style. I hope there is no intention to consider this change as the solution to this issue, because it does not resolve it.

[Jervx]

Awesome! Now it uses the native buttons ❤️.

• Padding between buttons could be improve since it's too close to each other compare to the native gnome app

• Last button was too close to the edge of the window

• On custom title bar style & toggled developer tools, the overlay covers the dev tools . (although work around is to ctrl+shift+p on the dev tools then search for [dock to left, undock into a separate window ] or just switch back to native style). #35209

Also I have a question, is if it possible to detect the native position of the (min, max, close) buttons since linux can be tweaked to move them right or left of the window?

[TomiOhl]

Small theme issue: notice the absence of the lines above/next to the controls with high contrast theme

[bpasero]

Small theme issue: notice the absence of the lines above/next to the controls with high contrast theme

Thanks, pushing a fix. Unfortunately with window control overlays we cannot support a custom window border anymore. We already disable that support on Windows and now will have to do on Linux as well.

[uRohan]

Minor issue one:

The position of the buttons changes vertically depending on the state of the window (whether it is maximized or not). You can notice this if you quickly switch between two screenshots.

Here's what it looks like:

Normal window	Maximized window

Minor issue two:

They also look somewhat different from the window control buttons of other applications under Ubuntu 22.04.4 LTS.

Additional screenshots for comparison:

Visual Studio Code:

Light mode	Dark mode

Other applications:

Light mode	Dark mode

Minor issue three:

It is impossible to grab and move the window in this area of the title bar.

Normal window	Maximized window

[jjspace]

Just wanted to add my 2 cents after noticing the new window.experimentalControlOverlay setting in the latest update.

Please always keep this setting around to disable the native buttons when using the custom title bar style even after it's no longer "experimental"

I personally think the ones VSCode adds look much better with the visual language of the application instead of the native ones provided through the WCO even if it means they don't align with my other windows.

[remigermain]

I made this script to move controls on the left side https://github.com/remigermain/vscode-controls-linux working with vscode-custom-css

[sousaakira]

Fiz esse script para mover os controles do lado esquerdo https://github.com/remigermain/vscode-controls-linux trabalhando com vscode-custom-css

I tried using your script, but I wasn't successful. The buttons don't move.

[sousaakira]

"I resolved the issue with the following commands:

sudo chown -R $(whoami) "$(which code)"
sudo chown -R $(whoami) /usr/share/code

After that, in VS Code:

Press F1 or Ctrl+Shift+P

Type Enable Custom CSS and JS"

[adityaonx]

"I resolved the issue with the following commands:

sudo chown -R $(whoami) "$(which code)"
sudo chown -R $(whoami) /usr/share/code
After that, in VS Code:

Press F1 or Ctrl+Shift+P

Type Enable Custom CSS and JS"

I tried this but now my vscode is showing me a github page inside vscode! Followed everything correctly as in vscode-controls-linux git link!

[remigermain]

"I resolved the issue with the following commands:

sudo chown -R $(whoami) "$(which code)"
sudo chown -R $(whoami) /usr/share/code
After that, in VS Code:

Press F1 or Ctrl+Shift+P

Type Enable Custom CSS and JS"

I tried this but now my vscode is showing me a github page inside vscode! Followed everything correctly as in vscode-controls-linux git link!

I updated the readme , retry it !

[starball5]

Related on Stack Overflow: How can I make VS Code have the Minimize, Maximize, and Close window buttons on left hand side on Linux?