feat: enable Windows Control Overlay on Linux (#42682)
* feat: enable Windows Control Overlay on Linux Co-authored-by: Shelley Vohr <shelley.vohr@gmail.com> * docs: update documentation for Linux WCO Co-authored-by: Shelley Vohr <shelley.vohr@gmail.com> * fix: initial symbol painting Co-authored-by: Shelley Vohr <shelley.vohr@gmail.com> * test: enable WCO tests for Linux Co-authored-by: Shelley Vohr <shelley.vohr@gmail.com> * fix: add missing Layer include Co-authored-by: Shelley Vohr <shelley.vohr@gmail.com> * chore: fix gn-check failure Co-authored-by: Shelley Vohr <shelley.vohr@gmail.com> * fix: enable BrowserWindow.setTitleBarOverlay on Linux Co-authored-by: Shelley Vohr <shelley.vohr@gmail.com> * test: fix test for maximize event on Linux Co-authored-by: Shelley Vohr <shelley.vohr@gmail.com> * fix: geometry updating on BrowserWindow.setTitleBarOverlay Co-authored-by: Shelley Vohr <shelley.vohr@gmail.com> * fix: crash when invalid titleBarStyle set Co-authored-by: Shelley Vohr <shelley.vohr@gmail.com> * chore: clean up ordering and comments Co-authored-by: Shelley Vohr <shelley.vohr@gmail.com> * Update docs/api/structures/base-window-options.md Co-authored-by: Erick Zhao <erick@hotmail.ca> Co-authored-by: Shelley Vohr <shelley.vohr@gmail.com> * feat: enable customizing symbolColor Co-authored-by: Shelley Vohr <shelley.vohr@gmail.com> * docs: correct symbolColor reference Co-authored-by: Shelley Vohr <shelley.vohr@gmail.com> * chore: update patches Co-authored-by: PatchUp <73610968+patchup[bot]@users.noreply.github.com> * chore: remove Chrome-specific padding Co-authored-by: Shelley Vohr <shelley.vohr@gmail.com> --------- Co-authored-by: trop[bot] <37223003+trop[bot]@users.noreply.github.com> Co-authored-by: Shelley Vohr <shelley.vohr@gmail.com> Co-authored-by: PatchUp <73610968+patchup[bot]@users.noreply.github.com>
This commit is contained in:
trop[bot]
GitHub
parent
89d09922f7
commit
342ef8e7e1
24 changed files with 1026 additions and 107 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1641,15 +1641,16 @@ with `addBrowserView` or `setBrowserView`. The top-most BrowserView is the last
|
|||
> 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
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue