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: 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]

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

[joaomoreno]

Good Lord, this looks amazing.

[bpasero]

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

[orta]

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 )

[joaomoreno]

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]

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

All of the sidebar:

Any non-tab content of the top bar, including around the buttons on the right:

[joaomoreno]

Oh wow. That's just awesome.

PS: I learned something today: traffic lights!

[bpasero]

@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]

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:

e.g. this is 50px as current:

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

which is the same x, y as

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

---

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

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

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

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]

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.

[hochem]

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:

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):

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.