Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mac: Provide a setting to hide the title bar and inline the window controls #12377

Open
orta opened this issue Sep 21, 2016 · 129 comments
Open

Mac: Provide a setting to hide the title bar and inline the window controls #12377

orta opened this issue Sep 21, 2016 · 129 comments
Labels
feature-request Request for new features or functionality macos Issues with VS Code on MAC/OS X titlebar VS Code main title bar issues ux User experience issues
Milestone

Comments

@orta
Copy link
Contributor

orta commented Sep 21, 2016

Hello there, a lot of the standard apps in recent versions of macOS have started to inline their titlebar into their tabs, menu buttons etc. I assume this is mainly to save vertical space on laptops. However, like all UI trends, apps that don't quite keep up end up feeling old-fashioned 👯

I started a fork of VS Code that uses the inline style:

screen shot 2016-09-21 at 12 59 09

There needed to be a few changes:

  • I moved the sidebar width to 76, to fit the traffic lights
  • I increased the height of the elements that act as the titlebar by one pixel, mainly so that they align with the centre position of the titlebar items
  • Allow mouse dragging via the sidebar, and the title elements

Fork: https://github.com/orta/vscode/tree/inline-titlebar
Changes: orta/vscode@master...mac-titlebar-inline

I realise that VS Code is a cross-platform project, and so these changes should probably only be applied in the context of macOS, which I'm happy to look into with some advice (I don't have a windows/linux machine to hand for example).

I also know that no-one wants big unexpected UI changes on their OSS projects, so I've not made it as a PR, but I'd love to know if/what I can do to move this upstream?

Sidenote: If someone can tell me how, I'm happy to make a downloadable build for people to try too, I couldn't find a way to do it - I'm still quite fresh to npm projects.

@orta
Copy link
Contributor Author

orta commented Sep 21, 2016

Here's a GIF of me prodding and poking around with it too

2016-09-21 13_19_25

@joaomoreno
Copy link
Member

Good Lord, this looks amazing.

@bpasero
Copy link
Member

bpasero commented Sep 21, 2016

@orta cool! how does it work though if you have a whole bunch of tabs open to the top? no more window drag?

@orta
Copy link
Contributor Author

orta commented Sep 21, 2016

Looks like right now the tabs themselves are draggable as the window - which causes bugs as this interferes with re-ordering tabs normally. I can declare them as undraggable easily.

An option here is to have space above the tabs ( Chrome does this for example )

screen shot 2016-09-21 at 16 09 31

@joaomoreno
Copy link
Member

Which is still pretty ugly. But you can always drag it from the space around the Close, Minimize and Maximize buttons, can't you?

@orta
Copy link
Contributor Author

orta commented Sep 21, 2016

Yep, these are the current draggable regions ( I just removed tabs from being draggable )

The traffic lights, and if there is a sidebar open, the title of the sidebar
screen shot 2016-09-21 at 16 34 21

All of the sidebar:
screen shot 2016-09-21 at 16 35 17

Any non-tab content of the top bar, including around the buttons on the right:
screen shot 2016-09-21 at 16 35 13

@joaomoreno
Copy link
Member

Oh wow. That's just awesome.

PS: I learned something today: traffic lights!

@bpasero
Copy link
Member

bpasero commented Sep 21, 2016

@orta is it possible to make the side bar size smaller and still fit the window icons? I feel like we loose a lot of horizontal space to accomodate for the icons. I am not sure how people would like that if they care about space for the editor... and in fact, many have asked for a way to hide that sidebar too.

@orta
Copy link
Contributor Author

orta commented Sep 21, 2016

With respect to smaller width, it can, but this is roughly the minimum to ensure that there is a consistent margin applied to the buttons.

Which is roughly the same as say:

screen shot 2016-09-21 at 17 35 20 screen shot 2016-09-21 at 17 35 43
screen shot 2016-09-21 at 17 38 02
screen shot 2016-09-21 at 17 38 17

e.g. this is 50px as current:

screen shot 2016-09-21 at 17 34 34

As a counter-argument, the new Slack beta is more aggressive with its management of the titlebar:

screen shot 2016-09-21 at 17 36 22

which is the same x, y as

screen shot 2016-09-21 at 17 44 21

It does stick out a bit more, as those positions are the default for not-inlined titlebars ( e.g. normal stick a bar on the top ones, like current ) - with that it is possible to reduce the size down to 68px

screen shot 2016-09-21 at 17 41 21


Other possibilities are less trivial, Xcode for example has these sidebar menu items above the contextual sidebar

screen shot 2016-09-21 at 17 45 53

which makes them togglable along with the sidebar when you want more focus:

screen shot 2016-09-21 at 17 46 50

which, if you'll excuse my quick "rendering" in CSS could look something on the lines of:

screen shot 2016-09-21 at 17 51 13

There's potential in that, which I can jam on if you're interested (and make a higher fidelity version tomorrow ) - though I'd recommend using the other insets for the traffic lights, then there's a nice visual consistency along the top row


@joaomoreno
Copy link
Member

Love the depth you go into this.

I don't really feel the same way as @bpasero and think the width is good. We can even show more in that bar, given the added width, like the keyboard shortcuts to open each viewlet (like Slack) or a label.

@joaomoreno joaomoreno added feature-request Request for new features or functionality ux User experience issues labels Sep 21, 2016
@hochem
Copy link

hochem commented Sep 21, 2016

Hello! I've also been experimenting with a different UI for vscode and I really like the concepts shown here. I had some very similiar ideas:

vscode_frameless1

But with the completely titlebar-less design (tabs starting at window frame) and multiple editors and tabs it's quite hard to find a good solution for window dragging (which should also be consistent with the default macOS implementation).

Currently I am using this design (again very similiar to the latest image of @orta):

vscode

With this design I can easily show and hide the sidebar using a keyboard shortcut and the activitybar isn't taking up extra horizontal space. And there is still a dark titlebar (currently without a title) to drag the window around, but I will probably go back to the default titlebar and just keep the sidebar and activitybar design. This design (or a design where the activity bar can be hidden) would also greatly benefit from a button in the footer (maybe left corner where previously the extensions button was) to toggle the sidebar visibility. I don't have my changes online yet, as they seem quite hacky, are only for the dark theme and they are a part of other changes I made, but if there's any interest, I can isolate and push them.

@bpasero bpasero added this to the Backlog milestone Sep 22, 2016
@bpasero
Copy link
Member

bpasero commented Sep 22, 2016

@stevencl @bgashler1 fyi

@bpasero
Copy link
Member

bpasero commented Sep 22, 2016

@orta maybe when the window goes fullscreen we could revert the additional width in the side bar because then you do not need to host the window buttons in there 👍

@Tyriar
Copy link
Member

Tyriar commented Sep 22, 2016

@orta the final screenshot in #12377 (comment) probably can't happen as extensions will be able to contribute viewlets with associated buttons on the activity bar soon (#12163).

@orta
Copy link
Contributor Author

orta commented Sep 22, 2016

@hochem - interesting 👍 the inline tabs to the window bar style was something I had considered too! I opted against them for the moment to try and do smaller incremental changes. Mainly so there's less to discuss.

@bpasero - that can happen, for sure, I don't see any current css classes related to being full-screen but that's something I can add to pull it off. I think it makes a lot of sense.

@Tyriar 👍 makes sense


I did some playing around with the production app, this change disables the ability to drag and re-order your editors on the Mac. That could be fixed by adding right click context menus to move them, by adding grab handles to the editor free space or by keeping that to just the command palette commands to move them.

@octref
Copy link
Contributor

octref commented Sep 22, 2016

@orta Thanks a lot for the work.
Can you try hiding status bar (View -> Toggle Status Bar) and also hide sidebar + activity bar with CSS? Just want to see how it looks like.

Also, do you know if it's possible to do iA writer like title bar in Electron?
ia

Would be awesome if VSCode has a Zen mode (or distraction-free mode, whatever you name it).
This is what I use in Vim: https://github.com/junegunn/goyo.vim

image

@orta
Copy link
Contributor Author

orta commented Sep 22, 2016

The titlebar coming and going could be done in electron, but I don't think it would include the animation, I can think of a way to do it in Objective-C, but my guess is that this would require electron changes. I'm also not 100% on how mouse handling would work, but I'm willing to bet there's a nice js callback for that kind of thing, which we can use to trigger it off/on

So I removed all the bits you asked:

screen shot 2016-09-22 at 09 07 05

Aside from the normal hiding stuff, I also indented the start of the tabs for the first editor by ~70px to make them not clash with the traffic lights.

The cantering of your text layout is possible too:

screen shot 2016-09-22 at 09 14 00

standalone:

screen shot 2016-09-22 at 09 18 42

@orta
Copy link
Contributor Author

orta commented Sep 22, 2016

Another weird case is that the zoom in/out features feel weird with this, as it changes the width of the sidebar. Could make the sidebar exempt from the zooming? It could be a safe assumption that people aren't zooming to see those icons any larger ( I mainly use it with pair programming to make it easier for others to see the screen )

@bpasero
Copy link
Member

bpasero commented Sep 22, 2016

I am not sure if that is possible but I do agree that it would be nice 👍

@bgashler1
Copy link
Contributor

I think it looks visually very cool to inline the title bar. I never liked macOS's native title bar in the default dark theme, because the color contrast is so stark. Very nice work on prototyping this. I have a few usability concerns:

  • When the View Bar (aka Activity Bar) is enabled (and it is by default) the added space for fitting the "traffic lights" take away from the coding space. Users love their space there.
  • The grabbable areas at the top of the window will be variable, since we we would be relying on the tab well. The tab well could be completely filled with tabs depending on the present situation, potentially leaving little room to grab window aside from the traffic light area (and the View Bar, if it's enabled). This could add cognitive load to a user each time they need to move a window.
  • How would this work with Windows, since we need to have top app menu (and it's not separate from the window unlike Mac and certain distributions of Linux)?
  • Moving View Bar buttons to be horizontal instead of vertical as they are now will restrict space we have for it to grow. We are planning on adding additional optional buttons to it soon.

I think it would be cool to explore this provided we can address the usability issues and not just make it look prettier. Spotify is doing this cross-platform, and I mostly like how they did it.

@bpasero
Copy link
Member

bpasero commented Sep 22, 2016

@bgashler1 this is a feature which to my knowledge only works on Mac

@Tyriar
Copy link
Member

Tyriar commented Sep 22, 2016

@bgashler1 I would have some objections if we tried to mash the macOS traffic lights into the Windows and Linux clients.

@bgashler1
Copy link
Contributor

@Tyriar we would of course never do that :). When I say what would it look like on other platforms, I mean using their respective native buttons for close, minimize and maximize. Particularly on Windows, this is challenging for reasons I mentioned above. I think as @bpasero it's actually not possible. Spotify does something kind of like this, but it seems they're actually theming the native OS title bar for Windows, whereas on Mac it's an inline title bar.

@orta
Copy link
Contributor Author

orta commented Sep 22, 2016

An interesting case for inspiration on what a cross platform version of this would look like comes from some old Firefox designs: http://people.mozilla.org/~shorlander/ux-presentation/ux-presentation.html

http://people.mozilla.org/~shorlander/ux-presentation/01-Firefox-Australis-(Mac).jpg

To pull off a completely cross-platform version of this you'd need to change the way in which tabs are shown highlighted, and TBH, I can't even think of a way to make the windows menu feel right on every window there.

http://people.mozilla.org/~shorlander/blog-images/australis-landing-on-nightly/intro-image-large.jpg

In the end Firefox (and Chrome) ended up removing menus from the windows versions to make it feel consistent. Which I don't really think is probably what you'd want to do here.

FWIW though, there are design precedents in the windows world for Tabs on top of file menus in explorations for File Explorer but I don't know enough of the ecosystem to really have too much insight.

With respect to how Spotify (and the new Slack client) handles this, they have it pretty easy because they don't need to use that top-space for changing content there's always going to be a set number of items in the top space.

How would this work with Windows, since we need to have top app menu (and it's not separate from the window unlike Mac and certain distributions of Linux)?

So I think realistically/optimistically, this would end up being Mac only. Which is why I've tried to keep the scope of changes as small as possible, as no-one wants to be surprised on cross-platform regressions.

When the View Bar (aka Activity Bar) is enabled (and it is by default) the added space for fitting the "traffic lights" take away from the coding space. Users love their space there.

Yep, definitely!

  • for vertical spacing, as you're saving 25px at the top, and then adding at least 1px to re-center the labelling. Though to work around the lack of grabbable areas, it may require eating into that budget to make a consistent space in the way that Chrome/Firefox do.

  • for horizontal, you're definitely losing ~20px. Personally, I think it's an alright trade to make. The look and feel makes it fit more with the OS, and what other apps native to the platform are doing. I can definitely respect that there are other opinions around this, and in the end it will be your team that makes those calls. I'm effectively just an internet rando that's willing to put some time into this 👍 .

    I can explore ways in which you can hide the activity bar entirely, once I set my keyboard shortcuts I mostly work with the sidebar hidden. It might be a case of a horizontal drag indicator and snap at 0 and 76px, but that can be confusing when you support doing both activity bar and sidebar.

iA writer's approach e.g. hiding toolbars when not needed

I will try to take some time tomorrow to think about how this could work elegantly, they have "no actionable elements" underneath where the titlebar would be ( either something you have scrolled through earlier or blank space ) which makes that problem easier.

The grabbable areas at the top of the window will be variable, since we we would be relying on the tab well.

Nice, TIL'd the terminology. I agree, and from using it, I think that realistically it's going to need some top spacing above the tabs to provide some consistency, off-hand I can't think of any designs like this where there is not a persistent top space.

Moving View Bar buttons to be horizontal instead of vertical as they are now will restrict space we have for it to grow. We are planning on adding additional optional buttons to it soon.

Yeah 👍 cool cool

@PascalPixel
Copy link

I'm flattered! But I disabled the titlebar in that screenshot with @lehni's extension (not sure if it works now) https://marketplace.visualstudio.com/items?itemName=lehni.vscode-titlebar-less-macos 😅

@knopp
Copy link

knopp commented Nov 12, 2019

You might want to give CustomizeUI a try.

@gelotress
Copy link

@lehni's extension is not working with the more recent versions of VSCode I've tried, at least for now.
Currently I'm using the CustomizeUI, though I still would have liked to have the same layout as @orta's so I've been trying to apply CSS rules on my own. Unfortunately it seems that on recent VSCode versions scripts are being used to layout the main UI components such as the Activity Bar, etc.? I had to append "!important" flags on my CSS rules to force mine, but this results on some problems on functionality.. for example editor horizontal splitting.

@akbyrd
Copy link
Contributor

akbyrd commented Sep 27, 2020

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.

Linux #43154
Windows #107123
Windows #17060

@lehni
Copy link

lehni commented Sep 28, 2020

On macOS, I recommend using the Customize UI extension, along with these settings in your settings.json file:

{
  "window.titleBarStyle": "native",
  "customizeUI.titleBar": "inline",
  "customizeUI.activityBar": "wide"
}

It's a great replacement for my now defunct Titlebar-Less VSCode for macOS

@yamatsum
Copy link

yamatsum commented Apr 7, 2021

I want this setting in the build-in, not the extension

@danilinus
Copy link

image
I have a problem with the newer version of VS Code 😭

@lehni
Copy link

lehni commented Jul 20, 2021

@danilinus check here for my solution to this problem: iocave/customize-ui#94 (comment)

@NuckChorris
Copy link

Any updates on this? It's been over 6 years now, and Customize-UI is dead now, while both Discord and Slack have resolved this in their Electron apps.

@evolify
Copy link

evolify commented Dec 20, 2022

Maybe we can give Jetbrain Fleet a try.

@will-stone
Copy link

There's an issue linked to above that seems to be exploring this further: #168671

@martonlederer
Copy link

They killed Customize-UI, but this issue has been open for 6+ years. Maybe it's time to prioritise this?

@iamgp
Copy link

iamgp commented Feb 23, 2023

Agreed. This is the only thing I want to change in my setup!

@lixin-wei
Copy link

Any updates on this? It's been nearly 7 years now.

@al6x
Copy link

al6x commented Mar 19, 2023

Any updates? 2 years ago I somehow managed to hide title, with monkey patching and advanced ui settings plugins, and it worked fine.
But today I updated vscode and it doesn't work anymore, I see this useless empty title bar again.

@evolify
Copy link

evolify commented May 16, 2023

???

@martonlederer
Copy link

martonlederer commented May 16, 2023

I wonder why VSCode is on GitHub if even the highest voted issues are just blatantly ignored...

@kanekv
Copy link

kanekv commented Jun 2, 2023

With customize UI not working anymore, this issue suddenly became very annoying.

@lehni
Copy link

lehni commented Jun 3, 2023

@kanekv see here for a workable solution for the time being:

iocave/customize-ui#156 (comment)
iocave/customize-ui#170 (comment)

@albert-ying
Copy link

I mean, is it really hard to do? Maybe we can just crowd source some fund and hire someone to do it and send the PR. I think everyone here are willing to pay few $ to see this fixed soon.

@KisaDmitriy38
Copy link

KisaDmitriy38 commented Jun 4, 2023 via email

@DannyAndres
Copy link

DannyAndres commented Jun 29, 2023

come on microsoft, let me forget that I'm using an electron app and let me live the fantasy where vscode is a native app 😭. I swear one more annoying thing with vscode and I won't care how much I suck at vim. I'll do it 💀

@julesjacobs
Copy link

People are buying new Macbooks just to get the 10 extra vertical pixels, and VS code could give us 20 pixels for free. Microsoft, you can do it!

@natew
Copy link

natew commented Aug 11, 2023

btw everyone Customize UI came back with a version that works again on the latest vscode!

https://marketplace.visualstudio.com/items?itemName=drcika.apc-extension

https://twitter.com/natebirdman/status/1689787579007410178

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature-request Request for new features or functionality macos Issues with VS Code on MAC/OS X titlebar VS Code main title bar issues ux User experience issues
Projects
None yet
Development

Successfully merging a pull request may close this issue.