electron · codebytere · Apr 2, 2024 · Apr 3, 2024 · Apr 3, 2024 · Apr 3, 2024
diff --git a/chromium_src/BUILD.gn b/chromium_src/BUILD.gn
@@ -108,6 +108,7 @@ static_library("chrome") {
     "//chrome/browser/ui/frame/window_frame_util.h",
     "//chrome/browser/ui/ui_features.cc",
     "//chrome/browser/ui/ui_features.h",
+    "//chrome/browser/ui/view_ids.h",
     "//chrome/browser/ui/views/eye_dropper/eye_dropper.cc",
     "//chrome/browser/ui/views/eye_dropper/eye_dropper.h",
     "//chrome/browser/ui/views/overlay/back_to_tab_label_button.cc",
@@ -151,7 +152,6 @@ static_library("chrome") {
       "//chrome/browser/media/webrtc/window_icon_util_win.cc",
       "//chrome/browser/process_singleton_win.cc",
       "//chrome/browser/ui/frame/window_frame_util.h",
-      "//chrome/browser/ui/view_ids.h",
       "//chrome/browser/win/chrome_process_finder.cc",
       "//chrome/browser/win/chrome_process_finder.h",
       "//chrome/browser/win/titlebar_config.cc",

diff --git a/docs/api/base-window.md b/docs/api/base-window.md
@@ -1370,15 +1370,16 @@ machine has a touch bar.
 **Note:** The TouchBar API is currently experimental and may change or be
 removed in future Electron releases.
 
-#### `win.setTitleBarOverlay(options)` _Windows_
+#### `win.setTitleBarOverlay(options)` _Windows_ _Linux_
 
 * `options` Object
-  * `color` String (optional) _Windows_ - The CSS color of the Window Controls Overlay when enabled.
-  * `symbolColor` String (optional) _Windows_ - The CSS color of the symbols on the Window Controls Overlay when enabled.
-  * `height` Integer (optional) _Windows_ - The height of the title bar and Window Controls Overlay in pixels.
+  * `color` String (optional) - The CSS color of the Window Controls Overlay when enabled.
+  * `symbolColor` String (optional) - The CSS color of the symbols on the Window Controls Overlay when enabled.
+  * `height` Integer (optional) - The height of the title bar and Window Controls Overlay in pixels.
 
-On a Window with Window Controls Overlay already enabled, this method updates
-the style of the title bar overlay.
+On a Window with Window Controls Overlay already enabled, this method updates the style of the title bar overlay.
+
+On Linux, the `symbolColor` is automatically calculated to have minimum accessible contrast to the `color` if not explicitly set.
 
 [quick-look]: https://en.wikipedia.org/wiki/Quick_Look
 [vibrancy-docs]: https://developer.apple.com/documentation/appkit/nsvisualeffectview?preferredLanguage=objc

diff --git a/docs/api/browser-window.md b/docs/api/browser-window.md
@@ -1580,48 +1580,48 @@
 Sets the touchBar layout for the current window. Specifying `null` or
 `undefined` clears the touch bar. This method only has an effect if the
 machine has a touch bar.

 **Note:** The TouchBar API is currently experimental and may change or be
 removed in future Electron releases.

 #### `win.setBrowserView(browserView)` _Experimental_ _Deprecated_

 * `browserView` [BrowserView](browser-view.md) | null - Attach `browserView` to `win`.
 If there are other `BrowserView`s attached, they will be removed from
 this window.

 > **Note**
 > The `BrowserView` class is deprecated, and replaced by the new
 > [`WebContentsView`](web-contents-view.md) class.

 #### `win.getBrowserView()` _Experimental_ _Deprecated_

 Returns `BrowserView | null` - The `BrowserView` attached to `win`. Returns `null`
 if one is not attached. Throws an error if multiple `BrowserView`s are attached.

 > **Note**
 > The `BrowserView` class is deprecated, and replaced by the new
 > [`WebContentsView`](web-contents-view.md) class.

 #### `win.addBrowserView(browserView)` _Experimental_ _Deprecated_

 * `browserView` [BrowserView](browser-view.md)

 Replacement API for setBrowserView supporting work with multi browser views.

 > **Note**
 > The `BrowserView` class is deprecated, and replaced by the new
 > [`WebContentsView`](web-contents-view.md) class.

 #### `win.removeBrowserView(browserView)` _Experimental_ _Deprecated_

 * `browserView` [BrowserView](browser-view.md)

 > **Note**
 > The `BrowserView` class is deprecated, and replaced by the new
 > [`WebContentsView`](web-contents-view.md) class.

 #### `win.setTopBrowserView(browserView)` _Experimental_ _Deprecated_

 * `browserView` [BrowserView](browser-view.md)

@@ -1641,15 +1641,16 @@
 > The `BrowserView` class is deprecated, and replaced by the new
 > [`WebContentsView`](web-contents-view.md) class.
 
-#### `win.setTitleBarOverlay(options)` _Windows_
+#### `win.setTitleBarOverlay(options)` _Windows_ _Linux_
 
 * `options` Object
-  * `color` String (optional) _Windows_ - The CSS color of the Window Controls Overlay when enabled.
-  * `symbolColor` String (optional) _Windows_ - The CSS color of the symbols on the Window Controls Overlay when enabled.
-  * `height` Integer (optional) _macOS_ _Windows_ - The height of the title bar and Window Controls Overlay in pixels.
+  * `color` String (optional) - The CSS color of the Window Controls Overlay when enabled.
+  * `symbolColor` String (optional) - The CSS color of the symbols on the Window Controls Overlay when enabled.
+  * `height` Integer (optional) - The height of the title bar and Window Controls Overlay in pixels.
 
-On a Window with Window Controls Overlay already enabled, this method updates
-the style of the title bar overlay.
+On a window with Window Controls Overlay already enabled, this method updates the style of the title bar overlay.
+
+On Linux, the `symbolColor` is automatically calculated to have minimum accessible contrast to the `color` if not explicitly set.
 
 [page-visibility-api]: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
 [quick-look]: https://en.wikipedia.org/wiki/Quick_Look

diff --git a/docs/api/structures/base-window-options.md b/docs/api/structures/base-window-options.md
@@ -80,14 +80,14 @@
   * `followWindow` - The backdrop should automatically appear active when the window is active, and inactive when it is not. This is the default.
   * `active` - The backdrop should always appear active.
   * `inactive` - The backdrop should always appear inactive.
-* `titleBarStyle` string (optional) _macOS_ _Windows_ - The style of window title bar.
+* `titleBarStyle` string (optional) - The style of window title bar.
   Default is `default`. Possible values are:
   * `default` - Results in the standard title bar for macOS or Windows respectively.
-  * `hidden` - Results in a hidden title bar and a full size content window. On macOS, the window still has the standard window controls (“traffic lights”) in the top left. On Windows, when combined with `titleBarOverlay: true` it will activate the Window Controls Overlay (see `titleBarOverlay` for more information), otherwise no window controls will be shown.
-  * `hiddenInset` _macOS_ - Only on macOS, results in a hidden title bar
+  * `hidden` - Results in a hidden title bar and a full size content window. On macOS, the window still has the standard window controls (“traffic lights”) in the top left. On Windows and Linux, when combined with `titleBarOverlay: true` it will activate the Window Controls Overlay (see `titleBarOverlay` for more information), otherwise no window controls will be shown.
+  * `hiddenInset` _macOS_ - Results in a hidden title bar
     with an alternative look where the traffic light buttons are slightly
     more inset from the window edge.
-  * `customButtonsOnHover` _macOS_ - Only on macOS, results in a hidden
+  * `customButtonsOnHover` _macOS_ - Results in a hidden
     title bar and a full size content window, the traffic light buttons will
     display when being hovered over in the top left of the window.
     **Note:** This option is currently experimental.

diff --git a/docs/api/structures/browser-window-options.md b/docs/api/structures/browser-window-options.md
@@ -3,9 +3,9 @@
 * `webPreferences` [WebPreferences](web-preferences.md?inline) (optional) - Settings of web page's features.
 * `paintWhenInitiallyHidden` boolean (optional) - Whether the renderer should be active when `show` is `false` and it has just been created.  In order for `document.visibilityState` to work correctly on first load with `show: false` you should set this to `false`.  Setting this to `false` will cause the `ready-to-show` event to not fire.  Default is `true`.
 * `titleBarOverlay` Object | Boolean (optional) -  When using a frameless window in conjunction with `win.setWindowButtonVisibility(true)` on macOS or using a `titleBarStyle` so that the standard window controls ("traffic lights" on macOS) are visible, this property enables the Window Controls Overlay [JavaScript APIs][overlay-javascript-apis] and [CSS Environment Variables][overlay-css-env-vars]. Specifying `true` will result in an overlay with default system colors. Default is `false`.
-  * `color` String (optional) _Windows_ - The CSS color of the Window Controls Overlay when enabled. Default is the system color.
+  * `color` String (optional) _Windows_ _Linux_ - The CSS color of the Window Controls Overlay when enabled. Default is the system color.
   * `symbolColor` String (optional) _Windows_ - The CSS color of the symbols on the Window Controls Overlay when enabled. Default is the system color.
-  * `height` Integer (optional) _macOS_ _Windows_ - The height of the title bar and Window Controls Overlay in pixels. Default is system height.
+  * `height` Integer (optional) - The height of the title bar and Window Controls Overlay in pixels. Default is system height.
 
 [overlay-css-env-vars]: https://github.com/WICG/window-controls-overlay/blob/main/explainer.md#css-environment-variables
 [overlay-javascript-apis]: https://github.com/WICG/window-controls-overlay/blob/main/explainer.md#javascript-apis
diff --git a/docs/tutorial/window-customization.md b/docs/tutorial/window-customization.md
@@ -91,7 +91,7 @@ win.setWindowButtonVisibility(false)
 > combining `frame: false` with `win.setWindowButtonVisibility(true)` will yield the same
 > layout outcome as setting `titleBarStyle: 'hidden'`.
 
-## Window Controls Overlay _macOS_ _Windows_
+## Window Controls Overlay
 
 The [Window Controls Overlay API][] is a web standard that gives web apps the ability to
 customize their title bar region when installed on desktop. Electron exposes this API
@@ -115,12 +115,11 @@ 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. `rgba()`, `hsla()`, and `#RRGGBBAA` color formats are supported to apply transparency.
+On either platform `titleBarOverlay` can also be an object. The height of the overlay can be specified with the `height` property. On Windows and Linux, the color of the overlay and can be specified using the `color` property. On Windows and Linux, the color of the overlay and its symbols can be specified using the `color` and `symbolColor` properties respectively. The `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:
 
 ```js title='main.js'
-// on Windows
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow({
   titleBarStyle: 'hidden',

diff --git a/filenames.gni b/filenames.gni
@@ -44,6 +44,10 @@ filenames = {
     "shell/browser/ui/status_icon_gtk.h",
     "shell/browser/ui/tray_icon_linux.cc",
     "shell/browser/ui/tray_icon_linux.h",
+    "shell/browser/ui/views/opaque_frame_view.cc",
+    "shell/browser/ui/views/opaque_frame_view.h",
+    "shell/browser/ui/views/caption_button_placeholder_container.cc",
+    "shell/browser/ui/views/caption_button_placeholder_container.h",
     "shell/browser/ui/views/client_frame_view_linux.cc",
     "shell/browser/ui/views/client_frame_view_linux.h",
     "shell/common/application_info_linux.cc",

@@ -127,3 +127,4 @@ refactor_expose_file_system_access_blocklist.patch
 partially_revert_is_newly_created_to_allow_for_browser_initiated.patch
 fix_use_app_launch_prefetch_namespace_for_subprocesstype.patch
 feat_add_support_for_missing_dialog_features_to_shell_dialogs.patch
+feat_enable_customizing_symbol_color_in_framecaptionbutton.patch
@@ -0,0 +1,80 @@
+From 0000000000000000000000000000000000000000 Mon Sep 17 00:00:00 2001
+From: Shelley Vohr <shelley.vohr@gmail.com>
+Date: Fri, 5 Apr 2024 11:07:22 +0200
+Subject: feat: enable customizing symbol color in FrameCaptionButton
+
+This enables customizing the symbol color on a given FrameCaptionButton
+for the Window Controls Overlay API on Linux. By default, the symbol color
+is dynamically calculated based on the background color of the button to
+ensure it has minimum contrast required to be accessible.
+
+This should be upstreamed to Chromium if possible.
+
+diff --git a/ui/views/window/frame_caption_button.cc b/ui/views/window/frame_caption_button.cc
+index 73e6020e3b9b6e0d12a8dea991f189b3ddeab14c..b38e5bd1408c26cbbfc995fc2ac5dc5983cc0db7 100644
+--- a/ui/views/window/frame_caption_button.cc
++++ b/ui/views/window/frame_caption_button.cc
+@@ -107,7 +107,7 @@ FrameCaptionButton::FrameCaptionButton(PressedCallback callback,
+ FrameCaptionButton::~FrameCaptionButton() = default;
+
+ // static
+-SkColor FrameCaptionButton::GetButtonColor(SkColor background_color) {
++SkColor FrameCaptionButton::GetAccessibleButtonColor(SkColor background_color) {
+   // Use IsDark() to change target colors instead of PickContrastingColor(), so
+   // that DefaultFrameHeader::GetTitleColor() (which uses different target
+   // colors) can change between light/dark targets at the same time.  It looks
+@@ -124,6 +124,22 @@ SkColor FrameCaptionButton::GetButtonColor(SkColor background_color) {
+       .color;
+ }
+
++SkColor FrameCaptionButton::GetButtonColor(SkColor background_color) {
++  // If the button color has been overridden, return that.
++  if (button_color_ != SkColor())
++    return button_color_;
++
++  return GetAccessibleButtonColor(background_color);
++}
++
++void FrameCaptionButton::SetButtonColor(SkColor button_color) {
++  if (button_color_ == button_color)
++    return;
++
++  button_color_ = button_color;
++  MaybeRefreshIconAndInkdropBaseColor();
++}
++
+ // static
+ float FrameCaptionButton::GetInactiveButtonColorAlphaRatio() {
+   return 0.38f;
+diff --git a/ui/views/window/frame_caption_button.h b/ui/views/window/frame_caption_button.h
+index 0ac923a3ca6052d499ed7c1a4f156b0f19ad4e64..3164f79828218d57843eba823e0f14ff456b2df4 100644
+--- a/ui/views/window/frame_caption_button.h
++++ b/ui/views/window/frame_caption_button.h
+@@ -44,8 +44,18 @@ class VIEWS_EXPORT FrameCaptionButton : public Button {
+   FrameCaptionButton& operator=(const FrameCaptionButton&) = delete;
+   ~FrameCaptionButton() override;
+
++  // Gets the color to use for a frame caption button with accessible contrast
++  // to the given background color.
++  static SkColor GetAccessibleButtonColor(SkColor background_color);
++
+   // Gets the color to use for a frame caption button.
+-  static SkColor GetButtonColor(SkColor background_color);
++  SkColor GetButtonColor(SkColor background_color);
++
++  // Sets the color to use for a frame caption button.
++  // The color is by default calculated to be an accessible contrast
++  // to the background color, so you should keep that in mind when
++  // overriding that behavior.
++  void SetButtonColor(SkColor button_color);
+
+   // Gets the alpha ratio for the colors of inactive frame caption buttons.
+   static float GetInactiveButtonColorAlphaRatio();
+@@ -134,6 +144,7 @@ class VIEWS_EXPORT FrameCaptionButton : public Button {
+   // TODO(b/292154873): Store the foreground color instead of the background
+   // color for the SkColor type.
+   absl::variant<ui::ColorId, SkColor> color_ = gfx::kPlaceholderColor;
++  SkColor button_color_ = SkColor();
+
+   // Whether the button should be painted as active.
+   bool paint_as_active_ = false;
diff --git a/run.js b/run.js
@@ -0,0 +1,29 @@
+// Display native system dialogs for opening and saving files, alerting, etc.
+//
+// For more info, see:
+// https://electronjs.org/docs/api/dialog
+
+const { app, BrowserWindow, dialog } = require('electron/main');
+
+app.whenReady().then(async () => {
+  const mainWindow = new BrowserWindow({ height: 600, width: 600 });
+
+  // Show an "Open File" dialog and attempt to open
+  // the chosen file in our window.
+  try {
+    dialog.showOpenDialog(mainWindow, {
+      properties: ['openFile', 'showHiddenFiles'],
+      buttonLabel: 'OPEN ME!'
+    }).then(({ filePaths, canceled }) => {
+      if (canceled) {
+        console.log('Dialog was canceled');
+      } else {
+        const file = filePaths[0];
+        mainWindow.loadURL(`file://${file}`);
+      }
+    });
+    // console.log('dialog should be closed!!!');
+  } catch (err) {
+    console.log(err);
+  }
+});
diff --git a/shell/browser/api/electron_api_base_window.cc b/shell/browser/api/electron_api_base_window.cc
@@ -40,6 +40,8 @@
 #include "shell/browser/ui/views/win_frame_view.h"
 #include "shell/browser/ui/win/taskbar_host.h"
 #include "ui/base/win/shell.h"
+#elif BUILDFLAG (IS_LINUX)
+#include "shell/browser/ui/views/opaque_frame_view.h"
 #endif
 
 #if BUILDFLAG(IS_WIN)
@@ -1041,11 +1043,13 @@ void BaseWindow::SetAppDetails(const gin_helper::Dictionary& options) {
                                   relaunch_command, relaunch_display_name,
                                   window_->GetAcceleratedWidget());
 }
+#endif
 
+#if BUILDFLAG(IS_WIN) || BUILDFLAG(IS_LINUX)
 void BaseWindow::SetTitleBarOverlay(const gin_helper::Dictionary& options,
-                                    gin_helper::Arguments* args) {
+                                       gin_helper::Arguments* args) {
   // Ensure WCO is already enabled on this window
-  if (!window_->titlebar_overlay_enabled()) {
+  if (!window_->IsWindowControlsOverlayEnabled()) {
     args->ThrowError("Titlebar overlay is not enabled");
     return;
   }
@@ -1090,13 +1094,18 @@ void BaseWindow::SetTitleBarOverlay(const gin_helper::Dictionary& options,
     updated = true;
   }
 
-  // If anything was updated, invalidate the layout and schedule a paint of the
-  // window's frame view
-  if (updated) {
-    auto* frame_view = static_cast<WinFrameView*>(
-        window->widget()->non_client_view()->frame_view());
-    frame_view->InvalidateCaptionButtons();
-  }
+  if (!updated)
+    return;
+
+    // If anything was updated, ensure the overlay is repainted.
+#if BUILDFLAG(IS_WIN)
+  auto* frame_view = static_cast<WinFrameView*>(
+      window->widget()->non_client_view()->frame_view());
+#else
+  auto* frame_view = static_cast<OpaqueFrameView*>(
+      window->widget()->non_client_view()->frame_view());
+#endif
+  frame_view->InvalidateCaptionButtons();
 }
 #endif
 

diff --git a/shell/browser/api/electron_api_base_window.h b/shell/browser/api/electron_api_base_window.h
@@ -241,6 +241,9 @@ class BaseWindow : public gin_helper::TrackableObject<BaseWindow>,
   bool SetThumbnailClip(const gfx::Rect& region);
   bool SetThumbnailToolTip(const std::string& tooltip);
   void SetAppDetails(const gin_helper::Dictionary& options);
+#endif
+
+#if BUILDFLAG(IS_WIN) || BUILDFLAG(IS_LINUX)
   void SetTitleBarOverlay(const gin_helper::Dictionary& options,
                           gin_helper::Arguments* args);
 #endif

diff --git a/shell/browser/native_window.cc b/shell/browser/native_window.cc
@@ -122,10 +122,6 @@ NativeWindow::NativeWindow(const gin_helper::Dictionary& options,
       int height;
       if (titlebar_overlay_dict.Get(options::kOverlayHeight, &height))
         titlebar_overlay_height_ = height;
-
-#if !(BUILDFLAG(IS_WIN) || BUILDFLAG(IS_MAC))
-      DCHECK(false);
-#endif
     }
   }
 

diff --git a/shell/browser/native_window.h b/shell/browser/native_window.h
@@ -372,12 +372,23 @@ class NativeWindow : public base::SupportsUserData,
     kHiddenInset,
     kCustomButtonsOnHover,
   };
+
   TitleBarStyle title_bar_style() const { return title_bar_style_; }
+
+  bool IsWindowControlsOverlayEnabled() const {
+    bool valid_titlebar_style = title_bar_style() == TitleBarStyle::kHidden
+#if BUILDFLAG(IS_MAC)
+                                ||
+                                title_bar_style() == TitleBarStyle::kHiddenInset
+#endif
+        ;
+    return valid_titlebar_style && titlebar_overlay_;
+  }
+
   int titlebar_overlay_height() const { return titlebar_overlay_height_; }
   void set_titlebar_overlay_height(int height) {
     titlebar_overlay_height_ = height;
   }
-  bool titlebar_overlay_enabled() const { return titlebar_overlay_; }
 
   bool has_frame() const { return has_frame_; }
   void set_has_frame(bool has_frame) { has_frame_ = has_frame; }