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

Adds vibrancy effect for macos #7898

Merged
merged 5 commits into from Nov 11, 2016

Conversation

Projects
None yet
@gerhardberger
Member

gerhardberger commented Nov 7, 2016

This PR adds the native macOS vibrancy effect to BrowserWindow. #3002

let win = new BrowserWindow({
  width: 800,
  height: 600,
  vibrancy: 'dark'  // 'light', 'medium-light' etc
})

vibrancy

gerhardberger added some commits Nov 7, 2016

@arkenthera arkenthera referenced this pull request Nov 7, 2016

Closed

Allow vibrancy effect #3002

@snify

This comment has been minimized.

Show comment
Hide comment
@snify

snify Nov 8, 2016

Thanks for this feature! I hope it's merged soon.

snify commented Nov 8, 2016

Thanks for this feature! I hope it's merged soon.

@gerhardberger

This comment has been minimized.

Show comment
Hide comment
@gerhardberger

gerhardberger Nov 8, 2016

Member

@MarshallOfSound thanks! good thing you pointed it out, because I also realized I put the option under webPreferences 😄

Member

gerhardberger commented Nov 8, 2016

@MarshallOfSound thanks! good thing you pointed it out, because I also realized I put the option under webPreferences 😄

@YurySolovyov

This comment has been minimized.

Show comment
Hide comment
@YurySolovyov

YurySolovyov Nov 8, 2016

Contributor

I wonder if it works with frameless window

Contributor

YurySolovyov commented Nov 8, 2016

I wonder if it works with frameless window

@gerhardberger

This comment has been minimized.

Show comment
Hide comment
@gerhardberger
Member

gerhardberger commented Nov 8, 2016

@YurySolovyov it does!

@@ -1188,3 +1191,17 @@ Returns `BrowserWindow[]` - All child windows.
[window-levels]: https://developer.apple.com/reference/appkit/nswindow/1664726-window_levels

This comment has been minimized.

@kevinsawicki

kevinsawicki Nov 10, 2016

Contributor

Usually we leave these footer links at the very bottom of the docs so the new docs can go above here.

@kevinsawicki

kevinsawicki Nov 10, 2016

Contributor

Usually we leave these footer links at the very bottom of the docs so the new docs can go above here.

@kevinsawicki kevinsawicki self-assigned this Nov 10, 2016

@kevinsawicki

This comment has been minimized.

Show comment
Hide comment
@kevinsawicki

kevinsawicki Nov 10, 2016

Contributor

This is really cool, thanks for adding it, left a few minor comments.

Contributor

kevinsawicki commented Nov 10, 2016

This is really cool, thanks for adding it, left a few minor comments.

@gerhardberger

This comment has been minimized.

Show comment
Hide comment
@gerhardberger

gerhardberger Nov 10, 2016

Member

@kevinsawicki, hope I fixed everything, the only thing is that because setVibrancy's parameter is a string, which converts to std::string, it will remove the effect to null or to an empty string too.

Member

gerhardberger commented Nov 10, 2016

@kevinsawicki, hope I fixed everything, the only thing is that because setVibrancy's parameter is a string, which converts to std::string, it will remove the effect to null or to an empty string too.

@snify

This comment has been minimized.

Show comment
Hide comment
@snify

snify Nov 10, 2016

Will this be merged with the main branch?

snify commented Nov 10, 2016

Will this be merged with the main branch?

@kevinsawicki

This comment has been minimized.

Show comment
Hide comment
@kevinsawicki

kevinsawicki Nov 10, 2016

Contributor

Can you add a small test for this that verifies this does not crash, just to guard against regressions going forward and to get some coverage on this code, something like:

describe('setVibrancy', function () {
  it('allows setting, changing, and removing the vibrancy', function () {
    assert.doesNotThrow(function () {
       window.setVibrancy('light')
       window.setVibrancy('dark')
       window.setVibrancy(null)
       window.setVibrancy('ultra-dark')
       window.setVibrancy('')
    })
  })
})
Contributor

kevinsawicki commented Nov 10, 2016

Can you add a small test for this that verifies this does not crash, just to guard against regressions going forward and to get some coverage on this code, something like:

describe('setVibrancy', function () {
  it('allows setting, changing, and removing the vibrancy', function () {
    assert.doesNotThrow(function () {
       window.setVibrancy('light')
       window.setVibrancy('dark')
       window.setVibrancy(null)
       window.setVibrancy('ultra-dark')
       window.setVibrancy('')
    })
  })
})
@kevinsawicki

This comment has been minimized.

Show comment
Hide comment
@kevinsawicki

kevinsawicki Nov 10, 2016

Contributor

Tested this out locally, I noticed the vibrancy effect goes away when the docked dev tools are opened, is this expected?

Contributor

kevinsawicki commented Nov 10, 2016

Tested this out locally, I noticed the vibrancy effect goes away when the docked dev tools are opened, is this expected?

@knpwrs

This comment has been minimized.

Show comment
Hide comment
@knpwrs

knpwrs Nov 10, 2016

macOS apps only have vibrancy when they are focused, try it with any other macOS app. Does the app maintain focus when the docked devtools are focused?

knpwrs commented Nov 10, 2016

macOS apps only have vibrancy when they are focused, try it with any other macOS app. Does the app maintain focus when the docked devtools are focused?

@kevinsawicki

This comment has been minimized.

Show comment
Hide comment
@kevinsawicki

kevinsawicki Nov 10, 2016

Contributor

Does the app maintain focus when the docked devtools are focused?

Yes the app maintains focus, here is a gif of it happening:

vibrancy-flicker

Contributor

kevinsawicki commented Nov 10, 2016

Does the app maintain focus when the docked devtools are focused?

Yes the app maintains focus, here is a gif of it happening:

vibrancy-flicker

@gerhardberger

This comment has been minimized.

Show comment
Hide comment
@gerhardberger

gerhardberger Nov 10, 2016

Member

@kevinsawicki didn't noticed it, will look into it as this should not happen I think. my first guess that the NSView under the window gets swapped out to a different one.

With detached devTools it doesn't happen though.

Member

gerhardberger commented Nov 10, 2016

@kevinsawicki didn't noticed it, will look into it as this should not happen I think. my first guess that the NSView under the window gets swapped out to a different one.

With detached devTools it doesn't happen though.

@arkenthera

This comment has been minimized.

Show comment
Hide comment
@arkenthera

arkenthera Nov 10, 2016

@kevinsawicki It's not related to NSView or vibrancy.This is a common behaviour of transparent windows on platforms that I tested (Win10 and macOS). Create a vanilla transparent window then open dev tools. Transparency will probably break. I say probably because I had times when it didn't break.

arkenthera commented Nov 10, 2016

@kevinsawicki It's not related to NSView or vibrancy.This is a common behaviour of transparent windows on platforms that I tested (Win10 and macOS). Create a vanilla transparent window then open dev tools. Transparency will probably break. I say probably because I had times when it didn't break.

@arkenthera

This comment has been minimized.

Show comment
Hide comment
@arkenthera

arkenthera Nov 10, 2016

There also might be other problems injecting an NSView* into an Electron window. Such as #8 and #11.

arkenthera commented Nov 10, 2016

There also might be other problems injecting an NSView* into an Electron window. Such as #8 and #11.

@kevinsawicki kevinsawicki merged commit 5e62d28 into electron:master Nov 11, 2016

2 checks passed

continuous-integration/appveyor/pr AppVeyor build succeeded
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
@kevinsawicki

This comment has been minimized.

Show comment
Hide comment
@kevinsawicki

kevinsawicki Nov 11, 2016

Contributor

Thanks so much for this, this is a great option to have support for 👍 🎉 🚀 🚢

Contributor

kevinsawicki commented Nov 11, 2016

Thanks so much for this, this is a great option to have support for 👍 🎉 🚀 🚢

@Radiergummi

This comment has been minimized.

Show comment
Hide comment
@Radiergummi

Radiergummi Nov 13, 2016

I'm new to Electron and trying to implement vibrancy for my window. I create it like this:

  mainWindow = new BrowserWindow({
    titleBarStyle: 'hidden',
    transparent:   true,
    hasShadow:     true,
    vibrancy:      'dark'
  });

But no matter the CSS I use, the window a) has no shadow anymore unless inactive, b) shows no translucency. Is there anything I'm missing out on?

Radiergummi commented Nov 13, 2016

I'm new to Electron and trying to implement vibrancy for my window. I create it like this:

  mainWindow = new BrowserWindow({
    titleBarStyle: 'hidden',
    transparent:   true,
    hasShadow:     true,
    vibrancy:      'dark'
  });

But no matter the CSS I use, the window a) has no shadow anymore unless inactive, b) shows no translucency. Is there anything I'm missing out on?

@arkenthera

This comment has been minimized.

Show comment
Hide comment
@arkenthera

arkenthera Nov 13, 2016

@Radiergummi electron version? Are you building from master ? Vibrancy feature isn't on the release version yet iirc.

arkenthera commented Nov 13, 2016

@Radiergummi electron version? Are you building from master ? Vibrancy feature isn't on the release version yet iirc.

@Radiergummi

This comment has been minimized.

Show comment
Hide comment
@Radiergummi

Radiergummi Nov 13, 2016

version is 1.4.6, pulled from npm. Blames on me though, I didn't notice the date on the PR... It'd be nice if features not present in the releases yet wouldn't be included in the docs, or at least received a small notice saying experimental or something... 😄

Radiergummi commented Nov 13, 2016

version is 1.4.6, pulled from npm. Blames on me though, I didn't notice the date on the PR... It'd be nice if features not present in the releases yet wouldn't be included in the docs, or at least received a small notice saying experimental or something... 😄

@T-Specht

This comment has been minimized.

Show comment
Hide comment
@T-Specht

T-Specht Nov 18, 2016

I was really happy when reading that this is in electron right now. After testing it today, I soon came to a point where I wanted to control the strength of the effect.
Is there any way to do it?

T-Specht commented Nov 18, 2016

I was really happy when reading that this is in electron right now. After testing it today, I soon came to a point where I wanted to control the strength of the effect.
Is there any way to do it?

@gerhardberger

This comment has been minimized.

Show comment
Hide comment
@gerhardberger

gerhardberger Nov 18, 2016

Member

@T-Specht this is the implementation of the NSVisualEffectView so we only have specific type of materials to use.

Member

gerhardberger commented Nov 18, 2016

@T-Specht this is the implementation of the NSVisualEffectView so we only have specific type of materials to use.

@scherii

This comment has been minimized.

Show comment
Hide comment
@scherii

scherii Nov 18, 2016

@gerhardberger Do you know how this is done by iTerm?
iterm-blur

scherii commented Nov 18, 2016

@gerhardberger Do you know how this is done by iTerm?
iterm-blur

@gerhardberger

This comment has been minimized.

Show comment
Hide comment
@gerhardberger

gerhardberger Nov 18, 2016

Member

@scherii no, I haven't looked at their code yet.

Member

gerhardberger commented Nov 18, 2016

@scherii no, I haven't looked at their code yet.

@elronalds

This comment has been minimized.

Show comment
Hide comment
@elronalds

elronalds Nov 24, 2016

Any plans for a feature to add the vibrancy to just a section of the window? It looks like electron-vibrancy does this but it would be nice to have baked in support for adding a view at a specific position.

elronalds commented Nov 24, 2016

Any plans for a feature to add the vibrancy to just a section of the window? It looks like electron-vibrancy does this but it would be nice to have baked in support for adding a view at a specific position.

@tommoor

This comment has been minimized.

Show comment
Hide comment
@tommoor

tommoor Dec 2, 2016

Contributor

@elronalds interested - is there anything in particular that support for that would add over and above just blocking out areas with a solid background in css?

Contributor

tommoor commented Dec 2, 2016

@elronalds interested - is there anything in particular that support for that would add over and above just blocking out areas with a solid background in css?

@chrisdrackett chrisdrackett referenced this pull request Apr 10, 2017

Closed

Add vibrancy support for macOS #14162

1 of 1 task complete

@KochiyaOcean KochiyaOcean referenced this pull request Jul 19, 2017

Open

界面UI的提议 #494

@malept malept referenced this pull request Jul 19, 2017

Closed

Not Support `SetVibrancy` function #687

3 of 3 tasks complete

@chibicode chibicode referenced this pull request Jul 21, 2017

Closed

Rendering issue #808

@sergeysova sergeysova referenced this pull request Aug 10, 2017

Open

Propose nice theme #32257

@KagamiChan

This comment has been minimized.

Show comment
Hide comment
@KagamiChan

KagamiChan Sep 13, 2017

Contributor

@gerhardberger Hi, sorry to bother you. There's a bug with vibrancy in 1.8.0 as I describe in #10420, could you please have a look? Thank you very much

Contributor

KagamiChan commented Sep 13, 2017

@gerhardberger Hi, sorry to bother you. There's a bug with vibrancy in 1.8.0 as I describe in #10420, could you please have a look? Thank you very much

@omarshehab221

This comment has been minimized.

Show comment
Hide comment
@omarshehab221

omarshehab221 Sep 19, 2017

Please Enable It For Windows 7 Please

omarshehab221 commented Sep 19, 2017

Please Enable It For Windows 7 Please

@16patsle

This comment has been minimized.

Show comment
Hide comment
@16patsle

16patsle Oct 3, 2017

@omarshehab221 Windows 7 doesn't have this effect natively, unlike macOS.

16patsle commented Oct 3, 2017

@omarshehab221 Windows 7 doesn't have this effect natively, unlike macOS.

@scherii

This comment has been minimized.

Show comment
Hide comment
@scherii

scherii Oct 3, 2017

Note quite the same effect but Windows 7 does have «Aero».

From @arkenthera's electron-vibrancy repository:

Although it works, I dont recommend using this module on a machine below Windows 10.

scherii commented Oct 3, 2017

Note quite the same effect but Windows 7 does have «Aero».

From @arkenthera's electron-vibrancy repository:

Although it works, I dont recommend using this module on a machine below Windows 10.

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