Nw.js: Yosemite blurred transparency

[tommoor]

In relation to: https://github.com/rogerwang/node-webkit/pull/2463

It would be nice to support the blurred transparency effect that is now included in Yosemite, perhaps this could be an option of the transparency mode?

cc @jtg-gg

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[jtg-gg]

@tommoor , I'll look into it when I have time, most likely after new year

[fathyb]

I've done it by setting NSVisualEffectView as window content view in native_window_mac.mm at NativeWindowCocoa constructor :

  ShellNSWindow* shell_window;
  if (has_frame_) {
    shell_window = [[ShellNSWindow alloc]
        initWithContentRect:cocoa_bounds
                  styleMask:style_mask
                    backing:NSBackingStoreBuffered
                      defer:NO];
  } else {
    shell_window = [[ShellFramelessNSWindow alloc]
        initWithContentRect:cocoa_bounds
                  styleMask:style_mask
                    backing:NSBackingStoreBuffered
                      defer:NO];
    Class visualEffectView = NSClassFromString(@"NSVisualEffectView");

    if(visualEffectView) {
        NSView *veView = [[visualEffectView alloc] initWithFrame:cocoa_bounds];
        veView.appearance = [NSAppearance appearanceNamed:@"NSAppearanceNameVibrantDark"];

        [shell_window setStyleMask  : NSBorderlessWindowMask | NSClosableWindowMask | NSMiniaturizableWindowMask | NSResizableWindowMask];
        [shell_window setContentView:veView];
    }
  }

And adding that to ShellFramelessNSWindow :

- (BOOL)canBecomeKeyWindow {
    return YES;
}

- (BOOL)canBecomeMainWindow {
    return YES;
}

Result :

But native window can't be closed using window.close() unless you use gui.App.quit(), even with the NSClosableWindowMask, and the best would be to use a native window property to change content view appearance to be opaque, vibrant light or dark.

[kisPocok]

+1 for upvote

[turtledoveadmin]

Ya
On Jul 7, 2015 9:46 AM, "David Schneidhoffer" [email protected]
wrote:

+1

—
Reply to this email directly or view it on GitHub
https://github.com/nwjs/nw.js/issues/2817#issuecomment-119205954.

[sphw]

Im trying to do something very similar to this in Electron, and Im wondering how you achieved zero transparency on the white checkerboard, as in mine I can't see to figure out how to not have vibrancy. Any help would be appreciated.

[evgenyzinoviev]

@wisesascha, did you figured out how to do this in Electron? (sorry everyone if it's off-topic)

[sphw]

I have it half figured out. You basically stick the code shown above in the native_window_mac.mm class (make sure to rename the variables to be the correct ones). The issue is that then everything is effected by the transparency, and I have no idea how to disable it in certain regions. My first thought was to somehow add a method on the BrowserWindow class that could change the area effected by the VisualEfffectView, but that would have some serious performance issues. So now I have no idea what to do.

[evgenyzinoviev]

@wisesascha, if you still interested in how to correctly implement it in Electron, I can create a demo repository with an example. I just did it and it works perfectly (yes, it's been almost 2 months since my question but I engaged in this task only today :)

[grinich]

@evgenyzinoviev I'm interested as well. Can you push a fork of Electron where this is implemented? I'm hacking around with it to add support to https://github.com/nylas/n1

[evgenyzinoviev]

@grinich ok, I'll do it in few hours

[grinich]

@evgenyzinoviev :cool: :sunglasses:

[evgenyzinoviev]

@grinich https://github.com/evgenyzinoviev/electron-vibrancy-demo/

[fritx]

@grinich what was your hack to make the blurred background?

[MikeLP]

Any updates? Come on guys!

[blaremc]

+1

[MikeLP]

Here is example like was implemented on mac and windows for electron - https://github.com/arkenthera/electron-vibrancy

[rogerwang]

CC @jtg-gg who maintains the transparency feature.

[jtg-gg]

Sorry guys, I don't have resources to implement this feature
but I'm willing to review / test the code if someone has the implementation, @fathyb do still maintain this up to nw20 ?

[fathyb]

@jtg-gg No I stopped working on nw since nw13, but I will soon start to use it again, I can try to maintain it and port it to nw20

[MikeLP]

Hey guys! Any updates?

[MikeLP]

Guys?

[rogerwang]

ping @sunlin-link , please give status update.

[MikeLP]

4 years no updates :(

[supertiger1234]

6 years wao