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

[WIP] Colored titlebar for Windows #39972

Merged
merged 35 commits into from Jun 18, 2018

Conversation

Projects
None yet
@rianadon
Contributor

rianadon commented Dec 10, 2017

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:

combo2

Older version with uwp app style title bars:

A screenshot of multiple 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
@10ev

This comment has been minimized.

10ev commented Dec 10, 2017

Great work!

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

@rianadon

This comment has been minimized.

Contributor

rianadon commented Dec 10, 2017

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

This comment has been minimized.

Member

bpasero commented Dec 11, 2017

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

image

@bpasero bpasero self-assigned this Dec 11, 2017

@bpasero bpasero added this to the On Deck milestone Dec 11, 2017

@rianadon

This comment has been minimized.

Contributor

rianadon commented Dec 12, 2017

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

This comment has been minimized.

Member

bpasero commented Dec 12, 2017

@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

This comment has been minimized.

Contributor

rianadon commented Dec 12, 2017

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

This comment has been minimized.

Member

bpasero commented Dec 12, 2017

@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

This comment has been minimized.

Contributor

rianadon commented Dec 12, 2017

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:

image

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:

image

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:

image

However I'm not too happy with the look.

@bpasero

This comment has been minimized.

Member

bpasero commented Dec 12, 2017

@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

This comment has been minimized.

Contributor

rianadon commented Dec 12, 2017

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.

@rianadon

This comment has been minimized.

Contributor

rianadon commented May 13, 2018

@guledali personally I'm not a fan of multiple colors for the icons. I've never seen that used in Windows before. However making the color configurable by themes is definitely something that could be done.

@bpasero bpasero assigned sbatten and unassigned bpasero May 17, 2018

@FaulesLama

This comment has been minimized.

FaulesLama commented May 19, 2018

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

Can't wait for this ☺️

@rianadon

This comment has been minimized.

Contributor

rianadon commented May 20, 2018

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

This comment has been minimized.

Member

sbatten commented May 20, 2018

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

@guledali

This comment has been minimized.

guledali commented May 20, 2018

@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

68747470733a2f2f692e696d6775722e636f6d2f586b456d667a422e676966

@FaulesLama

This comment has been minimized.

FaulesLama commented May 21, 2018

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

@AkazaDorian

This comment has been minimized.

AkazaDorian commented Jun 4, 2018

Great job! I love it.

BTW I would prefer the UWP style.

@rianadon

This comment has been minimized.

Contributor

rianadon commented Jun 15, 2018

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?

@bpasero bpasero merged commit c1e4b74 into Microsoft:master Jun 18, 2018

1 check passed

license/cla All CLA requirements met.
Details
@kumarharsh

This comment has been minimized.

Contributor

kumarharsh commented Jun 18, 2018

👌 🎉

@bpasero bpasero added this to the June 2018 milestone Jun 18, 2018

@sbatten

This comment has been minimized.

Member

sbatten commented Jun 18, 2018

@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

This comment has been minimized.

guledali commented Jun 18, 2018

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

@sbatten

This comment has been minimized.

Member

sbatten commented Jun 18, 2018

@guledali
image

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

@sylveon

This comment has been minimized.

Contributor

sylveon commented Jun 18, 2018

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

This comment has been minimized.

guledali commented Jun 19, 2018

Had time to play with this
screenshot 50

@guledali

This comment has been minimized.

guledali commented Jun 20, 2018

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

green-maximize-zoom-button-os-x-yosemite

@prateekrastogi

This comment has been minimized.

prateekrastogi commented Jun 23, 2018

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

This comment has been minimized.

Contributor

yume-chan commented Jun 23, 2018

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

@Eja26

This comment has been minimized.

Eja26 commented Jun 25, 2018

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

This comment has been minimized.

Contributor

sylveon commented Jun 26, 2018

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

@Eja26

This comment has been minimized.

Eja26 commented Jun 27, 2018

#53100

@gurpreetshanky

This comment has been minimized.

gurpreetshanky commented Jul 6, 2018

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

@rianadon

This comment has been minimized.

Contributor

rianadon commented Jul 23, 2018

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment