mirrors/electron
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions 1

feat: enable windows control overlay on Windows (#29600)

Browse source 
* rebase "feat: enable windows control overlay on Windows"

* correct compilation error

* fix linting errors

* modify includes and build file

* change `hidden` option to `overlay`

* add patch to fix visual layout

* add button background color parameter

* add button text color parameter

* modify `overlay` in docs and modify button hover/press transition color

* change `text` to `symbol`

* remove todo and fix `text` replacement

* add new titleBarOverlay property and remove titleBarStyle `overlay`

* update browser and frameless window docs

* remove chromium patches

* chore: update patches

* change button hover color, update trailing `_`, update test file

* add dchecks, update title bar drawing checks, update test file

* modify for mac and linux builds

* update docs with overlayColor and overlaySymbolColor

* add corner and side hit test info

* modify docs and copyright info

* modify `titlebar_overlay_` as boolean or object

* move `title_bar_style_ to `NativeWindow`

* update docs with boolean and object titlebar_overlay_

* add `IsEmpty` checks

* move get options for boolean and object checks

* fix linting error

* disable `use_lld` for macos

* Update docs/api/frameless-window.md

Co-authored-by: John Kleinschmidt <jkleinsc@electronjs.org>

* Update docs/api/frameless-window.md

Co-authored-by: John Kleinschmidt <jkleinsc@electronjs.org>

* Update docs/api/frameless-window.md

Co-authored-by: John Kleinschmidt <jkleinsc@electronjs.org>

* Apply docs suggestions from code review

Co-authored-by: Jeremy Rose <jeremya@chromium.org>

* modify `true` option description `titleBarOverlay`

* ci: cleanup keychain after tests on arm64 mac (#30472)

Co-authored-by: John Kleinschmidt <jkleinsc@electronjs.org>
Co-authored-by: PatchUp <73610968+patchup[bot]@users.noreply.github.com>
Co-authored-by: Jeremy Rose <jeremya@chromium.org>
This commit is contained in:
Michaela Laurencin 2021-08-11 11:07:36 -07:00 • committed by GitHub
parent 42936b07fe
commit 41646d1168
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
26 changed files with 974 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

20
docs/api/browser-window.md
View file

@ -213,16 +213,13 @@ It creates a new `BrowserWindow` with native properties as set by the `options`.
* `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) - The style of window title bar.
* `titleBarStyle` String (optional) _macOS_ _Windows_ - The style of window title bar.
Default is `default`. Possible values are:
* `default` - Results in the standard gray opaque Mac title
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.
* `hiddenInset` - Results in a hidden title bar with an alternative look
* `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` - Only on 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` - Results in a hidden title bar and a full size
* `customButtonsOnHover` - Only on 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.
@ -392,10 +389,9 @@ 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 visible,
this property enables the Window Controls Overlay [JavaScript APIs][overlay-javascript-apis] and
[CSS Environment Variables][overlay-css-env-vars]. Default is `false`.
* `titleBarOverlay` Object | Boolean (optional) - When using a frameless window in conjuction 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.
* `symbolColor` String (optional) _Windows_ - The CSS color of the symbols on the Window Controls Overlay when enabled. Default is the system color.
When setting minimum or maximum window size with `minWidth`/`maxWidth`/
`minHeight`/`maxHeight`, it only constrains the users. It won't prevent you from

32
docs/api/frameless-window.md
View file

@ -18,17 +18,17 @@ const win = new BrowserWindow({ width: 800, height: 600, frame: false })
win.show()
```
### Alternatives on macOS
### Alternatives
There's an alternative way to specify a chromeless window.
There's an alternative way to specify a chromeless window on macOS and Windows.
Instead of setting `frame` to `false` which disables both the titlebar and window controls,
you may want to have the title bar hidden and your content extend to the full window size,
yet still preserve the window controls ("traffic lights") for standard window actions.
yet still preserve the window controls ("traffic lights" on macOS) for standard window actions.
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.
Results in a hidden title bar and a full size content window. On macOS, the title bar still has the standard window controls (“traffic lights”) in the top left.
```javascript
const { BrowserWindow } = require('electron')
@ -36,6 +36,8 @@ const win = new BrowserWindow({ titleBarStyle: 'hidden' })
win.show()
```
### Alternatives on macOS
#### `hiddenInset`
Results in a hidden title bar with an alternative look where the traffic light buttons are slightly more inset from the window edge.
@ -63,19 +65,33 @@ 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 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:
When using a frameless window in conjuction with `win.setWindowButtonVisibility(true)` on macOS, using one of the `titleBarStyle`s as described above so
that the traffic lights are visible, or using `titleBarStyle: hidden` on Windows, 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. Specifying `true` will result in an overlay with default system colors.
On Windows, you can also specify the color of the overlay and its symbols by setting `titleBarOverlay` to an object with the options `color` and `symbolColor`. If an option is not specified, the color will default to its system color for the window control buttons:
```javascript
const { BrowserWindow } = require('electron')
const win = new BrowserWindow({
titleBarStyle: 'hiddenInset',
titleBarStyle: 'hidden',
titleBarOverlay: true
})
win.show()
```
```javascript
const { BrowserWindow } = require('electron')
const win = new BrowserWindow({
titleBarStyle: 'hidden',
titleBarOverlay: {
color: '#2f3241',
symbolColor: '#74b1be'
}
})
win.show()
```
## Transparent window
By setting the `transparent` option to `true`, you can also make the frameless