Merge pull request #10667 from dittos/window-opacity

Add window opacity support

atom/browser/api/atom_api_window.cc

@@ -631,6 +631,14 @@ bool Window::HasShadow() {
   return window_->HasShadow();
 }
 
+void Window::SetOpacity(const double opacity) {
+  window_->SetOpacity(opacity);
+}
+
+double Window::GetOpacity() {
+  return window_->GetOpacity();
+}
+
 void Window::FocusOnWebView() {
   window_->FocusOnWebView();
 }
@@ -1060,6 +1068,8 @@ void Window::BuildPrototype(v8::Isolate* isolate,
       .SetMethod("setBackgroundColor", &Window::SetBackgroundColor)
       .SetMethod("setHasShadow", &Window::SetHasShadow)
       .SetMethod("hasShadow", &Window::HasShadow)
+      .SetMethod("setOpacity", &Window::SetOpacity)
+      .SetMethod("getOpacity", &Window::GetOpacity)
       .SetMethod("setRepresentedFilename", &Window::SetRepresentedFilename)
       .SetMethod("getRepresentedFilename", &Window::GetRepresentedFilename)
       .SetMethod("setDocumentEdited", &Window::SetDocumentEdited)

atom/browser/api/atom_api_window.h

@@ -161,6 +161,8 @@ class Window : public mate::TrackableObject<Window>,
   void SetBackgroundColor(const std::string& color_name);
   void SetHasShadow(bool has_shadow);
   bool HasShadow();
+  void SetOpacity(const double opacity);
+  double GetOpacity();
   void FocusOnWebView();
   void BlurWebView();
   bool IsWebViewFocused();

atom/browser/native_window.cc

@@ -159,6 +159,10 @@ void NativeWindow::InitFromOptions(const mate::Dictionary& options) {
   if (options.Get(options::kHasShadow, &has_shadow)) {
     SetHasShadow(has_shadow);
   }
+  double opacity;
+  if (options.Get(options::kOpacity, &opacity)) {
+    SetOpacity(opacity);
+  }
   bool top;
   if (options.Get(options::kAlwaysOnTop, &top) && top) {
     SetAlwaysOnTop(true);

atom/browser/native_window.h

@@ -141,6 +141,8 @@ class NativeWindow : public base::SupportsUserData,
   virtual void SetBackgroundColor(const std::string& color_name) = 0;
   virtual void SetHasShadow(bool has_shadow) = 0;
   virtual bool HasShadow() = 0;
+  virtual void SetOpacity(const double opacity) = 0;
+  virtual double GetOpacity() = 0;
   virtual void SetRepresentedFilename(const std::string& filename);
   virtual std::string GetRepresentedFilename();
   virtual void SetDocumentEdited(bool edited);

atom/browser/native_window_mac.h

@@ -83,6 +83,8 @@ class NativeWindowMac : public NativeWindow,
   void SetBackgroundColor(const std::string& color_name) override;
   void SetHasShadow(bool has_shadow) override;
   bool HasShadow() override;
+  void SetOpacity(const double opacity) override;
+  double GetOpacity() override;
   void SetRepresentedFilename(const std::string& filename) override;
   std::string GetRepresentedFilename() override;
   void SetDocumentEdited(bool edited) override;

atom/browser/native_window_mac.mm

@@ -1504,6 +1504,14 @@ bool NativeWindowMac::HasShadow() {
   return [window_ hasShadow];
 }
 
+void NativeWindowMac::SetOpacity(const double opacity) {
+  [window_ setAlphaValue:opacity];
+}
+
+double NativeWindowMac::GetOpacity() {
+  return [window_ alphaValue];
+}
+
 void NativeWindowMac::SetRepresentedFilename(const std::string& filename) {
   [window_ setRepresentedFilename:base::SysUTF8ToNSString(filename)];
 }

atom/browser/native_window_views.cc

@@ -814,6 +814,24 @@ bool NativeWindowViews::HasShadow() {
       != wm::ShadowElevation::NONE;
 }
 
+void NativeWindowViews::SetOpacity(const double opacity) {
+#if defined(OS_WIN)
+  HWND hwnd = GetAcceleratedWidget();
+  if (!layered_) {
+    LONG ex_style = ::GetWindowLong(hwnd, GWL_EXSTYLE);
+    ex_style |= WS_EX_LAYERED;
+    ::SetWindowLong(hwnd, GWL_EXSTYLE, ex_style);
+    layered_ = true;
+  }
+  ::SetLayeredWindowAttributes(hwnd, 0, opacity * 255, LWA_ALPHA);
+#endif
+  opacity_ = opacity;
+}
+
+double NativeWindowViews::GetOpacity() {
+  return opacity_;
+}
+
 void NativeWindowViews::SetIgnoreMouseEvents(bool ignore, bool forward) {
 #if defined(OS_WIN)
   LONG ex_style = ::GetWindowLong(GetAcceleratedWidget(), GWL_EXSTYLE);
@@ -821,6 +839,8 @@ void NativeWindowViews::SetIgnoreMouseEvents(bool ignore, bool forward) {
     ex_style |= (WS_EX_TRANSPARENT | WS_EX_LAYERED);
   else
     ex_style &= ~(WS_EX_TRANSPARENT | WS_EX_LAYERED);
+  if (layered_)
+    ex_style |= WS_EX_LAYERED;
   ::SetWindowLong(GetAcceleratedWidget(), GWL_EXSTYLE, ex_style);
 
   // Forwarding is always disabled when not ignoring mouse messages.

atom/browser/native_window_views.h

@@ -104,6 +104,8 @@ class NativeWindowViews : public NativeWindow,
   void SetBackgroundColor(const std::string& color_name) override;
   void SetHasShadow(bool has_shadow) override;
   bool HasShadow() override;
+  void SetOpacity(const double opacity) override;
+  double GetOpacity() override;
   void SetIgnoreMouseEvents(bool ignore, bool forward) override;
   void SetContentProtection(bool enable) override;
   void SetFocusable(bool focusable) override;
@@ -274,6 +276,7 @@ class NativeWindowViews : public NativeWindow,
   static HHOOK mouse_hook_;
   bool forwarding_mouse_messages_ = false;
   HWND legacy_window_ = NULL;
+  bool layered_ = false;
 #endif
 
   // Handles unhandled keyboard messages coming back from the renderer process.
@@ -293,6 +296,7 @@ class NativeWindowViews : public NativeWindow,
   bool fullscreenable_;
   std::string title_;
   gfx::Size widget_size_;
+  double opacity_ = 1.0;
 
   DISALLOW_COPY_AND_ASSIGN(NativeWindowViews);
 };

atom/common/options_switches.cc

@@ -86,6 +86,9 @@ const char kBackgroundColor[] = "backgroundColor";
 // Whether the window should have a shadow.
 const char kHasShadow[] = "hasShadow";
 
+// Browser window opacity
+const char kOpacity[] = "opacity";
+
 // Whether the window can be activated.
 const char kFocusable[] = "focusable";
 

atom/common/options_switches.h

@@ -48,6 +48,7 @@ extern const char kDisableAutoHideCursor[];
 extern const char kStandardWindow[];
 extern const char kBackgroundColor[];
 extern const char kHasShadow[];
+extern const char kOpacity[];
 extern const char kFocusable[];
 extern const char kWebPreferences[];
 extern const char kVibrancyType[];

docs/api/browser-window.md

@@ -205,6 +205,8 @@ It creates a new `BrowserWindow` with native properties as set by the `options`.
     `#FFF` (white).
   * `hasShadow` Boolean (optional) - Whether window should have a shadow. This is only
     implemented on macOS. Default is `true`.
+  * `opacity` Number (optional) - Set the initial opacity of the window, between 0.0 (fully
+    transparent) and 1.0 (fully opaque). This is only implemented on Windows and macOS.
   * `darkTheme` Boolean (optional) - Forces using dark theme for the window, only works on
     some GTK+3 desktop environments. Default is `false`.
   * `transparent` Boolean (optional) - Makes the window [transparent](frameless-window.md).
@@ -1206,6 +1208,16 @@ Returns `Boolean` - Whether the window has a shadow.
 On Windows and Linux always returns
 `true`.
 
+#### `win.setOpacity(opacity)` _Windows_ _macOS_
+
+* `opacity` Number - between 0.0 (fully transparent) and 1.0 (fully opaque)
+
+Sets the opacity of the window. On Linux does nothing.
+
+#### `win.getOpacity()` _Windows_ _macOS_
+
+Returns `Number` - between 0.0 (fully transparent) and 1.0 (fully opaque)
+
 #### `win.setThumbarButtons(buttons)` _Windows_
 
 * `buttons` [ThumbarButton[]](structures/thumbar-button.md)

spec/api-browser-window-spec.js

@@ -807,6 +807,30 @@ describe('BrowserWindow module', function () {
     })
   })
 
+  describe('BrowserWindow.setOpacity(opacity)', function () {
+    it('make window with initial opacity', function () {
+      w.destroy()
+      w = new BrowserWindow({
+        show: false,
+        width: 400,
+        height: 400,
+        opacity: 0.5
+      })
+      assert.equal(w.getOpacity(), 0.5)
+    })
+
+    it('allows setting the opacity', function () {
+      assert.doesNotThrow(function () {
+        w.setOpacity(0.0)
+        assert.equal(w.getOpacity(), 0.0)
+        w.setOpacity(0.5)
+        assert.equal(w.getOpacity(), 0.5)
+        w.setOpacity(1.0)
+        assert.equal(w.getOpacity(), 1.0)
+      })
+    })
+  })
+
   describe('"useContentSize" option', function () {
     it('make window created with content size when used', function () {
       w.destroy()