Adds vibrancy effect for macos #7898

gerhardberger · 2016-11-07T20:30:58Z

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
})

snify · 2016-11-08T12:56:20Z

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

MarshallOfSound · 2016-11-08T13:11:57Z

docs/api/browser-window.md

+
+#### `win.setVibrancy(type)` _macOS_
+
+* `type` String - Values include `appearance-based`, `light`, `dark`, `titlebar`,


This should be in the style Can be thing1, thing2 or thing3

MarshallOfSound · 2016-11-08T13:12:25Z

docs/api/browser-window.md

@@ -265,6 +265,8 @@ It creates a new `BrowserWindow` with native properties as set by the `options`.
    * `offscreen` Boolean - Whether to enable offscreen rendering for the browser
      window. Defaults to `false`.
    * `sandbox` Boolean - Whether to enable Chromium OS-level sandbox.
+    * `vibrancy` String - Add a type of vibrancy effect to the window, only on


See supported types at the setVibrancy method.

It might seem silly but can we duplicate the list of value up here as well purely so the JSON api is accurate

gerhardberger · 2016-11-08T14:25:59Z

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

YurySolovyov · 2016-11-08T14:46:42Z

I wonder if it works with frameless window

gerhardberger · 2016-11-08T14:58:18Z

@YurySolovyov it does!

kevinsawicki · 2016-11-10T00:19:13Z

atom/browser/api/atom_api_window.cc

@@ -901,6 +909,8 @@ void Window::BuildPrototype(v8::Isolate* isolate,
                 &Window::SetVisibleOnAllWorkspaces)
      .SetMethod("isVisibleOnAllWorkspaces",
                 &Window::IsVisibleOnAllWorkspaces)
+      .SetMethod("setVibrancy", &Window::SetVibrancy)
+      .SetMethod("removeVibrancy", &Window::RemoveVibrancy)


Looks like other methods in BrowserWindow like setMenu, setParentWindow, setThumbnailClip support clearing things via the setter, instead of a second remove* method.

For consistency it might be good to follow that pattern here, maybe setVibrancy with null removes it?

kevinsawicki · 2016-11-10T00:20:48Z

atom/browser/native_window_mac.mm

+void NativeWindowMac::SetVibrancy(const std::string& type) {
+  if (!(base::mac::IsOSMavericks() || base::mac::IsOSYosemiteOrLater())) return;
+
+  NSVisualEffectView *vview = (NSVisualEffectView *)vibrant_view_;


Should be NSVisualEffectView* vview and (NSVisualEffectView*), I don't think the linter runs on Objective-C files.

kevinsawicki · 2016-11-10T00:22:33Z

docs/api/browser-window.md

@@ -1188,3 +1191,17 @@ Returns `BrowserWindow[]` - All child windows.

 [window-levels]: https://developer.apple.com/reference/appkit/nswindow/1664726-window_levels


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

kevinsawicki · 2016-11-10T00:24:21Z

atom/browser/native_window_mac.mm

+
+  NSVisualEffectView *vview = (NSVisualEffectView *)vibrant_view_;
+  if (vview == nil) {
+    vview = [[NSVisualEffectView alloc] initWithFrame:


The vview name is a little vague, maybe effect_view instead?

kevinsawicki · 2016-11-10T00:30:07Z

atom/browser/native_window.h

@@ -161,6 +161,10 @@ class NativeWindow : public base::SupportsUserData,
  virtual void SetVisibleOnAllWorkspaces(bool visible) = 0;
  virtual bool IsVisibleOnAllWorkspaces() = 0;

+  // Vibrancy API
+  virtual void SetVibrancy(const std::string& type) = 0;
+  virtual void RemoveVibrancy() = 0;


These need to be overridden in atom/browser/native_window_views.h and atom/browser/native_window_views.cc as well, currently failing on Linux CI with:

./../atom/browser/native_window_views.cc -o obj/atom/browser/electron_lib.native_window_views.o ../../atom/browser/native_window_views.cc:1289:14: error: allocating an object of abstract class type 'atom::NativeWindowViews' return new NativeWindowViews(inspectable_web_contents, options, parent); ^ ../../atom/browser/native_window.h:165:16: note: unimplemented pure virtual method 'SetVibrancy' in 'NativeWindowViews' virtual void SetVibrancy(const std::string& type) = 0; ^ ../../atom/browser/native_window.h:166:16: note: unimplemented pure virtual method 'RemoveVibrancy' in 'NativeWindowViews' virtual void RemoveVibrancy() = 0;

kevinsawicki · 2016-11-10T00:31:16Z

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

gerhardberger · 2016-11-10T11:04:21Z

@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 · 2016-11-10T13:21:51Z

Will this be merged with the main branch?

kevinsawicki · 2016-11-10T17:50:03Z

atom/browser/native_window.cc

@@ -201,6 +201,13 @@ void NativeWindow::InitFromOptions(const mate::Dictionary& options) {
  options.Get(options::kShow, &show);
  if (show)
    Show();
+
+#if defined(OS_MACOSX)


Super minor, this should be fine to call on all platforms since it is a no-op on Windows/Linux, but some of the mac-specific options are set directly in the NativeWindowMac::NativeWindowMac constructor, do you think this should move there?

kevinsawicki · 2016-11-10T17:54:24Z

atom/browser/api/atom_api_window.cc

@@ -786,6 +786,18 @@ bool Window::IsVisibleOnAllWorkspaces() {
  return window_->IsVisibleOnAllWorkspaces();
 }

+void Window::SetVibrancy(v8::Local<v8::Value> value, mate::Arguments* args) {
+  std::string type;


If this just took an args param then you could support null and undefined with:

std::string type; args->GetNext(&type); window_->SetVibrancy(type);

type will be empty if the first argument is missing or is not a string.

Okay, but that means that it would remove the vibrancy to any type, other than string. Is that an acceptable behavior?

Is that an acceptable behavior?

Yeah, many other Electron APIs behave like this, I think this is something to improve upon and provide more consistent errors/checks but we'd do that module by module for Electron 2.0.

kevinsawicki · 2016-11-10T18:37:59Z

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 · 2016-11-10T19:58:39Z

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

knpwrs · 2016-11-10T20:03:19Z

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 · 2016-11-10T20:06:42Z

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

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

gerhardberger · 2016-11-10T20:09:57Z

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

0x61726b · 2016-11-10T20:56:54Z

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

0x61726b · 2016-11-10T21:17:04Z

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

Radiergummi · 2016-11-13T18:33:56Z

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?

0x61726b · 2016-11-13T18:37:46Z

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

Radiergummi · 2016-11-13T18:42:10Z

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 · 2016-11-18T14:42:16Z

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 · 2016-11-18T14:47:15Z

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

scherii · 2016-11-18T15:18:12Z

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

gerhardberger · 2016-11-18T19:07:11Z

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

elronalds · 2016-11-24T06:42:38Z

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 · 2016-12-02T17:40:42Z

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

KagamiChan · 2017-09-13T03:13:55Z

@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 · 2017-09-19T11:59:54Z

Please Enable It For Windows 7 Please

16patsle · 2017-10-03T08:48:58Z

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

scherii · 2017-10-03T13:04:36Z

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.

gerhardberger added 2 commits November 7, 2016 21:22

adds vibrancy effect for macos

c957160

little fix in docs

1edc00e

0x61726b mentioned this pull request Nov 7, 2016

Allow vibrancy effect #3002

Closed

MarshallOfSound reviewed Nov 8, 2016

View reviewed changes

doc fixes

d883c30

kevinsawicki reviewed Nov 10, 2016

View reviewed changes

kevinsawicki suggested changes Nov 10, 2016

View reviewed changes

kevinsawicki self-assigned this Nov 10, 2016

remove method transferred to set with null

0db94d5

kevinsawicki reviewed Nov 10, 2016

View reviewed changes

adds test, adds view to AtomNSWindow and minor fixes

9decec6

kevinsawicki mentioned this pull request Nov 15, 2016

Use visual effect values directly since enums are 10.11+ #7972

Merged

scherii mentioned this pull request Nov 15, 2016

Add support for vibrancy connors/photon#124

Open

danhp mentioned this pull request Nov 16, 2016

Vibrant window for dark theme sindresorhus/caprine#136

Closed

ppot mentioned this pull request Nov 17, 2016

Text is "burnt" into background vercel/hyper#1008

Closed

2 tasks

0x61726b mentioned this pull request Jan 13, 2017

When refreshing app, effect stops working 0x61726b/electron-vibrancy#13

Closed

chrisdrackett mentioned this pull request Apr 10, 2017

Add vibrancy support for macOS atom/atom#14162

Closed

1 task

KochiyaOcean mentioned this pull request Jul 19, 2017

界面UI的提议 poooi/poi#494

Closed

malept mentioned this pull request Jul 19, 2017

Not Support SetVibrancy function electron/packager#687

Closed

3 tasks

chibicode mentioned this pull request Jul 21, 2017

Rendering issue vercel/hyper#808

Closed

sergeysova mentioned this pull request Aug 10, 2017

Allow for transparent / vibrant window theme microsoft/vscode#32257

Closed

natew mentioned this pull request Oct 23, 2017

Frameless Vibrant windows have square corners (no border radius) #10886

Closed

danielehrhardt mentioned this pull request Dec 11, 2020

Why the windows version was not merged to Electron? 0x61726b/electron-vibrancy#33

Open

hunter-ji mentioned this pull request Apr 27, 2021

electron-builder踩坑系列---mac下窗口毛玻璃效果 hunter-ji/Blog#32

Open

This was referenced Sep 10, 2021

Translucency Does Not Seem to be Working? sindresorhus/caprine#1701

Open

[Bug]: API and Documentation Conflate macOS Vibrancy and Translucency #30910

Closed

ahmedsaheed mentioned this pull request Jan 11, 2023

Fix File Tree ahmedsaheed/leaflet#9

Closed

lorenzolewis mentioned this pull request May 12, 2023

Dark Mode override tauri-apps/window-vibrancy#86

Closed


		#### `win.setVibrancy(type)` _macOS_

		* `type` String - Values include `appearance-based`, `light`, `dark`, `titlebar`,

		@@ -1188,3 +1191,17 @@ Returns `BrowserWindow[]` - All child windows.

		[window-levels]: https://developer.apple.com/reference/appkit/nswindow/1664726-window_levels

Adds vibrancy effect for macos #7898

Adds vibrancy effect for macos #7898

Conversation

gerhardberger commented Nov 7, 2016

snify commented Nov 8, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gerhardberger commented Nov 8, 2016

YurySolovyov commented Nov 8, 2016

gerhardberger commented Nov 8, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kevinsawicki Nov 10, 2016 • edited Loading

Choose a reason for hiding this comment

kevinsawicki commented Nov 10, 2016

gerhardberger commented Nov 10, 2016

snify commented Nov 10, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kevinsawicki commented Nov 10, 2016 • edited Loading

kevinsawicki commented Nov 10, 2016

knpwrs commented Nov 10, 2016

kevinsawicki commented Nov 10, 2016

gerhardberger commented Nov 10, 2016 • edited Loading

0x61726b commented Nov 10, 2016 • edited Loading

0x61726b commented Nov 10, 2016

Radiergummi commented Nov 13, 2016

0x61726b commented Nov 13, 2016

Radiergummi commented Nov 13, 2016

T-Specht commented Nov 18, 2016

gerhardberger commented Nov 18, 2016

scherii commented Nov 18, 2016

gerhardberger commented Nov 18, 2016

elronalds commented Nov 24, 2016

tommoor commented Dec 2, 2016

KagamiChan commented Sep 13, 2017

omarshehab221 commented Sep 19, 2017

16patsle commented Oct 3, 2017

scherii commented Oct 3, 2017

kevinsawicki Nov 10, 2016 •

edited

Loading

kevinsawicki commented Nov 10, 2016 •

edited

Loading

gerhardberger commented Nov 10, 2016 •

edited

Loading

0x61726b commented Nov 10, 2016 •

edited

Loading