Skip to content

Commit 5513528

Browse files
codebyterepull[bot]
codebytere
authored and
pull[bot]
committed
feat: enable Windows Control Overlay on Linux (#41769)
1 parent 29fe3c3 commit 5513528

24 files changed

+1024
-105
lines changed

‎chromium_src/BUILD.gn

+1-1
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,7 @@ static_library("chrome") {
108108
"//chrome/browser/ui/frame/window_frame_util.h",
109109
"//chrome/browser/ui/ui_features.cc",
110110
"//chrome/browser/ui/ui_features.h",
111+
"//chrome/browser/ui/view_ids.h",
111112
"//chrome/browser/ui/views/eye_dropper/eye_dropper.cc",
112113
"//chrome/browser/ui/views/eye_dropper/eye_dropper.h",
113114
"//chrome/browser/ui/views/overlay/back_to_tab_label_button.cc",
@@ -151,7 +152,6 @@ static_library("chrome") {
151152
"//chrome/browser/media/webrtc/window_icon_util_win.cc",
152153
"//chrome/browser/process_singleton_win.cc",
153154
"//chrome/browser/ui/frame/window_frame_util.h",
154-
"//chrome/browser/ui/view_ids.h",
155155
"//chrome/browser/win/chrome_process_finder.cc",
156156
"//chrome/browser/win/chrome_process_finder.h",
157157
"//chrome/browser/win/titlebar_config.cc",

‎docs/api/base-window.md

+7-6
Original file line numberDiff line numberDiff line change
@@ -1370,15 +1370,16 @@ machine has a touch bar.
13701370
**Note:** The TouchBar API is currently experimental and may change or be
13711371
removed in future Electron releases.
13721372

1373-
#### `win.setTitleBarOverlay(options)` _Windows_
1373+
#### `win.setTitleBarOverlay(options)` _Windows_ _Linux_
13741374

13751375
* `options` Object
1376-
* `color` String (optional) _Windows_ - The CSS color of the Window Controls Overlay when enabled.
1377-
* `symbolColor` String (optional) _Windows_ - The CSS color of the symbols on the Window Controls Overlay when enabled.
1378-
* `height` Integer (optional) _Windows_ - The height of the title bar and Window Controls Overlay in pixels.
1376+
* `color` String (optional) - The CSS color of the Window Controls Overlay when enabled.
1377+
* `symbolColor` String (optional) - The CSS color of the symbols on the Window Controls Overlay when enabled.
1378+
* `height` Integer (optional) - The height of the title bar and Window Controls Overlay in pixels.
13791379

1380-
On a Window with Window Controls Overlay already enabled, this method updates
1381-
the style of the title bar overlay.
1380+
On a Window with Window Controls Overlay already enabled, this method updates the style of the title bar overlay.
1381+
1382+
On Linux, the `symbolColor` is automatically calculated to have minimum accessible contrast to the `color` if not explicitly set.
13821383

13831384
[quick-look]: https://en.wikipedia.org/wiki/Quick_Look
13841385
[vibrancy-docs]: https://developer.apple.com/documentation/appkit/nsvisualeffectview?preferredLanguage=objc

‎docs/api/browser-window.md

+7-6
Original file line numberDiff line numberDiff line change
@@ -1641,15 +1641,16 @@ with `addBrowserView` or `setBrowserView`. The top-most BrowserView is the last
16411641
> The `BrowserView` class is deprecated, and replaced by the new
16421642
> [`WebContentsView`](web-contents-view.md) class.
16431643
1644-
#### `win.setTitleBarOverlay(options)` _Windows_
1644+
#### `win.setTitleBarOverlay(options)` _Windows_ _Linux_
16451645

16461646
* `options` Object
1647-
* `color` String (optional) _Windows_ - The CSS color of the Window Controls Overlay when enabled.
1648-
* `symbolColor` String (optional) _Windows_ - The CSS color of the symbols on the Window Controls Overlay when enabled.
1649-
* `height` Integer (optional) _macOS_ _Windows_ - The height of the title bar and Window Controls Overlay in pixels.
1647+
* `color` String (optional) - The CSS color of the Window Controls Overlay when enabled.
1648+
* `symbolColor` String (optional) - The CSS color of the symbols on the Window Controls Overlay when enabled.
1649+
* `height` Integer (optional) - The height of the title bar and Window Controls Overlay in pixels.
16501650

1651-
On a Window with Window Controls Overlay already enabled, this method updates
1652-
the style of the title bar overlay.
1651+
On a window with Window Controls Overlay already enabled, this method updates the style of the title bar overlay.
1652+
1653+
On Linux, the `symbolColor` is automatically calculated to have minimum accessible contrast to the `color` if not explicitly set.
16531654

16541655
[page-visibility-api]: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
16551656
[quick-look]: https://en.wikipedia.org/wiki/Quick_Look

‎docs/api/structures/base-window-options.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -80,14 +80,14 @@
8080
* `followWindow` - The backdrop should automatically appear active when the window is active, and inactive when it is not. This is the default.
8181
* `active` - The backdrop should always appear active.
8282
* `inactive` - The backdrop should always appear inactive.
83-
* `titleBarStyle` string (optional) _macOS_ _Windows_ - The style of window title bar.
83+
* `titleBarStyle` string (optional) - The style of window title bar.
8484
Default is `default`. Possible values are:
8585
* `default` - Results in the standard title bar for macOS or Windows respectively.
86-
* `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.
87-
* `hiddenInset` _macOS_ - Only on macOS, results in a hidden title bar
86+
* `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.
87+
* `hiddenInset` _macOS_ - Results in a hidden title bar
8888
with an alternative look where the traffic light buttons are slightly
8989
more inset from the window edge.
90-
* `customButtonsOnHover` _macOS_ - Only on macOS, results in a hidden
90+
* `customButtonsOnHover` _macOS_ - Results in a hidden
9191
title bar and a full size content window, the traffic light buttons will
9292
display when being hovered over in the top left of the window.
9393
**Note:** This option is currently experimental.

‎docs/api/structures/browser-window-options.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
* `webPreferences` [WebPreferences](web-preferences.md?inline) (optional) - Settings of web page's features.
44
* `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`.
55
* `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`.
6-
* `color` String (optional) _Windows_ - The CSS color of the Window Controls Overlay when enabled. Default is the system color.
6+
* `color` String (optional) _Windows_ _Linux_ - The CSS color of the Window Controls Overlay when enabled. Default is the system color.
77
* `symbolColor` String (optional) _Windows_ - The CSS color of the symbols on the Window Controls Overlay when enabled. Default is the system color.
8-
* `height` Integer (optional) _macOS_ _Windows_ - The height of the title bar and Window Controls Overlay in pixels. Default is system height.
8+
* `height` Integer (optional) - The height of the title bar and Window Controls Overlay in pixels. Default is system height.
99

1010
[overlay-css-env-vars]: https://github.com/WICG/window-controls-overlay/blob/main/explainer.md#css-environment-variables
1111
[overlay-javascript-apis]: https://github.com/WICG/window-controls-overlay/blob/main/explainer.md#javascript-apis

‎docs/tutorial/window-customization.md

+2-3
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ win.setWindowButtonVisibility(false)
9191
> combining `frame: false` with `win.setWindowButtonVisibility(true)` will yield the same
9292
> layout outcome as setting `titleBarStyle: 'hidden'`.
9393
94-
## Window Controls Overlay _macOS_ _Windows_
94+
## Window Controls Overlay
9595

9696
The [Window Controls Overlay API][] is a web standard that gives web apps the ability to
9797
customize their title bar region when installed on desktop. Electron exposes this API
@@ -115,12 +115,11 @@ const win = new BrowserWindow({
115115
})
116116
```
117117

118-
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.
118+
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.
119119

120120
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:
121121

122122
```js title='main.js'
123-
// on Windows
124123
const { BrowserWindow } = require('electron')
125124
const win = new BrowserWindow({
126125
titleBarStyle: 'hidden',

‎filenames.gni

+4
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,10 @@ filenames = {
4444
"shell/browser/ui/status_icon_gtk.h",
4545
"shell/browser/ui/tray_icon_linux.cc",
4646
"shell/browser/ui/tray_icon_linux.h",
47+
"shell/browser/ui/views/opaque_frame_view.cc",
48+
"shell/browser/ui/views/opaque_frame_view.h",
49+
"shell/browser/ui/views/caption_button_placeholder_container.cc",
50+
"shell/browser/ui/views/caption_button_placeholder_container.h",
4751
"shell/browser/ui/views/client_frame_view_linux.cc",
4852
"shell/browser/ui/views/client_frame_view_linux.h",
4953
"shell/common/application_info_linux.cc",

‎patches/chromium/.patches

+1
Original file line numberDiff line numberDiff line change
@@ -130,3 +130,4 @@ fix_font_face_resolution_when_renderer_is_blocked.patch
130130
feat_enable_passing_exit_code_on_service_process_crash.patch
131131
chore_remove_reference_to_chrome_browser_themes.patch
132132
x11_use_localized_display_label_only_for_browser_process.patch
133+
feat_enable_customizing_symbol_color_in_framecaptionbutton.patch

‎patches/chromium/feat_enable_customizing_symbol_color_in_framecaptionbutton.patch

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
From 0000000000000000000000000000000000000000 Mon Sep 17 00:00:00 2001
2+
From: Shelley Vohr <[email protected]>
3+
Date: Fri, 5 Apr 2024 11:07:22 +0200
4+
Subject: feat: enable customizing symbol color in FrameCaptionButton
5+
6+
This enables customizing the symbol color on a given FrameCaptionButton
7+
for the Window Controls Overlay API on Linux. By default, the symbol color
8+
is dynamically calculated based on the background color of the button to
9+
ensure it has minimum contrast required to be accessible.
10+
11+
This should be upstreamed to Chromium if possible.
12+
13+
diff --git a/ui/views/window/frame_caption_button.cc b/ui/views/window/frame_caption_button.cc
14+
index 73e6020e3b9b6e0d12a8dea991f189b3ddeab14c..b38e5bd1408c26cbbfc995fc2ac5dc5983cc0db7 100644
15+
--- a/ui/views/window/frame_caption_button.cc
16+
+++ b/ui/views/window/frame_caption_button.cc
17+
@@ -107,7 +107,7 @@ FrameCaptionButton::FrameCaptionButton(PressedCallback callback,
18+
FrameCaptionButton::~FrameCaptionButton() = default;
19+
20+
// static
21+
-SkColor FrameCaptionButton::GetButtonColor(SkColor background_color) {
22+
+SkColor FrameCaptionButton::GetAccessibleButtonColor(SkColor background_color) {
23+
// Use IsDark() to change target colors instead of PickContrastingColor(), so
24+
// that DefaultFrameHeader::GetTitleColor() (which uses different target
25+
// colors) can change between light/dark targets at the same time. It looks
26+
@@ -124,6 +124,22 @@ SkColor FrameCaptionButton::GetButtonColor(SkColor background_color) {
27+
.color;
28+
}
29+
30+
+SkColor FrameCaptionButton::GetButtonColor(SkColor background_color) {
31+
+ // If the button color has been overridden, return that.
32+
+ if (button_color_ != SkColor())
33+
+ return button_color_;
34+
+
35+
+ return GetAccessibleButtonColor(background_color);
36+
+}
37+
+
38+
+void FrameCaptionButton::SetButtonColor(SkColor button_color) {
39+
+ if (button_color_ == button_color)
40+
+ return;
41+
+
42+
+ button_color_ = button_color;
43+
+ MaybeRefreshIconAndInkdropBaseColor();
44+
+}
45+
+
46+
// static
47+
float FrameCaptionButton::GetInactiveButtonColorAlphaRatio() {
48+
return 0.38f;
49+
diff --git a/ui/views/window/frame_caption_button.h b/ui/views/window/frame_caption_button.h
50+
index 0ac923a3ca6052d499ed7c1a4f156b0f19ad4e64..3164f79828218d57843eba823e0f14ff456b2df4 100644
51+
--- a/ui/views/window/frame_caption_button.h
52+
+++ b/ui/views/window/frame_caption_button.h
53+
@@ -44,8 +44,18 @@ class VIEWS_EXPORT FrameCaptionButton : public Button {
54+
FrameCaptionButton& operator=(const FrameCaptionButton&) = delete;
55+
~FrameCaptionButton() override;
56+
57+
+ // Gets the color to use for a frame caption button with accessible contrast
58+
+ // to the given background color.
59+
+ static SkColor GetAccessibleButtonColor(SkColor background_color);
60+
+
61+
// Gets the color to use for a frame caption button.
62+
- static SkColor GetButtonColor(SkColor background_color);
63+
+ SkColor GetButtonColor(SkColor background_color);
64+
+
65+
+ // Sets the color to use for a frame caption button.
66+
+ // The color is by default calculated to be an accessible contrast
67+
+ // to the background color, so you should keep that in mind when
68+
+ // overriding that behavior.
69+
+ void SetButtonColor(SkColor button_color);
70+
71+
// Gets the alpha ratio for the colors of inactive frame caption buttons.
72+
static float GetInactiveButtonColorAlphaRatio();
73+
@@ -134,6 +144,7 @@ class VIEWS_EXPORT FrameCaptionButton : public Button {
74+
// TODO(b/292154873): Store the foreground color instead of the background
75+
// color for the SkColor type.
76+
absl::variant<ui::ColorId, SkColor> color_ = gfx::kPlaceholderColor;
77+
+ SkColor button_color_ = SkColor();
78+
79+
// Whether the button should be painted as active.
80+
bool paint_as_active_ = false;

‎shell/browser/api/electron_api_base_window.cc

+19-8
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,8 @@
4040
#include "shell/browser/ui/views/win_frame_view.h"
4141
#include "shell/browser/ui/win/taskbar_host.h"
4242
#include "ui/base/win/shell.h"
43+
#elif BUILDFLAG(IS_LINUX)
44+
#include "shell/browser/ui/views/opaque_frame_view.h"
4345
#endif
4446

4547
#if BUILDFLAG(IS_WIN)
@@ -1041,11 +1043,13 @@ void BaseWindow::SetAppDetails(const gin_helper::Dictionary& options) {
10411043
relaunch_command, relaunch_display_name,
10421044
window_->GetAcceleratedWidget());
10431045
}
1046+
#endif
10441047

1048+
#if BUILDFLAG(IS_WIN) || BUILDFLAG(IS_LINUX)
10451049
void BaseWindow::SetTitleBarOverlay(const gin_helper::Dictionary& options,
10461050
gin_helper::Arguments* args) {
10471051
// Ensure WCO is already enabled on this window
1048-
if (!window_->titlebar_overlay_enabled()) {
1052+
if (!window_->IsWindowControlsOverlayEnabled()) {
10491053
args->ThrowError("Titlebar overlay is not enabled");
10501054
return;
10511055
}
@@ -1090,13 +1094,18 @@ void BaseWindow::SetTitleBarOverlay(const gin_helper::Dictionary& options,
10901094
updated = true;
10911095
}
10921096

1093-
// If anything was updated, invalidate the layout and schedule a paint of the
1094-
// window's frame view
1095-
if (updated) {
1096-
auto* frame_view = static_cast<WinFrameView*>(
1097-
window->widget()->non_client_view()->frame_view());
1098-
frame_view->InvalidateCaptionButtons();
1099-
}
1097+
if (!updated)
1098+
return;
1099+
1100+
// If anything was updated, ensure the overlay is repainted.
1101+
#if BUILDFLAG(IS_WIN)
1102+
auto* frame_view = static_cast<WinFrameView*>(
1103+
window->widget()->non_client_view()->frame_view());
1104+
#else
1105+
auto* frame_view = static_cast<OpaqueFrameView*>(
1106+
window->widget()->non_client_view()->frame_view());
1107+
#endif
1108+
frame_view->InvalidateCaptionButtons();
11001109
}
11011110
#endif
11021111

@@ -1286,6 +1295,8 @@ void BaseWindow::BuildPrototype(v8::Isolate* isolate,
12861295
.SetMethod("setThumbnailClip", &BaseWindow::SetThumbnailClip)
12871296
.SetMethod("setThumbnailToolTip", &BaseWindow::SetThumbnailToolTip)
12881297
.SetMethod("setAppDetails", &BaseWindow::SetAppDetails)
1298+
#endif
1299+
#if BUILDFLAG(IS_WIN) || BUILDFLAG(IS_LINUX)
12891300
.SetMethod("setTitleBarOverlay", &BaseWindow::SetTitleBarOverlay)
12901301
#endif
12911302
.SetProperty("id", &BaseWindow::GetID);

‎shell/browser/api/electron_api_base_window.h

+3
Original file line numberDiff line numberDiff line change
@@ -241,6 +241,9 @@ class BaseWindow : public gin_helper::TrackableObject<BaseWindow>,
241241
bool SetThumbnailClip(const gfx::Rect& region);
242242
bool SetThumbnailToolTip(const std::string& tooltip);
243243
void SetAppDetails(const gin_helper::Dictionary& options);
244+
#endif
245+
246+
#if BUILDFLAG(IS_WIN) || BUILDFLAG(IS_LINUX)
244247
void SetTitleBarOverlay(const gin_helper::Dictionary& options,
245248
gin_helper::Arguments* args);
246249
#endif

‎shell/browser/native_window.cc

-4
Original file line numberDiff line numberDiff line change
@@ -122,10 +122,6 @@ NativeWindow::NativeWindow(const gin_helper::Dictionary& options,
122122
int height;
123123
if (titlebar_overlay_dict.Get(options::kOverlayHeight, &height))
124124
titlebar_overlay_height_ = height;
125-
126-
#if !(BUILDFLAG(IS_WIN) || BUILDFLAG(IS_MAC))
127-
DCHECK(false);
128-
#endif
129125
}
130126
}
131127

‎shell/browser/native_window.h

+12-1
Original file line numberDiff line numberDiff line change
@@ -372,12 +372,23 @@ class NativeWindow : public base::SupportsUserData,
372372
kHiddenInset,
373373
kCustomButtonsOnHover,
374374
};
375+
375376
TitleBarStyle title_bar_style() const { return title_bar_style_; }
377+
378+
bool IsWindowControlsOverlayEnabled() const {
379+
bool valid_titlebar_style = title_bar_style() == TitleBarStyle::kHidden
380+
#if BUILDFLAG(IS_MAC)
381+
||
382+
title_bar_style() == TitleBarStyle::kHiddenInset
383+
#endif
384+
;
385+
return valid_titlebar_style && titlebar_overlay_;
386+
}
387+
376388
int titlebar_overlay_height() const { return titlebar_overlay_height_; }
377389
void set_titlebar_overlay_height(int height) {
378390
titlebar_overlay_height_ = height;
379391
}
380-
bool titlebar_overlay_enabled() const { return titlebar_overlay_; }
381392

382393
bool has_frame() const { return has_frame_; }
383394
void set_has_frame(bool has_frame) { has_frame_ = has_frame; }

0 commit comments

Comments
 (0)