Bump v16.0.0-beta.3

Co-authored-by: Shelley Vohr <shelley.vohr@gmail.com>

ELECTRON_VERSION

@@ -1 +1 @@
-16.0.0-beta.2
+16.0.0-beta.3

docs/api/browser-window.md

@@ -17,10 +17,11 @@ win.loadURL('https://github.com')
 win.loadFile('index.html')
 ```
 
-## Frameless window
+## Window customization
 
-To create a window without chrome, or a transparent window in arbitrary shape,
-you can use the [Frameless Window](frameless-window.md) API.
+The `BrowserWindow` class exposes various ways to modify the look and behavior of
+your app's windows. For more details, see the [Window Customization](../tutorial/window-customization.md)
+tutorial.
 
 ## Showing the window gracefully
 
@@ -184,7 +185,7 @@ It creates a new `BrowserWindow` with native properties as set by the `options`.
     `true`.
   * `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`.
   * `frame` Boolean (optional) - Specify `false` to create a
-    [Frameless Window](frameless-window.md). Default is `true`.
+    [frameless window](../tutorial/window-customization.md#create-frameless-windows). Default is `true`.
   * `parent` BrowserWindow (optional) - Specify parent window. Default is `null`.
   * `modal` Boolean (optional) - Whether this is a modal window. This only works when the
     window is a child window. Default is `false`.
@@ -206,7 +207,7 @@ It creates a new `BrowserWindow` with native properties as set by the `options`.
     transparent) and 1.0 (fully opaque). This is only implemented on Windows and macOS.
   * `darkTheme` Boolean (optional) - Forces using dark theme for the window, only works on
     some GTK+3 desktop environments. Default is `false`.
-  * `transparent` Boolean (optional) - Makes the window [transparent](frameless-window.md#transparent-window).
+  * `transparent` Boolean (optional) - Makes the window [transparent](../tutorial/window-customization.md#create-transparent-windows).
     Default is `false`. On Windows, does not work unless the window is frameless.
   * `type` String (optional) - The type of window, default is normal window. See more about
     this below.

docs/api/frameless-window.md

@@ -1,221 +0,0 @@
-# Frameless Window
-
-> Open a window without toolbars, borders, or other graphical "chrome".
-
-A frameless window is a window that has no
-[chrome](https://developer.mozilla.org/en-US/docs/Glossary/Chrome), the parts of
-the window, like toolbars, that are not a part of the web page. These are
-options on the [`BrowserWindow`](browser-window.md) class.
-
-## Create a frameless window
-
-To create a frameless window, you need to set `frame` to `false` in
-[BrowserWindow](browser-window.md)'s `options`:
-
-```javascript
-const { BrowserWindow } = require('electron')
-const win = new BrowserWindow({ width: 800, height: 600, frame: false })
-win.show()
-```
-
-### Alternatives
-
-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" 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. On macOS, the title bar still has the standard window controls (“traffic lights”) in the top left.
-
-```javascript
-const { BrowserWindow } = require('electron')
-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.
-
-```javascript
-const { BrowserWindow } = require('electron')
-const win = new BrowserWindow({ titleBarStyle: 'hiddenInset' })
-win.show()
-```
-
-#### `customButtonsOnHover`
-
-Uses custom drawn close, and miniaturize buttons that display
-when hovering in the top left of the window. The fullscreen button
-is not available due to restrictions of frameless windows as they
-interface with Apple's macOS window masks. These custom buttons prevent
-issues with mouse events that occur with the standard window toolbar buttons.
-This option is only applicable for frameless windows.
-
-```javascript
-const { BrowserWindow } = require('electron')
-const win = new BrowserWindow({ titleBarStyle: 'customButtonsOnHover', frame: false })
-win.show()
-```
-
-## Windows Control Overlay
-
-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: '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
-window transparent:
-
-```javascript
-const { BrowserWindow } = require('electron')
-const win = new BrowserWindow({ transparent: true, frame: false })
-win.show()
-```
-
-### Limitations
-
-* You can not click through the transparent area. We are going to introduce an
-  API to set window shape to solve this, see
-  [our issue](https://github.com/electron/electron/issues/1335) for details.
-* Transparent windows are not resizable. Setting `resizable` to `true` may make
-  a transparent window stop working on some platforms.
-* The `blur` filter only applies to the web page, so there is no way to apply
-  blur effect to the content below the window (i.e. other applications open on
-  the user's system).
-* The window will not be transparent when DevTools is opened.
-* On Windows operating systems,
-  * transparent windows will not work when DWM is
-  disabled.
-  * transparent windows can not be maximized using the Windows system menu or by double clicking the title bar. The reasoning behind this can be seen on [this pull request](https://github.com/electron/electron/pull/28207).
-* On Linux, users have to put `--enable-transparent-visuals --disable-gpu` in
-  the command line to disable GPU and allow ARGB to make transparent window,
-  this is caused by an upstream bug that [alpha channel doesn't work on some
-  NVidia drivers](https://bugs.chromium.org/p/chromium/issues/detail?id=369209) on
-  Linux.
-* On Mac, the native window shadow will not be shown on a transparent window.
-
-## Click-through window
-
-To create a click-through window, i.e. making the window ignore all mouse
-events, you can call the [win.setIgnoreMouseEvents(ignore)][ignore-mouse-events]
-API:
-
-```javascript
-const { BrowserWindow } = require('electron')
-const win = new BrowserWindow()
-win.setIgnoreMouseEvents(true)
-```
-
-### Forwarding
-
-Ignoring mouse messages makes the web page oblivious to mouse movement, meaning
-that mouse movement events will not be emitted. On Windows operating systems an
-optional parameter can be used to forward mouse move messages to the web page,
-allowing events such as `mouseleave` to be emitted:
-
-```javascript
-const { ipcRenderer } = require('electron')
-const el = document.getElementById('clickThroughElement')
-el.addEventListener('mouseenter', () => {
-  ipcRenderer.send('set-ignore-mouse-events', true, { forward: true })
-})
-el.addEventListener('mouseleave', () => {
-  ipcRenderer.send('set-ignore-mouse-events', false)
-})
-
-// Main process
-const { ipcMain } = require('electron')
-ipcMain.on('set-ignore-mouse-events', (event, ...args) => {
-  BrowserWindow.fromWebContents(event.sender).setIgnoreMouseEvents(...args)
-})
-```
-
-This makes the web page click-through when over `el`, and returns to normal
-outside it.
-
-## Draggable region
-
-By default, the frameless window is non-draggable. Apps need to specify
-`-webkit-app-region: drag` in CSS to tell Electron which regions are draggable
-(like the OS's standard titlebar), and apps can also use
-`-webkit-app-region: no-drag` to exclude the non-draggable area from the
- draggable region. Note that only rectangular shapes are currently supported.
-
-Note: `-webkit-app-region: drag` is known to have problems while the developer tools are open. See this [GitHub issue](https://github.com/electron/electron/issues/3647) for more information including a workaround.
-
-To make the whole window draggable, you can add `-webkit-app-region: drag` as
-`body`'s style:
-
-```html
-<body style="-webkit-app-region: drag">
-</body>
-```
-
-And note that if you have made the whole window draggable, you must also mark
-buttons as non-draggable, otherwise it would be impossible for users to click on
-them:
-
-```css
-button {
-  -webkit-app-region: no-drag;
-}
-```
-
-If you're only setting a custom titlebar as draggable, you also need to make all
-buttons in titlebar non-draggable.
-
-## Text selection
-
-In a frameless window the dragging behavior may conflict with selecting text.
-For example, when you drag the titlebar you may accidentally select the text on
-the titlebar. To prevent this, you need to disable text selection within a
-draggable area like this:
-
-```css
-.titlebar {
-  -webkit-user-select: none;
-  -webkit-app-region: drag;
-}
-```
-
-## Context menu
-
-On some platforms, the draggable area will be treated as a non-client frame, so
-when you right click on it a system menu will pop up. To make the context menu
-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

docs/fiddles/windows/manage-windows/frameless-window/index.html

@@ -59,8 +59,9 @@
 
           <p>
             For more details, see the
-            <a href="https://electronjs.org/docs/api/frameless-window/">
-              Frameless Window
+            <a href="https://electronjs.org/docs/tutorial/window-customization/">
+              Window Customization
+
             </a>
             documentation.
           </p>

docs/tutorial/offscreen-rendering.md

@@ -17,7 +17,7 @@ the dirty area is passed to the `paint` event to be more efficient.
 losses with no benefits.
 * When nothing is happening on a webpage, no frames are generated.
 * An offscreen window is always created as a
-[Frameless Window](../api/frameless-window.md).
+[Frameless Window](../tutorial/window-customization.md)..
 
 ### Rendering Modes
 

docs/tutorial/window-customization.md

@@ -0,0 +1,271 @@
+# Window Customization
+
+The `BrowserWindow` module is the foundation of your Electron application, and it exposes
+many APIs that can change the look and behavior of your browser windows. In this
+tutorial, we will be going over the various use-cases for window customization on
+macOS, Windows, and Linux.
+
+## Create frameless windows
+
+A frameless window is a window that has no [chrome]. Not to be confused with the Google
+Chrome browser, window _chrome_ refers to the parts of the window (e.g. toolbars, controls)
+that are not a part of the web page.
+
+To create a frameless window, you need to set `frame` to `false` in the `BrowserWindow`
+constructor.
+
+```javascript title='main.js'
+const { BrowserWindow } = require('electron')
+const win = new BrowserWindow({ frame: false })
+```
+
+## Apply custom title bar styles _macOS_ _Windows_
+
+Title bar styles allow you to hide most of a BrowserWindow's chrome while keeping the
+system's native window controls intact and can be configured with the `titleBarStyle`
+option in the `BrowserWindow` constructor.
+
+Applying the `hidden` title bar style results in a hidden title bar and a full-size
+content window.
+
+```javascript title='main.js'
+const { BrowserWindow } = require('electron')
+const win = new BrowserWindow({ titleBarStyle: 'hidden' })
+```
+
+### Control the traffic lights _macOS_
+
+On macOS, applying the `hidden` title bar style will still expose the standard window
+controls (“traffic lights”) in the top left.
+
+#### Customize the look of your traffic lights _macOS_
+
+The `customButtonsOnHover` title bar style will hide the traffic lights until you hover
+over them. This is useful if you want to create custom traffic lights in your HTML but still
+use the native UI to control the window.
+
+```javascript
+const { BrowserWindow } = require('electron')
+const win = new BrowserWindow({ titleBarStyle: 'customButtonsOnHover' })
+```
+
+#### Customize the traffic light position _macOS_
+
+To modify the position of the traffic light window controls, there are two configuration
+options available.
+
+Applying `hiddenInset` title bar style will shift the vertical inset of the traffic lights
+by a fixed amount.
+
+```javascript title='main.js'
+const { BrowserWindow } = require('electron')
+const win = new BrowserWindow({ titleBarStyle: 'hiddenInset' })
+```
+
+If you need more granular control over the positioning of the traffic lights, you can pass
+a set of coordinates to the `trafficLightPosition` option in the `BrowserWindow`
+constructor.
+
+```javascript title='main.js'
+const { BrowserWindow } = require('electron')
+const win = new BrowserWindow({
+  titleBarStyle: 'hidden',
+  trafficLightPosition: { x: 10, y: 10 }
+})
+```
+
+#### Show and hide the traffic lights programmatically _macOS_
+
+You can also show and hide the traffic lights programmatically from the main process.
+The `win.setWindowButtonVisibility` forces traffic lights to be show or hidden depending
+on the value of its boolean parameter.
+
+```javascript title='main.js'
+const { BrowserWindow } = require('electron')
+const win = new BrowserWindow()
+// hides the traffic lights
+win.setWindowButtonVisibility(false)
+```
+
+> Note: Given the number of APIs available, there are many ways of achieving this. For instance,
+> combining `frame: false` with `win.setWindowButtonVisibility(true)` will yield the same
+> layout outcome as setting `titleBarStyle: 'hidden'`.
+
+## Window Controls Overlay _macOS_ _Windows_
+
+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
+through the `BrowserWindow` constructor option `titleBarOverlay`.
+
+This option only works whenever a custom `titlebarStyle` is applied on macOS or Windows.
+When `titleBarOverlay` is enabled, the window controls become exposed in their default
+position, and DOM elements cannot use the area underneath this region.
+
+The `titleBarOverlay` option accepts two different value formats.
+
+Specifying `true` on either platform will result in an overlay region with default
+system colors:
+
+```javascript title='main.js'
+// on macOS or Windows
+const { BrowserWindow } = require('electron')
+const win = new BrowserWindow({
+  titleBarStyle: 'hidden',
+  titleBarOverlay: true
+})
+```
+
+On Windows, you can also specify the color of the overlay and its symbols by setting
+`titleBarOverlay` to an object with the `color` and `symbolColor` properties. If an option
+is not specified, the color will default to its system color for the window control buttons:
+
+```javascript title='main.js'
+// on Windows
+const { BrowserWindow } = require('electron')
+const win = new BrowserWindow({
+  titleBarStyle: 'hidden',
+  titleBarOverlay: {
+    color: '#2f3241',
+    symbolColor: '#74b1be'
+  }
+})
+```
+
+> Note: Once your title bar overlay is enabled from the main process, you can access the overlay's
+> color and dimension values from a renderer using a set of readonly
+> [JavaScript APIs][overlay-javascript-apis] and [CSS Environment Variables][overlay-css-env-vars].
+
+## Create transparent windows
+
+By setting the `transparent` option to `true`, you can make a fully transparent window.
+
+```javascript title='main.js'
+const { BrowserWindow } = require('electron')
+const win = new BrowserWindow({ transparent: true })
+```
+
+### Limitations
+
+* You cannot click through the transparent area. See
+  [#1335](https://github.com/electron/electron/issues/1335) for details.
+* Transparent windows are not resizable. Setting `resizable` to `true` may make
+  a transparent window stop working on some platforms.
+* The CSS [`blur()`] filter only applies to the window's web contents, so there is no way to apply
+  blur effect to the content below the window (i.e. other applications open on
+  the user's system).
+* The window will not be transparent when DevTools is opened.
+* On _Windows_:
+  * Transparent windows will not work when DWM is disabled.
+  * Transparent windows can not be maximized using the Windows system menu or by double
+  clicking the title bar. The reasoning behind this can be seen on
+  PR [#28207](https://github.com/electron/electron/pull/28207).
+* On _macOS_:
+  * The native window shadow will not be shown on a transparent window.
+
+## Create click-through windows
+
+To create a click-through window, i.e. making the window ignore all mouse
+events, you can call the [win.setIgnoreMouseEvents(ignore)][ignore-mouse-events]
+API:
+
+```javascript title='main.js'
+const { BrowserWindow } = require('electron')
+const win = new BrowserWindow()
+win.setIgnoreMouseEvents(true)
+```
+
+### Forward mouse events _macOS_ _Windows_
+
+Ignoring mouse messages makes the web contents oblivious to mouse movement,
+meaning that mouse movement events will not be emitted. On Windows and macOS, an
+optional parameter can be used to forward mouse move messages to the web page,
+allowing events such as `mouseleave` to be emitted:
+
+```javascript title='main.js'
+const { BrowserWindow, ipcMain } = require('electron')
+const path = require('path')
+
+const win = new BrowserWindow({
+  webPreferences: {
+    preload: path.join(__dirname, 'preload.js')
+  }
+})
+
+ipcMain.on('set-ignore-mouse-events', (event, ...args) => {
+  const win = BrowserWindow.fromWebContents(event.sender)
+  win.setIgnoreMouseEvents(...args)
+})
+```
+
+```javascript title='preload.js'
+window.addEventListener('DOMContentLoaded', () => {
+  const el = document.getElementById('clickThroughElement')
+  el.addEventListener('mouseenter', () => {
+    ipcRenderer.send('set-ignore-mouse-events', true, { forward: true })
+  })
+  el.addEventListener('mouseleave', () => {
+    ipcRenderer.send('set-ignore-mouse-events', false)
+  })
+})
+```
+
+This makes the web page click-through when over the `#clickThroughElement` element,
+and returns to normal outside it.
+
+## Set custom draggable region
+
+By default, the frameless window is non-draggable. Apps need to specify
+`-webkit-app-region: drag` in CSS to tell Electron which regions are draggable
+(like the OS's standard titlebar), and apps can also use
+`-webkit-app-region: no-drag` to exclude the non-draggable area from the
+ draggable region. Note that only rectangular shapes are currently supported.
+
+To make the whole window draggable, you can add `-webkit-app-region: drag` as
+`body`'s style:
+
+```css title='styles.css'
+body {
+  -webkit-app-region: drag;
+}
+```
+
+And note that if you have made the whole window draggable, you must also mark
+buttons as non-draggable, otherwise it would be impossible for users to click on
+them:
+
+```css title='styles.css'
+button {
+  -webkit-app-region: no-drag;
+}
+```
+
+If you're only setting a custom titlebar as draggable, you also need to make all
+buttons in titlebar non-draggable.
+
+### Tip: disable text selection
+
+When creating a draggable region, the dragging behavior may conflict with text selection.
+For example, when you drag the titlebar, you may accidentally select its text contents.
+To prevent this, you need to disable text selection within a draggable area like this:
+
+```css
+.titlebar {
+  -webkit-user-select: none;
+  -webkit-app-region: drag;
+}
+```
+
+### Tip: disable context menus
+
+On some platforms, the draggable area will be treated as a non-client frame, so
+when you right click on it, a system menu will pop up. To make the context menu
+behave correctly on all platforms, you should never use a custom context menu on
+draggable areas.
+
+[`blur()`]: https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur()
+[`BrowserWindow`]: ../api/browser-window.md
+[chrome]: https://developer.mozilla.org/en-US/docs/Glossary/Chrome
+[ignore-mouse-events]: ../api/browser-window.md#winsetignoremouseeventsignore-options
+[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
+[Window Controls Overlay API]: https://github.com/WICG/window-controls-overlay/blob/main/explainer.md

filenames.auto.gni

@@ -23,7 +23,6 @@ auto_filenames = {
     "docs/api/environment-variables.md",
     "docs/api/extensions.md",
     "docs/api/file-object.md",
-    "docs/api/frameless-window.md",
     "docs/api/global-shortcut.md",
     "docs/api/in-app-purchase.md",
     "docs/api/incoming-message.md",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "electron",
-  "version": "16.0.0-beta.2",
+  "version": "16.0.0-beta.3",
   "repository": "https://github.com/electron/electron",
   "description": "Build cross platform desktop apps with JavaScript, HTML, and CSS",
   "devDependencies": {

patches/chromium/fix_media_key_usage_with_globalshortcuts.patch

@@ -10,33 +10,94 @@ receive remote control events until it begins playing audio. This runs
 counter to the design of globalShortcuts, and so we need to instead
 use `ui::MediaKeysListener`.
 
+diff --git a/chrome/browser/extensions/global_shortcut_listener.cc b/chrome/browser/extensions/global_shortcut_listener.cc
+index bc009606d01469125052e68a9cdc82aaa697c764..ff18043cb07d748a49adea9874517fb29e3e7f9f 100644
+--- a/chrome/browser/extensions/global_shortcut_listener.cc
++++ b/chrome/browser/extensions/global_shortcut_listener.cc
+@@ -7,6 +7,7 @@
+ #include "base/check.h"
+ #include "base/notreached.h"
+ #include "content/public/browser/browser_thread.h"
++#include "content/public/browser/media_keys_listener_manager.h"
+ #include "ui/base/accelerators/accelerator.h"
+ 
+ using content::BrowserThread;
+@@ -66,6 +67,22 @@ void GlobalShortcutListener::UnregisterAccelerator(
+     StopListening();
+ }
+ 
++// static
++void GlobalShortcutListener::SetShouldUseInternalMediaKeyHandling(bool should_use) {
++  if (content::MediaKeysListenerManager::
++            IsMediaKeysListenerManagerEnabled()) {
++    content::MediaKeysListenerManager* media_keys_listener_manager =
++        content::MediaKeysListenerManager::GetInstance();
++    DCHECK(media_keys_listener_manager);
++
++    if (should_use) {
++      media_keys_listener_manager->EnableInternalMediaKeyHandling();
++    } else {
++      media_keys_listener_manager->DisableInternalMediaKeyHandling();
++    }
++  }
++}
++
+ void GlobalShortcutListener::UnregisterAccelerators(Observer* observer) {
+   CHECK(BrowserThread::CurrentlyOn(BrowserThread::UI));
+   if (IsShortcutHandlingSuspended())
+diff --git a/chrome/browser/extensions/global_shortcut_listener.h b/chrome/browser/extensions/global_shortcut_listener.h
+index 554930bc33d87ee88a9bcc5f0cf17cef09c27ef0..8df4f91d3db453afb9f73bcaeb82c919ca8d1841 100644
+--- a/chrome/browser/extensions/global_shortcut_listener.h
++++ b/chrome/browser/extensions/global_shortcut_listener.h
+@@ -34,6 +34,8 @@ class GlobalShortcutListener {
+ 
+   static GlobalShortcutListener* GetInstance();
+ 
++  static void SetShouldUseInternalMediaKeyHandling(bool should_use);
++
+   // Register an observer for when a certain |accelerator| is struck. Returns
+   // true if register successfully, or false if 1) the specificied |accelerator|
+   // has been registered by another caller or other native applications, or
 diff --git a/content/browser/media/media_keys_listener_manager_impl.cc b/content/browser/media/media_keys_listener_manager_impl.cc
-index 5938f75742b793868638e693a9a8c8dc686dfc46..bf8782c23095a09dec62c68d7d902df24abcb13e 100644
+index 5938f75742b793868638e693a9a8c8dc686dfc46..1263d679a5174beb960265989c370dd4a58ae7b4 100644
 --- a/content/browser/media/media_keys_listener_manager_impl.cc
 +++ b/content/browser/media/media_keys_listener_manager_impl.cc
-@@ -231,7 +231,7 @@ void MediaKeysListenerManagerImpl::StartListeningForMediaKeysIfNecessary() {
+@@ -231,18 +231,24 @@ void MediaKeysListenerManagerImpl::StartListeningForMediaKeysIfNecessary() {
        media::AudioManager::GetGlobalAppName());
  #endif
  
 -  if (system_media_controls_) {
-+  if (/* DISABLES CODE */ (0)) {
-     system_media_controls_->AddObserver(this);
-     system_media_controls_notifier_ =
-         std::make_unique<SystemMediaControlsNotifier>(
-@@ -239,8 +239,13 @@ void MediaKeysListenerManagerImpl::StartListeningForMediaKeysIfNecessary() {
-   } else {
-     // If we can't access system media controls, then directly listen for media
-     // key keypresses instead.
-+#if defined(OS_MAC)
-+  media_keys_listener_ = ui::MediaKeysListener::Create(
-+        this, ui::MediaKeysListener::Scope::kGlobalRequiresAccessibility);
-+#else
+-    system_media_controls_->AddObserver(this);
+-    system_media_controls_notifier_ =
+-        std::make_unique<SystemMediaControlsNotifier>(
+-            system_media_controls_.get());
+-  } else {
+-    // If we can't access system media controls, then directly listen for media
+-    // key keypresses instead.
++  // This is required for proper functioning of MediaMetadata.
++  system_media_controls_->AddObserver(this);
++  system_media_controls_notifier_ =
++      std::make_unique<SystemMediaControlsNotifier>(
++          system_media_controls_.get());
++
++  // Directly listen for media key keypresses when using GlobalShortcuts.
++#if defined(OS_MACOS)
++  auto scope = media_key_handling_enabled_ ?
++    ui::MediaKeysListener::Scope::kGlobal :
++    ui::MediaKeysListener::Scope::kGlobalRequiresAccessibility;
      media_keys_listener_ = ui::MediaKeysListener::Create(
-         this, ui::MediaKeysListener::Scope::kGlobal);
+-        this, ui::MediaKeysListener::Scope::kGlobal);
+-    DCHECK(media_keys_listener_);
+-  }
++      this, scope);
++#else
++  media_keys_listener_ = ui::MediaKeysListener::Create(
++    this, ui::MediaKeysListener::Scope::kGlobal);
 +#endif
-     DCHECK(media_keys_listener_);
-   }
++  DCHECK(media_keys_listener_);
  
+   EnsureAuxiliaryServices();
+ }
 diff --git a/ui/base/accelerators/media_keys_listener.h b/ui/base/accelerators/media_keys_listener.h
 index c2b03328c0e508995bdc135031500783f500ceba..1b6b14dc2999c99445cef6ffc04d49a7c1728a54 100644
 --- a/ui/base/accelerators/media_keys_listener.h

patches/node/.patches

@@ -25,3 +25,4 @@ repl_fix_crash_when_sharedarraybuffer_disabled.patch
 fix_readbarrier_undefined_symbol_error_on_woa_arm64.patch
 fix_-wunreachable-code-return.patch
 fix_crash_creating_private_key_with_unsupported_algorithm.patch
+fix_event_with_invalid_timestamp_in_trace_log.patch

patches/node/fix_event_with_invalid_timestamp_in_trace_log.patch

@@ -0,0 +1,28 @@
+From 0000000000000000000000000000000000000000 Mon Sep 17 00:00:00 2001
+From: Cezary Kulakowski <cezary@openfin.co>
+Date: Fri, 8 Oct 2021 11:18:58 +0200
+Subject: fix: event with invalid timestamp in trace log
+
+When node is started within Electron's environment it doesn't
+initialize v8 and time of v8's start is never set. As a result
+we log v8's start time as 0 and it breaks timestamps in the
+trace log. With this change we log v8's start time only when
+it was initialized by node.
+
+diff --git a/src/env.cc b/src/env.cc
+index 16af6aec3791df1363682f1ed024c52208b9a8f6..ada0faa93bc223ffbea79a4308796df73ea8ae4e 100644
+--- a/src/env.cc
++++ b/src/env.cc
+@@ -461,8 +461,10 @@ void Environment::InitializeMainContext(Local<Context> context,
+                            environment_start_time_);
+   performance_state_->Mark(performance::NODE_PERFORMANCE_MILESTONE_NODE_START,
+                            per_process::node_start_time);
+-  performance_state_->Mark(performance::NODE_PERFORMANCE_MILESTONE_V8_START,
+-                           performance::performance_v8_start);
++  if (per_process::v8_initialized) {
++    performance_state_->Mark(performance::NODE_PERFORMANCE_MILESTONE_V8_START,
++                             performance::performance_v8_start);
++  }
+ }
+ 
+ Environment::~Environment() {

shell/browser/api/electron_api_browser_window.cc

@@ -37,14 +37,22 @@ BrowserWindow::BrowserWindow(gin::Arguments* args,
       gin::Dictionary::CreateEmpty(isolate);
   options.Get(options::kWebPreferences, &web_preferences);
 
-  // Copy the backgroundColor to webContents.
   v8::Local<v8::Value> value;
   bool transparent = false;
+  options.Get(options::kTransparent, &transparent);
+
+  std::string vibrancy_type;
+#if defined(OS_MAC)
+  options.Get(options::kVibrancyType, &vibrancy_type);
+#endif
+
+  // Copy the backgroundColor to webContents.
   if (options.Get(options::kBackgroundColor, &value)) {
     web_preferences.SetHidden(options::kBackgroundColor, value);
-  } else if (options.Get(options::kTransparent, &transparent) && transparent) {
-    // If the BrowserWindow is transparent, also propagate transparency to the
-    // WebContents unless a separate backgroundColor has been set.
+  } else if (!vibrancy_type.empty() || transparent) {
+    // If the BrowserWindow is transparent or a vibrancy type has been set,
+    // also propagate transparency to the WebContents unless a separate
+    // backgroundColor has been set.
     web_preferences.SetHidden(options::kBackgroundColor,
                               ToRGBAHex(SK_ColorTRANSPARENT));
   }

shell/browser/api/electron_api_global_shortcut.cc

@@ -9,6 +9,7 @@
 #include "base/containers/contains.h"
 #include "base/stl_util.h"
 #include "base/strings/utf_string_conversions.h"
+#include "chrome/common/extensions/command.h"
 #include "gin/dictionary.h"
 #include "gin/object_template_builder.h"
 #include "shell/browser/api/electron_api_system_preferences.h"
@@ -21,6 +22,7 @@
 #include "base/mac/mac_util.h"
 #endif
 
+using extensions::Command;
 using extensions::GlobalShortcutListener;
 
 namespace {
@@ -28,22 +30,23 @@ namespace {
 #if defined(OS_MAC)
 bool RegisteringMediaKeyForUntrustedClient(const ui::Accelerator& accelerator) {
   if (base::mac::IsAtLeastOS10_14()) {
-    constexpr ui::KeyboardCode mediaKeys[] = {
-        ui::VKEY_MEDIA_PLAY_PAUSE, ui::VKEY_MEDIA_NEXT_TRACK,
-        ui::VKEY_MEDIA_PREV_TRACK, ui::VKEY_MEDIA_STOP,
-        ui::VKEY_VOLUME_UP,        ui::VKEY_VOLUME_DOWN,
-        ui::VKEY_VOLUME_MUTE};
-
-    if (std::find(std::begin(mediaKeys), std::end(mediaKeys),
-                  accelerator.key_code()) != std::end(mediaKeys)) {
-      bool trusted =
-          electron::api::SystemPreferences::IsTrustedAccessibilityClient(false);
-      if (!trusted)
+    if (Command::IsMediaKey(accelerator)) {
+      if (!electron::api::SystemPreferences::IsTrustedAccessibilityClient(
+              false))
         return true;
     }
   }
   return false;
 }
+
+bool MapHasMediaKeys(
+    const std::map<ui::Accelerator, base::RepeatingClosure>& accelerator_map) {
+  auto media_key = std::find_if(
+      accelerator_map.begin(), accelerator_map.end(),
+      [](const auto& ac) { return Command::IsMediaKey(ac.first); });
+
+  return media_key != accelerator_map.end();
+}
 #endif
 
 }  // namespace
@@ -83,7 +86,7 @@ bool GlobalShortcut::RegisterAll(
 
   for (auto& accelerator : accelerators) {
     if (!Register(accelerator, callback)) {
-      // unregister all shortcuts if any failed
+      // Unregister all shortcuts if any failed.
       UnregisterSome(registered);
       return false;
     }
@@ -101,8 +104,12 @@ bool GlobalShortcut::Register(const ui::Accelerator& accelerator,
     return false;
   }
 #if defined(OS_MAC)
-  if (RegisteringMediaKeyForUntrustedClient(accelerator))
-    return false;
+  if (Command::IsMediaKey(accelerator)) {
+    if (RegisteringMediaKeyForUntrustedClient(accelerator))
+      return false;
+
+    GlobalShortcutListener::SetShouldUseInternalMediaKeyHandling(false);
+  }
 #endif
 
   if (!GlobalShortcutListener::GetInstance()->RegisterAccelerator(accelerator,
@@ -123,6 +130,13 @@ void GlobalShortcut::Unregister(const ui::Accelerator& accelerator) {
   if (accelerator_callback_map_.erase(accelerator) == 0)
     return;
 
+#if defined(OS_MAC)
+  if (Command::IsMediaKey(accelerator) &&
+      !MapHasMediaKeys(accelerator_callback_map_)) {
+    GlobalShortcutListener::SetShouldUseInternalMediaKeyHandling(true);
+  }
+#endif
+
   GlobalShortcutListener::GetInstance()->UnregisterAccelerator(accelerator,
                                                                this);
 }

shell/browser/resources/win/electron.rc

@@ -50,8 +50,8 @@ END
 //
 
 VS_VERSION_INFO VERSIONINFO
- FILEVERSION 16,0,0,2
- PRODUCTVERSION 16,0,0,2
+ FILEVERSION 16,0,0,3
+ PRODUCTVERSION 16,0,0,3
  FILEFLAGSMASK 0x3fL
 #ifdef _DEBUG
  FILEFLAGS 0x1L