[WIP] Colored titlebar for Windows

[rianadon]

Since I have not gotten any official response in #32257 and there seems to be an ever-increasing demand for a non-grey title bar (see #29997, #17060) in the issues (or at least a very vocal group), I have gone ahead and implemented most of the functionality surrounding the colored title bar I created for the issue.

Most of this is from adapting the electron-titlebar-windows package, although there was quite a bit of extending VS Code's APIs to implement the close / minimize / maximize buttons. Also when I recently did a merge it seems that some of the code that utilized ipc calls to minimize windows was removed, so I had to add that back in. Hopefully that's okay.

Current version:

Older version with uwp app style title bars:

Progress:

• Implement close, maximize, minimize, etc.
• Fix issues with zooming in and out
• Make the colored titlebar optional
• Allow the app to be resized from the top
• Allow the app to be moved before the titlebar element loads
• Finalize whether the UWP-style titlebar should be presented as an option
• Make the titlebar more consistent with the native Windows ones

[tenF]

Great work!

One question tho:
Does your code make use of the titleBar.active/inactiveBackground/Foreground color settings that the macOS version uses?

[rianadon]

Yes. It repurposes the macOS titlebar and adds the Windows minimize / maximize / close buttons, so it inherits everything that applies to the macOS titltebar, including active and inactive colors.

[bpasero]

@rianadon very cool stuff, keep on going, I think you are on the right track.

It is a pity though that on Windows we loose the top level main menu with this change. Given that I think the custom title can only be an opt-in thing, at least until we provide a custom menu implementation (issue #29024).

A workaround for not having the full menu would be to follow Slacks model where they provide a context menu in the top left corner with all menu actions, however that is also not so very straightforward with the way we implement the menu...

I think what is currently missing from your solution is to show the application icon in the top left corner:

[rianadon]

Thank you!

I was planning on making this opt-in. And based on the issue you mentioned implementing a good menu seems difficult. Maybe sometime later I can try to add that in.

Currently I am modelling the titlebar according to those of uwp apps (for example Calculator), and I don't think any of them have an application icon. However I was also going to make an alternate version that has the same height as the current titlebar, so for that one I can add the icon.

As for implementing a setting I'm not sure how to go about doing this given there already exists a setting for macOS. I was thinking of having a setting for three options: either use the native titlebar, a custom one with the uwp style, or a custom, colored one in the style of the current titlebar. Since these options are different from the setting on macOS, do I need to create a new setting? And if so what should I name it?

[bpasero]

@rianadon I would not introduce a new setting for this and rather use the existing setting "window.titleBarStyle" which has the values native and custom and is already the driver for macOS. I think we should pick a good out of the box look for Windows and not have 2 choices (either UWP or standard).

Btw I guess your solution would also work on Linux right? I know it would not fit 100% with the Linux window look and feel but I think it would be worthwhile to also have it on Linux? The advantage on Linux is that the menu is typically also disconnected from the window (similar to macOS) so that it would not be an issue there.

[rianadon]

Okay I just don't know which to choose. And I feel like there will be some portion of users that will want the style that is dropped. Maybe there could be a separate section for the menubar style (and if this is to be used for Linux there may need to be a separate section so the icon can match whatever desktop environment is used)?

And yes it would work on Linux.

[bpasero]

@rianadon I think we should try to match a look that a typical desktop application on Windows has, given that our native look is just that and not UWP. Can you elaborate what the differences are between UWP and desktop look? Is it the icon and the size of the title bar height?

[rianadon]

Yes I believe only differences besides different padding amounts are the presence of an icon and the height. For example here's a comparison of VS Code and the Weather app:

Also more apps seem to be shifting away from having a solid color in the titlebar (I think because of Fluent Design?). For example the Mail app extends its navigational elements up through the titlebar:

I haven't played with this yet but it could be something interesting to try out. For example the activity bar and sidebar backgrounds could be extended past the titlebar. Or maybe something like this:

However I'm not too happy with the look.

[bpasero]

@rianadon yeah that would go into a similar direction as #12377 wants to go. This could be a third title style where the title bar basically collapses into the rest of the UI.

I think I would vote for trying to come close to our current look but with a custom title. After all what we want is a smooth background color of the title compared to the rest of the theme.

[rianadon]

Wow thanks I didn't see that issue before. Those designs look amazing!

For now though I'll rework the dimensions to match the current look.

[LasseRosenow]

In my opinion the uwp style titlebar looks better and more modern anyways 😍🤘👍

Can't wait for this ☺️

[rianadon]

Me too 😄.

I'm not going to be able to work on the PR until about two or three weeks, so if anyone wants to start taking a stab at the menu bar by rendering an empty rectangle below the titlebar (and then making that work with the window.menuBarVisibility option), that would be super great!

[sbatten]

@rianadon I'm actually working on this now. Thanks for your help!

[guledali]

@sbatten I'm glad you are tackling this issue, I really hope you go for something similar to atom titlebar-replacer that I posted earlier(and again look 🡇) that would probably satisfy anybody.

@Wasserbroetchen I saw your comment about uwp titlebar looks better my question is how? The titlebar to me looks the same whether it is win32 or uwp. I think you meant the acrylic titlebar on edge browser, ok that looks different its part of fluent design I don't think that design would look good on vs code.

Again I'm going to post this image it has received tons of 👍 and if you guys are planning to something about it. It should definitely be this

[LasseRosenow]

@guledali Nope I really just meant the normal uwp titlebar.

It's a bit bigger and you don't have this ugly icon on the top left. Also in the expanded view it won't be as small as the win32 version.

Of course those are small things, but they really do make a difference in my point of view. :)

[AkazaRenn]

Great job! I love it.

BTW I would prefer the UWP style.

[rianadon]

I'm thinking of adding an option to control whether the UWP or older-style titlebar is used.
@sbatten would that break anything for you?

[kumarharsh]

👌 🎉

[sbatten]

@rianadon likely. while I based my implementation off your PR, I changed things around a bit and I'll still be doing work in that area this iteration. Thanks a lot for all your contribution here already.

[guledali]

@sbatten 👏 Great work any photos you can share or like when it will appear on insiders

[sbatten]

@guledali

It should be available to try in the next insiders by setting window.titleBarStyle to custom

[sylveon]

Congrats for getting this merged @rianadon (and thanks too to @sbatten for his work on the menubar)!

I'll begin rebasing (or rewriting) my transparency work on top of master this week.

[guledali]

Had time to play with this

[guledali]

@sbatten Any chance you could add yosemite icons as an option for the custom titlebar

[prateekrastogi]

Hi,
Any ideas when it will be released on vscode stable channel? Might be the most awaited feature for me in recent times. Thank you all and especially @rianadon .

[yume-chan]

@prateekrastogi you can check this month's iteration plan (#51483). This feature is expected to be shipped in next version, but if anything is changed, it will be updated there.

[e-thn]

Hi,

Not sure if this is related to this new title-bar feature, but the menu-bar will always trigger on any keyboard shortcut that uses Alt. This only occurs when the title-bar is set to 'custom' - 'native' works as expected.

Example of this: I press 'Alt + Shift + F' to format current document. However, with the title-bar set to 'custom', the menu shows and assumes I pressed 'Alt + F'.

Perhaps this has something to do with the 'editorTextFocus' variable?

[sylveon]

It probably would make tracking of this issue by developers easier if you open a new issue.

[e-thn]

#53100

[gurpreetshanky]

While this new feature is welcome but it caused a problem in the scrolling workaround. #13612 . Now that workaround doesn't work anymore.

[rianadon]

I'm late to getting back to this, but thanks so much for picking the PR up @sbatten! The menu bar implementation is much better and more beautiful than anything I could have done myself. It's so wonderful!

I've since (half) moved to Linux, and having Windows icons on the title bar looks somewhat strange. The next step would probably be making the icons configurable (then we can do things like MacOS icons as @guledali mentioned), but I won't be having time to do that for several months.

Big thank you to everyone here for all the ideas, critique, and help! You're all what makes projects like VS Code so great and awesome.