Titlebar-less view for Windows

[be5invis]

A concept based on @flagello’s Essence

Key idea:

• Use the “Great VS Button” to call out the main menu.
• The title-bar-like zone is used for tabs/editor panel titles.

[bpasero]

Very cool ideas 👍

[felixfbecker]

Wow.
I love how the dark theme spans to the titlebar on Mac too now, but on Windows, you get the same ugly titlebar that does not match the theme and mostly just wastes space. It would be much nicer how Office, Edge etc do it where the design of the titlebar merges into the design of the application.

[stevencl]

Making better use of the title bar space makes a lot of sense.

We need to make sure that whatever we do satisfies the following requirements:

• Users can easily drag the whole window without interfering with their ability to drag individual tabs
• Users should continue to be able to see the name of the topmost file in a group when multiple groups are displayed
• Users should continue to be able to invoke quick open from a group to open a new file in that group
• Users should continue to be able to identify the active group
• New users should be able to quickly discover core functionality

We really appreciate the design suggestions. It would be great to hear your thoughts on ways we can meet the above requirements and improve the title bar and overall screen real estate.

[felixfbecker]

Also need to mention Visual Studio here

[be5invis]

@stevencl

Users can easily drag the whole window without interfering with their ability to drag individual tabs

In the tabless mode, the entire title bar can be used to drag the window, while the “group swapping” is replaced by dragging a handle shown when the mouse is over the title bar zone. In the tabbed mode, an extra top margin is added for full-window dragging, just like Chrome, or leave some space at the left of _□X, like Edge.

• Users should continue to be able to see the name of the topmost file in a group when multiple groups are displayed
• Users should continue to be able to identify the active group

You can use color, or typography, to stress the current panel.

New users should be able to quickly discover core functionality

The “Great Button” can be stressed to identify that it contains the main menu. Also, the command input can be combined with it (a special tab?)

Users should continue to be able to invoke quick open from a group to open a new file in that group.

A Plus button on the tab zone?

[ghost]

I just upgraded to 1.8.0 and the floating effect on menu (i.e. refresh rate) is very annoying to my eyes. To repeat, follow these steps:

1. Click on Help menu
2. Move mouse to left side menus (e.g. File/Edit) very fast.
3. Notice the refresh rate and how it appear to your eye.

[stevencl]

@MythicAngel, thanks for the feedback. I think this would probably be best opened as a separate issue though?

[stevencl]

Thanks @be5invis. I could see how this would work. I don't think we would even need a handle to enable group swapping. Just clicking in the area of a group that does not contain the name or path of the top most file should kick off the drag.

I'm not convinced by the 'great/hero button' though. Over the last couple of weeks I've watched a large number of people use VS Code for the first time and have observed people taking some time to discover the activity bar and the functionality exposed there. Since this is core to the experience of the product, we would want to decrease the time it takes new users to learn about the activity bar and viewlets. I don't think hiding the activity bar by default would help us there.

[felixfbecker]

I agree. I would just get rid of the native titlebar

[be5invis]

@stevencl If you add some animation about stressing the Great Button, they would like to click it, and show the activity bar directly after they click.

[Tekbr]

-- Sorry for the English, I used Google Translator --

For those who need the title bar, enable / disable suggestion like Firefox. For those who want to continue to show the information they currently have.

The title bar would follow the theme of VSCode or Windows (in this case Windows 10, since it allows you to change the color)? I'm thinking based on the Firefox Gif. Suggestions?

And if the menu bar is active you should get the VSCode theme similar to Firefox. What do you think?

A button with the VS icon (@be5invis image) would have these functions only if the menu bar was disabled, correct? (If you do not want to delete it)

We need to make sure that whatever we do satisfies the following requirements:

• Users can easily drag the whole window without interfering with their ability to drag individual tabs

Note that when we have many tabs open in browsers, they also leave a space between the minimize button and the button for a new tab. Could this space be placed and be used to drag the window?

See that when we lower the Firefox and Chrome window it adds a space so that the entire window can be dragged. Could this space be added to when you have a group of tabs and when the window is dimmed?

• New users should be able to quickly discover core functionality

I do not know (a strange idea maybe) ... a simple gif showing which option would like to use (and we clicked it already would put the configuration), saying that these configurations could be changed as it wished? As if it were a welcome screen with a little introduction?

Follow a print (very ugly) to get an idea of how it could stay.

When we leave the Menu bar active.

When we hide the menu bar.

When we have a group of tabs with the Menu bar hidden.

[Timber232]

Any update on this?
The current title bar is very distracting.

[felixfbecker]

I also wonder if this will ever tie into the rumoured tabbed shell http://www.windowscentral.com/windows-10-tabbed-shell

[miguelsmuller]

any news ?

[zephrxx]

any update?

[darentanDZ]

Yes. I think the idea of changing the grey title/menu bar to black/dark colors is much needed here.

[JamesLear92]

I would love to see this.

[vazh]

i'll just mention the atom equivalent to this issue
https://github.com/sindrets/atom-title-bar-replacer

[shashankgandham]

Any Updates on This?

[JamesLear92]

Is this a thing yet?

It looks amazing and I really want this. The community for this product is amazing.

[Timber232]

Dec 12 marks the first anniversary of this issue. Cross fingers*

[tenF]

My opinion:

Use the 'VS logo' button in Windows to drag the window since the tabs are also dragable.

In MacOS/Linux replace the 'VS logo' button with their native window control buttons which also provide drag area to move the window (if I'm not mistaken).

I think this is the best solution to this problem because it works on all platforms.

[dpren]

People on small laptop screens are always looking to save screen real estate.

In regard to the requirements stevencl posted,

• Users can easily drag the whole window without interfering with their ability to drag individual tabs

• Users should continue to be able to see the name of the topmost file in a group when multiple groups are displayed

• Users should continue to be able to invoke quick open from a group to open a new file in that group

• Users should continue to be able to identify the active group

• New users should be able to quickly discover core functionality

I think it's worth considering that people who actively choose to hide the title bar are, for the most part, advanced users who know what they're doing – who prefer key commands and window managers over poking around the GUI with a mouse. A warning modal could even be added.

You can hide the title bar in Atom (also iTerm) and it works fine. Draggable surfaces are the empty space in the tab bar and the bottom menu bar. You can slightly shade the background of inactive panes/groups to make it clear which is focused. I think this is much more intuitive than reading text in the title bar.

[JamesLear92]

Just to add to Dpren's point, this is something browsers have had for a long time; and for good reason.

[ghost]

@dpren I think we can meet all the requirements @stevencl posted with some smart design ideas:

Users can easily drag the whole window without interfering with their ability to drag individual tabs

Just always leave a little empty space right of the tabs. Nothing will ever go there and they'll always be able to drag the window from there.

Users should continue to be able to see the name of the topmost file in a group when multiple groups are displayed

I don't think the top bar will be an issue on this

Users should continue to be able to invoke quick open from a group to open a new file in that group

Ctrl+P is fine, and it's dropdown menu will just stay on top of the tabs as it does now

Users should continue to be able to identify the active group

It will be the only one with a highlighted tab

New users should be able to quickly discover core functionality

The titlebar-less will be a functionality they'll have to activate (I don't think it's necessary to make it active by default), just as they have the menu bar active by default (and btw, I think the menu bar is far more useful to discover new functionalities than the top bar).
The only issue may be that, by removing the top bar, we'll also have to get rid of the "split editors" and "more" buttons. Again, for useful as they may be I think one will want the top bar gone once he's gotten some confidence with the editor, which means he'll probably have wondered what those little buttons there did, and he could discover the "split editor" thing even just by dragging a tab to the left (that's how I discovered it both here and on Visual Studio).

[guledali]

Guys check out how atom does it https://atom.io/packages/title-bar-replacer

[DRSDavidSoft]

Still looking forward for updates on the issue! 👍

[miguelsmuller]

me too

[Bernardi23]

I guess the best way to do this right now is to know the color that you have near the top bar and then changing the windows accent color to that one.

You can change the color of the near status bar part with this code in the VSCode settings:

"workbench.colorCustomizations": { "editorGroupHeader.tabsBackground": "#color", "tab.activeBackground": "#color", "tab.inactiveBackground": "#color", "activityBar.background": "#color" }
Then, in the windows 10 "Change your accent color" settings , there is an advanced color picker option, where you can enter your desired #color.

[Bernardi23]

It's finally added!

On patch 1.26.1 the support for custom titlebar was finally added for Windows and Linux, although it's still in preview. You just have to add this to your settings:
"window.titleBarStyle": "custom"

You can customize it a little bit as wel, for example:

"workbench.colorCustomizations": { "titleBar.backgroundColor": "#color" }

[DRSDavidSoft]

@Bernardi23 @be5invis

Looking amazing!