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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

macOS Vibrancy Support #65215

Closed
wants to merge 31 commits into from

Conversation

@Superpencil
Copy link

Superpencil commented Dec 17, 2018

UPDATE

VSCode will not implement transparency or vibrancy unless Chrome itself adds and manages support for these features instead of Electron.


screen shot 2018-12-18 at 00 10 44

  • Not sure if this is helpful, I tried to make as small a PR as possible, only focussed on macOS. 馃檴
  • This PR adds transparency/vibrancy support for macOS Mojave (10.14.x = darwin 18.x) and up.
  • It adds a dropdown in Settings with four basic vibrancy options.
  • It only works with themes that use transparent colors, see below for a sample.
  • Relates issues #32257, #12578, #52707

Add this to settings.json to see the effect:

{
    "workbench.colorCustomizations": {
        "activityBar.background": "#00000000",
        "sideBar.background": "#00000000",
        "titleBar.activeBackground": "#00000000",
    },
    "window.vibrancy": "dark"
}
@msftclas

This comment has been minimized.

Copy link

msftclas commented Dec 17, 2018

CLA assistant check
All CLA requirements met.

@sylveon

This comment has been minimized.

Copy link
Contributor

sylveon commented Dec 17, 2018

What would be the advantages of this vs #52707?

@Superpencil

This comment has been minimized.

Copy link
Author

Superpencil commented Dec 18, 2018

@sylveon you did amazing work, even making packages to support the effect on Linux and Windows!

I was hoping this PR would be easier to review and merge, no new dependencies or big changes, it just adds vibrancy as a setting like other macOS settings as native tabs 馃樃

@sylveon

This comment has been minimized.

Copy link
Contributor

sylveon commented Dec 18, 2018

Why not base it on mine then? There's a few points where it's better such as making the workbench color editable instead of doing a terrible isMac ? transparent : otherColor, it has two more options (appearanced-based and titlebar) and it fixes the terminal to also work with transparent colors. Plus it'd make it easier for me to rebase my PR if this one gets merged but not mine.

@sylveon

This comment has been minimized.

Copy link
Contributor

sylveon commented Dec 18, 2018

Not to mention it doesn't uses transparent: true which breaks a few things. Shadows do not work, neither does resizing according to https://electronjs.org/docs/api/frameless-window#limitations

@Superpencil

This comment has been minimized.

Copy link
Author

Superpencil commented Dec 18, 2018

Thank you for your feedback! I want to keep things as small as possible so I can selfishly get this feature and use it to make a beautiful theme 馃檴

Regarding the background color, I'm assuming that it's not editable for a reason, so I'm only trying to implement what we need for vibrancy to work, what do you think?

This PR did use transparent: true, but vscode on Mac doesn't use frame: false, so the shadows and resizing work: https://electronjs.org/docs/api/frameless-window#alternatives-on-macos
I found a bug while investigating this, if you used a native titlebar vibrancy stops working, which is fine, but the titlebar becomes fully transparent. Removing transparent: true fixed it, seems that all we need is vibrancy!

@bpasero bpasero added this to the Backlog milestone Dec 18, 2018
@fffredy

This comment has been minimized.

Copy link

fffredy commented Feb 11, 2019

Hi, man I am a Mac user and I don't have enough information about using electron or other things. I downloaded vs code today. And I want to make vs code background transparent as u did in the post. I have already tried to access src/vs/ folder but unfortunately I did not be able to access that. There is not any video for making it transparent. Since I don't know how to re-build vs code I did not be able to make vs code transparent. PLEASE, PLEASE make a video tutorial from beginner to the end on how to make vs code transparent. It looks easy for you to make it but I am sure that it is really hard for a beginner programmers like me. I hope you will reply to me. Have a nice day

@Superpencil

This comment has been minimized.

Copy link
Author

Superpencil commented Feb 12, 2019

@fffredy Glad to see you are so excited! All the instructions are in the documentation, but if you build the editor from scratch you won't be able to get updates anymore, and installing extensions is hard.

It's much safer to use the official build and get all those useful extensions and security updates!

Personally, I use a macOS lookalike theme for now: https://marketplace.visualstudio.com/items?itemName=pascalpixel.cameo

@drhumlen

This comment has been minimized.

Copy link

drhumlen commented Feb 27, 2019

What will it take to get this merged? It's barely 25 lines of code. Reviewing this should take minutes; if that. Both this PR and @sylveon's more comprehensive implementation is just hanging in the air for no obvious reason?

Can we please have this tiny PR merged - it would make a world of a difference visually for everyone on MacOS. What's the hold up?

@Superpencil

This comment has been minimized.

Copy link
Author

Superpencil commented Feb 28, 2019

@drhumlen while a small PR, the background color of the window is set to transparent on all macs, regardless of vibrancy support, or if it鈥檚 on or off. This is what @sylveon mentioned as being hacky, as it a global setting, it probably has unknown side effects that are hard to anticipate.

Secondly, the color options for the UI are currently not ideal for handling this PR even if merged, as for example the Sidebar Background color (set to transparent) also turns the Command Palette transparent, as it uses the same key for color.

@Superpencil

This comment has been minimized.

Copy link
Author

Superpencil commented Feb 28, 2019

Conflicts fixed

@gusbemacbe

This comment has been minimized.

Copy link

gusbemacbe commented Mar 2, 2019

HI @Superpencil

On Linux, I cloned your repository and compiled Code-OSS via yarn, yarn run watch and then via gulp vscode-linux-x64, the packaged Code-OSS has window.vibrancy in its JS file, but does not recognise the vibrancy settings. I believe that it is exclusive for macOS.

I will try to test @sylveon's.

@Superpencil

This comment has been minimized.

Copy link
Author

Superpencil commented Mar 3, 2019

@gusbemacbe this PR is only for macOS vibrancy馃懆馃徎鈥嶐煔

@Superpencil

This comment has been minimized.

Copy link
Author

Superpencil commented Mar 26, 2019

Electron 4 and 5 both have an issue with Vibrancy no longer working after a page reload, so when vscode is upgraded to Electron 4 this PR will no longer properly work: electron/electron#8310

@DRSDavidSoft

This comment has been minimized.

Copy link

DRSDavidSoft commented Mar 26, 2019

@Superpencil It might explain why the maintainers are hesitant to merge macOS vibrancy even though it's natively supported in Electron.

@Superpencil

This comment has been minimized.

Copy link
Author

Superpencil commented Jul 1, 2019

Merged master 馃帄

@bpasero

This comment has been minimized.

Copy link
Member

bpasero commented Jul 1, 2019

@Superpencil very weird, I do all that and I get this:

image

Can this be disabled in macOS and maybe I did that?

@Superpencil

This comment has been minimized.

Copy link
Author

Superpencil commented Jul 1, 2019

@bpasero 馃槄 after pulling in master it no longer worked, due to this part it seems:

if (isMacintosh && background.toUpperCase() === DEFAULT_BG_DARK) {
  background = '#171717'; // https://github.com/electron/electron/issues/5150
}

I now have the window options always set background to transparent if vibrancy is enabled, so it should work, please give it another shot. (It might work without custom title bar).

Screen Shot 2019-07-01 at 20 45 09

@sylveon

This comment has been minimized.

Copy link
Contributor

sylveon commented Jul 1, 2019

Kinda bummed that this is getting attention from Microsoft developers but my PR isn't :/
It's been open for more than 1 year and nobody from Microsoft ever commented, the thread is basically a tech support thread now. Receiving that simple comment about playing catch up with features could have been helpful instead of radio silence.

@gusbemacbe

This comment has been minimized.

Copy link

gusbemacbe commented Jul 1, 2019

While the Microsoft developers answered the PR of a macOS guy. It seems that Microsoft does not like Linux.

@bpasero

This comment has been minimized.

Copy link
Member

bpasero commented Jul 2, 2019

@sylveon sorry for that, I am going through all (my) PRs at the moment and will reply to yours as well 馃憤

@bpasero

This comment has been minimized.

Copy link
Member

bpasero commented Jul 2, 2019

@Superpencil ok it is working for me now. After a window reload I get this broken state (probably due to the Electron issue mentioned?):

image

Also, my understanding is that this would only work well with a theme that defines colors with transparency right? E.g. the tree selection looks pretty bad with our standard background:

image

@sylveon

This comment has been minimized.

Copy link
Contributor

sylveon commented Jul 2, 2019

@Superpencil

This comment has been minimized.

Copy link
Author

Superpencil commented Jul 2, 2019

@bpasero ok it is working for me now.

馃帀 Glad to hear it

@bpasero After a window reload I get this broken state (probably due to the Electron issue mentioned?):

Yes! options.backgroundColor is not preserved on reload, however, there was a fix for this which was also back-ported to Electron 4, I am entirely unsure why this isn't working in vscode, perhaps we use a different reload method?

@bpasero Also, my understanding is that this would only work well with a theme that defines colors with transparency right? E.g. the tree selection looks pretty bad with our standard background:

Aye! This PR would not affect existing themes, while allowing new themes to incorporate transparency if they so wish.

While creating a macOS-inspired theme I felt vibrancy on the sidebar was missing to make it fit in a little better with the native apps, so this would allow me and others to do that.

I'm also not looking for making other pieces transparent like the terminal or the editor itself as @sylveon's PR does (which has been a lot of work, especially the support you've provided to enthusiasts, kudos to you!).

As this PR stands, the only issue I would have with implementing a transparent sidebar is that the Command Palette uses the Sidebar's background. If set to transparent, the Command Palette's text becomes unreadable. We could address this by supplying a new workbench color for the Command Palette background specifically, but let the Command Palette use the sidebar color if that new option is not provided in the theme. This would prevent existing themes from breaking.

@sylveon I also find that forcing the workbench background color to fully
transparent when a Mac platform is used to be pretty hacky.

Feel free to correct me, it looks like there are three Layers involved in the background's color:

  1. Electron window background (now transparent)
  2. Workbench background color (now set to transparent)
  3. Theme elements' backgrounds (opaque or transparent depending on theme rules)

Inline comments mention Layer 2 is set to enable anti-aliasing on Windows, the color also doesn't change if you change the theme, why is this editable in your PR? Does it affect the Terminal?

@sylveon

This comment has been minimized.

Copy link
Contributor

sylveon commented Jul 2, 2019

@Superpencil This allows a theme to easily apply a global background tint to the application, especially important in Linux and Windows where the effect is fully transparent. macOS's vibrancy modes already apply such a tint so it's less useful.

This is Windows with a #00000000 workbench background color, not quite useful:
image

This is with a slightly black workbench background color (#00000066), much better:
image

@Superpencil

This comment has been minimized.

Copy link
Author

Superpencil commented Jul 4, 2019

Ah that makes sense, thank you for explaining, it would be a good feature to have. For this PR though I'm not working with windowConfig.transparent only with windowConfig.vibrancy, and since we already have one or two places where we explicitly overwrite background color just for macOS, I think it's OK for this one to just turn the workbench background transparent on macOS, though perhaps only if vibrancy is enabled. I will look into that as it would be less 'hacky'!

Currently I'm trying to figure out why windowConfig.background is lost on reload when only using windowConfig.vibrancy, it seems to have something to do with the order functions are handled during a reload. 馃

@Superpencil

This comment has been minimized.

Copy link
Author

Superpencil commented Jul 4, 2019

@bpasero It works on reload now 馃帄 Please try again!

Edit: Separated Command palette and Quick Input colors from Sidebar colors so there is no interference when the former is transparent.

@bpasero

This comment has been minimized.

Copy link
Member

bpasero commented Jul 4, 2019

@Superpencil thank you.

I feel bad for having caused more work for you on this PR because my original statement still holds true: Besides the UX discussion we have to have if we wanted to add this feature (and the impact on themes), I fear that Electron updates will cause regressions of this experience. Just by looking at the amount of regressions from updating to Electron 4 this week for APIs that only VSCode seems to exercise I can tell that I do not want to expose VSCode to any more "exotic" Electron API. We will make sure to update our contribution guidelines around this topic so that this is communicated properly in the future.

Having said that, if there is browser support for this feature, e.g. in the form of some custom CSS rule I would be happy to revisit this topic, given that it would be the browsers responsibility (Chrome) to keep the feature working.

Thanks for understanding.

@sylveon

This comment has been minimized.

Copy link
Contributor

sylveon commented Jul 4, 2019

@Superpencil I'm not using windowConfig.transparent on Windows either because it's a very poor choice to implement such a feature, it breaks a tons of things.

@tiansin

This comment has been minimized.

Copy link

tiansin commented Jul 4, 2019

@Superpencil
Why is the latest code restricting the use of ultra-dark?
Is the 鈥榳indow.vibrancy' configuration item available in the High Sierra version?

@Superpencil

This comment has been minimized.

Copy link
Author

Superpencil commented Jul 4, 2019

@bpasero No worries! I learned a lot, keep up the great work! 馃枛馃徎
@sylveon best of luck!

@Superpencil Superpencil closed this Jul 4, 2019
@tphuc

This comment has been minimized.

Copy link

tphuc commented Jul 5, 2019

Merged master 馃帄

Is it available on the VSCodeInsider now ?

@Superpencil

This comment has been minimized.

Copy link
Author

Superpencil commented Jul 5, 2019

@tiansin To allow themes to determine the tint more by having less black / white, but I'm sure if this is ever implemented they would allow ultra-dark as well.
@tphuc No, VSCode will only support Vibrancy if and when Chrome adds support for it, as opposed to Electron, sorry!

@Superpencil

This comment has been minimized.

Copy link
Author

Superpencil commented Jul 7, 2019

For posterity 馃懘馃徎 and because I'm proud of the result 馃ぉ, the Cameo theme with the new (wonderful!) icons and vibrancy enabled (and titlebar-less extension):

Screen Shot 2019-07-07 at 22 44 12

Will continue to improve Cameo even without vibrancy!

@gusbemacbe

This comment has been minimized.

Copy link

gusbemacbe commented Jul 7, 2019

Too bad that it is exclusivel for macOS users.

@niccolomineo

This comment has been minimized.

Copy link

niccolomineo commented Jul 12, 2019

Hi, so, is this doomed? No vibrancy support via settings.json at the moment?

@Superpencil Superpencil referenced this pull request Oct 8, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can鈥檛 perform that action at this time.