Bump v17.4.0

This reverts commit 7c701367c0.

Co-authored-by: Samuel Attard <samuel.r.attard@gmail.com>

.github/CODEOWNERS

@@ -4,7 +4,7 @@
 # https://git-scm.com/docs/gitignore
 
 # Upgrades WG
-/patches/                               @electron/wg-upgrades
+/patches/                               @electron/wg-upgrades @electron/wg-security
 DEPS                                    @electron/wg-upgrades
 
 # Releases WG

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -12,7 +12,7 @@ body:
         required: true
       - label: I agree to follow the [Code of Conduct](https://github.com/electron/electron/blob/main/CODE_OF_CONDUCT.md) that this project adheres to.
         required: true
-      - label: I have searched the [issue tracker](https://www.github.com/electron/electron/issues) for a feature request that matches the one I want to file, without success.
+      - label: I have searched the [issue tracker](https://www.github.com/electron/electron/issues) for a bug report that matches the one I want to file, without success.
         required: true
 - type: input
   attributes:

BUILD.gn

@@ -538,14 +538,19 @@ source_set("electron_lib") {
       "//build/config/linux/gtk",
       "//dbus",
       "//device/bluetooth",
+      "//ui/base/ime/linux",
       "//ui/events/devices/x11",
       "//ui/events/platform/x11",
       "//ui/gtk",
       "//ui/views/controls/webview",
       "//ui/wm",
     ]
-    if (use_x11) {
+    if (ozone_platform_x11) {
       sources += filenames.lib_sources_linux_x11
+      public_deps += [
+        "//ui/base/x",
+        "//ui/platform_window/x11",
+      ]
     }
     configs += [ ":gio_unix" ]
     defines += [
@@ -627,12 +632,6 @@ source_set("electron_lib") {
   }
 
   if (enable_desktop_capturer) {
-    if (is_component_build && !is_linux) {
-      # On windows the implementation relies on unexported
-      # DxgiDuplicatorController class.  On macOS the implementation
-      # relies on unexported webrtc::GetWindowOwnerPid method.
-      deps += [ "//third_party/webrtc/modules/desktop_capture" ]
-    }
     sources += [
       "shell/browser/api/electron_api_desktop_capturer.cc",
       "shell/browser/api/electron_api_desktop_capturer.h",
@@ -900,8 +899,12 @@ if (is_mac) {
         deps += [ "//sandbox/mac:seatbelt" ]
       }
       defines = [ "HELPER_EXECUTABLE" ]
-      sources = filenames.app_sources
-      sources += [ "shell/common/electron_constants.cc" ]
+      sources = [
+        "shell/app/electron_main_mac.cc",
+        "shell/app/uv_stdio_fix.cc",
+        "shell/app/uv_stdio_fix.h",
+        "shell/common/electron_constants.cc",
+      ]
       include_dirs = [ "." ]
       info_plist = "shell/renderer/resources/mac/Info.plist"
       extra_substitutions =
@@ -1040,15 +1043,18 @@ if (is_mac) {
 
   mac_app_bundle("electron_app") {
     output_name = electron_product_name
-    sources = filenames.app_sources
-    sources += [ "shell/common/electron_constants.cc" ]
+    sources = [
+      "shell/app/electron_main_mac.cc",
+      "shell/app/uv_stdio_fix.cc",
+      "shell/app/uv_stdio_fix.h",
+      "shell/common/electron_constants.cc",
+    ]
     include_dirs = [ "." ]
     deps = [
       ":electron_app_framework_bundle_data",
       ":electron_app_plist",
       ":electron_app_resources",
       ":electron_fuses",
-      "//base",
       "//electron/buildflags",
     ]
     if (is_mas_build) {
@@ -1150,7 +1156,15 @@ if (is_mac) {
 
   executable("electron_app") {
     output_name = electron_project_name
-    sources = filenames.app_sources
+    if (is_win) {
+      sources = [ "shell/app/electron_main_win.cc" ]
+    } else if (is_linux) {
+      sources = [
+        "shell/app/electron_main_linux.cc",
+        "shell/app/uv_stdio_fix.cc",
+        "shell/app/uv_stdio_fix.h",
+      ]
+    }
     include_dirs = [ "." ]
     deps = [
       ":default_app_asar",
@@ -1386,11 +1400,13 @@ dist_zip("electron_dist_zip") {
   if (is_linux) {
     data_deps += [ "//sandbox/linux:chrome_sandbox" ]
   }
+  deps = data_deps
   outputs = [ "$root_build_dir/dist.zip" ]
 }
 
 dist_zip("electron_ffmpeg_zip") {
   data_deps = [ "//third_party/ffmpeg" ]
+  deps = data_deps
   outputs = [ "$root_build_dir/ffmpeg.zip" ]
 }
 
@@ -1408,6 +1424,7 @@ group("electron_chromedriver") {
 dist_zip("electron_chromedriver_zip") {
   testonly = true
   data_deps = electron_chromedriver_deps
+  deps = data_deps
   outputs = [ "$root_build_dir/chromedriver.zip" ]
 }
 
@@ -1426,6 +1443,7 @@ group("electron_mksnapshot") {
 
 dist_zip("electron_mksnapshot_zip") {
   data_deps = mksnapshot_deps
+  deps = data_deps
   outputs = [ "$root_build_dir/mksnapshot.zip" ]
 }
 
@@ -1436,6 +1454,7 @@ copy("hunspell_dictionaries") {
 
 dist_zip("hunspell_dictionaries_zip") {
   data_deps = [ ":hunspell_dictionaries" ]
+  deps = data_deps
   flatten = true
 
   outputs = [ "$root_build_dir/hunspell_dictionaries.zip" ]
@@ -1449,6 +1468,7 @@ copy("libcxx_headers") {
 
 dist_zip("libcxx_headers_zip") {
   data_deps = [ ":libcxx_headers" ]
+  deps = data_deps
   flatten = true
   flatten_relative_to = rebase_path(
           "$target_gen_dir/electron_libcxx_include/buildtools/third_party/libc++/trunk",
@@ -1464,6 +1484,7 @@ copy("libcxxabi_headers") {
 
 dist_zip("libcxxabi_headers_zip") {
   data_deps = [ ":libcxxabi_headers" ]
+  deps = data_deps
   flatten = true
   flatten_relative_to = rebase_path(
           "$target_gen_dir/electron_libcxxabi_include/buildtools/third_party/libc++abi/trunk",

DEPS

@@ -15,7 +15,7 @@ gclient_gn_args = [
 
 vars = {
   'chromium_version':
-    '96.0.4664.4',
+    '98.0.4758.141',
   'node_version':
     'v16.13.0',
   'nan_version':

ELECTRON_VERSION

@@ -1 +1 @@
-17.0.0-nightly.20211117
+17.4.0

appveyor.yml

@@ -66,6 +66,31 @@ build_script:
   - mkdir src
   - update_depot_tools.bat
   - ps: Move-Item $env:APPVEYOR_BUILD_FOLDER -Destination src\electron
+  - ps: >-
+      if (Test-Path 'env:RAW_GOMA_AUTH') {
+        $env:GOMA_OAUTH2_CONFIG_FILE = "$pwd\.goma_oauth2_config"
+        $env:RAW_GOMA_AUTH | Set-Content $env:GOMA_OAUTH2_CONFIG_FILE
+      }
+  - git clone https://github.com/electron/build-tools.git
+  - cd build-tools
+  - npm install
+  - mkdir third_party
+  - ps: >-
+      node -e "require('./src/utils/goma.js').downloadAndPrepare({ gomaOneForAll: true })"
+  - ps: $env:GN_GOMA_FILE = node -e "console.log(require('./src/utils/goma.js').gnFilePath)"
+  - ps: $env:LOCAL_GOMA_DIR = node -e "console.log(require('./src/utils/goma.js').dir)"
+  - cd ..
+  - ps: .\src\electron\script\start-goma.ps1 -gomaDir $env:LOCAL_GOMA_DIR
+  - ps: >-
+      if (Test-Path 'env:RAW_GOMA_AUTH') {
+        $goma_login = python $env:LOCAL_GOMA_DIR\goma_auth.py info
+        if ($goma_login -eq 'Login as Fermi Planck') {
+          Write-warning "Goma authentication is correct";
+        } else {
+          Write-warning "WARNING!!!!!! Goma authentication is incorrect; please update Goma auth token.";
+          $host.SetShouldExit(1)
+        }
+      }
   - ps: $env:CHROMIUM_BUILDTOOLS_PATH="$pwd\src\buildtools"
   - ps: >-
       if ($env:GN_CONFIG -ne 'release') {
@@ -129,21 +154,6 @@ build_script:
           Write-warning "Failed to add third_party\angle\.git; continuing anyway"
         }
       }
-  - ps: >-
-      if (Test-Path 'env:RAW_GOMA_AUTH') {
-        $env:GOMA_OAUTH2_CONFIG_FILE = "$pwd\.goma_oauth2_config"
-        $env:RAW_GOMA_AUTH | Set-Content $env:GOMA_OAUTH2_CONFIG_FILE
-      }
-  - git clone https://github.com/electron/build-tools.git
-  - cd build-tools
-  - npm install
-  - mkdir third_party
-  - ps: >-
-      node -e "require('./src/utils/goma.js').downloadAndPrepare({ gomaOneForAll: true })"
-  - ps: $env:GN_GOMA_FILE = node -e "console.log(require('./src/utils/goma.js').gnFilePath)"
-  - ps: $env:LOCAL_GOMA_DIR = node -e "console.log(require('./src/utils/goma.js').dir)"
-  - cd ..
-  - ps: .\src\electron\script\start-goma.ps1 -gomaDir $env:LOCAL_GOMA_DIR
   - cd src
   - set BUILD_CONFIG_PATH=//electron/build/args/%GN_CONFIG%.gn 
   - gn gen out/Default "--args=import(\"%BUILD_CONFIG_PATH%\") import(\"%GN_GOMA_FILE%\") %GN_EXTRA_ARGS% "

build/args/all.gn

@@ -11,6 +11,9 @@ v8_embedder_string = "-electron.0"
 # TODO: this breaks mksnapshot
 v8_enable_snapshot_native_code_counters = false
 
+# TODO(codebytere): remove when Node.js handles https://chromium-review.googlesource.com/c/v8/v8/+/3211575
+v8_scriptormodule_legacy_lifetime = true
+
 enable_cdm_host_verification = false
 proprietary_codecs = true
 ffmpeg_branding = "Chrome"

build/profile_toolchain.py

@@ -1,9 +1,12 @@
-from __future__ import with_statement
+from __future__ import unicode_literals
+
 import contextlib
 import sys
 import os
 import optparse
 import json
+import re
+import subprocess
 
 sys.path.append("%s/../../build" % os.path.dirname(os.path.realpath(__file__)))
 
@@ -33,36 +36,56 @@ def calculate_hash(root):
         return CalculateHash('.', None)
 
 def windows_installed_software():
-    import win32com.client
-    strComputer = "."
-    objWMIService = win32com.client.Dispatch("WbemScripting.SWbemLocator")
-    objSWbemServices = objWMIService.ConnectServer(strComputer, "root\cimv2")
-    colItems = objSWbemServices.ExecQuery("Select * from Win32_Product")
-    items = []
+    powershell_command = [
+        "Get-CimInstance",
+        "-Namespace",
+        "root\cimv2",
+        "-Class",
+        "Win32_product",
+        "|",
+        "Select",
+        "vendor,",
+        "description,",
+        "@{l='install_location';e='InstallLocation'},",
+        "@{l='install_date';e='InstallDate'},",
+        "@{l='install_date_2';e='InstallDate2'},",
+        "caption,",
+        "version,",
+        "name,",
+        "@{l='sku_number';e='SKUNumber'}",
+        "|",
+        "ConvertTo-Json",
+    ]
 
-    for objItem in colItems:
-        item = {}
-        if objItem.Caption:
-            item['caption'] = objItem.Caption
-        if objItem.Caption:
-            item['description'] = objItem.Description
-        if objItem.InstallDate:
-            item['install_date'] = objItem.InstallDate
-        if objItem.InstallDate2:
-            item['install_date_2'] = objItem.InstallDate2
-        if objItem.InstallLocation:
-            item['install_location'] = objItem.InstallLocation
-        if objItem.Name:
-            item['name'] = objItem.Name
-        if objItem.SKUNumber:
-            item['sku_number'] = objItem.SKUNumber
-        if objItem.Vendor:
-            item['vendor'] = objItem.Vendor
-        if objItem.Version:
-            item['version'] = objItem.Version
-        items.append(item)
+    proc = subprocess.Popen(
+        ["powershell.exe", "-Command", "-"],
+        stdin=subprocess.PIPE,
+        stdout=subprocess.PIPE,
+    )
 
-    return items
+    stdout, _ = proc.communicate(" ".join(powershell_command).encode("utf-8"))
+
+    if proc.returncode != 0:
+        raise RuntimeError("Failed to get list of installed software")
+
+    # On AppVeyor there's other output related to PSReadline,
+    # so grab only the JSON output and ignore everything else
+    json_match = re.match(
+        r".*(\[.*{.*}.*\]).*", stdout.decode("utf-8"), re.DOTALL
+    )
+
+    if not json_match:
+        raise RuntimeError(
+            "Couldn't find JSON output for list of installed software"
+        )
+
+    # Filter out missing keys
+    return list(
+        map(
+            lambda info: {k: info[k] for k in info if info[k]},
+            json.loads(json_match.group(1)),
+        )
+    )
 
 
 def windows_profile():
@@ -89,7 +112,7 @@ def windows_profile():
 
 def main(options):
     if sys.platform == 'win32':
-        with open(options.output_json, 'wb') as f:
+        with open(options.output_json, 'w') as f:
             json.dump(windows_profile(), f)
     else:
         raise OSError("Unsupported OS")

chromium_src/BUILD.gn

@@ -69,8 +69,6 @@ static_library("chrome") {
     "//chrome/browser/ui/exclusive_access/keyboard_lock_controller.h",
     "//chrome/browser/ui/exclusive_access/mouse_lock_controller.cc",
     "//chrome/browser/ui/exclusive_access/mouse_lock_controller.h",
-    "//chrome/browser/ui/views/autofill/autofill_popup_view_utils.cc",
-    "//chrome/browser/ui/views/autofill/autofill_popup_view_utils.h",
     "//chrome/browser/ui/views/eye_dropper/eye_dropper.cc",
     "//chrome/browser/ui/views/eye_dropper/eye_dropper.h",
     "//chrome/browser/ui/views/eye_dropper/eye_dropper_view.cc",
@@ -201,12 +199,16 @@ static_library("chrome") {
 
   if (enable_basic_printing) {
     sources += [
+      "//chrome/browser/bad_message.cc",
+      "//chrome/browser/bad_message.h",
       "//chrome/browser/printing/print_job.cc",
       "//chrome/browser/printing/print_job.h",
       "//chrome/browser/printing/print_job_manager.cc",
       "//chrome/browser/printing/print_job_manager.h",
       "//chrome/browser/printing/print_job_worker.cc",
       "//chrome/browser/printing/print_job_worker.h",
+      "//chrome/browser/printing/print_job_worker_oop.cc",
+      "//chrome/browser/printing/print_job_worker_oop.h",
       "//chrome/browser/printing/print_view_manager_base.cc",
       "//chrome/browser/printing/print_view_manager_base.h",
       "//chrome/browser/printing/printer_query.cc",

docs/api/app.md

@@ -930,9 +930,9 @@ app.setJumpList([
 ])
 ```
 
-### `app.requestSingleInstanceLock()`
+### `app.requestSingleInstanceLock([additionalData])`
 
-* `additionalData` unknown (optional) - A JSON object containing additional data to send to the first instance.
+* `additionalData` Record<any, any> (optional) - A JSON object containing additional data to send to the first instance.
 
 Returns `boolean`
 

docs/api/browser-view.md

@@ -15,14 +15,16 @@ Process: [Main](../glossary.md#main-process)
 
 ```javascript
 // In the main process.
-const { BrowserView, BrowserWindow } = require('electron')
+const { app, BrowserView, BrowserWindow } = require('electron')
 
-const win = new BrowserWindow({ width: 800, height: 600 })
+app.whenReady().then(() => {
+  const win = new BrowserWindow({ width: 800, height: 600 })
 
-const view = new BrowserView()
-win.setBrowserView(view)
-view.setBounds({ x: 0, y: 0, width: 300, height: 300 })
-view.webContents.loadURL('https://electronjs.org')
+  const view = new BrowserView()
+  win.setBrowserView(view)
+  view.setBounds({ x: 0, y: 0, width: 300, height: 300 })
+  view.webContents.loadURL('https://electronjs.org')
+})
 ```
 
 ### `new BrowserView([options])` _Experimental_

docs/api/browser-window.md

@@ -391,9 +391,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` 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.
+  * `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.
+    * `height` Integer (optional) _macOS_ _Windows_ - The height of the title bar and Window Controls Overlay in pixels. Default is system height.
 
 When setting minimum or maximum window size with `minWidth`/`maxWidth`/
 `minHeight`/`maxHeight`, it only constrains the users. It won't prevent you from
@@ -559,7 +560,7 @@ Returns:
 
 Emitted before the window is moved. On Windows, calling `event.preventDefault()` will prevent the window from being moved.
 
-Note that this is only emitted when the window is being resized manually. Resizing the window with `setBounds`/`setSize` will not emit this event.
+Note that this is only emitted when the window is being moved manually. Moving the window with `setPosition`/`setBounds`/`center` will not emit this event.
 
 #### Event: 'move'
 
@@ -999,7 +1000,7 @@ APIs like `win.setSize`.
   is `true`). Default is `#FFF` (white).
 
 Sets the background color of the window. See [Setting
-`backgroundColor`](#setting-backgroundcolor).
+`backgroundColor`](#setting-the-backgroundcolor-property).
 
 #### `win.previewFile(path[, displayName])` _macOS_
 
@@ -1044,7 +1045,7 @@ Returns [`Rectangle`](structures/rectangle.md) - The `bounds` of the window as `
 #### `win.getBackgroundColor()`
 
 Returns `string` - Gets the background color of the window. See [Setting
-`backgroundColor`](#setting-backgroundcolor).
+`backgroundColor`](#setting-the-backgroundcolor-property).
 
 #### `win.setContentBounds(bounds[, animate])`
 
@@ -1810,6 +1811,16 @@ with `addBrowserView` or `setBrowserView`.
 **Note:** The BrowserView API is currently experimental and may change or be
 removed in future Electron releases.
 
+#### `win.setTitleBarOverlay(options)` _Windows_
+
+* `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.
+
+On a Window with Window Controls Overlay already enabled, this method updates
+the style of the title bar overlay.
+
 [runtime-enabled-features]: https://cs.chromium.org/chromium/src/third_party/blink/renderer/platform/runtime_enabled_features.json5?l=70
 [page-visibility-api]: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
 [quick-look]: https://en.wikipedia.org/wiki/Quick_Look

docs/api/clipboard.md

@@ -76,7 +76,7 @@ Writes `markup` to the clipboard.
 ```js
 const { clipboard } = require('electron')
 
-clipboard.writeHTML('<b>Hi</b')
+clipboard.writeHTML('<b>Hi</b>')
 ```
 
 ### `clipboard.readImage([type])`

docs/api/context-bridge.md

@@ -102,8 +102,8 @@ has been included below for completeness:
 | `boolean` | Simple | ✅ | ✅ | N/A |
 | `Object` | Complex | ✅ | ✅ | Keys must be supported using only "Simple" types in this table.  Values must be supported in this table.  Prototype modifications are dropped.  Sending custom classes will copy values but not the prototype. |
 | `Array` | Complex | ✅ | ✅ | Same limitations as the `Object` type |
-| `Error` | Complex | ✅ | ✅ | Errors that are thrown are also copied, this can result in the message and stack trace of the error changing slightly due to being thrown in a different context |
-| `Promise` | Complex | ✅ | ✅ | Promises are only proxied if they are the return value or exact parameter.  Promises nested in arrays or objects will be dropped. |
+| `Error` | Complex | ✅ | ✅ | Errors that are thrown are also copied, this can result in the message and stack trace of the error changing slightly due to being thrown in a different context, and any custom properties on the Error object [will be lost](https://github.com/electron/electron/issues/25596) |
+| `Promise` | Complex | ✅ | ✅ | N/A
 | `Function` | Complex | ✅ | ✅ | Prototype modifications are dropped.  Sending classes or constructors will not work. |
 | [Cloneable Types](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm) | Simple | ✅ | ✅ | See the linked document on cloneable types |
 | `Element` | Complex | ✅ | ✅ | Prototype modifications are dropped.  Sending custom elements will not work. |

docs/api/dialog.md

@@ -285,7 +285,7 @@ If `browserWindow` is not shown dialog will not be attached to it. In such case
     include a checkbox with the given label.
   * `checkboxChecked` boolean (optional) - Initial checked state of the
     checkbox. `false` by default.
-  * `icon` [NativeImage](native-image.md) (optional)
+  * `icon` ([NativeImage](native-image.md) | string) (optional)
   * `textWidth` Integer (optional) _macOS_ - Custom width of the text in the message box.
   * `cancelId` Integer (optional) - The index of the button to be used to cancel the dialog, via
     the `Esc` key. By default this is assigned to the first button with "cancel" or "no" as the

docs/api/environment-variables.md

@@ -122,7 +122,7 @@ Prints Chromium's internal logging to the console.
 
 Setting this variable is the same as passing `--enable-logging`
 on the command line. For more info, see `--enable-logging` in [command-line
-switches](./command-line-switches.md#enable-loggingfile).
+switches](./command-line-switches.md#--enable-loggingfile).
 
 ### `ELECTRON_LOG_FILE`
 
@@ -130,7 +130,7 @@ Sets the file destination for Chromium's internal logging.
 
 Setting this variable is the same as passing `--log-file`
 on the command line. For more info, see `--log-file` in [command-line
-switches](./command-line-switches.md#log-filepath).
+switches](./command-line-switches.md#--log-filepath).
 
 ### `ELECTRON_DEBUG_DRAG_REGIONS`
 

docs/api/ipc-main.md

@@ -1,3 +1,10 @@
+---
+title: "ipcMain"
+description: "Communicate asynchronously from the main process to renderer processes."
+slug: ipc-main
+hide_title: false
+---
+
 # ipcMain
 
 > Communicate asynchronously from the main process to renderer processes.
@@ -9,7 +16,9 @@ process, it handles asynchronous and synchronous messages sent from a renderer
 process (web page). Messages sent from a renderer will be emitted to this
 module.
 
-## Sending Messages
+For usage examples, check out the [IPC tutorial].
+
+## Sending messages
 
 It is also possible to send messages from the main process to the renderer
 process, see [webContents.send][web-contents-send] for more information.
@@ -21,36 +30,6 @@ process, see [webContents.send][web-contents-send] for more information.
   coming from frames that aren't the main frame (e.g. iframes) whereas
   `event.sender.send(...)` will always send to the main frame.
 
-An example of sending and handling messages between the render and main
-processes:
-
-```javascript
-// In main process.
-const { ipcMain } = require('electron')
-ipcMain.on('asynchronous-message', (event, arg) => {
-  console.log(arg) // prints "ping"
-  event.reply('asynchronous-reply', 'pong')
-})
-
-ipcMain.on('synchronous-message', (event, arg) => {
-  console.log(arg) // prints "ping"
-  event.returnValue = 'pong'
-})
-```
-
-```javascript
-// In renderer process (web page).
-// NB. Electron APIs are only accessible from preload, unless contextIsolation is disabled.
-// See https://www.electronjs.org/docs/tutorial/process-model#preload-scripts for more details.
-const { ipcRenderer } = require('electron')
-console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) // prints "pong"
-
-ipcRenderer.on('asynchronous-reply', (event, arg) => {
-  console.log(arg) // prints "pong"
-})
-ipcRenderer.send('asynchronous-message', 'ping')
-```
-
 ## Methods
 
 The `ipcMain` module has the following method to listen for events:
@@ -59,7 +38,7 @@ The `ipcMain` module has the following method to listen for events:
 
 * `channel` string
 * `listener` Function
-  * `event` IpcMainEvent
+  * `event` [IpcMainEvent][ipc-main-event]
   * `...args` any[]
 
 Listens to `channel`, when a new message arrives `listener` would be called with
@@ -69,7 +48,7 @@ Listens to `channel`, when a new message arrives `listener` would be called with
 
 * `channel` string
 * `listener` Function
-  * `event` IpcMainEvent
+  * `event` [IpcMainEvent][ipc-main-event]
   * `...args` any[]
 
 Adds a one time `listener` function for the event. This `listener` is invoked
@@ -93,8 +72,8 @@ Removes listeners of the specified `channel`.
 ### `ipcMain.handle(channel, listener)`
 
 * `channel` string
-* `listener` Function<Promise\<void> | any>
-  * `event` IpcMainInvokeEvent
+* `listener` Function<Promise\<void&#62; | any&#62;
+  * `event` [IpcMainInvokeEvent][ipc-main-invoke-event]
   * `...args` any[]
 
 Adds a handler for an `invoke`able IPC. This handler will be called whenever a
@@ -104,14 +83,14 @@ If `listener` returns a Promise, the eventual result of the promise will be
 returned as a reply to the remote caller. Otherwise, the return value of the
 listener will be used as the value of the reply.
 
-```js
-// Main process
+```js title='Main Process'
 ipcMain.handle('my-invokable-ipc', async (event, ...args) => {
   const result = await somePromise(...args)
   return result
 })
+```
 
-// Renderer process
+```js title='Renderer Process'
 async () => {
   const result = await ipcRenderer.invoke('my-invokable-ipc', arg1, arg2)
   // ...
@@ -130,7 +109,7 @@ provided to the renderer process. Please refer to
 ### `ipcMain.handleOnce(channel, listener)`
 
 * `channel` string
-* `listener` Function<Promise\<void> | any>
+* `listener` Function<Promise\<void&#62; | any&#62;
   * `event` IpcMainInvokeEvent
   * `...args` any[]
 
@@ -146,13 +125,16 @@ Removes any handler for `channel`, if present.
 ## IpcMainEvent object
 
 The documentation for the `event` object passed to the `callback` can be found
-in the [`ipc-main-event`](structures/ipc-main-event.md) structure docs.
+in the [`ipc-main-event`][ipc-main-event] structure docs.
 
 ## IpcMainInvokeEvent object
 
 The documentation for the `event` object passed to `handle` callbacks can be
-found in the [`ipc-main-invoke-event`](structures/ipc-main-invoke-event.md)
+found in the [`ipc-main-invoke-event`][ipc-main-invoke-event]
 structure docs.
 
+[IPC tutorial]: ../tutorial/ipc.md
 [event-emitter]: https://nodejs.org/api/events.html#events_class_eventemitter
-[web-contents-send]: web-contents.md#contentssendchannel-args
+[web-contents-send]: ../api/web-contents.md#contentssendchannel-args
+[ipc-main-event]:../api/structures/ipc-main-event.md
+[ipc-main-invoke-event]:../api/structures/ipc-main-invoke-event.md

docs/api/ipc-renderer.md

@@ -1,3 +1,10 @@
+---
+title: "ipcRenderer"
+description: "Communicate asynchronously from a renderer process to the main process."
+slug: ipc-renderer
+hide_title: false
+---
+
 # ipcRenderer
 
 > Communicate asynchronously from a renderer process to the main process.
@@ -9,7 +16,7 @@ methods so you can send synchronous and asynchronous messages from the render
 process (web page) to the main process. You can also receive replies from the
 main process.
 
-See [ipcMain](ipc-main.md) for code examples.
+See [IPC tutorial](../tutorial/ipc.md) for code examples.
 
 ## Methods
 
@@ -70,7 +77,7 @@ throw an exception.
 > them. Attempting to send such objects over IPC will result in an error.
 
 The main process handles it by listening for `channel` with the
-[`ipcMain`](ipc-main.md) module.
+[`ipcMain`](./ipc-main.md) module.
 
 If you need to transfer a [`MessagePort`][] to the main process, use [`ipcRenderer.postMessage`](#ipcrendererpostmessagechannel-message-transfer).
 
@@ -98,7 +105,7 @@ throw an exception.
 > them. Attempting to send such objects over IPC will result in an error.
 
 The main process should listen for `channel` with
-[`ipcMain.handle()`](ipc-main.md#ipcmainhandlechannel-listener).
+[`ipcMain.handle()`](./ipc-main.md#ipcmainhandlechannel-listener).
 
 For example:
 
@@ -124,11 +131,11 @@ If you do not need a response to the message, consider using [`ipcRenderer.send`
 * `channel` string
 * `...args` any[]
 
-Returns `any` - The value sent back by the [`ipcMain`](ipc-main.md) handler.
+Returns `any` - The value sent back by the [`ipcMain`](./ipc-main.md) handler.
 
 Send a message to the main process via `channel` and expect a result
 synchronously. Arguments will be serialized with the [Structured Clone
-Algorithm][SCA], just like [`window.postMessage`][], so prototype chains will not be
+Algorithm][SCA], just like [`window.postMessage`], so prototype chains will not be
 included. Sending Functions, Promises, Symbols, WeakMaps, or WeakSets will
 throw an exception.
 
@@ -140,13 +147,13 @@ throw an exception.
 > Electron's IPC to the main process, as the main process would have no way to decode
 > them. Attempting to send such objects over IPC will result in an error.
 
-The main process handles it by listening for `channel` with [`ipcMain`](ipc-main.md) module,
+The main process handles it by listening for `channel` with [`ipcMain`](./ipc-main.md) module,
 and replies by setting `event.returnValue`.
 
 > :warning: **WARNING**: Sending a synchronous message will block the whole
 > renderer process until the reply is received, so use this method only as a
 > last resort. It's much better to use the asynchronous version,
-> [`invoke()`](ipc-renderer.md#ipcrendererinvokechannel-args).
+> [`invoke()`](./ipc-renderer.md#ipcrendererinvokechannel-args).
 
 ### `ipcRenderer.postMessage(channel, message, [transfer])`
 
@@ -158,7 +165,7 @@ Send a message to the main process, optionally transferring ownership of zero
 or more [`MessagePort`][] objects.
 
 The transferred `MessagePort` objects will be available in the main process as
-[`MessagePortMain`](message-port-main.md) objects by accessing the `ports`
+[`MessagePortMain`](./message-port-main.md) objects by accessing the `ports`
 property of the emitted event.
 
 For example:
@@ -197,7 +204,7 @@ the host page instead of the main process.
 ## Event object
 
 The documentation for the `event` object passed to the `callback` can be found
-in the [`ipc-renderer-event`](structures/ipc-renderer-event.md) structure docs.
+in the [`ipc-renderer-event`](./structures/ipc-renderer-event.md) structure docs.
 
 [event-emitter]: https://nodejs.org/api/events.html#events_class_eventemitter
 [SCA]: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm

docs/api/native-theme.md

@@ -67,3 +67,8 @@ or is being instructed to show a high-contrast UI.
 
 A `boolean` for if the OS / Chromium currently has an inverted color scheme
 or is being instructed to use an inverted color scheme.
+
+### `nativeTheme.inForcedColorsMode` _Windows_ _Readonly_
+
+A `boolean` indicating whether Chromium is in forced colors mode, controlled by system accessibility settings.
+Currently, Windows high contrast is the only system setting that triggers forced colors mode.

docs/api/process.md

@@ -178,7 +178,6 @@ Returns an object with V8 heap statistics. Note that all statistics are reported
 Returns `Object`:
 
 * `allocated` Integer - Size of all allocated objects in Kilobytes.
-* `marked` Integer - Size of all marked objects in Kilobytes.
 * `total` Integer - Total allocated space in Kilobytes.
 
 Returns an object with Blink memory information.

docs/api/service-workers.md

@@ -39,7 +39,7 @@ Returns:
 * `messageDetails` Object - Information about the console message
   * `message` string - The actual console message
   * `versionId` number - The version ID of the service worker that sent the log message
-  * `source` string - The type of source for this message.  Can be `javascript`, `xml`, `network`, `console-api`, `storage`, `app-cache`, `rendering`, `security`, `deprecation`, `worker`, `violation`, `intervention`, `recommendation` or `other`.
+  * `source` string - The type of source for this message.  Can be `javascript`, `xml`, `network`, `console-api`, `storage`, `rendering`, `security`, `deprecation`, `worker`, `violation`, `intervention`, `recommendation` or `other`.
   * `level` number - The log level, from 0 to 3. In order it matches `verbose`, `info`, `warning` and `error`.
   * `sourceUrl` string - The URL the message came from
   * `lineNumber` number - The line number of the source that triggered this console message

docs/api/session.md

@@ -868,6 +868,20 @@ this session just before normal `preload` scripts run.
 Returns `string[]` an array of paths to preload scripts that have been
 registered.
 
+#### `ses.setCodeCachePath(path)`
+
+* `path` String - Absolute path to store the v8 generated JS code cache from the renderer.
+
+Sets the directory to store the generated JS [code cache](https://v8.dev/blog/code-caching-for-devs) for this session. The directory is not required to be created by the user before this call, the runtime will create if it does not exist otherwise will use the existing directory. If directory cannot be created, then code cache will not be used and all operations related to code cache will fail silently inside the runtime. By default, the directory will be `Code Cache` under the
+respective user data folder.
+
+#### `ses.clearCodeCaches(options)`
+
+* `options` Object
+  * `urls` String[] (optional) - An array of url corresponding to the resource whose generated code cache needs to be removed. If the list is empty then all entries in the cache directory will be removed.
+
+Returns `Promise<void>` - resolves when the code cache clear operation is complete.
+
 #### `ses.setSpellCheckerEnabled(enable)`
 
 * `enable` boolean
@@ -903,8 +917,10 @@ setting with the current OS locale.  This setting is persisted across restarts.
 By default Electron will download hunspell dictionaries from the Chromium CDN.  If you want to override this
 behavior you can use this API to point the dictionary downloader at your own hosted version of the hunspell
 dictionaries.  We publish a `hunspell_dictionaries.zip` file with each release which contains the files you need
-to host here, the file server must be **case insensitive** you must upload each file twice, once with the case it
-has in the ZIP file and once with the filename as all lower case.
+to host here.
+
+The file server must be **case insensitive**. If you cannot do this, you must upload each file twice: once with
+the case it has in the ZIP file and once with the filename as all lowercase.
 
 If the files present in `hunspell_dictionaries.zip` are available at `https://example.com/dictionaries/language-code.bdic`
 then you should call this api with `ses.setSpellCheckerDictionaryDownloadURL('https://example.com/dictionaries/')`.  Please

docs/api/structures/payment-discount.md

@@ -0,0 +1,7 @@
+# PaymentDiscount Object
+
+* `identifier` string - A string used to uniquely identify a discount offer for a product.
+* `keyIdentifier` string - A string that identifies the key used to generate the signature.
+* `nonce` string - A universally unique ID (UUID) value that you define.
+* `signature` string - A UTF-8 string representing the properties of a specific discount offer, cryptographically signed.
+* `timestamp` number - The date and time of the signature's creation in milliseconds, formatted in Unix epoch time.

docs/api/structures/product-discount.md

@@ -0,0 +1,9 @@
+# ProductDiscount Object
+
+* `identifier` string - A string used to uniquely identify a discount offer for a product.
+* `type` number - The type of discount offer.
+* `price` number - The discount price of the product in the local currency.
+* `priceLocale` string - The locale used to format the discount price of the product.
+* `paymentMode` string - The payment mode for this product discount. Can be `payAsYouGo`, `payUpFront`, or `freeTrial`.
+* `numberOfPeriods` number - An integer that indicates the number of periods the product discount is available.
+* `subscriptionPeriod` [ProductSubscriptionPeriod](product-subscription-period.md) (optional) - An object that defines the period for the product discount.

docs/api/structures/product-subscription-period.md

@@ -0,0 +1,4 @@
+# ProductSubscriptionPeriod Object
+
+* `numberOfUnits` number - The number of units per subscription period.
+* `unit` string - The increment of time that a subscription period is specified in. Can be `day`, `week`, `month`, `year`.

docs/api/structures/product.md

@@ -8,4 +8,11 @@
 * `price` number - The cost of the product in the local currency.
 * `formattedPrice` string - The locale formatted price of the product.
 * `currencyCode` string - 3 character code presenting a product's currency based on the ISO 4217 standard.
+* `introductoryPrice` [ProductDiscount](product-discount.md) (optional) - The object containing introductory price information for the product.
+available for the product.
+* `discounts` [ProductDiscount](product-discount.md)[] - An array of discount offers
+* `subscriptionGroupIdentifier` string - The identifier of the subscription group to which the subscription belongs.
+* `subscriptionPeriod` [ProductSubscriptionPeriod](product-subscription-period.md) (optional) - The period details for products that are subscriptions.
 * `isDownloadable` boolean - A boolean value that indicates whether the App Store has downloadable content for this product. `true` if at least one file has been associated with the product.
+* `downloadContentVersion` string - A string that identifies the version of the content.
+* `downloadContentLengths` number[] - The total size of the content, in bytes.

docs/api/structures/transaction.md

@@ -9,3 +9,5 @@
 * `payment` Object
   * `productIdentifier` string - The identifier of the purchased product.
   * `quantity` Integer  - The quantity purchased.
+  * `applicationUsername` string - An opaque identifier for the user’s account on your system.
+  * `paymentDiscount` [PaymentDiscount](payment-discount.md) (optional) - The details of the discount offer to apply to the payment.

docs/api/structures/web-source.md

@@ -2,4 +2,3 @@
 
 * `code` string
 * `url` string (optional)
-* `startLine` Integer (optional) - Default is 1.

docs/api/web-contents.md

@@ -736,6 +736,8 @@ first available device will be selected. `callback` should be called with
 `deviceId` to be selected, passing empty string to `callback` will
 cancel the request.
 
+If no event listener is added for this event, all bluetooth requests will be cancelled.
+
 ```javascript
 const { app, BrowserWindow } = require('electron')
 
@@ -1082,7 +1084,7 @@ Returns `string` - The user agent for this web page.
 
 * `css` string
 * `options` Object (optional)
-  * `cssOrigin` string (optional) - Can be either 'user' or 'author'; Specifying 'user' enables you to prevent websites from overriding the CSS you insert. Default is 'author'.
+  * `cssOrigin` string (optional) - Can be either 'user' or 'author'. Sets the [cascade origin](https://www.w3.org/TR/css3-cascade/#cascade-origin) of the inserted stylesheet. Default is 'author'.
 
 Returns `Promise<string>` - A promise that resolves with a key for the inserted CSS that can later be used to remove the CSS via `contents.removeInsertedCSS(key)`.
 
@@ -1609,7 +1611,7 @@ app.whenReady().then(() => {
 
 * `options` Object (optional)
   * `mode` string - Opens the devtools with specified dock state, can be
-    `right`, `bottom`, `undocked`, `detach`. Defaults to last used dock state.
+    `left`, `right`, `bottom`, `undocked`, `detach`. Defaults to last used dock state.
     In `undocked` mode it's possible to dock back. In `detach` mode it's not.
   * `activate` boolean (optional) - Whether to bring the opened devtools window
     to the foreground. The default is `true`.
@@ -1837,7 +1839,7 @@ the cursor when dragging.
 
 #### `contents.savePage(fullPath, saveType)`
 
-* `fullPath` string - The full file path.
+* `fullPath` string - The absolute file path.
 * `saveType` string - Specify the save type.
   * `HTMLOnly` - Save only the HTML of the page.
   * `HTMLComplete` - Save complete-html page.

docs/api/web-frame.md

@@ -5,8 +5,8 @@
 Process: [Renderer](../glossary.md#renderer-process)
 
 `webFrame` export of the Electron module is an instance of the `WebFrame`
-class representing the top frame of the current `BrowserWindow`. Sub-frames can
-be retrieved by certain properties and methods (e.g. `webFrame.firstChild`).
+class representing the current frame. Sub-frames can be retrieved by
+certain properties and methods (e.g. `webFrame.firstChild`).
 
 An example of zooming current page to 200%.
 
@@ -110,9 +110,11 @@ webFrame.setSpellCheckProvider('en-US', {
 })
 ```
 
-### `webFrame.insertCSS(css)`
+#### `webFrame.insertCSS(css[, options])`
 
-* `css` string - CSS source code.
+* `css` string
+* `options` Object (optional)
+  * `cssOrigin` string (optional) - Can be either 'user' or 'author'. Sets the [cascade origin](https://www.w3.org/TR/css3-cascade/#cascade-origin) of the inserted stylesheet. Default is 'author'.
 
 Returns `string` - A key for the inserted CSS that can later be used to remove
 the CSS via `webFrame.removeInsertedCSS(key)`.

docs/api/window-open.md

@@ -64,6 +64,9 @@ window.open('https://github.com', '_blank', 'top=500,left=200,frame=false,nodeIn
   `features` will be passed to any registered `webContents`'s
   `did-create-window` event handler in the `options` argument.
 * `frameName` follows the specification of `windowName` located in the [native documentation](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#parameters).
+* When opening `about:blank`, the child window's `WebPreferences` will be copied
+  from the parent window, and there is no way to override it because Chromium
+  skips browser side navigation in this case.
 
 To customize or cancel the creation of the window, you can optionally set an
 override handler with `webContents.setWindowOpenHandler()` from the main

docs/breaking-changes.md

@@ -45,6 +45,16 @@ However, you should consider further restricting the information returned to
 the renderer; for instance, displaying a source selector to the user and only
 returning the selected source.
 
+### Deprecated: `nativeWindowOpen`
+
+Prior to Electron 15, `window.open` was by default shimmed to use
+`BrowserWindowProxy`. This meant that `window.open('about:blank')` did not work
+to open synchronously scriptable child windows, among other incompatibilities.
+Since Electron 15, `nativeWindowOpen` has been enabled by default.
+
+See the documentation for [window.open in Electron](api/window-open.md)
+for more details.
+
 ## Planned Breaking API Changes (16.0)
 
 ### Behavior Changed: `crashReporter` implementation switched to Crashpad on Linux

docs/development/build-instructions-gn.md

@@ -98,42 +98,37 @@ $ gclient sync -f
 
 ## Building
 
+**Set the environment variable for chromium build tools**
+
+On Linux & MacOS
+
 ```sh
 $ cd src
 $ export CHROMIUM_BUILDTOOLS_PATH=`pwd`/buildtools
-$ gn gen out/Testing --args="import(\"//electron/build/args/testing.gn\") $GN_EXTRA_ARGS"
 ```
 
-Or on Windows (without the optional argument):
+On Windows:
 
 ```sh
 $ cd src
 $ set CHROMIUM_BUILDTOOLS_PATH=%cd%\buildtools
+```
+
+**To generate Testing build config of Electron:**
+
+```sh
 $ gn gen out/Testing --args="import(\"//electron/build/args/testing.gn\")"
 ```
 
-This will generate a build directory `out/Testing` under `src/` with
-the testing build configuration. You can replace `Testing` with another name,
-but it should be a subdirectory of `out`.
-Also you shouldn't have to run `gn gen` again—if you want to change the
-build arguments, you can run `gn args out/Testing` to bring up an editor.
-
-To see the list of available build configuration options, run `gn args
-out/Testing --list`.
-
-**For generating Testing build config of
-Electron:**
+**To generate Release build config of Electron:**
 
 ```sh
-$ gn gen out/Testing --args="import(\"//electron/build/args/testing.gn\") $GN_EXTRA_ARGS"
+$ gn gen out/Release --args="import(\"//electron/build/args/release.gn\")"
 ```
 
-**For generating Release (aka "non-component" or "static") build config of
-Electron:**
+**Note:** This will generate a `out/Testing` or `out/Release` build directory under `src/` with the testing or release build depending upon the configuration passed above. You can replace `Testing|Release` with another names, but it should be a subdirectory of `out`.
 
-```sh
-$ gn gen out/Release --args="import(\"//electron/build/args/release.gn\") $GN_EXTRA_ARGS"
-```
+Also you shouldn't have to run `gn gen` again—if you want to change the build arguments, you can run `gn args out/Testing` to bring up an editor. To see the list of available build configuration options, run `gn args out/Testing --list`.
 
 **To build, run `ninja` with the `electron` target:**
 Nota Bene: This will also take a while and probably heat up your lap.
@@ -169,13 +164,13 @@ $ ./out/Testing/electron
 On linux, first strip the debugging and symbol information:
 
 ```sh
-electron/script/strip-binaries.py -d out/Release
+$ electron/script/strip-binaries.py -d out/Release
 ```
 
 To package the electron build as a distributable zip file:
 
 ```sh
-ninja -C out/Release electron:electron_dist_zip
+$ ninja -C out/Release electron:electron_dist_zip
 ```
 
 ### Cross-compiling

docs/development/creating-api.md

@@ -50,8 +50,8 @@ In your `api_name.h` file:
 
 ```cpp title='api_name.h'
 
-#ifndef SHELL_BROWSER_API_ELECTRON_API_{API_NAME}_H_
-#define SHELL_BROWSER_API_ELECTRON_API_{API_NAME}_H_
+#ifndef ELECTRON_SHELL_BROWSER_API_ELECTRON_API_{API_NAME}_H_
+#define ELECTRON_SHELL_BROWSER_API_ELECTRON_API_{API_NAME}_H_
 
 #include "gin/handle.h"
 #include "gin/wrappable.h"

docs/development/debugging-with-symbol-server.md

@@ -43,8 +43,9 @@ SRV*c:\code\symbols\*https://msdl.microsoft.com/download/symbols;SRV*c:\code\sym
 
 ## Using the symbol server in Visual Studio
 
-![Tools -> Options](https://mdn.mozillademos.org/files/733/symbol-server-vc8express-menu.jpg)
-![Symbols Settings](https://mdn.mozillademos.org/files/2497/2005_options.gif)
+![Tools -> Options](../images/vs-tools-options.png)
+
+![Symbols Settings](../images/vs-options-debugging-symbols.png)
 
 ## Troubleshooting: Symbols will not load
 

docs/development/pull-requests.md

@@ -180,7 +180,7 @@ $ git push origin my-branch
 ### Step 9: Opening the Pull Request
 
 From within GitHub, opening a new pull request will present you with a template
-that should be filled out. It can be found [here](../../.github/PULL_REQUEST_TEMPLATE.md).
+that should be filled out. It can be found [here](https://github.com/electron/electron/blob/main/.github/PULL_REQUEST_TEMPLATE.md).
 
 If you do not adequately complete this template, your PR may be delayed in being merged as maintainers
 seek more information or clarify ambiguities.

docs/development/testing.md

@@ -22,7 +22,7 @@ you error would be caught at commit time.
 ## Unit Tests
 
 If you are not using [build-tools](https://github.com/electron/build-tools),
-ensure that that name you have configured for your
+ensure that the name you have configured for your
 local build of Electron is one of `Testing`, `Release`, `Default`, or
 you have set `process.env.ELECTRON_OUT_DIR`. Without these set, Electron will fail
 to perform some pre-testing steps.

docs/fiddles/communication/two-processes/asynchronous-messages/index.html

@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-  </head>
-  <body>
-    <div>
-      <div>
-        <h1>Asynchronous messages</h1>
-        <i>Supports: Win, macOS, Linux <span>|</span> Process: Both</i>
-        <div>
-          <div>
-            <button id="async-msg">Ping</button>
-            <span id="async-reply"></span>
-          </div>
-          <p>Using <code>ipc</code> to send messages between processes asynchronously is the preferred method since it will return when finished without blocking other operations in the same process.</p>
-
-          <p>This example sends a "ping" from this process (renderer) to the main process. The main process then replies with "pong".</p>
-        </div>
-      </div>
-    </div>
-    <script>
-      // You can also require other files to run in this process
-      require('./renderer.js')
-    </script>
-  </body>
-</html>

docs/fiddles/communication/two-processes/asynchronous-messages/main.js

@@ -1,29 +0,0 @@
-const { app, BrowserWindow, ipcMain } = require('electron')
-
-let mainWindow = null
-
-function createWindow () {
-  const windowOptions = {
-    width: 600,
-    height: 400,
-    title: 'Asynchronous messages',
-    webPreferences: {
-      nodeIntegration: true
-    }
-  }
-
-  mainWindow = new BrowserWindow(windowOptions)
-  mainWindow.loadFile('index.html')
-
-  mainWindow.on('closed', () => {
-    mainWindow = null
-  })
-}
-
-app.whenReady().then(() => {
-  createWindow()
-})
-
-ipcMain.on('asynchronous-message', (event, arg) => {
-  event.sender.send('asynchronous-reply', 'pong')
-})

docs/fiddles/communication/two-processes/asynchronous-messages/renderer.js

@@ -1,12 +0,0 @@
-const { ipcRenderer } = require('electron')
-
-const asyncMsgBtn = document.getElementById('async-msg')
-
-asyncMsgBtn.addEventListener('click', () => {
-  ipcRenderer.send('asynchronous-message', 'ping')
-})
-
-ipcRenderer.on('asynchronous-reply', (event, arg) => {
-  const message = `Asynchronous message reply: ${arg}`
-  document.getElementById('async-reply').innerHTML = message
-})

docs/fiddles/communication/two-processes/synchronous-messages/index.html

@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-  </head>
-  <body>
-    <div>
-      <div>
-        <h1>Synchronous messages</h1>
-        <i>Supports: Win, macOS, Linux <span>|</span> Process: Both</i>
-        <div>
-          <div>
-            <button id="sync-msg">Ping</button>
-            <span id="sync-reply"></span>
-          </div>
-          <p>You can use the <code>ipc</code> module to send synchronous messages between processes as well, but note that the synchronous nature of this method means that it <b>will block</b> other operations while completing its task.</p>
-          
-          <p>This example sends a synchronous message, "ping", from this process (renderer) to the main process. The main process then replies with "pong".</p>
-        </div>
-      </div>
-    </div>
-    <script>
-      // You can also require other files to run in this process
-      require('./renderer.js')
-    </script>
-  </body>
-</html> 

docs/fiddles/communication/two-processes/synchronous-messages/main.js

@@ -1,29 +0,0 @@
-const { app, BrowserWindow, ipcMain } = require('electron')
-
-let mainWindow = null
-
-function createWindow () {
-  const windowOptions = {
-    width: 600,
-    height: 400,
-    title: 'Synchronous Messages',
-    webPreferences: {
-      nodeIntegration: true
-    }
-  }
-
-  mainWindow = new BrowserWindow(windowOptions)
-  mainWindow.loadFile('index.html')
-
-  mainWindow.on('closed', () => {
-    mainWindow = null
-  })
-}
-
-app.whenReady().then(() => {
-  createWindow()
-})
-
-ipcMain.on('synchronous-message', (event, arg) => {
-    event.returnValue = 'pong'
-})

docs/fiddles/communication/two-processes/synchronous-messages/renderer.js

@@ -1,9 +0,0 @@
-const { ipcRenderer } = require('electron')
-
-const syncMsgBtn = document.getElementById('sync-msg')
-
-syncMsgBtn.addEventListener('click', () => {
-    const reply = ipcRenderer.sendSync('synchronous-message', 'ping')
-    const message = `Synchronous message reply: ${reply}`
-    document.getElementById('sync-reply').innerHTML = message
-})

docs/fiddles/ipc/pattern-1/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
+    <title>Hello World!</title>
+  </head>
+  <body>
+    Title: <input id="title"/>
+    <button id="btn" type="button">Set</button>
+    <script src="./renderer.js"></script>
+  </body>
+</html>

docs/fiddles/ipc/pattern-1/main.js

@@ -0,0 +1,30 @@
+const {app, BrowserWindow, ipcMain} = require('electron')
+const path = require('path')
+
+function createWindow () {
+  const mainWindow = new BrowserWindow({
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js')
+    }
+  })
+
+  ipcMain.on('set-title', (event, title) => {
+    const webContents = event.sender
+    const win = BrowserWindow.fromWebContents(webContents)
+    win.setTitle(title)
+  })
+
+  mainWindow.loadFile('index.html')
+}
+
+app.whenReady().then(() => {
+  createWindow()
+  
+  app.on('activate', function () {
+    if (BrowserWindow.getAllWindows().length === 0) createWindow()
+  })
+})
+
+app.on('window-all-closed', function () {
+  if (process.platform !== 'darwin') app.quit()
+})

docs/fiddles/ipc/pattern-1/preload.js

@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+    setTitle: (title) => ipcRenderer.send('set-title', title)
+})

docs/fiddles/ipc/pattern-1/renderer.js

@@ -0,0 +1,6 @@
+const setButton = document.getElementById('btn')
+const titleInput = document.getElementById('title')
+setButton.addEventListener('click', () => {
+    const title = titleInput.value
+    window.electronAPI.setTitle(title)
+});

docs/fiddles/ipc/pattern-2/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
+    <title>Dialog</title>
+  </head>
+  <body>
+    <button type="button" id="btn">Open a File</button>
+    File path: <strong id="filePath"></strong>
+    <script src='./renderer.js'></script>
+  </body>
+</html>

docs/fiddles/ipc/pattern-2/main.js

@@ -0,0 +1,32 @@
+const {app, BrowserWindow, ipcMain,dialog} = require('electron')
+const path = require('path')
+
+async function handleFileOpen() {
+  const { canceled, filePaths } = await dialog.showOpenDialog()
+  if (canceled) {
+    return
+  } else {
+    return filePaths[0]
+  }
+}
+
+function createWindow () {
+  const mainWindow = new BrowserWindow({
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js')
+    }
+  })
+  mainWindow.loadFile('index.html')
+}
+
+app.whenReady().then(() => {
+  ipcMain.handle('dialog:openFile', handleFileOpen)
+  createWindow()
+  app.on('activate', function () {
+    if (BrowserWindow.getAllWindows().length === 0) createWindow()
+  })
+})
+
+app.on('window-all-closed', function () {
+  if (process.platform !== 'darwin') app.quit()
+})

docs/fiddles/ipc/pattern-2/preload.js

@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron')
+
+contextBridge.exposeInMainWorld('electronAPI',{
+  openFile: () => ipcRenderer.invoke('dialog:openFile')
+})

docs/fiddles/ipc/pattern-2/renderer.js

@@ -0,0 +1,7 @@
+const btn = document.getElementById('btn')
+const filePathElement = document.getElementById('filePath')
+
+btn.addEventListener('click', async () => {
+  const filePath = await window.electronAPI.openFile()
+  filePathElement.innerText = filePath
+})

docs/fiddles/ipc/pattern-3/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
+    <title>Menu Counter</title>
+  </head>
+  <body>
+    Current value: <strong id="counter">0</strong>
+    <script src="./renderer.js"></script>
+  </body>
+</html>

docs/fiddles/ipc/pattern-3/main.js

@@ -0,0 +1,48 @@
+const {app, BrowserWindow, Menu} = require('electron')
+const path = require('path')
+
+function createWindow () {
+  const mainWindow = new BrowserWindow({
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js')
+    }
+  })
+
+  const menu = Menu.buildFromTemplate([
+    {
+      label: app.name,
+      submenu: [
+      {
+        click: () => mainWindow.webContents.send('update-counter', 1),
+        label: 'Increment',
+      },
+      {
+        click: () => mainWindow.webContents.send('update-counter', -1),
+        label: 'Decrement',
+      }
+      ]
+    }
+
+  ])
+
+  Menu.setApplicationMenu(menu)
+  mainWindow.loadFile('index.html')
+
+  // Open the DevTools.
+  mainWindow.webContents.openDevTools()
+}
+
+app.whenReady().then(() => {
+  ipcMain.on('counter-value', (_event, value) => {
+    console.log(value) // will print value to Node console
+  })
+  createWindow()
+  
+  app.on('activate', function () {
+    if (BrowserWindow.getAllWindows().length === 0) createWindow()
+  })
+})
+
+app.on('window-all-closed', function () {
+  if (process.platform !== 'darwin') app.quit()
+})

docs/fiddles/ipc/pattern-3/preload.js

@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  handleCounter: (callback) => ipcRenderer.on('update-counter', callback)
+})

docs/fiddles/ipc/pattern-3/renderer.js

@@ -0,0 +1,8 @@
+const counter = document.getElementById('counter')
+
+window.electronAPI.handleCounter((event, value) => {
+    const oldValue = Number(counter.innerText)
+    const newValue = oldValue + value
+    counter.innerText = newValue
+    event.sender.send('counter-value', newValue)
+})

docs/tutorial/application-distribution.md

@@ -56,7 +56,7 @@ will then be your distribution to deliver to users.
 
 ### With an app source code archive
 
-Instead of from shipping your app by copying all of its source files, you can
+Instead of shipping your app by copying all of its source files, you can
 package your app into an [asar] archive to improve the performance of reading
 files on platforms like Windows, if you are not already using a bundler such
 as Parcel or Webpack.

docs/tutorial/automated-testing.md

@@ -58,8 +58,6 @@ To run your tests:
 $ npx wdio run wdio.conf.js
 ```
 
-[chrome-driver]: https://sites.google.com/chromium.org/driver/
-
 ### With Selenium
 
 [Selenium](https://www.selenium.dev/) is a web automation framework that
@@ -116,6 +114,142 @@ driver.wait(() => {
 driver.quit()
 ```
 
+## Using Playwright
+
+[Microsoft Playwright](https://playwright.dev) is an end-to-end testing framework built
+using browser-specific remote debugging protocols, similar to the [Puppeteer] headless
+Node.js API but geared towards end-to-end testing. Playwright has experimental Electron
+support via Electron's support for the [Chrome DevTools Protocol] (CDP).
+
+### Install dependencies
+
+You can install Playwright through your preferred Node.js package manager. The Playwright team
+recommends using the `PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD` environment variable to avoid
+unnecessary browser downloads when testing an Electron app.
+
+```sh npm2yarn
+PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 npm install --save-dev playwright
+```
+
+Playwright also comes with its own test runner, Playwright Test, which is built for end-to-end
+testing. You can also install it as a dev dependency in your project:
+
+```sh npm2yarn
+npm install --save-dev @playwright/test
+```
+
+:::caution Dependencies
+This tutorial was written `playwright@1.16.3` and `@playwright/test@1.16.3`. Check out
+[Playwright's releases][playwright-releases] page to learn about
+changes that might affect the code below.
+:::
+
+:::info Using third-party test runners
+If you're interested in using an alternative test runner (e.g. Jest or Mocha), check out
+Playwright's [Third-Party Test Runner][playwright-test-runners] guide.
+:::
+
+### Write your tests
+
+Playwright launches your app in development mode through the `_electron.launch` API.
+To point this API to your Electron app, you can pass the path to your main process
+entry point (here, it is `main.js`).
+
+```js {5}
+const { _electron: electron } = require('playwright')
+const { test } = require('@playwright/test')
+
+test('launch app', async () => {
+  const electronApp = await electron.launch({ args: ['main.js'] })
+  // close app
+  await electronApp.close()
+})
+```
+
+After that, you will access to an instance of Playwright's `ElectronApp` class. This
+is a powerful class that has access to main process modules for example:
+
+```js {6-11}
+const { _electron: electron } = require('playwright')
+const { test } = require('@playwright/test')
+
+test('get isPackaged', async () => {
+  const electronApp = await electron.launch({ args: ['main.js'] })
+  const isPackaged = await electronApp.evaluate(async ({ app }) => {
+    // This runs in Electron's main process, parameter here is always
+    // the result of the require('electron') in the main app script.
+    return app.isPackaged
+  })
+  console.log(isPackaged) // false (because we're in development mode)
+  // close app
+  await electronApp.close()
+})
+```
+
+It can also create individual [Page][playwright-page] objects from Electron BrowserWindow instances.
+For example, to grab the first BrowserWindow and save a screenshot:
+
+```js {6-7}
+const { _electron: electron } = require('playwright')
+const { test } = require('@playwright/test')
+
+test('save screenshot', async () => {
+  const electronApp = await electron.launch({ args: ['main.js'] })
+  const window = await electronApp.firstWindow()
+  await window.screenshot({ path: 'intro.png' })
+  // close app
+  await electronApp.close()
+})
+```
+
+Putting all this together using the PlayWright Test runner, let's create a `example.spec.js`
+test file with a single test and assertion:
+
+```js title='example.spec.js'
+const { _electron: electron } = require('playwright')
+const { test, expect } = require('@playwright/test')
+
+test('example test', async () => {
+  const electronApp = await electron.launch({ args: ['.'] })
+  const isPackaged = await electronApp.evaluate(async ({ app }) => {
+    // This runs in Electron's main process, parameter here is always
+    // the result of the require('electron') in the main app script.
+    return app.isPackaged;
+  });
+
+  expect(isPackaged).toBe(false);
+
+  // Wait for the first BrowserWindow to open
+  // and return its Page object
+  const window = await electronApp.firstWindow()
+  await window.screenshot({ path: 'intro.png' })
+
+  // close app
+  await electronApp.close()
+});
+```
+
+Then, run Playwright Test using `npx playwright test`. You should see the test pass in your
+console, and have an `intro.png` screenshot on your filesystem.
+
+```console
+☁  $ npx playwright test
+
+Running 1 test using 1 worker
+
+  ✓  example.spec.js:4:1 › example test (1s)
+```
+
+:::info
+Playwright Test will automatically run any files matching the `.*(test|spec)\.(js|ts|mjs)` regex.
+You can customize this match in the [Playwright Test configuration options][playwright-test-config].
+:::
+
+:::tip Further reading
+Check out Playwright's documentation for the full [Electron][playwright-electron]
+and [ElectronApplication][playwright-electronapplication] class APIs.
+:::
+
 ## Using a custom test driver
 
 It's also possible to write your own custom driver using Node.js' built-in IPC-over-STDIO.
@@ -263,3 +397,13 @@ test.after.always('cleanup', async t => {
   await app.stop()
 })
 ```
+
+[chrome-driver]: https://sites.google.com/chromium.org/driver/
+[Puppeteer]: https://github.com/puppeteer/puppeteer
+[playwright-electron]: https://playwright.dev/docs/api/class-electron/
+[playwright-electronapplication]: https://playwright.dev/docs/api/class-electronapplication
+[playwright-page]: https://playwright.dev/docs/api/class-page
+[playwright-releases]: https://github.com/microsoft/playwright/releases
+[playwright-test-config]: https://playwright.dev/docs/api/class-testconfig#test-config-test-match
+[playwright-test-runners]: https://playwright.dev/docs/test-runners/
+[Chrome DevTools Protocol]: https://chromedevtools.github.io/devtools-protocol/

docs/tutorial/electron-timelines.md

@@ -26,4 +26,5 @@ Special notes:
 | 14.0.0 | -- | 2021-May-27 | 2021-Aug-31 | M93 | v14.17 |
 | 15.0.0 | 2021-Jul-20 | 2021-Sep-01 | 2021-Sep-21 | M94 | v16.5 |
 | 16.0.0 | 2021-Sep-23 | 2021-Oct-20 | 2021-Nov-16 | M96 | v16.9 |
-| 17.0.0 | 2021-Nov-18 | 2022-Jan-06 | 2022-Feb-01 | M98 | TBD |
+| 17.0.0 | 2021-Nov-18 | 2022-Jan-06 | 2022-Feb-01 | M98 | v16.13 |
+| 18.0.0 | 2022-Feb-03 | 2022-Mar-03 | 2022-Mar-29 | M100 | TBD |

docs/tutorial/in-app-purchases.md

@@ -1,4 +1,11 @@
-# In-App Purchases (macOS)
+---
+title: In-App Purchases
+description: Add in-app purchases to your Mac App Store (MAS) application
+slug: in-app-purchases
+hide_title: true
+---
+
+# In-App Purchases
 
 ## Preparing
 

docs/tutorial/installation.md

@@ -91,7 +91,7 @@ The above configuration will download from URLs such as
 `https://npm.taobao.org/mirrors/electron/8.0.0/electron-v8.0.0-linux-x64.zip`.
 
 If your mirror serves artifacts with different checksums to the official
-Electron release you may have to set `ELECTRON_USE_REMOTE_CHECKSUMS=1` to
+Electron release you may have to set `electron_use_remote_checksums=1` to
 force Electron to use the remote `SHASUMS256.txt` file to verify the checksum
 instead of the embedded checksums.
 

docs/tutorial/introduction.md

@@ -56,4 +56,4 @@ problem. If not, feel free to fill out our bug report template and submit a new
 [comic]: https://www.google.com/googlebooks/chrome/
 [fiddle]: https://electronjs.org/fiddle
 [issue-tracker]: https://github.com/electron/electron/issues
-[discord]: https://discord.gg/electron
+[discord]: https://discord.gg/electronjs

docs/tutorial/ipc.md

@@ -0,0 +1,571 @@
+---
+title: Inter-Process Communication
+description: Use the ipcMain and ipcRenderer modules to communicate between Electron processes
+slug: ipc
+hide_title: false
+---
+
+# Inter-Process Communication
+
+Inter-process communication (IPC) is a key part of building feature-rich desktop applications
+in Electron. Because the main and renderer processes have different responsibilities in
+Electron's process model, IPC is the only way to perform many common tasks, such as calling a
+native API from your UI or triggering changes in your web contents from native menus.
+
+## IPC channels
+
+In Electron, processes communicate by passing messages through developer-defined "channels"
+with the [`ipcMain`] and [`ipcRenderer`] modules. These channels are
+**arbitrary** (you can name them anything you want) and **bidirectional** (you can use the
+same channel name for both modules).
+
+In this guide, we'll be going over some fundamental IPC patterns with concrete examples that
+you can use as a reference for your app code.
+
+## Understanding context-isolated processes
+
+Before proceeding to implementation details, you should be familiar with the idea of using a
+[preload script] to import Node.js and Electron modules in a context-isolated renderer process.
+
+* For a full overview of Electron's process model, you can read the [process model docs].
+* For a primer into exposing APIs from your preload script using the `contextBridge` module, check
+out the [context isolation tutorial].
+
+## Pattern 1: Renderer to main (one-way)
+
+To fire a one-way IPC message from a renderer process to the main process, you can use the
+[`ipcRenderer.send`] API to send a message that is then received by the [`ipcMain.on`] API.
+
+You usually use this pattern to call a main process API from your web contents. We'll demonstrate
+this pattern by creating a simple app that can programmatically change its window title.
+
+For this demo, you'll need to add code to your main process, your renderer process, and a preload
+script. The full code is below, but we'll be explaining each file individually in the following
+sections.
+
+```fiddle docs/fiddles/ipc/pattern-1
+```
+
+### 1. Listen for events with `ipcMain.on`
+
+In the main process, set an IPC listener on the `set-title` channel with the `ipcMain.on` API:
+
+```javascript {6-10,22} title='main.js (Main Process)'
+const {app, BrowserWindow, ipcMain} = require('electron')
+const path = require('path')
+
+//...
+
+function handleSetTitle (event, title) {
+  const webContents = event.sender
+  const win = BrowserWindow.fromWebContents(webContents)
+  win.setTitle(title)
+}
+
+function createWindow () {
+  const mainWindow = new BrowserWindow({
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js')
+    }
+  })
+  mainWindow.loadFile('index.html')
+}
+
+app.whenReady().then(() => {
+  ipcMain.on('set-title', handleSetTitle)
+  createWindow()
+}
+//...
+```
+
+The above `handleSetTitle` callback has two parameters: an [IpcMainEvent] structure and a
+`title` string. Whenever a message comes through the `set-title` channel, this function will
+find the BrowserWindow instance attached to the message sender and use the `win.setTitle`
+API on it.
+
+:::info
+Make sure you're loading the `index.html` and `preload.js` entry points for the following steps!
+:::
+
+### 2. Expose `ipcRenderer.send` via preload
+
+To send messages to the listener created above, you can use the `ipcRenderer.send` API.
+By default, the renderer process has no Node.js or Electron module access. As an app developer,
+you need to choose which APIs to expose from your preload script using the `contextBridge` API.
+
+In your preload script, add the following code, which will expose a global `window.electronAPI`
+variable to your renderer process.
+
+```javascript title='preload.js (Preload Script)'
+const { contextBridge, ipcRenderer } = require('electron')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+    setTitle: (title) => ipcRenderer.send('set-title', title)
+})
+```
+
+At this point, you'll be able to use the `window.electronAPI.setTitle()` function in the renderer
+process.
+
+:::caution Security warning
+We don't directly expose the whole `ipcRenderer.send` API for [security reasons]. Make sure to
+limit the renderer's access to Electron APIs as much as possible.
+:::
+
+### 3. Build the renderer process UI
+
+In our BrowserWindow's loaded HTML file, add a basic user interface consisting of a text input
+and a button:
+
+```html {11-12} title='index.html'
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
+    <title>Hello World!</title>
+  </head>
+  <body>
+    Title: <input id="title"/>
+    <button id="btn" type="button">Set</button>
+    <script src="./renderer.js"></script>
+  </body>
+</html>
+```
+
+To make these elements interactive, we'll be adding a few lines of code in the imported
+`renderer.js` file that leverages the `window.electronAPI` functionality exposed from the preload
+script:
+
+```javascript title='renderer.js (Renderer Process)'
+const setButton = document.getElementById('btn')
+const titleInput = document.getElementById('title')
+setButton.addEventListener('click', () => {
+    const title = titleInput.value
+    window.electronAPI.setTitle(title)
+});
+```
+
+At this point, your demo should be fully functional. Try using the input field and see what happens
+to your BrowserWindow title!
+
+## Pattern 2: Renderer to main (two-way)
+
+A common application for two-way IPC is calling a main process module from your renderer process
+code and waiting for a result. This can be done by using [`ipcRenderer.invoke`] paired with
+[`ipcMain.handle`].
+
+In the following example, we'll be opening a native file dialog from the renderer process and
+returning the selected file's path.
+
+For this demo, you'll need to add code to your main process, your renderer process, and a preload
+script. The full code is below, but we'll be explaining each file individually in the following
+sections.
+
+```fiddle docs/fiddles/ipc/pattern-2
+```
+
+### 1. Listen for events with `ipcMain.handle`
+
+In the main process, we'll be creating a `handleFileOpen()` function that calls
+`dialog.showOpenDialog` and returns the value of the file path selected by the user. This function
+is used as a callback whenever an `ipcRender.invoke` message is sent through the `dialog:openFile`
+channel from the renderer process. The return value is then returned as a Promise to the original
+`invoke` call.
+
+:::caution A word on error handling
+Errors thrown through `handle` in the main process are not transparent as they
+are serialized and only the `message` property from the original error is
+provided to the renderer process. Please refer to
+[#24427](https://github.com/electron/electron/issues/24427) for details.
+:::
+
+```javascript {6-13,25} title='main.js (Main Process)'
+const { BrowserWindow, dialog, ipcMain } = require('electron')
+const path = require('path')
+
+//...
+
+async function handleFileOpen() {
+  const { canceled, filePaths } = await dialog.showOpenDialog()
+  if (canceled) {
+    return
+  } else {
+    return filePaths[0]
+  }
+}
+
+function createWindow () {
+  const mainWindow = new BrowserWindow({
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js')
+    }
+  })
+  mainWindow.loadFile('index.html')
+}
+
+app.whenReady(() => {
+  ipcMain.handle('dialog:openFile', handleFileOpen)
+  createWindow()
+})
+//...
+```
+
+:::tip on channel names
+The `dialog:` prefix on the IPC channel name has no effect on the code. It only serves
+as a namespace that helps with code readability.
+:::
+
+:::info
+Make sure you're loading the `index.html` and `preload.js` entry points for the following steps!
+:::
+
+### 2. Expose `ipcRenderer.invoke` via preload
+
+In the preload script, we expose a one-line `openFile` function that calls and returns the value of
+`ipcRenderer.invoke('dialog:openFile')`. We'll be using this API in the next step to call the
+native dialog from our renderer's user interface.
+
+```javascript title='preload.js (Preload Script)'
+const { contextBridge, ipcRenderer } = require('electron')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  openFile: () => ipcRenderer.invoke('dialog:openFile')
+})
+```
+
+:::caution Security warning
+We don't directly expose the whole `ipcRenderer.invoke` API for [security reasons]. Make sure to
+limit the renderer's access to Electron APIs as much as possible.
+:::
+
+### 3. Build the renderer process UI
+
+Finally, let's build the HTML file that we load into our BrowserWindow.
+
+```html {10-11} title='index.html'
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
+    <title>Dialog</title>
+  </head>
+  <body>
+    <button type="button" id="btn">Open a File</button>
+    File path: <strong id="filePath"></strong>
+    <script src='./renderer.js'></script>
+  </body>
+</html>
+```
+
+The UI consists of a single `#btn` button element that will be used to trigger our preload API, and
+a `#filePath` element that will be used to display the path of the selected file. Making these
+pieces work will take a few lines of code in the renderer process script:
+
+```javascript title='renderer.js (Renderer Process)'
+const btn = document.getElementById('btn')
+const filePathElement = document.getElementById('filePath')
+
+btn.addEventListener('click', async () => {
+  const filePath = await window.electronAPI.openFile()
+  filePathElement.innerText = filePath
+})
+```
+
+In the above snippet, we listen for clicks on the `#btn` button, and call our
+`window.electronAPI.openFile()` API to activate the native Open File dialog. We then display the
+selected file path in the `#filePath` element.
+
+### Note: legacy approaches
+
+The `ipcRenderer.invoke` API was added in Electron 7 as a developer-friendly way to tackle two-way
+IPC from the renderer process. However, there exist a couple alternative approaches to this IPC
+pattern.
+
+:::warning Avoid legacy approaches if possible
+We recommend using `ipcRenderer.invoke` whenever possible. The following two-way renderer-to-main
+patterns are documented for historical purposes.
+:::
+
+:::info
+For the following examples, we're calling `ipcRenderer` directly from the preload script to keep
+the code samples small.
+:::
+
+#### Using `ipcRenderer.send`
+
+The `ipcRenderer.send` API that we used for single-way communication can also be leveraged to
+perform two-way communication. This was the recommended way for asynchronous two-way communication
+via IPC prior to Electron 7.
+
+```javascript title='preload.js (Preload Script)'
+// You can also put expose this code to the renderer
+// process with the `contextBridge` API
+const { ipcRenderer } = require('electron')
+
+ipcRenderer.on('asynchronous-reply', (_event, arg) => {
+  console.log(arg) // prints "pong" in the DevTools console
+})
+ipcRenderer.send('asynchronous-message', 'ping')
+```
+
+```javascript title='main.js (Main Process)'
+ipcMain.on('asynchronous-message', (event, arg) => {
+  console.log(arg) // prints "ping" in the Node console
+  // works like `send`, but returning a message back
+  // to the renderer that sent the original message
+  event.reply('asynchronous-reply', 'pong')
+})
+```
+
+There are a couple downsides to this approach:
+
+* You need to set up a second `ipcRenderer.on` listener to handle the response in the renderer
+process. With `invoke`, you get the response value returned as a Promise to the original API call.
+* There's no obvious way to pair the `asynchronous-reply` message to the original
+`asynchronous-message` one. If you have very frequent messages going back and forth through these
+channels, you would need to add additional app code to track each call and response individually.
+
+#### Using `ipcRenderer.sendSync`
+
+The `ipcRenderer.sendSync` API sends a message to the main process and waits _synchronously_ for a
+response.
+
+```javascript title='main.js (Main Process)'
+const { ipcMain } = require('electron')
+ipcMain.on('synchronous-message', (event, arg) => {
+  console.log(arg) // prints "ping" in the Node console
+  event.returnValue = 'pong'
+})
+```
+
+```javascript title='preload.js (Preload Script)'
+// You can also put expose this code to the renderer
+// process with the `contextBridge` API
+const { ipcRenderer } = require('electron')
+
+const result = ipcRenderer.sendSync('synchronous-message', 'ping')
+console.log(result) // prints "pong" in the DevTools console
+```
+
+The structure of this code is very similar to the `invoke` model, but we recommend
+**avoiding this API** for performance reasons. Its synchronous nature means that it'll block the
+renderer process until a reply is received.
+
+## Pattern 3: Main to renderer
+
+When sending a message from the main process to a renderer process, you need to specify which
+renderer is receiving the message. Messages need to be sent to a renderer process
+via its [`WebContents`] instance. This WebContents instance contains a [`send`][webcontents-send] method
+that can be used in the same way as `ipcRenderer.send`.
+
+To demonstrate this pattern, we'll be building a number counter controlled by the native operating
+system menu.
+
+For this demo, you'll need to add code to your main process, your renderer process, and a preload
+script. The full code is below, but we'll be explaining each file individually in the following
+sections.
+
+```fiddle docs/fiddles/ipc/pattern-3
+```
+
+### 1. Send messages with the `webContents` module
+
+For this demo, we'll need to first build a custom menu in the main process using Electron's `Menu`
+module that uses the `webContents.send` API to send an IPC message from the main process to the
+target renderer.
+
+```javascript {11-26} title='main.js (Main Process)'
+const {app, BrowserWindow, Menu, ipcMain} = require('electron')
+const path = require('path')
+
+function createWindow () {
+  const mainWindow = new BrowserWindow({
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js')
+    }
+  })
+
+  const menu = Menu.buildFromTemplate([
+    {
+      label: app.name,
+      submenu: [
+        {
+          click: () => mainWindow.webContents.send('update-counter', 1),
+          label: 'Increment',
+        },
+        {
+          click: () => mainWindow.webContents.send('update-counter', -1),
+          label: 'Decrement',
+        }
+      ]
+    }
+  ])
+  Menu.setApplicationMenu(menu)
+
+  mainWindow.loadFile('index.html')
+}
+//...
+
+```
+
+For the purposes of the tutorial, it's important to note that the `click` handler
+sends a message (either `1` or `-1`) to the renderer process through the `counter` channel.
+
+```javascript
+click: () => mainWindow.webContents.send('update-counter', -1)
+```
+
+:::info
+Make sure you're loading the `index.html` and `preload.js` entry points for the following steps!
+:::
+
+### 2. Expose `ipcRenderer.on` via preload
+
+Like in the previous renderer-to-main example, we use the `contextBridge` and `ipcRenderer`
+modules in the preload script to expose IPC functionality to the renderer process:
+
+```javascript title='preload.js (Preload Script)'
+const { contextBridge, ipcRenderer } = require('electron')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+    onUpdateCounter: (callback) => ipcRenderer.on('update-counter', callback)
+})
+```
+
+After loading the preload script, your renderer process should have access to the
+`window.electronAPI.onUpdateCounter()` listener function.
+
+:::caution Security warning
+We don't directly expose the whole `ipcRenderer.on` API for [security reasons]. Make sure to
+limit the renderer's access to Electron APIs as much as possible.
+:::
+
+:::info
+In the case of this minimal example, you can call `ipcRenderer.on` directly in the preload script
+rather than exposing it over the context bridge.
+
+```javascript title='preload.js (Preload Script)'
+const { ipcRenderer } = require('electron')
+
+window.addEventListener('DOMContentLoaded', () => {
+    const counter = document.getElementById('counter')
+    ipcRenderer.on('update-counter', (_event, value) => {
+        const oldValue = Number(counter.innerText)
+        const newValue = oldValue + value
+        counter.innerText = newValue
+    })
+})
+```
+
+However, this approach has limited flexibility compared to exposing your preload APIs
+over the context bridge, since your listener can't directly interact with your renderer code.
+:::
+
+### 3. Build the renderer process UI
+
+To tie it all together, we'll create an interface in the loaded HTML file that contains a
+`#counter` element that we'll use to display the values:
+
+```html {10} title='index.html'
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
+    <title>Menu Counter</title>
+  </head>
+  <body>
+    Current value: <strong id="counter">0</strong>
+    <script src="./renderer.js"></script>
+  </body>
+</html>
+```
+
+Finally, to make the values update in the HTML document, we'll add a few lines of DOM manipulation
+so that the value of the `#counter` element is updated whenever we fire an `update-counter` event.
+
+```javascript title='renderer.js (Renderer Process)'
+const counter = document.getElementById('counter')
+
+window.electronAPI.onUpdateCounter((_event, value) => {
+    const oldValue = Number(counter.innerText)
+    const newValue = oldValue + value
+    counter.innerText = newValue
+})
+```
+
+In the above code, we're passing in a callback to the `window.electronAPI.onUpdateCounter` function
+exposed from our preload script. The second `value` parameter corresponds to the `1` or `-1` we
+were passing in from the `webContents.send` call from the native menu.
+
+### Optional: returning a reply
+
+There's no equivalent for `ipcRenderer.invoke` for main-to-renderer IPC. Instead, you can
+send a reply back to the main process from within the `ipcRenderer.on` callback.
+
+We can demonstrate this with slight modifications to the code from the previous example. In the
+renderer process, use the `event` parameter to send a reply back to the main process through the
+`counter-value` channel.
+
+```javascript title='renderer.js (Renderer Process)'
+const counter = document.getElementById('counter')
+
+window.electronAPI.onUpdateCounter((event, value) => {
+  const oldValue = Number(counter.innerText)
+  const newValue = oldValue + value
+  counter.innerText = newValue
+  event.sender.send('counter-value', newValue)
+})
+```
+
+In the main process, listen for `counter-value` events and handle them appropriately.
+
+```javascript title='main.js (Main Process)'
+//...
+ipcMain.on('counter-value', (_event, value) => {
+  console.log(value) // will print value to Node console
+})
+//...
+```
+
+## Pattern 4: Renderer to renderer
+
+There's no direct way to send messages between renderer processes in Electron using the `ipcMain`
+and `ipcRenderer` modules. To achieve this, you have two options:
+
+* Use the main process as a message broker between renderers. This would involve sending a message
+from one renderer to the main process, which would forward the message to the other renderer.
+* Pass a [MessagePort] from the main process to both renderers. This will allow direct communication
+between renderers after the initial setup.
+
+## Object serialization
+
+Electron's IPC implementation uses the HTML standard
+[Structured Clone Algorithm][sca] to serialize objects passed between processes, meaning that
+only certain types of objects can be passed through IPC channels.
+
+In particular, DOM objects (e.g. `Element`, `Location` and `DOMMatrix`), Node.js objects
+backed by C++ classes (e.g. `process.env`, some members of `Stream`), and Electron objects
+backed by C++ classes (e.g. `WebContents`, `BrowserWindow` and `WebFrame`) are not serializable
+with Structured Clone.
+
+[context isolation tutorial]: context-isolation.md
+[security reasons]: ./context-isolation.md#security-considerations
+[`ipcMain`]: ../api/ipc-main.md
+[`ipcMain.handle`]: ../api/ipc-main.md#ipcmainhandlechannel-listener
+[`ipcMain.on`]: ../api/ipc-main.md
+[IpcMainEvent]: ../api/structures/ipc-main-event.md
+[`ipcRenderer`]: ../api/ipc-renderer.md
+[`ipcRenderer.invoke`]: ../api/ipc-renderer.md#ipcrendererinvokechannel-args
+[`ipcRenderer.send`]: ../api/ipc-renderer.md
+[MessagePort]: ./message-ports.md
+[preload script]: process-model.md#preload-scripts
+[process model docs]: process-model.md
+[sca]: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm
+[`WebContents`]: ../api/web-contents.md
+[webcontents-send]: ../api/web-contents.md#contentssendchannel-args

docs/tutorial/launch-app-from-url-in-another-app.md

@@ -1,11 +1,11 @@
 ---
-title: Launching Your Electron App From a URL In Another App
-description: This guide will take you through the process of setting your electron app as the default handler for a specific protocol.
+title: Deep Links
+description: Set your Electron app as the default handler for a specific protocol.
 slug: launch-app-from-url-in-another-app
 hide_title: true
 ---
 
-# Launching Your Electron App From A URL In Another App
+# Deep Links
 
 ## Overview
 

docs/tutorial/linux-desktop-actions.md

@@ -1,4 +1,11 @@
-# Desktop Launcher Actions (Linux)
+---
+title: Desktop Launcher Actions
+description: Add actions to the system launcher on Linux environments.
+slug: linux-desktop-actions
+hide_title: true
+---
+
+# Desktop Launcher Actions
 
 ## Overview
 
@@ -42,4 +49,4 @@ parameters. You can find them in your application in the global variable
 
 [unity-launcher]: https://help.ubuntu.com/community/UnityLaunchersAndDesktopFiles#Adding_shortcuts_to_a_launcher
 [audacious-launcher]: https://help.ubuntu.com/community/UnityLaunchersAndDesktopFiles?action=AttachFile&do=get&target=shortcuts.png
-[spec]: https://specifications.freedesktop.org/desktop-entry-spec/1.1/ar01s11.html
+[spec]: https://specifications.freedesktop.org/desktop-entry-spec/desktop-entry-spec-latest.html

docs/tutorial/macos-dock.md

@@ -1,4 +1,11 @@
-# Dock (macOS)
+---
+title: Dock
+description: Configure your application's Dock presence on macOS.
+slug: macos-dock
+hide_title: true
+---
+
+# Dock
 
 Electron has APIs to configure the app's icon in the macOS Dock. A macOS-only
 API exists to create a custom dock menu, but Electron also uses the app dock
@@ -16,12 +23,6 @@ To set your custom dock menu, you need to use the
 [`app.dock.setMenu`](../api/dock.md#docksetmenumenu-macos) API,
 which is only available on macOS.
 
-## Example
-
-Starting with a working application from the
- [Quick Start Guide](quick-start.md), update the `main.js` file with the
- following lines:
-
 ```javascript fiddle='docs/fiddles/features/macos-dock-menu'
 const { app, BrowserWindow, Menu } = require('electron')
 

docs/tutorial/notifications.md

@@ -146,7 +146,7 @@ desktop environment that follows [Desktop Notifications
 Specification][notification-spec], including Cinnamon, Enlightenment, Unity,
 GNOME, KDE.
 
-[notification-spec]: https://developer.gnome.org/notification-spec/
+[notification-spec]: https://developer-old.gnome.org/notification-spec/
 [app-user-model-id]: https://msdn.microsoft.com/en-us/library/windows/desktop/dd378459(v=vs.85).aspx
 [set-app-user-model-id]: ../api/app.md#appsetappusermodelidid-windows
 [squirrel-events]: https://github.com/electron/windows-installer/blob/master/README.md#handling-squirrel-events

docs/tutorial/performance.md

@@ -1,3 +1,11 @@
+---
+title: Performance
+description: A set of guidelines for building performant Electron apps
+slug: performance
+hide_title: true
+toc_max_heading_level: 3
+---
+
 # Performance
 
 Developers frequently ask about strategies to optimize the performance of
@@ -49,7 +57,7 @@ at once, consider the [Chrome Tracing](https://www.chromium.org/developers/how-t
 * [Get Started With Analyzing Runtime Performance][chrome-devtools-tutorial]
 * [Talk: "Visual Studio Code - The First Second"][vscode-first-second]
 
-## Checklist
+## Checklist: Performance recommendations
 
 Chances are that your app could be a little leaner, faster, and generally less
 resource-hungry if you attempt these steps.
@@ -62,7 +70,7 @@ resource-hungry if you attempt these steps.
 6. [Unnecessary or blocking network requests](#6-unnecessary-or-blocking-network-requests)
 7. [Bundle your code](#7-bundle-your-code)
 
-## 1) Carelessly including modules
+### 1. Carelessly including modules
 
 Before adding a Node.js module to your application, examine said module. How
 many dependencies does that module include? What kind of resources does
@@ -70,7 +78,7 @@ it need to simply be called in a `require()` statement? You might find
 that the module with the most downloads on the NPM package registry or the most stars on GitHub
 is not in fact the leanest or smallest one available.
 
-### Why?
+#### Why?
 
 The reasoning behind this recommendation is best illustrated with a real-world
 example. During the early days of Electron, reliable detection of network
@@ -99,7 +107,7 @@ running Linux might be bad news for your app's performance. In this particular
 example, the correct solution was to use no module at all, and to instead use
 connectivity checks included in later versions of Chromium.
 
-### How?
+#### How?
 
 When considering a module, we recommend that you check:
 
@@ -128,7 +136,7 @@ In this example, on the author's machine, we saw that loading `request` took
 almost half a second, whereas `node-fetch` took dramatically less memory
 and less than 50ms.
 
-## 2) Loading and running code too soon
+### 2. Loading and running code too soon
 
 If you have expensive setup operations, consider deferring those. Inspect all
 the work being executed right after the application starts. Instead of firing
@@ -141,7 +149,7 @@ using the same strategy _and_ are using sizable modules that you do not
 immediately need, apply the same strategy and defer loading to a more
 opportune time.
 
-### Why?
+#### Why?
 
 Loading modules is a surprisingly expensive operation, especially on Windows.
 When your app starts, it should not make users wait for operations that are
@@ -157,14 +165,14 @@ immediately display the file to you without any code highlighting, prioritizing
 your ability to interact with the text. Once it has done that work, it will
 move on to code highlighting.
 
-### How?
+#### How?
 
 Let's consider an example and assume that your application is parsing files
 in the fictitious `.foo` format. In order to do that, it relies on the
 equally fictitious `foo-parser` module. In traditional Node.js development,
 you might write code that eagerly loads dependencies:
 
-```js
+```js title='parser.js'
 const fs = require('fs')
 const fooParser = require('foo-parser')
 
@@ -187,7 +195,7 @@ In the above example, we're doing a lot of work that's being executed as soon
 as the file is loaded. Do we need to get parsed files right away? Could we
 do this work a little later, when `getParsedFiles()` is actually called?
 
-```js
+```js title='parser.js'
 // "fs" is likely already being loaded, so the `require()` call is cheap
 const fs = require('fs')
 
@@ -223,7 +231,7 @@ module.exports = { parser }
 In short, allocate resources "just in time" rather than allocating them all
 when your app starts.
 
-## 3) Blocking the main process
+### 3. Blocking the main process
 
 Electron's main process (sometimes called "browser process") is special: It is
 the parent process to all your app's other processes and the primary process
@@ -235,7 +243,7 @@ Under no circumstances should you block this process and the UI thread with
 long-running operations. Blocking the UI thread means that your entire app
 will freeze until the main process is ready to continue processing.
 
-### Why?
+#### Why?
 
 The main process and its UI thread are essentially the control tower for major
 operations inside your app. When the operating system tells your app about a
@@ -246,31 +254,31 @@ the GPU process about that – once again going through the main process.
 Electron and Chromium are careful to put heavy disk I/O and CPU-bound operations
 onto new threads to avoid blocking the UI thread. You should do the same.
 
-### How?
+#### How?
 
 Electron's powerful multi-process architecture stands ready to assist you with
 your long-running tasks, but also includes a small number of performance traps.
 
-1) For long running CPU-heavy tasks, make use of
+1. For long running CPU-heavy tasks, make use of
 [worker threads][worker-threads], consider moving them to the BrowserWindow, or
 (as a last resort) spawn a dedicated process.
 
-2) Avoid using the synchronous IPC and the `remote` module as much as possible.
-While there are legitimate use cases, it is far too easy to unknowingly block
-the UI thread using the `remote` module.
+2. Avoid using the synchronous IPC and the `@electron/remote` module as much
+as possible. While there are legitimate use cases, it is far too easy to
+unknowingly block the UI thread.
 
-3) Avoid using blocking I/O operations in the main process. In short, whenever
+3. Avoid using blocking I/O operations in the main process. In short, whenever
 core Node.js modules (like `fs` or `child_process`) offer a synchronous or an
 asynchronous version, you should prefer the asynchronous and non-blocking
 variant.
 
-## 4) Blocking the renderer process
+### 4. Blocking the renderer process
 
 Since Electron ships with a current version of Chrome, you can make use of the
 latest and greatest features the Web Platform offers to defer or offload heavy
 operations in a way that keeps your app smooth and responsive.
 
-### Why?
+#### Why?
 
 Your app probably has a lot of JavaScript to run in the renderer process. The
 trick is to execute operations as quickly as possible without taking away
@@ -280,7 +288,7 @@ at 60fps.
 Orchestrating the flow of operations in your renderer's code is
 particularly useful if users complain about your app sometimes "stuttering".
 
-### How?
+#### How?
 
 Generally speaking, all advice for building performant web apps for modern
 browsers apply to Electron's renderers, too. The two primary tools at your
@@ -300,14 +308,14 @@ some caveats to consider – consult Electron's
 for any operation that requires a lot of CPU power for an extended period of
 time.
 
-## 5) Unnecessary polyfills
+### 5. Unnecessary polyfills
 
 One of Electron's great benefits is that you know exactly which engine will
 parse your JavaScript, HTML, and CSS. If you're re-purposing code that was
 written for the web at large, make sure to not polyfill features included in
 Electron.
 
-### Why?
+#### Why?
 
 When building a web application for today's Internet, the oldest environments
 dictate what features you can and cannot use. Even though Electron supports
@@ -323,7 +331,7 @@ It is rare for a JavaScript-based polyfill to be faster than the equivalent
 native feature in Electron. Do not slow down your Electron app by shipping your
 own version of standard web platform features.
 
-### How?
+#### How?
 
 Operate under the assumption that polyfills in current versions of Electron
 are unnecessary. If you have doubts, check [caniuse.com](https://caniuse.com/)
@@ -338,12 +346,12 @@ If you're using a transpiler/compiler like TypeScript, examine its configuration
 and ensure that you're targeting the latest ECMAScript version supported by
 Electron.
 
-## 6) Unnecessary or blocking network requests
+### 6. Unnecessary or blocking network requests
 
 Avoid fetching rarely changing resources from the internet if they could easily
 be bundled with your application.
 
-### Why?
+#### Why?
 
 Many users of Electron start with an entirely web-based app that they're
 turning into a desktop application. As web developers, we are used to loading
@@ -360,7 +368,7 @@ will take care of the rest.
 When building an Electron app, your users are better served if you download
 the fonts and include them in your app's bundle.
 
-### How?
+#### How?
 
 In an ideal world, your application wouldn't need the network to operate at
 all. To get there, you must understand what resources your app is downloading
@@ -387,21 +395,21 @@ without shipping an application update is a powerful strategy. For advanced
 control over how resources are being loaded, consider investing in
 [Service Workers][service-workers].
 
-## 7) Bundle your code
+### 7. Bundle your code
 
 As already pointed out in
 "[Loading and running code too soon](#2-loading-and-running-code-too-soon)",
 calling `require()` is an expensive operation. If you are able to do so,
 bundle your application's code into a single file.
 
-### Why?
+#### Why?
 
 Modern JavaScript development usually involves many files and modules. While
 that's perfectly fine for developing with Electron, we heavily recommend that
 you bundle all your code into one single file to ensure that the overhead
 included in calling `require()` is only paid once when your application loads.
 
-### How?
+#### How?
 
 There are numerous JavaScript bundlers out there and we know better than to
 anger the community by recommending one tool over another. We do however

docs/tutorial/progress-bar.md

@@ -1,4 +1,11 @@
-# Taskbar Progress Bar (Windows & macOS)
+---
+title: Progress Bars
+description: Provide progress information to users outside of a BrowserWindow.
+slug: progress-bar
+hide_title: true
+---
+
+# Progress Bars
 
 ## Overview
 

docs/tutorial/quick-start.md

@@ -119,7 +119,7 @@ of your project.
 
 Before we can create a window for our application, we need to create the content that
 will be loaded into it. In Electron, each window displays web contents that can be loaded
-from either from a local HTML file or a remote URL.
+from either a local HTML file or a remote URL.
 
 For this tutorial, you will be doing the former. Create an `index.html` file in the root
 folder of your project:
@@ -463,46 +463,46 @@ The fastest way to distribute your newly created app is using
 1. Add Electron Forge as a development dependency of your app, and use its `import` command to set up
 Forge's scaffolding:
 
-    ```sh npm2yarn
-    npm install --save-dev @electron-forge/cli
-    npx electron-forge import
+   ```sh npm2yarn
+   npm install --save-dev @electron-forge/cli
+   npx electron-forge import
 
-    ✔ Checking your system
-    ✔ Initializing Git Repository
-    ✔ Writing modified package.json file
-    ✔ Installing dependencies
-    ✔ Writing modified package.json file
-    ✔ Fixing .gitignore
+   ✔ Checking your system
+   ✔ Initializing Git Repository
+   ✔ Writing modified package.json file
+   ✔ Installing dependencies
+   ✔ Writing modified package.json file
+   ✔ Fixing .gitignore
 
-    We have ATTEMPTED to convert your app to be in a format that electron-forge understands.
+   We have ATTEMPTED to convert your app to be in a format that electron-forge understands.
 
-    Thanks for using "electron-forge"!!!
-    ```
+   Thanks for using "electron-forge"!!!
+   ```
 
-1. Create a distributable using Forge's `make` command:
+2. Create a distributable using Forge's `make` command:
 
-    ```sh npm2yarn
-    npm run make
+   ```sh npm2yarn
+   npm run make
 
-    > my-electron-app@1.0.0 make /my-electron-app
-    > electron-forge make
+   > my-electron-app@1.0.0 make /my-electron-app
+   > electron-forge make
 
-    ✔ Checking your system
-    ✔ Resolving Forge Config
-    We need to package your application before we can make it
-    ✔ Preparing to Package Application for arch: x64
-    ✔ Preparing native dependencies
-    ✔ Packaging Application
-    Making for the following targets: zip
-    ✔ Making for target: zip - On platform: darwin - For arch: x64
-    ```
+   ✔ Checking your system
+   ✔ Resolving Forge Config
+   We need to package your application before we can make it
+   ✔ Preparing to Package Application for arch: x64
+   ✔ Preparing native dependencies
+   ✔ Packaging Application
+   Making for the following targets: zip
+   ✔ Making for target: zip - On platform: darwin - For arch: x64
+   ```
 
-    Electron Forge creates the `out` folder where your package will be located:
+   Electron Forge creates the `out` folder where your package will be located:
 
-    ```plain
-    // Example for macOS
-    out/
-    ├── out/make/zip/darwin/x64/my-electron-app-darwin-x64-1.0.0.zip
-    ├── ...
-    └── out/my-electron-app-darwin-x64/my-electron-app.app/Contents/MacOS/my-electron-app
-    ```
+   ```plain
+   // Example for macOS
+   out/
+   ├── out/make/zip/darwin/x64/my-electron-app-darwin-x64-1.0.0.zip
+   ├── ...
+   └── out/my-electron-app-darwin-x64/my-electron-app.app/Contents/MacOS/my-electron-app
+   ```

docs/tutorial/recent-documents.md

@@ -1,4 +1,11 @@
-# Recent Documents (Windows & macOS)
+---
+title: Recent Documents
+description: Provide a list of recent documents via Windows JumpList or macOS Dock
+slug: recent-documents
+hide_title: true
+---
+
+# Recent Documents
 
 ## Overview
 

docs/tutorial/represented-file.md

@@ -1,4 +1,11 @@
-# Representing Files in a BrowserWindow (macOS)
+---
+title: Representing Files in a BrowserWindow
+description: Set a represented file in the macOS title bar.
+slug: represented-file
+hide_title: true
+---
+
+# Representing Files in a BrowserWindow
 
 ## Overview
 

docs/tutorial/security.md

@@ -1,6 +1,24 @@
-# Security, Native Capabilities, and Your Responsibility
+---
+title: Security
+description: A set of guidelines for building secure Electron apps
+slug: security
+hide_title: true
+toc_max_heading_level: 3
+---
+# Security
 
-As web developers, we usually enjoy the strong security net of the browser -
+:::info Reporting security issues
+For information on how to properly disclose an Electron vulnerability,
+see [SECURITY.md](https://github.com/electron/electron/tree/main/SECURITY.md).
+
+For upstream Chromium vulnerabilities: Electron keeps up to date with alternating
+Chromium releases. For more information, see the
+[Electron Release Timelines](../tutorial/electron-timelines.md) document.
+:::
+
+## Preface
+
+As web developers, we usually enjoy the strong security net of the browser —
 the risks associated with the code we write are relatively small. Our websites
 are granted limited powers in a sandbox, and we trust that our users enjoy a
 browser built by a large team of engineers that is able to quickly respond to
@@ -17,20 +35,12 @@ With that in mind, be aware that displaying arbitrary content from untrusted
 sources poses a severe security risk that Electron is not intended to handle.
 In fact, the most popular Electron apps (Atom, Slack, Visual Studio Code, etc)
 display primarily local content (or trusted, secure remote content without Node
-integration) – if your application executes code from an online source, it is
+integration) — if your application executes code from an online source, it is
 your responsibility to ensure that the code is not malicious.
 
-## Reporting Security Issues
+## General guidelines
 
-For information on how to properly disclose an Electron vulnerability,
-see [SECURITY.md](https://github.com/electron/electron/tree/main/SECURITY.md)
-
-## Chromium Security Issues and Upgrades
-
-Electron keeps up to date with alternating Chromium releases. For more information,
-see the [Electron Release Cadence blog post](https://electronjs.org/blog/12-week-cadence).
-
-## Security Is Everyone's Responsibility
+### Security is everyone's responsibility
 
 It is important to remember that the security of your Electron application is
 the result of the overall security of the framework foundation
@@ -56,7 +66,7 @@ is your own code. Common web vulnerabilities, such as Cross-Site Scripting (XSS)
 have a higher security impact on Electron applications hence it is highly recommended
 to adopt secure software development best practices and perform security testing.
 
-## Isolation For Untrusted Content
+### Isolation for untrusted content
 
 A security issue exists whenever you receive code from an untrusted source (e.g.
 a remote server) and execute it locally. As an example, consider a remote
@@ -65,72 +75,74 @@ an attacker somehow manages to change said content (either by attacking the
 source directly, or by sitting between your app and the actual destination), they
 will be able to execute native code on the user's machine.
 
-> :warning: Under no circumstances should you load and execute remote code with
+:::warning
+Under no circumstances should you load and execute remote code with
 Node.js integration enabled. Instead, use only local files (packaged together
 with your application) to execute Node.js code. To display remote content, use
 the [`<webview>`][webview-tag] tag or [`BrowserView`][browser-view], make sure
 to disable the `nodeIntegration` and enable `contextIsolation`.
+:::
 
-## Electron Security Warnings
-
-From Electron 2.0 on, developers will see warnings and recommendations printed
-to the developer console. They only show up when the binary's name is Electron,
-indicating that a developer is currently looking at the console.
+:::info Electron security warnings
+Security warnings and recommendations are printed to the developer console.
+They only show up when the binary's name is Electron, indicating that a developer
+is currently looking at the console.
 
 You can force-enable or force-disable these warnings by setting
 `ELECTRON_ENABLE_SECURITY_WARNINGS` or `ELECTRON_DISABLE_SECURITY_WARNINGS` on
 either `process.env` or the `window` object.
+:::
 
-## Checklist: Security Recommendations
+## Checklist: Security recommendations
 
 You should at least follow these steps to improve the security of your application:
 
 1. [Only load secure content](#1-only-load-secure-content)
 2. [Disable the Node.js integration in all renderers that display remote content](#2-do-not-enable-nodejs-integration-for-remote-content)
 3. [Enable context isolation in all renderers that display remote content](#3-enable-context-isolation-for-remote-content)
-4. [Enable sandboxing](#4-enable-sandboxing)
+4. [Enable process sandboxing](#4-enable-process-sandboxing)
 5. [Use `ses.setPermissionRequestHandler()` in all sessions that load remote content](#5-handle-session-permission-requests-from-remote-content)
 6. [Do not disable `webSecurity`](#6-do-not-disable-websecurity)
 7. [Define a `Content-Security-Policy`](#7-define-a-content-security-policy) and use restrictive rules (i.e. `script-src 'self'`)
-8. [Do not set `allowRunningInsecureContent` to `true`](#8-do-not-set-allowrunninginsecurecontent-to-true)
+8. [Do not enable `allowRunningInsecureContent`](#8-do-not-enable-allowrunninginsecurecontent)
 9. [Do not enable experimental features](#9-do-not-enable-experimental-features)
 10. [Do not use `enableBlinkFeatures`](#10-do-not-use-enableblinkfeatures)
-11. [`<webview>`: Do not use `allowpopups`](#11-do-not-use-allowpopups)
+11. [`<webview>`: Do not use `allowpopups`](#11-do-not-use-allowpopups-for-webviews)
 12. [`<webview>`: Verify options and params](#12-verify-webview-options-before-creation)
 13. [Disable or limit navigation](#13-disable-or-limit-navigation)
 14. [Disable or limit creation of new windows](#14-disable-or-limit-creation-of-new-windows)
-15. [Do not use `openExternal` with untrusted content](#15-do-not-use-openexternal-with-untrusted-content)
+15. [Do not use `shell.openExternal` with untrusted content](#15-do-not-use-shellopenexternal-with-untrusted-content)
 16. [Use a current version of Electron](#16-use-a-current-version-of-electron)
 
 To automate the detection of misconfigurations and insecure patterns, it is
 possible to use
-[electronegativity](https://github.com/doyensec/electronegativity). For
+[Electronegativity](https://github.com/doyensec/electronegativity). For
 additional details on potential weaknesses and implementation bugs when
 developing applications using Electron, please refer to this [guide for
-developers and auditors](https://doyensec.com/resources/us-17-Carettoni-Electronegativity-A-Study-Of-Electron-Security-wp.pdf)
+developers and auditors](https://doyensec.com/resources/us-17-Carettoni-Electronegativity-A-Study-Of-Electron-Security-wp.pdf).
 
-## 1) Only Load Secure Content
+### 1. Only load secure content
 
 Any resources not included with your application should be loaded using a
 secure protocol like `HTTPS`. In other words, do not use insecure protocols
 like `HTTP`. Similarly, we recommend the use of `WSS` over `WS`, `FTPS` over
 `FTP`, and so on.
 
-### Why?
+#### Why?
 
 `HTTPS` has three main benefits:
 
-1) It authenticates the remote server, ensuring your app connects to the correct
+1. It authenticates the remote server, ensuring your app connects to the correct
    host instead of an impersonator.
-2) It ensures data integrity, asserting that the data was not modified while in
+1. It ensures data integrity, asserting that the data was not modified while in
    transit between your application and the host.
-3) It encrypts the traffic between your user and the destination host, making it
+1. It encrypts the traffic between your user and the destination host, making it
    more difficult to eavesdrop on the information sent between your app and
    the host.
 
-### How?
+#### How?
 
-```js
+```js title='main.js (Main Process)'
 // Bad
 browserWindow.loadURL('http://example.com')
 
@@ -138,7 +150,7 @@ browserWindow.loadURL('http://example.com')
 browserWindow.loadURL('https://example.com')
 ```
 
-```html
+```html title='index.html (Renderer Process)'
 <!-- Bad -->
 <script crossorigin src="http://example.com/react.js"></script>
 <link rel="stylesheet" href="http://example.com/style.css">
@@ -148,9 +160,11 @@ browserWindow.loadURL('https://example.com')
 <link rel="stylesheet" href="https://example.com/style.css">
 ```
 
-## 2) Do not enable Node.js Integration for Remote Content
+### 2. Do not enable Node.js integration for remote content
 
-_This recommendation is the default behavior in Electron since 5.0.0._
+:::info
+This recommendation is the default behavior in Electron since 5.0.0.
+:::
 
 It is paramount that you do not enable Node.js integration in any renderer
 ([`BrowserWindow`][browser-window], [`BrowserView`][browser-view], or
@@ -163,7 +177,7 @@ After this, you can grant additional permissions for specific hosts. For example
 if you are opening a BrowserWindow pointed at `https://example.com/`, you can
 give that website exactly the abilities it needs, but no more.
 
-### Why?
+#### Why?
 
 A cross-site-scripting (XSS) attack is more dangerous if an attacker can jump
 out of the renderer process and execute code on the user's computer.
@@ -172,12 +186,13 @@ power is usually limited to messing with the website that they are executed on.
 Disabling Node.js integration helps prevent an XSS from being escalated into a
 so-called "Remote Code Execution" (RCE) attack.
 
-### How?
+#### How?
 
-```js
+```js title='main.js (Main Process)'
 // Bad
 const mainWindow = new BrowserWindow({
   webPreferences: {
+    contextIsolation: false,
     nodeIntegration: true,
     nodeIntegrationInWorker: true
   }
@@ -186,7 +201,7 @@ const mainWindow = new BrowserWindow({
 mainWindow.loadURL('https://example.com')
 ```
 
-```js
+```js title='main.js (Main Process)'
 // Good
 const mainWindow = new BrowserWindow({
   webPreferences: {
@@ -197,7 +212,7 @@ const mainWindow = new BrowserWindow({
 mainWindow.loadURL('https://example.com')
 ```
 
-```html
+```html title='index.html (Renderer Process)'
 <!-- Bad -->
 <webview nodeIntegration src="page.html"></webview>
 
@@ -208,21 +223,13 @@ mainWindow.loadURL('https://example.com')
 When disabling Node.js integration, you can still expose APIs to your website that
 do consume Node.js modules or features. Preload scripts continue to have access
 to `require` and other Node.js features, allowing developers to expose a custom
-API to remotely loaded content.
+API to remotely loaded content via the [contextBridge API](../api/context-bridge.md).
 
-In the following example preload script, the later loaded website will have
-access to a `window.readConfig()` method, but no Node.js features.
+### 3. Enable Context Isolation for remote content
 
-```js
-const { readFileSync } = require('fs')
-
-window.readConfig = () => {
-  const data = readFileSync('./config.json')
-  return data
-}
-```
-
-## 3) Enable Context Isolation for Remote Content
+:::info
+This recommendation is the default behavior in Electron since 12.0.0.
+:::
 
 Context isolation is an Electron feature that allows developers to run code
 in preload scripts and in Electron APIs in a dedicated JavaScript context. In
@@ -235,48 +242,42 @@ to enable this behavior.
 Even when `nodeIntegration: false` is used, to truly enforce strong isolation
 and prevent the use of Node primitives `contextIsolation` **must** also be used.
 
-### Why & How?
-
+:::info
 For more information on what `contextIsolation` is and how to enable it please
 see our dedicated [Context Isolation](context-isolation.md) document.
+:::info
 
-## 4) Enable Sandboxing
+### 4. Enable process sandboxing
 
-[Sandboxing](sandbox.md) is a Chromium feature that uses the operating system to
+[Sandboxing](https://chromium.googlesource.com/chromium/src/+/HEAD/docs/design/sandbox.md)
+is a Chromium feature that uses the operating system to
 significantly limit what renderer processes have access to. You should enable
 the sandbox in all renderers. Loading, reading or processing any untrusted
 content in an unsandboxed process, including the main process, is not advised.
 
-### How?
+:::info
+For more information on what `contextIsolation` is and how to enable it please
+see our dedicated [Process Sandboxing](sandbox.md) document.
+:::info
 
-When creating a window, pass the `sandbox: true` option in `webPreferences`:
+### 5. Handle session permission requests from remote content
 
-```js
-const win = new BrowserWindow({
-  webPreferences: {
-    sandbox: true
-  }
-})
-```
-
-## 5) Handle Session Permission Requests From Remote Content
-
-You may have seen permission requests while using Chrome: They pop up whenever
+You may have seen permission requests while using Chrome: they pop up whenever
 the website attempts to use a feature that the user has to manually approve (
 like notifications).
 
 The API is based on the [Chromium permissions API](https://developer.chrome.com/extensions/permissions)
 and implements the same types of permissions.
 
-### Why?
+#### Why?
 
 By default, Electron will automatically approve all permission requests unless
 the developer has manually configured a custom handler. While a solid default,
 security-conscious developers might want to assume the very opposite.
 
-### How?
+#### How?
 
-```js
+```js title='main.js (Main Process)'
 const { session } = require('electron')
 
 session
@@ -297,9 +298,11 @@ session
   })
 ```
 
-## 6) Do Not Disable WebSecurity
+### 6. Do not disable `webSecurity`
 
-_Recommendation is Electron's default_
+:::info
+This recommendation is Electron's default.
+:::
 
 You may have already guessed that disabling the `webSecurity` property on a
 renderer process ([`BrowserWindow`][browser-window],
@@ -308,15 +311,15 @@ security features.
 
 Do not disable `webSecurity` in production applications.
 
-### Why?
+#### Why?
 
 Disabling `webSecurity` will disable the same-origin policy and set
 `allowRunningInsecureContent` property to `true`. In other words, it allows
 the execution of insecure code from different domains.
 
-### How?
+#### How?
 
-```js
+```js title='main.js (Main Process)'
 // Bad
 const mainWindow = new BrowserWindow({
   webPreferences: {
@@ -325,12 +328,12 @@ const mainWindow = new BrowserWindow({
 })
 ```
 
-```js
+```js title='main.js (Main Process)'
 // Good
 const mainWindow = new BrowserWindow()
 ```
 
-```html
+```html title='index.html (Renderer Process)'
 <!-- Bad -->
 <webview disablewebsecurity src="page.html"></webview>
 
@@ -338,13 +341,13 @@ const mainWindow = new BrowserWindow()
 <webview src="page.html"></webview>
 ```
 
-## 7) Define a Content Security Policy
+### 7. Define a Content Security Policy
 
 A Content Security Policy (CSP) is an additional layer of protection against
 cross-site-scripting attacks and data injection attacks. We recommend that they
 be enabled by any website you load inside Electron.
 
-### Why?
+#### Why?
 
 CSP allows the server serving content to restrict and control the resources
 Electron can load for that given web page. `https://example.com` should
@@ -352,6 +355,8 @@ be allowed to load scripts from the origins you defined while scripts from
 `https://evil.attacker.com` should not be allowed to run. Defining a CSP is an
 easy way to improve your application's security.
 
+#### How?
+
 The following CSP will allow Electron to execute scripts from the current
 website and from `apis.example.com`.
 
@@ -363,14 +368,14 @@ Content-Security-Policy: '*'
 Content-Security-Policy: script-src 'self' https://apis.example.com
 ```
 
-### CSP HTTP Header
+#### CSP HTTP headers
 
 Electron respects the [`Content-Security-Policy` HTTP header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy)
 which can be set using Electron's
 [`webRequest.onHeadersReceived`](../api/web-request.md#webrequestonheadersreceivedfilter-listener)
 handler:
 
-```javascript
+```javascript title='main.js (Main Process)'
 const { session } = require('electron')
 
 session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
@@ -383,20 +388,22 @@ session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
 })
 ```
 
-### CSP Meta Tag
+#### CSP meta tag
 
-CSP's preferred delivery mechanism is an HTTP header, however it is not possible
+CSP's preferred delivery mechanism is an HTTP header. However, it is not possible
 to use this method when loading a resource using the `file://` protocol. It can
-be useful in some cases, such as using the `file://` protocol, to set a policy
-on a page directly in the markup using a `<meta>` tag:
+be useful in some cases to set a policy on a page directly in the markup using a
+`<meta>` tag:
 
-```html
+```html title='index.html (Renderer Process)'
 <meta http-equiv="Content-Security-Policy" content="default-src 'none'">
 ```
 
-## 8) Do Not Set `allowRunningInsecureContent` to `true`
+### 8. Do not enable `allowRunningInsecureContent`
 
-_Recommendation is Electron's default_
+:::info
+This recommendation is Electron's default.
+:::
 
 By default, Electron will not allow websites loaded over `HTTPS` to load and
 execute scripts, CSS, or plugins from insecure sources (`HTTP`). Setting the
@@ -405,15 +412,15 @@ property `allowRunningInsecureContent` to `true` disables that protection.
 Loading the initial HTML of a website over `HTTPS` and attempting to load
 subsequent resources via `HTTP` is also known as "mixed content".
 
-### Why?
+#### Why?
 
 Loading content over `HTTPS` assures the authenticity and integrity
 of the loaded resources while encrypting the traffic itself. See the section on
 [only displaying secure content](#1-only-load-secure-content) for more details.
 
-### How?
+#### How?
 
-```js
+```js title='main.js (Main Process)'
 // Bad
 const mainWindow = new BrowserWindow({
   webPreferences: {
@@ -422,19 +429,21 @@ const mainWindow = new BrowserWindow({
 })
 ```
 
-```js
+```js title='main.js (Main Process)'
 // Good
 const mainWindow = new BrowserWindow({})
 ```
 
-## 9) Do Not Enable Experimental Features
+### 9. Do not enable experimental features
 
-_Recommendation is Electron's default_
+:::info
+This recommendation is Electron's default.
+:::
 
 Advanced users of Electron can enable experimental Chromium features using the
 `experimentalFeatures` property.
 
-### Why?
+#### Why?
 
 Experimental features are, as the name suggests, experimental and have not been
 enabled for all Chromium users. Furthermore, their impact on Electron as a whole
@@ -443,9 +452,9 @@ has likely not been tested.
 Legitimate use cases exist, but unless you know what you are doing, you should
 not enable this property.
 
-### How?
+#### How?
 
-```js
+```js title='main.js (Main Process)'
 // Bad
 const mainWindow = new BrowserWindow({
   webPreferences: {
@@ -454,20 +463,22 @@ const mainWindow = new BrowserWindow({
 })
 ```
 
-```js
+```js title='main.js (Main Process)'
 // Good
 const mainWindow = new BrowserWindow({})
 ```
 
-## 10) Do Not Use `enableBlinkFeatures`
+### 10. Do not use `enableBlinkFeatures`
 
-_Recommendation is Electron's default_
+:::info
+This recommendation is Electron's default.
+:::
 
 Blink is the name of the rendering engine behind Chromium. As with
 `experimentalFeatures`, the `enableBlinkFeatures` property allows developers to
 enable features that have been disabled by default.
 
-### Why?
+#### Why?
 
 Generally speaking, there are likely good reasons if a feature was not enabled
 by default. Legitimate use cases for enabling specific features exist. As a
@@ -475,9 +486,9 @@ developer, you should know exactly why you need to enable a feature, what the
 ramifications are, and how it impacts the security of your application. Under
 no circumstances should you enable features speculatively.
 
-### How?
+#### How?
 
-```js
+```js title='main.js (Main Process)'
 // Bad
 const mainWindow = new BrowserWindow({
   webPreferences: {
@@ -486,14 +497,16 @@ const mainWindow = new BrowserWindow({
 })
 ```
 
-```js
+```js title='main.js (Main Process)'
 // Good
 const mainWindow = new BrowserWindow()
 ```
 
-## 11) Do Not Use `allowpopups`
+### 11. Do not use `allowpopups` for WebViews
 
-_Recommendation is Electron's default_
+:::info
+This recommendation is Electron's default.
+:::
 
 If you are using [`<webview>`][webview-tag], you might need the pages and scripts
 loaded in your `<webview>` tag to open new windows. The `allowpopups` attribute
@@ -501,16 +514,16 @@ enables them to create new [`BrowserWindows`][browser-window] using the
 `window.open()` method. `<webview>` tags are otherwise not allowed to create new
 windows.
 
-### Why?
+#### Why?
 
 If you do not need popups, you are better off not allowing the creation of
 new [`BrowserWindows`][browser-window] by default. This follows the principle
 of minimally required access: Don't let a website create new popups unless
 you know it needs that feature.
 
-### How?
+#### How?
 
-```html
+```html title='index.html (Renderer Process)'
 <!-- Bad -->
 <webview allowpopups src="page.html"></webview>
 
@@ -518,7 +531,7 @@ you know it needs that feature.
 <webview src="page.html"></webview>
 ```
 
-## 12) Verify WebView Options Before Creation
+### 12. Verify WebView options before creation
 
 A WebView created in a renderer process that does not have Node.js integration
 enabled will not be able to enable integration itself. However, a WebView will
@@ -528,7 +541,7 @@ It is a good idea to control the creation of new [`<webview>`][webview-tag] tags
 from the main process and to verify that their webPreferences do not disable
 security features.
 
-### Why?
+#### Why?
 
 Since `<webview>` live in the DOM, they can be created by a script running on your
 website even if Node.js integration is otherwise disabled.
@@ -538,13 +551,13 @@ a renderer process. In most cases, developers do not need to disable any of
 those features - and you should therefore not allow different configurations
 for newly created [`<webview>`][webview-tag] tags.
 
-### How?
+#### How?
 
 Before a [`<webview>`][webview-tag] tag is attached, Electron will fire the
 `will-attach-webview` event on the hosting `webContents`. Use the event to
 prevent the creation of `webViews` with possibly insecure options.
 
-```js
+```js title='main.js (Main Process)'
 app.on('web-contents-created', (event, contents) => {
   contents.on('will-attach-webview', (event, webPreferences, params) => {
     // Strip away preload scripts if unused or verify their location is legitimate
@@ -562,16 +575,16 @@ app.on('web-contents-created', (event, contents) => {
 })
 ```
 
-Again, this list merely minimizes the risk, it does not remove it. If your goal
+Again, this list merely minimizes the risk, but does not remove it. If your goal
 is to display a website, a browser will be a more secure option.
 
-## 13) Disable or limit navigation
+### 13. Disable or limit navigation
 
 If your app has no need to navigate or only needs to navigate to known pages,
 it is a good idea to limit navigation outright to that known scope, disallowing
 any other kinds of navigation.
 
-### Why?
+#### Why?
 
 Navigation is a common attack vector. If an attacker can convince your app to
 navigate away from its current page, they can possibly force your app to open
@@ -584,7 +597,7 @@ A common attack pattern is that the attacker convinces your app's users to
 interact with the app in such a way that it navigates to one of the attacker's
 pages. This is usually done via links, plugins, or other user-generated content.
 
-### How?
+#### How?
 
 If your app has no need for navigation, you can call `event.preventDefault()`
 in a [`will-navigate`][will-navigate] handler. If you know which pages your app
@@ -595,7 +608,7 @@ We recommend that you use Node's parser for URLs. Simple string comparisons can
 sometimes be fooled - a `startsWith('https://example.com')` test would let
 `https://example.com.attacker.com` through.
 
-```js
+```js title='main.js (Main Process)'
 const URL = require('url').URL
 
 app.on('web-contents-created', (event, contents) => {
@@ -609,12 +622,12 @@ app.on('web-contents-created', (event, contents) => {
 })
 ```
 
-## 14) Disable or limit creation of new windows
+### 14. Disable or limit creation of new windows
 
 If you have a known set of windows, it's a good idea to limit the creation of
 additional windows in your app.
 
-### Why?
+#### Why?
 
 Much like navigation, the creation of new `webContents` is a common attack
 vector. Attackers attempt to convince your app to create new windows, frames,
@@ -627,7 +640,7 @@ security at no cost. This is commonly the case for apps that open one
 `BrowserWindow` and do not need to open an arbitrary number of additional
 windows at runtime.
 
-### How?
+#### How?
 
 [`webContents`][web-contents] will delegate to its [window open
 handler][window-open-handler] before creating new windows. The handler will
@@ -635,7 +648,7 @@ receive, amongst other parameters, the `url` the window was requested to open
 and the options used to create it. We recommend that you register a handler to
 monitor the creation of windows, and deny any unexpected window creation.
 
-```js
+```js title='main.js (Main Process)'
 const { shell } = require('electron')
 
 app.on('web-contents-created', (event, contents) => {
@@ -656,40 +669,40 @@ app.on('web-contents-created', (event, contents) => {
 })
 ```
 
-## 15) Do not use `openExternal` with untrusted content
+### 15. Do not use `shell.openExternal` with untrusted content
 
-Shell's [`openExternal`][open-external] allows opening a given protocol URI with
-the desktop's native utilities. On macOS, for instance, this function is similar
-to the `open` terminal command utility and will open the specific application
-based on the URI and filetype association.
+The shell module's [`openExternal`][open-external] API allows opening a given
+protocol URI with the desktop's native utilities. On macOS, for instance, this
+function is similar to the `open` terminal command utility and will open the
+specific application based on the URI and filetype association.
 
-### Why?
+#### Why?
 
 Improper use of [`openExternal`][open-external] can be leveraged to compromise
 the user's host. When openExternal is used with untrusted content, it can be
 leveraged to execute arbitrary commands.
 
-### How?
+#### How?
 
-```js
+```js title='main.js (Main Process)'
 //  Bad
 const { shell } = require('electron')
 shell.openExternal(USER_CONTROLLED_DATA_HERE)
 ```
 
-```js
+```js title='main.js (Main Process)'
 //  Good
 const { shell } = require('electron')
 shell.openExternal('https://example.com/index.html')
 ```
 
-## 16) Use a current version of Electron
+### 16. Use a current version of Electron
 
 You should strive for always using the latest available version of Electron.
 Whenever a new major version is released, you should attempt to update your
 app as quickly as possible.
 
-### Why?
+#### Why?
 
 An application built with an older version of Electron, Chromium, and Node.js
 is an easier target than an application that is using more recent versions of
@@ -705,6 +718,13 @@ to fix issues before publishing them. Your application will be more secure if
 it is running a recent version of Electron (and thus, Chromium and Node.js) for
 which potential security issues are not as widely known.
 
+#### How?
+
+Migrate your app one major version at a time, while referring to Electron's
+[Breaking Changes][breaking-changes] document to see if any code needs to
+be updated.
+
+[breaking-changes]: ../breaking-changes.md
 [browser-window]: ../api/browser-window.md
 [browser-view]: ../api/browser-view.md
 [webview-tag]: ../api/webview-tag.md
@@ -712,5 +732,4 @@ which potential security issues are not as widely known.
 [window-open-handler]: ../api/web-contents.md#contentssetwindowopenhandlerhandler
 [will-navigate]: ../api/web-contents.md#event-will-navigate
 [open-external]: ../api/shell.md#shellopenexternalurl-options
-[sandbox]: ../tutorial/sandbox.md
 [responsible-disclosure]: https://en.wikipedia.org/wiki/Responsible_disclosure

docs/tutorial/windows-taskbar.md

@@ -1,4 +1,11 @@
-# Taskbar Customization (Windows)
+---
+title: Taskbar Customization
+description: Customize the look and feel of your app's Windows taskbar presence.
+slug: windows-taskbar
+hide_title: true
+---
+
+# Taskbar Customization
 
 ## Overview
 

electron_paks.gni

@@ -179,6 +179,7 @@ template("electron_paks") {
       "${root_gen_dir}/device/bluetooth/strings/bluetooth_strings_",
       "${root_gen_dir}/services/strings/services_strings_",
       "${root_gen_dir}/ui/strings/app_locale_settings_",
+      "${root_gen_dir}/ui/strings/ax_strings_",
       "${root_gen_dir}/ui/strings/ui_strings_",
     ]
     deps = [
@@ -188,6 +189,7 @@ template("electron_paks") {
       "//services/strings",
       "//third_party/blink/public/strings",
       "//ui/strings:app_locale_settings",
+      "//ui/strings:ax_strings",
       "//ui/strings:ui_strings",
     ]
 

electron_strings.grdp

@@ -33,6 +33,23 @@
     {SCREEN_INDEX, plural, =1{Screen #} other{Screen #}}
   </message>
 
+  <!-- File Select Helper-->
+  <message name="IDS_IMAGE_FILES" desc="The description of the image file extensions in the select file dialog.">
+    Image Files
+  </message>
+  <message name="IDS_AUDIO_FILES" desc="The description of the audio file extensions in the select file dialog.">
+    Audio Files
+  </message>
+  <message name="IDS_VIDEO_FILES" desc="The description of the video file extensions in the select file dialog.">
+    Video Files
+  </message>
+  <message name="IDS_CUSTOM_FILES" desc="The description of the custom file extensions in the select file dialog.">
+    Custom Files
+  </message>
+  <message name="IDS_DEFAULT_DOWNLOAD_FILENAME" desc="Default name for downloaded files when we have no idea what they could be.">
+    download
+  </message>
+
   <!-- Picture-in-Picture -->
   <if expr="is_macosx">
     <message name="IDS_PICTURE_IN_PICTURE_TITLE_TEXT" desc="Title of the Picture-in-Picture window. This appears in the system tray and window header.">

filenames.auto.gni

@@ -101,11 +101,14 @@ auto_filenames = {
     "docs/api/structures/new-window-web-contents-event.md",
     "docs/api/structures/notification-action.md",
     "docs/api/structures/notification-response.md",
+    "docs/api/structures/payment-discount.md",
     "docs/api/structures/point.md",
     "docs/api/structures/post-body.md",
     "docs/api/structures/printer-info.md",
     "docs/api/structures/process-memory-info.md",
     "docs/api/structures/process-metric.md",
+    "docs/api/structures/product-discount.md",
+    "docs/api/structures/product-subscription-period.md",
     "docs/api/structures/product.md",
     "docs/api/structures/protocol-request.md",
     "docs/api/structures/protocol-response-upload-data.md",

filenames.gni

@@ -32,10 +32,13 @@ filenames = {
     "shell/browser/notifications/linux/notification_presenter_linux.cc",
     "shell/browser/notifications/linux/notification_presenter_linux.h",
     "shell/browser/relauncher_linux.cc",
+    "shell/browser/ui/electron_desktop_window_tree_host_linux.cc",
     "shell/browser/ui/file_dialog_gtk.cc",
     "shell/browser/ui/message_box_gtk.cc",
     "shell/browser/ui/tray_icon_gtk.cc",
     "shell/browser/ui/tray_icon_gtk.h",
+    "shell/browser/ui/views/client_frame_view_linux.cc",
+    "shell/browser/ui/views/client_frame_view_linux.h",
     "shell/common/application_info_linux.cc",
     "shell/common/language_util_linux.cc",
     "shell/common/node_bindings_linux.cc",
@@ -50,8 +53,6 @@ filenames = {
     "shell/browser/ui/views/global_menu_bar_x11.h",
     "shell/browser/ui/x/event_disabler.cc",
     "shell/browser/ui/x/event_disabler.h",
-    "shell/browser/ui/x/window_state_watcher.cc",
-    "shell/browser/ui/x/window_state_watcher.h",
     "shell/browser/ui/x/x_window_utils.cc",
     "shell/browser/ui/x/x_window_utils.h",
   ]
@@ -347,6 +348,8 @@ filenames = {
     "shell/browser/child_web_contents_tracker.h",
     "shell/browser/cookie_change_notifier.cc",
     "shell/browser/cookie_change_notifier.h",
+    "shell/browser/electron_api_ipc_handler_impl.cc",
+    "shell/browser/electron_api_ipc_handler_impl.h",
     "shell/browser/electron_autofill_driver.cc",
     "shell/browser/electron_autofill_driver.h",
     "shell/browser/electron_autofill_driver_factory.cc",
@@ -355,8 +358,6 @@ filenames = {
     "shell/browser/electron_browser_client.h",
     "shell/browser/electron_browser_context.cc",
     "shell/browser/electron_browser_context.h",
-    "shell/browser/electron_browser_handler_impl.cc",
-    "shell/browser/electron_browser_handler_impl.h",
     "shell/browser/electron_browser_main_parts.cc",
     "shell/browser/electron_browser_main_parts.h",
     "shell/browser/electron_download_manager_delegate.cc",
@@ -373,6 +374,8 @@ filenames = {
     "shell/browser/electron_quota_permission_context.h",
     "shell/browser/electron_speech_recognition_manager_delegate.cc",
     "shell/browser/electron_speech_recognition_manager_delegate.h",
+    "shell/browser/electron_web_contents_utility_handler_impl.cc",
+    "shell/browser/electron_web_contents_utility_handler_impl.h",
     "shell/browser/electron_web_ui_controller_factory.cc",
     "shell/browser/electron_web_ui_controller_factory.h",
     "shell/browser/event_emitter_mixin.cc",
@@ -413,6 +416,8 @@ filenames = {
     "shell/browser/native_browser_view.h",
     "shell/browser/native_window.cc",
     "shell/browser/native_window.h",
+    "shell/browser/native_window_features.cc",
+    "shell/browser/native_window_features.h",
     "shell/browser/native_window_observer.h",
     "shell/browser/net/asar/asar_file_validator.cc",
     "shell/browser/net/asar/asar_file_validator.h",
@@ -734,11 +739,6 @@ filenames = {
     "shell/renderer/extensions/electron_extensions_renderer_client.h",
   ]
 
-  app_sources = [
-    "shell/app/electron_main.cc",
-    "shell/app/electron_main.h",
-  ]
-
   framework_sources = [
     "shell/app/electron_library_main.h",
     "shell/app/electron_library_main.mm",

lib/asar/fs-wrapper.ts

@@ -30,11 +30,13 @@ const getOrCreateArchive = (archivePath: string) => {
     return cachedArchives.get(archivePath);
   }
 
-  const newArchive = asar.createArchive(archivePath);
-  if (!newArchive) return null;
-
-  cachedArchives.set(archivePath, newArchive);
-  return newArchive;
+  try {
+    const newArchive = new asar.Archive(archivePath);
+    cachedArchives.set(archivePath, newArchive);
+    return newArchive;
+  } catch {
+    return null;
+  }
 };
 
 const asarRe = /\.asar/i;

lib/browser/api/browser-window.ts

@@ -72,7 +72,10 @@ BrowserWindow.getAllWindows = () => {
 
 BrowserWindow.getFocusedWindow = () => {
   for (const window of BrowserWindow.getAllWindows()) {
-    if (window.isFocused() || window.isDevToolsFocused()) return window;
+    const hasWC = window.webContents && !window.webContents.isDestroyed();
+    if (!window.isDestroyed() && hasWC) {
+      if (window.isFocused() || window.isDevToolsFocused()) return window;
+    }
   }
   return null;
 };

lib/browser/api/web-contents.ts

@@ -1,4 +1,4 @@
-import { app, ipcMain, session, webFrameMain } from 'electron/main';
+import { app, ipcMain, session, deprecate, webFrameMain } from 'electron/main';
 import type { BrowserWindowConstructorOptions, LoadURLOptions } from 'electron/main';
 
 import * as url from 'url';
@@ -680,16 +680,6 @@ WebContents.prototype._init = function () {
         postBody
       };
       windowOpenOverriddenOptions = this._callWindowOpenHandler(event, details);
-      // if attempting to use this API with the deprecated new-window event,
-      // windowOpenOverriddenOptions will always return null. This ensures
-      // short-term backwards compatibility until new-window is removed.
-      const parsedFeatures = parseFeatures(rawFeatures);
-      const overriddenFeatures: BrowserWindowConstructorOptions = {
-        ...parsedFeatures.options,
-        webPreferences: parsedFeatures.webPreferences
-      };
-      windowOpenOverriddenOptions = windowOpenOverriddenOptions || overriddenFeatures;
-
       if (!event.defaultPrevented) {
         const secureOverrideWebPreferences = windowOpenOverriddenOptions ? {
           // Allow setting of backgroundColor as a webPreference even though
@@ -699,9 +689,19 @@ WebContents.prototype._init = function () {
           transparent: windowOpenOverriddenOptions.transparent,
           ...windowOpenOverriddenOptions.webPreferences
         } : undefined;
-        this._setNextChildWebPreferences(
-          makeWebPreferences({ embedder: event.sender, secureOverrideWebPreferences })
-        );
+        // TODO(zcbenz): The features string is parsed twice: here where it is
+        // passed to C++, and in |makeBrowserWindowOptions| later where it is
+        // not actually used since the WebContents is created here.
+        // We should be able to remove the latter once the |nativeWindowOpen|
+        // option is removed.
+        const { webPreferences: parsedWebPreferences } = parseFeatures(rawFeatures);
+        // Parameters should keep same with |makeBrowserWindowOptions|.
+        const webPreferences = makeWebPreferences({
+          embedder: event.sender,
+          insecureParsedWebPreferences: parsedWebPreferences,
+          secureOverrideWebPreferences
+        });
+        this._setNextChildWebPreferences(webPreferences);
       }
     });
 
@@ -734,6 +734,11 @@ WebContents.prototype._init = function () {
         }
       });
     });
+
+    const prefs = this.getLastWebPreferences() || {};
+    if (prefs.nativeWindowOpen === false) {
+      deprecate.log('Deprecation Warning: Disabling nativeWindowOpen is deprecated. The nativeWindowOpen option will be removed in Electron 18.');
+    }
   }
 
   this.on('login', (event, ...args) => {
@@ -749,6 +754,14 @@ WebContents.prototype._init = function () {
     }
   });
 
+  this.on('select-bluetooth-device', (event, devices, callback) => {
+    if (this.listenerCount('select-bluetooth-device') === 1) {
+      // Cancel it if there are no handlers
+      event.preventDefault();
+      callback('');
+    }
+  });
+
   const event = process._linkedBinding('electron_browser_event').createEmpty();
   app.emit('web-contents-created', event, this);
 

lib/browser/guest-view-manager.ts

@@ -74,6 +74,17 @@ function makeWebPreferences (embedder: Electron.WebContents, params: Record<stri
   return webPreferences;
 }
 
+function makeLoadURLOptions (params: Record<string, any>) {
+  const opts: Electron.LoadURLOptions = {};
+  if (params.httpreferrer) {
+    opts.httpReferrer = params.httpreferrer;
+  }
+  if (params.useragent) {
+    opts.userAgent = params.useragent;
+  }
+  return opts;
+}
+
 // Create a new guest instance.
 const createGuest = function (embedder: Electron.WebContents, embedderFrameId: number, elementInstanceId: number, params: Record<string, any>) {
   // eslint-disable-next-line no-undef
@@ -97,7 +108,7 @@ const createGuest = function (embedder: Electron.WebContents, embedderFrameId: n
 
   // Init guest web view after attached.
   guest.once('did-attach' as any, function (this: Electron.WebContents, event: Electron.Event) {
-    params = this.attachParams!;
+    const params = this.attachParams!;
     delete this.attachParams;
 
     const previouslyAttached = this.viewInstanceId != null;
@@ -109,14 +120,7 @@ const createGuest = function (embedder: Electron.WebContents, embedderFrameId: n
     }
 
     if (params.src) {
-      const opts: Electron.LoadURLOptions = {};
-      if (params.httpreferrer) {
-        opts.httpReferrer = params.httpreferrer;
-      }
-      if (params.useragent) {
-        opts.userAgent = params.useragent;
-      }
-      this.loadURL(params.src, opts);
+      this.loadURL(params.src, params.opts);
     }
     embedder.emit('did-attach-webview', event, guest);
   });
@@ -205,13 +209,15 @@ const attachGuest = function (embedder: Electron.WebContents, embedderFrameId: n
     return false;
   }
 
+  const { instanceId } = params;
+
   // If this guest is already attached to an element then remove it
   if (guestInstance.elementInstanceId) {
     const oldKey = `${guestInstance.embedder.id}-${guestInstance.elementInstanceId}`;
     embedderElementsMap.delete(oldKey);
 
     // Remove guest from embedder if moving across web views
-    if (guest.viewInstanceId !== params.instanceId) {
+    if (guest.viewInstanceId !== instanceId) {
       webViewManager.removeGuest(guestInstance.embedder, guestInstanceId);
       guestInstance.embedder._sendInternal(`${IPC_MESSAGES.GUEST_VIEW_INTERNAL_DESTROY_GUEST}-${guest.viewInstanceId}`);
     }
@@ -222,12 +228,12 @@ const attachGuest = function (embedder: Electron.WebContents, embedderFrameId: n
   const event = eventBinding.createWithSender(embedder);
   embedder.emit('will-attach-webview', event, webPreferences, params);
   if (event.defaultPrevented) {
-    if (guest.viewInstanceId == null) guest.viewInstanceId = params.instanceId;
+    if (guest.viewInstanceId == null) guest.viewInstanceId = instanceId;
     guest.destroy();
     return false;
   }
 
-  guest.attachParams = params;
+  guest.attachParams = { instanceId, src: params.src, opts: makeLoadURLOptions(params) };
   embedderElementsMap.set(key, guestInstanceId);
 
   guest.setEmbedder(embedder);

lib/browser/guest-window-manager.ts

@@ -217,6 +217,10 @@ function makeBrowserWindowOptions ({ embedder, features, overrideOptions }: {
       height: 600,
       ...parsedOptions,
       ...overrideOptions,
+      // Note that for |nativeWindowOpen: true| the WebContents is created in
+      // |api::WebContents::WebContentsCreatedWithFullParams|, with prefs
+      // parsed in the |-will-add-new-contents| event.
+      // The |webPreferences| here is only used by |nativeWindowOpen: false|.
       webPreferences: makeWebPreferences({
         embedder,
         insecureParsedWebPreferences: parsedWebPreferences,

lib/renderer/inspector.ts

@@ -8,40 +8,24 @@ const { contextIsolationEnabled } = internalContextBridge;
 
 /* Corrects for some Inspector adaptations needed in Electron.
 * 1) Use menu API to show context menu.
-* 2) Correct for Chromium returning undefined for filesystem.
-* 3) Use dialog API to override file chooser dialog.
 */
 window.onload = function () {
   if (contextIsolationEnabled) {
     internalContextBridge.overrideGlobalValueFromIsolatedWorld([
       'InspectorFrontendHost', 'showContextMenuAtPoint'
     ], createMenu);
-    internalContextBridge.overrideGlobalValueFromIsolatedWorld([
-      'Persistence', 'FileSystemWorkspaceBinding', 'completeURL'
-    ], completeURL);
-    internalContextBridge.overrideGlobalValueFromIsolatedWorld([
-      'UI', 'createFileSelectorElement'
-    ], createFileSelectorElement);
   } else {
     window.InspectorFrontendHost!.showContextMenuAtPoint = createMenu;
-    window.Persistence!.FileSystemWorkspaceBinding.completeURL = completeURL;
-    window.UI!.createFileSelectorElement = createFileSelectorElement;
   }
 };
 
-// Extra / is needed as a result of MacOS requiring absolute paths
-function completeURL (project: string, path: string) {
-  project = 'file:///';
-  return `${project}${path}`;
-}
-
 // The DOM implementation expects (message?: string) => boolean
 window.confirm = function (message?: string, title?: string) {
   return ipcRendererUtils.invokeSync(IPC_MESSAGES.INSPECTOR_CONFIRM, message, title) as boolean;
 };
 
 const useEditMenuItems = function (x: number, y: number, items: ContextMenuItem[]) {
-  return items.length === 0 && document.elementsFromPoint(x, y).some(function (element) {
+  return items.length === 0 && document.elementsFromPoint(x, y).some(element => {
     return element.nodeName === 'INPUT' ||
       element.nodeName === 'TEXTAREA' ||
       (element as HTMLElement).isContentEditable;
@@ -58,22 +42,3 @@ const createMenu = function (x: number, y: number, items: ContextMenuItem[]) {
     webFrame.executeJavaScript('window.DevToolsAPI.contextMenuCleared()');
   });
 };
-
-const showFileChooserDialog = function (callback: (blob: File) => void) {
-  ipcRendererInternal.invoke<[ string, any ]>(IPC_MESSAGES.INSPECTOR_SELECT_FILE).then(([path, data]) => {
-    if (path && data) {
-      callback(dataToHtml5FileObject(path, data));
-    }
-  });
-};
-
-const dataToHtml5FileObject = function (path: string, data: any) {
-  return new File([data], path);
-};
-
-const createFileSelectorElement = function (this: any, callback: () => void) {
-  const fileSelectorElement = document.createElement('span');
-  fileSelectorElement.style.display = 'none';
-  fileSelectorElement.click = showFileChooserDialog.bind(this, callback);
-  return fileSelectorElement;
-};

lib/renderer/web-view/web-view-impl.ts

@@ -25,7 +25,6 @@ export class WebViewImpl {
   public hasFocus = false
   public internalInstanceId?: number;
   public resizeObserver?: ResizeObserver;
-  public userAgentOverride?: string;
   public viewInstanceId: number
 
   // on* Event handlers.
@@ -180,8 +179,7 @@ export class WebViewImpl {
 
   buildParams () {
     const params: Record<string, any> = {
-      instanceId: this.viewInstanceId,
-      userAgentOverride: this.userAgentOverride
+      instanceId: this.viewInstanceId
     };
 
     for (const [attributeName, attribute] of this.attributes) {

npm/install.js

@@ -22,7 +22,8 @@ if (isInstalled()) {
 const platform = process.env.npm_config_platform || process.platform;
 let arch = process.env.npm_config_arch || process.arch;
 
-if (platform === 'darwin' && process.platform === 'darwin' && arch === 'x64') {
+if (platform === 'darwin' && process.platform === 'darwin' && arch === 'x64' &&
+    process.env.npm_config_arch === undefined) {
   // When downloading for macOS ON macOS and we think we need x64 we should
   // check if we're running under rosetta and download the arm64 version if appropriate
   try {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "electron",
-  "version": "17.0.0-nightly.20211117",
+  "version": "17.4.0",
   "repository": "https://github.com/electron/electron",
   "description": "Build cross platform desktop apps with JavaScript, HTML, and CSS",
   "devDependencies": {
@@ -33,7 +33,7 @@
     "asar": "^3.1.0",
     "aws-sdk": "^2.727.1",
     "check-for-leaks": "^1.2.1",
-    "colors": "^1.4.0",
+    "colors": "1.4.0",
     "dotenv-safe": "^4.0.4",
     "dugite": "^1.103.0",
     "eslint": "^7.4.0",

patches/boringssl/.patches

@@ -2,4 +2,4 @@ expose_ripemd160.patch
 expose_aes-cfb.patch
 expose_des-ede3.patch
 fix_sync_evp_get_cipherbynid_and_evp_get_cipherbyname.patch
-enable_x509_v_flag_trusted_first_flag.patch
+expose_blowfish_ciphers.patch

patches/boringssl/enable_x509_v_flag_trusted_first_flag.patch

@@ -1,20 +0,0 @@
-From 0000000000000000000000000000000000000000 Mon Sep 17 00:00:00 2001
-From: Juan Cruz Viotti <jv@jviotti.com>
-Date: Thu, 30 Sep 2021 13:39:23 -0400
-Subject: Enable X509_V_FLAG_TRUSTED_FIRST flag
-
-Signed-off-by: Juan Cruz Viotti <jv@jviotti.com>
-
-diff --git a/crypto/x509/x509_vpm.c b/crypto/x509/x509_vpm.c
-index 5a881d64c30076404cc800fff9e943bb0b30d2ac..29d5341efc8eb7ae6f90bdde5a8032e99f75c98e 100644
---- a/crypto/x509/x509_vpm.c
-+++ b/crypto/x509/x509_vpm.c
-@@ -528,7 +528,7 @@ static const X509_VERIFY_PARAM default_table[] = {
-      (char *)"default",         /* X509 default parameters */
-      0,                         /* Check time */
-      0,                         /* internal flags */
--     0,                         /* flags */
-+     X509_V_FLAG_TRUSTED_FIRST, /* flags */
-      0,                         /* purpose */
-      0,                         /* trust */
-      100,                       /* depth */

patches/boringssl/expose_aes-cfb.patch

@@ -58,10 +58,10 @@ index 852b76bea69988e0b3ac76a17b603128f239dde0..d443f4dc2daea0b7aa86ae75d31d995f
    callback(EVP_aes_192_ctr(), "aes-192-ctr", NULL, arg);
    callback(EVP_aes_256_ctr(), "aes-256-ctr", NULL, arg);
 diff --git a/include/openssl/cipher.h b/include/openssl/cipher.h
-index 09d72ec2c343f23409d35eca804a02e3290c86f1..1bea1a88b265312d700729ad2828f0b5d9f2d84f 100644
+index 2458847e5640fe955a9971aa77c27251e5091db5..a0b3ac5f6b55921a542f27108beca93d6372c6fc 100644
 --- a/include/openssl/cipher.h
 +++ b/include/openssl/cipher.h
-@@ -436,6 +436,7 @@ OPENSSL_EXPORT const EVP_CIPHER *EVP_des_ede3_ecb(void);
+@@ -448,6 +448,7 @@ OPENSSL_EXPORT const EVP_CIPHER *EVP_des_ede3_ecb(void);
  
  // EVP_aes_128_cfb128 is only available in decrepit.
  OPENSSL_EXPORT const EVP_CIPHER *EVP_aes_128_cfb128(void);

patches/boringssl/expose_blowfish_ciphers.patch

@@ -0,0 +1,47 @@
+From 0000000000000000000000000000000000000000 Mon Sep 17 00:00:00 2001
+From: Jeremy Rose <nornagon@nornagon.net>
+Date: Wed, 5 Jan 2022 13:08:10 -0800
+Subject: expose blowfish ciphers
+
+This exposes the (decrepit) blowfish cipher family, bf-cbc, bf-cfb and
+bf-ecb through the EVP interface. This adds references to decrepit code
+from non-decrepit code, so upstream is unlikely to take the patch.
+
+diff --git a/crypto/cipher_extra/cipher_extra.c b/crypto/cipher_extra/cipher_extra.c
+index cfdb69e3c556fea11aa7c2d28d4b7da524df15c3..95bd172c99874610ec9157c52df4fe0232e78c7f 100644
+--- a/crypto/cipher_extra/cipher_extra.c
++++ b/crypto/cipher_extra/cipher_extra.c
+@@ -89,6 +89,9 @@ static const struct {
+     {NID_aes_256_ecb, "aes-256-ecb", EVP_aes_256_ecb},
+     {NID_aes_256_gcm, "aes-256-gcm", EVP_aes_256_gcm},
+     {NID_aes_256_ofb128, "aes-256-ofb", EVP_aes_256_ofb},
++    {NID_bf_cbc, "bf-cbc", EVP_bf_cbc},
++    {NID_bf_cfb64, "bf-cfb", EVP_bf_cfb},
++    {NID_bf_ecb, "bf-ecb", EVP_bf_ecb},
+     {NID_des_cbc, "des-cbc", EVP_des_cbc},
+     {NID_des_ecb, "des-ecb", EVP_des_ecb},
+     {NID_des_ede_cbc, "des-ede-cbc", EVP_des_ede_cbc},
+diff --git a/decrepit/evp/evp_do_all.c b/decrepit/evp/evp_do_all.c
+index 5e71420b765019edea82a33884ace539cd91bda5..43fc792697519325725e9ce87801c5dc176c70a1 100644
+--- a/decrepit/evp/evp_do_all.c
++++ b/decrepit/evp/evp_do_all.c
+@@ -36,6 +36,9 @@ void EVP_CIPHER_do_all_sorted(void (*callback)(const EVP_CIPHER *cipher,
+   callback(EVP_aes_128_gcm(), "AES-128-GCM", NULL, arg);
+   callback(EVP_aes_192_gcm(), "AES-192-GCM", NULL, arg);
+   callback(EVP_aes_256_gcm(), "AES-256-GCM", NULL, arg);
++  callback(EVP_bf_cbc(), "BF-CBC", NULL, arg);
++  callback(EVP_bf_cfb(), "BF-CFB", NULL, arg);
++  callback(EVP_bf_ecb(), "BF-ECB", NULL, arg);
+   callback(EVP_des_cbc(), "DES-CBC", NULL, arg);
+   callback(EVP_des_ecb(), "DES-ECB", NULL, arg);
+   callback(EVP_des_ede(), "DES-EDE", NULL, arg);
+@@ -63,6 +66,9 @@ void EVP_CIPHER_do_all_sorted(void (*callback)(const EVP_CIPHER *cipher,
+   callback(EVP_aes_128_gcm(), "aes-128-gcm", NULL, arg);
+   callback(EVP_aes_192_gcm(), "aes-192-gcm", NULL, arg);
+   callback(EVP_aes_256_gcm(), "aes-256-gcm", NULL, arg);
++  callback(EVP_bf_cbc(), "bf-cbc", NULL, arg);
++  callback(EVP_bf_cfb(), "bf-cfb", NULL, arg);
++  callback(EVP_bf_ecb(), "bf-ecb", NULL, arg);
+   callback(EVP_des_cbc(), "des-cbc", NULL, arg);
+   callback(EVP_des_ecb(), "des-ecb", NULL, arg);
+   callback(EVP_des_ede(), "des-ede", NULL, arg);

patches/chromium/.patches

@@ -64,11 +64,9 @@ allow_disabling_blink_scheduler_throttling_per_renderview.patch
 hack_plugin_response_interceptor_to_point_to_electron.patch
 feat_add_support_for_overriding_the_base_spellchecker_download_url.patch
 feat_enable_offscreen_rendering_with_viz_compositor.patch
-delay_lock_the_protocol_scheme_registry.patch
 gpu_notify_when_dxdiag_request_fails.patch
 feat_allow_embedders_to_add_observers_on_created_hunspell.patch
 feat_add_onclose_to_messageport.patch
-ui_gtk_public_header.patch
 allow_in-process_windows_to_have_different_web_prefs.patch
 refactor_expose_cursor_changes_to_the_webcontentsobserver.patch
 crash_allow_setting_more_options.patch
@@ -93,7 +91,6 @@ webview_fullscreen.patch
 disable_unload_metrics.patch
 fix_add_check_for_sandbox_then_result.patch
 extend_apply_webpreferences.patch
-add_setter_for_browsermainloop_result_code.patch
 make_include_of_stack_trace_h_unconditional.patch
 build_libc_as_static_library.patch
 build_do_not_depend_on_packed_resource_integrity.patch
@@ -108,6 +105,18 @@ process_singleton.patch
 fix_expose_decrementcapturercount_in_web_contents_impl.patch
 add_ui_scopedcliboardwriter_writeunsaferawdata.patch
 feat_add_data_parameter_to_processsingleton.patch
-mas_gate_private_enterprise_APIs
+mas_gate_private_enterprise_APIs.patch
 load_v8_snapshot_in_browser_process.patch
 fix_patch_out_permissions_checks_in_exclusive_access.patch
+fix_aspect_ratio_with_max_size.patch
+fix_dont_delete_SerialPortManager_on_main_thread.patch
+fix_crash_when_saving_edited_pdf_files.patch
+cherry-pick-f5101995acd2.patch
+fix_don_t_restore_maximized_windows_when_calling_showinactive.patch
+build_disable_partition_alloc_on_mac.patch
+fix_non-client_mouse_tracking_and_message_bubbling_on_windows.patch
+remove_incorrect_width_height_adjustments.patch
+set_dpi_correctly_during_main_window_creation.patch
+ui_gtk_public_header.patch
+introduce_ozoneplatform_electron_can_call_x11_property.patch
+revert_motionmark_avoid_unnecessary_ipc_on_mac.patch

patches/chromium/accelerator.patch

@@ -10,7 +10,7 @@ This patch makes three changes to Accelerator::GetShortcutText to improve shortc
 3. Ctrl-Shift-= and Ctrl-Plus show up as such
 
 diff --git a/ui/base/accelerators/accelerator.cc b/ui/base/accelerators/accelerator.cc
-index d6913b15149f773cad28b5e2278b0f80df3d2896..25342f62acdc28806a0e6ae0bd129c59083ccf06 100644
+index be0df3662e3a1528fb88d5c723da49e5a29ac2b9..64a5eda05be16b3b6e1a0ceaa2b3a6884ca37268 100644
 --- a/ui/base/accelerators/accelerator.cc
 +++ b/ui/base/accelerators/accelerator.cc
 @@ -11,6 +11,7 @@
@@ -21,7 +21,7 @@ index d6913b15149f773cad28b5e2278b0f80df3d2896..25342f62acdc28806a0e6ae0bd129c59
  #include "base/strings/utf_string_conversions.h"
  #include "build/build_config.h"
  #include "build/chromeos_buildflags.h"
-@@ -234,6 +235,11 @@ std::u16string Accelerator::GetShortcutText() const {
+@@ -238,6 +239,11 @@ std::u16string Accelerator::GetShortcutText() const {
  #endif
  
    if (shortcut.empty()) {
@@ -33,7 +33,7 @@ index d6913b15149f773cad28b5e2278b0f80df3d2896..25342f62acdc28806a0e6ae0bd129c59
  #if defined(OS_WIN)
      // Our fallback is to try translate the key code to a regular character
      // unless it is one of digits (VK_0 to VK_9). Some keyboard
-@@ -257,6 +263,10 @@ std::u16string Accelerator::GetShortcutText() const {
+@@ -261,6 +267,10 @@ std::u16string Accelerator::GetShortcutText() const {
        shortcut +=
            static_cast<std::u16string::value_type>(base::ToUpperASCII(c));
  #endif
@@ -44,7 +44,7 @@ index d6913b15149f773cad28b5e2278b0f80df3d2896..25342f62acdc28806a0e6ae0bd129c59
    }
  
  #if defined(OS_MAC)
-@@ -444,7 +454,7 @@ std::u16string Accelerator::ApplyLongFormModifiers(
+@@ -451,7 +461,7 @@ std::u16string Accelerator::ApplyLongFormModifiers(
      const std::u16string& shortcut) const {
    std::u16string result = shortcut;
  
@@ -53,7 +53,7 @@ index d6913b15149f773cad28b5e2278b0f80df3d2896..25342f62acdc28806a0e6ae0bd129c59
      result = ApplyModifierToAcceleratorString(result, IDS_APP_SHIFT_KEY);
  
    // Note that we use 'else-if' in order to avoid using Ctrl+Alt as a shortcut.
-@@ -452,7 +462,7 @@ std::u16string Accelerator::ApplyLongFormModifiers(
+@@ -459,7 +469,7 @@ std::u16string Accelerator::ApplyLongFormModifiers(
    // more information.
    if (IsCtrlDown())
      result = ApplyModifierToAcceleratorString(result, IDS_APP_CTRL_KEY);
@@ -63,7 +63,7 @@ index d6913b15149f773cad28b5e2278b0f80df3d2896..25342f62acdc28806a0e6ae0bd129c59
  
    if (IsCmdDown()) {
 diff --git a/ui/base/accelerators/accelerator.h b/ui/base/accelerators/accelerator.h
-index 780a45f9ca2dd60e0deac27cc6e8f69e72cd8435..b1b46f18e9c600820fdd2d26631eac38da672811 100644
+index 5cdb2f160beae4d7787eb84d5013280ee9464446..76bd4369faa5d43d8a99ea51ed012857d6bff293 100644
 --- a/ui/base/accelerators/accelerator.h
 +++ b/ui/base/accelerators/accelerator.h
 @@ -16,6 +16,7 @@
@@ -74,12 +74,12 @@ index 780a45f9ca2dd60e0deac27cc6e8f69e72cd8435..b1b46f18e9c600820fdd2d26631eac38
  #include "base/time/time.h"
  #include "build/build_config.h"
  #include "ui/events/event_constants.h"
-@@ -129,6 +130,8 @@ class COMPONENT_EXPORT(UI_BASE) Accelerator {
+@@ -130,6 +131,8 @@ class COMPONENT_EXPORT(UI_BASE) Accelerator {
      return interrupted_by_mouse_event_;
    }
  
 +  absl::optional<char16_t> shifted_char;
 +
   private:
+   friend class AcceleratorTestMac;
    std::u16string ApplyLongFormModifiers(const std::u16string& shortcut) const;
-   std::u16string ApplyShortFormModifiers(const std::u16string& shortcut) const;

patches/chromium/add_contentgpuclient_precreatemessageloop_callback.patch

@@ -10,10 +10,10 @@ Allows Electron to restore WER when ELECTRON_DEFAULT_ERROR_MODE is set.
 This should be upstreamed.
 
 diff --git a/content/gpu/gpu_main.cc b/content/gpu/gpu_main.cc
-index 51b004f5e459eb265627c01e9e38acd655a65481..7140d92416709c467ae9b65860ac32947913989d 100644
+index cdd437ad553493535015fd93d19aa29843e10c38..99b285b46c2193d0526fac8b706073213fa0846e 100644
 --- a/content/gpu/gpu_main.cc
 +++ b/content/gpu/gpu_main.cc
-@@ -239,6 +239,10 @@ int GpuMain(const MainFunctionParams& parameters) {
+@@ -237,6 +237,10 @@ int GpuMain(MainFunctionParams parameters) {
    // to the GpuProcessHost once the GpuServiceImpl has started.
    viz::GpuServiceImpl::InstallPreInitializeLogHandler();
  
@@ -24,8 +24,8 @@ index 51b004f5e459eb265627c01e9e38acd655a65481..7140d92416709c467ae9b65860ac3294
    // We are experiencing what appear to be memory-stomp issues in the GPU
    // process. These issues seem to be impacting the task executor and listeners
    // registered to it. Create the task executor on the heap to guard against
-@@ -376,7 +380,6 @@ int GpuMain(const MainFunctionParams& parameters) {
-   }
+@@ -343,7 +347,6 @@ int GpuMain(MainFunctionParams parameters) {
+   GpuProcess gpu_process(io_thread_priority);
  #endif
  
 -  auto* client = GetContentClient()->gpu();
@@ -33,10 +33,10 @@ index 51b004f5e459eb265627c01e9e38acd655a65481..7140d92416709c467ae9b65860ac3294
      client->PostIOThreadCreated(gpu_process.io_task_runner());
  
 diff --git a/content/public/gpu/content_gpu_client.h b/content/public/gpu/content_gpu_client.h
-index 864ad090cae17f6a93466f9d2ca52b63341f40da..391848e407f6bfcb7ba8f8a652bb062ebd16e697 100644
+index 04274b751b498456fc4b269bfbc6399b4f27d3ed..2fb98baf0df4e191e5e18fd7055cc2d92a2156df 100644
 --- a/content/public/gpu/content_gpu_client.h
 +++ b/content/public/gpu/content_gpu_client.h
-@@ -28,6 +28,10 @@ class CONTENT_EXPORT ContentGpuClient {
+@@ -29,6 +29,10 @@ class CONTENT_EXPORT ContentGpuClient {
   public:
    virtual ~ContentGpuClient() {}
  

patches/chromium/add_didinstallconditionalfeatures.patch

@@ -10,10 +10,10 @@ DidCreateScriptContext is called, not all JS APIs are available in the
 context, which can cause some preload scripts to trip.
 
 diff --git a/content/public/renderer/render_frame_observer.h b/content/public/renderer/render_frame_observer.h
-index 94fbf201b82ac000ceac21685f09f68497be1350..70766b01824e63c45e5c035848e5814876956c77 100644
+index f6d262f1bf7aa77c2a63f4a4c3351be0fe2ab3fd..52db2e1948fd7752b88d5a692748053491594c2d 100644
 --- a/content/public/renderer/render_frame_observer.h
 +++ b/content/public/renderer/render_frame_observer.h
-@@ -128,6 +128,8 @@ class CONTENT_EXPORT RenderFrameObserver : public IPC::Listener,
+@@ -129,6 +129,8 @@ class CONTENT_EXPORT RenderFrameObserver : public IPC::Listener,
    virtual void DidHandleOnloadEvents() {}
    virtual void DidCreateScriptContext(v8::Local<v8::Context> context,
                                        int32_t world_id) {}
@@ -23,10 +23,10 @@ index 94fbf201b82ac000ceac21685f09f68497be1350..70766b01824e63c45e5c035848e58148
                                          int32_t world_id) {}
    virtual void DidClearWindowObject() {}
 diff --git a/content/renderer/render_frame_impl.cc b/content/renderer/render_frame_impl.cc
-index 78ec20c40e5dbf7f706b57d9b810b4149510defc..900b8125f3fc6dcec4a1637fae6fcb2af40af5ab 100644
+index 584ae29be139c9be347e4fa9f920a2cc84baf00a..c7a5f0916cf8ba6db6fa85537c140024a92ff24d 100644
 --- a/content/renderer/render_frame_impl.cc
 +++ b/content/renderer/render_frame_impl.cc
-@@ -4442,6 +4442,12 @@ void RenderFrameImpl::DidCreateScriptContext(v8::Local<v8::Context> context,
+@@ -4515,6 +4515,12 @@ void RenderFrameImpl::DidCreateScriptContext(v8::Local<v8::Context> context,
      observer.DidCreateScriptContext(context, world_id);
  }
  
@@ -40,10 +40,10 @@ index 78ec20c40e5dbf7f706b57d9b810b4149510defc..900b8125f3fc6dcec4a1637fae6fcb2a
                                                 int world_id) {
    for (auto& observer : observers_)
 diff --git a/content/renderer/render_frame_impl.h b/content/renderer/render_frame_impl.h
-index 5f89641216bc467ea52619b1732c13174a16c723..061fc0c4a265335faccbf81594504eafabae77f8 100644
+index 1b582c1736db20dab712ee7875f37c2140bd7d45..efab4f51e56e6e179fb832b1cf47d7f4a348e6c7 100644
 --- a/content/renderer/render_frame_impl.h
 +++ b/content/renderer/render_frame_impl.h
-@@ -601,6 +601,8 @@ class CONTENT_EXPORT RenderFrameImpl
+@@ -602,6 +602,8 @@ class CONTENT_EXPORT RenderFrameImpl
        blink::WebLocalFrameClient::LazyLoadBehavior lazy_load_behavior) override;
    void DidCreateScriptContext(v8::Local<v8::Context> context,
                                int world_id) override;
@@ -67,10 +67,10 @@ index 994841c02b0472e5239d9b73a07b2592a39df8be..ad19a3cddf200f6600a04c1136fd2121
    virtual void WillReleaseScriptContext(v8::Local<v8::Context>,
                                          int32_t world_id) {}
 diff --git a/third_party/blink/renderer/bindings/core/v8/local_window_proxy.cc b/third_party/blink/renderer/bindings/core/v8/local_window_proxy.cc
-index b0d5db60fbe57275dda835113b0fb21acb9a422f..b6c9c389943088004a419677a2a17be0c6ab6398 100644
+index 29e255dc75a1d54211dc6059801d3c16b7cefdca..044195c7d77be5ff4abe9d2a71ddbbf2076b2efd 100644
 --- a/third_party/blink/renderer/bindings/core/v8/local_window_proxy.cc
 +++ b/third_party/blink/renderer/bindings/core/v8/local_window_proxy.cc
-@@ -201,6 +201,7 @@ void LocalWindowProxy::Initialize() {
+@@ -214,6 +214,7 @@ void LocalWindowProxy::Initialize() {
    }
  
    InstallConditionalFeatures();
@@ -79,10 +79,10 @@ index b0d5db60fbe57275dda835113b0fb21acb9a422f..b6c9c389943088004a419677a2a17be0
    if (World().IsMainWorld()) {
      GetFrame()->Loader().DispatchDidClearWindowObjectInMainWorld();
 diff --git a/third_party/blink/renderer/core/frame/local_frame_client.h b/third_party/blink/renderer/core/frame/local_frame_client.h
-index 19a1ef792848026cb6a125124acd9e798e077e35..bb8220819750a6499568b64b49ca7710035d6092 100644
+index c28bc5f4d285ab2db1b0501ad8663c4f948f3ddc..327c04b40460fc033ca7f4e4f838608cfc6c0ba3 100644
 --- a/third_party/blink/renderer/core/frame/local_frame_client.h
 +++ b/third_party/blink/renderer/core/frame/local_frame_client.h
-@@ -310,6 +310,8 @@ class CORE_EXPORT LocalFrameClient : public FrameClient {
+@@ -311,6 +311,8 @@ class CORE_EXPORT LocalFrameClient : public FrameClient {
  
    virtual void DidCreateScriptContext(v8::Local<v8::Context>,
                                        int32_t world_id) = 0;
@@ -92,10 +92,10 @@ index 19a1ef792848026cb6a125124acd9e798e077e35..bb8220819750a6499568b64b49ca7710
                                          int32_t world_id) = 0;
    virtual bool AllowScriptExtensions() = 0;
 diff --git a/third_party/blink/renderer/core/frame/local_frame_client_impl.cc b/third_party/blink/renderer/core/frame/local_frame_client_impl.cc
-index 4b1bfb735082513071181f30e8e8af1b699847b1..21f6a54f0255df0d88894860da83b1459c3a378f 100644
+index 0922aaf1a5f076ed4544b6870ac3674b023c428b..ff8ccf56eaafe36fe4de08a448789b13033e8604 100644
 --- a/third_party/blink/renderer/core/frame/local_frame_client_impl.cc
 +++ b/third_party/blink/renderer/core/frame/local_frame_client_impl.cc
-@@ -273,6 +273,13 @@ void LocalFrameClientImpl::DidCreateScriptContext(
+@@ -274,6 +274,13 @@ void LocalFrameClientImpl::DidCreateScriptContext(
      web_frame_->Client()->DidCreateScriptContext(context, world_id);
  }
  
@@ -110,7 +110,7 @@ index 4b1bfb735082513071181f30e8e8af1b699847b1..21f6a54f0255df0d88894860da83b145
      v8::Local<v8::Context> context,
      int32_t world_id) {
 diff --git a/third_party/blink/renderer/core/frame/local_frame_client_impl.h b/third_party/blink/renderer/core/frame/local_frame_client_impl.h
-index 45d493d7a9846c7f4ad567cec6d5fac4aadf9be3..23759d417d81d5bb6c920c94bacd66c303804319 100644
+index 59dd5662dccea2e570b93e7bbdc59fded301979c..30d7bafbf5877d71868fbdec9abbcacacd4b72a8 100644
 --- a/third_party/blink/renderer/core/frame/local_frame_client_impl.h
 +++ b/third_party/blink/renderer/core/frame/local_frame_client_impl.h
 @@ -78,6 +78,8 @@ class CORE_EXPORT LocalFrameClientImpl final : public LocalFrameClient {
@@ -123,10 +123,10 @@ index 45d493d7a9846c7f4ad567cec6d5fac4aadf9be3..23759d417d81d5bb6c920c94bacd66c3
                                  int32_t world_id) override;
  
 diff --git a/third_party/blink/renderer/core/loader/empty_clients.h b/third_party/blink/renderer/core/loader/empty_clients.h
-index 0a4a0b8a4dc871dc86887774a6c81282ea98cda6..ab6ada68a78aa22e723080925d20cf14e8fe822a 100644
+index 4fa74cc53ddd7557dc5b9e9e6c7ed16214f049b9..cf1e3e898f3b4c9461ed700e0776856689b4c65b 100644
 --- a/third_party/blink/renderer/core/loader/empty_clients.h
 +++ b/third_party/blink/renderer/core/loader/empty_clients.h
-@@ -360,6 +360,8 @@ class CORE_EXPORT EmptyLocalFrameClient : public LocalFrameClient {
+@@ -356,6 +356,8 @@ class CORE_EXPORT EmptyLocalFrameClient : public LocalFrameClient {
  
    void DidCreateScriptContext(v8::Local<v8::Context>,
                                int32_t world_id) override {}

patches/chromium/add_setter_for_browsermainloop_result_code.patch

@@ -1,26 +0,0 @@
-From 0000000000000000000000000000000000000000 Mon Sep 17 00:00:00 2001
-From: Samuel Attard <samuel.r.attard@gmail.com>
-Date: Wed, 14 Apr 2021 17:19:23 -0700
-Subject: add setter for BrowserMainLoop::result_code_
-
-After a recent refactor
-(https://chromium-review.googlesource.com/c/chromium/src/+/2725153) the
-result_code_ pointer is no longer provided to embedders, but their are
-valid use cases for setting custom exit codes of the main loop.  This
-exposes a simple setter that embedders can call.
-
-diff --git a/content/browser/browser_main_loop.h b/content/browser/browser_main_loop.h
-index 2c13914c1fbf8b81b6b0dc5d059d48525ac9f059..1c6179a00f404cc8d19e47b2e1bb635a6893e751 100644
---- a/content/browser/browser_main_loop.h
-+++ b/content/browser/browser_main_loop.h
-@@ -165,6 +165,10 @@ class CONTENT_EXPORT BrowserMainLoop {
- 
-   int GetResultCode() const { return result_code_; }
- 
-+  void SetResultCode(int code) {
-+    result_code_ = code;
-+  }
-+
-   media::AudioManager* audio_manager() const;
-   bool AudioServiceOutOfProcess() const;
-   media::AudioSystem* audio_system() const { return audio_system_.get(); }