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

[orta]

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:

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: https://github.com/orta/vscode/compare/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.

[bpasero]

I would argue though that some people (that have tabs disabled) might be equally used to be able to reorder editors by dragging them from the full width editor title, so I am not convinced moving that functionality to a small button is helping those. That was one of the feedback I gave in the PR.

[skl131313]

I only see this for MacOS but I would also like to see something similar for Windows and Linux. I generally use the "no menu bar" option so it won't affect me that much of the menu bar isn't visible at all. For Ubuntu's Unity it might not have that big of an issue as it functions similarly to MacOS with it's separate menu bar. But for everything else, possibly just have it appear embedded in the window under the tabs. It could be either permanently visible or have the option to hide it, and only become visible if "alt" is pressed. Much like it functions currently.

Anyways to illustrate what I mean, where to have the menu bar appear from.

[dilijev]

How would the "traffic lights" and width of the bar look when the bar is docked on the right instead of the left (configurable in user settings)?

[bpasero]

I have pushed a custom title bar implementation to master (see https://github.com/Microsoft/vscode/issues/15098). My plan is still to support this inline title style as one of the available options.

[bpasero]

I commented on the outstanding issues the PR still have (see https://github.com/Microsoft/vscode/pull/12628#issuecomment-259724455).

Someone should jump in and continue the work 👍

[be5invis]

@sprinkle131313 This view... I cannot turn off tabs anymore?

[be5invis]

Just a concept.

[bpasero]

I think the biggest challenge on Win/Linux is the missing main menu bar.

[be5invis]

@bpasero Put a large, colored button at the corner, like the Word’s “File”?

[be5invis]

Hmmm...

[be5invis]

The top level “-□×” can be put at the rightmost place either, but for tabless layout, the editing panel’s “×” should be carefully handled.

[ghost]

all views · repository I thought I'd share here.

[be5invis]

@flagello Do you have a Windows version of this? I mean, close buttons at the right top corner

[ghost]

Nope @be5invis, I would have no way to test it, but it shouldn't be too much work.

[be5invis]

@flagello Is it loadable by my extension? For the Windows/Linux version maybe you need:

1. A “VS” button to call out the main menu, and
2. Move the “minimize-maximize-close” buttons to the right top corner

[ghost]

Possibly! But you would still need to switch titleBarStyle="hidden" to titleBarStyle="hidden-inset" in "/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/code/electron-main/main.js". I don't know if it can be set via injected JS once the window is loaded, or even before load through your plugin.

In any case I'll have a fork ready as soon as I manage to get past a build error.

[be5invis]

@flagello A mockup 🙃

[ghost]

It looks fantastic @be5invis! Even better I'd say!

[be5invis]

@flagello NOTE: The Side bar should be placed at left to be harmony with the “Great VS Button”. And it should not cover the title bar area.

[be5invis]

@flagello With side bar:

[orta]

If Electron had an API to runtime change the titleBarStyle then you could in theory do all of this through your extension after https://github.com/be5invis/vscode-custom-css/pull/5 is merged - this looks nice, much more drastic changes than mine but awesome nethertheless, might give it a shot

</edit> nice one @flagello, got it merged with my changes - in [my fork] (https://github.com/orta/Essence)

[coreh]

Wow really loving the mocks so far, especially the Windows ones. If we ever go this route for Windows, could we have the tab close buttons be thin/hairline, just like the window close buttons?

@be5invis One small suggestion, for the top left button, perhaps you could swap the foreground/background colors? That way the VSCode blue branding is more proheminent, and it looks more like a Ribbon button?

[be5invis]

@coreh I'd like so, but these images are photoshopped from anotherone so I did not do such modification.

[tonyganch]

If Electron had an API to runtime change the titleBarStyle

@orta, I believe that's restriction from Apple's side, not Electron's: you have to set styles for the window (like title bar) during init, not after. So the only way to "switch" styles on the fly is to create another window with identical content but different appearance and switch to that new window.

[ghost]

Should anyone here be interested in a similar direction, I'm maintaining a fork called Essence that sports a frameless window with an enhanced Zen Mode. The affordance problem for dragging is solved by using Shift + Cmd and mousemove to trigger a whole-window drag-area (with keyup and mouseup to restore).

[Zyst]

Necromancy with +1!

But as a stopgap feature for fellow Windows 10 users, here's what I did to make it look more natural, like so:

This is done completely through Windows, so you are not doing some weird hack or installing a fork. I was originally writing it as a comment here, but it was really dragging on, so I decided to just go ahead and make a small post about it:

https://zyst.io/how-to-make-visual-studio-code-prettier-in-windows-10

[lehni]

Inspired by @orta's work, I've created an extension for VSCode that allows you to easily activate the titlebar-less mode on macOS:

https://marketplace.visualstudio.com/items?itemName=lehni.vscode-titlebar-less-macos

Please let me know how this works for you all.

[IgorKrupenja]

@lehni Amazing! Would be perfect if there was support for windows with hidden activity bar. I have created a feature request with some details in your repo: https://github.com/lehni/vscode-titlebar-less-macos/issues/1

[lehni]

@krupenja thanks! version 1.0.3 now addresses those scenarios in all combinations of visibility.

[bcinarli]

Out of curiosity, all screens and development assuming that sidebars on the left. What happens when we are using the sidebars on the right?

[lehni]

@bcinarli I've addressed that scenario in v1.3.1 of https://marketplace.visualstudio.com/items?itemName=lehni.vscode-titlebar-less-macos

[infinnie]

My suggestion is like

where the top left bar is draggable and acts as the title bar.

[artignatyev]

Hey @lehni, thanks a lot for the awesome extension. Quick q: how I can change "traffic light" colors from red-yellow-green to gray (used Graphite color in global system preference)?

[dancojocaru2000]

Hey @lehni, thanks a lot for the awesome extension. Quick q: how I can change "traffic light" colors from red-yellow-green to gray (used Graphite color in global system preference)?

That's an issue with Electron, I think. Discord also doesn't respect the Graphite preference...

[artignatyev]

Oh I see, thanks for the info. That's sad, I hope anyone will find the hack for this :)

[curliq]

How would it work if you have multiple native tabs open?

Edit: And also the activityBar hidden.

[lehni]

@curliq my extension addresses all these situations, maybe you want to check it out?

[chenjau]

atom mod. 😄️

I think horizontal traffic light layout has some cons:

1. activity bar must large than traffic light width.
2. user can hide activitybar, explorer. need more logic to control and design.

or put entire activity bar on top, like xcode style.

[bpasero]

@lehni I tried your extension today and must say that I am impressed by how you deal with the corner cases (activity bar hidden, side bar hidden, side bar to the right). Very well done 👍

That said, would you be willing to move your changes into a PR to merge this into VSCode as core experience? The way I could see this working is by providing another window.titleBarStyle option inline. This setting would only be available on macOS, at least until we figured out a solution for Windows/Linux.

[IgorKrupenja]

I think you are talking about the extension by @lehni, right?

[bpasero]

@krupenja oh wow, thanks for spotting that. Yeah I meant @lehni !

[stackptr]

@bpasero is there any prior art of extensions being moved into core that @lehni may use as reference? Also, assuming there will be some discussion from other maintainers/owners of VSCode on whether this should be added, is there a way to kick-off that discussion prior to PR in the interest of avoiding unnecessary work? For example, I can imagine there might be a preference to only have OS-agnostic stuff in the core, but I am unfamiliar with the vscode team so I'm just spitballing.

I have an interest in seeing this in core and as I can't do the actual PR I figured I could at least ask questions to try to help that process along 😄

[bpasero]

@stackptr my understanding is that the extension is actually not using any of our extension API to get this going, but rather makes changes directly to our core files (which we do NOT encourage). As such I would think it is relatively straightforward to take these changes and turn them into a PR.

For example, I can imagine there might be a preference to only have OS-agnostic stuff in the core

We do have a lot of code in the core that is OS specific, to name an example: support for macOS sierra native tabs or the Windows JumpList.

[fabiospampinato]

@bpasero before implementing this in VSCode's core beware that Electron v5 has a bug where part of the window, where the title would have been displayed, becomes unresponsive when using an "hiddenInset" titlebar, the only workaround for it is hiding the provided window controls entirely and re-implementing them.

[bpasero]

@fabiospampinato thanks for pointing this out, too bad. But we can still try to look into a fix on the Electron side of things as I imagine it will break quite a bit of applications, like Slack for example?

[fabiospampinato]

@bpasero I don't know about Slack specifically but I think they are probably using an "hidden" titleBarStyle. The difference is that the traffic lights have a different padding, the same one that they would have in a regular titlebar I believe, and IMHO look awful.

Fixing this in Electron would be ideal, as I'm sure this is in fact breaking lots of apps.

[bpasero]

@fabiospampinato how can an Electron app reliably implement custom window buttons on macOS, I wonder? I recently tried macOS Catalina and there - when you press the Alt key - they show a dropdown with several options what to do with the window (e.g. split in half to the left). Not sure how to get that with a pure HTML solution.

[fabiospampinato]

@bpasero I haven't yet tried Catalina, and I wasn't aware of that new feature. The key part here is "reliably", I don't think that popover can be re-implemented reliably:

1. It would have to be rendered exactly the same, and that could be very tricky:
   1. Maybe some shadows, highlights, or the blur they are using can't be reproduced exactly the same with CSS.
   2. I suppose the icons they are using are copyrighted?
   3. Good luck providing the same exact texts that macOS provides across all the supported languages.
2. If the window becomes narrower than the popover I suppose the popover will be partially rendered outside of the boundaries of the window? That's unimplementable in Electron, unless one's crazy and decides to render the whole thing in a separate transparent window or something and by some miracle manages to position it correctly even when dragging the parent window?

Without considering the popover everything else should be implementable I think, but IMHO it's still not worth it, it's difficult to make it behave exactly the same. For instance a detail I noticed the other day is that if the window is not focused the window controls are rendered in a different shade of gray depending on if dark mode is enabled or not, it's very easy to miss details like this.

[bpasero]

Yeah I would rather focus on a fix in Electron than having to re-engineer the buttons. It is already odd that on Windows we have to draw the window buttons ourselves for the custom title bar.

[bpasero]

Given the amount of regressions we have seen from the Electron 4 update this week, I would like to refine my statement that I made in https://github.com/microsoft/vscode/issues/12377#issuecomment-507240068. In order to accept this feature into VSCode, we would need to resolve https://github.com/electron/electron/issues/14529 in Electron because at the same time we are working on the Electron 6 update (https://github.com/microsoft/vscode/issues/76069) which I do not want to artificially block.