chore: enable check raw ptr fields (#38167)

* chore: bump chromium in DEPS to 114.0.5721.0

* chore: update patches

* chore: bump chromium in DEPS to 114.0.5723.0

* chore: update patches

* chore: bump chromium in DEPS to 114.0.5725.0

* chore: update patches

* chore: bump chromium in DEPS to 114.0.5727.0

* chore: bump chromium in DEPS to 114.0.5729.0

* chore: bump chromium in DEPS to 114.0.5731.0

* chore: update patches

* 4450570: Clean up content shell
https://chromium-review.googlesource.com/c/chromium/src/+/4450570

* 4262527: geolocation: Introduce mojom::GeopositionResult
https://chromium-review.googlesource.com/c/chromium/src/+/4262527

* 4450327: Android/Nav: Stop taking content timeout timer from old host.
https://chromium-review.googlesource.com/c/chromium/src/+/4450327

Also, see:
4451366: Reland "Prerender: Fix prerender new content timeout start timing"
https://chromium-review.googlesource.com/c/chromium/src/+/4451366

* chore: bump chromium in DEPS to 114.0.5733.2

* chore: update patches

* chore: bump CircleCI xcode version
this will hopefully get us the necessary macOS sdk 13.3 on CI.

* chore: bump chromium in DEPS to 114.0.5735.0

* chore: update patches

* test: fix geolocation test

* chore: bump chromium in DEPS to 115.0.5736.0

* chore: update patches

* chore: bump chromium in DEPS to 115.0.5738.0

* chore: update patches

* fix: remove profiles from spellcheck service

* chore: update libc++ filenames

* chore: bump chromium in DEPS to 115.0.5740.0

* chore: update patches

* chore: bump chromium in DEPS to 115.0.5742.0

* chore: update patches

* chore: bump chromium in DEPS to 115.0.5744.0

* chore: update patches

* chore: bump chromium in DEPS to 115.0.5746.0

* chore: update patches

* chore: update filenames.libcxx.gni

* chore: bump chromium in DEPS to 115.0.5748.0

* chore: update patches

* build: update libcxx filenames

* chore: bump chromium in DEPS to 115.0.5750.0

* chore: bump chromium in DEPS to 115.0.5752.2

* chore: bump chromium in DEPS to 115.0.5754.0

* chore: bump chromium in DEPS to 115.0.5756.0

* chore: bump chromium in DEPS to 115.0.5758.0

* chore: update patches

* chore: update patch after rebase

* 4500969: Delete content/dev_ui_content_resources.grd file.

https://chromium-review.googlesource.com/c/chromium/src/+/4500969

* Use base.Value.Dict in OmahaAttributesHandler related code

https://chromium-review.googlesource.com/c/chromium/src/+/4506402

* chore: bump chromium in DEPS to 115.0.5760.0

* chore: update patches

* chore: fixup line endings

* 4336172: Include client-drawn window decorations in aspect ratio. |
Ref: https://chromium-review.googlesource.com/c/chromium/src/+/4336172

(cherry picked from commit 27c2f6c43e)

* spec: fix race condition in alwaysOnTop test

(cherry picked from commit 2ec5213fa0)

* build: use xcode 14.2 not 14.3

(cherry picked from commit b7c62351a7)

* build: use macOS 12 to run tests

The new macOS 13 VMs appear to have different screen / display behavior

(cherry picked from commit 14dc1dbc24)

* Remove always-true flag --harmony-sharedarraybuffer

https://chromium-review.googlesource.com/c/v8/v8/+/4429630

---------

Co-authored-by: electron-roller[bot] <84116207+electron-roller[bot]@users.noreply.github.com>
Co-authored-by: PatchUp <73610968+patchup[bot]@users.noreply.github.com>
Co-authored-by: clavin <clavin@electronjs.org>
Co-authored-by: John Kleinschmidt <jkleinsc@electronjs.org>
Co-authored-by: Keeley Hammond <vertedinde@electronjs.org>
Co-authored-by: VerteDinde <keeleymhammond@gmail.com>
Co-authored-by: Samuel Attard <samuel.r.attard@gmail.com>

.circleci/config.yml

@@ -51,7 +51,7 @@ jobs:
     steps:
       - checkout
       - path-filtering/set-parameters:
-          base-revision: origin/24-x-y
+          base-revision: main
           mapping: |
             ^((?!docs/).)*$ run-build-mac true
             ^((?!docs/).)*$ run-build-linux true
@@ -62,7 +62,7 @@ jobs:
             cd .circleci/config
             yarn
             export CIRCLECI_BINARY="$HOME/circleci"
-            curl -fLSs https://raw.githubusercontent.com/CircleCI-Public/circleci-cli/master/install.sh | DESTDIR=$CIRCLECI_BINARY bash
+            curl -fLSs https://raw.githubusercontent.com/CircleCI-Public/circleci-cli/main/install.sh | DESTDIR=$CIRCLECI_BINARY bash
             node build.js
           name: Pack config.yml
       - continuation/continue:

.circleci/config/base.yml

@@ -52,9 +52,14 @@ executors:
       size:
         description: "macOS executor size"
         type: enum
-        enum: ["macos.x86.medium.gen2", "large"]
+        enum: ["macos.x86.medium.gen2"]
+      version:
+        description: "xcode version"
+        type: enum
+        enum: ["14.3.0", "14.0.0"]
+        default: 14.3.0
     macos:
-      xcode: 14.0.0
+      xcode: << parameters.version >>
     resource_class: << parameters.size >>
 
   # Electron Runners
@@ -108,7 +113,7 @@ env-unittests: &env-unittests
   TESTS_CONFIG: src/electron/spec/configs/unittests.yml
 
 env-arm: &env-arm
-  GN_EXTRA_ARGS: 'target_cpu = "arm" clang_use_chrome_plugins = false'
+  GN_EXTRA_ARGS: 'target_cpu = "arm"'
   MKSNAPSHOT_TOOLCHAIN: //build/toolchain/linux:clang_arm
   BUILD_NATIVE_MKSNAPSHOT: 1
   TARGET_ARCH: arm
@@ -452,7 +457,7 @@ step-get-more-space-on-mac: &step-get-more-space-on-mac
       fi
     background: true
 
-# On macOS delete all .git directories under src/ expect for
+# On macOS delete all .git directories under src/ except for
 # third_party/angle/ and third_party/dawn/ because of build time generation of files
 # gen/angle/commit.h depends on third_party/angle/.git/HEAD
 # https://chromium-review.googlesource.com/c/angle/angle/+/2074924
@@ -524,18 +529,6 @@ step-fix-sync: &step-fix-sync
       mv .git/config.backup .git/config
       git fetch
 
-step-fix-clang: &step-fix-clang
-  run:
-    name: Fix Clang on 32-bit Linux ARM
-    command: |
-      if [ "$TARGET_ARCH" == "arm" ]; then
-        # The following custom clang needed on 32-bit Linux ARM due to https://crbug.com/1431201.
-        # Once https://crbug.com/1425409 has been resolved this workaround can be remove
-        cd src/third_party/llvm-build/Release+Asserts
-        curl -O https://dev-cdn.electronjs.org/clang/clang-llvmorg-17-init-4759-g547e3456-2.tar.xz
-        tar xvf clang-llvmorg-17-init-4759-g547e3456-2.tar.xz
-      fi
-
 step-install-signing-cert-on-mac: &step-install-signing-cert-on-mac
   run:
     name: Import and trust self-signed codesigning cert on MacOS
@@ -1068,7 +1061,6 @@ commands:
         default: true
     steps:
       - *step-gn-gen-default
-      - *step-fix-clang
       - ninja_build_electron:
           clean-prebuilt-snapshot: false
           build-type: << parameters.build-type >>
@@ -1505,7 +1497,7 @@ commands:
               export LLVM_SYMBOLIZER_PATH=$PWD/third_party/llvm-build/Release+Asserts/bin/llvm-symbolizer
               export MOCHA_TIMEOUT=180000
               echo "Piping output to ASAN_SYMBOLIZE ($ASAN_SYMBOLIZE)"
-              (cd electron && node script/yarn test --runners=main --trace-uncaught --enable-logging --files $(circleci tests glob spec/*-spec.ts | circleci tests split --split-by=timings)) 2>&1 | $ASAN_SYMBOLIZE
+              (cd electron && (circleci tests glob "spec/*-spec.ts" | circleci tests run --command="xargs node script/yarn test --runners=main --trace-uncaught --enable-logging --files" --split-by=timings 2>&1)) | $ASAN_SYMBOLIZE
             else
               if [ "$TARGET_ARCH" == "arm" ] || [ "$TARGET_ARCH" == "arm64" ]; then
                 export ELECTRON_SKIP_NATIVE_MODULE_TESTS=true
@@ -1514,18 +1506,9 @@ commands:
                 if [ "$TARGET_ARCH" == "ia32" ]; then
                   npm_config_arch=x64 node electron/node_modules/dugite/script/download-git.js
                 fi
-                (cd electron && node script/yarn test --runners=main --trace-uncaught --enable-logging --files $(circleci tests glob spec/*-spec.ts | circleci tests split --split-by=timings))
+                (cd electron && (circleci tests glob "spec/*-spec.ts" | circleci tests run --command="xargs node script/yarn test --runners=main --trace-uncaught --enable-logging --files" --split-by=timings))
               fi
             fi
-      - run:
-          name: Check test results existence
-          command: |
-            cd src
-
-            # Check if test results exist and are not empty.
-            if [ ! -s "junit/test-results-main.xml" ]; then
-              exit 1
-            fi
       - store_test_results:
           path: src/junit
 
@@ -1611,7 +1594,6 @@ commands:
       - *step-setup-goma-for-build
       - *step-wait-for-goma
       - *step-gn-gen-default
-      - *step-fix-clang
 
       # Electron app
       - ninja_build_electron:
@@ -2156,6 +2138,7 @@ jobs:
     executor:
       name: macos
       size: macos.x86.medium.gen2
+      version: 14.0.0
     environment:
       <<: *env-mac-large
       <<: *env-stack-dumping
@@ -2179,6 +2162,7 @@ jobs:
     executor:
       name: macos
       size: macos.x86.medium.gen2
+      version: 14.0.0
     environment:
       <<: *env-mac-large
       <<: *env-stack-dumping

.clang-tidy

@@ -0,0 +1,4 @@
+---
+Checks: '-modernize-use-nullptr'
+InheritParentConfig: true
+...

.devcontainer/on-create-command.sh

@@ -41,7 +41,7 @@ if [ ! -f $buildtools/configs/evm.testing.json ]; then
                 \"electron\": {
                     \"origin\": \"https://github.com/electron/electron.git\"
                 }
-            }
+            },
             \"gen\": {
                 \"args\": [
                     \"import(\\\"//electron/build/args/testing.gn\\\")\",

.gitattributes

@@ -4,11 +4,27 @@
 patches/**/.patches merge=union
 
 # Source code and markdown files should always use LF as line ending.
+*.c text eol=lf
 *.cc text eol=lf
-*.mm text eol=lf
+*.cpp text eol=lf
+*.csv text eol=lf
+*.grd   text eol=lf
+*.grdp   text eol=lf
+*.gn text eol=lf
+*.gni text eol=lf
 *.h text eol=lf
-*.js text eol=lf
-*.ts text eol=lf
+*.html   text eol=lf
+*.idl text eol=lf
+*.in   text eol=lf
+*.js   text eol=lf
+*.json   text eol=lf
+*.json5 text eol=lf
+*.md text eol=lf
+*.mm text eol=lf
+*.mojom text eol=lf
+*.proto text eol=lf
 *.py text eol=lf
 *.ps1 text eol=lf
-*.md text eol=lf
+*.sh text eol=lf
+*.ts text eol=lf
+*.txt   text eol=lf

.github/CODEOWNERS

@@ -8,6 +8,7 @@
 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,17 +25,3 @@ 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/branch-created.yml

@@ -0,0 +1,55 @@
+name: Branch Created
+
+on:
+  create:
+
+permissions: {}
+
+jobs:
+  release-branch-created:
+    name: Release Branch Created
+    if: ${{ github.event.ref_type == 'branch' && endsWith(github.event.ref, '-x-y') }}
+    permissions:
+      contents: read
+      pull-requests: write
+      repository-projects: write  # Required for labels
+    runs-on: ubuntu-latest
+    steps:
+      - name: New Release Branch Tasks
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GH_REPO: electron/electron
+          NUM_SUPPORTED_VERSIONS: 3
+        run: |
+          if [[ ${{ github.event.ref }} =~ ^([0-9]+)-x-y$ ]]; then
+            MAJOR=${BASH_REMATCH[1]}
+            PREVIOUS_MAJOR=$((MAJOR - 1))
+            UNSUPPORTED_MAJOR=$((MAJOR - NUM_SUPPORTED_VERSIONS - 1))
+
+            # Create new labels
+            gh label create $MAJOR-x-y --color 8d9ee8 || true
+            gh label create target/$MAJOR-x-y --color ad244f || true
+            gh label create merged/$MAJOR-x-y --color 61a3c6 || true
+            gh label create in-flight/$MAJOR-x-y --color db69a6 || true
+            gh label create needs-manual-bp/$MAJOR-x-y --color 8b5dba || true
+
+            # Change color of old labels
+            gh label edit $UNSUPPORTED_MAJOR-x-y --color ededed || true
+            gh label edit target/$UNSUPPORTED_MAJOR-x-y --color ededed || true
+            gh label edit merged/$UNSUPPORTED_MAJOR-x-y --color ededed || true
+            gh label edit in-flight/$UNSUPPORTED_MAJOR-x-y --color ededed || true
+            gh label edit needs-manual-bp/$UNSUPPORTED_MAJOR-x-y --color ededed || true
+
+            # Add the new target label to any PRs which:
+            #   * target the previous major
+            #   * are in-flight for the previous major
+            #   * need manual backport for the previous major
+            for PREVIOUS_MAJOR_LABEL in target/$PREVIOUS_MAJOR-x-y in-flight/$PREVIOUS_MAJOR-x-y needs-manual-bp/$PREVIOUS_MAJOR-x-y; do
+              PULL_REQUESTS=$(gh pr list --label $PREVIOUS_MAJOR_LABEL --jq .[].number --json number --limit 500)
+              if [[ $PULL_REQUESTS ]]; then
+                echo $PULL_REQUESTS | xargs -n 1 gh pr edit --add-label target/$MAJOR-x-y || true
+              fi
+            done
+          else
+            echo "Not a release branch: ${{ github.event.ref }}"
+          fi

.github/workflows/issue-commented.yml

@@ -0,0 +1,24 @@
+name: Issue Commented
+
+on:
+  issue_comment:
+    types:
+      - created
+
+permissions:
+  contents: read
+
+jobs:
+  issue-commented:
+    name: Remove blocked/need-repro on comment
+    if: ${{ contains(github.event.issue.labels.*.name, 'blocked/need-repro') && !contains(fromJSON('["MEMBER", "OWNER"]'), github.event.comment.author_association) }}
+    permissions:
+      issues: write
+    runs-on: ubuntu-latest
+    steps:
+      - name: Remove label
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          ISSUE_URL: ${{ github.event.issue.html_url }}
+        run: |
+          gh issue edit $ISSUE_URL --remove-label 'blocked/need-repro'

.github/workflows/issue-labeled.yml

@@ -9,12 +9,13 @@ permissions:  # added using https://github.com/step-security/secure-workflows
 
 jobs:
   issue-labeled:
+    name: blocked/need-repro label added
+    if: github.event.label.name == 'blocked/need-repro'
     permissions:
       issues: write  # for actions-cool/issues-helper to update issues
     runs-on: ubuntu-latest
     steps:
-      - name: blocked/need-repro label added
-        if: github.event.label.name == 'blocked/need-repro'
+      - name: Create comment
         uses: actions-cool/issues-helper@dad28fdb88da5f082c04659b7373d85790f9b135 # v3.3.0
         with:
           actions: 'create-comment'

.github/workflows/semantic.yml

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

.github/workflows/stale.yml

@@ -33,6 +33,7 @@ jobs:
         with:
           days-before-stale: -1
           days-before-close: 10
+          remove-stale-when-updated: false
           stale-issue-label: blocked/need-repro
           stale-pr-label: not-a-real-label
           operations-per-run: 1750

.github/workflows/update_appveyor_image.yml

@@ -40,13 +40,21 @@ 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"
+        cmd: |
+          yq '.image = "${{ env.APPVEYOR_IMAGE_VERSION }}"' "appveyor.yml" > "appveyor2.yml"
+          yq '.image = "${{ env.APPVEYOR_IMAGE_VERSION }}"' "appveyor-woa.yml" > "appveyor-woa2.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
@@ -60,4 +68,5 @@ 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 }}.
+          This PR updates appveyor.yml to the latest baked image, ${{ env.APPVEYOR_IMAGE_VERSION }}.
+          Notes: none

.markdownlint.json

@@ -1,27 +1,3 @@
 {
-  "commands-show-output": false,
-  "first-line-h1": false,
-  "header-increment": false,
-  "line-length": {
-    "code_blocks": false,
-    "tables": false,
-    "stern": true,
-    "line_length": -1
-  },
-  "no-bare-urls": false,
-  "no-blanks-blockquote": false,
-  "no-duplicate-header": {
-    "allow_different_nesting": true
-  },
-  "no-emphasis-as-header": false,
-  "no-hard-tabs": {
-    "code_blocks": false
-  },
-  "no-space-in-emphasis": false,
-  "no-trailing-punctuation": false,
-  "no-trailing-spaces": {
-    "br_spaces": 0
-  },
-  "single-h1": false,
-  "no-inline-html": false
+  "extends": "@electron/lint-roller/configs/markdownlint.json"
 }

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/features.gni")
+import("//components/os_crypt/sync/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",
+    "//components/os_crypt/sync",
     "//components/pref_registry",
     "//components/prefs",
     "//components/security_state/content",

DEPS

@@ -2,9 +2,9 @@ gclient_gn_args_from = 'src'
 
 vars = {
   'chromium_version':
-    '112.0.5615.87',
+    '115.0.5760.0',
   'node_version':
-    'v18.14.0',
+    'v18.16.0',
   'nan_version':
     '16fa32231e2ccd89d2804b3f765319128b20c4ac',
   'squirrel.mac_version':
@@ -149,5 +149,4 @@ 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.5615.29
+image: e-112.0.5607.0-vs2022
 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/+/master/docs/reference.md#target_cpu
+#      https://gn.googlesource.com/gn/+/main/docs/reference.md#var_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-112.0.5615.29
+image: e-114.0.5719.0
 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: mocha-appveyor-reporter, tap
+  MOCHA_MULTI_REPORTERS: "@marshallofsound/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/+/master/docs/reference.md#target_cpu
+#      https://gn.googlesource.com/gn/+/main/docs/reference.md#var_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-112.0.5615.29
+image: e-114.0.5719.0
 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: mocha-appveyor-reporter, tap
+  MOCHA_MULTI_REPORTERS: "@marshallofsound/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/master/doc/abi_version_registry.json
-node_module_version = 114
+# Registry of NMVs --> https://github.com/nodejs/node/blob/main/doc/abi_version_registry.json
+node_module_version = 116
 
 v8_promise_internal_field_count = 1
 v8_embedder_string = "-electron.0"
@@ -45,3 +45,10 @@ 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
+
+# Disables the builtins PGO for V8
+v8_builtins_profiling_log_file = ""

docs/api/app.md

@@ -150,9 +150,20 @@ Returns:
 
 * `event` Event
 
-Emitted when mac application become active. Difference from `activate` event is
+Emitted when the application becomes active. This differs from the `activate` event in
 that `did-become-active` is emitted every time the app becomes active, not only
-when Dock icon is clicked or application is re-launched.
+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.
 
 ### Event: 'continue-activity' _macOS_
 
@@ -1406,7 +1417,7 @@ Start accessing a security scoped resource. With this method Electron applicatio
 
 ### `app.enableSandbox()`
 
-Enables full sandbox mode on the app. This means that all renderers will be launched sandboxed, regardless of the value of the `sandbox` flag in WebPreferences.
+Enables full sandbox mode on the app. This means that all renderers will be launched sandboxed, regardless of the value of the `sandbox` flag in [`WebPreferences`](structures/web-preferences.md).
 
 This method can only be called before app is ready.
 

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/grunt-electron-installer
+[installer]: https://github.com/electron-archive/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-view.md

@@ -33,7 +33,7 @@ app.whenReady().then(() => {
 ### `new BrowserView([options])` _Experimental_
 
 * `options` Object (optional)
-  * `webPreferences` Object (optional) - See [BrowserWindow](browser-window.md).
+  * `webPreferences` [WebPreferences](structures/web-preferences.md?inline) (optional) - Settings of web page's features.
 
 ### Instance Properties
 

docs/api/browser-window.md

@@ -151,294 +151,7 @@ It creates a new `BrowserWindow` with native properties as set by the `options`.
 
 ### `new BrowserWindow([options])`
 
-* `options` Object (optional)
-  * `width` Integer (optional) - Window's width in pixels. Default is `800`.
-  * `height` Integer (optional) - Window's height in pixels. Default is `600`.
-  * `x` Integer (optional) - (**required** if y is used) Window's left offset from screen.
-    Default is to center the window.
-  * `y` Integer (optional) - (**required** if x is used) Window's top offset from screen.
-    Default is to center the window.
-  * `useContentSize` boolean (optional) - The `width` and `height` would be used as web
-    page's size, which means the actual window's size will include window
-    frame's size and be slightly larger. Default is `false`.
-  * `center` boolean (optional) - Show window in the center of the screen. Default is `false`.
-  * `minWidth` Integer (optional) - Window's minimum width. Default is `0`.
-  * `minHeight` Integer (optional) - Window's minimum height. Default is `0`.
-  * `maxWidth` Integer (optional) - Window's maximum width. Default is no limit.
-  * `maxHeight` Integer (optional) - Window's maximum height. Default is no limit.
-  * `resizable` boolean (optional) - Whether window is resizable. Default is `true`.
-  * `movable` boolean (optional) _macOS_ _Windows_ - Whether window is
-    movable. This is not implemented on Linux. Default is `true`.
-  * `minimizable` boolean (optional) _macOS_ _Windows_ - Whether window is
-    minimizable. This is not implemented on Linux. Default is `true`.
-  * `maximizable` boolean (optional) _macOS_ _Windows_ - Whether window is
-    maximizable. This is not implemented on Linux. Default is `true`.
-  * `closable` boolean (optional) _macOS_ _Windows_ - Whether window is
-    closable. This is not implemented on Linux. Default is `true`.
-  * `focusable` boolean (optional) - Whether the window can be focused. Default is
-    `true`. On Windows setting `focusable: false` also implies setting
-    `skipTaskbar: true`. On Linux setting `focusable: false` makes the window
-    stop interacting with wm, so the window will always stay on top in all
-    workspaces.
-  * `alwaysOnTop` boolean (optional) - Whether the window should always stay on top of
-    other windows. Default is `false`.
-  * `fullscreen` boolean (optional) - Whether the window should show in fullscreen. When
-    explicitly set to `false` the fullscreen button will be hidden or disabled
-    on macOS. Default is `false`.
-  * `fullscreenable` boolean (optional) - Whether the window can be put into fullscreen
-    mode. On macOS, also whether the maximize/zoom button should toggle full
-    screen mode or maximize window. Default is `true`.
-  * `simpleFullscreen` boolean (optional) _macOS_ - Use pre-Lion fullscreen on
-    macOS. Default is `false`.
-  * `skipTaskbar` boolean (optional) _macOS_ _Windows_ - Whether to show the window in taskbar.
-    Default is `false`.
-  * `hiddenInMissionControl` boolean (optional) _macOS_ - Whether window should be hidden when the user toggles into mission control.
-  * `kiosk` boolean (optional) - Whether the window is in kiosk mode. Default is `false`.
-  * `title` string (optional) - Default window title. Default is `"Electron"`. If the HTML tag `<title>` is defined in the HTML file loaded by `loadURL()`, this property will be ignored.
-  * `icon` ([NativeImage](native-image.md) | string) (optional) - The window icon. On Windows it is
-    recommended to use `ICO` icons to get best visual effects, you can also
-    leave it undefined so the executable's icon will be used.
-  * `show` boolean (optional) - Whether window should be shown when created. Default is
-    `true`.
-  * `paintWhenInitiallyHidden` boolean (optional) - Whether the renderer should be active when `show` is `false` and it has just been created.  In order for `document.visibilityState` to work correctly on first load with `show: false` you should set this to `false`.  Setting this to `false` will cause the `ready-to-show` event to not fire.  Default is `true`.
-  * `frame` boolean (optional) - Specify `false` to create a
-    [frameless window](../tutorial/window-customization.md#create-frameless-windows). Default is `true`.
-  * `parent` BrowserWindow (optional) - Specify parent window. Default is `null`.
-  * `modal` boolean (optional) - Whether this is a modal window. This only works when the
-    window is a child window. Default is `false`.
-  * `acceptFirstMouse` boolean (optional) _macOS_ - Whether clicking an
-    inactive window will also click through to the web contents. Default is
-    `false` on macOS. This option is not configurable on other platforms.
-  * `disableAutoHideCursor` boolean (optional) - Whether to hide cursor when typing.
-    Default is `false`.
-  * `autoHideMenuBar` boolean (optional) - Auto hide the menu bar unless the `Alt`
-    key is pressed. Default is `false`.
-  * `enableLargerThanScreen` boolean (optional) _macOS_ - Enable the window to
-    be resized larger than screen. Only relevant for macOS, as other OSes
-    allow larger-than-screen windows by default. Default is `false`.
-  * `backgroundColor` string (optional) - The window's background color in Hex, RGB, RGBA, HSL, HSLA or named CSS color format. Alpha in #AARRGGBB format is supported if `transparent` is set to `true`. Default is `#FFF` (white). See [win.setBackgroundColor](browser-window.md#winsetbackgroundcolorbackgroundcolor) for more information.
-  * `hasShadow` boolean (optional) - Whether window should have a shadow. Default is `true`.
-  * `opacity` number (optional) _macOS_ _Windows_ - Set the initial opacity of
-    the window, between 0.0 (fully transparent) and 1.0 (fully opaque). This
-    is only implemented on Windows and macOS.
-  * `darkTheme` boolean (optional) - Forces using dark theme for the window, only works on
-    some GTK+3 desktop environments. Default is `false`.
-  * `transparent` boolean (optional) - Makes the window [transparent](../tutorial/window-customization.md#create-transparent-windows).
-    Default is `false`. On Windows, does not work unless the window is frameless.
-  * `type` string (optional) - The type of window, default is normal window. See more about
-    this below.
-  * `visualEffectState` string (optional) _macOS_ - Specify how the material
-    appearance should reflect window activity state on macOS. Must be used
-    with the `vibrancy` property. Possible values are:
-    * `followWindow` - The backdrop should automatically appear active when the window is active, and inactive when it is not. This is the default.
-    * `active` - The backdrop should always appear active.
-    * `inactive` - The backdrop should always appear inactive.
-  * `titleBarStyle` string (optional) _macOS_ _Windows_ - The style of window title bar.
-    Default is `default`. Possible values are:
-    * `default` - Results in the standard title bar for macOS or Windows respectively.
-    * `hidden` - Results in a hidden title bar and a full size content window. On macOS, the window still has the standard window controls (“traffic lights”) in the top left. On Windows, when combined with `titleBarOverlay: true` it will activate the Window Controls Overlay (see `titleBarOverlay` for more information), otherwise no window controls will be shown.
-    * `hiddenInset` _macOS_ - Only on macOS, results in a hidden title bar
-      with an alternative look where the traffic light buttons are slightly
-      more inset from the window edge.
-    * `customButtonsOnHover` _macOS_ - Only on macOS, results in a hidden
-      title bar and a full size content window, the traffic light buttons will
-      display when being hovered over in the top left of the window.
-      **Note:** This option is currently experimental.
-  * `trafficLightPosition` [Point](structures/point.md) (optional) _macOS_ -
-    Set a custom position for the traffic light buttons in frameless windows.
-  * `roundedCorners` boolean (optional) _macOS_ - Whether frameless window
-    should have rounded corners on macOS. Default is `true`. Setting this property
-    to `false` will prevent the window from being fullscreenable.
-  * `fullscreenWindowTitle` boolean (optional) _macOS_ _Deprecated_ - Shows
-    the title in the title bar in full screen mode on macOS for `hiddenInset`
-    titleBarStyle. Default is `false`.
-  * `thickFrame` boolean (optional) - Use `WS_THICKFRAME` style for frameless windows on
-    Windows, which adds standard window frame. Setting it to `false` will remove
-    window shadow and window animations. Default is `true`.
-  * `vibrancy` string (optional) _macOS_ - Add a type of vibrancy effect to
-    the window, only on macOS. Can be `appearance-based`, `light`, `dark`,
-    `titlebar`, `selection`, `menu`, `popover`, `sidebar`, `medium-light`,
-    `ultra-dark`, `header`, `sheet`, `window`, `hud`, `fullscreen-ui`,
-    `tooltip`, `content`, `under-window`, or `under-page`. Please note that
-    `appearance-based`, `light`, `dark`, `medium-light`, and `ultra-dark` are
-    deprecated and have been removed in macOS Catalina (10.15).
-  * `zoomToPageWidth` boolean (optional) _macOS_ - Controls the behavior on
-    macOS when option-clicking the green stoplight button on the toolbar or by
-    clicking the Window > Zoom menu item. If `true`, the window will grow to
-    the preferred width of the web page when zoomed, `false` will cause it to
-    zoom to the width of the screen. This will also affect the behavior when
-    calling `maximize()` directly. Default is `false`.
-  * `tabbingIdentifier` string (optional) _macOS_ - Tab group name, allows
-    opening the window as a native tab. Windows with the same
-    tabbing identifier will be grouped together. This also adds a native new
-    tab button to your window's tab bar and allows your `app` and window to
-    receive the `new-window-for-tab` event.
-  * `webPreferences` Object (optional) - Settings of web page's features.
-    * `devTools` boolean (optional) - Whether to enable DevTools. If it is set to `false`, can not use `BrowserWindow.webContents.openDevTools()` to open DevTools. Default is `true`.
-    * `nodeIntegration` boolean (optional) - Whether node integration is enabled.
-      Default is `false`.
-    * `nodeIntegrationInWorker` boolean (optional) - Whether node integration is
-      enabled in web workers. Default is `false`. More about this can be found
-      in [Multithreading](../tutorial/multithreading.md).
-    * `nodeIntegrationInSubFrames` boolean (optional) - Experimental option for
-      enabling Node.js support in sub-frames such as iframes and child windows. All your preloads will load for
-      every iframe, you can use `process.isMainFrame` to determine if you are
-      in the main frame or not.
-    * `preload` string (optional) - Specifies a script that will be loaded before other
-      scripts run in the page. This script will always have access to node APIs
-      no matter whether node integration is turned on or off. The value should
-      be the absolute file path to the script.
-      When node integration is turned off, the preload script can reintroduce
-      Node global symbols back to the global scope. See example
-      [here](context-bridge.md#exposing-node-global-symbols).
-    * `sandbox` boolean (optional) - If set, this will sandbox the renderer
-      associated with the window, making it compatible with the Chromium
-      OS-level sandbox and disabling the Node.js engine. This is not the same as
-      the `nodeIntegration` option and the APIs available to the preload script
-      are more limited. Read more about the option [here](../tutorial/sandbox.md).
-    * `session` [Session](session.md#class-session) (optional) - Sets the session used by the
-      page. Instead of passing the Session object directly, you can also choose to
-      use the `partition` option instead, which accepts a partition string. When
-      both `session` and `partition` are provided, `session` will be preferred.
-      Default is the default session.
-    * `partition` string (optional) - Sets the session used by the page according to the
-      session's partition string. If `partition` starts with `persist:`, the page
-      will use a persistent session available to all pages in the app with the
-      same `partition`. If there is no `persist:` prefix, the page will use an
-      in-memory session. By assigning the same `partition`, multiple pages can share
-      the same session. Default is the default session.
-    * `zoomFactor` number (optional) - The default zoom factor of the page, `3.0` represents
-      `300%`. Default is `1.0`.
-    * `javascript` boolean (optional) - Enables JavaScript support. Default is `true`.
-    * `webSecurity` boolean (optional) - When `false`, it will disable the
-      same-origin policy (usually using testing websites by people), and set
-      `allowRunningInsecureContent` to `true` if this options has not been set
-      by user. Default is `true`.
-    * `allowRunningInsecureContent` boolean (optional) - Allow an https page to run
-      JavaScript, CSS or plugins from http URLs. Default is `false`.
-    * `images` boolean (optional) - Enables image support. Default is `true`.
-    * `imageAnimationPolicy` string (optional) - Specifies how to run image animations (E.g. GIFs).  Can be `animate`, `animateOnce` or `noAnimation`.  Default is `animate`.
-    * `textAreasAreResizable` boolean (optional) - Make TextArea elements resizable. Default
-      is `true`.
-    * `webgl` boolean (optional) - Enables WebGL support. Default is `true`.
-    * `plugins` boolean (optional) - Whether plugins should be enabled. Default is `false`.
-    * `experimentalFeatures` boolean (optional) - Enables Chromium's experimental features.
-      Default is `false`.
-    * `scrollBounce` boolean (optional) _macOS_ - Enables scroll bounce
-      (rubber banding) effect on macOS. Default is `false`.
-    * `enableBlinkFeatures` string (optional) - A list of feature strings separated by `,`, like
-      `CSSVariables,KeyboardEventKey` to enable. The full list of supported feature
-      strings can be found in the [RuntimeEnabledFeatures.json5][runtime-enabled-features]
-      file.
-    * `disableBlinkFeatures` string (optional) - A list of feature strings separated by `,`,
-      like `CSSVariables,KeyboardEventKey` to disable. The full list of supported
-      feature strings can be found in the
-      [RuntimeEnabledFeatures.json5][runtime-enabled-features] file.
-    * `defaultFontFamily` Object (optional) - Sets the default font for the font-family.
-      * `standard` string (optional) - Defaults to `Times New Roman`.
-      * `serif` string (optional) - Defaults to `Times New Roman`.
-      * `sansSerif` string (optional) - Defaults to `Arial`.
-      * `monospace` string (optional) - Defaults to `Courier New`.
-      * `cursive` string (optional) - Defaults to `Script`.
-      * `fantasy` string (optional) - Defaults to `Impact`.
-    * `defaultFontSize` Integer (optional) - Defaults to `16`.
-    * `defaultMonospaceFontSize` Integer (optional) - Defaults to `13`.
-    * `minimumFontSize` Integer (optional) - Defaults to `0`.
-    * `defaultEncoding` string (optional) - Defaults to `ISO-8859-1`.
-    * `backgroundThrottling` boolean (optional) - Whether to throttle animations and timers
-      when the page becomes background. This also affects the
-      [Page Visibility API](#page-visibility). Defaults to `true`.
-    * `offscreen` boolean (optional) - Whether to enable offscreen rendering for the browser
-      window. Defaults to `false`. See the
-      [offscreen rendering tutorial](../tutorial/offscreen-rendering.md) for
-      more details.
-    * `contextIsolation` boolean (optional) - Whether to run Electron APIs and
-      the specified `preload` script in a separate JavaScript context. Defaults
-      to `true`. The context that the `preload` script runs in will only have
-      access to its own dedicated `document` and `window` globals, as well as
-      its own set of JavaScript builtins (`Array`, `Object`, `JSON`, etc.),
-      which are all invisible to the loaded content. The Electron API will only
-      be available in the `preload` script and not the loaded page. This option
-      should be used when loading potentially untrusted remote content to ensure
-      the loaded content cannot tamper with the `preload` script and any
-      Electron APIs being used.  This option uses the same technique used by
-      [Chrome Content Scripts][chrome-content-scripts].  You can access this
-      context in the dev tools by selecting the 'Electron Isolated Context'
-      entry in the combo box at the top of the Console tab.
-    * `webviewTag` boolean (optional) - Whether to enable the [`<webview>` tag](webview-tag.md).
-      Defaults to `false`. **Note:** The
-      `preload` script configured for the `<webview>` will have node integration
-      enabled when it is executed so you should ensure remote/untrusted content
-      is not able to create a `<webview>` tag with a possibly malicious `preload`
-      script. You can use the `will-attach-webview` event on [webContents](web-contents.md)
-      to strip away the `preload` script and to validate or alter the
-      `<webview>`'s initial settings.
-    * `additionalArguments` string[] (optional) - A list of strings that will be appended
-      to `process.argv` in the renderer process of this app.  Useful for passing small
-      bits of data down to renderer process preload scripts.
-    * `safeDialogs` boolean (optional) - Whether to enable browser style
-      consecutive dialog protection. Default is `false`.
-    * `safeDialogsMessage` string (optional) - The message to display when
-      consecutive dialog protection is triggered. If not defined the default
-      message would be used, note that currently the default message is in
-      English and not localized.
-    * `disableDialogs` boolean (optional) - Whether to disable dialogs
-      completely. Overrides `safeDialogs`. Default is `false`.
-    * `navigateOnDragDrop` boolean (optional) - Whether dragging and dropping a
-      file or link onto the page causes a navigation. Default is `false`.
-    * `autoplayPolicy` string (optional) - Autoplay policy to apply to
-      content in the window, can be `no-user-gesture-required`,
-      `user-gesture-required`, `document-user-activation-required`. Defaults to
-      `no-user-gesture-required`.
-    * `disableHtmlFullscreenWindowResize` boolean (optional) - Whether to
-      prevent the window from resizing when entering HTML Fullscreen. Default
-      is `false`.
-    * `accessibleTitle` string (optional) - An alternative title string provided only
-      to accessibility tools such as screen readers. This string is not directly
-      visible to users.
-    * `spellcheck` boolean (optional) - Whether to enable the builtin spellchecker.
-      Default is `true`.
-    * `enableWebSQL` boolean (optional) - Whether to enable the [WebSQL api](https://www.w3.org/TR/webdatabase/).
-      Default is `true`.
-    * `v8CacheOptions` string (optional) - Enforces the v8 code caching policy
-      used by blink. Accepted values are
-      * `none` - Disables code caching
-      * `code` - Heuristic based code caching
-      * `bypassHeatCheck` - Bypass code caching heuristics but with lazy compilation
-      * `bypassHeatCheckAndEagerCompile` - Same as above except compilation is eager.
-      Default policy is `code`.
-    * `enablePreferredSizeMode` boolean (optional) - Whether to enable
-      preferred size mode. The preferred size is the minimum size needed to
-      contain the layout of the document—without requiring scrolling. Enabling
-      this will cause the `preferred-size-changed` event to be emitted on the
-      `WebContents` when the preferred size changes. Default is `false`.
-  * `titleBarOverlay` Object | Boolean (optional) -  When using a frameless window in conjunction with `win.setWindowButtonVisibility(true)` on macOS or using a `titleBarStyle` so that the standard window controls ("traffic lights" on macOS) are visible, this property enables the Window Controls Overlay [JavaScript APIs][overlay-javascript-apis] and [CSS Environment Variables][overlay-css-env-vars]. Specifying `true` will result in an overlay with default system colors. Default is `false`.
-    * `color` String (optional) _Windows_ - The CSS color of the Window Controls Overlay when enabled. Default is the system color.
-    * `symbolColor` String (optional) _Windows_ - The CSS color of the symbols on the Window Controls Overlay when enabled. Default is the system color.
-    * `height` Integer (optional) _macOS_ _Windows_ - The height of the title bar and Window Controls Overlay in pixels. Default is system height.
-
-When setting minimum or maximum window size with `minWidth`/`maxWidth`/
-`minHeight`/`maxHeight`, it only constrains the users. It won't prevent you from
-passing a size that does not follow size constraints to `setBounds`/`setSize` or
-to the constructor of `BrowserWindow`.
-
-The possible values and behaviors of the `type` option are platform dependent.
-Possible values are:
-
-* On Linux, possible types are `desktop`, `dock`, `toolbar`, `splash`,
-  `notification`.
-* On macOS, possible types are `desktop`, `textured`, `panel`.
-  * The `textured` type adds metal gradient appearance
-    (`NSWindowStyleMaskTexturedBackground`).
-  * The `desktop` type places the window at the desktop background window level
-    (`kCGDesktopWindowLevel - 1`). Note that desktop window will not receive
-    focus, keyboard or mouse events, but you can use `globalShortcut` to receive
-    input sparingly.
-  * The `panel` type enables the window to float on top of full-screened apps
-    by adding the `NSWindowStyleMaskNonactivatingPanel` style mask,normally
-    reserved for NSPanel, at runtime. Also, the window will appear on all
-    spaces (desktops).
-* On Windows, possible type is `toolbar`.
+* `options` [BrowserWindowConstructorOptions](structures/browser-window-options.md?inline) (optional)
 
 ### Instance Events
 
@@ -992,6 +705,8 @@ 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.
@@ -1842,16 +1557,36 @@ 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.setTrafficLightPosition(position)` _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_
 
 * `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.
 
-#### `win.getTrafficLightPosition()` _macOS_
+> **Note**
+> This function is deprecated. Use [setWindowButtonPosition](#winsetwindowbuttonpositionposition-macos) instead.
+
+#### `win.getTrafficLightPosition()` _macOS_ _Deprecated_
 
 Returns `Point` - The custom position for the traffic light buttons in
-frameless window.
+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.
 
 #### `win.setTouchBar(touchBar)` _macOS_
 
@@ -1910,12 +1645,8 @@ removed in future Electron releases.
 On a Window with Window Controls Overlay already enabled, this method updates
 the style of the title bar overlay.
 
-[runtime-enabled-features]: https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/platform/runtime_enabled_features.json5
 [page-visibility-api]: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
 [quick-look]: https://en.wikipedia.org/wiki/Quick_Look
 [vibrancy-docs]: https://developer.apple.com/documentation/appkit/nsvisualeffectview?preferredLanguage=objc
 [window-levels]: https://developer.apple.com/documentation/appkit/nswindow/level
-[chrome-content-scripts]: https://developer.chrome.com/extensions/content_scripts#execution-environment
 [event-emitter]: https://nodejs.org/api/events.html#events_class_eventemitter
-[overlay-javascript-apis]: https://github.com/WICG/window-controls-overlay/blob/main/explainer.md#javascript-apis
-[overlay-css-env-vars]: https://github.com/WICG/window-controls-overlay/blob/main/explainer.md#css-environment-variables

docs/api/client-request.md

@@ -23,12 +23,14 @@ 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` or `omit`. Whether to
-    send [credentials](https://fetch.spec.whatwg.org/#credentials) with this
+  * `credentials` string (optional) - Can be `include`, `omit` or
+    `same-origin`. 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). This matches the behavior of the
+    event of a 401). If set to `same-origin`, `origin` must also be specified.
+    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
@@ -49,6 +51,13 @@ 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
@@ -234,6 +243,8 @@ 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(out))
+console.log(buffer.equals(ret))
 // 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/socorro)
+* [socorro](https://github.com/mozilla-services/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,6 +63,62 @@ 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.
@@ -73,6 +129,45 @@ won't be able to connect to remote sites. However, a return value of
 whether a particular connection attempt to a particular remote site
 will be successful.
 
+#### `net.resolveHost(host, [options])`
+
+* `host` string - Hostname to resolve.
+* `options` Object (optional)
+  * `queryType` string (optional) - Requested DNS query type. If unspecified,
+    resolver will pick A or AAAA (or both) based on IPv4/IPv6 settings:
+    * `A` - Fetch only A records
+    * `AAAA` - Fetch only AAAA records.
+  * `source` string (optional) - The source to use for resolved addresses.
+    Default allows the resolver to pick an appropriate source. Only affects use
+    of big external sources (e.g. calling the system for resolution or using
+    DNS). Even if a source is specified, results can still come from cache,
+    resolving "localhost" or IP literals, etc. One of the following values:
+    * `any` (default) - Resolver will pick an appropriate source. Results could
+      come from DNS, MulticastDNS, HOSTS file, etc
+    * `system` - Results will only be retrieved from the system or OS, e.g. via
+      the `getaddrinfo()` system call
+    * `dns` - Results will only come from DNS queries
+    * `mdns` - Results will only come from Multicast DNS queries
+    * `localOnly` - No external sources will be used. Results will only come
+      from fast local sources that are available no matter the source setting,
+      e.g. cache, hosts file, IP literal resolution, etc.
+  * `cacheUsage` string (optional) - Indicates what DNS cache entries, if any,
+    can be used to provide a response. One of the following values:
+    * `allowed` (default) - Results may come from the host cache if non-stale
+    * `staleAllowed` - Results may come from the host cache even if stale (by
+      expiration or network changes)
+    * `disallowed` - Results will not come from the host cache.
+  * `secureDnsPolicy` string (optional) - Controls the resolver's Secure DNS
+    behavior for this request. One of the following values:
+    * `allow` (default)
+    * `disable`
+
+Returns [`Promise<ResolvedHost>`](structures/resolved-host.md) - Resolves with the resolved IP addresses for the `host`.
+
+This method will resolve hosts from the [default
+session](session.md#sessiondefaultsession). To resolve a host from
+another session, use [ses.resolveHost()](session.md#sesresolvehosthost-options).
+
 ## Properties
 
 ### `net.online` _Readonly_

docs/api/power-monitor.md

@@ -24,6 +24,30 @@ 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
@@ -55,7 +79,7 @@ The `powerMonitor` module has the following methods:
 
 * `idleThreshold` Integer
 
-Returns `string` - The system's current state. Can be `active`, `idle`, `locked` or `unknown`.
+Returns `string` - The system's current idle 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.
@@ -66,6 +90,10 @@ 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,8 +49,11 @@ beginning to load the web page or the main script.
 
 ### `process.defaultApp` _Readonly_
 
-A `boolean`. When app is started by being passed as parameter to the default app, this
+A `boolean`. When the app is started by being passed as parameter to the default Electron executable, 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,15 +8,11 @@ An example of implementing a protocol that has the same effect as the
 `file://` protocol:
 
 ```javascript
-const { app, protocol } = require('electron')
-const path = require('path')
-const url = require('url')
+const { app, protocol, net } = require('electron')
 
 app.whenReady().then(() => {
-  protocol.registerFileProtocol('atom', (request, callback) => {
-    const filePath = url.fileURLToPath('file://' + request.url.slice('atom://'.length))
-    callback(filePath)
-  })
+  protocol.handle('atom', (request) =>
+    net.fetch('file://' + request.url.slice('atom://'.length)))
 })
 ```
 
@@ -38,14 +34,15 @@ 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.registerFileProtocol('atom', (request, callback) => {
-    const url = request.url.substr(7)
-    callback({ path: path.normalize(`${__dirname}/${url}`) })
+  ses.protocol.handle('atom', (request) => {
+    const path = request.url.slice('atom://'.length)
+    return net.fetch(url.pathToFileURL(path.join(__dirname, path)))
   })
 
   mainWindow = new BrowserWindow({ webPreferences: { partition } })
@@ -109,7 +106,74 @@ 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.registerFileProtocol(scheme, handler)`
+### `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_
 
 * `scheme` string
 * `handler` Function
@@ -130,7 +194,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)`
+### `protocol.registerBufferProtocol(scheme, handler)` _Deprecated_
 
 * `scheme` string
 * `handler` Function
@@ -154,7 +218,7 @@ protocol.registerBufferProtocol('atom', (request, callback) => {
 })
 ```
 
-### `protocol.registerStringProtocol(scheme, handler)`
+### `protocol.registerStringProtocol(scheme, handler)` _Deprecated_
 
 * `scheme` string
 * `handler` Function
@@ -170,7 +234,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)`
+### `protocol.registerHttpProtocol(scheme, handler)` _Deprecated_
 
 * `scheme` string
 * `handler` Function
@@ -185,7 +249,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)`
+### `protocol.registerStreamProtocol(scheme, handler)` _Deprecated_
 
 * `scheme` string
 * `handler` Function
@@ -234,7 +298,7 @@ protocol.registerStreamProtocol('atom', (request, callback) => {
 })
 ```
 
-### `protocol.unregisterProtocol(scheme)`
+### `protocol.unregisterProtocol(scheme)` _Deprecated_
 
 * `scheme` string
 
@@ -242,13 +306,13 @@ Returns `boolean` - Whether the protocol was successfully unregistered
 
 Unregisters the custom protocol of `scheme`.
 
-### `protocol.isProtocolRegistered(scheme)`
+### `protocol.isProtocolRegistered(scheme)` _Deprecated_
 
 * `scheme` string
 
 Returns `boolean` - Whether `scheme` is already registered.
 
-### `protocol.interceptFileProtocol(scheme, handler)`
+### `protocol.interceptFileProtocol(scheme, handler)` _Deprecated_
 
 * `scheme` string
 * `handler` Function
@@ -261,7 +325,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)`
+### `protocol.interceptStringProtocol(scheme, handler)` _Deprecated_
 
 * `scheme` string
 * `handler` Function
@@ -274,7 +338,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)`
+### `protocol.interceptBufferProtocol(scheme, handler)` _Deprecated_
 
 * `scheme` string
 * `handler` Function
@@ -287,7 +351,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)`
+### `protocol.interceptHttpProtocol(scheme, handler)` _Deprecated_
 
 * `scheme` string
 * `handler` Function
@@ -300,7 +364,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)`
+### `protocol.interceptStreamProtocol(scheme, handler)` _Deprecated_
 
 * `scheme` string
 * `handler` Function
@@ -313,7 +377,7 @@ Returns `boolean` - Whether the protocol was successfully intercepted
 Same as `protocol.registerStreamProtocol`, except that it replaces an existing
 protocol handler.
 
-### `protocol.uninterceptProtocol(scheme)`
+### `protocol.uninterceptProtocol(scheme)` _Deprecated_
 
 * `scheme` string
 
@@ -321,7 +385,7 @@ Returns `boolean` - Whether the protocol was successfully unintercepted
 
 Remove the interceptor installed for `scheme` and restore its original handler.
 
-### `protocol.isProtocolIntercepted(scheme)`
+### `protocol.isProtocolIntercepted(scheme)` _Deprecated_
 
 * `scheme` string
 

docs/api/session.md

@@ -42,6 +42,22 @@ 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:
@@ -503,9 +519,8 @@ app.whenReady().then(() => {
 Returns:
 
 * `event` Event
-* `details` Object
-  * `device` [USBDevice](structures/usb-device.md)
-  * `frame` [WebFrameMain](web-frame-main.md)
+* `device` [USBDevice](structures/usb-device.md)
+* `webContents` [WebContents](web-contents.md)
 
 Emitted after `navigator.usb.requestDevice` has been called and
 `select-usb-device` has fired if a new device becomes available before
@@ -518,9 +533,8 @@ with the newly added device.
 Returns:
 
 * `event` Event
-* `details` Object
-  * `device` [USBDevice](structures/usb-device.md)
-  * `frame` [WebFrameMain](web-frame-main.md)
+* `device` [USBDevice](structures/usb-device.md)
+* `webContents` [WebContents](web-contents.md)
 
 Emitted after `navigator.usb.requestDevice` has been called and
 `select-usb-device` has fired if a device has been removed before the callback
@@ -534,7 +548,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
@@ -766,6 +780,61 @@ 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
@@ -955,7 +1024,7 @@ Passing `null` instead of a function resets the handler to its default state.
   * `details` Object
     * `deviceType` string - The type of device that permission is being requested on, can be `hid`, `serial`, or `usb`.
     * `origin` string - The origin URL of the device permission check.
-    * `device` [HIDDevice](structures/hid-device.md) | [SerialPort](structures/serial-port.md)- the device that permission is being requested for.
+    * `device` [HIDDevice](structures/hid-device.md) | [SerialPort](structures/serial-port.md) | [USBDevice](structures/usb-device.md) - the device that permission is being requested for.
 
 Sets the handler which can be used to respond to device permission checks for the `session`.
 Returning `true` will allow the device to be permitted and `false` will reject it.

docs/api/structures/browser-window-options.md

@@ -0,0 +1,154 @@
+# BrowserWindowConstructorOptions Object
+
+* `width` Integer (optional) - Window's width in pixels. Default is `800`.
+* `height` Integer (optional) - Window's height in pixels. Default is `600`.
+* `x` Integer (optional) - (**required** if y is used) Window's left offset from screen.
+  Default is to center the window.
+* `y` Integer (optional) - (**required** if x is used) Window's top offset from screen.
+  Default is to center the window.
+* `useContentSize` boolean (optional) - The `width` and `height` would be used as web
+  page's size, which means the actual window's size will include window
+  frame's size and be slightly larger. Default is `false`.
+* `center` boolean (optional) - Show window in the center of the screen. Default is `false`.
+* `minWidth` Integer (optional) - Window's minimum width. Default is `0`.
+* `minHeight` Integer (optional) - Window's minimum height. Default is `0`.
+* `maxWidth` Integer (optional) - Window's maximum width. Default is no limit.
+* `maxHeight` Integer (optional) - Window's maximum height. Default is no limit.
+* `resizable` boolean (optional) - Whether window is resizable. Default is `true`.
+* `movable` boolean (optional) _macOS_ _Windows_ - Whether window is
+  movable. This is not implemented on Linux. Default is `true`.
+* `minimizable` boolean (optional) _macOS_ _Windows_ - Whether window is
+  minimizable. This is not implemented on Linux. Default is `true`.
+* `maximizable` boolean (optional) _macOS_ _Windows_ - Whether window is
+  maximizable. This is not implemented on Linux. Default is `true`.
+* `closable` boolean (optional) _macOS_ _Windows_ - Whether window is
+  closable. This is not implemented on Linux. Default is `true`.
+* `focusable` boolean (optional) - Whether the window can be focused. Default is
+  `true`. On Windows setting `focusable: false` also implies setting
+  `skipTaskbar: true`. On Linux setting `focusable: false` makes the window
+  stop interacting with wm, so the window will always stay on top in all
+  workspaces.
+* `alwaysOnTop` boolean (optional) - Whether the window should always stay on top of
+  other windows. Default is `false`.
+* `fullscreen` boolean (optional) - Whether the window should show in fullscreen. When
+  explicitly set to `false` the fullscreen button will be hidden or disabled
+  on macOS. Default is `false`.
+* `fullscreenable` boolean (optional) - Whether the window can be put into fullscreen
+  mode. On macOS, also whether the maximize/zoom button should toggle full
+  screen mode or maximize window. Default is `true`.
+* `simpleFullscreen` boolean (optional) _macOS_ - Use pre-Lion fullscreen on
+  macOS. Default is `false`.
+* `skipTaskbar` boolean (optional) _macOS_ _Windows_ - Whether to show the window in taskbar.
+  Default is `false`.
+* `hiddenInMissionControl` boolean (optional) _macOS_ - Whether window should be hidden when the user toggles into mission control.
+* `kiosk` boolean (optional) - Whether the window is in kiosk mode. Default is `false`.
+* `title` string (optional) - Default window title. Default is `"Electron"`. If the HTML tag `<title>` is defined in the HTML file loaded by `loadURL()`, this property will be ignored.
+* `icon` ([NativeImage](../native-image.md) | string) (optional) - The window icon. On Windows it is
+  recommended to use `ICO` icons to get best visual effects, you can also
+  leave it undefined so the executable's icon will be used.
+* `show` boolean (optional) - Whether window should be shown when created. Default is
+  `true`.
+* `paintWhenInitiallyHidden` boolean (optional) - Whether the renderer should be active when `show` is `false` and it has just been created.  In order for `document.visibilityState` to work correctly on first load with `show: false` you should set this to `false`.  Setting this to `false` will cause the `ready-to-show` event to not fire.  Default is `true`.
+* `frame` boolean (optional) - Specify `false` to create a
+  [frameless window](../../tutorial/window-customization.md#create-frameless-windows). Default is `true`.
+* `parent` BrowserWindow (optional) - Specify parent window. Default is `null`.
+* `modal` boolean (optional) - Whether this is a modal window. This only works when the
+  window is a child window. Default is `false`.
+* `acceptFirstMouse` boolean (optional) _macOS_ - Whether clicking an
+  inactive window will also click through to the web contents. Default is
+  `false` on macOS. This option is not configurable on other platforms.
+* `disableAutoHideCursor` boolean (optional) - Whether to hide cursor when typing.
+  Default is `false`.
+* `autoHideMenuBar` boolean (optional) - Auto hide the menu bar unless the `Alt`
+  key is pressed. Default is `false`.
+* `enableLargerThanScreen` boolean (optional) _macOS_ - Enable the window to
+  be resized larger than screen. Only relevant for macOS, as other OSes
+  allow larger-than-screen windows by default. Default is `false`.
+* `backgroundColor` string (optional) - The window's background color in Hex, RGB, RGBA, HSL, HSLA or named CSS color format. Alpha in #AARRGGBB format is supported if `transparent` is set to `true`. Default is `#FFF` (white). See [win.setBackgroundColor](../browser-window.md#winsetbackgroundcolorbackgroundcolor) for more information.
+* `hasShadow` boolean (optional) - Whether window should have a shadow. Default is `true`.
+* `opacity` number (optional) _macOS_ _Windows_ - Set the initial opacity of
+  the window, between 0.0 (fully transparent) and 1.0 (fully opaque). This
+  is only implemented on Windows and macOS.
+* `darkTheme` boolean (optional) - Forces using dark theme for the window, only works on
+  some GTK+3 desktop environments. Default is `false`.
+* `transparent` boolean (optional) - Makes the window [transparent](../../tutorial/window-customization.md#create-transparent-windows).
+  Default is `false`. On Windows, does not work unless the window is frameless.
+* `type` string (optional) - The type of window, default is normal window. See more about
+  this below.
+* `visualEffectState` string (optional) _macOS_ - Specify how the material
+  appearance should reflect window activity state on macOS. Must be used
+  with the `vibrancy` property. Possible values are:
+  * `followWindow` - The backdrop should automatically appear active when the window is active, and inactive when it is not. This is the default.
+  * `active` - The backdrop should always appear active.
+  * `inactive` - The backdrop should always appear inactive.
+* `titleBarStyle` string (optional) _macOS_ _Windows_ - The style of window title bar.
+  Default is `default`. Possible values are:
+  * `default` - Results in the standard title bar for macOS or Windows respectively.
+  * `hidden` - Results in a hidden title bar and a full size content window. On macOS, the window still has the standard window controls (“traffic lights”) in the top left. On Windows, when combined with `titleBarOverlay: true` it will activate the Window Controls Overlay (see `titleBarOverlay` for more information), otherwise no window controls will be shown.
+  * `hiddenInset` _macOS_ - Only on macOS, results in a hidden title bar
+    with an alternative look where the traffic light buttons are slightly
+    more inset from the window edge.
+  * `customButtonsOnHover` _macOS_ - Only on macOS, results in a hidden
+    title bar and a full size content window, the traffic light buttons will
+    display when being hovered over in the top left of the window.
+    **Note:** This option is currently experimental.
+* `trafficLightPosition` [Point](point.md) (optional) _macOS_ -
+  Set a custom position for the traffic light buttons in frameless windows.
+* `roundedCorners` boolean (optional) _macOS_ - Whether frameless window
+  should have rounded corners on macOS. Default is `true`. Setting this property
+  to `false` will prevent the window from being fullscreenable.
+* `fullscreenWindowTitle` boolean (optional) _macOS_ _Deprecated_ - Shows
+  the title in the title bar in full screen mode on macOS for `hiddenInset`
+  titleBarStyle. Default is `false`.
+* `thickFrame` boolean (optional) - Use `WS_THICKFRAME` style for frameless windows on
+  Windows, which adds standard window frame. Setting it to `false` will remove
+  window shadow and window animations. Default is `true`.
+* `vibrancy` string (optional) _macOS_ - Add a type of vibrancy effect to
+  the window, only on macOS. Can be `appearance-based`, `light`, `dark`,
+  `titlebar`, `selection`, `menu`, `popover`, `sidebar`, `medium-light`,
+  `ultra-dark`, `header`, `sheet`, `window`, `hud`, `fullscreen-ui`,
+  `tooltip`, `content`, `under-window`, or `under-page`. Please note that
+  `appearance-based`, `light`, `dark`, `medium-light`, and `ultra-dark` are
+  deprecated and have been removed in macOS Catalina (10.15).
+* `zoomToPageWidth` boolean (optional) _macOS_ - Controls the behavior on
+  macOS when option-clicking the green stoplight button on the toolbar or by
+  clicking the Window > Zoom menu item. If `true`, the window will grow to
+  the preferred width of the web page when zoomed, `false` will cause it to
+  zoom to the width of the screen. This will also affect the behavior when
+  calling `maximize()` directly. Default is `false`.
+* `tabbingIdentifier` string (optional) _macOS_ - Tab group name, allows
+  opening the window as a native tab. Windows with the same
+  tabbing identifier will be grouped together. This also adds a native new
+  tab button to your window's tab bar and allows your `app` and window to
+  receive the `new-window-for-tab` event.
+* `webPreferences` [WebPreferences](web-preferences.md?inline) (optional) - Settings of web page's features.
+* `titleBarOverlay` Object | Boolean (optional) -  When using a frameless window in conjunction with `win.setWindowButtonVisibility(true)` on macOS or using a `titleBarStyle` so that the standard window controls ("traffic lights" on macOS) are visible, this property enables the Window Controls Overlay [JavaScript APIs][overlay-javascript-apis] and [CSS Environment Variables][overlay-css-env-vars]. Specifying `true` will result in an overlay with default system colors. Default is `false`.
+  * `color` String (optional) _Windows_ - The CSS color of the Window Controls Overlay when enabled. Default is the system color.
+  * `symbolColor` String (optional) _Windows_ - The CSS color of the symbols on the Window Controls Overlay when enabled. Default is the system color.
+  * `height` Integer (optional) _macOS_ _Windows_ - The height of the title bar and Window Controls Overlay in pixels. Default is system height.
+
+When setting minimum or maximum window size with `minWidth`/`maxWidth`/
+`minHeight`/`maxHeight`, it only constrains the users. It won't prevent you from
+passing a size that does not follow size constraints to `setBounds`/`setSize` or
+to the constructor of `BrowserWindow`.
+
+The possible values and behaviors of the `type` option are platform dependent.
+Possible values are:
+
+* On Linux, possible types are `desktop`, `dock`, `toolbar`, `splash`,
+  `notification`.
+* On macOS, possible types are `desktop`, `textured`, `panel`.
+  * The `textured` type adds metal gradient appearance
+    (`NSWindowStyleMaskTexturedBackground`).
+  * The `desktop` type places the window at the desktop background window level
+    (`kCGDesktopWindowLevel - 1`). Note that desktop window will not receive
+    focus, keyboard or mouse events, but you can use `globalShortcut` to receive
+    input sparingly.
+  * The `panel` type enables the window to float on top of full-screened apps
+    by adding the `NSWindowStyleMaskNonactivatingPanel` style mask,normally
+    reserved for NSPanel, at runtime. Also, the window will appear on all
+    spaces (desktops).
+* On Windows, possible type is `toolbar`.
+
+[overlay-css-env-vars]: https://github.com/WICG/window-controls-overlay/blob/main/explainer.md#css-environment-variables
+[overlay-javascript-apis]: https://github.com/WICG/window-controls-overlay/blob/main/explainer.md#javascript-apis

docs/api/structures/event.md

@@ -1,3 +0,0 @@
-# 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 - Defaults to `0`.
-* `length` Integer - Number of bytes to read from `offset`.
+* `offset` Integer (optional) - Defaults to `0`.
+* `length` Integer (optional) - Number of bytes to read from `offset`.
   Defaults to `0`.
-* `modificationTime` Double - Last Modification time in
-  number of seconds since the UNIX epoch.
+* `modificationTime` Double (optional) - Last Modification time in
+  number of seconds since the UNIX epoch. Defaults to `0`.

docs/api/structures/web-preferences.md

@@ -0,0 +1,143 @@
+# WebPreferences Object
+
+* `devTools` boolean (optional) - Whether to enable DevTools. If it is set to `false`, can not use `BrowserWindow.webContents.openDevTools()` to open DevTools. Default is `true`.
+* `nodeIntegration` boolean (optional) - Whether node integration is enabled.
+  Default is `false`.
+* `nodeIntegrationInWorker` boolean (optional) - Whether node integration is
+  enabled in web workers. Default is `false`. More about this can be found
+  in [Multithreading](../../tutorial/multithreading.md).
+* `nodeIntegrationInSubFrames` boolean (optional) - Experimental option for
+  enabling Node.js support in sub-frames such as iframes and child windows. All your preloads will load for
+  every iframe, you can use `process.isMainFrame` to determine if you are
+  in the main frame or not.
+* `preload` string (optional) - Specifies a script that will be loaded before other
+  scripts run in the page. This script will always have access to node APIs
+  no matter whether node integration is turned on or off. The value should
+  be the absolute file path to the script.
+  When node integration is turned off, the preload script can reintroduce
+  Node global symbols back to the global scope. See example
+  [here](../context-bridge.md#exposing-node-global-symbols).
+* `sandbox` boolean (optional) - If set, this will sandbox the renderer
+  associated with the window, making it compatible with the Chromium
+  OS-level sandbox and disabling the Node.js engine. This is not the same as
+  the `nodeIntegration` option and the APIs available to the preload script
+  are more limited. Read more about the option [here](../../tutorial/sandbox.md).
+* `session` [Session](../session.md#class-session) (optional) - Sets the session used by the
+  page. Instead of passing the Session object directly, you can also choose to
+  use the `partition` option instead, which accepts a partition string. When
+  both `session` and `partition` are provided, `session` will be preferred.
+  Default is the default session.
+* `partition` string (optional) - Sets the session used by the page according to the
+  session's partition string. If `partition` starts with `persist:`, the page
+  will use a persistent session available to all pages in the app with the
+  same `partition`. If there is no `persist:` prefix, the page will use an
+  in-memory session. By assigning the same `partition`, multiple pages can share
+  the same session. Default is the default session.
+* `zoomFactor` number (optional) - The default zoom factor of the page, `3.0` represents
+  `300%`. Default is `1.0`.
+* `javascript` boolean (optional) - Enables JavaScript support. Default is `true`.
+* `webSecurity` boolean (optional) - When `false`, it will disable the
+  same-origin policy (usually using testing websites by people), and set
+  `allowRunningInsecureContent` to `true` if this options has not been set
+  by user. Default is `true`.
+* `allowRunningInsecureContent` boolean (optional) - Allow an https page to run
+  JavaScript, CSS or plugins from http URLs. Default is `false`.
+* `images` boolean (optional) - Enables image support. Default is `true`.
+* `imageAnimationPolicy` string (optional) - Specifies how to run image animations (E.g. GIFs).  Can be `animate`, `animateOnce` or `noAnimation`.  Default is `animate`.
+* `textAreasAreResizable` boolean (optional) - Make TextArea elements resizable. Default
+  is `true`.
+* `webgl` boolean (optional) - Enables WebGL support. Default is `true`.
+* `plugins` boolean (optional) - Whether plugins should be enabled. Default is `false`.
+* `experimentalFeatures` boolean (optional) - Enables Chromium's experimental features.
+  Default is `false`.
+* `scrollBounce` boolean (optional) _macOS_ - Enables scroll bounce
+  (rubber banding) effect on macOS. Default is `false`.
+* `enableBlinkFeatures` string (optional) - A list of feature strings separated by `,`, like
+  `CSSVariables,KeyboardEventKey` to enable. The full list of supported feature
+  strings can be found in the [RuntimeEnabledFeatures.json5][runtime-enabled-features]
+  file.
+* `disableBlinkFeatures` string (optional) - A list of feature strings separated by `,`,
+  like `CSSVariables,KeyboardEventKey` to disable. The full list of supported
+  feature strings can be found in the
+  [RuntimeEnabledFeatures.json5][runtime-enabled-features] file.
+* `defaultFontFamily` Object (optional) - Sets the default font for the font-family.
+  * `standard` string (optional) - Defaults to `Times New Roman`.
+  * `serif` string (optional) - Defaults to `Times New Roman`.
+  * `sansSerif` string (optional) - Defaults to `Arial`.
+  * `monospace` string (optional) - Defaults to `Courier New`.
+  * `cursive` string (optional) - Defaults to `Script`.
+  * `fantasy` string (optional) - Defaults to `Impact`.
+* `defaultFontSize` Integer (optional) - Defaults to `16`.
+* `defaultMonospaceFontSize` Integer (optional) - Defaults to `13`.
+* `minimumFontSize` Integer (optional) - Defaults to `0`.
+* `defaultEncoding` string (optional) - Defaults to `ISO-8859-1`.
+* `backgroundThrottling` boolean (optional) - Whether to throttle animations and timers
+  when the page becomes background. This also affects the
+  [Page Visibility API](../browser-window.md#page-visibility). Defaults to `true`.
+* `offscreen` boolean (optional) - Whether to enable offscreen rendering for the browser
+  window. Defaults to `false`. See the
+  [offscreen rendering tutorial](../../tutorial/offscreen-rendering.md) for
+  more details.
+* `contextIsolation` boolean (optional) - Whether to run Electron APIs and
+  the specified `preload` script in a separate JavaScript context. Defaults
+  to `true`. The context that the `preload` script runs in will only have
+  access to its own dedicated `document` and `window` globals, as well as
+  its own set of JavaScript builtins (`Array`, `Object`, `JSON`, etc.),
+  which are all invisible to the loaded content. The Electron API will only
+  be available in the `preload` script and not the loaded page. This option
+  should be used when loading potentially untrusted remote content to ensure
+  the loaded content cannot tamper with the `preload` script and any
+  Electron APIs being used.  This option uses the same technique used by
+  [Chrome Content Scripts][chrome-content-scripts].  You can access this
+  context in the dev tools by selecting the 'Electron Isolated Context'
+  entry in the combo box at the top of the Console tab.
+* `webviewTag` boolean (optional) - Whether to enable the [`<webview>` tag](../webview-tag.md).
+  Defaults to `false`. **Note:** The
+  `preload` script configured for the `<webview>` will have node integration
+  enabled when it is executed so you should ensure remote/untrusted content
+  is not able to create a `<webview>` tag with a possibly malicious `preload`
+  script. You can use the `will-attach-webview` event on [webContents](../web-contents.md)
+  to strip away the `preload` script and to validate or alter the
+  `<webview>`'s initial settings.
+* `additionalArguments` string[] (optional) - A list of strings that will be appended
+  to `process.argv` in the renderer process of this app.  Useful for passing small
+  bits of data down to renderer process preload scripts.
+* `safeDialogs` boolean (optional) - Whether to enable browser style
+  consecutive dialog protection. Default is `false`.
+* `safeDialogsMessage` string (optional) - The message to display when
+  consecutive dialog protection is triggered. If not defined the default
+  message would be used, note that currently the default message is in
+  English and not localized.
+* `disableDialogs` boolean (optional) - Whether to disable dialogs
+  completely. Overrides `safeDialogs`. Default is `false`.
+* `navigateOnDragDrop` boolean (optional) - Whether dragging and dropping a
+  file or link onto the page causes a navigation. Default is `false`.
+* `autoplayPolicy` string (optional) - Autoplay policy to apply to
+  content in the window, can be `no-user-gesture-required`,
+  `user-gesture-required`, `document-user-activation-required`. Defaults to
+  `no-user-gesture-required`.
+* `disableHtmlFullscreenWindowResize` boolean (optional) - Whether to
+  prevent the window from resizing when entering HTML Fullscreen. Default
+  is `false`.
+* `accessibleTitle` string (optional) - An alternative title string provided only
+  to accessibility tools such as screen readers. This string is not directly
+  visible to users.
+* `spellcheck` boolean (optional) - Whether to enable the builtin spellchecker.
+  Default is `true`.
+* `enableWebSQL` boolean (optional) - Whether to enable the [WebSQL api](https://www.w3.org/TR/webdatabase/).
+  Default is `true`.
+* `v8CacheOptions` string (optional) - Enforces the v8 code caching policy
+  used by blink. Accepted values are
+  * `none` - Disables code caching
+  * `code` - Heuristic based code caching
+  * `bypassHeatCheck` - Bypass code caching heuristics but with lazy compilation
+  * `bypassHeatCheckAndEagerCompile` - Same as above except compilation is eager.
+  Default policy is `code`.
+* `enablePreferredSizeMode` boolean (optional) - Whether to enable
+  preferred size mode. The preferred size is the minimum size needed to
+  contain the layout of the document—without requiring scrolling. Enabling
+  this will cause the `preferred-size-changed` event to be emitted on the
+  `WebContents` when the preferred size changes. Default is `false`.
+
+[chrome-content-scripts]: https://developer.chrome.com/extensions/content_scripts#execution-environment
+[runtime-enabled-features]: https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/platform/runtime_enabled_features.json5

docs/api/web-contents.md

@@ -19,6 +19,36 @@ 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:
@@ -35,28 +65,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/),
@@ -180,7 +210,7 @@ Returns:
   * `url` string - URL for the created window.
   * `frameName` string - Name given to the created window in the
      `window.open()` call.
-  * `options` BrowserWindowConstructorOptions - The options used to create the
+  * `options` [BrowserWindowConstructorOptions](structures/browser-window-options.md) - The options used to create the
     BrowserWindow. They are merged in increasing precedence: parsed options
     from the `features` string from `window.open()`, security-related
     webPreferences inherited from the parent, and options given by
@@ -207,10 +237,25 @@ See [`window.open()`](window-open.md) for more details and how to use this in co
 
 Returns:
 
-* `event` Event
-* `url` string
+* `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_
 
-Emitted when a user or the page wants to start navigation. It can happen when
+Emitted when a user or the page wants to start navigation on the main frame. 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
@@ -222,30 +267,79 @@ 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:
 
-* `event` Event
-* `url` string
-* `isInPlace` boolean
-* `isMainFrame` boolean
-* `frameProcessId` Integer
-* `frameRoutingId` Integer
+* `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_
 
-Emitted when any frame (including main) starts navigating. `isInPlace` will be
-`true` for in-page navigations.
+Emitted when any frame (including main) starts navigating.
 
 #### Event: 'will-redirect'
 
 Returns:
 
-* `event` Event
-* `url` string
-* `isInPlace` boolean
-* `isMainFrame` boolean
-* `frameProcessId` Integer
-* `frameRoutingId` Integer
+* `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_
 
 Emitted when a server side redirect occurs during navigation.  For example a 302
 redirect.
@@ -260,12 +354,23 @@ redirect).
 
 Returns:
 
-* `event` Event
-* `url` string
-* `isInPlace` boolean
-* `isMainFrame` boolean
-* `frameProcessId` Integer
-* `frameRoutingId` Integer
+* `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_
 
 Emitted after a server side redirect occurs during navigation.  For example a 302
 redirect.
@@ -496,6 +601,7 @@ window.
 
 Returns:
 
+* `event` Event
 * `url` string - URL of the link that was clicked or selected.
 
 Emitted when a link is clicked in DevTools or 'Open in new tab' is selected for a link in its context menu.
@@ -588,6 +694,15 @@ 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:
@@ -789,7 +904,7 @@ Emitted when the devtools window instructs the webContents to reload
 Returns:
 
 * `event` Event
-* `webPreferences` WebPreferences - The web preferences that will be used by the guest
+* `webPreferences` [WebPreferences](structures/web-preferences.md) - The web preferences that will be used by the guest
   page. This object can be modified to adjust the preferences for the guest
   page.
 * `params` Record<string, string> - The other `<webview>` parameters such as the `src` URL.
@@ -838,7 +953,7 @@ Emitted when the preload script `preloadPath` throws an unhandled exception `err
 
 Returns:
 
-* `event` Event
+* `event` [IpcMainEvent](structures/ipc-main-event.md)
 * `channel` string
 * `...args` any[]
 
@@ -850,7 +965,7 @@ See also [`webContents.ipc`](#contentsipc-readonly), which provides an [`IpcMain
 
 Returns:
 
-* `event` Event
+* `event` [IpcMainEvent](structures/ipc-main-event.md)
 * `channel` string
 * `...args` any[]
 
@@ -1275,6 +1390,10 @@ Executes the editing command `cut` in web page.
 
 Executes the editing command `copy` in web page.
 
+#### `contents.centerSelection()`
+
+Centers the current text selection in web page.
+
 #### `contents.copyImageAt(x, y)`
 
 * `x` Integer
@@ -1302,6 +1421,46 @@ Executes the editing command `selectAll` in web page.
 
 Executes the editing command `unselect` in web page.
 
+#### `contents.scrollToTop()`
+
+Scrolls to the top of the current `webContents`.
+
+#### `contents.scrollToBottom()`
+
+Scrolls to the bottom of the current `webContents`.
+
+#### `contents.adjustSelection(options)`
+
+* `options` Object
+  * `start` Number (optional) - Amount to shift the start index of the current selection.
+  * `end` Number (optional) - Amount to shift the end index of the current selection.
+
+Adjusts the current text selection starting and ending points in the focused frame by the given amounts. A negative amount moves the selection towards the beginning of the document, and a positive amount moves the selection towards the end of the document.
+
+Example:
+
+```js
+const win = new BrowserWindow()
+
+// Adjusts the beginning of the selection 1 letter forward,
+// and the end of the selection 5 letters forward.
+win.webContents.adjustSelection({ start: 1, end: 5 })
+
+// Adjusts the beginning of the selection 2 letters forward,
+// and the end of the selection 3 letters backward.
+win.webContents.adjustSelection({ start: 2, end: -3 })
+```
+
+For a call of `win.webContents.adjustSelection({ start: 1, end: 5 })`
+
+Before:
+
+<img width="487" alt="Image Before Text Selection Adjustment" src="https://user-images.githubusercontent.com/2036040/231761306-cd4e7b15-c2ed-46cf-8e80-10811f6de83e.png">
+
+After:
+
+<img width="487" alt="Image After Text Selection Adjustment" src="https://user-images.githubusercontent.com/2036040/231761169-887eb8ef-06fb-46e4-9efa-898bcb0d6a2b.png">
+
 #### `contents.replace(text)`
 
 * `text` string

docs/api/webview-tag.md

@@ -463,6 +463,10 @@ Executes editing command `cut` in page.
 
 Executes editing command `copy` in page.
 
+#### `<webview>.centerSelection()`
+
+Centers the current text selection in page.
+
 ### `<webview>.paste()`
 
 Executes editing command `paste` in page.
@@ -483,6 +487,25 @@ Executes editing command `selectAll` in page.
 
 Executes editing command `unselect` in page.
 
+#### `<webview>.scrollToTop()`
+
+Scrolls to the top of the current `<webview>`.
+
+#### `<webview>.scrollToBottom()`
+
+Scrolls to the bottom of the current `<webview>`.
+
+#### `<webview>.adjustSelection(options)`
+
+* `options` Object
+  * `start` Number (optional) - Amount to shift the start index of the current selection.
+  * `end` Number (optional) - Amount to shift the end index of the current selection.
+
+Adjusts the current text selection starting and ending points in the focused frame by the given amounts. A negative amount moves the selection towards the beginning of the document, and a positive amount moves the selection towards the end of the document.
+
+See [`webContents.adjustSelection`](web-contents.md#contentsadjustselectionoptions) for
+examples.
+
 ### `<webview>.replace(text)`
 
 * `text` string
@@ -823,6 +846,28 @@ 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/api/window-open.md

@@ -33,12 +33,12 @@ because it is invoked in the main process.
 Returns [`Window`](https://developer.mozilla.org/en-US/docs/Web/API/Window) | null
 
 `features` is a comma-separated key-value list, following the standard format of
-the browser. Electron will parse `BrowserWindowConstructorOptions` out of this
+the browser. Electron will parse [`BrowserWindowConstructorOptions`](structures/browser-window-options.md) out of this
 list where possible, for convenience. For full control and better ergonomics,
 consider using `webContents.setWindowOpenHandler` to customize the
 BrowserWindow creation.
 
-A subset of `WebPreferences` can be set directly,
+A subset of [`WebPreferences`](structures/web-preferences.md) can be set directly,
 unnested, from the features string: `zoomFactor`, `nodeIntegration`, `preload`,
 `javascript`, `contextIsolation`, and `webviewTag`.
 
@@ -60,7 +60,7 @@ window.open('https://github.com', '_blank', 'top=500,left=200,frame=false,nodeIn
   `features` will be passed to any registered `webContents`'s
   `did-create-window` event handler in the `options` argument.
 * `frameName` follows the specification of `windowName` located in the [native documentation](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#parameters).
-* When opening `about:blank`, the child window's `WebPreferences` will be copied
+* When opening `about:blank`, the child window's [`WebPreferences`](structures/web-preferences.md) will be copied
   from the parent window, and there is no way to override it because Chromium
   skips browser side navigation in this case.
 
@@ -68,7 +68,7 @@ To customize or cancel the creation of the window, you can optionally set an
 override handler with `webContents.setWindowOpenHandler()` from the main
 process. Returning `{ action: 'deny' }` cancels the window. Returning `{
 action: 'allow', overrideBrowserWindowOptions: { ... } }` will allow opening
-the window and setting the `BrowserWindowConstructorOptions` to be used when
+the window and setting the [`BrowserWindowConstructorOptions`](structures/browser-window-options.md) to be used when
 creating the window. Note that this is more powerful than passing options
 through the feature string, as the renderer has more limited privileges in
 deciding security preferences than the main process.

docs/breaking-changes.md

@@ -12,6 +12,93 @@ 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
-  [github/atom](https://github.com/github/atom) module names are usually in
+  [atom/atom](https://github.com/atom/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, nativeImage, NativeImage } = require('electron')
+const { app, BrowserWindow, ipcMain } = 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,17 +1,15 @@
 // Modules to control application life and create native browser window
-const {app, BrowserWindow} = require('electron')
-const path = require('path')
+const { app, BrowserWindow } = require('electron')
 
 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 Notification(NOTIFICATION_TITLE, { body: NOTIFICATION_BODY })
-  .onclick = () => document.getElementById("output").innerText = CLICK_MESSAGE
+new window.Notification(NOTIFICATION_TITLE, { body: NOTIFICATION_BODY })
+  .onclick = () => { document.getElementById('output').innerText = CLICK_MESSAGE }

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

@@ -4,16 +4,31 @@ const path = require('path')
 
 app.disableHardwareAcceleration()
 
-let win
+function createWindow () {
+  const win = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      offscreen: true
+    }
+  })
 
-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', () => {
@@ -21,9 +36,3 @@ 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,13 +24,12 @@ 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) => {
@@ -38,7 +37,6 @@ 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 = confirm(`Do you want to connect to device ${details.deviceId}?`)
+      response.confirmed = window.confirm(`Do you want to connect to device ${details.deviceId}?`)
       break
     }
     case 'confirmPin': {
-      response.confirmed = confirm(`Does the pin ${details.pin} match the pin displayed on device ${details.deviceId}?`)
+      response.confirmed = window.confirm(`Does the pin ${details.pin} match the pin displayed on device ${details.deviceId}?`)
       break
     }
     case 'providePin': {
-      const pin = prompt(`Please provide a pin for ${details.deviceId}.`)
+      const pin = window.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,5 +1,4 @@
-const {app, BrowserWindow} = require('electron')
-const path = require('path')
+const { app, BrowserWindow } = require('electron')
 
 function createWindow () {
   const mainWindow = new BrowserWindow({
@@ -8,16 +7,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,5 +1,4 @@
-const {app, BrowserWindow} = require('electron')
-const path = require('path')
+const { app, BrowserWindow } = require('electron')
 
 function createWindow () {
   const mainWindow = new BrowserWindow({
@@ -8,24 +7,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 {
-      callback('') //Could not find any matching devices
+      // eslint-disable-next-line standard/no-callback-literal
+      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,5 +1,4 @@
-const {app, BrowserWindow} = require('electron')
-const path = require('path')
+const { app, BrowserWindow } = require('electron')
 
 function createWindow () {
   const mainWindow = new BrowserWindow({
@@ -10,22 +9,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,8 +20,7 @@ async function testIt() {
     const grantedDevice = await navigator.usb.requestDevice({
       filters: []
     })
-    grantedDeviceList += `<hr>${getDeviceDetails(device)}</hr>`
-
+    grantedDeviceList += `<hr>${getDeviceDetails(grantedDevice)}</hr>`
   } catch (ex) {
     if (ex.name === 'NotFoundError') {
       grantedDeviceList = noDevicesFoundMsg
@@ -30,4 +29,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,7 +52,6 @@ app.on('activate', function () {
   }
 })
 
-
 ipcMain.on('open-information-dialog', event => {
   const options = {
     type: 'info',
@@ -65,6 +64,5 @@ 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,7 +52,6 @@ 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,17 +5,3 @@ 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,4 +28,3 @@ app.on('window-all-closed', () => {
     app.quit()
   }
 })
-

docs/fiddles/quick-start/preload.js

@@ -8,4 +8,3 @@ 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.'
-  clipboard.writeText('Electron Demo!')
+  window.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 clipboard.writeText('What a demo!')
-  const message = `Clipboard contents: ${await clipboard.readText()}`
+  await window.clipboard.writeText('What a demo!')
+  const message = `Clipboard contents: ${await window.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', () => {
-  shell.open();
-});
+  window.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} = require('electron')
+const { ipcRenderer, shell } = require('electron')
 
 const appInfoBtn = document.getElementById('app-info')
-const electron_doc_link = document.querySelectorAll('a[href]')
+const electronDocLink = document.querySelectorAll('a[href]')
 
 appInfoBtn.addEventListener('click', () => {
   ipcRenderer.send('get-app-path')
@@ -12,7 +12,8 @@ ipcRenderer.on('got-app-path', (event, path) => {
   document.getElementById('got-app-info').innerHTML = message
 })
 
-electron_doc_link.addEventListener('click', (e) => {
+electronDocLink.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${versions.chrome()}), Node.js (v${versions.node()}), and Electron (v${versions.electron()})`;
+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()})`

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 } = require('electron')
+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)
 })
@@ -23,23 +23,21 @@ 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()
 
-// 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()
-  }
+  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()
+  })
 })
 
-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()
-  }
+// 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()
 })
 
 // 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.
-  mainWindow = new BrowserWindow({
+  const mainWindow = new BrowserWindow({
     width: 800,
     height: 600,
     webPreferences: {
@@ -33,23 +33,21 @@ 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()
 
-// 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()
-  }
+  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()
+  })
 })
 
-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()
-  }
+// 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()
 })
 
 // In this file you can include the rest of your app's specific main process