Titlebar-less view for Linux

[ghost]

Just as Mozilla did in Firefox 59 (you can check it out in Firefox Nightly atm), and someone was doing for the Mac version in #12377, it would be really good to have an option to integrate the title bar in the same row where the tabs reside, in order to save some vertical space (which is even more important if like me you usually work on a non-FHD laptop such as an old Thinkpad or a Dell Latitude).

I said in Gnome cause it's what I use, but maybe it could be made into a more portable solution that has options for all DEs with top bars (be it Mac, Gnome, Xfce...). Like Mozilla did, it could even start to roll out when just some DEs are supported, with the warning that it may not work on all systems.

[ghost]

I've just seen the titlebar-less ideas for Windows on #17060 too and I think any design idea used there can easily be converted for Gnome/Xfce/most Linux DEs as they too have the three buttons on top right.

[LastLightSith]

It will be very nice it this happens for XFCE

[denidiasjr]

Any news about this issue? The title bar take a lot of the screen

[ZanderBrown]

It would be important on Linux to try and respect peoples choice of controls (e.g. GNOME only have close by default but I have minimise & close) but this would be really nice to have

https://wiki.gnome.org/Initiatives/CSD

[furai]

Would be really nice to be able to remove titlebar, maybe similar to how Firefox have done it.

[SurajVerma]

In Version: 1.25.1, choosing custom title bar style did the trick for me, it merges menu bar and title bar into one, although the look is not very neat, but it saves at least some screen space.
Try it. It's nice.

Go to File>Preference>Settings and in user settings write "window.titleBarStyle": "custom",

I am on Ubuntu 18.04 LTS

[JaneSmith]

I have since switched to GNOME Builder for its native look and feel on Linux, as well as its significantly greater performance as it does not use Electron. It's sad to see this still hasn't been properly implemented in VS Code.

[ZanderBrown]

@SurajVerma unfortunatly it looks straight out of Windows 10 and doesn't respect control layout, I'm not going to pretend that is easy to implement but the current implementation feels very WIP on Linux

[SurajVerma]

@ZanderBrown I agree with you. That's why I said IMHO it's not very neat, it just saves us some screen real estate. :)

[ignatiusreza]

what @SurajVerma have + "window.title": " ", makes it look a bit nicer 🎉

[ghost]

@SurajVerma thanks for your idea, but I already hide the menu bars by default (I bring them up using Alt when I need them, "window.menuBarVisibility": "toggle", for who wants to do the same) so sadly it's not much space saving for me as of now. The good thing about your solution is that toggling the menus doesn't take up space, but sadly the Windows 10 looks aren't what most people want on Ubuntu. Still, good thing they've made this first step.

[hmaag]

@SurajVerma THANK YOU. Exactly what I was looking to do.

[geoffreyvanwyk]

This looks like it can be closed.

[kostich]

This is indeed basically done but currently the titlebar looks out of place on Linux as it uses the Windows titlebar "theme".

It would be nice if it had (at least) "themes" that make it look native on Gnome and KDE desktop environments.

Food for thought.

[ZanderBrown]

An Adwaita-dark button is basically

min-height: 24px;
min-width: 16px;
padding: 4px 9px;
border: 1px solid;
border-radius: 5px;
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
display: inline-block;
margin: 3px;
color: #eeeeec;
outline-color: rgba(238, 238, 236, 0.3);
border-color: #1b1b1b;
border-bottom-color: #070707;
background-image: linear-gradient(to top, #323232 2px, #353535);
text-shadow: 0 -1px rgba(0, 0, 0, 0.83435);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07);

Then you "just" need to hook into GtkSettings:gtk-decoration-layout and display the right buttons

[teohhanhui]

I think this is something that needs to happen upstream in Electron.

[ZanderBrown]

Why the downvote?

But sure ideally electron would provide something similar to it already does on macOS but the variable number of controls and positon would still require some interesting layouting in vscode

[PranavBhattarai]

There should be a way to ### hide title bar using a shortkey.

[mircoianese]

In Version: 1.25.1, choosing custom title bar style did the trick for me, it merges menu bar and title bar into one, although the look is not very neat, but it saves at least some screen space.
Try it. It's nice.

Go to File>Preference>Settings and in user settings write "window.titleBarStyle": "custom",

I am on Ubuntu 18.04 LTS

Exactly what I wanted. Deepin 15.11.
Thanks a lot

[thisisprateek]

In Version: 1.25.1, choosing custom title bar style did the trick for me, it merges menu bar and title bar into one, although the look is not very neat, but it saves at least some screen space.
Try it. It's nice.

Go to File>Preference>Settings and in user settings write "window.titleBarStyle": "custom",

I am on Ubuntu 18.04 LTS

this should be the result when people search Google, period.
BTW I'm on Arch with Gnome.

[Racsodia]

In Version: 1.25.1, choosing custom title bar style did the trick for me, it merges menu bar and title bar into one, although the look is not very neat, but it saves at least some screen space.
Try it. It's nice.

Go to File>Preference>Settings and in user settings write "window.titleBarStyle": "custom",

I am on Ubuntu 18.04 LTS

This works for Me. Ubuntu 20.04 and VsCode 1.45.1

[fmunirdev]

In Version: 1.25.1, choosing custom title bar style did the trick for me, it merges menu bar and title bar into one, although the look is not very neat, but it saves at least some screen space.
Try it. It's nice.

Go to File>Preference>Settings and in user settings write "window.titleBarStyle": "custom",

I am on Ubuntu 18.04 LTS

Works perfectly on Fedora 32 & vscode 1.46.1

[kostich]

I would say that this can be actually closed soon. Two remaining issues are that the custom titlebar on Linux should:

• emulate native window control buttons look&feel on the platform
• be the default on Linux

[vdzk]

As the original issue states "it would be really good to have an option to integrate the title bar in the same row where the tabs reside, in order to save some vertical space".
"window.titleBarStyle": "custom" doesn't achieve that for me. It would be great to have "window.titleBarStyle": "hidden" as an option.

[akbyrd]

At this point, all three platforms have a similar request, with 406 votes between the lot (just counting thumbs). Perhaps this should be considered an iteration on the custom titlebar rather than a per-platform custom feature.

OSX #12377
Windows #107123
Windows #17060

[ryanberckmans]

On Ubuntu 20.04 I can recommend https://extensions.gnome.org/extension/2015/no-title-bar-forked/ to perfectly hide the title bar.

[douglastofoli]

In Version: 1.25.1, choosing custom title bar style did the trick for me, it merges menu bar and title bar into one, although the look is not very neat, but it saves at least some screen space.
Try it. It's nice.

Go to File>Preference>Settings and in user settings write "window.titleBarStyle": "custom",

I am on Ubuntu 18.04 LTS

hey it's works for me. thanks!

[julioflima]

In Version: 1.25.1, choosing custom title bar style did the trick for me, it merges menu bar and title bar into one, although the look is not very neat, but it saves at least some screen space.
Try it. It's nice.
Go to File>Preference>Settings and in user settings write "window.titleBarStyle": "custom",
I am on Ubuntu 18.04 LTS

Exactly what I wanted. Deepin 15.11.
Thanks a lot

Using Deepin(20) here too. I've changed the theme for all Dark, and adjusted for in directories, store, settings been theme Light. I used the tip of @SurajVerma. Downloaded the extension GlassIt-VSC and the VS Theme Dracula, is the result:

[TomaszWaszczyk]

On Linux Mint Go to File>Preference>Settings and in user settings write "window.titleBarStyle": "custom", works really good:

[ghost]

I am not sure if anyone know about this, but can we make the look similar to Edge in Linux?

The link bar, and the other buttons are next to the minimise, maximise and close button.

[4joejoe]

It can be done temporarily tho i think its is a bug
User Preference > title bar > native > dont restart yet > cancel it

[tukusejssirs]

I use SwayWM in tabbed mode. When window.titleBarStyle is set to native, I see no title bar, however, context menus and the main menu (File, Edit, …) are in light theme (I use dark theme, actually High Contrast).

When I set window.titleBarStyle to custom, context menus look nice, but an extra title bar show up.

I don’t to see any minimise/maximise/close buttons: I haven’t used that for ages! 😉 Screen estate is important, therefore I’d like know if there is a quick and dirty way to disable/hide the custom title bar. Thank! 🙏

Anyway, it would be nice if the main menu could still auto-hide and show on pressing Alt.

[seitbekir]

What about to make possible to place titlebar controls to the left in custom mode?

[wojpawlik]

For Gnome users, https://github.com/hardpixel/unite-shell can "merge" title bar into the top panel:

[DorianRudolph]

My PR #141847 adds an option to hide the title bar when it is not needed for the menu bar.

@tukusejssirs In toggle mode, the title bar still shows up when pressing Alt as you suggested.

[o-alquimista]

The custom window.titleBarStyle has one missing functionality in Linux: double-click maximizes the window. This works on Firefox.

[Mekacher-Anis]

The custom window.titleBarStyle has one missing functionality in Linux: double-click maximizes the window. This works on Firefox.

Works with version 1.70.0 on Gnome with 3-clicks instead of 2

[rodrigoGA]

Please add compatibility for native top bar buttons, with the option "window.titleBarStyle": "custom", in linux
Support for osx has been added, but more developers use linux.
If this is a product for developers do not deliver a lower quality version for linux. Don't be evil

[xxKeefer]

I use a tiling window manager on Gnome, I think there really should be 3rd option of "window.titleBarStyle": "none", to remove it completely. I have resorted to using vscode in fullscreen mode with the native title bar which is almost exactly the way I want it to be, except now my notifications don't show and no longer have access to the gnome-panel for media controls and the like. :(

The custom mode still has the title bar taking up space, i don't need any of the information in the title bar, or the close button and if i need the menu i just want to press alt to reveal it like it does on the native titlebar for gnome with the menuBarVisibilty set to toggle

[norogoth]

@xxKeefer Same for me. My issue would be resolved if I could just show notifications over fullscreen view.

[cfuendev]

For those with a Tiling WM such as @xxKeefer The Windowed Zen Mode extension might be a decent workaround to the look you want. It saves a lot of space in the screen.

[xxKeefer]

thanks for the suggestion @cfuendev , however for anyone else reading i wouldn't recommend that extension, i kind of hides the stuff i want to see while not getting rid of the title bar

[mlntr]

I would say that this can be actually closed soon. Two remaining issues are that the custom titlebar on Linux should:

• emulate native window control buttons look&feel on the platform

There's another issue for that you can support: #176467

[Jervx]

Hi, could it be possible to customize the custom title bar traffic lights(minimize, maximize, close) buttons to use the native window button icon from linux? The buttons seems windows like icons and it does not respect the native icon.
But I noticed on mac using "custom" title bar style correctly uses the native window button icons.

Vscode & Nautilus side by side.

It's encouraging to see browsers like Firefox and Edge now respecting the native window buttons/icons on Linux. I'm hopeful that vscode will do it too.