From 49cc7ef026ad4f12cccd5e29ef7121c8971acaa9 Mon Sep 17 00:00:00 2001 From: John Kleinschmidt Date: Wed, 12 May 2021 16:13:02 -0400 Subject: [PATCH 01/12] feat: enable windows control overlay on macOS --- docs/api/browser-window.md | 9 +- docs/api/frameless-window.md | 4 + .../api/electron_api_browser_window.cc | 4 + .../browser/api/electron_api_browser_window.h | 1 + .../browser/api/electron_api_web_contents.cc | 4 + shell/browser/native_window.cc | 17 ++++ shell/browser/native_window.h | 6 ++ shell/browser/native_window_mac.h | 1 + shell/browser/native_window_mac.mm | 16 ++++ shell/browser/native_window_observer.h | 2 + spec-main/api-browser-window-spec.ts | 35 ++++++++ spec-main/fixtures/pages/overlay.html | 84 +++++++++++++++++++ 12 files changed, 182 insertions(+), 1 deletion(-) create mode 100644 spec-main/fixtures/pages/overlay.html diff --git a/docs/api/browser-window.md b/docs/api/browser-window.md index d202ce94948d7..79229ca3103d7 100644 --- a/docs/api/browser-window.md +++ b/docs/api/browser-window.md @@ -219,9 +219,14 @@ It creates a new `BrowserWindow` with native properties as set by the `options`. bar. * `hidden` - Results in a hidden title bar and a full size content window, yet the title bar still has the standard window controls ("traffic lights") in - the top left. + the top left. Using this value will also enable the Window Controls Overlay + [JavaScript APIs][overlay-javascript-apis] and + [CSS Environment Variables][overlay-css-env-vars]. * `hiddenInset` - Results in a hidden title bar with an alternative look where the traffic light buttons are slightly more inset from the window edge. + Using this value will also enable the Window Controls Overlay + [JavaScript APIs][overlay-javascript-apis] and + [CSS Environment Variables][overlay-css-env-vars]. * `customButtonsOnHover` - 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 @@ -1815,3 +1820,5 @@ removed in future Electron releases. [window-levels]: https://developer.apple.com/documentation/appkit/nswindow/level [chrome-content-scripts]: https://developer.chrome.com/extensions/content_scripts#execution-environment [event-emitter]: https://nodejs.org/api/events.html#events_class_eventemitter +[overlay-javascript-apis]: https://github.com/WICG/window-controls-overlay/blob/main/explainer.md#javascript-apis +[overlay-css-env-vars]: https://github.com/WICG/window-controls-overlay/blob/main/explainer.md#css-environment-variables diff --git a/docs/api/frameless-window.md b/docs/api/frameless-window.md index 8bb253e1948c2..40b1c87f0b1f6 100644 --- a/docs/api/frameless-window.md +++ b/docs/api/frameless-window.md @@ -29,6 +29,7 @@ You can do so by specifying the `titleBarStyle` option: #### `hidden` Results in a hidden title bar and a full size content window, yet the title bar still has the standard window controls (“traffic lights”) in the top left. +Additionally the Window Controls Overlay [JavaScript APIs][overlay-javascript-apis] and [CSS Environment Variables][overlay-css-env-vars] will be enabled. ```javascript const { BrowserWindow } = require('electron') @@ -39,6 +40,7 @@ win.show() #### `hiddenInset` Results in a hidden title bar with an alternative look where the traffic light buttons are slightly more inset from the window edge. +Additionally the Window Controls Overlay [JavaScript APIs][overlay-javascript-apis] and [CSS Environment Variables][overlay-css-env-vars] will be enabled. ```javascript const { BrowserWindow } = require('electron') @@ -186,3 +188,5 @@ behave correctly on all platforms you should never use a custom context menu on draggable areas. [ignore-mouse-events]: browser-window.md#winsetignoremouseeventsignore-options +[overlay-javascript-apis]: https://github.com/WICG/window-controls-overlay/blob/main/explainer.md#javascript-apis +[overlay-css-env-vars]: https://github.com/WICG/window-controls-overlay/blob/main/explainer.md#css-environment-variables diff --git a/shell/browser/api/electron_api_browser_window.cc b/shell/browser/api/electron_api_browser_window.cc index 1ed0d9a52dcb0..4d8fe4e48cdde 100644 --- a/shell/browser/api/electron_api_browser_window.cc +++ b/shell/browser/api/electron_api_browser_window.cc @@ -312,6 +312,10 @@ void BrowserWindow::OnWindowLeaveFullScreen() { BaseWindow::OnWindowLeaveFullScreen(); } +void BrowserWindow::UpdateWindowControlsOverlay(gfx::Rect bounding_rect) { + web_contents()->UpdateWindowControlsOverlay(bounding_rect); +} + void BrowserWindow::CloseImmediately() { // Close all child windows before closing current window. v8::Locker locker(isolate()); diff --git a/shell/browser/api/electron_api_browser_window.h b/shell/browser/api/electron_api_browser_window.h index a985a60c3c07f..31f82ac6aa584 100644 --- a/shell/browser/api/electron_api_browser_window.h +++ b/shell/browser/api/electron_api_browser_window.h @@ -71,6 +71,7 @@ class BrowserWindow : public BaseWindow, void RequestPreferredWidth(int* width) override; void OnCloseButtonClicked(bool* prevent_default) override; void OnWindowIsKeyChanged(bool is_key) override; + void UpdateWindowControlsOverlay(gfx::Rect bounding_rect) override; // BaseWindow: void OnWindowBlur() override; diff --git a/shell/browser/api/electron_api_web_contents.cc b/shell/browser/api/electron_api_web_contents.cc index 9a6db7190e649..796ee69157c78 100644 --- a/shell/browser/api/electron_api_web_contents.cc +++ b/shell/browser/api/electron_api_web_contents.cc @@ -1677,6 +1677,10 @@ void WebContents::ReadyToCommitNavigation( void WebContents::DidFinishNavigation( content::NavigationHandle* navigation_handle) { + if (owner_window_) { + owner_window_->NotifyLayoutWindowControlsOverlay(); + } + if (!navigation_handle->HasCommitted()) return; bool is_main_frame = navigation_handle->IsInMainFrame(); diff --git a/shell/browser/native_window.cc b/shell/browser/native_window.cc index 9bfd5a36f7ddc..73974b791cb74 100644 --- a/shell/browser/native_window.cc +++ b/shell/browser/native_window.cc @@ -394,6 +394,14 @@ void NativeWindow::PreviewFile(const std::string& path, void NativeWindow::CloseFilePreview() {} +gfx::Rect NativeWindow::GetWindowControlsOverlayRect() { + return overlay_rect_; +} + +void NativeWindow::SetWindowControlsOverlayRect(const gfx::Rect& overlay_rect) { + overlay_rect_ = overlay_rect; +} + void NativeWindow::NotifyWindowRequestPreferredWith(int* width) { for (NativeWindowObserver& observer : observers_) observer.RequestPreferredWidth(width); @@ -493,6 +501,7 @@ void NativeWindow::NotifyWindowWillMove(const gfx::Rect& new_bounds, } void NativeWindow::NotifyWindowResize() { + NotifyLayoutWindowControlsOverlay(); for (NativeWindowObserver& observer : observers_) observer.OnWindowResize(); } @@ -591,6 +600,14 @@ void NativeWindow::NotifyWindowSystemContextMenu(int x, observer.OnSystemContextMenu(x, y, prevent_default); } +void NativeWindow::NotifyLayoutWindowControlsOverlay() { + gfx::Rect bounding_rect = GetWindowControlsOverlayRect(); + if (!bounding_rect.IsEmpty()) { + for (NativeWindowObserver& observer : observers_) + observer.UpdateWindowControlsOverlay(bounding_rect); + } +} + #if defined(OS_WIN) void NativeWindow::NotifyWindowMessage(UINT message, WPARAM w_param, diff --git a/shell/browser/native_window.h b/shell/browser/native_window.h index 0c166612ab1e5..74c29a06d0c16 100644 --- a/shell/browser/native_window.h +++ b/shell/browser/native_window.h @@ -254,6 +254,9 @@ class NativeWindow : public base::SupportsUserData, return weak_factory_.GetWeakPtr(); } + virtual gfx::Rect GetWindowControlsOverlayRect(); + virtual void SetWindowControlsOverlayRect(const gfx::Rect& overlay_rect); + // Methods called by the WebContents. virtual void HandleKeyboardEvent( content::WebContents*, @@ -298,6 +301,7 @@ class NativeWindow : public base::SupportsUserData, const base::DictionaryValue& details); void NotifyNewWindowForTab(); void NotifyWindowSystemContextMenu(int x, int y, bool* prevent_default); + void NotifyLayoutWindowControlsOverlay(); #if defined(OS_WIN) void NotifyWindowMessage(UINT message, WPARAM w_param, LPARAM l_param); @@ -390,6 +394,8 @@ class NativeWindow : public base::SupportsUserData, // Accessible title. std::u16string accessible_title_; + gfx::Rect overlay_rect_; + base::WeakPtrFactory weak_factory_{this}; DISALLOW_COPY_AND_ASSIGN(NativeWindow); diff --git a/shell/browser/native_window_mac.h b/shell/browser/native_window_mac.h index 52d052a7be348..3ba33127e5ffd 100644 --- a/shell/browser/native_window_mac.h +++ b/shell/browser/native_window_mac.h @@ -146,6 +146,7 @@ class NativeWindowMac : public NativeWindow, void CloseFilePreview() override; gfx::Rect ContentBoundsToWindowBounds(const gfx::Rect& bounds) const override; gfx::Rect WindowBoundsToContentBounds(const gfx::Rect& bounds) const override; + gfx::Rect GetWindowControlsOverlayRect() override; void NotifyWindowEnterFullScreen() override; void NotifyWindowLeaveFullScreen() override; void SetActive(bool is_key) override; diff --git a/shell/browser/native_window_mac.mm b/shell/browser/native_window_mac.mm index 9c8b3438184a1..0d38bc8734f36 100644 --- a/shell/browser/native_window_mac.mm +++ b/shell/browser/native_window_mac.mm @@ -1809,6 +1809,22 @@ void ViewDidMoveToSuperview(NSView* self, SEL _cmd) { [window_ setAcceptsMouseMovedEvents:forward]; } +gfx::Rect NativeWindowMac::GetWindowControlsOverlayRect() { + gfx::Rect bounding_rect; + if (title_bar_style_ == TitleBarStyle::kHidden || + title_bar_style_ == TitleBarStyle::kHiddenInset) { + NSRect button_frame = [buttons_view_ frame]; + const int overlay_width = GetContentSize().width() - NSWidth(button_frame); + int overlay_height = NSHeight(button_frame) + 6; + if (title_bar_style_ == TitleBarStyle::kHiddenInset) { + overlay_height += 15; + } + bounding_rect = + gfx::Rect(button_frame.size.width, 0, overlay_width, overlay_height); + } + return bounding_rect; +} + // static NativeWindow* NativeWindow::Create(const gin_helper::Dictionary& options, NativeWindow* parent) { diff --git a/shell/browser/native_window_observer.h b/shell/browser/native_window_observer.h index 4f33570de4b02..fa74fef3c8f10 100644 --- a/shell/browser/native_window_observer.h +++ b/shell/browser/native_window_observer.h @@ -104,6 +104,8 @@ class NativeWindowObserver : public base::CheckedObserver { // Called on Windows when App Commands arrive (WM_APPCOMMAND) // Some commands are implemented on on other platforms as well virtual void OnExecuteAppCommand(const std::string& command_name) {} + + virtual void UpdateWindowControlsOverlay(gfx::Rect bounding_rect) {} }; } // namespace electron diff --git a/spec-main/api-browser-window-spec.ts b/spec-main/api-browser-window-spec.ts index 4eb8ba6d42c63..2d4af386c0255 100644 --- a/spec-main/api-browser-window-spec.ts +++ b/spec-main/api-browser-window-spec.ts @@ -1863,7 +1863,36 @@ describe('BrowserWindow module', () => { }); ifdescribe(process.platform === 'darwin' && parseInt(os.release().split('.')[0]) >= 14)('"titleBarStyle" option', () => { + const testWindowsOverlay = async (style: any) => { + const w = new BrowserWindow({ + show: false, + width: 400, + height: 400, + titleBarStyle: style, + webPreferences: { + enableBlinkFeatures: 'WebAppWindowControlsOverlay', + nodeIntegration: true, + contextIsolation: false + } + }); + const overlayHTML = path.join(__dirname, 'fixtures', 'pages', 'overlay.html'); + await w.loadFile(overlayHTML); + const overlayEnabled = await w.webContents.executeJavaScript('navigator.windowControlsOverlay.visible'); + expect(overlayEnabled).to.be.true('overlayEnabled'); + const overlayRect = await w.webContents.executeJavaScript('getJSOverlayProperties()'); + expect(overlayRect.y).to.equal(0); + expect(overlayRect.x).to.be.greaterThan(0); + expect(overlayRect.width).to.be.greaterThan(0); + expect(overlayRect.height).to.be.greaterThan(0); + const cssOverlayRect = await w.webContents.executeJavaScript('getCssOverlayProperties();'); + expect(cssOverlayRect).to.deep.equal(overlayRect); + const geometryChange = emittedOnce(ipcMain, 'geometrychange'); + w.setBounds({ width: 800 }); + const [, newOverlayRect] = await geometryChange; + expect(newOverlayRect.width).to.equal(overlayRect.width + 400); + }; afterEach(closeAllWindows); + afterEach(() => { ipcMain.removeAllListeners('geometrychange'); }); it('creates browser window with hidden title bar', () => { const w = new BrowserWindow({ show: false, @@ -1884,6 +1913,12 @@ describe('BrowserWindow module', () => { const contentSize = w.getContentSize(); expect(contentSize).to.deep.equal([400, 400]); }); + it('sets Window Control Overlay with hidden title bar', async () => { + await testWindowsOverlay('hidden'); + }); + it('sets Window Control Overlay with hidden inset title bar', async () => { + await testWindowsOverlay('hiddenInset'); + }); }); ifdescribe(process.platform === 'darwin')('"enableLargerThanScreen" option', () => { diff --git a/spec-main/fixtures/pages/overlay.html b/spec-main/fixtures/pages/overlay.html new file mode 100644 index 0000000000000..ef7408e53331d --- /dev/null +++ b/spec-main/fixtures/pages/overlay.html @@ -0,0 +1,84 @@ + + + + + + + + + +
+
+ Title goes here + +
+
+
+ + + From 0abf7095ac9b9a36a294fb84e471dc6860d84af2 Mon Sep 17 00:00:00 2001 From: John Kleinschmidt Date: Thu, 27 May 2021 14:30:06 -0400 Subject: [PATCH 02/12] address review feedback --- shell/browser/native_window_mac.mm | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/shell/browser/native_window_mac.mm b/shell/browser/native_window_mac.mm index 0d38bc8734f36..cac53693d4e97 100644 --- a/shell/browser/native_window_mac.mm +++ b/shell/browser/native_window_mac.mm @@ -1453,6 +1453,7 @@ void ViewDidMoveToSuperview(NSView* self, SEL _cmd) { void NativeWindowMac::SetWindowButtonVisibility(bool visible) { window_button_visibility_ = visible; InternalSetWindowButtonVisibility(visible); + NotifyLayoutWindowControlsOverlay(); } bool NativeWindowMac::GetWindowButtonVisibility() const { @@ -1470,6 +1471,7 @@ void ViewDidMoveToSuperview(NSView* self, SEL _cmd) { if (buttons_view_) { [buttons_view_ setMargin:traffic_light_position_]; [buttons_view_ viewDidMoveToWindow]; + NotifyLayoutWindowControlsOverlay(); } } @@ -1811,16 +1813,21 @@ void ViewDidMoveToSuperview(NSView* self, SEL _cmd) { gfx::Rect NativeWindowMac::GetWindowControlsOverlayRect() { gfx::Rect bounding_rect; - if (title_bar_style_ == TitleBarStyle::kHidden || - title_bar_style_ == TitleBarStyle::kHiddenInset) { + if (!has_frame() && buttons_view_ && ![buttons_view_ isHidden] && + !traffic_light_position_) { NSRect button_frame = [buttons_view_ frame]; const int overlay_width = GetContentSize().width() - NSWidth(button_frame); int overlay_height = NSHeight(button_frame) + 6; if (title_bar_style_ == TitleBarStyle::kHiddenInset) { overlay_height += 15; } - bounding_rect = - gfx::Rect(button_frame.size.width, 0, overlay_width, overlay_height); + if (base::i18n::IsRTL()) { + bounding_rect = gfx::Rect(0, 0, overlay_width - button_frame.size.width, + overlay_height); + } else { + bounding_rect = + gfx::Rect(button_frame.size.width, 0, overlay_width, overlay_height); + } } return bounding_rect; } From ebb8ab6bf9dd35ec500f7984cbd971d079f86774 Mon Sep 17 00:00:00 2001 From: John Kleinschmidt Date: Mon, 7 Jun 2021 16:17:40 -0400 Subject: [PATCH 03/12] chore: address review feedback --- docs/api/browser-window.md | 6 ++++-- docs/api/frameless-window.md | 6 ++++-- .../browser/api/electron_api_browser_window.h | 2 +- shell/browser/native_window_mac.mm | 19 +++++++++---------- shell/browser/native_window_observer.h | 2 +- shell/browser/ui/cocoa/window_buttons_view.h | 1 + shell/browser/ui/cocoa/window_buttons_view.mm | 4 ++++ 7 files changed, 24 insertions(+), 16 deletions(-) diff --git a/docs/api/browser-window.md b/docs/api/browser-window.md index 79229ca3103d7..59774bb9650d7 100644 --- a/docs/api/browser-window.md +++ b/docs/api/browser-window.md @@ -219,12 +219,14 @@ It creates a new `BrowserWindow` with native properties as set by the `options`. bar. * `hidden` - Results in a hidden title bar and a full size content window, yet the title bar still has the standard window controls ("traffic lights") in - the top left. Using this value will also enable the Window Controls Overlay + the top left. If `enableBlinkFeatures: 'WebAppWindowControlsOverlay'` is set, + using this value will also enable the Window Controls Overlay [JavaScript APIs][overlay-javascript-apis] and [CSS Environment Variables][overlay-css-env-vars]. * `hiddenInset` - Results in a hidden title bar with an alternative look where the traffic light buttons are slightly more inset from the window edge. - Using this value will also enable the Window Controls Overlay + If `enableBlinkFeatures: 'WebAppWindowControlsOverlay'` is set, using this + value will also enable the Window Controls Overlay [JavaScript APIs][overlay-javascript-apis] and [CSS Environment Variables][overlay-css-env-vars]. * `customButtonsOnHover` - Results in a hidden title bar and a full size diff --git a/docs/api/frameless-window.md b/docs/api/frameless-window.md index 40b1c87f0b1f6..40f61cf2be1db 100644 --- a/docs/api/frameless-window.md +++ b/docs/api/frameless-window.md @@ -29,7 +29,8 @@ You can do so by specifying the `titleBarStyle` option: #### `hidden` Results in a hidden title bar and a full size content window, yet the title bar still has the standard window controls (“traffic lights”) in the top left. -Additionally the Window Controls Overlay [JavaScript APIs][overlay-javascript-apis] and [CSS Environment Variables][overlay-css-env-vars] will be enabled. +Additionally, if `enableBlinkFeatures: 'WebAppWindowControlsOverlay'` is set, the Window Controls Overlay [JavaScript APIs][overlay-javascript-apis] and +[CSS Environment Variables][overlay-css-env-vars] will be enabled. ```javascript const { BrowserWindow } = require('electron') @@ -40,7 +41,8 @@ win.show() #### `hiddenInset` Results in a hidden title bar with an alternative look where the traffic light buttons are slightly more inset from the window edge. -Additionally the Window Controls Overlay [JavaScript APIs][overlay-javascript-apis] and [CSS Environment Variables][overlay-css-env-vars] will be enabled. +Additionally, if `enableBlinkFeatures: 'WebAppWindowControlsOverlay'` is set, the Window Controls Overlay +[JavaScript APIs][overlay-javascript-apis] and [CSS Environment Variables][overlay-css-env-vars] will be enabled. ```javascript const { BrowserWindow } = require('electron') diff --git a/shell/browser/api/electron_api_browser_window.h b/shell/browser/api/electron_api_browser_window.h index 31f82ac6aa584..1a8e74c19e372 100644 --- a/shell/browser/api/electron_api_browser_window.h +++ b/shell/browser/api/electron_api_browser_window.h @@ -71,7 +71,7 @@ class BrowserWindow : public BaseWindow, void RequestPreferredWidth(int* width) override; void OnCloseButtonClicked(bool* prevent_default) override; void OnWindowIsKeyChanged(bool is_key) override; - void UpdateWindowControlsOverlay(gfx::Rect bounding_rect) override; + void UpdateWindowControlsOverlay(const gfx::Rect bounding_rect) override; // BaseWindow: void OnWindowBlur() override; diff --git a/shell/browser/native_window_mac.mm b/shell/browser/native_window_mac.mm index cac53693d4e97..d25dab4a0b397 100644 --- a/shell/browser/native_window_mac.mm +++ b/shell/browser/native_window_mac.mm @@ -1813,20 +1813,19 @@ void ViewDidMoveToSuperview(NSView* self, SEL _cmd) { gfx::Rect NativeWindowMac::GetWindowControlsOverlayRect() { gfx::Rect bounding_rect; - if (!has_frame() && buttons_view_ && ![buttons_view_ isHidden] && - !traffic_light_position_) { + if (!has_frame() && buttons_view_ && ![buttons_view_ isHidden]) { NSRect button_frame = [buttons_view_ frame]; - const int overlay_width = GetContentSize().width() - NSWidth(button_frame); - int overlay_height = NSHeight(button_frame) + 6; - if (title_bar_style_ == TitleBarStyle::kHiddenInset) { - overlay_height += 15; - } + gfx::Point buttons_view_margin = [buttons_view_ getMargin]; + const int overlay_width = GetContentSize().width() - NSWidth(button_frame) - + buttons_view_margin.x(); + CGFloat overlay_height = + NSHeight(button_frame) + buttons_view_margin.y() * 2; if (base::i18n::IsRTL()) { - bounding_rect = gfx::Rect(0, 0, overlay_width - button_frame.size.width, - overlay_height); + bounding_rect = gfx::Rect(0, 0, overlay_width, overlay_height); } else { bounding_rect = - gfx::Rect(button_frame.size.width, 0, overlay_width, overlay_height); + gfx::Rect(button_frame.size.width + buttons_view_margin.x(), 0, + overlay_width, overlay_height); } } return bounding_rect; diff --git a/shell/browser/native_window_observer.h b/shell/browser/native_window_observer.h index fa74fef3c8f10..937706bdb1ab0 100644 --- a/shell/browser/native_window_observer.h +++ b/shell/browser/native_window_observer.h @@ -105,7 +105,7 @@ class NativeWindowObserver : public base::CheckedObserver { // Some commands are implemented on on other platforms as well virtual void OnExecuteAppCommand(const std::string& command_name) {} - virtual void UpdateWindowControlsOverlay(gfx::Rect bounding_rect) {} + virtual void UpdateWindowControlsOverlay(const gfx::Rect bounding_rect) {} }; } // namespace electron diff --git a/shell/browser/ui/cocoa/window_buttons_view.h b/shell/browser/ui/cocoa/window_buttons_view.h index 0adb34ac1be36..d1941bcb4276f 100644 --- a/shell/browser/ui/cocoa/window_buttons_view.h +++ b/shell/browser/ui/cocoa/window_buttons_view.h @@ -26,6 +26,7 @@ - (void)setMargin:(const absl::optional&)margin; - (void)setShowOnHover:(BOOL)yes; - (void)setNeedsDisplayForButtons; +- (gfx::Point)getMargin; @end #endif // SHELL_BROWSER_UI_COCOA_WINDOW_BUTTONS_VIEW_H_ diff --git a/shell/browser/ui/cocoa/window_buttons_view.mm b/shell/browser/ui/cocoa/window_buttons_view.mm index 5ed4a2d14c69d..c51aff3f5d3ac 100644 --- a/shell/browser/ui/cocoa/window_buttons_view.mm +++ b/shell/browser/ui/cocoa/window_buttons_view.mm @@ -116,4 +116,8 @@ - (void)mouseExited:(NSEvent*)event { [self setNeedsDisplayForButtons]; } +- (gfx::Point)getMargin { + return margin_; +} + @end From a40a8684244f6b9dc1a21a2495d267e29955b730 Mon Sep 17 00:00:00 2001 From: John Kleinschmidt Date: Wed, 9 Jun 2021 12:18:45 -0400 Subject: [PATCH 04/12] Address review feedback --- shell/browser/api/electron_api_browser_window.cc | 3 ++- shell/browser/api/electron_api_browser_window.h | 2 +- shell/browser/native_window_observer.h | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/shell/browser/api/electron_api_browser_window.cc b/shell/browser/api/electron_api_browser_window.cc index 4d8fe4e48cdde..cebb425ee0474 100644 --- a/shell/browser/api/electron_api_browser_window.cc +++ b/shell/browser/api/electron_api_browser_window.cc @@ -312,7 +312,8 @@ void BrowserWindow::OnWindowLeaveFullScreen() { BaseWindow::OnWindowLeaveFullScreen(); } -void BrowserWindow::UpdateWindowControlsOverlay(gfx::Rect bounding_rect) { +void BrowserWindow::UpdateWindowControlsOverlay( + const gfx::Rect& bounding_rect) { web_contents()->UpdateWindowControlsOverlay(bounding_rect); } diff --git a/shell/browser/api/electron_api_browser_window.h b/shell/browser/api/electron_api_browser_window.h index 1a8e74c19e372..987fdcffb8351 100644 --- a/shell/browser/api/electron_api_browser_window.h +++ b/shell/browser/api/electron_api_browser_window.h @@ -71,7 +71,7 @@ class BrowserWindow : public BaseWindow, void RequestPreferredWidth(int* width) override; void OnCloseButtonClicked(bool* prevent_default) override; void OnWindowIsKeyChanged(bool is_key) override; - void UpdateWindowControlsOverlay(const gfx::Rect bounding_rect) override; + void UpdateWindowControlsOverlay(const gfx::Rect& bounding_rect) override; // BaseWindow: void OnWindowBlur() override; diff --git a/shell/browser/native_window_observer.h b/shell/browser/native_window_observer.h index 937706bdb1ab0..caa38e4ffa121 100644 --- a/shell/browser/native_window_observer.h +++ b/shell/browser/native_window_observer.h @@ -105,7 +105,7 @@ class NativeWindowObserver : public base::CheckedObserver { // Some commands are implemented on on other platforms as well virtual void OnExecuteAppCommand(const std::string& command_name) {} - virtual void UpdateWindowControlsOverlay(const gfx::Rect bounding_rect) {} + virtual void UpdateWindowControlsOverlay(const gfx::Rect& bounding_rect) {} }; } // namespace electron From 4c476340b128917cf4ef737231f076feb7451195 Mon Sep 17 00:00:00 2001 From: John Kleinschmidt Date: Wed, 9 Jun 2021 13:53:59 -0400 Subject: [PATCH 05/12] update doc per review --- docs/api/frameless-window.md | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/docs/api/frameless-window.md b/docs/api/frameless-window.md index 40f61cf2be1db..9a05364f6f4e9 100644 --- a/docs/api/frameless-window.md +++ b/docs/api/frameless-window.md @@ -29,8 +29,6 @@ You can do so by specifying the `titleBarStyle` option: #### `hidden` Results in a hidden title bar and a full size content window, yet the title bar still has the standard window controls (“traffic lights”) in the top left. -Additionally, if `enableBlinkFeatures: 'WebAppWindowControlsOverlay'` is set, the Window Controls Overlay [JavaScript APIs][overlay-javascript-apis] and -[CSS Environment Variables][overlay-css-env-vars] will be enabled. ```javascript const { BrowserWindow } = require('electron') @@ -41,8 +39,6 @@ win.show() #### `hiddenInset` Results in a hidden title bar with an alternative look where the traffic light buttons are slightly more inset from the window edge. -Additionally, if `enableBlinkFeatures: 'WebAppWindowControlsOverlay'` is set, the Window Controls Overlay -[JavaScript APIs][overlay-javascript-apis] and [CSS Environment Variables][overlay-css-env-vars] will be enabled. ```javascript const { BrowserWindow } = require('electron') @@ -65,6 +61,13 @@ const win = new BrowserWindow({ titleBarStyle: 'customButtonsOnHover', frame: fa win.show() ``` +## Windows Control Overlay + +On macOS, when using a frameless window in conjuction with `win.setWindowButtonVisibility(true)` or using one of the `titleBarStyle`s described above so +that the traffic lights are visibile, you can access the Window Controls Overlay [JavaScript APIs][overlay-javascript-apis] and +[CSS Environment Variables][overlay-css-env-vars] by setting the blink feature `'WebAppWindowControlsOverlay` +(eg `enableBlinkFeatures: 'WebAppWindowControlsOverlay'`). + ## Transparent window By setting the `transparent` option to `true`, you can also make the frameless From 1b58b5b1fcb8f091880a4e5d1f8855399c44afad Mon Sep 17 00:00:00 2001 From: John Kleinschmidt Date: Thu, 17 Jun 2021 16:19:46 -0400 Subject: [PATCH 06/12] only enable WCO when titleBarStyle is overlay --- docs/api/browser-window.md | 11 +++++------ docs/api/frameless-window.md | 13 ++++++++----- shell/browser/native_window_mac.h | 1 + shell/browser/native_window_mac.mm | 7 +++++-- spec-main/api-browser-window-spec.ts | 7 ++----- 5 files changed, 21 insertions(+), 18 deletions(-) diff --git a/docs/api/browser-window.md b/docs/api/browser-window.md index 59774bb9650d7..ffcaf941c88bd 100644 --- a/docs/api/browser-window.md +++ b/docs/api/browser-window.md @@ -219,14 +219,13 @@ It creates a new `BrowserWindow` with native properties as set by the `options`. bar. * `hidden` - Results in a hidden title bar and a full size content window, yet the title bar still has the standard window controls ("traffic lights") in - the top left. If `enableBlinkFeatures: 'WebAppWindowControlsOverlay'` is set, - using this value will also enable the Window Controls Overlay - [JavaScript APIs][overlay-javascript-apis] and - [CSS Environment Variables][overlay-css-env-vars]. + the top left. * `hiddenInset` - Results in a hidden title bar with an alternative look where the traffic light buttons are slightly more inset from the window edge. - If `enableBlinkFeatures: 'WebAppWindowControlsOverlay'` is set, using this - value will also enable the Window Controls Overlay + * `overlay` - Results in a hidden title bar and a full size content window, yet + the title bar still has the standard window controls ("traffic lights" on macOS). + If `enableBlinkFeatures: 'WebAppWindowControlsOverlay'` is set, + using this value will also enable the Window Controls Overlay [JavaScript APIs][overlay-javascript-apis] and [CSS Environment Variables][overlay-css-env-vars]. * `customButtonsOnHover` - Results in a hidden title bar and a full size diff --git a/docs/api/frameless-window.md b/docs/api/frameless-window.md index 9a05364f6f4e9..3d9d4d0069179 100644 --- a/docs/api/frameless-window.md +++ b/docs/api/frameless-window.md @@ -61,12 +61,15 @@ const win = new BrowserWindow({ titleBarStyle: 'customButtonsOnHover', frame: fa win.show() ``` -## Windows Control Overlay +#### `overlay` -On macOS, when using a frameless window in conjuction with `win.setWindowButtonVisibility(true)` or using one of the `titleBarStyle`s described above so -that the traffic lights are visibile, you can access the Window Controls Overlay [JavaScript APIs][overlay-javascript-apis] and -[CSS Environment Variables][overlay-css-env-vars] by setting the blink feature `'WebAppWindowControlsOverlay` -(eg `enableBlinkFeatures: 'WebAppWindowControlsOverlay'`). +Results in a hidden title bar and a full size content window, yet the title bar still has the standard window controls ("traffic lights" on macOS). These controls are in the top left on macOS and top right for Windows. If `enableBlinkFeatures: 'WebAppWindowControlsOverlay'` is set, using this value will also enable the Window Controls Overlay [JavaScript APIs][overlay-javascript-apis] and [CSS Environment Variables][overlay-css-env-vars]. + +```javascript +const { BrowserWindow } = require('electron') +const win = new BrowserWindow({ titleBarStyle: 'overlay' }) +win.show() +``` ## Transparent window diff --git a/shell/browser/native_window_mac.h b/shell/browser/native_window_mac.h index 3ba33127e5ffd..de8a973b8ba42 100644 --- a/shell/browser/native_window_mac.h +++ b/shell/browser/native_window_mac.h @@ -187,6 +187,7 @@ class NativeWindowMac : public NativeWindow, kHidden, kHiddenInset, kCustomButtonsOnHover, + kOverlay }; TitleBarStyle title_bar_style() const { return title_bar_style_; } diff --git a/shell/browser/native_window_mac.mm b/shell/browser/native_window_mac.mm index d25dab4a0b397..25eb2d72f7788 100644 --- a/shell/browser/native_window_mac.mm +++ b/shell/browser/native_window_mac.mm @@ -179,6 +179,8 @@ static bool FromV8(v8::Isolate* isolate, *out = TitleBarStyle::kHiddenInset; } else if (title_bar_style == "customButtonsOnHover") { *out = TitleBarStyle::kCustomButtonsOnHover; + } else if (title_bar_style == "overlay") { + *out = TitleBarStyle::kOverlay; } else { return false; } @@ -1754,7 +1756,8 @@ void ViewDidMoveToSuperview(NSView* self, SEL _cmd) { [[WindowButtonsView alloc] initWithMargin:traffic_light_position_]); if (title_bar_style_ == TitleBarStyle::kCustomButtonsOnHover) [buttons_view_ setShowOnHover:YES]; - if (title_bar_style_ == TitleBarStyle::kHiddenInset && + if ((title_bar_style_ == TitleBarStyle::kHiddenInset || + title_bar_style_ == TitleBarStyle::kOverlay) && !traffic_light_position_) [buttons_view_ setMargin:gfx::Point(12, 11)]; @@ -1813,7 +1816,7 @@ void ViewDidMoveToSuperview(NSView* self, SEL _cmd) { gfx::Rect NativeWindowMac::GetWindowControlsOverlayRect() { gfx::Rect bounding_rect; - if (!has_frame() && buttons_view_ && ![buttons_view_ isHidden]) { + if (title_bar_style_ == TitleBarStyle::kOverlay) { NSRect button_frame = [buttons_view_ frame]; gfx::Point buttons_view_margin = [buttons_view_ getMargin]; const int overlay_width = GetContentSize().width() - NSWidth(button_frame) - diff --git a/spec-main/api-browser-window-spec.ts b/spec-main/api-browser-window-spec.ts index 2d4af386c0255..7b0e85cb61e6e 100644 --- a/spec-main/api-browser-window-spec.ts +++ b/spec-main/api-browser-window-spec.ts @@ -1913,11 +1913,8 @@ describe('BrowserWindow module', () => { const contentSize = w.getContentSize(); expect(contentSize).to.deep.equal([400, 400]); }); - it('sets Window Control Overlay with hidden title bar', async () => { - await testWindowsOverlay('hidden'); - }); - it('sets Window Control Overlay with hidden inset title bar', async () => { - await testWindowsOverlay('hiddenInset'); + it('sets Window Control Overlay with overlay title bar style', async () => { + await testWindowsOverlay('overlay'); }); }); From b13188a9798a57a95813b6215e9d5a7b59e09557 Mon Sep 17 00:00:00 2001 From: John Kleinschmidt Date: Mon, 28 Jun 2021 17:29:44 -0400 Subject: [PATCH 07/12] Revert "only enable WCO when titleBarStyle is overlay" This reverts commit 1b58b5b1fcb8f091880a4e5d1f8855399c44afad. --- docs/api/browser-window.md | 11 ++++++----- docs/api/frameless-window.md | 13 +++++-------- shell/browser/native_window_mac.h | 1 - shell/browser/native_window_mac.mm | 7 ++----- spec-main/api-browser-window-spec.ts | 7 +++++-- 5 files changed, 18 insertions(+), 21 deletions(-) diff --git a/docs/api/browser-window.md b/docs/api/browser-window.md index ffcaf941c88bd..59774bb9650d7 100644 --- a/docs/api/browser-window.md +++ b/docs/api/browser-window.md @@ -219,13 +219,14 @@ It creates a new `BrowserWindow` with native properties as set by the `options`. bar. * `hidden` - Results in a hidden title bar and a full size content window, yet the title bar still has the standard window controls ("traffic lights") in - the top left. + the top left. If `enableBlinkFeatures: 'WebAppWindowControlsOverlay'` is set, + using this value will also enable the Window Controls Overlay + [JavaScript APIs][overlay-javascript-apis] and + [CSS Environment Variables][overlay-css-env-vars]. * `hiddenInset` - Results in a hidden title bar with an alternative look where the traffic light buttons are slightly more inset from the window edge. - * `overlay` - Results in a hidden title bar and a full size content window, yet - the title bar still has the standard window controls ("traffic lights" on macOS). - If `enableBlinkFeatures: 'WebAppWindowControlsOverlay'` is set, - using this value will also enable the Window Controls Overlay + If `enableBlinkFeatures: 'WebAppWindowControlsOverlay'` is set, using this + value will also enable the Window Controls Overlay [JavaScript APIs][overlay-javascript-apis] and [CSS Environment Variables][overlay-css-env-vars]. * `customButtonsOnHover` - Results in a hidden title bar and a full size diff --git a/docs/api/frameless-window.md b/docs/api/frameless-window.md index 3d9d4d0069179..9a05364f6f4e9 100644 --- a/docs/api/frameless-window.md +++ b/docs/api/frameless-window.md @@ -61,15 +61,12 @@ const win = new BrowserWindow({ titleBarStyle: 'customButtonsOnHover', frame: fa win.show() ``` -#### `overlay` +## Windows Control Overlay -Results in a hidden title bar and a full size content window, yet the title bar still has the standard window controls ("traffic lights" on macOS). These controls are in the top left on macOS and top right for Windows. If `enableBlinkFeatures: 'WebAppWindowControlsOverlay'` is set, using this value will also enable the Window Controls Overlay [JavaScript APIs][overlay-javascript-apis] and [CSS Environment Variables][overlay-css-env-vars]. - -```javascript -const { BrowserWindow } = require('electron') -const win = new BrowserWindow({ titleBarStyle: 'overlay' }) -win.show() -``` +On macOS, when using a frameless window in conjuction with `win.setWindowButtonVisibility(true)` or using one of the `titleBarStyle`s described above so +that the traffic lights are visibile, you can access the Window Controls Overlay [JavaScript APIs][overlay-javascript-apis] and +[CSS Environment Variables][overlay-css-env-vars] by setting the blink feature `'WebAppWindowControlsOverlay` +(eg `enableBlinkFeatures: 'WebAppWindowControlsOverlay'`). ## Transparent window diff --git a/shell/browser/native_window_mac.h b/shell/browser/native_window_mac.h index de8a973b8ba42..3ba33127e5ffd 100644 --- a/shell/browser/native_window_mac.h +++ b/shell/browser/native_window_mac.h @@ -187,7 +187,6 @@ class NativeWindowMac : public NativeWindow, kHidden, kHiddenInset, kCustomButtonsOnHover, - kOverlay }; TitleBarStyle title_bar_style() const { return title_bar_style_; } diff --git a/shell/browser/native_window_mac.mm b/shell/browser/native_window_mac.mm index 25eb2d72f7788..d25dab4a0b397 100644 --- a/shell/browser/native_window_mac.mm +++ b/shell/browser/native_window_mac.mm @@ -179,8 +179,6 @@ static bool FromV8(v8::Isolate* isolate, *out = TitleBarStyle::kHiddenInset; } else if (title_bar_style == "customButtonsOnHover") { *out = TitleBarStyle::kCustomButtonsOnHover; - } else if (title_bar_style == "overlay") { - *out = TitleBarStyle::kOverlay; } else { return false; } @@ -1756,8 +1754,7 @@ void ViewDidMoveToSuperview(NSView* self, SEL _cmd) { [[WindowButtonsView alloc] initWithMargin:traffic_light_position_]); if (title_bar_style_ == TitleBarStyle::kCustomButtonsOnHover) [buttons_view_ setShowOnHover:YES]; - if ((title_bar_style_ == TitleBarStyle::kHiddenInset || - title_bar_style_ == TitleBarStyle::kOverlay) && + if (title_bar_style_ == TitleBarStyle::kHiddenInset && !traffic_light_position_) [buttons_view_ setMargin:gfx::Point(12, 11)]; @@ -1816,7 +1813,7 @@ void ViewDidMoveToSuperview(NSView* self, SEL _cmd) { gfx::Rect NativeWindowMac::GetWindowControlsOverlayRect() { gfx::Rect bounding_rect; - if (title_bar_style_ == TitleBarStyle::kOverlay) { + if (!has_frame() && buttons_view_ && ![buttons_view_ isHidden]) { NSRect button_frame = [buttons_view_ frame]; gfx::Point buttons_view_margin = [buttons_view_ getMargin]; const int overlay_width = GetContentSize().width() - NSWidth(button_frame) - diff --git a/spec-main/api-browser-window-spec.ts b/spec-main/api-browser-window-spec.ts index 7b0e85cb61e6e..2d4af386c0255 100644 --- a/spec-main/api-browser-window-spec.ts +++ b/spec-main/api-browser-window-spec.ts @@ -1913,8 +1913,11 @@ describe('BrowserWindow module', () => { const contentSize = w.getContentSize(); expect(contentSize).to.deep.equal([400, 400]); }); - it('sets Window Control Overlay with overlay title bar style', async () => { - await testWindowsOverlay('overlay'); + it('sets Window Control Overlay with hidden title bar', async () => { + await testWindowsOverlay('hidden'); + }); + it('sets Window Control Overlay with hidden inset title bar', async () => { + await testWindowsOverlay('hiddenInset'); }); }); From 382829e4ec7fc210e3a2ce51cee689dc40d47eaa Mon Sep 17 00:00:00 2001 From: John Kleinschmidt Date: Tue, 29 Jun 2021 19:47:20 -0400 Subject: [PATCH 08/12] Add new titleBarOverlay property to manage feature --- docs/api/browser-window.md | 13 +++++-------- docs/api/frameless-window.md | 9 +++++++-- shell/browser/api/electron_api_browser_window.cc | 11 +++++++++++ shell/browser/native_window_mac.h | 2 ++ shell/browser/native_window_mac.mm | 4 +++- shell/common/options_switches.cc | 2 ++ shell/common/options_switches.h | 1 + spec-main/api-browser-window-spec.ts | 4 ++-- 8 files changed, 33 insertions(+), 13 deletions(-) diff --git a/docs/api/browser-window.md b/docs/api/browser-window.md index 59774bb9650d7..7d517e9a5b8fa 100644 --- a/docs/api/browser-window.md +++ b/docs/api/browser-window.md @@ -219,16 +219,9 @@ It creates a new `BrowserWindow` with native properties as set by the `options`. bar. * `hidden` - Results in a hidden title bar and a full size content window, yet the title bar still has the standard window controls ("traffic lights") in - the top left. If `enableBlinkFeatures: 'WebAppWindowControlsOverlay'` is set, - using this value will also enable the Window Controls Overlay - [JavaScript APIs][overlay-javascript-apis] and - [CSS Environment Variables][overlay-css-env-vars]. + the top left. * `hiddenInset` - Results in a hidden title bar with an alternative look where the traffic light buttons are slightly more inset from the window edge. - If `enableBlinkFeatures: 'WebAppWindowControlsOverlay'` is set, using this - value will also enable the Window Controls Overlay - [JavaScript APIs][overlay-javascript-apis] and - [CSS Environment Variables][overlay-css-env-vars]. * `customButtonsOnHover` - 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 @@ -399,6 +392,10 @@ It creates a new `BrowserWindow` with native properties as set by the `options`. contain the layout of the document—without requiring scrolling. Enabling this will cause the `preferred-size-changed` event to be emitted on the `WebContents` when the preferred size changes. Default is `false`. + * `titleBarOverlay` Boolean (optional) - On macOS, when using a frameless window in conjunction with + `win.setWindowButtonVisibility(true)` or using a `titleBarStyle` so that the traffic lights are visibile, + this property enables the Window Controls Overlay [JavaScript APIs][overlay-javascript-apis] and + [CSS Environment Variables][overlay-css-env-vars]. Default is `false`. When setting minimum or maximum window size with `minWidth`/`maxWidth`/ `minHeight`/`maxHeight`, it only constrains the users. It won't prevent you from diff --git a/docs/api/frameless-window.md b/docs/api/frameless-window.md index 9a05364f6f4e9..0af1164e4daaa 100644 --- a/docs/api/frameless-window.md +++ b/docs/api/frameless-window.md @@ -65,8 +65,13 @@ win.show() On macOS, when using a frameless window in conjuction with `win.setWindowButtonVisibility(true)` or using one of the `titleBarStyle`s described above so that the traffic lights are visibile, you can access the Window Controls Overlay [JavaScript APIs][overlay-javascript-apis] and -[CSS Environment Variables][overlay-css-env-vars] by setting the blink feature `'WebAppWindowControlsOverlay` -(eg `enableBlinkFeatures: 'WebAppWindowControlsOverlay'`). +[CSS Environment Variables][overlay-css-env-vars] by setting the `titleBarOverlay` option to true: + +```javascript +const { BrowserWindow } = require('electron') +const win = new BrowserWindow({ titleBarStyle: 'hiddenInset', titleBarOverlay: true }) +win.show() +``` ## Transparent window diff --git a/shell/browser/api/electron_api_browser_window.cc b/shell/browser/api/electron_api_browser_window.cc index cebb425ee0474..eab738e9c9f81 100644 --- a/shell/browser/api/electron_api_browser_window.cc +++ b/shell/browser/api/electron_api_browser_window.cc @@ -57,6 +57,17 @@ BrowserWindow::BrowserWindow(gin::Arguments* args, web_preferences.Set(options::kShow, show); } + bool titleBarOverlay = false; + options.Get(options::ktitleBarOverlay, &titleBarOverlay); + if (titleBarOverlay) { + std::string enabled_features = ""; + if (web_preferences.Get(options::kEnableBlinkFeatures, &enabled_features)) { + enabled_features += ","; + } + enabled_features += "WebAppWindowControlsOverlay"; + web_preferences.Set(options::kEnableBlinkFeatures, enabled_features); + } + // Copy the webContents option to webPreferences. This is only used internally // to implement nativeWindowOpen option. if (options.Get("webContents", &value)) { diff --git a/shell/browser/native_window_mac.h b/shell/browser/native_window_mac.h index 3ba33127e5ffd..c2587d944aa16 100644 --- a/shell/browser/native_window_mac.h +++ b/shell/browser/native_window_mac.h @@ -277,6 +277,8 @@ class NativeWindowMac : public NativeWindow, // The presentation options before entering simple fullscreen mode. NSApplicationPresentationOptions simple_fullscreen_options_; + bool titlebar_overlay_ = false; + DISALLOW_COPY_AND_ASSIGN(NativeWindowMac); }; diff --git a/shell/browser/native_window_mac.mm b/shell/browser/native_window_mac.mm index d25dab4a0b397..8dc0116437fbe 100644 --- a/shell/browser/native_window_mac.mm +++ b/shell/browser/native_window_mac.mm @@ -280,6 +280,7 @@ void ViewDidMoveToSuperview(NSView* self, SEL _cmd) { options.Get(options::kSimpleFullScreen, &always_simple_fullscreen_); options.GetOptional(options::kTrafficLightPosition, &traffic_light_position_); options.Get(options::kVisualEffectState, &visual_effect_state_); + options.Get(options::ktitleBarOverlay, &titlebar_overlay_); if (options.Has(options::kFullscreenWindowTitle)) { EmitWarning( @@ -1813,7 +1814,8 @@ void ViewDidMoveToSuperview(NSView* self, SEL _cmd) { gfx::Rect NativeWindowMac::GetWindowControlsOverlayRect() { gfx::Rect bounding_rect; - if (!has_frame() && buttons_view_ && ![buttons_view_ isHidden]) { + if (titlebar_overlay_ && !has_frame() && buttons_view_ && + ![buttons_view_ isHidden]) { NSRect button_frame = [buttons_view_ frame]; gfx::Point buttons_view_margin = [buttons_view_ getMargin]; const int overlay_width = GetContentSize().width() - NSWidth(button_frame) - diff --git a/shell/common/options_switches.cc b/shell/common/options_switches.cc index 1f036963feef5..da619b9f5fe15 100644 --- a/shell/common/options_switches.cc +++ b/shell/common/options_switches.cc @@ -194,6 +194,8 @@ const char kEnableWebSQL[] = "enableWebSQL"; const char kEnablePreferredSizeMode[] = "enablePreferredSizeMode"; +const char ktitleBarOverlay[] = "titleBarOverlay"; + } // namespace options namespace switches { diff --git a/shell/common/options_switches.h b/shell/common/options_switches.h index e26ad90712976..47d0db155bfbc 100644 --- a/shell/common/options_switches.h +++ b/shell/common/options_switches.h @@ -57,6 +57,7 @@ extern const char kVibrancyType[]; extern const char kVisualEffectState[]; extern const char kTrafficLightPosition[]; extern const char kRoundedCorners[]; +extern const char ktitleBarOverlay[]; // WebPreferences. extern const char kZoomFactor[]; diff --git a/spec-main/api-browser-window-spec.ts b/spec-main/api-browser-window-spec.ts index 2d4af386c0255..bccf2fa11134e 100644 --- a/spec-main/api-browser-window-spec.ts +++ b/spec-main/api-browser-window-spec.ts @@ -1870,10 +1870,10 @@ describe('BrowserWindow module', () => { height: 400, titleBarStyle: style, webPreferences: { - enableBlinkFeatures: 'WebAppWindowControlsOverlay', nodeIntegration: true, contextIsolation: false - } + }, + titleBarOverlay: true }); const overlayHTML = path.join(__dirname, 'fixtures', 'pages', 'overlay.html'); await w.loadFile(overlayHTML); From a64f8acde12929d865dc968440a3052f6ef7b86e Mon Sep 17 00:00:00 2001 From: John Kleinschmidt Date: Tue, 29 Jun 2021 19:59:59 -0400 Subject: [PATCH 09/12] spelling fix --- docs/api/browser-window.md | 2 +- docs/api/frameless-window.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/api/browser-window.md b/docs/api/browser-window.md index 7d517e9a5b8fa..61c4b00e03a9e 100644 --- a/docs/api/browser-window.md +++ b/docs/api/browser-window.md @@ -393,7 +393,7 @@ It creates a new `BrowserWindow` with native properties as set by the `options`. this will cause the `preferred-size-changed` event to be emitted on the `WebContents` when the preferred size changes. Default is `false`. * `titleBarOverlay` Boolean (optional) - On macOS, when using a frameless window in conjunction with - `win.setWindowButtonVisibility(true)` or using a `titleBarStyle` so that the traffic lights are visibile, + `win.setWindowButtonVisibility(true)` or using a `titleBarStyle` so that the traffic lights are visible, this property enables the Window Controls Overlay [JavaScript APIs][overlay-javascript-apis] and [CSS Environment Variables][overlay-css-env-vars]. Default is `false`. diff --git a/docs/api/frameless-window.md b/docs/api/frameless-window.md index 0af1164e4daaa..d4e8f6492e77b 100644 --- a/docs/api/frameless-window.md +++ b/docs/api/frameless-window.md @@ -64,7 +64,7 @@ win.show() ## Windows Control Overlay On macOS, when using a frameless window in conjuction with `win.setWindowButtonVisibility(true)` or using one of the `titleBarStyle`s described above so -that the traffic lights are visibile, you can access the Window Controls Overlay [JavaScript APIs][overlay-javascript-apis] and +that the traffic lights are visible, you can access the Window Controls Overlay [JavaScript APIs][overlay-javascript-apis] and [CSS Environment Variables][overlay-css-env-vars] by setting the `titleBarOverlay` option to true: ```javascript From 0f1ca3dec0637c7c8252f1912352b7b460cd30e2 Mon Sep 17 00:00:00 2001 From: John Kleinschmidt Date: Wed, 30 Jun 2021 10:14:18 -0400 Subject: [PATCH 10/12] Update docs/api/frameless-window.md Co-authored-by: Samuel Attard --- docs/api/frameless-window.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/api/frameless-window.md b/docs/api/frameless-window.md index d4e8f6492e77b..7a73c8925e200 100644 --- a/docs/api/frameless-window.md +++ b/docs/api/frameless-window.md @@ -69,7 +69,10 @@ that the traffic lights are visible, you can access the Window Controls Overlay ```javascript const { BrowserWindow } = require('electron') -const win = new BrowserWindow({ titleBarStyle: 'hiddenInset', titleBarOverlay: true }) +const win = new BrowserWindow({ + titleBarStyle: 'hiddenInset', + titleBarOverlay: true +}) win.show() ``` From fdd888db6262ba30f9dc6cfce1210a90b50cf073 Mon Sep 17 00:00:00 2001 From: John Kleinschmidt Date: Wed, 30 Jun 2021 10:14:28 -0400 Subject: [PATCH 11/12] Update shell/browser/api/electron_api_browser_window.cc Co-authored-by: Samuel Attard --- shell/browser/api/electron_api_browser_window.cc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/shell/browser/api/electron_api_browser_window.cc b/shell/browser/api/electron_api_browser_window.cc index eab738e9c9f81..6c913f307e128 100644 --- a/shell/browser/api/electron_api_browser_window.cc +++ b/shell/browser/api/electron_api_browser_window.cc @@ -64,7 +64,7 @@ BrowserWindow::BrowserWindow(gin::Arguments* args, if (web_preferences.Get(options::kEnableBlinkFeatures, &enabled_features)) { enabled_features += ","; } - enabled_features += "WebAppWindowControlsOverlay"; + enabled_features += kWebAppWindowControlsOverlay.name; web_preferences.Set(options::kEnableBlinkFeatures, enabled_features); } From 7cd5bd07544866e138b519745ce7627128ed4d7b Mon Sep 17 00:00:00 2001 From: John Kleinschmidt Date: Wed, 30 Jun 2021 10:29:41 -0400 Subject: [PATCH 12/12] update per review feedback --- shell/browser/api/electron_api_browser_window.cc | 2 +- shell/browser/native_window.cc | 1 + shell/browser/native_window.h | 2 ++ shell/browser/native_window_mac.h | 2 -- shell/browser/native_window_mac.mm | 1 - 5 files changed, 4 insertions(+), 4 deletions(-) diff --git a/shell/browser/api/electron_api_browser_window.cc b/shell/browser/api/electron_api_browser_window.cc index 6c913f307e128..d8533305dcfa7 100644 --- a/shell/browser/api/electron_api_browser_window.cc +++ b/shell/browser/api/electron_api_browser_window.cc @@ -64,7 +64,7 @@ BrowserWindow::BrowserWindow(gin::Arguments* args, if (web_preferences.Get(options::kEnableBlinkFeatures, &enabled_features)) { enabled_features += ","; } - enabled_features += kWebAppWindowControlsOverlay.name; + enabled_features += features::kWebAppWindowControlsOverlay.name; web_preferences.Set(options::kEnableBlinkFeatures, enabled_features); } diff --git a/shell/browser/native_window.cc b/shell/browser/native_window.cc index 73974b791cb74..435b007835686 100644 --- a/shell/browser/native_window.cc +++ b/shell/browser/native_window.cc @@ -53,6 +53,7 @@ NativeWindow::NativeWindow(const gin_helper::Dictionary& options, options.Get(options::kFrame, &has_frame_); options.Get(options::kTransparent, &transparent_); options.Get(options::kEnableLargerThanScreen, &enable_larger_than_screen_); + options.Get(options::ktitleBarOverlay, &titlebar_overlay_); if (parent) options.Get("modal", &is_modal_); diff --git a/shell/browser/native_window.h b/shell/browser/native_window.h index 74c29a06d0c16..dfceeb1338754 100644 --- a/shell/browser/native_window.h +++ b/shell/browser/native_window.h @@ -346,6 +346,8 @@ class NativeWindow : public base::SupportsUserData, [&browser_view](NativeBrowserView* n) { return (n == browser_view); }); } + bool titlebar_overlay_ = false; + private: std::unique_ptr widget_; diff --git a/shell/browser/native_window_mac.h b/shell/browser/native_window_mac.h index c2587d944aa16..3ba33127e5ffd 100644 --- a/shell/browser/native_window_mac.h +++ b/shell/browser/native_window_mac.h @@ -277,8 +277,6 @@ class NativeWindowMac : public NativeWindow, // The presentation options before entering simple fullscreen mode. NSApplicationPresentationOptions simple_fullscreen_options_; - bool titlebar_overlay_ = false; - DISALLOW_COPY_AND_ASSIGN(NativeWindowMac); }; diff --git a/shell/browser/native_window_mac.mm b/shell/browser/native_window_mac.mm index 8dc0116437fbe..afad4e8f595e4 100644 --- a/shell/browser/native_window_mac.mm +++ b/shell/browser/native_window_mac.mm @@ -280,7 +280,6 @@ void ViewDidMoveToSuperview(NSView* self, SEL _cmd) { options.Get(options::kSimpleFullScreen, &always_simple_fullscreen_); options.GetOptional(options::kTrafficLightPosition, &traffic_light_position_); options.Get(options::kVisualEffectState, &visual_effect_state_); - options.Get(options::ktitleBarOverlay, &titlebar_overlay_); if (options.Has(options::kFullscreenWindowTitle)) { EmitWarning(