fix: WCO transparent background (#38693)

* fix: WCO transparency

* doc: wco color transparency

* fix: transparent buttons when calling setTitleBarOverlay

docs/tutorial/window-customization.md

@@ -115,7 +115,7 @@ const win = new BrowserWindow({
 })
 ```
 
-On either platform `titleBarOverlay` can also be an object. On both macOS and Windows, the height of the overlay can be specified with the `height` property. On Windows, the color of the overlay and its symbols can be specified using the `color` and `symbolColor` properties respectively.
+On either platform `titleBarOverlay` can also be an object. On both macOS and Windows, the height of the overlay can be specified with the `height` property. On Windows, the color of the overlay and its symbols can be specified using the `color` and `symbolColor` properties respectively. `rgba()`, `hsla()`, and `#RRGGBBAA` color formats are supported to apply transparency.
 
 If a color option is not specified, the color will default to its system color for the window control buttons. Similarly, if the height option is not specified it will default to the default height:
 
@@ -136,10 +136,6 @@ const win = new BrowserWindow({
 > color and dimension values from a renderer using a set of readonly
 > [JavaScript APIs][overlay-javascript-apis] and [CSS Environment Variables][overlay-css-env-vars].
 
-### Limitations
-
-* Transparent colors are currently not supported. Progress updates for this feature can be found in PR [#33567](https://github.com/electron/electron/issues/33567).
-
 ## Create transparent windows
 
 By setting the `transparent` option to `true`, you can make a fully transparent window.

shell/browser/ui/views/win_caption_button_container.cc

@@ -13,6 +13,7 @@
 #include "shell/browser/ui/views/win_caption_button.h"
 #include "shell/browser/ui/views/win_frame_view.h"
 #include "ui/base/l10n/l10n_util.h"
+#include "ui/compositor/layer.h"
 #include "ui/strings/grit/ui_strings.h"
 #include "ui/views/background.h"
 #include "ui/views/layout/flex_layout.h"
@@ -129,9 +130,7 @@ void WinCaptionButtonContainer::AddedToWidget() {
   UpdateButtons();
 
   if (frame_view_->window()->IsWindowControlsOverlayEnabled()) {
-    SetBackground(views::CreateSolidBackground(
-        frame_view_->window()->overlay_button_color()));
-    SetPaintToLayer();
+    UpdateBackground();
   }
 }
 
@@ -146,6 +145,16 @@ void WinCaptionButtonContainer::OnWidgetBoundsChanged(
   UpdateButtons();
 }
 
+void WinCaptionButtonContainer::UpdateBackground() {
+  const SkColor bg_color = frame_view_->window()->overlay_button_color();
+  const SkAlpha theme_alpha = SkColorGetA(bg_color);
+  SetBackground(views::CreateSolidBackground(bg_color));
+  SetPaintToLayer();
+
+  if (theme_alpha < SK_AlphaOPAQUE)
+    layer()->SetFillsBoundsOpaquely(false);
+}
+
 void WinCaptionButtonContainer::UpdateButtons() {
   const bool is_maximized = frame_view_->frame()->IsMaximized();
   restore_button_->SetVisible(is_maximized);

shell/browser/ui/views/win_caption_button_container.h

@@ -41,6 +41,9 @@ class WinCaptionButtonContainer : public views::View,
   gfx::Size GetButtonSize() const;
   void SetButtonSize(gfx::Size size);
 
+  // Sets caption button container background color.
+  void UpdateBackground();
+
   // Sets caption button visibility and enabled state based on window state.
   // Only one of maximize or restore button should ever be visible at the same
   // time, and both are disabled in tablet UI mode.

shell/browser/ui/views/win_frame_view.cc

@@ -59,8 +59,7 @@ void WinFrameView::InvalidateCaptionButtons() {
   if (!caption_button_container_)
     return;
 
-  caption_button_container_->SetBackground(
-      views::CreateSolidBackground(window()->overlay_button_color()));
+  caption_button_container_->UpdateBackground();
   caption_button_container_->InvalidateLayout();
   caption_button_container_->SchedulePaint();
 }