fix: recommended node-gyp version in node.h error (#37927)

fix: recommended node-gyp version in node.h error

In
https://github.com/electron/electron/blob/main/docs/tutorial/using-native-node-modules.md#using-npm,
we recommend setting the `npm_config_disturl` variable but doing that
does not work on node-gyp v8.4.0 because after
https://github.com/nodejs/node-gyp/pull/2497
landed, the dist URL was read only from `gyp.opts['dist-url']`. The fix
for reading the value from `npm_config_disturl` by parsing
`gyp.opts.disturl` was landed in
https://github.com/nodejs/node-gyp/pull/2547 and that change was
released in node-gyp v9.0.0, so this change updates the error macro to
recommend node-gyp v9.0.0 as the minimum required version.

Co-authored-by: trop[bot] <37223003+trop[bot]@users.noreply.github.com>
Co-authored-by: Darshan Sen <raisinten@gmail.com>

.circleci/config.yml

@@ -51,7 +51,7 @@ jobs:
     steps:
       - checkout
       - path-filtering/set-parameters:
-          base-revision: main
+          base-revision: origin/24-x-y
           mapping: |
             ^((?!docs/).)*$ run-build-mac true
             ^((?!docs/).)*$ run-build-linux true

.gitattributes

@@ -11,5 +11,4 @@ patches/**/.patches merge=union
 *.ts text eol=lf
 *.py text eol=lf
 *.ps1 text eol=lf
-*.html text eol=lf
 *.md text eol=lf

.github/CODEOWNERS

@@ -8,7 +8,6 @@
 DEPS                                    @electron/wg-upgrades
 
 # Releases WG
-/docs/breaking-changes.md               @electron/wg-releases
 /npm/                                   @electron/wg-releases
 /script/release                         @electron/wg-releases
 

.github/config.yml

@@ -25,3 +25,17 @@ newPRWelcomeComment: |
 # Comment to be posted to on pull requests merged by a first time user
 firstPRMergeComment: >
   Congrats on merging your first pull request! 🎉🎉🎉
+
+# Users authorized to run manual trop backports
+authorizedUsers:
+  - alexeykuzmin
+  - ckerr
+  - codebytere
+  - deepak1556
+  - jkleinsc
+  - loc
+  - MarshallOfSound
+  - miniak
+  - mlaurencin
+  - nornagon
+  - zcbenz

.github/workflows/semantic.yml

@@ -1,7 +1,7 @@
 name: "Check Semantic Commit"
 
 on:
-  pull_request:
+  pull_request_target:
     types:
       - opened
       - edited

.github/workflows/update_appveyor_image.yml

@@ -40,21 +40,13 @@ jobs:
       if: ${{ env.APPVEYOR_IMAGE_VERSION }}
       uses: mikefarah/yq@1c7dc0e88aad311c89889bc5ce5d8f96931a1bd0 # v4.27.2
       with:
-        cmd: |
-          yq '.image = "${{ env.APPVEYOR_IMAGE_VERSION }}"' "appveyor.yml" > "appveyor2.yml"
-          yq '.image = "${{ env.APPVEYOR_IMAGE_VERSION }}"' "appveyor-woa.yml" > "appveyor-woa2.yml"
+        cmd: yq '.image = "${{ env.APPVEYOR_IMAGE_VERSION }}"' "appveyor.yml" > "appveyor2.yml"
     - name: (Optionally) Generate Commit Diff
       if: ${{ env.APPVEYOR_IMAGE_VERSION }}
       run: |
         diff -w -B appveyor.yml appveyor2.yml > appveyor.diff || true
         patch -f appveyor.yml < appveyor.diff
         rm appveyor2.yml appveyor.diff
-    - name: (Optionally) Generate Commit Diff for WOA
-      if: ${{ env.APPVEYOR_IMAGE_VERSION }}
-      run: |
-        diff -w -B appveyor-woa.yml appveyor-woa2.yml > appveyor-woa.diff || true
-        patch -f appveyor-woa.yml < appveyor-woa.diff
-        rm appveyor-woa2.yml appveyor-woa.diff
     - name: (Optionally) Commit and Pull Request
       if: ${{ env.APPVEYOR_IMAGE_VERSION }}
       uses: peter-evans/create-pull-request@2b011faafdcbc9ceb11414d64d0573f37c774b04 # v4.2.3
@@ -68,5 +60,4 @@ jobs:
         delete-branch: true
         title: 'build: update appveyor image to latest version'
         body: |
-          This PR updates appveyor.yml to the latest baked image, ${{ env.APPVEYOR_IMAGE_VERSION }}.
-          Notes: none
+          This PR updates appveyor.yml to the latest baked image, ${{ env.APPVEYOR_IMAGE_VERSION }}.

BUILD.gn

@@ -1,7 +1,7 @@
 import("//build/config/locales.gni")
 import("//build/config/ui.gni")
 import("//build/config/win/manifest.gni")
-import("//components/os_crypt/sync/features.gni")
+import("//components/os_crypt/features.gni")
 import("//components/spellcheck/spellcheck_build_features.gni")
 import("//content/public/app/mac_helpers.gni")
 import("//extensions/buildflags/buildflags.gni")
@@ -433,7 +433,7 @@ source_set("electron_lib") {
     "//components/network_hints/renderer",
     "//components/network_session_configurator/common",
     "//components/omnibox/browser:buildflags",
-    "//components/os_crypt/sync",
+    "//components/os_crypt",
     "//components/pref_registry",
     "//components/prefs",
     "//components/security_state/content",

DEPS

@@ -2,9 +2,9 @@ gclient_gn_args_from = 'src'
 
 vars = {
   'chromium_version':
-    '114.0.5719.0',
+    '112.0.5615.50',
   'node_version':
-    'v18.15.0',
+    'v18.14.0',
   'nan_version':
     '16fa32231e2ccd89d2804b3f765319128b20c4ac',
   'squirrel.mac_version':
@@ -149,4 +149,5 @@ hooks = [
 
 recursedeps = [
   'src',
+  'src/third_party/squirrel.mac',
 ]

appveyor-bake.yml

@@ -6,7 +6,7 @@
 
 version: 1.0.{build}
 build_cloud: electronhq-16-core
-image: e-112.0.5607.0-vs2022
+image: e-112.0.5615.29
 environment:
   GIT_CACHE_PATH: C:\Users\appveyor\libcc_cache
   ELECTRON_OUT_DIR: Default

appveyor-woa.yml

@@ -6,7 +6,7 @@
 #  - "GN_CONFIG" Build type. One of {'testing', 'release'}.
 #  - "GN_EXTRA_ARGS" Additional gn arguments for a build config,
 #      e.g. 'target_cpu="x86"' to build for a 32bit platform.
-#      https://gn.googlesource.com/gn/+/main/docs/reference.md#var_target_cpu
+#      https://gn.googlesource.com/gn/+/master/docs/reference.md#target_cpu
 #      Don't forget to set up "NPM_CONFIG_ARCH" and "TARGET_ARCH" accordingly
 #      if you pass a custom value for 'target_cpu'.
 #  - "ELECTRON_RELEASE" Set it to '1' upload binaries on success.
@@ -29,14 +29,14 @@
 
 version: 1.0.{build}
 build_cloud: electronhq-16-core
-image: e-114.0.5684.0
+image: e-112.0.5615.29
 environment:
   GIT_CACHE_PATH: C:\Users\appveyor\libcc_cache
   ELECTRON_OUT_DIR: Default
   ELECTRON_ENABLE_STACK_DUMPING: 1
   ELECTRON_ALSO_LOG_TO_STDERR: 1
   MOCHA_REPORTER: mocha-multi-reporters
-  MOCHA_MULTI_REPORTERS: "@marshallofsound/mocha-appveyor-reporter, tap"
+  MOCHA_MULTI_REPORTERS: mocha-appveyor-reporter, tap
   GOMA_FALLBACK_ON_AUTH_FAILURE: true
   DEPOT_TOOLS_WIN_TOOLCHAIN: 0
   PYTHONIOENCODING: UTF-8

appveyor.yml

@@ -6,7 +6,7 @@
 #  - "GN_CONFIG" Build type. One of {'testing', 'release'}.
 #  - "GN_EXTRA_ARGS" Additional gn arguments for a build config,
 #      e.g. 'target_cpu="x86"' to build for a 32bit platform.
-#      https://gn.googlesource.com/gn/+/main/docs/reference.md#var_target_cpu
+#      https://gn.googlesource.com/gn/+/master/docs/reference.md#target_cpu
 #      Don't forget to set up "NPM_CONFIG_ARCH" and "TARGET_ARCH" accordingly
 #      if you pass a custom value for 'target_cpu'.
 #  - "ELECTRON_RELEASE" Set it to '1' upload binaries on success.
@@ -29,14 +29,14 @@
 
 version: 1.0.{build}
 build_cloud: electronhq-16-core
-image: e-114.0.5684.0
+image: e-112.0.5615.29
 environment:
   GIT_CACHE_PATH: C:\Users\appveyor\libcc_cache
   ELECTRON_OUT_DIR: Default
   ELECTRON_ENABLE_STACK_DUMPING: 1
   ELECTRON_ALSO_LOG_TO_STDERR: 1
   MOCHA_REPORTER: mocha-multi-reporters
-  MOCHA_MULTI_REPORTERS: "@marshallofsound/mocha-appveyor-reporter, tap"
+  MOCHA_MULTI_REPORTERS: mocha-appveyor-reporter, tap
   GOMA_FALLBACK_ON_AUTH_FAILURE: true
   DEPOT_TOOLS_WIN_TOOLCHAIN: 0
   PYTHONIOENCODING: UTF-8

build/args/all.gn

@@ -1,8 +1,8 @@
 is_electron_build = true
 root_extra_deps = [ "//electron" ]
 
-# Registry of NMVs --> https://github.com/nodejs/node/blob/main/doc/abi_version_registry.json
-node_module_version = 116
+# Registry of NMVs --> https://github.com/nodejs/node/blob/master/doc/abi_version_registry.json
+node_module_version = 114
 
 v8_promise_internal_field_count = 1
 v8_embedder_string = "-electron.0"
@@ -45,10 +45,3 @@ is_cfi = false
 
 # TODO: fix this once sysroots have been updated.
 use_qt = false
-
-# https://chromium-review.googlesource.com/c/chromium/src/+/4365718
-# TODO(codebytere): fix perfetto incompatibility with Node.js.
-use_perfetto_client_library = false
-
-# Ref: https://chromium-review.googlesource.com/c/chromium/src/+/4402277
-enable_check_raw_ptr_fields = false

docs/api/app.md

@@ -150,20 +150,9 @@ Returns:
 
 * `event` Event
 
-Emitted when the application becomes active. This differs from the `activate` event in
+Emitted when mac application become active. Difference from `activate` event is
 that `did-become-active` is emitted every time the app becomes active, not only
-when Dock icon is clicked or application is re-launched. It is also emitted when a user
-switches to the app via the macOS App Switcher.
-
-### Event: 'did-resign-active' _macOS_
-
-Returns:
-
-* `event` Event
-
-Emitted when the app is no longer active and doesn’t have focus. This can be triggered,
-for example, by clicking on another application or by using the macOS App Switcher to
-switch to another application.
+when Dock icon is clicked or application is re-launched.
 
 ### Event: 'continue-activity' _macOS_
 

docs/api/auto-updater.md

@@ -137,7 +137,7 @@ application starts.
 [squirrel-mac]: https://github.com/Squirrel/Squirrel.Mac
 [server-support]: https://github.com/Squirrel/Squirrel.Mac#server-support
 [squirrel-windows]: https://github.com/Squirrel/Squirrel.Windows
-[installer]: https://github.com/electron-archive/grunt-electron-installer
+[installer]: https://github.com/electron/grunt-electron-installer
 [installer-lib]: https://github.com/electron/windows-installer
 [electron-forge-lib]: https://github.com/electron/forge
 [app-user-model-id]: https://learn.microsoft.com/en-us/windows/win32/shell/appids

docs/api/browser-window.md

@@ -992,8 +992,6 @@ Returns `boolean` - Whether the window is minimized.
 
 Sets whether the window should be in fullscreen mode.
 
-**Note:** On macOS, fullscreen transitions take place asynchronously. If further actions depend on the fullscreen state, use the ['enter-full-screen'](browser-window.md#event-enter-full-screen) or ['leave-full-screen'](browser-window.md#event-leave-full-screen) events.
-
 #### `win.isFullScreen()`
 
 Returns `boolean` - Whether the window is in fullscreen mode.
@@ -1844,36 +1842,16 @@ will remove the vibrancy effect on the window.
 Note that `appearance-based`, `light`, `dark`, `medium-light`, and `ultra-dark` have been
 deprecated and will be removed in an upcoming version of macOS.
 
-#### `win.setWindowButtonPosition(position)` _macOS_
-
-* `position` [Point](structures/point.md) | null
-
-Set a custom position for the traffic light buttons in frameless window.
-Passing `null` will reset the position to default.
-
-#### `win.getWindowButtonPosition()` _macOS_
-
-Returns `Point | null` - The custom position for the traffic light buttons in
-frameless window, `null` will be returned when there is no custom position.
-
-#### `win.setTrafficLightPosition(position)` _macOS_ _Deprecated_
+#### `win.setTrafficLightPosition(position)` _macOS_
 
 * `position` [Point](structures/point.md)
 
 Set a custom position for the traffic light buttons in frameless window.
-Passing `{ x: 0, y: 0 }` will reset the position to default.
 
-> **Note**
-> This function is deprecated. Use [setWindowButtonPosition](#winsetwindowbuttonpositionposition-macos) instead.
-
-#### `win.getTrafficLightPosition()` _macOS_ _Deprecated_
+#### `win.getTrafficLightPosition()` _macOS_
 
 Returns `Point` - The custom position for the traffic light buttons in
-frameless window, `{ x: 0, y: 0 }` will be returned when there is no custom
-position.
-
-> **Note**
-> This function is deprecated. Use [getWindowButtonPosition](#wingetwindowbuttonposition-macos) instead.
+frameless window.
 
 #### `win.setTouchBar(touchBar)` _macOS_
 

docs/api/client-request.md

@@ -23,14 +23,12 @@ following properties:
     with which the request is associated. Defaults to the empty string. The
     `session` option supersedes `partition`. Thus if a `session` is explicitly
     specified, `partition` is ignored.
-  * `credentials` string (optional) - Can be `include`, `omit` or
-    `same-origin`. Whether to send
-    [credentials](https://fetch.spec.whatwg.org/#credentials) with this
+  * `credentials` string (optional) - Can be `include` or `omit`. Whether to
+    send [credentials](https://fetch.spec.whatwg.org/#credentials) with this
     request. If set to `include`, credentials from the session associated with
     the request will be used. If set to `omit`, credentials will not be sent
     with the request (and the `'login'` event will not be triggered in the
-    event of a 401). If set to `same-origin`, `origin` must also be specified.
-    This matches the behavior of the
+    event of a 401). This matches the behavior of the
     [fetch](https://fetch.spec.whatwg.org/#concept-request-credentials-mode)
     option of the same name. If this option is not specified, authentication
     data from the session will be sent, and cookies will not be sent (unless
@@ -51,13 +49,6 @@ following properties:
     [`request.followRedirect`](#requestfollowredirect) is invoked synchronously
     during the [`redirect`](#event-redirect) event.  Defaults to `follow`.
   * `origin` string (optional) - The origin URL of the request.
-  * `referrerPolicy` string (optional) - can be `""`, `no-referrer`,
-    `no-referrer-when-downgrade`, `origin`, `origin-when-cross-origin`,
-    `unsafe-url`, `same-origin`, `strict-origin`, or
-    `strict-origin-when-cross-origin`. Defaults to
-    `strict-origin-when-cross-origin`.
-  * `cache` string (optional) - can be `default`, `no-store`, `reload`,
-    `no-cache`, `force-cache` or `only-if-cached`.
 
 `options` properties such as `protocol`, `host`, `hostname`, `port` and `path`
 strictly follow the Node.js model as described in the
@@ -243,8 +234,6 @@ it is not allowed to add or remove a custom header.
 * `encoding` string (optional)
 * `callback` Function (optional)
 
-Returns `this`.
-
 Sends the last chunk of the request data. Subsequent write or end operations
 will not be allowed. The `finish` event is emitted just after the end operation.
 

docs/api/clipboard.md

@@ -226,7 +226,7 @@ clipboard.writeBuffer('public/utf8-plain-text', buffer)
 
 const ret = clipboard.readBuffer('public/utf8-plain-text')
 
-console.log(buffer.equals(ret))
+console.log(buffer.equals(out))
 // true
 ```
 

docs/api/crash-reporter.md

@@ -16,7 +16,7 @@ crashReporter.start({ submitURL: 'https://your-domain.com/url-to-submit' })
 For setting up a server to accept and process crash reports, you can use
 following projects:
 
-* [socorro](https://github.com/mozilla-services/socorro)
+* [socorro](https://github.com/mozilla/socorro)
 * [mini-breakpad-server](https://github.com/electron/mini-breakpad-server)
 
 > **Note:** Electron uses Crashpad, not Breakpad, to collect and upload

docs/api/net.md

@@ -63,62 +63,6 @@ Creates a [`ClientRequest`](./client-request.md) instance using the provided
 The `net.request` method would be used to issue both secure and insecure HTTP
 requests according to the specified protocol scheme in the `options` object.
 
-### `net.fetch(input[, init])`
-
-* `input` string | [GlobalRequest](https://nodejs.org/api/globals.html#request)
-* `init` [RequestInit](https://developer.mozilla.org/en-US/docs/Web/API/fetch#options) & { bypassCustomProtocolHandlers?: boolean } (optional)
-
-Returns `Promise<GlobalResponse>` - see [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response).
-
-Sends a request, similarly to how `fetch()` works in the renderer, using
-Chrome's network stack. This differs from Node's `fetch()`, which uses
-Node.js's HTTP stack.
-
-Example:
-
-```js
-async function example () {
-  const response = await net.fetch('https://my.app')
-  if (response.ok) {
-    const body = await response.json()
-    // ... use the result.
-  }
-}
-```
-
-This method will issue requests from the [default
-session](session.md#sessiondefaultsession). To send a `fetch` request from
-another session, use [ses.fetch()](session.md#sesfetchinput-init).
-
-See the MDN documentation for
-[`fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/fetch) for more
-details.
-
-Limitations:
-
-* `net.fetch()` does not support the `data:` or `blob:` schemes.
-* The value of the `integrity` option is ignored.
-* The `.type` and `.url` values of the returned `Response` object are
-  incorrect.
-
-By default, requests made with `net.fetch` can be made to [custom
-protocols](protocol.md) as well as `file:`, and will trigger
-[webRequest](web-request.md) handlers if present. When the non-standard
-`bypassCustomProtocolHandlers` option is set in RequestInit, custom protocol
-handlers will not be called for this request. This allows forwarding an
-intercepted request to the built-in handler. [webRequest](web-request.md)
-handlers will still be triggered when bypassing custom protocols.
-
-```js
-protocol.handle('https', (req) => {
-  if (req.url === 'https://my-app.com') {
-    return new Response('<body>my app</body>')
-  } else {
-    return net.fetch(req, { bypassCustomProtocolHandlers: true })
-  }
-})
-```
-
 ### `net.isOnline()`
 
 Returns `boolean` - Whether there is currently internet connection.

docs/api/power-monitor.md

@@ -24,30 +24,6 @@ Emitted when the system changes to AC power.
 
 Emitted when system changes to battery power.
 
-### Event: 'thermal-state-change' _macOS_
-
-* `state` string - The system's new thermal state. Can be `unknown`, `nominal`, `fair`, `serious`, `critical`.
-
-Emitted when the thermal state of the system changes. Notification of a change
-in the thermal status of the system, such as entering a critical temperature
-range. Depending on the severity, the system might take steps to reduce said
-temperature, for example, throttling the CPU or switching on the fans if
-available.
-
-Apps may react to the new state by reducing expensive computing tasks (e.g.
-video encoding), or notifying the user. The same state might be received
-repeatedly.
-
-See https://developer.apple.com/library/archive/documentation/Performance/Conceptual/power_efficiency_guidelines_osx/RespondToThermalStateChanges.html
-
-### Event: 'speed-limit-change' _macOS_ _Windows_
-
-* `limit` number - The operating system's advertised speed limit for CPUs, in percent.
-
-Notification of a change in the operating system's advertised speed limit for
-CPUs, in percent. Values below 100 indicate that the system is impairing
-processing power due to thermal management.
-
 ### Event: 'shutdown' _Linux_ _macOS_
 
 Emitted when the system is about to reboot or shut down. If the event handler
@@ -79,7 +55,7 @@ The `powerMonitor` module has the following methods:
 
 * `idleThreshold` Integer
 
-Returns `string` - The system's current idle state. Can be `active`, `idle`, `locked` or `unknown`.
+Returns `string` - The system's current state. Can be `active`, `idle`, `locked` or `unknown`.
 
 Calculate the system idle state. `idleThreshold` is the amount of time (in seconds)
 before considered idle.  `locked` is available on supported systems only.
@@ -90,10 +66,6 @@ Returns `Integer` - Idle time in seconds
 
 Calculate system idle time in seconds.
 
-### `powerMonitor.getCurrentThermalState()` _macOS_
-
-Returns `string` - The system's current thermal state. Can be `unknown`, `nominal`, `fair`, `serious`, or `critical`.
-
 ### `powerMonitor.isOnBatteryPower()`
 
 Returns `boolean` - Whether the system is on battery power.

docs/api/process.md

@@ -49,11 +49,8 @@ beginning to load the web page or the main script.
 
 ### `process.defaultApp` _Readonly_
 
-A `boolean`. When the app is started by being passed as parameter to the default Electron executable, this
+A `boolean`. When app is started by being passed as parameter to the default app, this
 property is `true` in the main process, otherwise it is `undefined`.
-For example when running the app with `electron .`, it is `true`,
-even if the app is packaged ([`isPackaged`](app.md#appispackaged-readonly)) is `true`.
-This can be useful to determine how many arguments will need to be sliced off from `process.argv`.
 
 ### `process.isMainFrame` _Readonly_
 

docs/api/protocol.md

@@ -8,11 +8,15 @@ An example of implementing a protocol that has the same effect as the
 `file://` protocol:
 
 ```javascript
-const { app, protocol, net } = require('electron')
+const { app, protocol } = require('electron')
+const path = require('path')
+const url = require('url')
 
 app.whenReady().then(() => {
-  protocol.handle('atom', (request) =>
-    net.fetch('file://' + request.url.slice('atom://'.length)))
+  protocol.registerFileProtocol('atom', (request, callback) => {
+    const filePath = url.fileURLToPath('file://' + request.url.slice('atom://'.length))
+    callback(filePath)
+  })
 })
 ```
 
@@ -34,15 +38,14 @@ to register it to that session explicitly.
 ```javascript
 const { session, app, protocol } = require('electron')
 const path = require('path')
-const url = require('url')
 
 app.whenReady().then(() => {
   const partition = 'persist:example'
   const ses = session.fromPartition(partition)
 
-  ses.protocol.handle('atom', (request) => {
-    const path = request.url.slice('atom://'.length)
-    return net.fetch(url.pathToFileURL(path.join(__dirname, path)))
+  ses.protocol.registerFileProtocol('atom', (request, callback) => {
+    const url = request.url.substr(7)
+    callback({ path: path.normalize(`${__dirname}/${url}`) })
   })
 
   mainWindow = new BrowserWindow({ webPreferences: { partition } })
@@ -106,74 +109,7 @@ The `<video>` and `<audio>` HTML elements expect protocols to buffer their
 responses by default. The `stream` flag configures those elements to correctly
 expect streaming responses.
 
-### `protocol.handle(scheme, handler)`
-
-* `scheme` string - scheme to handle, for example `https` or `my-app`. This is
-  the bit before the `:` in a URL.
-* `handler` Function<[GlobalResponse](https://nodejs.org/api/globals.html#response) | Promise<GlobalResponse>>
-  * `request` [GlobalRequest](https://nodejs.org/api/globals.html#request)
-
-Register a protocol handler for `scheme`. Requests made to URLs with this
-scheme will delegate to this handler to determine what response should be sent.
-
-Either a `Response` or a `Promise<Response>` can be returned.
-
-Example:
-
-```js
-import { app, protocol } from 'electron'
-import { join } from 'path'
-import { pathToFileURL } from 'url'
-
-protocol.registerSchemesAsPrivileged([
-  {
-    scheme: 'app',
-    privileges: {
-      standard: true,
-      secure: true,
-      supportsFetchAPI: true
-    }
-  }
-])
-
-app.whenReady().then(() => {
-  protocol.handle('app', (req) => {
-    const { host, pathname } = new URL(req.url)
-    if (host === 'bundle') {
-      if (pathname === '/') {
-        return new Response('<h1>hello, world</h1>', {
-          headers: { 'content-type': 'text/html' }
-        })
-      }
-      // NB, this does not check for paths that escape the bundle, e.g.
-      // app://bundle/../../secret_file.txt
-      return net.fetch(pathToFileURL(join(__dirname, pathname)))
-    } else if (host === 'api') {
-      return net.fetch('https://api.my-server.com/' + pathname, {
-        method: req.method,
-        headers: req.headers,
-        body: req.body
-      })
-    }
-  })
-})
-```
-
-See the MDN docs for [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) and [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) for more details.
-
-### `protocol.unhandle(scheme)`
-
-* `scheme` string - scheme for which to remove the handler.
-
-Removes a protocol handler registered with `protocol.handle`.
-
-### `protocol.isProtocolHandled(scheme)`
-
-* `scheme` string
-
-Returns `boolean` - Whether `scheme` is already handled.
-
-### `protocol.registerFileProtocol(scheme, handler)` _Deprecated_
+### `protocol.registerFileProtocol(scheme, handler)`
 
 * `scheme` string
 * `handler` Function
@@ -194,7 +130,7 @@ path or an object that has a `path` property, e.g. `callback(filePath)` or
 By default the `scheme` is treated like `http:`, which is parsed differently
 from protocols that follow the "generic URI syntax" like `file:`.
 
-### `protocol.registerBufferProtocol(scheme, handler)` _Deprecated_
+### `protocol.registerBufferProtocol(scheme, handler)`
 
 * `scheme` string
 * `handler` Function
@@ -218,7 +154,7 @@ protocol.registerBufferProtocol('atom', (request, callback) => {
 })
 ```
 
-### `protocol.registerStringProtocol(scheme, handler)` _Deprecated_
+### `protocol.registerStringProtocol(scheme, handler)`
 
 * `scheme` string
 * `handler` Function
@@ -234,7 +170,7 @@ The usage is the same with `registerFileProtocol`, except that the `callback`
 should be called with either a `string` or an object that has the `data`
 property.
 
-### `protocol.registerHttpProtocol(scheme, handler)` _Deprecated_
+### `protocol.registerHttpProtocol(scheme, handler)`
 
 * `scheme` string
 * `handler` Function
@@ -249,7 +185,7 @@ Registers a protocol of `scheme` that will send an HTTP request as a response.
 The usage is the same with `registerFileProtocol`, except that the `callback`
 should be called with an object that has the `url` property.
 
-### `protocol.registerStreamProtocol(scheme, handler)` _Deprecated_
+### `protocol.registerStreamProtocol(scheme, handler)`
 
 * `scheme` string
 * `handler` Function
@@ -298,7 +234,7 @@ protocol.registerStreamProtocol('atom', (request, callback) => {
 })
 ```
 
-### `protocol.unregisterProtocol(scheme)` _Deprecated_
+### `protocol.unregisterProtocol(scheme)`
 
 * `scheme` string
 
@@ -306,13 +242,13 @@ Returns `boolean` - Whether the protocol was successfully unregistered
 
 Unregisters the custom protocol of `scheme`.
 
-### `protocol.isProtocolRegistered(scheme)` _Deprecated_
+### `protocol.isProtocolRegistered(scheme)`
 
 * `scheme` string
 
 Returns `boolean` - Whether `scheme` is already registered.
 
-### `protocol.interceptFileProtocol(scheme, handler)` _Deprecated_
+### `protocol.interceptFileProtocol(scheme, handler)`
 
 * `scheme` string
 * `handler` Function
@@ -325,7 +261,7 @@ Returns `boolean` - Whether the protocol was successfully intercepted
 Intercepts `scheme` protocol and uses `handler` as the protocol's new handler
 which sends a file as a response.
 
-### `protocol.interceptStringProtocol(scheme, handler)` _Deprecated_
+### `protocol.interceptStringProtocol(scheme, handler)`
 
 * `scheme` string
 * `handler` Function
@@ -338,7 +274,7 @@ Returns `boolean` - Whether the protocol was successfully intercepted
 Intercepts `scheme` protocol and uses `handler` as the protocol's new handler
 which sends a `string` as a response.
 
-### `protocol.interceptBufferProtocol(scheme, handler)` _Deprecated_
+### `protocol.interceptBufferProtocol(scheme, handler)`
 
 * `scheme` string
 * `handler` Function
@@ -351,7 +287,7 @@ Returns `boolean` - Whether the protocol was successfully intercepted
 Intercepts `scheme` protocol and uses `handler` as the protocol's new handler
 which sends a `Buffer` as a response.
 
-### `protocol.interceptHttpProtocol(scheme, handler)` _Deprecated_
+### `protocol.interceptHttpProtocol(scheme, handler)`
 
 * `scheme` string
 * `handler` Function
@@ -364,7 +300,7 @@ Returns `boolean` - Whether the protocol was successfully intercepted
 Intercepts `scheme` protocol and uses `handler` as the protocol's new handler
 which sends a new HTTP request as a response.
 
-### `protocol.interceptStreamProtocol(scheme, handler)` _Deprecated_
+### `protocol.interceptStreamProtocol(scheme, handler)`
 
 * `scheme` string
 * `handler` Function
@@ -377,7 +313,7 @@ Returns `boolean` - Whether the protocol was successfully intercepted
 Same as `protocol.registerStreamProtocol`, except that it replaces an existing
 protocol handler.
 
-### `protocol.uninterceptProtocol(scheme)` _Deprecated_
+### `protocol.uninterceptProtocol(scheme)`
 
 * `scheme` string
 
@@ -385,7 +321,7 @@ Returns `boolean` - Whether the protocol was successfully unintercepted
 
 Remove the interceptor installed for `scheme` and restore its original handler.
 
-### `protocol.isProtocolIntercepted(scheme)` _Deprecated_
+### `protocol.isProtocolIntercepted(scheme)`
 
 * `scheme` string
 

docs/api/session.md

@@ -42,22 +42,6 @@ To create a `Session` with `options`, you have to ensure the `Session` with the
 `partition` has never been used before. There is no way to change the `options`
 of an existing `Session` object.
 
-### `session.fromPath(path[, options])`
-
-* `path` string
-* `options` Object (optional)
-  * `cache` boolean - Whether to enable cache.
-
-Returns `Session` - A session instance from the absolute path as specified by the `path`
-string. When there is an existing `Session` with the same absolute path, it
-will be returned; otherwise a new `Session` instance will be created with `options`. The
-call will throw an error if the path is not an absolute path. Additionally, an error will
-be thrown if an empty string is provided.
-
-To create a `Session` with `options`, you have to ensure the `Session` with the
-`path` has never been used before. There is no way to change the `options`
-of an existing `Session` object.
-
 ## Properties
 
 The `session` module has the following properties:
@@ -519,8 +503,9 @@ app.whenReady().then(() => {
 Returns:
 
 * `event` Event
-* `device` [USBDevice](structures/usb-device.md)
-* `webContents` [WebContents](web-contents.md)
+* `details` Object
+  * `device` [USBDevice](structures/usb-device.md)
+  * `frame` [WebFrameMain](web-frame-main.md)
 
 Emitted after `navigator.usb.requestDevice` has been called and
 `select-usb-device` has fired if a new device becomes available before
@@ -533,8 +518,9 @@ with the newly added device.
 Returns:
 
 * `event` Event
-* `device` [USBDevice](structures/usb-device.md)
-* `webContents` [WebContents](web-contents.md)
+* `details` Object
+  * `device` [USBDevice](structures/usb-device.md)
+  * `frame` [WebFrameMain](web-frame-main.md)
 
 Emitted after `navigator.usb.requestDevice` has been called and
 `select-usb-device` has fired if a device has been removed before the callback
@@ -548,7 +534,7 @@ Returns:
 
 * `event` Event
 * `details` Object
-  * `device` [USBDevice](structures/usb-device.md)
+  * `device` [USBDevice[]](structures/usb-device.md)
   * `origin` string (optional) - The origin that the device has been revoked from.
 
 Emitted after `USBDevice.forget()` has been called.  This event can be used
@@ -780,61 +766,6 @@ Returns `Promise<void>` - Resolves when all connections are closed.
 
 **Note:** It will terminate / fail all requests currently in flight.
 
-#### `ses.fetch(input[, init])`
-
-* `input` string | [GlobalRequest](https://nodejs.org/api/globals.html#request)
-* `init` [RequestInit](https://developer.mozilla.org/en-US/docs/Web/API/fetch#options) (optional)
-
-Returns `Promise<GlobalResponse>` - see [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response).
-
-Sends a request, similarly to how `fetch()` works in the renderer, using
-Chrome's network stack. This differs from Node's `fetch()`, which uses
-Node.js's HTTP stack.
-
-Example:
-
-```js
-async function example () {
-  const response = await net.fetch('https://my.app')
-  if (response.ok) {
-    const body = await response.json()
-    // ... use the result.
-  }
-}
-```
-
-See also [`net.fetch()`](net.md#netfetchinput-init), a convenience method which
-issues requests from the [default session](#sessiondefaultsession).
-
-See the MDN documentation for
-[`fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/fetch) for more
-details.
-
-Limitations:
-
-* `net.fetch()` does not support the `data:` or `blob:` schemes.
-* The value of the `integrity` option is ignored.
-* The `.type` and `.url` values of the returned `Response` object are
-  incorrect.
-
-By default, requests made with `net.fetch` can be made to [custom
-protocols](protocol.md) as well as `file:`, and will trigger
-[webRequest](web-request.md) handlers if present. When the non-standard
-`bypassCustomProtocolHandlers` option is set in RequestInit, custom protocol
-handlers will not be called for this request. This allows forwarding an
-intercepted request to the built-in handler. [webRequest](web-request.md)
-handlers will still be triggered when bypassing custom protocols.
-
-```js
-protocol.handle('https', (req) => {
-  if (req.url === 'https://my-app.com') {
-    return new Response('<body>my app</body>')
-  } else {
-    return net.fetch(req, { bypassCustomProtocolHandlers: true })
-  }
-})
-```
-
 #### `ses.disableNetworkEmulation()`
 
 Disables any network emulation already active for the `session`. Resets to

docs/api/structures/event.md

@@ -0,0 +1,3 @@
+# Event Object extends `GlobalEvent`
+
+* `preventDefault` VoidFunction

docs/api/structures/upload-file.md

@@ -2,8 +2,8 @@
 
 * `type` 'file' - `file`.
 * `filePath` string - Path of file to be uploaded.
-* `offset` Integer (optional) - Defaults to `0`.
-* `length` Integer (optional) - Number of bytes to read from `offset`.
+* `offset` Integer - Defaults to `0`.
+* `length` Integer - Number of bytes to read from `offset`.
   Defaults to `0`.
-* `modificationTime` Double (optional) - Last Modification time in
-  number of seconds since the UNIX epoch. Defaults to `0`.
+* `modificationTime` Double - Last Modification time in
+  number of seconds since the UNIX epoch.

docs/api/web-contents.md

@@ -19,36 +19,6 @@ const contents = win.webContents
 console.log(contents)
 ```
 
-## Navigation Events
-
-Several events can be used to monitor navigations as they occur within a `webContents`.
-
-### Document Navigations
-
-When a `webContents` navigates to another page (as opposed to an [in-page navigation](web-contents.md#in-page-navigation)), the following events will be fired.
-
-* [`did-start-navigation`](web-contents.md#event-did-start-navigation)
-* [`will-frame-navigate`](web-contents.md#event-will-frame-navigate)
-* [`will-navigate`](web-contents.md#event-will-navigate) (only fired when main frame navigates)
-* [`will-redirect`](web-contents.md#event-will-redirect) (only fired when a redirect happens during navigation)
-* [`did-redirect-navigation`](web-contents.md#event-did-redirect-navigation) (only fired when a redirect happens during navigation)
-* [`did-frame-navigate`](web-contents.md#event-did-frame-navigate)
-* [`did-navigate`](web-contents.md#event-did-navigate) (only fired when main frame navigates)
-
-Subsequent events will not fire if `event.preventDefault()` is called on any of the cancellable events.
-
-### In-page Navigation
-
-In-page navigations don't cause the page to reload, but instead navigate to a location within the current page. These events are not cancellable. For an in-page navigations, the following events will fire in this order:
-
-* [`did-start-navigation`](web-contents.md#event-did-start-navigation)
-* [`did-navigate-in-page`](web-contents.md#event-did-navigate-in-page)
-
-### Frame Navigation
-
-The [`will-navigate`](web-contents.md#event-will-navigate) and [`did-navigate`](web-contents.md#event-did-navigate) events only fire when the [mainFrame](web-contents.md#contentsmainframe-readonly) navigates.
-If you want to also observe navigations in `<iframe>`s, use [`will-frame-navigate`](web-contents.md#event-will-frame-navigate) and [`did-frame-navigate`](web-contents.md#event-did-frame-navigate) events.
-
 ## Methods
 
 These methods can be accessed from the `webContents` module:
@@ -65,28 +35,28 @@ for all windows, webviews, opened devtools, and devtools extension background pa
 
 ### `webContents.getFocusedWebContents()`
 
-Returns `WebContents | null` - The web contents that is focused in this application, otherwise
+Returns `WebContents` | null - The web contents that is focused in this application, otherwise
 returns `null`.
 
 ### `webContents.fromId(id)`
 
 * `id` Integer
 
-Returns `WebContents | undefined` - A WebContents instance with the given ID, or
+Returns `WebContents` | undefined - A WebContents instance with the given ID, or
 `undefined` if there is no WebContents associated with the given ID.
 
 ### `webContents.fromFrame(frame)`
 
 * `frame` WebFrameMain
 
-Returns `WebContents | undefined` - A WebContents instance with the given WebFrameMain, or
+Returns `WebContents` | undefined - A WebContents instance with the given WebFrameMain, or
 `undefined` if there is no WebContents associated with the given WebFrameMain.
 
 ### `webContents.fromDevToolsTargetId(targetId)`
 
 * `targetId` string - The Chrome DevTools Protocol [TargetID](https://chromedevtools.github.io/devtools-protocol/tot/Target/#type-TargetID) associated with the WebContents instance.
 
-Returns `WebContents | undefined` - A WebContents instance with the given TargetID, or
+Returns `WebContents` | undefined - A WebContents instance with the given TargetID, or
 `undefined` if there is no WebContents associated with the given TargetID.
 
 When communicating with the [Chrome DevTools Protocol](https://chromedevtools.github.io/devtools-protocol/),
@@ -237,25 +207,10 @@ See [`window.open()`](window-open.md) for more details and how to use this in co
 
 Returns:
 
-* `details` Event<>
-  * `url` string - The URL the frame is navigating to.
-  * `isSameDocument` boolean - Whether the navigation happened without changing
-    document. Examples of same document navigations are reference fragment
-    navigations, pushState/replaceState, and same page history navigation.
-  * `isMainFrame` boolean - True if the navigation is taking place in a main frame.
-  * `frame` WebFrameMain - The frame to be navigated.
-  * `initiator` WebFrameMain (optional) - The frame which initiated the
-    navigation, which can be a parent frame (e.g. via `window.open` with a
-    frame's name), or null if the navigation was not initiated by a frame. This
-    can also be null if the initiating frame was deleted before the event was
-    emitted.
-* `url` string _Deprecated_
-* `isInPlace` boolean _Deprecated_
-* `isMainFrame` boolean _Deprecated_
-* `frameProcessId` Integer _Deprecated_
-* `frameRoutingId` Integer _Deprecated_
+* `event` Event
+* `url` string
 
-Emitted when a user or the page wants to start navigation on the main frame. It can happen when
+Emitted when a user or the page wants to start navigation. It can happen when
 the `window.location` object is changed or a user clicks a link in the page.
 
 This event will not emit when the navigation is started programmatically with
@@ -267,79 +222,30 @@ this purpose.
 
 Calling `event.preventDefault()` will prevent the navigation.
 
-#### Event: 'will-frame-navigate'
-
-Returns:
-
-* `details` Event<>
-  * `url` string - The URL the frame is navigating to.
-  * `isMainFrame` boolean - True if the navigation is taking place in a main frame.
-  * `frame` WebFrameMain - The frame to be navigated.
-  * `initiator` WebFrameMain (optional) - The frame which initiated the
-    navigation, which can be a parent frame (e.g. via `window.open` with a
-    frame's name), or null if the navigation was not initiated by a frame. This
-    can also be null if the initiating frame was deleted before the event was
-    emitted.
-
-Emitted when a user or the page wants to start navigation in any frame. It can happen when
-the `window.location` object is changed or a user clicks a link in the page.
-
-Unlike `will-navigate`, `will-frame-navigate` is fired when the main frame or any of its subframes attempts to navigate. When the navigation event comes from the main frame, `isMainFrame` will be `true`.
-
-This event will not emit when the navigation is started programmatically with
-APIs like `webContents.loadURL` and `webContents.back`.
-
-It is also not emitted for in-page navigations, such as clicking anchor links
-or updating the `window.location.hash`. Use `did-navigate-in-page` event for
-this purpose.
-
-Calling `event.preventDefault()` will prevent the navigation.
-
 #### Event: 'did-start-navigation'
 
 Returns:
 
-* `details` Event<>
-  * `url` string - The URL the frame is navigating to.
-  * `isSameDocument` boolean - Whether the navigation happened without changing
-    document. Examples of same document navigations are reference fragment
-    navigations, pushState/replaceState, and same page history navigation.
-  * `isMainFrame` boolean - True if the navigation is taking place in a main frame.
-  * `frame` WebFrameMain - The frame to be navigated.
-  * `initiator` WebFrameMain (optional) - The frame which initiated the
-    navigation, which can be a parent frame (e.g. via `window.open` with a
-    frame's name), or null if the navigation was not initiated by a frame. This
-    can also be null if the initiating frame was deleted before the event was
-    emitted.
-* `url` string _Deprecated_
-* `isInPlace` boolean _Deprecated_
-* `isMainFrame` boolean _Deprecated_
-* `frameProcessId` Integer _Deprecated_
-* `frameRoutingId` Integer _Deprecated_
+* `event` Event
+* `url` string
+* `isInPlace` boolean
+* `isMainFrame` boolean
+* `frameProcessId` Integer
+* `frameRoutingId` Integer
 
-Emitted when any frame (including main) starts navigating.
+Emitted when any frame (including main) starts navigating. `isInPlace` will be
+`true` for in-page navigations.
 
 #### Event: 'will-redirect'
 
 Returns:
 
-* `details` Event<>
-  * `url` string - The URL the frame is navigating to.
-  * `isSameDocument` boolean - Whether the navigation happened without changing
-    document. Examples of same document navigations are reference fragment
-    navigations, pushState/replaceState, and same page history navigation.
-  * `isMainFrame` boolean - True if the navigation is taking place in a main frame.
-  * `frame` WebFrameMain - The frame to be navigated.
-  * `initiator` WebFrameMain (optional) - The frame which initiated the
-    navigation, which can be a parent frame (e.g. via `window.open` with a
-    frame's name), or null if the navigation was not initiated by a frame. This
-    can also be null if the initiating frame was deleted before the event was
-    emitted.
-* `url` string _Deprecated_
-* `isInPlace` boolean _Deprecated_
-* `isMainFrame` boolean _Deprecated_
-* `frameProcessId` Integer _Deprecated_
-* `frameRoutingId` Integer _Deprecated_
+* `event` Event
+* `url` string
+* `isInPlace` boolean
+* `isMainFrame` boolean
+* `frameProcessId` Integer
+* `frameRoutingId` Integer
 
 Emitted when a server side redirect occurs during navigation.  For example a 302
 redirect.
@@ -354,23 +260,12 @@ redirect).
 
 Returns:
 
-* `details` Event<>
-  * `url` string - The URL the frame is navigating to.
-  * `isSameDocument` boolean - Whether the navigation happened without changing
-    document. Examples of same document navigations are reference fragment
-    navigations, pushState/replaceState, and same page history navigation.
-  * `isMainFrame` boolean - True if the navigation is taking place in a main frame.
-  * `frame` WebFrameMain - The frame to be navigated.
-  * `initiator` WebFrameMain (optional) - The frame which initiated the
-    navigation, which can be a parent frame (e.g. via `window.open` with a
-    frame's name), or null if the navigation was not initiated by a frame. This
-    can also be null if the initiating frame was deleted before the event was
-    emitted.
-* `url` string _Deprecated_
-* `isInPlace` boolean _Deprecated_
-* `isMainFrame` boolean _Deprecated_
-* `frameProcessId` Integer _Deprecated_
-* `frameRoutingId` Integer _Deprecated_
+* `event` Event
+* `url` string
+* `isInPlace` boolean
+* `isMainFrame` boolean
+* `frameProcessId` Integer
+* `frameRoutingId` Integer
 
 Emitted after a server side redirect occurs during navigation.  For example a 302
 redirect.
@@ -693,15 +588,6 @@ Emitted when media starts playing.
 
 Emitted when media is paused or done playing.
 
-#### Event: 'audio-state-changed'
-
-Returns:
-
-* `event` Event<>
-  * `audible` boolean - True if one or more frames or child `webContents` are emitting audio.
-
-Emitted when media becomes audible or inaudible.
-
 #### Event: 'did-change-theme-color'
 
 Returns:
@@ -952,7 +838,7 @@ Emitted when the preload script `preloadPath` throws an unhandled exception `err
 
 Returns:
 
-* `event` [IpcMainEvent](structures/ipc-main-event.md)
+* `event` Event
 * `channel` string
 * `...args` any[]
 
@@ -964,7 +850,7 @@ See also [`webContents.ipc`](#contentsipc-readonly), which provides an [`IpcMain
 
 Returns:
 
-* `event` [IpcMainEvent](structures/ipc-main-event.md)
+* `event` Event
 * `channel` string
 * `...args` any[]
 

docs/api/webview-tag.md

@@ -823,28 +823,6 @@ this purpose.
 
 Calling `event.preventDefault()` does **NOT** have any effect.
 
-### Event: 'will-frame-navigate'
-
-Returns:
-
-* `url` string
-* `isMainFrame` boolean
-* `frameProcessId` Integer
-* `frameRoutingId` Integer
-
-Emitted when a user or the page wants to start navigation anywhere in the `<webview>`
-or any frames embedded within. It can happen when the `window.location` object is
-changed or a user clicks a link in the page.
-
-This event will not emit when the navigation is started programmatically with
-APIs like `<webview>.loadURL` and `<webview>.back`.
-
-It is also not emitted during in-page navigation, such as clicking anchor links
-or updating the `window.location.hash`. Use `did-navigate-in-page` event for
-this purpose.
-
-Calling `event.preventDefault()` does **NOT** have any effect.
-
 ### Event: 'did-start-navigation'
 
 Returns:

docs/breaking-changes.md

@@ -12,93 +12,6 @@ This document uses the following convention to categorize breaking changes:
 * **Deprecated:** An API was marked as deprecated. The API will continue to function, but will emit a deprecation warning, and will be removed in a future release.
 * **Removed:** An API or feature was removed, and is no longer supported by Electron.
 
-## Planned Breaking API Changes (25.0)
-
-### Deprecated: `protocol.{register,intercept}{Buffer,String,Stream,File,Http}Protocol`
-
-The `protocol.register*Protocol` and `protocol.intercept*Protocol` methods have
-been replaced with [`protocol.handle`](api/protocol.md#protocolhandlescheme-handler).
-
-The new method can either register a new protocol or intercept an existing
-protocol, and responses can be of any type.
-
-```js
-// Deprecated in Electron 25
-protocol.registerBufferProtocol('some-protocol', () => {
-  callback({ mimeType: 'text/html', data: Buffer.from('<h5>Response</h5>') })
-})
-
-// Replace with
-protocol.handle('some-protocol', () => {
-  return new Response(
-    Buffer.from('<h5>Response</h5>'), // Could also be a string or ReadableStream.
-    { headers: { 'content-type': 'text/html' } }
-  )
-})
-```
-
-```js
-// Deprecated in Electron 25
-protocol.registerHttpProtocol('some-protocol', () => {
-  callback({ url: 'https://electronjs.org' })
-})
-
-// Replace with
-protocol.handle('some-protocol', () => {
-  return net.fetch('https://electronjs.org')
-})
-```
-
-```js
-// Deprecated in Electron 25
-protocol.registerFileProtocol('some-protocol', () => {
-  callback({ filePath: '/path/to/my/file' })
-})
-
-// Replace with
-protocol.handle('some-protocol', () => {
-  return net.fetch('file:///path/to/my/file')
-})
-```
-
-### Deprecated: `BrowserWindow.setTrafficLightPosition(position)`
-
-`BrowserWindow.setTrafficLightPosition(position)` has been deprecated, the
-`BrowserWindow.setWindowButtonPosition(position)` API should be used instead
-which accepts `null` instead of `{ x: 0, y: 0 }` to reset the position to
-system default.
-
-```js
-// Deprecated in Electron 25
-win.setTrafficLightPosition({ x: 10, y: 10 })
-win.setTrafficLightPosition({ x: 0, y: 0 })
-
-// Replace with
-win.setWindowButtonPosition({ x: 10, y: 10 })
-win.setWindowButtonPosition(null)
-```
-
-### Deprecated: `BrowserWindow.getTrafficLightPosition()`
-
-`BrowserWindow.getTrafficLightPosition()` has been deprecated, the
-`BrowserWindow.getWindowButtonPosition()` API should be used instead
-which returns `null` instead of `{ x: 0, y: 0 }` when there is no custom
-position.
-
-```js
-// Deprecated in Electron 25
-const pos = win.getTrafficLightPosition()
-if (pos.x === 0 && pos.y === 0) {
-  // No custom position.
-}
-
-// Replace with
-const ret = win.getWindowButtonPosition()
-if (ret === null) {
-  // No custom position.
-}
-```
-
 ## Planned Breaking API Changes (24.0)
 
 ### API Changed: `nativeImage.createThumbnailFromPath(path, size)`

docs/development/coding-style.md

@@ -49,7 +49,7 @@ formatted correctly.
 * Write [standard](https://www.npmjs.com/package/standard) JavaScript style.
 * File names should be concatenated with `-` instead of `_`, e.g.
   `file-name.js` rather than `file_name.js`, because in
-  [atom/atom](https://github.com/atom/atom) module names are usually in
+  [github/atom](https://github.com/github/atom) module names are usually in
   the `module-name` form. This rule only applies to `.js` files.
 * Use newer ES6/ES2015 syntax where appropriate
   * [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const)

docs/fiddles/features/drag-and-drop/main.js

@@ -1,9 +1,9 @@
-const { app, BrowserWindow, ipcMain } = require('electron')
+const { app, BrowserWindow, ipcMain, nativeImage, NativeImage } = require('electron')
 const path = require('path')
 const fs = require('fs')
 const https = require('https')
 
-function createWindow () {
+function createWindow() {
   const win = new BrowserWindow({
     width: 800,
     height: 600,
@@ -15,23 +15,23 @@ function createWindow () {
   win.loadFile('index.html')
 }
 
-const iconName = path.join(__dirname, 'iconForDragAndDrop.png')
-const icon = fs.createWriteStream(iconName)
+const iconName = path.join(__dirname, 'iconForDragAndDrop.png');
+const icon = fs.createWriteStream(iconName);
 
 // Create a new file to copy - you can also copy existing files.
 fs.writeFileSync(path.join(__dirname, 'drag-and-drop-1.md'), '# First file to test drag and drop')
 fs.writeFileSync(path.join(__dirname, 'drag-and-drop-2.md'), '# Second file to test drag and drop')
 
 https.get('https://img.icons8.com/ios/452/drag-and-drop.png', (response) => {
-  response.pipe(icon)
-})
+  response.pipe(icon);
+});
 
 app.whenReady().then(createWindow)
 
 ipcMain.on('ondragstart', (event, filePath) => {
   event.sender.startDrag({
     file: path.join(__dirname, filePath),
-    icon: iconName
+    icon: iconName,
   })
 })
 

docs/fiddles/features/keyboard-shortcuts/global/main.js

@@ -3,7 +3,7 @@ const { app, BrowserWindow, globalShortcut } = require('electron')
 function createWindow () {
   const win = new BrowserWindow({
     width: 800,
-    height: 600
+    height: 600,
   })
 
   win.loadFile('index.html')

docs/fiddles/features/keyboard-shortcuts/local/main.js

@@ -3,7 +3,7 @@ const { app, BrowserWindow, Menu, MenuItem } = require('electron')
 function createWindow () {
   const win = new BrowserWindow({
     width: 800,
-    height: 600
+    height: 600,
   })
 
   win.loadFile('index.html')

docs/fiddles/features/keyboard-shortcuts/web-apis/main.js

@@ -1,15 +1,17 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow } = require('electron')
+const {app, BrowserWindow} = require('electron')
+const path = require('path')
 
 function createWindow () {
   // Create the browser window.
   const mainWindow = new BrowserWindow({
     width: 800,
-    height: 600
+    height: 600,
   })
 
   // and load the index.html of the app.
   mainWindow.loadFile('index.html')
+
 }
 
 // This method will be called when Electron has finished

docs/fiddles/features/keyboard-shortcuts/web-apis/renderer.js

@@ -1,6 +1,6 @@
 function handleKeyPress (event) {
   // You can put code here to handle the keypress.
-  document.getElementById('last-keypress').innerText = event.key
+  document.getElementById("last-keypress").innerText = event.key
   console.log(`You pressed ${event.key}`)
 }
 

docs/fiddles/features/macos-dock-menu/main.js

@@ -3,7 +3,7 @@ const { app, BrowserWindow, Menu } = require('electron')
 function createWindow () {
   const win = new BrowserWindow({
     width: 800,
-    height: 600
+    height: 600,
   })
 
   win.loadFile('index.html')

docs/fiddles/features/notifications/renderer/renderer.js

@@ -2,5 +2,5 @@ const NOTIFICATION_TITLE = 'Title'
 const NOTIFICATION_BODY = 'Notification from the Renderer process. Click to log to console.'
 const CLICK_MESSAGE = 'Notification clicked!'
 
-new window.Notification(NOTIFICATION_TITLE, { body: NOTIFICATION_BODY })
-  .onclick = () => { document.getElementById('output').innerText = CLICK_MESSAGE }
+new Notification(NOTIFICATION_TITLE, { body: NOTIFICATION_BODY })
+  .onclick = () => document.getElementById("output").innerText = CLICK_MESSAGE

docs/fiddles/features/offscreen-rendering/main.js

@@ -4,31 +4,16 @@ const path = require('path')
 
 app.disableHardwareAcceleration()
 
-function createWindow () {
-  const win = new BrowserWindow({
-    width: 800,
-    height: 600,
-    webPreferences: {
-      offscreen: true
-    }
-  })
+let win
 
+app.whenReady().then(() => {
+  win = new BrowserWindow({ webPreferences: { offscreen: true } })
   win.loadURL('https://github.com')
   win.webContents.on('paint', (event, dirty, image) => {
     fs.writeFileSync('ex.png', image.toPNG())
   })
   win.webContents.setFrameRate(60)
   console.log(`The screenshot has been successfully saved to ${path.join(process.cwd(), 'ex.png')}`)
-}
-
-app.whenReady().then(() => {
-  createWindow()
-
-  app.on('activate', () => {
-    if (BrowserWindow.getAllWindows().length === 0) {
-      createWindow()
-    }
-  })
 })
 
 app.on('window-all-closed', () => {
@@ -36,3 +21,9 @@ app.on('window-all-closed', () => {
     app.quit()
   }
 })
+
+app.on('activate', () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow()
+  }
+})

docs/fiddles/features/represented-file/main.js

@@ -1,5 +1,5 @@
 const { app, BrowserWindow } = require('electron')
-const os = require('os')
+const os = require('os');
 
 function createWindow () {
   const win = new BrowserWindow({

docs/fiddles/features/web-bluetooth/main.js

@@ -1,7 +1,7 @@
-const { app, BrowserWindow, ipcMain } = require('electron')
+const {app, BrowserWindow, ipcMain} = require('electron')
 const path = require('path')
 
-let bluetoothPinCallback
+let bluetoothPinCallback 
 let selectBluetoothCallback
 
 function createWindow () {
@@ -24,12 +24,13 @@ function createWindow () {
     } else {
       // The device wasn't found so we need to either wait longer (eg until the
       // device is turned on) or until the user cancels the request
-    }
+    }     
   })
 
   ipcMain.on('cancel-bluetooth-request', (event) => {
     selectBluetoothCallback('')
   })
+  
 
   // Listen for a message from the renderer to get the response for the Bluetooth pairing.
   ipcMain.on('bluetooth-pairing-response', (event, response) => {
@@ -37,6 +38,7 @@ function createWindow () {
   })
 
   mainWindow.webContents.session.setBluetoothPairingHandler((details, callback) => {
+
     bluetoothPinCallback = callback
     // Send a message to the renderer to prompt the user to confirm the pairing.
     mainWindow.webContents.send('bluetooth-pairing-request', details)

docs/fiddles/features/web-bluetooth/preload.js

@@ -4,4 +4,4 @@ contextBridge.exposeInMainWorld('electronAPI', {
   cancelBluetoothRequest: (callback) => ipcRenderer.send('cancel-bluetooth-request', callback),
   bluetoothPairingRequest: (callback) => ipcRenderer.on('bluetooth-pairing-request', callback),
   bluetoothPairingResponse: (response) => ipcRenderer.send('bluetooth-pairing-response', response)
-})
+})

docs/fiddles/features/web-bluetooth/renderer.js

@@ -1,13 +1,13 @@
-async function testIt () {
+async function testIt() {
   const device = await navigator.bluetooth.requestDevice({
     acceptAllDevices: true
   })
   document.getElementById('device-name').innerHTML = device.name || `ID: ${device.id}`
 }
 
-document.getElementById('clickme').addEventListener('click', testIt)
+document.getElementById('clickme').addEventListener('click',testIt)
 
-function cancelRequest () {
+function cancelRequest() {
   window.electronAPI.cancelBluetoothRequest()
 }
 
@@ -18,15 +18,15 @@ window.electronAPI.bluetoothPairingRequest((event, details) => {
 
   switch (details.pairingKind) {
     case 'confirm': {
-      response.confirmed = window.confirm(`Do you want to connect to device ${details.deviceId}?`)
+      response.confirmed = confirm(`Do you want to connect to device ${details.deviceId}?`)
       break
     }
     case 'confirmPin': {
-      response.confirmed = window.confirm(`Does the pin ${details.pin} match the pin displayed on device ${details.deviceId}?`)
+      response.confirmed = confirm(`Does the pin ${details.pin} match the pin displayed on device ${details.deviceId}?`)
       break
     }
     case 'providePin': {
-      const pin = window.prompt(`Please provide a pin for ${details.deviceId}.`)
+      const pin = prompt(`Please provide a pin for ${details.deviceId}.`)
       if (pin) {
         response.pin = pin
         response.confirmed = true
@@ -37,4 +37,4 @@ window.electronAPI.bluetoothPairingRequest((event, details) => {
   }
 
   window.electronAPI.bluetoothPairingResponse(response)
-})
+})

docs/fiddles/features/web-hid/main.js

@@ -1,4 +1,5 @@
-const { app, BrowserWindow } = require('electron')
+const {app, BrowserWindow} = require('electron')
+const path = require('path')
 
 function createWindow () {
   const mainWindow = new BrowserWindow({
@@ -7,16 +8,16 @@ function createWindow () {
   })
 
   mainWindow.webContents.session.on('select-hid-device', (event, details, callback) => {
-    // Add events to handle devices being added or removed before the callback on
-    // `select-hid-device` is called.
+    //Add events to handle devices being added or removed before the callback on
+    //`select-hid-device` is called.
     mainWindow.webContents.session.on('hid-device-added', (event, device) => {
       console.log('hid-device-added FIRED WITH', device)
-      // Optionally update details.deviceList
+      //Optionally update details.deviceList
     })
 
     mainWindow.webContents.session.on('hid-device-removed', (event, device) => {
       console.log('hid-device-removed FIRED WITH', device)
-      // Optionally update details.deviceList
+      //Optionally update details.deviceList
     })
 
     event.preventDefault()

docs/fiddles/features/web-hid/renderer.js

@@ -1,4 +1,4 @@
-async function testIt () {
+async function testIt() {
   const grantedDevices = await navigator.hid.getDevices()
   let grantedDeviceList = ''
   grantedDevices.forEach(device => {
@@ -10,10 +10,10 @@ async function testIt () {
   })
 
   grantedDeviceList = ''
-  grantedDevices2.forEach(device => {
+   grantedDevices2.forEach(device => {
     grantedDeviceList += `<hr>${device.productName}</hr>`
   })
   document.getElementById('granted-devices2').innerHTML = grantedDeviceList
 }
 
-document.getElementById('clickme').addEventListener('click', testIt)
+document.getElementById('clickme').addEventListener('click',testIt)

docs/fiddles/features/web-serial/main.js

@@ -1,4 +1,5 @@
-const { app, BrowserWindow } = require('electron')
+const {app, BrowserWindow} = require('electron')
+const path = require('path')
 
 function createWindow () {
   const mainWindow = new BrowserWindow({
@@ -7,24 +8,24 @@ function createWindow () {
   })
 
   mainWindow.webContents.session.on('select-serial-port', (event, portList, webContents, callback) => {
-    // Add listeners to handle ports being added or removed before the callback for `select-serial-port`
-    // is called.
+
+    //Add listeners to handle ports being added or removed before the callback for `select-serial-port`
+    //is called.
     mainWindow.webContents.session.on('serial-port-added', (event, port) => {
       console.log('serial-port-added FIRED WITH', port)
-      // Optionally update portList to add the new port
+      //Optionally update portList to add the new port
     })
 
     mainWindow.webContents.session.on('serial-port-removed', (event, port) => {
       console.log('serial-port-removed FIRED WITH', port)
-      // Optionally update portList to remove the port
+      //Optionally update portList to remove the port
     })
 
     event.preventDefault()
     if (portList && portList.length > 0) {
       callback(portList[0].portId)
     } else {
-      // eslint-disable-next-line standard/no-callback-literal
-      callback('') // Could not find any matching devices
+      callback('') //Could not find any matching devices
     }
   })
 

docs/fiddles/features/web-serial/renderer.js

@@ -1,11 +1,11 @@
-async function testIt () {
+async function testIt() {
   const filters = [
     { usbVendorId: 0x2341, usbProductId: 0x0043 },
     { usbVendorId: 0x2341, usbProductId: 0x0001 }
-  ]
+  ];
   try {
-    const port = await navigator.serial.requestPort({ filters })
-    const portInfo = port.getInfo()
+    const port = await navigator.serial.requestPort({filters});
+    const portInfo = port.getInfo();
     document.getElementById('device-name').innerHTML = `vendorId: ${portInfo.usbVendorId} | productId: ${portInfo.usbProductId} `
   } catch (ex) {
     if (ex.name === 'NotFoundError') {
@@ -16,4 +16,4 @@ async function testIt () {
   }
 }
 
-document.getElementById('clickme').addEventListener('click', testIt)
+document.getElementById('clickme').addEventListener('click',testIt)

docs/fiddles/features/web-usb/main.js

@@ -1,4 +1,5 @@
-const { app, BrowserWindow } = require('electron')
+const {app, BrowserWindow} = require('electron')
+const path = require('path')
 
 function createWindow () {
   const mainWindow = new BrowserWindow({
@@ -9,22 +10,22 @@ function createWindow () {
   let grantedDeviceThroughPermHandler
 
   mainWindow.webContents.session.on('select-usb-device', (event, details, callback) => {
-    // Add events to handle devices being added or removed before the callback on
-    // `select-usb-device` is called.
+    //Add events to handle devices being added or removed before the callback on
+    //`select-usb-device` is called.
     mainWindow.webContents.session.on('usb-device-added', (event, device) => {
       console.log('usb-device-added FIRED WITH', device)
-      // Optionally update details.deviceList
+      //Optionally update details.deviceList
     })
 
     mainWindow.webContents.session.on('usb-device-removed', (event, device) => {
       console.log('usb-device-removed FIRED WITH', device)
-      // Optionally update details.deviceList
+      //Optionally update details.deviceList
     })
 
     event.preventDefault()
     if (details.deviceList && details.deviceList.length > 0) {
-      const deviceToReturn = details.deviceList.find((device) => {
-        if (!grantedDeviceThroughPermHandler || (device.deviceId !== grantedDeviceThroughPermHandler.deviceId)) {
+      const deviceToReturn  = details.deviceList.find((device) => {
+        if (!grantedDeviceThroughPermHandler || (device.deviceId != grantedDeviceThroughPermHandler.deviceId)) {
           return true
         }
       })

docs/fiddles/features/web-usb/renderer.js

@@ -1,8 +1,8 @@
-function getDeviceDetails (device) {
+function getDeviceDetails(device) {
   return device.productName || `Unknown device ${device.deviceId}`
 }
 
-async function testIt () {
+async function testIt() {
   const noDevicesFoundMsg = 'No devices found'
   const grantedDevices = await navigator.usb.getDevices()
   let grantedDeviceList = ''
@@ -20,7 +20,8 @@ async function testIt () {
     const grantedDevice = await navigator.usb.requestDevice({
       filters: []
     })
-    grantedDeviceList += `<hr>${getDeviceDetails(grantedDevice)}</hr>`
+    grantedDeviceList += `<hr>${getDeviceDetails(device)}</hr>`
+
   } catch (ex) {
     if (ex.name === 'NotFoundError') {
       grantedDeviceList = noDevicesFoundMsg
@@ -29,4 +30,4 @@ async function testIt () {
   document.getElementById('granted-devices2').innerHTML = grantedDeviceList
 }
 
-document.getElementById('clickme').addEventListener('click', testIt)
+document.getElementById('clickme').addEventListener('click',testIt)

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

@@ -1,4 +1,4 @@
-const { app, BrowserWindow, ipcMain } = require('electron')
+const {app, BrowserWindow, ipcMain} = require('electron')
 const path = require('path')
 
 function createWindow () {

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

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

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

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

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

@@ -1,10 +1,10 @@
-const { app, BrowserWindow, ipcMain, dialog } = require('electron')
+const {app, BrowserWindow, ipcMain, dialog} = require('electron')
 const path = require('path')
 
-async function handleFileOpen () {
+async function handleFileOpen() {
   const { canceled, filePaths } = await dialog.showOpenDialog()
   if (canceled) {
-
+    return
   } else {
     return filePaths[0]
   }

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

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

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

@@ -1,4 +1,4 @@
-const { app, BrowserWindow, Menu, ipcMain } = require('electron')
+const {app, BrowserWindow, Menu, ipcMain} = require('electron')
 const path = require('path')
 
 function createWindow () {
@@ -12,14 +12,14 @@ function createWindow () {
     {
       label: app.name,
       submenu: [
-        {
-          click: () => mainWindow.webContents.send('update-counter', 1),
-          label: 'Increment'
-        },
-        {
-          click: () => mainWindow.webContents.send('update-counter', -1),
-          label: 'Decrement'
-        }
+      {
+        click: () => mainWindow.webContents.send('update-counter', 1),
+        label: 'Increment',
+      },
+      {
+        click: () => mainWindow.webContents.send('update-counter', -1),
+        label: 'Decrement',
+      }
       ]
     }
 

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

@@ -1,8 +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)
+    const oldValue = Number(counter.innerText)
+    const newValue = oldValue + value
+    counter.innerText = newValue
+    event.sender.send('counter-value', newValue)
 })

docs/fiddles/menus/customize-menus/index.html

@@ -1,128 +1,128 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <title>Customize Menus</title>
-  </head>
-
-  <body>
-    <div>
-      <h1>Customize Menus</h1>
-
-      <h3>
-        The <code>Menu</code> and <code>MenuItem</code> modules can be used to
-        create custom native menus.
-      </h3>
-
-      <p>
-        There are two kinds of menus: the application (top) menu and context
-        (right-click) menu.
-      </p>
-
-      <p>
-        Open the
-        <a href="https://electronjs.org/docs/api/menu"
-          >full API documentation<span
-            >(opens in new window)</span
-          ></a
-        >
-        in your browser.
-      </p>
-    </div>
-
-    <div>
-      <h2>Create an application menu</h2>
-      <div>
-        <div>
-          <p>
-            The <code>Menu</code> and <code>MenuItem</code> modules allow you to
-            customize your application menu. If you don't set any menu, Electron
-            will generate a minimal menu for your app by default.
-          </p>
-
-          <p>
-            If you click the 'View' option in the application menu and then the
-            'App Menu Demo', you'll see an information box displayed.
-          </p>
-
-          <div>
-            <h2>ProTip</h2>
-            <strong>Know operating system menu differences.</strong>
-            <p>
-              When designing an app for multiple operating systems it's
-              important to be mindful of the ways application menu conventions
-              differ on each operating system.
-            </p>
-            <p>
-              For instance, on Windows, accelerators are set with an
-              <code>&</code>. Naming conventions also vary, like between
-              "Settings" or "Preferences". Below are resources for learning
-              operating system specific standards.
-            </p>
-            <ul>
-              <li>
-                <a
-                  href="https://developer.apple.com/macos/human-interface-guidelines/menus/menu-anatomy/"
-                  >macOS<span
-                    >(opens in new window)</span
-                  ></a
-                >
-              </li>
-              <li>
-                <a
-                  href="https://learn.microsoft.com/en-us/previous-versions/windows/desktop/bb226797"
-                  >Windows<span
-                    >(opens in new window)</span
-                  ></a
-                >
-              </li>
-              <li>
-                <a
-                  href="https://developer.gnome.org/hig/stable/menu-bars.html.en"
-                  >Linux<span
-                    >(opens in new window)</span
-                  ></a
-                >
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div>
-      <h2>Create a context menu</h2>
-      <div>
-        <div>
-          <div>
-            <button id="context-menu">View Demo</button>
-          </div>
-          <p>
-            A context, or right-click, menu can be created with the
-            <code>Menu</code> and <code>MenuItem</code> modules as well. You can
-            right-click anywhere in this app or click the demo button to see an
-            example context menu.
-          </p>
-
-          <p>
-            In this demo we use the <code>ipcRenderer</code> module to show the
-            context menu when explicitly calling it from the renderer process.
-          </p>
-          <p>
-            See the full
-            <a
-              href="https://electronjs.org/docs/api/web-contents/#event-context-menu"
-              >context-menu event documentation</a
-            >
-            for all the available properties.
-          </p>
-        </div>
-      </div>
-    </div>
-
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Customize Menus</title>
+  </head>
+
+  <body>
+    <div>
+      <h1>Customize Menus</h1>
+
+      <h3>
+        The <code>Menu</code> and <code>MenuItem</code> modules can be used to
+        create custom native menus.
+      </h3>
+
+      <p>
+        There are two kinds of menus: the application (top) menu and context
+        (right-click) menu.
+      </p>
+
+      <p>
+        Open the
+        <a href="https://electronjs.org/docs/api/menu"
+          >full API documentation<span
+            >(opens in new window)</span
+          ></a
+        >
+        in your browser.
+      </p>
+    </div>
+
+    <div>
+      <h2>Create an application menu</h2>
+      <div>
+        <div>
+          <p>
+            The <code>Menu</code> and <code>MenuItem</code> modules allow you to
+            customize your application menu. If you don't set any menu, Electron
+            will generate a minimal menu for your app by default.
+          </p>
+
+          <p>
+            If you click the 'View' option in the application menu and then the
+            'App Menu Demo', you'll see an information box displayed.
+          </p>
+
+          <div>
+            <h2>ProTip</h2>
+            <strong>Know operating system menu differences.</strong>
+            <p>
+              When designing an app for multiple operating systems it's
+              important to be mindful of the ways application menu conventions
+              differ on each operating system.
+            </p>
+            <p>
+              For instance, on Windows, accelerators are set with an
+              <code>&</code>. Naming conventions also vary, like between
+              "Settings" or "Preferences". Below are resources for learning
+              operating system specific standards.
+            </p>
+            <ul>
+              <li>
+                <a
+                  href="https://developer.apple.com/macos/human-interface-guidelines/menus/menu-anatomy/"
+                  >macOS<span
+                    >(opens in new window)</span
+                  ></a
+                >
+              </li>
+              <li>
+                <a
+                  href="https://learn.microsoft.com/en-us/previous-versions/windows/desktop/bb226797"
+                  >Windows<span
+                    >(opens in new window)</span
+                  ></a
+                >
+              </li>
+              <li>
+                <a
+                  href="https://developer.gnome.org/hig/stable/menu-bars.html.en"
+                  >Linux<span
+                    >(opens in new window)</span
+                  ></a
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <h2>Create a context menu</h2>
+      <div>
+        <div>
+          <div>
+            <button id="context-menu">View Demo</button>
+          </div>
+          <p>
+            A context, or right-click, menu can be created with the
+            <code>Menu</code> and <code>MenuItem</code> modules as well. You can
+            right-click anywhere in this app or click the demo button to see an
+            example context menu.
+          </p>
+
+          <p>
+            In this demo we use the <code>ipcRenderer</code> module to show the
+            context menu when explicitly calling it from the renderer process.
+          </p>
+          <p>
+            See the full
+            <a
+              href="https://electronjs.org/docs/api/web-contents/#event-context-menu"
+              >context-menu event documentation</a
+            >
+            for all the available properties.
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      // You can also require other files to run in this process
+      require("./renderer.js");
+    </script>
+  </body>
+</html>

docs/fiddles/menus/shortcuts/index.html

@@ -1,73 +1,73 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-	<meta charset="UTF-8">
-	<title>Keyboard Shortcuts</title>
-</head>
-
-<body>
-	<div>
-		<h1>Keyboard Shortcuts</h1>
-
-		<h3>The <code>globalShortcut</code> and <code>Menu</code> modules can be used to define keyboard shortcuts.</h3>
-
-		<p>
-			In Electron, keyboard shortcuts are called accelerators.
-			They can be assigned to actions in your application's Menu,
-			or they can be assigned globally so they'll be triggered even when
-			your app doesn't have keyboard focus.
-		</p>
-
-		<p>
-			Open the full documentation for the
-			<a href="https://electronjs.org/docs/api/menu">Menu</a>,
-			<a href="https://electronjs.org/docs/api/accelerator">Accelerator</a>,
-			and
-			<a href="https://electronjs.org/docs/api/global-shortcut">globalShortcut</a>
-			APIs in your browser.
-		</p>
-
-	</div>
-
-	<div>
-		<div>
-			<div>
-				<p>
-					To try this demo, press <kbd>CommandOrControl+Alt+K</kbd> on your
-					keyboard.
-				</p>
-
-				<p>
-					Global shortcuts are detected even when the app doesn't have
-					keyboard focus, and they must be registered after the app's
-					`ready` event is emitted.
-				</p>
-
-				<div>
-					<h2>ProTip</h2>
-					<strong>Avoid overriding system-wide keyboard shortcuts.</strong>
-					<p>
-						When registering global shortcuts, it's important to be aware of
-						existing defaults in the target operating system, so as not to
-						override any existing behaviors. For an overview of each
-						operating system's keyboard shortcuts, view these documents:
-					</p>
-
-					<ul>
-						<li><a
-								href="https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGuidelines/Keyboard.html">macOS</a>
-						</li>
-						<li><a
-								href="http://windows.microsoft.com/en-us/windows-10/keyboard-shortcuts">Windows</a></li>
-						<li><a
-								href="https://developer.gnome.org/hig/stable/keyboard-input.html.en">Linux</a></li>
-					</ul>
-				</div>
-
-			</div>
-		</div>
-	</div>
-</body>
-
-</html>
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="UTF-8">
+	<title>Keyboard Shortcuts</title>
+</head>
+
+<body>
+	<div>
+		<h1>Keyboard Shortcuts</h1>
+
+		<h3>The <code>globalShortcut</code> and <code>Menu</code> modules can be used to define keyboard shortcuts.</h3>
+
+		<p>
+			In Electron, keyboard shortcuts are called accelerators.
+			They can be assigned to actions in your application's Menu,
+			or they can be assigned globally so they'll be triggered even when
+			your app doesn't have keyboard focus.
+		</p>
+
+		<p>
+			Open the full documentation for the
+			<a href="https://electronjs.org/docs/api/menu">Menu</a>,
+			<a href="https://electronjs.org/docs/api/accelerator">Accelerator</a>,
+			and
+			<a href="https://electronjs.org/docs/api/global-shortcut">globalShortcut</a>
+			APIs in your browser.
+		</p>
+
+	</div>
+
+	<div>
+		<div>
+			<div>
+				<p>
+					To try this demo, press <kbd>CommandOrControl+Alt+K</kbd> on your
+					keyboard.
+				</p>
+
+				<p>
+					Global shortcuts are detected even when the app doesn't have
+					keyboard focus, and they must be registered after the app's
+					`ready` event is emitted.
+				</p>
+
+				<div>
+					<h2>ProTip</h2>
+					<strong>Avoid overriding system-wide keyboard shortcuts.</strong>
+					<p>
+						When registering global shortcuts, it's important to be aware of
+						existing defaults in the target operating system, so as not to
+						override any existing behaviors. For an overview of each
+						operating system's keyboard shortcuts, view these documents:
+					</p>
+
+					<ul>
+						<li><a
+								href="https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGuidelines/Keyboard.html">macOS</a>
+						</li>
+						<li><a
+								href="http://windows.microsoft.com/en-us/windows-10/keyboard-shortcuts">Windows</a></li>
+						<li><a
+								href="https://developer.gnome.org/hig/stable/keyboard-input.html.en">Linux</a></li>
+					</ul>
+				</div>
+
+			</div>
+		</div>
+	</div>
+</body>
+
+</html>

docs/fiddles/native-ui/dialogs/error-dialog/index.html

@@ -1,81 +1,81 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <title>Error Dialog</title>
-  </head>
-
-  <body>
-    <div>
-      <h1>Use system dialogs</h1>
-
-      <h3>
-        The <code>dialog</code> module in Electron allows you to use native
-        system dialogs for opening files or directories, saving a file or
-        displaying informational messages.
-      </h3>
-
-      <p>
-        This is a main process module because this process is more efficient
-        with native utilities and it allows the call to happen without
-        interrupting the visible elements in your page's renderer process.
-      </p>
-
-      <p>
-        Open the
-        <a href="https://electronjs.org/docs/api/dialog/">
-          full API documentation (opens in new window)
-          </a>
-        in your browser.
-      </p>
-    </div>
-
-    <div>
-      <div>
-        <h2>Error Dialog</h2>
-        <div>
-          <div>
-            <button id="error-dialog">View Demo</button>
-          </div>
-          <p>
-            In this demo, the <code>ipc</code> module is used to send a message
-            from the renderer process instructing the main process to launch the
-            error dialog.
-          </p>
-
-          <p>
-            You can use an error dialog before the app's
-            <code>ready</code> event, which is useful for showing errors upon
-            startup.
-          </p>
-          <h5>Renderer Process</h5>
-          <pre>
-          <code>
-const {ipcRenderer} = require('electron')
-
-const errorBtn = document.getElementById('error-dialog')
-
-errorBtn.addEventListener('click', (event) => {
-  ipcRenderer.send('open-error-dialog')
-})
-          </code></pre>
-          <h5>Main Process</h5>
-          <pre>
-          <code>
-const {ipcMain, dialog} = require('electron')
-
-ipcMain.on('open-error-dialog', (event) => {
-  dialog.showErrorBox('An Error Message', 'Demonstrating an error message.')
-})
-          </code>
-        </pre>
-        </div>
-      </div>
-    </div>
-
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Error Dialog</title>
+  </head>
+
+  <body>
+    <div>
+      <h1>Use system dialogs</h1>
+
+      <h3>
+        The <code>dialog</code> module in Electron allows you to use native
+        system dialogs for opening files or directories, saving a file or
+        displaying informational messages.
+      </h3>
+
+      <p>
+        This is a main process module because this process is more efficient
+        with native utilities and it allows the call to happen without
+        interrupting the visible elements in your page's renderer process.
+      </p>
+
+      <p>
+        Open the
+        <a href="https://electronjs.org/docs/api/dialog/">
+          full API documentation (opens in new window)
+          </a>
+        in your browser.
+      </p>
+    </div>
+
+    <div>
+      <div>
+        <h2>Error Dialog</h2>
+        <div>
+          <div>
+            <button id="error-dialog">View Demo</button>
+          </div>
+          <p>
+            In this demo, the <code>ipc</code> module is used to send a message
+            from the renderer process instructing the main process to launch the
+            error dialog.
+          </p>
+
+          <p>
+            You can use an error dialog before the app's
+            <code>ready</code> event, which is useful for showing errors upon
+            startup.
+          </p>
+          <h5>Renderer Process</h5>
+          <pre>
+          <code>
+const {ipcRenderer} = require('electron')
+
+const errorBtn = document.getElementById('error-dialog')
+
+errorBtn.addEventListener('click', (event) => {
+  ipcRenderer.send('open-error-dialog')
+})
+          </code></pre>
+          <h5>Main Process</h5>
+          <pre>
+          <code>
+const {ipcMain, dialog} = require('electron')
+
+ipcMain.on('open-error-dialog', (event) => {
+  dialog.showErrorBox('An Error Message', 'Demonstrating an error message.')
+})
+          </code>
+        </pre>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      // You can also require other files to run in this process
+      require("./renderer.js");
+    </script>
+  </body>
+</html>

docs/fiddles/native-ui/dialogs/error-dialog/renderer.js

@@ -15,4 +15,4 @@ Array.prototype.forEach.call(links, (link) => {
       shell.openExternal(url)
     })
   }
-})
+})

docs/fiddles/native-ui/dialogs/information-dialog/index.html

@@ -1,104 +1,104 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <title>Information Dialog</title>
-  </head>
-
-  <body>
-    <div class="section-wrapper">
-      <h1>Use system dialogs</h1>
-
-      <h3>
-        The <code>dialog</code> module in Electron allows you to use native
-        system dialogs for opening files or directories, saving a file or
-        displaying informational messages.
-      </h3>
-
-      <p>
-        This is a main process module because this process is more efficient
-        with native utilities and it allows the call to happen without
-        interrupting the visible elements in your page's renderer process.
-      </p>
-
-      <p>
-        Open the
-        <a href="https://electronjs.org/docs/api/dialog/">
-          full API documentation (opens in new window)
-        </a>
-        in your browser.
-      </p>
-    </div>
-
-    <div>
-      <div>
-        <h2>Information Dialog</h2>
-        <div>
-          <div>
-            <button id="information-dialog">
-              View Demo
-            </button>
-            <span id="info-selection"></span>
-          </div>
-          <p>
-            In this demo, the <code>ipc</code> module is used to send a message
-            from the renderer process instructing the main process to launch the
-            information dialog. Options may be provided for responses which can
-            then be relayed back to the renderer process.
-          </p>
-
-          <p>
-            Note: The <code>title</code> property is not displayed in macOS.
-          </p>
-
-          <p>
-            An information dialog can contain an icon, your choice of buttons,
-            title and message.
-          </p>
-          <h5>Renderer Process</h5>
-          <pre>
-            <code>
-const {ipcRenderer} = require('electron')
-
-const informationBtn = document.getElementById('information-dialog')
-
-informationBtn.addEventListener('click', (event) => {
-  ipcRenderer.send('open-information-dialog')
-})
-
-ipcRenderer.on('information-dialog-selection', (event, index) => {
-  let message = 'You selected '
-  if (index === 0) message += 'yes.'
-  else message += 'no.'
-  document.getElementById('info-selection').innerHTML = message
-})
-            </code>
-          </pre>
-          <h5>Main Process</h5>
-          <pre>
-            <code>
-const {ipcMain, dialog} = require('electron')
-
-ipcMain.on('open-information-dialog', (event) => {
-  const options = {
-    type: 'info',
-    title: 'Information',
-    message: "This is an information dialog. Isn't it nice?",
-    buttons: ['Yes', 'No']
-  }
-  dialog.showMessageBox(options, (index) => {
-    event.sender.send('information-dialog-selection', index)
-  })
-})
-            </code>
-          </pre>
-        </div>
-      </div>
-    </div>
-
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Information Dialog</title>
+  </head>
+
+  <body>
+    <div class="section-wrapper">
+      <h1>Use system dialogs</h1>
+
+      <h3>
+        The <code>dialog</code> module in Electron allows you to use native
+        system dialogs for opening files or directories, saving a file or
+        displaying informational messages.
+      </h3>
+
+      <p>
+        This is a main process module because this process is more efficient
+        with native utilities and it allows the call to happen without
+        interrupting the visible elements in your page's renderer process.
+      </p>
+
+      <p>
+        Open the
+        <a href="https://electronjs.org/docs/api/dialog/">
+          full API documentation (opens in new window)
+        </a>
+        in your browser.
+      </p>
+    </div>
+
+    <div>
+      <div>
+        <h2>Information Dialog</h2>
+        <div>
+          <div>
+            <button id="information-dialog">
+              View Demo
+            </button>
+            <span id="info-selection"></span>
+          </div>
+          <p>
+            In this demo, the <code>ipc</code> module is used to send a message
+            from the renderer process instructing the main process to launch the
+            information dialog. Options may be provided for responses which can
+            then be relayed back to the renderer process.
+          </p>
+
+          <p>
+            Note: The <code>title</code> property is not displayed in macOS.
+          </p>
+
+          <p>
+            An information dialog can contain an icon, your choice of buttons,
+            title and message.
+          </p>
+          <h5>Renderer Process</h5>
+          <pre>
+            <code>
+const {ipcRenderer} = require('electron')
+
+const informationBtn = document.getElementById('information-dialog')
+
+informationBtn.addEventListener('click', (event) => {
+  ipcRenderer.send('open-information-dialog')
+})
+
+ipcRenderer.on('information-dialog-selection', (event, index) => {
+  let message = 'You selected '
+  if (index === 0) message += 'yes.'
+  else message += 'no.'
+  document.getElementById('info-selection').innerHTML = message
+})
+            </code>
+          </pre>
+          <h5>Main Process</h5>
+          <pre>
+            <code>
+const {ipcMain, dialog} = require('electron')
+
+ipcMain.on('open-information-dialog', (event) => {
+  const options = {
+    type: 'info',
+    title: 'Information',
+    message: "This is an information dialog. Isn't it nice?",
+    buttons: ['Yes', 'No']
+  }
+  dialog.showMessageBox(options, (index) => {
+    event.sender.send('information-dialog-selection', index)
+  })
+})
+            </code>
+          </pre>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      // You can also require other files to run in this process
+      require("./renderer.js");
+    </script>
+  </body>
+</html>

docs/fiddles/native-ui/dialogs/information-dialog/main.js

@@ -52,6 +52,7 @@ app.on('activate', function () {
   }
 })
 
+
 ipcMain.on('open-information-dialog', event => {
   const options = {
     type: 'info',
@@ -64,5 +65,6 @@ ipcMain.on('open-information-dialog', event => {
   })
 })
 
+
 // In this file you can include the rest of your app's specific main process
 // code. You can also put them in separate files and require them here.

docs/fiddles/native-ui/dialogs/information-dialog/renderer.js

@@ -22,4 +22,4 @@ Array.prototype.forEach.call(links, (link) => {
       shell.openExternal(url)
     })
   }
-})
+})

docs/fiddles/native-ui/dialogs/open-file-or-directory/index.html

@@ -1,108 +1,108 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <title>Open File or Directory</title>
-  </head>
-
-  <body>
-    <div class="section-wrapper">
-      <h1>Use system dialogs</h1>
-
-      <h3>
-        The <code>dialog</code> module in Electron allows you to use native
-        system dialogs for opening files or directories, saving a file or
-        displaying informational messages.
-      </h3>
-
-      <p>
-        This is a main process module because this process is more efficient
-        with native utilities and it allows the call to happen without
-        interrupting the visible elements in your page's renderer process.
-      </p>
-
-      <p>
-        Open the
-        <a href="https://electronjs.org/docs/api/dialog/">
-          full API documentation (opens in new window)
-        </a>
-        in your browser.
-      </p>
-    </div>
-
-    <div>
-      <div>
-        <h2>Open a File or Directory</h2>
-        <div>
-          <div>
-            <button id="select-directory">View Demo</button>
-            <span id="selected-file"></span>
-          </div>
-          <p>
-            In this demo, the <code>ipc</code> module is used to send a message
-            from the renderer process instructing the main process to launch the
-            open file (or directory) dialog. If a file is selected, the main
-            process can send that information back to the renderer process.
-          </p>
-          <h5>Renderer Process</h5>
-          <pre>
-          <code>
-const {ipcRenderer} = require('electron')
-
-const selectDirBtn = document.getElementById('select-directory')
-
-selectDirBtn.addEventListener('click', (event) => {
-  ipcRenderer.send('open-file-dialog')
-})
-
-ipcRenderer.on('selected-directory', (event, path) => {
-  document.getElementById('selected-file').innerHTML = `You selected: ${path}`
-})
-          </code>
-        </pre>
-          <h5>Main Process</h5>
-          <pre>
-          <code>
-const {ipcMain, dialog} = require('electron')
-
-ipcMain.on('open-file-dialog', (event) => {
-  dialog.showOpenDialog({
-    properties: ['openFile', 'openDirectory']
-  }, (files) => {
-    if (files) {
-      event.sender.send('selected-directory', files)
-    }
-  })
-})
-          </code>
-        </pre>
-
-          <div>
-            <h2>ProTip</h2>
-            <strong>The sheet-style dialog on macOS.</strong>
-            <p>
-              On macOS you can choose between a "sheet" dialog or a default
-              dialog. The sheet version descends from the top of the window. To
-              use sheet version, pass the <code>window</code> as the first
-              argument in the dialog method.
-            </p>
-            <pre><code class="language-js">const ipc = require('electron').ipcMain
-const dialog = require('electron').dialog
-const BrowserWindow = require('electron').BrowserWindow
-
-
-ipc.on('open-file-dialog-sheet', function (event) {
-  const window = BrowserWindow.fromWebContents(event.sender)
-  const files = dialog.showOpenDialog(window, { properties: [ 'openFile' ]})
-})</code></pre>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Open File or Directory</title>
+  </head>
+
+  <body>
+    <div class="section-wrapper">
+      <h1>Use system dialogs</h1>
+
+      <h3>
+        The <code>dialog</code> module in Electron allows you to use native
+        system dialogs for opening files or directories, saving a file or
+        displaying informational messages.
+      </h3>
+
+      <p>
+        This is a main process module because this process is more efficient
+        with native utilities and it allows the call to happen without
+        interrupting the visible elements in your page's renderer process.
+      </p>
+
+      <p>
+        Open the
+        <a href="https://electronjs.org/docs/api/dialog/">
+          full API documentation (opens in new window)
+        </a>
+        in your browser.
+      </p>
+    </div>
+
+    <div>
+      <div>
+        <h2>Open a File or Directory</h2>
+        <div>
+          <div>
+            <button id="select-directory">View Demo</button>
+            <span id="selected-file"></span>
+          </div>
+          <p>
+            In this demo, the <code>ipc</code> module is used to send a message
+            from the renderer process instructing the main process to launch the
+            open file (or directory) dialog. If a file is selected, the main
+            process can send that information back to the renderer process.
+          </p>
+          <h5>Renderer Process</h5>
+          <pre>
+          <code>
+const {ipcRenderer} = require('electron')
+
+const selectDirBtn = document.getElementById('select-directory')
+
+selectDirBtn.addEventListener('click', (event) => {
+  ipcRenderer.send('open-file-dialog')
+})
+
+ipcRenderer.on('selected-directory', (event, path) => {
+  document.getElementById('selected-file').innerHTML = `You selected: ${path}`
+})
+          </code>
+        </pre>
+          <h5>Main Process</h5>
+          <pre>
+          <code>
+const {ipcMain, dialog} = require('electron')
+
+ipcMain.on('open-file-dialog', (event) => {
+  dialog.showOpenDialog({
+    properties: ['openFile', 'openDirectory']
+  }, (files) => {
+    if (files) {
+      event.sender.send('selected-directory', files)
+    }
+  })
+})
+          </code>
+        </pre>
+
+          <div>
+            <h2>ProTip</h2>
+            <strong>The sheet-style dialog on macOS.</strong>
+            <p>
+              On macOS you can choose between a "sheet" dialog or a default
+              dialog. The sheet version descends from the top of the window. To
+              use sheet version, pass the <code>window</code> as the first
+              argument in the dialog method.
+            </p>
+            <pre><code class="language-js">const ipc = require('electron').ipcMain
+const dialog = require('electron').dialog
+const BrowserWindow = require('electron').BrowserWindow
+
+
+ipc.on('open-file-dialog-sheet', function (event) {
+  const window = BrowserWindow.fromWebContents(event.sender)
+  const files = dialog.showOpenDialog(window, { properties: [ 'openFile' ]})
+})</code></pre>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      // You can also require other files to run in this process
+      require("./renderer.js");
+    </script>
+  </body>
+</html>

docs/fiddles/native-ui/dialogs/open-file-or-directory/main.js

@@ -52,6 +52,7 @@ app.on('activate', function () {
   }
 })
 
+
 ipcMain.on('open-file-dialog', event => {
   dialog.showOpenDialog(
     {

docs/fiddles/native-ui/dialogs/save-dialog/index.html

@@ -1,91 +1,91 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <title>Save Dialog</title>
-  </head>
-
-  <body>
-    <div>
-      <h1>Use system dialogs</h1>
-
-      <h3>
-        The <code>dialog</code> module in Electron allows you to use native
-        system dialogs for opening files or directories, saving a file or
-        displaying informational messages.
-      </h3>
-
-      <p>
-        This is a main process module because this process is more efficient
-        with native utilities and it allows the call to happen without
-        interrupting the visible elements in your page's renderer process.
-      </p>
-
-      <p>
-        Open the
-        <a href="https://electronjs.org/docs/api/dialog/">
-          full API documentation (opens in new window)
-        </a>
-        in your browser.
-      </p>
-    </div>
-
-    <div>
-      <div>
-        <h2>Save Dialog</h2>
-        <div>
-          <div>
-            <button button id="save-dialog">View Demo</button>
-            <span id="file-saved"></span>
-          </div>
-          <p>
-            In this demo, the <code>ipc</code> module is used to send a message
-            from the renderer process instructing the main process to launch the
-            save dialog. It returns the path selected by the user which can be
-            relayed back to the renderer process.
-          </p>
-          <h5>Renderer Process</h5>
-          <pre>
-            <code>
-const {ipcRenderer} = require('electron')
-
-const saveBtn = document.getElementById('save-dialog')
-
-saveBtn.addEventListener('click', (event) => {
-  ipcRenderer.send('save-dialog')
-})
-
-ipcRenderer.on('saved-file', (event, path) => {
-  if (!path) path = 'No path'
-  document.getElementById('file-saved').innerHTML = `Path selected: ${path}`
-})
-            </code>
-          </pre>
-          <h5>Main Process</h5>
-          <pre>
-            <code>
-const {ipcMain, dialog} = require('electron')
-
-ipcMain.on('save-dialog', (event) => {
-  const options = {
-    title: 'Save an Image',
-    filters: [
-      { name: 'Images', extensions: ['jpg', 'png', 'gif'] }
-    ]
-  }
-  dialog.showSaveDialog(options, (filename) => {
-    event.sender.send('saved-file', filename)
-  })
-})
-            </code>
-          </pre>
-        </div>
-      </div>
-    </div>
-
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Save Dialog</title>
+  </head>
+
+  <body>
+    <div>
+      <h1>Use system dialogs</h1>
+
+      <h3>
+        The <code>dialog</code> module in Electron allows you to use native
+        system dialogs for opening files or directories, saving a file or
+        displaying informational messages.
+      </h3>
+
+      <p>
+        This is a main process module because this process is more efficient
+        with native utilities and it allows the call to happen without
+        interrupting the visible elements in your page's renderer process.
+      </p>
+
+      <p>
+        Open the
+        <a href="https://electronjs.org/docs/api/dialog/">
+          full API documentation (opens in new window)
+        </a>
+        in your browser.
+      </p>
+    </div>
+
+    <div>
+      <div>
+        <h2>Save Dialog</h2>
+        <div>
+          <div>
+            <button button id="save-dialog">View Demo</button>
+            <span id="file-saved"></span>
+          </div>
+          <p>
+            In this demo, the <code>ipc</code> module is used to send a message
+            from the renderer process instructing the main process to launch the
+            save dialog. It returns the path selected by the user which can be
+            relayed back to the renderer process.
+          </p>
+          <h5>Renderer Process</h5>
+          <pre>
+            <code>
+const {ipcRenderer} = require('electron')
+
+const saveBtn = document.getElementById('save-dialog')
+
+saveBtn.addEventListener('click', (event) => {
+  ipcRenderer.send('save-dialog')
+})
+
+ipcRenderer.on('saved-file', (event, path) => {
+  if (!path) path = 'No path'
+  document.getElementById('file-saved').innerHTML = `Path selected: ${path}`
+})
+            </code>
+          </pre>
+          <h5>Main Process</h5>
+          <pre>
+            <code>
+const {ipcMain, dialog} = require('electron')
+
+ipcMain.on('save-dialog', (event) => {
+  const options = {
+    title: 'Save an Image',
+    filters: [
+      { name: 'Images', extensions: ['jpg', 'png', 'gif'] }
+    ]
+  }
+  dialog.showSaveDialog(options, (filename) => {
+    event.sender.send('saved-file', filename)
+  })
+})
+            </code>
+          </pre>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      // You can also require other files to run in this process
+      require("./renderer.js");
+    </script>
+  </body>
+</html>

docs/fiddles/native-ui/dialogs/save-dialog/renderer.js

@@ -20,4 +20,4 @@ Array.prototype.forEach.call(links, (link) => {
       shell.openExternal(url)
     })
   }
-})
+})

docs/fiddles/native-ui/drag-and-drop/index.html

@@ -1,76 +1,76 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <title>Drag and drop files</title>
-  </head>
-
-  <body>
-    <div>
-      <h1>Drag and drop files</h1>
-      <div>Supports: Win, macOS, Linux <span>|</span> Process: Both</div>
-      <h3>
-        Electron supports dragging files and content out from web content into
-        the operating system's world.
-      </h3>
-
-      <p>
-        Open the
-        <a href="https://electronjs.org/docs/tutorial/native-file-drag-drop">
-          full API documentation (opens in new window)
-        </a>
-        in your browser.
-      </p>
-    </div>
-
-    <div>
-      <div>
-        <h2>Dragging files</h2>
-        <div>
-          <div>
-            <a href="#" id="drag-file-link">Drag Demo</a>
-          </div>
-          <p>
-            Click and drag the link above to copy the renderer process
-            javascript file on to your machine.
-          </p>
-
-          <p>
-            In this demo, the <code>webContents.startDrag()</code> API is called
-            in response to the <code>ondragstart</code> event.
-          </p>
-          <h5>Renderer Process</h5>
-          <pre><code>
-const {ipcRenderer} = require('electron')
-
-const dragFileLink = document.getElementById('drag-file-link')
-
-dragFileLink.addEventListener('dragstart', (event) => {
-  event.preventDefault()
-  ipcRenderer.send('ondragstart', __filename)
-})
-        </code></pre>
-          <h5>Main Process</h5>
-          <pre>
-            <code>
-const {ipcMain} = require('electron')
-const path = require('path')
-
-ipcMain.on('ondragstart', (event, filepath) => {
-  const iconName = 'codeIcon.png'
-  event.sender.startDrag({
-    file: filepath,
-    icon: path.join(__dirname, iconName)
-  })
-})
-            </code></pre>
-        </div>
-      </div>
-    </div>
-
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Drag and drop files</title>
+  </head>
+
+  <body>
+    <div>
+      <h1>Drag and drop files</h1>
+      <div>Supports: Win, macOS, Linux <span>|</span> Process: Both</div>
+      <h3>
+        Electron supports dragging files and content out from web content into
+        the operating system's world.
+      </h3>
+
+      <p>
+        Open the
+        <a href="https://electronjs.org/docs/tutorial/native-file-drag-drop">
+          full API documentation (opens in new window)
+        </a>
+        in your browser.
+      </p>
+    </div>
+
+    <div>
+      <div>
+        <h2>Dragging files</h2>
+        <div>
+          <div>
+            <a href="#" id="drag-file-link">Drag Demo</a>
+          </div>
+          <p>
+            Click and drag the link above to copy the renderer process
+            javascript file on to your machine.
+          </p>
+
+          <p>
+            In this demo, the <code>webContents.startDrag()</code> API is called
+            in response to the <code>ondragstart</code> event.
+          </p>
+          <h5>Renderer Process</h5>
+          <pre><code>
+const {ipcRenderer} = require('electron')
+
+const dragFileLink = document.getElementById('drag-file-link')
+
+dragFileLink.addEventListener('dragstart', (event) => {
+  event.preventDefault()
+  ipcRenderer.send('ondragstart', __filename)
+})
+        </code></pre>
+          <h5>Main Process</h5>
+          <pre>
+            <code>
+const {ipcMain} = require('electron')
+const path = require('path')
+
+ipcMain.on('ondragstart', (event, filepath) => {
+  const iconName = 'codeIcon.png'
+  event.sender.startDrag({
+    file: filepath,
+    icon: path.join(__dirname, iconName)
+  })
+})
+            </code></pre>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      // You can also require other files to run in this process
+      require("./renderer.js");
+    </script>
+  </body>
+</html>

docs/fiddles/native-ui/external-links-file-manager/external-links/renderer.js

@@ -5,3 +5,17 @@ const exLinksBtn = document.getElementById('open-ex-links')
 exLinksBtn.addEventListener('click', (event) => {
   shell.openExternal('https://electronjs.org')
 })
+
+const OpenAllOutboundLinks = () => {
+  const links = document.querySelectorAll('a[href]')
+
+  Array.prototype.forEach.call(links, (link) => {
+    const url = link.getAttribute('href')
+    if (url.indexOf('http') === 0) {
+      link.addEventListener('click', (e) => {
+        e.preventDefault()
+        shell.openExternal(url)
+      })
+    }
+  })
+}

docs/fiddles/native-ui/external-links-file-manager/index.html

@@ -1,104 +1,104 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <title>Open external links and the file manager</title>
-  </head>
-  <body>
-    <div>
-      <h1>
-        Open external links and the file manager
-      </h1>
-      <h3>
-        The <code>shell</code> module in Electron allows you to access certain
-        native elements like the file manager and default web browser.
-      </h3>
-
-      <p>This module works in both the main and renderer process.</p>
-      <p>
-        Open the
-        <a href="https://electronjs.org/docs/api/shell">
-          full API documentation (opens in new window)
-        </a>
-        in your browser.
-      </p>
-    </div>
-
-    <div>
-      <div>
-        <h2>Open Path in File Manager</h2>
-        <div>
-          <div>
-            <button id="open-file-manager">
-              View Demo
-            </button>
-          </div>
-          <p>
-            This demonstrates using the <code>shell</code> module to open the
-            system file manager at a particular location.
-          </p>
-          <p>
-            Clicking the demo button will open your file manager at the root.
-          </p>
-        </div>
-      </div>
-    </div>
-
-    <div>
-      <div>
-        <h2>Open External Links</h2>
-        <div>
-          <div>
-            <button id="open-ex-links">View Demo</button>
-          </div>
-          <p>
-            If you do not want your app to open website links
-            <em>within</em> the app, you can use the <code>shell</code> module
-            to open them externally. When clicked, the links will open outside
-            of your app and in the user's default web browser.
-          </p>
-          <p>
-            When the demo button is clicked, the electron website will open in
-            your browser.
-          </p>
-          <p></p>
-
-          <div>
-            <h2>ProTip</h2>
-            <strong>Open all outbound links externally.</strong>
-            <p>
-              You may want to open all <code>http</code> and
-              <code>https</code> links outside of your app. To do this, query
-              the document and loop through each link and add a listener. This
-              app uses the code below which is located in
-              <code>assets/ex-links.js</code>.
-            </p>
-            <h5>Renderer Process</h5>
-            <pre>
-                <code>
-const shell = require('electron').shell
-
-const links = document.querySelectorAll('a[href]')
-
-Array.prototype.forEach.call(links, (link) => {
-  const url = link.getAttribute('href')
-  if (url.indexOf('http') === 0) {
-    link.addEventListener('click', (e) => {
-      e.preventDefault()
-      shell.openExternal(url)
-    })
-  }
-})
-                </code>
-              </pre>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Open external links and the file manager</title>
+  </head>
+  <body>
+    <div>
+      <h1>
+        Open external links and the file manager
+      </h1>
+      <h3>
+        The <code>shell</code> module in Electron allows you to access certain
+        native elements like the file manager and default web browser.
+      </h3>
+
+      <p>This module works in both the main and renderer process.</p>
+      <p>
+        Open the
+        <a href="https://electronjs.org/docs/api/shell">
+          full API documentation (opens in new window)
+        </a>
+        in your browser.
+      </p>
+    </div>
+
+    <div>
+      <div>
+        <h2>Open Path in File Manager</h2>
+        <div>
+          <div>
+            <button id="open-file-manager">
+              View Demo
+            </button>
+          </div>
+          <p>
+            This demonstrates using the <code>shell</code> module to open the
+            system file manager at a particular location.
+          </p>
+          <p>
+            Clicking the demo button will open your file manager at the root.
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <div>
+        <h2>Open External Links</h2>
+        <div>
+          <div>
+            <button id="open-ex-links">View Demo</button>
+          </div>
+          <p>
+            If you do not want your app to open website links
+            <em>within</em> the app, you can use the <code>shell</code> module
+            to open them externally. When clicked, the links will open outside
+            of your app and in the user's default web browser.
+          </p>
+          <p>
+            When the demo button is clicked, the electron website will open in
+            your browser.
+          </p>
+          <p></p>
+
+          <div>
+            <h2>ProTip</h2>
+            <strong>Open all outbound links externally.</strong>
+            <p>
+              You may want to open all <code>http</code> and
+              <code>https</code> links outside of your app. To do this, query
+              the document and loop through each link and add a listener. This
+              app uses the code below which is located in
+              <code>assets/ex-links.js</code>.
+            </p>
+            <h5>Renderer Process</h5>
+            <pre>
+                <code>
+const shell = require('electron').shell
+
+const links = document.querySelectorAll('a[href]')
+
+Array.prototype.forEach.call(links, (link) => {
+  const url = link.getAttribute('href')
+  if (url.indexOf('http') === 0) {
+    link.addEventListener('click', (e) => {
+      e.preventDefault()
+      shell.openExternal(url)
+    })
+  }
+})
+                </code>
+              </pre>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      // You can also require other files to run in this process
+      require("./renderer.js");
+    </script>
+  </body>
+</html>

docs/fiddles/native-ui/notifications/index.html

@@ -1,67 +1,67 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <title>Desktop notifications</title>
-  </head>
-  <body>
-    <div>
-      <h1>Desktop notifications</h1>
-      <h3>
-        The <code>notification</code> module in Electron allows you to add basic
-        desktop notifications.
-      </h3>
-
-      <p>
-        Electron conveniently allows developers to send notifications with the
-        <a href="https://notifications.spec.whatwg.org/">HTML5 Notification API</a>,
-        using the currently running operating system’s native notification
-        APIs to display it.
-      </p>
-
-      <p>
-        <b>Note:</b> Since this is an HTML5 API it is only available in the
-        renderer process.
-      </p>
-
-      <p>
-        Open the
-        <a href="https://electronjs.org/docs/all/#notifications-windows-linux-macos">
-          full API documentation<span>(opens in new window)</span>
-        </a>
-        in your browser.
-      </p>
-    </div>
-
-    <div>
-      <div>
-        <h2>Basic notification</h2>
-        <div>
-          <div>
-            <button id="basic-noti">View demo</button>
-          </div>
-          <p>This demo demonstrates a basic notification. Text only.</p>
-        </div>
-      </div>
-    </div>
-
-    <div>
-      <div>
-        <h2>Notification with image</h2>
-        <div>
-          <div>
-            <button id="advanced-noti">View demo</button>
-          </div>
-          <p>
-            This demo demonstrates a basic notification. Both text and a image
-          </p>
-        </div>
-      </div>
-    </div>
-
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Desktop notifications</title>
+  </head>
+  <body>
+    <div>
+      <h1>Desktop notifications</h1>
+      <h3>
+        The <code>notification</code> module in Electron allows you to add basic
+        desktop notifications.
+      </h3>
+
+      <p>
+        Electron conveniently allows developers to send notifications with the
+        <a href="https://notifications.spec.whatwg.org/">HTML5 Notification API</a>,
+        using the currently running operating system’s native notification
+        APIs to display it.
+      </p>
+
+      <p>
+        <b>Note:</b> Since this is an HTML5 API it is only available in the
+        renderer process.
+      </p>
+
+      <p>
+        Open the
+        <a href="https://electronjs.org/docs/all/#notifications-windows-linux-macos">
+          full API documentation<span>(opens in new window)</span>
+        </a>
+        in your browser.
+      </p>
+    </div>
+
+    <div>
+      <div>
+        <h2>Basic notification</h2>
+        <div>
+          <div>
+            <button id="basic-noti">View demo</button>
+          </div>
+          <p>This demo demonstrates a basic notification. Text only.</p>
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <div>
+        <h2>Notification with image</h2>
+        <div>
+          <div>
+            <button id="advanced-noti">View demo</button>
+          </div>
+          <p>
+            This demo demonstrates a basic notification. Both text and a image
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      // You can also require other files to run in this process
+      require("./renderer.js");
+    </script>
+  </body>
+</html>

docs/fiddles/native-ui/tray/index.html

@@ -1,47 +1,47 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <title>Tray</title>
-  </head>
-  <body>
-    <div>
-      <h1>Tray</h1>
-      <h3>
-        The <code>tray</code> module allows you to create an icon in the
-        operating system's notification area.
-      </h3>
-      <p>This icon can also have a context menu attached.</p>
-
-      <p>
-        Open the
-        <a href="https://electronjs.org/docs/api/tray">
-          full API documentation
-        </a>
-        in your browser.
-      </p>
-    </div>
-      <div>
-          <div>
-            <h2>ProTip</h2>
-            <strong>Tray support in Linux.</strong>
-            <p>
-              On Linux distributions that only have app indicator support, users
-              will need to install <code>libappindicator1</code> to make the
-              tray icon work. See the
-              <a href="https://electronjs.org/docs/api/tray">
-                full API documentation
-              </a>
-              for more details about using Tray on Linux.
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Tray</title>
+  </head>
+  <body>
+    <div>
+      <h1>Tray</h1>
+      <h3>
+        The <code>tray</code> module allows you to create an icon in the
+        operating system's notification area.
+      </h3>
+      <p>This icon can also have a context menu attached.</p>
+
+      <p>
+        Open the
+        <a href="https://electronjs.org/docs/api/tray">
+          full API documentation
+        </a>
+        in your browser.
+      </p>
+    </div>
+      <div>
+          <div>
+            <h2>ProTip</h2>
+            <strong>Tray support in Linux.</strong>
+            <p>
+              On Linux distributions that only have app indicator support, users
+              will need to install <code>libappindicator1</code> to make the
+              tray icon work. See the
+              <a href="https://electronjs.org/docs/api/tray">
+                full API documentation
+              </a>
+              for more details about using Tray on Linux.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      // You can also require other files to run in this process
+      require("./renderer.js");
+    </script>
+  </body>
+</html>

docs/fiddles/quick-start/main.js

@@ -28,3 +28,4 @@ app.on('window-all-closed', () => {
     app.quit()
   }
 })
+

docs/fiddles/quick-start/preload.js

@@ -8,3 +8,4 @@ window.addEventListener('DOMContentLoaded', () => {
     replaceText(`${type}-version`, process.versions[type])
   }
 })
+

docs/fiddles/system/clipboard/copy/renderer.js

@@ -4,5 +4,5 @@ const copyInput = document.getElementById('copy-to-input')
 copyBtn.addEventListener('click', () => {
   if (copyInput.value !== '') copyInput.value = ''
   copyInput.placeholder = 'Copied! Paste here to see.'
-  window.clipboard.writeText('Electron Demo!')
+  clipboard.writeText('Electron Demo!')
 })

docs/fiddles/system/clipboard/paste/renderer.js

@@ -1,7 +1,7 @@
 const pasteBtn = document.getElementById('paste-to')
 
 pasteBtn.addEventListener('click', async () => {
-  await window.clipboard.writeText('What a demo!')
-  const message = `Clipboard contents: ${await window.clipboard.readText()}`
+  await clipboard.writeText('What a demo!')
+  const message = `Clipboard contents: ${await clipboard.readText()}`
   document.getElementById('paste-from').innerHTML = message
 })

docs/fiddles/system/protocol-handler/launch-app-from-URL-in-another-app/main.js

@@ -2,14 +2,14 @@
 const { app, BrowserWindow, ipcMain, shell, dialog } = require('electron')
 const path = require('path')
 
-let mainWindow
+let mainWindow;
 
 if (process.defaultApp) {
   if (process.argv.length >= 2) {
     app.setAsDefaultProtocolClient('electron-fiddle', process.execPath, [path.resolve(process.argv[1])])
   }
 } else {
-  app.setAsDefaultProtocolClient('electron-fiddle')
+    app.setAsDefaultProtocolClient('electron-fiddle')
 }
 
 const gotTheLock = app.requestSingleInstanceLock()
@@ -24,7 +24,7 @@ if (!gotTheLock) {
       mainWindow.focus()
     }
 
-    dialog.showErrorBox('Welcome Back', `You arrived from: ${commandLine.pop().slice(0, -1)}`)
+    dialog.showErrorBox('Welcome Back', `You arrived from: ${commandLine.pop().slice(0,-1)}`)
   })
 
   // Create mainWindow, load the rest of the app, etc...
@@ -43,7 +43,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      preload: path.join(__dirname, 'preload.js')
+      preload: path.join(__dirname, 'preload.js'),
     }
   })
 

docs/fiddles/system/protocol-handler/launch-app-from-URL-in-another-app/preload.js

@@ -6,6 +6,6 @@ const { contextBridge, ipcRenderer } = require('electron')
 contextBridge.exposeInMainWorld(
   'shell',
   {
-    open: () => ipcRenderer.send('shell:open')
+    open: () => ipcRenderer.send('shell:open'),
   }
-)
+)

docs/fiddles/system/protocol-handler/launch-app-from-URL-in-another-app/renderer.js

@@ -4,5 +4,5 @@
 
 // Binds the buttons to the context bridge API.
 document.getElementById('open-in-browser').addEventListener('click', () => {
-  window.shell.open()
-})
+  shell.open();
+});

docs/fiddles/system/system-app-user-information/app-information/main.js

@@ -1,5 +1,5 @@
-const { app, ipcMain } = require('electron')
+const {app, ipcMain} = require('electron')
 
 ipcMain.on('get-app-path', (event) => {
   event.sender.send('got-app-path', app.getAppPath())
-})
+})

docs/fiddles/system/system-app-user-information/app-information/renderer.js

@@ -1,7 +1,7 @@
-const { ipcRenderer, shell } = require('electron')
+const {ipcRenderer} = require('electron')
 
 const appInfoBtn = document.getElementById('app-info')
-const electronDocLink = document.querySelectorAll('a[href]')
+const electron_doc_link = document.querySelectorAll('a[href]')
 
 appInfoBtn.addEventListener('click', () => {
   ipcRenderer.send('get-app-path')
@@ -12,8 +12,7 @@ ipcRenderer.on('got-app-path', (event, path) => {
   document.getElementById('got-app-info').innerHTML = message
 })
 
-electronDocLink.addEventListener('click', (e) => {
+electron_doc_link.addEventListener('click', (e) => {
   e.preventDefault()
-  const url = e.target.getAttribute('href')
   shell.openExternal(url)
-})
+})

docs/fiddles/tutorial-first-app/main.js

@@ -1,26 +1,26 @@
-const { app, BrowserWindow } = require('electron')
+const { app, BrowserWindow } = require('electron');
 
 const createWindow = () => {
   const win = new BrowserWindow({
     width: 800,
-    height: 600
-  })
+    height: 600,
+  });
 
-  win.loadFile('index.html')
-}
+  win.loadFile('index.html');
+};
 
 app.whenReady().then(() => {
-  createWindow()
+  createWindow();
 
   app.on('activate', () => {
     if (BrowserWindow.getAllWindows().length === 0) {
-      createWindow()
+      createWindow();
     }
-  })
-})
+  });
+});
 
 app.on('window-all-closed', () => {
   if (process.platform !== 'darwin') {
-    app.quit()
+    app.quit();
   }
-})
+});

docs/fiddles/tutorial-preload/main.js

@@ -1,30 +1,30 @@
-const { app, BrowserWindow } = require('electron')
-const path = require('path')
+const { app, BrowserWindow } = require('electron');
+const path = require('path');
 
 const createWindow = () => {
   const win = new BrowserWindow({
     width: 800,
     height: 600,
     webPreferences: {
-      preload: path.join(__dirname, 'preload.js')
-    }
-  })
+      preload: path.join(__dirname, 'preload.js'),
+    },
+  });
 
-  win.loadFile('index.html')
-}
+  win.loadFile('index.html');
+};
 
 app.whenReady().then(() => {
-  createWindow()
+  createWindow();
 
   app.on('activate', () => {
     if (BrowserWindow.getAllWindows().length === 0) {
-      createWindow()
+      createWindow();
     }
-  })
-})
+  });
+});
 
 app.on('window-all-closed', () => {
   if (process.platform !== 'darwin') {
-    app.quit()
+    app.quit();
   }
-})
+});

docs/fiddles/tutorial-preload/preload.js

@@ -1,7 +1,7 @@
-const { contextBridge } = require('electron')
+const { contextBridge } = require('electron');
 
 contextBridge.exposeInMainWorld('versions', {
   node: () => process.versions.node,
   chrome: () => process.versions.chrome,
-  electron: () => process.versions.electron
-})
+  electron: () => process.versions.electron,
+});

docs/fiddles/tutorial-preload/renderer.js

@@ -1,2 +1,2 @@
-const information = document.getElementById('info')
-information.innerText = `This app is using Chrome (v${window.versions.chrome()}), Node.js (v${window.versions.node()}), and Electron (v${window.versions.electron()})`
+const information = document.getElementById('info');
+information.innerText = `This app is using Chrome (v${versions.chrome()}), Node.js (v${versions.node()}), and Electron (v${versions.electron()})`;

docs/fiddles/windows/manage-windows/create-frameless-window/main.js

@@ -1,6 +1,6 @@
 const { app, BrowserWindow, ipcMain } = require('electron')
 
-ipcMain.on('create-frameless-window', (event, { url }) => {
+ipcMain.on('create-frameless-window', (event, {url}) => {
   const win = new BrowserWindow({ frame: false })
   win.loadURL(url)
 })

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

@@ -1,77 +1,77 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <title>Frameless window</title>
-  </head>
-
-  <body>
-    <div>
-      <h1>Create and Manage Windows</h1>
-
-      <h3>
-        The <code>BrowserWindow</code> module in Electron allows you to create a
-        new browser window or manage an existing one.
-      </h3>
-
-      <p>
-        Each browser window is a separate process, known as the renderer
-        process. This process, like the main process that controls the life
-        cycle of the app, has full access to the Node.js APIs.
-      </p>
-
-      <p>
-        Open the
-        <a href="https://electronjs.org/docs/api/browser-window">
-          full API documentation (opens in new window)
-        </a>
-        in your browser.
-      </p>
-    </div>
-
-    <div>
-      <div>
-        <h2>Create a frameless window</h2>
-        <div>
-          <div>
-            <button id="frameless-window">View Demo</button>
-          </div>
-          <p>
-            A frameless window is a window that has no
-            <a href="https://developer.mozilla.org/en-US/docs/Glossary/Chrome">
-              "chrome"
-            </a>
-            , such as toolbars, title bars, status bars, borders, etc. You can
-            make a browser window frameless by setting <code>frame</code> to
-            <code>false</code> when creating the window.
-          </p>
-
-          <p>
-            Windows can have a transparent background, too. By setting the
-            <code>transparent</code> option to <code>true</code>, you can also
-            make your frameless window transparent:
-          </p>
-          <pre>
-<code class="language-js">var win = new BrowserWindow({
-  transparent: true,
-  frame: false
-})</code></pre>
-
-          <p>
-            For more details, see the
-            <a href="https://electronjs.org/docs/tutorial/window-customization/">
-              Window Customization
-
-            </a>
-            documentation.
-          </p>
-        </div>
-      </div>
-    </div>
-
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Frameless window</title>
+  </head>
+
+  <body>
+    <div>
+      <h1>Create and Manage Windows</h1>
+
+      <h3>
+        The <code>BrowserWindow</code> module in Electron allows you to create a
+        new browser window or manage an existing one.
+      </h3>
+
+      <p>
+        Each browser window is a separate process, known as the renderer
+        process. This process, like the main process that controls the life
+        cycle of the app, has full access to the Node.js APIs.
+      </p>
+
+      <p>
+        Open the
+        <a href="https://electronjs.org/docs/api/browser-window">
+          full API documentation (opens in new window)
+        </a>
+        in your browser.
+      </p>
+    </div>
+
+    <div>
+      <div>
+        <h2>Create a frameless window</h2>
+        <div>
+          <div>
+            <button id="frameless-window">View Demo</button>
+          </div>
+          <p>
+            A frameless window is a window that has no
+            <a href="https://developer.mozilla.org/en-US/docs/Glossary/Chrome">
+              "chrome"
+            </a>
+            , such as toolbars, title bars, status bars, borders, etc. You can
+            make a browser window frameless by setting <code>frame</code> to
+            <code>false</code> when creating the window.
+          </p>
+
+          <p>
+            Windows can have a transparent background, too. By setting the
+            <code>transparent</code> option to <code>true</code>, you can also
+            make your frameless window transparent:
+          </p>
+          <pre>
+<code class="language-js">var win = new BrowserWindow({
+  transparent: true,
+  frame: false
+})</code></pre>
+
+          <p>
+            For more details, see the
+            <a href="https://electronjs.org/docs/tutorial/window-customization/">
+              Window Customization
+
+            </a>
+            documentation.
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      // You can also require other files to run in this process
+      require("./renderer.js");
+    </script>
+  </body>
+</html>

docs/fiddles/windows/manage-windows/frameless-window/main.js

@@ -1,7 +1,7 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain } = require('electron')
+const { app, BrowserWindow } = require('electron')
 
-ipcMain.on('create-frameless-window', (event, { url }) => {
+ipcMain.on('create-frameless-window', (event, {url}) => {
   const win = new BrowserWindow({ frame: false })
   win.loadURL(url)
 })
@@ -23,21 +23,23 @@ function createWindow () {
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
-app.whenReady().then(() => {
-  createWindow()
+app.whenReady().then(createWindow)
 
-  app.on('activate', function () {
-    // On macOS it's common to re-create a window in the app when the
-    // dock icon is clicked and there are no other windows open.
-    if (BrowserWindow.getAllWindows().length === 0) createWindow()
-  })
+// Quit when all windows are closed.
+app.on('window-all-closed', function () {
+  // On macOS it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
 })
 
-// Quit when all windows are closed, except on macOS. There, it's common
-// for applications and their menu bar to stay active until the user quits
-// explicitly with Cmd + Q.
-app.on('window-all-closed', function () {
-  if (process.platform !== 'darwin') app.quit()
+app.on('activate', function () {
+  // On macOS it is common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (mainWindow === null) {
+    createWindow()
+  }
 })
 
 // In this file you can include the rest of your app's specific main process

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

@@ -1,64 +1,64 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <title>Manage window state</title>
-  </head>
-
-  <body>
-    <div>
-      <h1>Create and Manage Windows</h1>
-
-      <h3>
-        The <code>BrowserWindow</code> module in Electron allows you to create a
-        new browser window or manage an existing one.
-      </h3>
-
-      <p>
-        Each browser window is a separate process, known as the renderer
-        process. This process, like the main process that controls the life
-        cycle of the app, has full access to the Node.js APIs.
-      </p>
-
-      <p>
-        Open the
-        <a href="https://electronjs.org/docs/api/browser-window">
-          full API documentation (opens in new window)
-        </a>
-        in your browser.
-      </p>
-    </div>
-
-    <div>
-      <div>
-        <h2>Manage window state</h2>
-        <div>
-          <div>
-            <button id="manage-window">View Demo</button>
-            <span id="manage-window-reply"></span>
-          </div>
-          <p>
-            In this demo we create a new window and listen for
-            <code>move</code> and <code>resize</code> events on it. Click the
-            demo button, change the new window and see the dimensions and
-            position update here, above.
-          </p>
-          <p>
-            There are a lot of methods for controlling the state of the window
-            such as the size, location, and focus status as well as events to
-            listen to for window changes. Visit the
-            <a href="https://electronjs.org/docs/api/browser-window">
-              documentation (opens in new window)
-            </a>
-            for the full list.
-          </p>
-        </div>
-      </div>
-    </div>
-
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Manage window state</title>
+  </head>
+
+  <body>
+    <div>
+      <h1>Create and Manage Windows</h1>
+
+      <h3>
+        The <code>BrowserWindow</code> module in Electron allows you to create a
+        new browser window or manage an existing one.
+      </h3>
+
+      <p>
+        Each browser window is a separate process, known as the renderer
+        process. This process, like the main process that controls the life
+        cycle of the app, has full access to the Node.js APIs.
+      </p>
+
+      <p>
+        Open the
+        <a href="https://electronjs.org/docs/api/browser-window">
+          full API documentation (opens in new window)
+        </a>
+        in your browser.
+      </p>
+    </div>
+
+    <div>
+      <div>
+        <h2>Manage window state</h2>
+        <div>
+          <div>
+            <button id="manage-window">View Demo</button>
+            <span id="manage-window-reply"></span>
+          </div>
+          <p>
+            In this demo we create a new window and listen for
+            <code>move</code> and <code>resize</code> events on it. Click the
+            demo button, change the new window and see the dimensions and
+            position update here, above.
+          </p>
+          <p>
+            There are a lot of methods for controlling the state of the window
+            such as the size, location, and focus status as well as events to
+            listen to for window changes. Visit the
+            <a href="https://electronjs.org/docs/api/browser-window">
+              documentation (opens in new window)
+            </a>
+            for the full list.
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      // You can also require other files to run in this process
+      require("./renderer.js");
+    </script>
+  </body>
+</html>

docs/fiddles/windows/manage-windows/manage-window-state/main.js

@@ -4,7 +4,7 @@ const { app, BrowserWindow, ipcMain } = require('electron')
 ipcMain.on('create-demo-window', (event) => {
   const win = new BrowserWindow({ width: 400, height: 275 })
 
-  function updateReply () {
+  function updateReply() {
     event.sender.send('bounds-changed', {
       size: win.getSize(),
       position: win.getPosition()
@@ -18,7 +18,7 @@ ipcMain.on('create-demo-window', (event) => {
 
 function createWindow () {
   // Create the browser window.
-  const mainWindow = new BrowserWindow({
+  mainWindow = new BrowserWindow({
     width: 800,
     height: 600,
     webPreferences: {
@@ -33,21 +33,23 @@ function createWindow () {
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
-app.whenReady().then(() => {
-  createWindow()
+app.whenReady().then(createWindow)
 
-  app.on('activate', function () {
-    // On macOS it's common to re-create a window in the app when the
-    // dock icon is clicked and there are no other windows open.
-    if (BrowserWindow.getAllWindows().length === 0) createWindow()
-  })
+// Quit when all windows are closed.
+app.on('window-all-closed', function () {
+  // On macOS it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
 })
 
-// Quit when all windows are closed, except on macOS. There, it's common
-// for applications and their menu bar to stay active until the user quits
-// explicitly with Cmd + Q.
-app.on('window-all-closed', function () {
-  if (process.platform !== 'darwin') app.quit()
+app.on('activate', function () {
+  // On macOS it is common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (mainWindow === null) {
+    createWindow()
+  }
 })
 
 // In this file you can include the rest of your app's specific main process

docs/fiddles/windows/manage-windows/new-window/main.js

@@ -23,21 +23,23 @@ function createWindow () {
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
-app.whenReady().then(() => {
-  createWindow()
+app.whenReady().then(createWindow)
 
-  app.on('activate', function () {
-    // On macOS it's common to re-create a window in the app when the
-    // dock icon is clicked and there are no other windows open.
-    if (BrowserWindow.getAllWindows().length === 0) createWindow()
-  })
+// Quit when all windows are closed.
+app.on('window-all-closed', function () {
+  // On macOS it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
 })
 
-// Quit when all windows are closed, except on macOS. There, it's common
-// for applications and their menu bar to stay active until the user quits
-// explicitly with Cmd + Q.
-app.on('window-all-closed', function () {
-  if (process.platform !== 'darwin') app.quit()
+app.on('activate', function () {
+  // On macOS it is common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (mainWindow === null) {
+    createWindow()
+  }
 })
 
 // In this file you can include the rest of your app's specific main process

docs/fiddles/windows/manage-windows/new-window/renderer.js

@@ -5,10 +5,10 @@ const link = document.getElementById('browser-window-link')
 
 newWindowBtn.addEventListener('click', (event) => {
   const url = 'https://electronjs.org'
-  ipcRenderer.send('new-window', { url, width: 400, height: 320 })
+  ipcRenderer.send('new-window', { url, width: 400, height: 320 });
 })
 
 link.addEventListener('click', (e) => {
   e.preventDefault()
-  shell.openExternal('https://electronjs.org/docs/api/browser-window')
+  shell.openExternal("https://electronjs.org/docs/api/browser-window")
 })

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

@@ -1,58 +1,58 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <title>Window events</title>
-  </head>
-
-  <body>
-    <div>
-      <h1>Create and Manage Windows</h1>
-
-      <h3>
-        The <code>BrowserWindow</code> module in Electron allows you to create a
-        new browser window or manage an existing one.
-      </h3>
-
-      <p>
-        Each browser window is a separate process, known as the renderer
-        process. This process, like the main process that controls the life
-        cycle of the app, has full access to the Node.js APIs.
-      </p>
-
-      <p>
-        Open the
-        <a href="https://electronjs.org/docs/api/browser-window">
-          full API documentation (opens in new window)
-        </a>
-        in your browser.
-      </p>
-    </div>
-
-    <div>
-      <div>
-        <h2>Window events</h2>
-        <div>
-          <div>
-            <button id="listen-to-window">View Demo</button>
-            <button id="focus-on-modal-window">
-              Focus on Demo
-            </button>
-          </div>
-          <p>
-            In this demo, we create a new window and listen for
-            <code>blur</code> event on it. Click the demo button to create a new
-            modal window, and switch focus back to the parent window by clicking
-            on it. You can click the <i>Focus on Demo</i> button to switch focus
-            to the modal window again.
-          </p>
-        </div>
-      </div>
-    </div>
-
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Window events</title>
+  </head>
+
+  <body>
+    <div>
+      <h1>Create and Manage Windows</h1>
+
+      <h3>
+        The <code>BrowserWindow</code> module in Electron allows you to create a
+        new browser window or manage an existing one.
+      </h3>
+
+      <p>
+        Each browser window is a separate process, known as the renderer
+        process. This process, like the main process that controls the life
+        cycle of the app, has full access to the Node.js APIs.
+      </p>
+
+      <p>
+        Open the
+        <a href="https://electronjs.org/docs/api/browser-window">
+          full API documentation (opens in new window)
+        </a>
+        in your browser.
+      </p>
+    </div>
+
+    <div>
+      <div>
+        <h2>Window events</h2>
+        <div>
+          <div>
+            <button id="listen-to-window">View Demo</button>
+            <button id="focus-on-modal-window">
+              Focus on Demo
+            </button>
+          </div>
+          <p>
+            In this demo, we create a new window and listen for
+            <code>blur</code> event on it. Click the demo button to create a new
+            modal window, and switch focus back to the parent window by clicking
+            on it. You can click the <i>Focus on Demo</i> button to switch focus
+            to the modal window again.
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      // You can also require other files to run in this process
+      require("./renderer.js");
+    </script>
+  </body>
+</html>

docs/fiddles/windows/manage-windows/window-events/main.js

@@ -41,21 +41,23 @@ function createWindow () {
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
-app.whenReady().then(() => {
-  createWindow()
+app.whenReady().then(createWindow)
 
-  app.on('activate', function () {
-    // On macOS it's common to re-create a window in the app when the
-    // dock icon is clicked and there are no other windows open.
-    if (BrowserWindow.getAllWindows().length === 0) createWindow()
-  })
+// Quit when all windows are closed.
+app.on('window-all-closed', function () {
+  // On macOS it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
 })
 
-// Quit when all windows are closed, except on macOS. There, it's common
-// for applications and their menu bar to stay active until the user quits
-// explicitly with Cmd + Q.
-app.on('window-all-closed', function () {
-  if (process.platform !== 'darwin') app.quit()
+app.on('activate', function () {
+  // On macOS it is common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (mainWindow === null) {
+    createWindow()
+  }
 })
 
 // In this file you can include the rest of your app's specific main process

docs/tutorial/accessibility.md

@@ -28,8 +28,6 @@ On macOS, third-party assistive technology can toggle accessibility features ins
 Electron applications by setting the `AXManualAccessibility` attribute
 programmatically:
 
-Using Objective-C:
-
 ```objc
 CFStringRef kAXManualAccessibility = CFSTR("AXManualAccessibility");
 
@@ -45,16 +43,5 @@ CFStringRef kAXManualAccessibility = CFSTR("AXManualAccessibility");
 }
 ```
 
-Using Swift:
-
-```swift
-import Cocoa
-let name = CommandLine.arguments.count >= 2 ? CommandLine.arguments[1] : "Electron"
-let pid = NSWorkspace.shared.runningApplications.first(where: {$0.localizedName == name})!.processIdentifier
-let axApp = AXUIElementCreateApplication(pid)
-let result = AXUIElementSetAttributeValue(axApp, "AXManualAccessibility" as CFString, true as CFTypeRef)
-print("Setting 'AXManualAccessibility' \(error.rawValue == 0 ? "succeeded" : "failed")")
-```
-
 [a11y-docs]: https://www.chromium.org/developers/design-documents/accessibility#TOC-How-Chrome-detects-the-presence-of-Assistive-Technology
 [setAccessibilitySupportEnabled]: ../api/app.md#appsetaccessibilitysupportenabledenabled-macos-windows

docs/tutorial/boilerplates-and-clis.md

@@ -52,7 +52,7 @@ You can find more information and documentation in [the repository](https://gith
 ## electron-react-boilerplate
 
 If you don't want any tools but only a solid boilerplate to build from,
-CT Lin's [`electron-react-boilerplate`](https://github.com/electron-react-boilerplate/electron-react-boilerplate) might be worth
+CT Lin's [`electron-react-boilerplate`](https://github.com/chentsulin/electron-react-boilerplate) might be worth
 a look. It's quite popular in the community and uses `electron-builder`
 internally.
 

docs/tutorial/electron-timelines.md

@@ -12,7 +12,7 @@ check out our [Electron Versioning](./electron-versioning.md) doc.
 | 25.0.0 | 2023-Apr-10 | 2023-May-02 | 2023-May-30 | 2023-Dec-05 | M114 | TBD | ✅ |
 | 24.0.0 | 2022-Feb-09 | 2023-Mar-07 | 2023-Apr-04 | 2023-Oct-03 | M112 | v18.14 | ✅ |
 | 23.0.0 | 2022-Dec-01 | 2023-Jan-10 | 2023-Feb-07 | 2023-Aug-08 | M110 | v18.12 | ✅ |
-| 22.0.0 | 2022-Sep-29 | 2022-Oct-25 | 2022-Nov-29 | 2023-Oct-10 | M108 | v16.17 | ✅ |
+| 22.0.0 | 2022-Sep-29 | 2022-Oct-25 | 2022-Nov-29 | 2023-May-30 | M108 | v16.17 | ✅ |
 | 21.0.0 | 2022-Aug-04 | 2022-Aug-30 | 2022-Sep-27 | 2023-Apr-04 | M106 | v16.16 | 🚫 |
 | 20.0.0 | 2022-May-26 | 2022-Jun-21 | 2022-Aug-02 | 2023-Feb-07 | M104 | v16.15 | 🚫 |
 | 19.0.0 | 2022-Mar-31 | 2022-Apr-26 | 2022-May-24 | 2022-Nov-29 | M102 | v16.14 | 🚫 |

docs/tutorial/mac-app-store-submission-guide.md

@@ -341,7 +341,7 @@ Electron uses following cryptographic algorithms:
 * RIPEMD - [ISO/IEC 10118-3](https://webstore.ansi.org/RecordDetail.aspx?sku=ISO%2FIEC%2010118-3:2004)
 
 [developer-program]: https://developer.apple.com/support/compare-memberships/
-[@electron/osx-sign]: https://github.com/electron/osx-sign
+[@electron/osx-sign]: https://github.com/electron/electron-osx-sign
 [app-sandboxing]: https://developer.apple.com/app-sandboxing/
 [app-notarization]: https://developer.apple.com/documentation/security/notarizing_macos_software_before_distribution
 [submitting-your-app]: https://developer.apple.com/library/mac/documentation/IDEs/Conceptual/AppDistributionGuide/SubmittingYourApp/SubmittingYourApp.html

docs/tutorial/security.md

@@ -9,7 +9,7 @@ toc_max_heading_level: 3
 
 :::info Reporting security issues
 For information on how to properly disclose an Electron vulnerability,
-see [SECURITY.md](https://github.com/electron/electron/blob/main/SECURITY.md).
+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

docs/tutorial/snapcraft.md

@@ -241,5 +241,5 @@ apps:
 [electron-packager]: https://github.com/electron/electron-packager
 [electron-forge]: https://github.com/electron/forge
 [electron-builder]: https://github.com/electron-userland/electron-builder
-[electron-installer-debian]: https://github.com/electron-userland/electron-installer-debian
+[electron-installer-debian]: https://github.com/unindented/electron-installer-debian
 [electron-winstaller]: https://github.com/electron/windows-installer

docs/tutorial/tutorial-2-first-app.md

@@ -134,7 +134,7 @@ add `electron .` to the `start` command in the [`scripts`][package-scripts]
 field of your package.json. This command will tell the Electron executable to look for the main
 script in the current directory and run it in dev mode.
 
-```json {7} title='package.json'
+```json {8-10} title='package.json'
 {
   "name": "my-electron-app",
   "version": "1.0.0",
@@ -274,7 +274,7 @@ calling `createWindow()` once its promise is fulfilled.
 You typically listen to Node.js events by using an emitter's `.on` function.
 
 ```diff
-+ app.on('ready', () => {
++ app.on('ready').then(() => {
 - app.whenReady().then(() => {
   createWindow()
 })

docs/tutorial/tutorial-3-preload.md

@@ -202,7 +202,7 @@ Then, set up your `handle` listener in the main process. We do this _before_
 loading the HTML file so that the handler is guaranteed to be ready before
 you send out the `invoke` call from the renderer.
 
-```js {1,15} title="main.js"
+```js {1,12} title="main.js"
 const { app, BrowserWindow, ipcMain } = require('electron')
 const path = require('path')
 
@@ -214,12 +214,10 @@ const createWindow = () => {
       preload: path.join(__dirname, 'preload.js'),
     },
   })
+  ipcMain.handle('ping', () => 'pong')
   win.loadFile('index.html')
 }
-app.whenReady().then(() => {
-  ipcMain.handle('ping', () => 'pong')
-  createWindow()
-})
+app.whenReady().then(createWindow)
 ```
 
 Once you have the sender and receiver set up, you can now send messages from the renderer