Bump v11.2.1

* chore: cherry-pick f62f983b56623f0e from sqlite.

* Fix missing comma

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

.circleci/config.yml

@@ -69,7 +69,7 @@ parameters:
 # Build machines configs.
 docker-image: &docker-image
   docker:
-    - image: electronjs/build:d09fd95029bd8c1c73069888231b29688ef385ed
+    - image: electron.azurecr.io/build:4cec2c5ab66765caa724e37bae2bffb9b29722a5
 
 machine-linux-medium: &machine-linux-medium
   <<: *docker-image
@@ -85,17 +85,17 @@ machine-linux-2xlarge: &machine-linux-2xlarge
 
 machine-mac: &machine-mac
   macos:
-    xcode: "11.5.0"
+    xcode: "12.2.0"
 
 machine-mac-large: &machine-mac-large
   resource_class: large
   macos:
-    xcode: "11.5.0"
+    xcode: "12.2.0"
 
 machine-mac-large-arm: &machine-mac-large-arm
   resource_class: large
   macos:
-    xcode: "12.0.0-large"
+    xcode: "12.2.0"
 
 # Build configurations options.
 env-testing-build: &env-testing-build
@@ -107,6 +107,7 @@ env-release-build: &env-release-build
   STRIP_BINARIES: true
   GENERATE_SYMBOLS: true
   CHECK_DIST_MANIFEST: '1'
+  IS_RELEASE: true
 
 env-headless-testing: &env-headless-testing
   DISPLAY: ':99.0'
@@ -256,23 +257,34 @@ step-gclient-sync: &step-gclient-sync
           "$CIRCLE_REPOSITORY_URL"
 
         ELECTRON_USE_THREE_WAY_MERGE_FOR_PATCHES=1 gclient sync --with_branch_heads --with_tags
-        # Re-export all the patches to check if there were changes.
-        python src/electron/script/export_all_patches.py src/electron/patches/config.json
-        cd src/electron
-        git update-index --refresh || true
-        if ! git diff-index --quiet HEAD --; then
-          # There are changes to the patches. Make a git commit with the updated patches
-          git add patches
-          GIT_COMMITTER_NAME="Electron Bot" GIT_COMMITTER_EMAIL="anonymous@electronjs.org" git commit -m "update patches" --author="Electron Bot <anonymous@electronjs.org>"
-          # Export it
-          mkdir -p ../../patches
-          git format-patch -1 --stdout --keep-subject --no-stat --full-index > ../../patches/update-patches.patch
-          echo
-          echo "======================================================================"
-          echo "There were changes to the patches when applying."
-          echo "Check the CI artifacts for a patch you can apply to fix it."
-          echo "======================================================================"
-          exit 1
+        if [ "$IS_RELEASE" != "true" ]; then
+          # Re-export all the patches to check if there were changes.
+          python src/electron/script/export_all_patches.py src/electron/patches/config.json
+          cd src/electron
+          git update-index --refresh || true
+          if ! git diff-index --quiet HEAD --; then
+            # There are changes to the patches. Make a git commit with the updated patches
+            git add patches
+            GIT_COMMITTER_NAME="Electron Bot" GIT_COMMITTER_EMAIL="electron@github.com" git commit -m "update patches" --author="Electron Bot <electron@github.com>"
+            # Export it
+            mkdir -p ../../patches
+            git format-patch -1 --stdout --keep-subject --no-stat --full-index > ../../patches/update-patches.patch
+            if (node ./script/push-patch.js 2> /dev/null > /dev/null); then
+              echo
+              echo "======================================================================"
+              echo "Changes to the patches when applying, we have auto-pushed the diff to the current branch"
+              echo "A new CI job will kick off shortly"
+              echo "======================================================================"
+              exit 1
+            else
+              echo
+              echo "======================================================================"
+              echo "There were changes to the patches when applying."
+              echo "Check the CI artifacts for a patch you can apply to fix it."
+              echo "======================================================================"
+              exit 1
+            fi
+          fi
         fi
       fi
 
@@ -299,10 +311,10 @@ step-setup-goma-for-build: &step-setup-goma-for-build
     name: Setup Goma
     command: |
       echo 'export USE_GOMA=true' >> $BASH_ENV
-      if [ "`uname`" == "Linux" ]; then
-        echo 'export NUMBER_OF_NINJA_PROCESSES=300' >> $BASH_ENV
-      else
-        echo 'export NUMBER_OF_NINJA_PROCESSES=25' >> $BASH_ENV
+      echo 'export NUMBER_OF_NINJA_PROCESSES=300' >> $BASH_ENV
+      if [ "`uname`" == "Darwin" ]; then
+        echo 'ulimit -n 10000' >> $BASH_ENV
+        echo 'sudo launchctl limit maxfiles 65536 200000' >> $BASH_ENV
       fi
       if [ ! -z "$RAW_GOMA_AUTH" ]; then
         echo $RAW_GOMA_AUTH > ~/.goma_oauth2_config
@@ -311,7 +323,7 @@ step-setup-goma-for-build: &step-setup-goma-for-build
       cd build-tools
       npm install
       mkdir third_party
-      node -e "require('./src/utils/goma.js').downloadAndPrepare()"
+      node -e "require('./src/utils/goma.js').downloadAndPrepare({ gomaOneForAll: true })"
       node -e "require('./src/utils/goma.js').ensure()"
       echo 'export GN_GOMA_FILE='`node -e "console.log(require('./src/utils/goma.js').gnFilePath)"` >> $BASH_ENV
       echo 'export LOCAL_GOMA_DIR='`node -e "console.log(require('./src/utils/goma.js').dir)"` >> $BASH_ENV
@@ -320,15 +332,17 @@ step-setup-goma-for-build: &step-setup-goma-for-build
 step-restore-brew-cache: &step-restore-brew-cache
   restore_cache:
     paths:
-      - /usr/local/Homebrew
+      - /usr/local/Cellar/gnu-tar
+      - /usr/local/bin/gtar
     keys:
-      - v1-brew-cache-{{ arch }}
+      - v4-brew-cache-{{ arch }}
 
 step-save-brew-cache: &step-save-brew-cache
   save_cache:
     paths:
-      - /usr/local/Homebrew
-    key: v1-brew-cache-{{ arch }}
+      - /usr/local/Cellar/gnu-tar
+      - /usr/local/bin/gtar
+    key: v4-brew-cache-{{ arch }}
     name: Persisting brew cache
 
 step-get-more-space-on-mac: &step-get-more-space-on-mac
@@ -468,8 +482,10 @@ step-install-gnutar-on-mac: &step-install-gnutar-on-mac
     name: Install gnu-tar on macos
     command: |
       if [ "`uname`" == "Darwin" ]; then
-        brew update
-        brew install gnu-tar
+        if [ ! -d /usr/local/Cellar/gnu-tar/ ]; then
+          brew update
+          brew install gnu-tar
+        fi
         ln -fs /usr/local/bin/gtar /usr/local/bin/tar
       fi
 
@@ -572,6 +588,9 @@ step-electron-dist-build: &step-electron-dist-build
             if [ x"$MAS_BUILD" == x"true" ]; then
               target_os=mac_mas
             fi
+            if [ "$TARGET_ARCH" == "arm64" ]; then
+              target_cpu=arm64
+            fi
           elif [ "`uname`" == "Linux" ]; then
             target_os=linux
             if [ x"$TARGET_ARCH" == x ]; then
@@ -659,10 +678,10 @@ step-electron-publish: &step-electron-publish
       cd src/electron
       if [ "$UPLOAD_TO_S3" == "1" ]; then
         echo 'Uploading Electron release distribution to S3'
-        script/release/uploaders/upload.py --upload_to_s3
+        script/release/uploaders/upload.py --verbose --upload_to_s3
       else
         echo 'Uploading Electron release distribution to Github releases'
-        script/release/uploaders/upload.py
+        script/release/uploaders/upload.py --verbose
       fi
 
 step-persist-data-for-tests: &step-persist-data-for-tests
@@ -764,14 +783,20 @@ step-setup-linux-for-headless-testing: &step-setup-linux-for-headless-testing
 
 step-show-sccache-stats: &step-show-sccache-stats
   run:
+    shell: /bin/bash
     name: Check sccache/goma stats after build
     command: |
       if [ "$SCCACHE_PATH" != "" ]; then
         $SCCACHE_PATH -s
       fi
       if [ "$USE_GOMA" == "true" ]; then
+        set +e
+        set +o pipefail
         $LOCAL_GOMA_DIR/goma_ctl.py stat
+        $LOCAL_GOMA_DIR/diagnose_goma_log.py
+        true
       fi
+    when: always
 
 step-mksnapshot-build: &step-mksnapshot-build
   run:
@@ -909,6 +934,8 @@ step-ninja-summary: &step-ninja-summary
   run:
     name: Print ninja summary
     command: |
+      set +e
+      set +o pipefail
       python depot_tools/post_build_ninja_summary.py -C src/out/Default
 
 step-ninja-report: &step-ninja-report
@@ -1135,7 +1162,6 @@ steps-checkout-and-save-cache: &steps-checkout-and-save-cache
     - *step-maybe-early-exit-doc-only-change
     - *step-depot-tools-get
     - *step-depot-tools-add-to-path
-    - *step-restore-brew-cache
     - *step-get-more-space-on-mac
     - *step-install-gnutar-on-mac
 
@@ -1799,7 +1825,7 @@ jobs:
 
   # Layer 2: Builds.
   linux-x64-testing:
-    <<: *machine-linux-xlarge
+    <<: *machine-linux-2xlarge
     environment:
       <<: *env-global
       <<: *env-testing-build
@@ -1879,7 +1905,7 @@ jobs:
           checkout: false
 
   linux-ia32-testing:
-    <<: *machine-linux-xlarge
+    <<: *machine-linux-2xlarge
     environment:
       <<: *env-global
       <<: *env-ia32
@@ -1945,7 +1971,7 @@ jobs:
           checkout: false
 
   linux-arm-testing:
-    <<: *machine-linux-xlarge
+    <<: *machine-linux-2xlarge
     environment:
       <<: *env-global
       <<: *env-arm
@@ -2012,7 +2038,7 @@ jobs:
           checkout: false
 
   linux-arm64-testing:
-    <<: *machine-linux-xlarge
+    <<: *machine-linux-2xlarge
     environment:
       <<: *env-global
       <<: *env-arm64

.gitattributes

@@ -2,3 +2,13 @@
 # files to be checked out with LF endings even if core.autocrlf is true.
 *.patch text eol=lf
 patches/**/.patches merge=union
+
+# Source code and markdown files should always use LF as line ending.
+*.cc text eol=lf
+*.mm text eol=lf
+*.h text eol=lf
+*.js text eol=lf
+*.ts text eol=lf
+*.py text eol=lf
+*.ps1 text eol=lf
+*.md text eol=lf

BUILD.gn

@@ -325,7 +325,6 @@ source_set("electron_lib") {
     "//base/allocator:buildflags",
     "//chrome/app:command_ids",
     "//chrome/app/resources:platform_locale_settings",
-    "//chrome/services/printing/public/mojom",
     "//components/certificate_transparency",
     "//components/language/core/browser",
     "//components/net_log",
@@ -372,6 +371,7 @@ source_set("electron_lib") {
     "//third_party/libyuv",
     "//third_party/webrtc_overrides:webrtc_component",
     "//third_party/widevine/cdm:headers",
+    "//third_party/zlib/google:zip",
     "//ui/base/idle",
     "//ui/events:dom_keycode_converter",
     "//ui/gl",
@@ -405,44 +405,26 @@ source_set("electron_lib") {
     defines += [ "GDK_DISABLE_DEPRECATION_WARNINGS" ]
   }
 
-  extra_source_filters = []
-  if (!is_linux) {
-    extra_source_filters += [
-      "*\bx/*",
-      "*_x11.h",
-      "*_x11.cc",
-      "*_gtk.h",
-      "*_gtk.cc",
-      "*\blibrary_loaders/*",
-    ]
-  }
-  if (!is_win) {
-    extra_source_filters += [
-      "*\bwin_*.h",
-      "*\bwin_*.cc",
-    ]
-  }
-  if (!is_posix) {
-    extra_source_filters += [
-      "*_posix.cc",
-      "*_posix.h",
-    ]
-  }
-  if (is_mac) {
-    extra_source_filters += [
-      "*_views.cc",
-      "*_views.h",
-      "*\bviews/*",
-    ]
-  }
   if (!is_mas_build) {
     deps += [ "//components/crash/core/app" ]
   }
 
-  set_sources_assignment_filter(
-      sources_assignment_filter + extra_source_filters)
   sources = filenames.lib_sources
-  set_sources_assignment_filter(sources_assignment_filter)
+  if (is_win) {
+    sources += filenames.lib_sources_win
+  }
+  if (is_mac) {
+    sources += filenames.lib_sources_mac
+  }
+  if (is_posix) {
+    sources += filenames.lib_sources_posix
+  }
+  if (is_linux) {
+    sources += filenames.lib_sources_linux
+  }
+  if (!is_mac) {
+    sources += filenames.lib_sources_views
+  }
 
   if (is_component_build) {
     defines += [ "NODE_SHARED_MODE" ]
@@ -531,7 +513,9 @@ source_set("electron_lib") {
       ]
     }
     configs += [ ":gio_unix" ]
-    configs += [ "//build/config/linux:x11" ]
+    if (use_x11) {
+      deps += [ "//ui/gfx/x" ]
+    }
     defines += [
       # Disable warnings for g_settings_list_schemas.
       "GLIB_DISABLE_DEPRECATION_WARNINGS",
@@ -587,7 +571,6 @@ source_set("electron_lib") {
     sources += [
       "shell/browser/osr/osr_host_display_client.cc",
       "shell/browser/osr/osr_host_display_client.h",
-      "shell/browser/osr/osr_host_display_client_mac.mm",
       "shell/browser/osr/osr_render_widget_host_view.cc",
       "shell/browser/osr/osr_render_widget_host_view.h",
       "shell/browser/osr/osr_video_consumer.cc",
@@ -596,8 +579,13 @@ source_set("electron_lib") {
       "shell/browser/osr/osr_view_proxy.h",
       "shell/browser/osr/osr_web_contents_view.cc",
       "shell/browser/osr/osr_web_contents_view.h",
-      "shell/browser/osr/osr_web_contents_view_mac.mm",
     ]
+    if (is_mac) {
+      sources += [
+        "shell/browser/osr/osr_host_display_client_mac.mm",
+        "shell/browser/osr/osr_web_contents_view_mac.mm",
+      ]
+    }
     deps += [
       "//components/viz/service",
       "//services/viz/public/mojom",
@@ -632,7 +620,10 @@ source_set("electron_lib") {
       "shell/renderer/printing/print_render_frame_helper_delegate.cc",
       "shell/renderer/printing/print_render_frame_helper_delegate.h",
     ]
-    deps += [ "//components/printing/common:mojo_interfaces" ]
+    deps += [
+      "//chrome/services/printing/public/mojom",
+      "//components/printing/common:mojo_interfaces",
+    ]
   }
 
   if (enable_electron_extensions) {
@@ -670,6 +661,14 @@ source_set("electron_lib") {
       "shell/browser/electron_pdf_web_contents_helper_client.h",
     ]
   }
+
+  if (is_win && enable_win_dark_mode_window_ui) {
+    sources += [
+      "shell/browser/win/dark_mode.cc",
+      "shell/browser/win/dark_mode.h",
+    ]
+    libs += [ "uxtheme.lib" ]
+  }
 }
 
 electron_paks("packed_resources") {
@@ -695,10 +694,10 @@ if (is_mac) {
   action("fake_v8_context_snapshot_generator") {
     script = "build/fake_v8_context_snapshot_generator.py"
     args = [
-      rebase_path("$root_out_dir/v8_context_snapshot.bin"),
-      rebase_path("$root_out_dir/fake/v8_context_snapshot.bin"),
+      rebase_path("$root_out_dir/$v8_context_snapshot_filename"),
+      rebase_path("$root_out_dir/fake/$v8_context_snapshot_filename"),
     ]
-    outputs = [ "$root_out_dir/fake/v8_context_snapshot.bin" ]
+    outputs = [ "$root_out_dir/fake/$v8_context_snapshot_filename" ]
   }
 
   bundle_data("electron_framework_resources") {
@@ -712,10 +711,10 @@ if (is_mac) {
       public_deps += [ "//v8" ]
       if (use_v8_context_snapshot) {
         if (use_prebuilt_v8_context_snapshot) {
-          sources += [ "$root_out_dir/fake/v8_context_snapshot.bin" ]
+          sources += [ "$root_out_dir/fake/$v8_context_snapshot_filename" ]
           public_deps += [ ":fake_v8_context_snapshot_generator" ]
         } else {
-          sources += [ "$root_out_dir/v8_context_snapshot.bin" ]
+          sources += [ "$root_out_dir/$v8_context_snapshot_filename" ]
           public_deps += [ "//tools/v8_context_snapshot" ]
         }
       } else {
@@ -1138,22 +1137,37 @@ if (is_mac) {
         "//components/crash/core/app:run_as_crashpad_handler",
       ]
 
+      ldflags = []
+
       libs = [
         "comctl32.lib",
         "uiautomationcore.lib",
         "wtsapi32.lib",
       ]
 
-      configs += [ "//build/config/win:windowed" ]
-
-      ldflags = [
-        # Windows 7 doesn't have these DLLs.
-        # TODO: are there other DLLs we need to list here to be win7
-        # compatible?
-        "/DELAYLOAD:api-ms-win-core-winrt-l1-1-0.dll",
-        "/DELAYLOAD:api-ms-win-core-winrt-string-l1-1-0.dll",
+      configs += [
+        "//build/config/win:windowed",
+        "//build/config/win:delayloads",
       ]
 
+      if (target_cpu == "arm64") {
+        configs -= [ "//build/config/win:cfi_linker" ]
+        ldflags += [ "/guard:cf,nolongjmp" ]
+      }
+
+      if (current_cpu == "x86") {
+        # Set the initial stack size to 0.5MiB, instead of the 1.5MiB needed by
+        # Chrome's main thread. This saves significant memory on threads (like
+        # those in the Windows thread pool, and others) whose stack size we can
+        # only control through this setting. Because Chrome's main thread needs
+        # a minimum 1.5 MiB stack, the main thread (in 32-bit builds only) uses
+        # fibers to switch to a 1.5 MiB stack before running any other code.
+        ldflags += [ "/STACK:0x80000" ]
+      } else {
+        # Increase the initial stack size. The default is 1MB, this is 8MB.
+        ldflags += [ "/STACK:0x800000" ]
+      }
+
       # This is to support renaming of electron.exe. node-gyp has hard-coded
       # executable names which it will recognise as node. This module definition
       # file claims that the electron executable is in fact named "node.exe",

DEPS

@@ -14,13 +14,13 @@ gclient_gn_args = [
 
 vars = {
   'chromium_version':
-    'b04584161e07d4ac110045b7647fa8a81f5f0709',
+    '87.0.4280.141',
   'node_version':
     'v12.18.3',
   'nan_version':
     '2c4ee8a32a299eada3cd6e468bbd0a473bfea96d',
   'squirrel.mac_version':
-    '44468f858ce0d25c27bd5e674abfa104e0119738',
+    'a3a5b3f03b824441c014893b18f99a103b2603e9',
 
   'boto_version': 'f7574aa6cc2c819430c1f05e9a1a1a666ef8169b',
   'pyyaml_version': '3.12',

ELECTRON_VERSION

@@ -1 +1 @@
-11.0.0-nightly.20200826
+11.2.1

appveyor.yml

@@ -53,7 +53,9 @@ build_script:
       } else {
         node script/yarn.js install --frozen-lockfile
 
-        if ($(node script/doc-only-change.js --prNumber=$env:APPVEYOR_PULL_REQUEST_NUMBER --prBranch=$env:APPVEYOR_REPO_BRANCH;$LASTEXITCODE -eq 0)) {
+        $result = node script/doc-only-change.js --prNumber=$env:APPVEYOR_PULL_REQUEST_NUMBER --prBranch=$env:APPVEYOR_REPO_BRANCH
+        Write-Output $result
+        if ($result.ExitCode -eq 0) {
           Write-warning "Skipping build for doc only change"; Exit-AppveyorBuild
         }
       }
@@ -99,6 +101,11 @@ build_script:
           } else {
             # update external binaries
             python src/electron/script/update-external-binaries.py
+            # update angle
+            cd src\third_party\angle
+            git remote set-url origin  https://chromium.googlesource.com/angle/angle.git
+            git fetch
+            cd ..\..\..
           }
         } else {    
           # file does not exist, gclient sync, then zip
@@ -114,14 +121,16 @@ build_script:
       if ($env:SAVE_GCLIENT_SRC -eq 'true') {
         # archive current source for future use 
         # only run on x64/woa to avoid contention saving
-        if ($(7z a $zipfile src -xr!android_webview -xr!electron -xr'!*\.git' -xr!third_party\WebKit\LayoutTests! -xr!third_party\blink\web_tests -xr!third_party\blink\perf_tests -slp -t7z -mmt=30;$LASTEXITCODE -ne 0)) {
+        $(7z a $zipfile src -xr!android_webview -xr!electron -xr'!*\.git' -xr!third_party\WebKit\LayoutTests! -xr!third_party\blink\web_tests -xr!third_party\blink\perf_tests -slp -t7z -mmt=30)
+        if ($LASTEXITCODE -ne 0) {
           Write-warning "Could not save source to shared drive; continuing anyway"
         }
-        # build time generation of file gen/angle/commit.h depends on
-        # third_party/angle/.git/HEAD.
+        # build time generation of file gen/angle/angle_commit.h depends on
+        # third_party/angle/.git
         # https://chromium-review.googlesource.com/c/angle/angle/+/2074924
-        if ($(7z a $zipfile src\third_party\angle\.git\HEAD;$LASTEXITCODE -ne 0)) {
-          Write-warning "Failed to add third_party\angle\.git\HEAD; continuing anyway"
+        $(7z a $zipfile src\third_party\angle\.git)
+        if ($LASTEXITCODE -ne 0) {
+          Write-warning "Failed to add third_party\angle\.git; continuing anyway"
         }
       }
   - ps: >-
@@ -134,7 +143,7 @@ build_script:
         cd build-tools
         npm install
         mkdir third_party
-        node -e "require('./src/utils/goma.js').downloadAndPrepare()"
+        node -e "require('./src/utils/goma.js').downloadAndPrepare({ gomaOneForAll: true })"
         $env:GN_GOMA_FILE = node -e "console.log(require('./src/utils/goma.js').gnFilePath)"
         $env:LOCAL_GOMA_DIR = node -e "console.log(require('./src/utils/goma.js').dir)"
         cd ..
@@ -205,7 +214,8 @@ test_script:
         echo "Skipping tests for $env:GN_CONFIG build"
       }
   - cd electron
-  - if "%RUN_TESTS%"=="true" ( echo Running test suite & node script/yarn test -- --trace-uncaught --enable-logging)
+  # CalculateNativeWinOcclusion is disabled due to https://bugs.chromium.org/p/chromium/issues/detail?id=1139022
+  - if "%RUN_TESTS%"=="true" ( echo Running test suite & node script/yarn test -- --trace-uncaught --enable-logging --disable-features=CalculateNativeWinOcclusion )
   - cd ..
   - if "%RUN_TESTS%"=="true" ( echo Verifying non proprietary ffmpeg & python electron\script\verify-ffmpeg.py --build-dir out\Default --source-root %cd% --ffmpeg-path out\ffmpeg )
   - echo "About to verify mksnapshot"
@@ -219,10 +229,10 @@ deploy_script:
       if (Test-Path Env:\ELECTRON_RELEASE) {
         if (Test-Path Env:\UPLOAD_TO_S3) {
           Write-Output "Uploading Electron release distribution to s3"
-          & python script\release\uploaders\upload.py --upload_to_s3
+          & python script\release\uploaders\upload.py --verbose --upload_to_s3
         } else {
           Write-Output "Uploading Electron release distribution to github releases"
-          & python script\release\uploaders\upload.py
+          & python script\release\uploaders\upload.py --verbose
         }
       } elseif (Test-Path Env:\TEST_WOA) {
         node script/release/ci-release-build.js --job=electron-woa-testing --ci=VSTS --armTest --appveyorJobId=$env:APPVEYOR_JOB_ID $env:APPVEYOR_REPO_BRANCH

azure-pipelines-woa.yml

@@ -63,7 +63,8 @@ steps:
     set npm_config_nodedir=%cd%\out\Default\gen\node_headers
     set npm_config_arch=arm64
     cd electron
-    node script/yarn test -- --enable-logging --verbose
+    # CalculateNativeWinOcclusion is disabled due to https://bugs.chromium.org/p/chromium/issues/detail?id=1139022
+    node script/yarn test -- --enable-logging --verbose --disable-features=CalculateNativeWinOcclusion
   displayName: 'Run Electron tests'
   env:
     ELECTRON_OUT_DIR: Default

build/args/all.gn

@@ -2,7 +2,7 @@ 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 = 82
+node_module_version = 85
 
 v8_promise_internal_field_count = 1
 v8_typed_array_max_size_in_heap = 0

build/webpack/run-compiler.js

@@ -10,10 +10,9 @@ config.output = {
   filename: path.basename(outPath)
 };
 
-const { wrapInitWithProfilingTimeout } = config;
-delete config.wrapInitWithProfilingTimeout;
+const { wrapInitWithProfilingTimeout, wrapInitWithTryCatch, ...webpackConfig } = config;
 
-webpack(config, (err, stats) => {
+webpack(webpackConfig, (err, stats) => {
   if (err) {
     console.error(err);
     process.exit(1);
@@ -21,9 +20,17 @@ webpack(config, (err, stats) => {
     console.error(stats.toString('normal'));
     process.exit(1);
   } else {
+    let contents = fs.readFileSync(outPath, 'utf8');
+    if (wrapInitWithTryCatch) {
+      contents = `try {
+${contents}
+} catch (err) {
+  console.error('Electron ${webpackConfig.output.filename} script failed to run');
+  console.error(err);
+}`;
+    }
     if (wrapInitWithProfilingTimeout) {
-      const contents = fs.readFileSync(outPath, 'utf8');
-      const newContents = `function ___electron_webpack_init__() {
+      contents = `function ___electron_webpack_init__() {
 ${contents}
 };
 if ((globalThis.process || binding.process).argv.includes("--profile-electron-init")) {
@@ -31,8 +38,8 @@ if ((globalThis.process || binding.process).argv.includes("--profile-electron-in
 } else {
   ___electron_webpack_init__();
 }`;
-      fs.writeFileSync(outPath, newContents);
     }
+    fs.writeFileSync(outPath, contents);
     process.exit(0);
   }
 });

build/webpack/webpack.config.base.js

@@ -69,7 +69,8 @@ module.exports = ({
   loadElectronFromAlternateTarget,
   targetDeletesNodeGlobals,
   target,
-  wrapInitWithProfilingTimeout
+  wrapInitWithProfilingTimeout,
+  wrapInitWithTryCatch
 }) => {
   let entry = path.resolve(electronRoot, 'lib', target, 'init.ts');
   if (!fs.existsSync(entry)) {
@@ -87,6 +88,7 @@ module.exports = ({
       filename: `${target}.bundle.js`
     },
     wrapInitWithProfilingTimeout,
+    wrapInitWithTryCatch,
     resolve: {
       alias: {
         '@electron/internal': path.resolve(electronRoot, 'lib'),

build/webpack/webpack.config.isolated_renderer.js

@@ -1,4 +1,5 @@
 module.exports = require('./webpack.config.base')({
   target: 'isolated_renderer',
-  alwaysHasNode: false
+  alwaysHasNode: false,
+  wrapInitWithTryCatch: true
 });

build/webpack/webpack.config.renderer.js

@@ -2,5 +2,6 @@ module.exports = require('./webpack.config.base')({
   target: 'renderer',
   alwaysHasNode: true,
   targetDeletesNodeGlobals: true,
-  wrapInitWithProfilingTimeout: true
+  wrapInitWithProfilingTimeout: true,
+  wrapInitWithTryCatch: true
 });

build/webpack/webpack.config.sandboxed_renderer.js

@@ -1,5 +1,6 @@
 module.exports = require('./webpack.config.base')({
   target: 'sandboxed_renderer',
   alwaysHasNode: false,
-  wrapInitWithProfilingTimeout: true
+  wrapInitWithProfilingTimeout: true,
+  wrapInitWithTryCatch: true
 });

build/webpack/webpack.config.worker.js

@@ -2,5 +2,6 @@ module.exports = require('./webpack.config.base')({
   target: 'worker',
   loadElectronFromAlternateTarget: 'renderer',
   alwaysHasNode: true,
-  targetDeletesNodeGlobals: true
+  targetDeletesNodeGlobals: true,
+  wrapInitWithTryCatch: true
 });

build/zip.py

@@ -13,27 +13,30 @@ EXTENSIONS_TO_SKIP = [
 ]
 
 PATHS_TO_SKIP = [
-  'angledata', #Skipping because it is an output of //ui/gl that we don't need
-  './libVkICD_mock_', #Skipping because these are outputs that we don't need
-  './VkICD_mock_', #Skipping because these are outputs that we don't need
-
-  # Skipping because its an output of create_bundle from //build/config/mac/rules.gni
+  # Skip because it is an output of //ui/gl that we don't need.
+  'angledata',
+  # Skip because these are outputs that we don't need.
+  './libVkICD_mock_',
+  # Skip because these are outputs that we don't need.
+  './VkICD_mock_',
+  # Skip because its an output of create_bundle from //build/config/mac/rules.gni
   # that we don't need
   'Electron.dSYM',
-
+  # Refs https://chromium-review.googlesource.com/c/angle/angle/+/2425197.
+  # Remove this when Angle themselves remove the file: https://issuetracker.google.com/issues/168736059
+  'gen/angle/angle_commit.h',
   # //chrome/browser:resources depends on this via
   # //chrome/browser/resources/ssl/ssl_error_assistant, but we don't need to
   # ship it.
   'pyproto',
-
   # On Windows, this binary doesn't exist (the crashpad handler is built-in).
   # On MacOS, the binary is called 'chrome_crashpad_handler' and is inside the
   # app bundle.
   # On Linux, we don't use crashpad, but this binary is still built for some
   # reason. Exclude it from the zip.
   './crashpad_handler',
-
-  'resources/inspector', #Skipping because these are outputs that we don't need
+  # Skip because these are outputs that we don't need.
+  'resources/inspector',
 ]
 
 def skip_path(dep, dist_zip, target_cpu):

buildflags/BUILD.gn

@@ -21,6 +21,7 @@ buildflag_header("buildflags") {
     "ENABLE_ELECTRON_EXTENSIONS=$enable_electron_extensions",
     "ENABLE_BUILTIN_SPELLCHECKER=$enable_builtin_spellchecker",
     "ENABLE_PICTURE_IN_PICTURE=$enable_picture_in_picture",
+    "ENABLE_WIN_DARK_MODE_WINDOW_UI=$enable_win_dark_mode_window_ui",
     "OVERRIDE_LOCATION_PROVIDER=$enable_fake_location_provider",
   ]
 }

buildflags/buildflags.gni

@@ -36,4 +36,7 @@ declare_args() {
 
   # Enable Spellchecker support
   enable_builtin_spellchecker = true
+
+  # Undocumented Windows dark mode API
+  enable_win_dark_mode_window_ui = false
 }

chromium_src/BUILD.gn

@@ -26,18 +26,10 @@ static_library("chrome") {
     "//chrome/browser/devtools/devtools_file_system_indexer.h",
     "//chrome/browser/extensions/global_shortcut_listener.cc",
     "//chrome/browser/extensions/global_shortcut_listener.h",
-    "//chrome/browser/extensions/global_shortcut_listener_mac.h",
-    "//chrome/browser/extensions/global_shortcut_listener_mac.mm",
-    "//chrome/browser/extensions/global_shortcut_listener_win.cc",
-    "//chrome/browser/extensions/global_shortcut_listener_win.h",
     "//chrome/browser/icon_loader.cc",
     "//chrome/browser/icon_loader.h",
-    "//chrome/browser/icon_loader_mac.mm",
-    "//chrome/browser/icon_loader_win.cc",
     "//chrome/browser/icon_manager.cc",
     "//chrome/browser/icon_manager.h",
-    "//chrome/browser/media/webrtc/system_media_capture_permissions_mac.h",
-    "//chrome/browser/media/webrtc/system_media_capture_permissions_mac.mm",
     "//chrome/browser/net/chrome_mojo_proxy_resolver_factory.cc",
     "//chrome/browser/net/chrome_mojo_proxy_resolver_factory.h",
     "//chrome/browser/net/proxy_config_monitor.cc",
@@ -57,14 +49,32 @@ static_library("chrome") {
     "//chrome/browser/ssl/tls_deprecation_config.cc",
     "//chrome/browser/ui/views/autofill/autofill_popup_view_utils.cc",
     "//chrome/browser/ui/views/autofill/autofill_popup_view_utils.h",
-    "//chrome/browser/win/chrome_process_finder.cc",
-    "//chrome/browser/win/chrome_process_finder.h",
-    "//chrome/child/v8_crashpad_support_win.cc",
-    "//chrome/child/v8_crashpad_support_win.h",
     "//extensions/browser/app_window/size_constraints.cc",
     "//extensions/browser/app_window/size_constraints.h",
   ]
 
+  if (is_mac) {
+    sources += [
+      "//chrome/browser/extensions/global_shortcut_listener_mac.h",
+      "//chrome/browser/extensions/global_shortcut_listener_mac.mm",
+      "//chrome/browser/icon_loader_mac.mm",
+      "//chrome/browser/media/webrtc/system_media_capture_permissions_mac.h",
+      "//chrome/browser/media/webrtc/system_media_capture_permissions_mac.mm",
+    ]
+  }
+
+  if (is_win) {
+    sources += [
+      "//chrome/browser/extensions/global_shortcut_listener_win.cc",
+      "//chrome/browser/extensions/global_shortcut_listener_win.h",
+      "//chrome/browser/icon_loader_win.cc",
+      "//chrome/browser/win/chrome_process_finder.cc",
+      "//chrome/browser/win/chrome_process_finder.h",
+      "//chrome/child/v8_crashpad_support_win.cc",
+      "//chrome/child/v8_crashpad_support_win.h",
+    ]
+  }
+
   public_deps = [
     "//chrome/common",
     "//chrome/common:version_header",
@@ -266,6 +276,17 @@ static_library("chrome") {
       ]
     }
   }
+
+  if (!is_mas_build) {
+    sources += [ "//chrome/browser/hang_monitor/hang_crash_dump.h" ]
+    if (is_mac) {
+      sources += [ "//chrome/browser/hang_monitor/hang_crash_dump_mac.cc" ]
+    } else if (is_win) {
+      sources += [ "//chrome/browser/hang_monitor/hang_crash_dump_win.cc" ]
+    } else {
+      sources += [ "//chrome/browser/hang_monitor/hang_crash_dump.cc" ]
+    }
+  }
 }
 
 source_set("plugins") {

chromium_src/chrome/browser/certificate_manager_model.cc

@@ -36,6 +36,7 @@ net::NSSCertDatabase* GetNSSCertDatabaseForResourceContext(
     // Linux has only a single persistent slot compared to ChromeOS's separate
     // public and private slot.
     // Redirect any slot usage to this persistent slot on Linux.
+    crypto::EnsureNSSInit();
     g_nss_cert_database = new net::NSSCertDatabase(
         crypto::ScopedPK11Slot(PK11_GetInternalKeySlot()) /* public slot */,
         crypto::ScopedPK11Slot(PK11_GetInternalKeySlot()) /* private slot */);

chromium_src/chrome/browser/process_singleton_posix.cc

@@ -826,10 +826,9 @@ ProcessSingleton::NotifyResult ProcessSingleton::NotifyOtherProcessWithTimeout(
   to_send.append(current_dir.value());
 
   const std::vector<std::string>& argv = electron::ElectronCommandLine::argv();
-  for (std::vector<std::string>::const_iterator it = argv.begin();
-       it != argv.end(); ++it) {
+  for (const auto& arg : argv) {
     to_send.push_back(kTokenDelimiter);
-    to_send.append(*it);
+    to_send.append(arg);
   }
 
   // Send the message

chromium_src/chrome/browser/ui/views/frame/global_menu_bar_registrar_x11.cc

@@ -122,8 +122,7 @@ void GlobalMenuBarRegistrarX11::OnNameOwnerChanged(GObject* /* ignored */,
                                                    GParamSpec* /* ignored */) {
   // If the name owner changed, we need to reregister all the live x11::Window
   // with the system.
-  for (std::set<x11::Window>::const_iterator it = live_windows_.begin();
-       it != live_windows_.end(); ++it) {
-    RegisterXWindow(*it);
+  for (const auto& window : live_windows_) {
+    RegisterXWindow(window);
   }
 }

docs/api/app.md

@@ -32,7 +32,8 @@ In most cases, you should do everything in the `ready` event handler.
 
 Returns:
 
-* `launchInfo` unknown _macOS_
+* `event` Event
+* `launchInfo` Record<string, any> _macOS_
 
 Emitted once, when Electron has finished initializing. On macOS, `launchInfo`
 holds the `userInfo` of the `NSUserNotification` that was used to open the
@@ -402,7 +403,7 @@ Returns:
     * `killed` - Process was sent a SIGTERM or otherwise killed externally
     * `crashed` - Process crashed
     * `oom` - Process ran out of memory
-    * `launch-failure` - Process never successfully launched
+    * `launch-failed` - Process never successfully launched
     * `integrity-failure` - Windows code integrity checks failed
 
 Emitted when the renderer process unexpectedly disappears.  This is normally
@@ -428,7 +429,7 @@ Returns:
     * `killed` - Process was sent a SIGTERM or otherwise killed externally
     * `crashed` - Process crashed
     * `oom` - Process ran out of memory
-    * `launch-failure` - Process never successfully launched
+    * `launch-failed` - Process never successfully launched
     * `integrity-failure` - Windows code integrity checks failed
   * `exitCode` Number - The exit code for the process
       (e.g. status from waitpid if on posix, from GetExitCodeProcess on Windows).
@@ -1340,7 +1341,7 @@ systems Application folder. Use in combination with `app.moveToApplicationsFolde
 ### `app.moveToApplicationsFolder([options])` _macOS_
 
 * `options` Object (optional)
-  * `conflictHandler` Function<Boolean> (optional) - A handler for potential conflict in move failure.
+  * `conflictHandler` Function\<Boolean> (optional) - A handler for potential conflict in move failure.
     * `conflictType` String - The type of move conflict encountered by the handler; can be `exists` or `existsAndRunning`, where `exists` means that an app of the same name is present in the Applications directory and `existsAndRunning` means both that it exists and that it's presently running.
 
 Returns `Boolean` - Whether the move was successful. Please note that if
@@ -1484,3 +1485,12 @@ which native modules you can use in the renderer process.  For more information
 on the direction Electron is going with renderer process restarts and usage of
 native modules in the renderer process please check out this
 [Tracking Issue](https://github.com/electron/electron/issues/18397).
+
+### `app.runningUnderRosettaTranslation` _macOS_ _Readonly_
+
+A `Boolean` which when `true` indicates that the app is currently running
+under the [Rosetta Translator Environment](https://en.wikipedia.org/wiki/Rosetta_(software)).
+
+You can use this property to prompt users to download the arm64 version of
+your application when they are running the x64 version under Rosetta
+incorrectly.

docs/api/browser-window.md

@@ -541,6 +541,12 @@ Note that this is only emitted when the window is being resized manually. Resizi
 
 Emitted after the window has been resized.
 
+#### Event: 'resized' _macOS_ _Windows_
+
+Emitted once when the window has finished being resized.
+
+This is usually emitted when the window has been resized manually. On macOS, resizing the window with `setBounds`/`setSize` and setting the `animate` parameter to `true` will also emit this event once resizing has finished.
+
 #### Event: 'will-move' _macOS_ _Windows_
 
 Returns:
@@ -556,12 +562,12 @@ Note that this is only emitted when the window is being resized manually. Resizi
 
 Emitted when the window is being moved to a new position.
 
-__Note__: On macOS this event is an alias of `moved`.
-
-#### Event: 'moved' _macOS_
+#### Event: 'moved' _macOS_ _Windows_
 
 Emitted once when the window is moved to a new position.
 
+__Note__: On macOS this event is an alias of `move`.
+
 #### Event: 'enter-full-screen'
 
 Emitted when the window enters a full-screen state.
@@ -670,6 +676,20 @@ Emitted when the window has closed a sheet.
 
 Emitted when the native new tab button is clicked.
 
+#### Event: 'system-context-menu' _Windows_
+
+Returns:
+
+* `event` Event
+* `point` [Point](structures/point.md) - The screen coordinates the context menu was triggered at
+
+Emitted when the system context menu is triggered on the window, this is
+normally only triggered when the user right clicks on the non-client area
+of your window.  This is the window titlebar or any area you have declared
+as `-webkit-app-region: drag` in a frameless window.
+
+Calling `event.preventDefault()` will prevent the menu from being displayed.
+
 ### Static Methods
 
 The `BrowserWindow` class has the following static methods:
@@ -1029,7 +1049,7 @@ Returns `Boolean` - Whether the window is in simple (pre-Lion) fullscreen mode.
 
 Returns `Boolean` - Whether the window is in normal state (not maximized, not minimized, not in fullscreen mode).
 
-#### `win.setAspectRatio(aspectRatio[, extraSize])` _macOS_ _Linux_
+#### `win.setAspectRatio(aspectRatio[, extraSize])`
 
 * `aspectRatio` Float - The aspect ratio to maintain for some portion of the
 content view.
@@ -1050,6 +1070,9 @@ the player itself we would call this function with arguments of 16/9 and
 are within the content view--only that they exist. Sum any extra width and
 height areas you have within the overall content view.
 
+The aspect ratio is not respected when window is resized programmingly with
+APIs like `win.setSize`.
+
 #### `win.setBackgroundColor(backgroundColor)`
 
 * `backgroundColor` String - Window's background color as a hexadecimal value,

docs/api/command-line-switches.md

@@ -198,6 +198,14 @@ logging level for all code in the source files under a `foo/bar` directory.
 
 This switch only works when `--enable-logging` is also passed.
 
+### --force_high_performance_gpu
+
+Force using discrete GPU when there are multiple GPUs available.
+
+### --force_low_power_gpu
+
+Force using integrated GPU when there are multiple GPUs available.
+
 ## Node.js Flags
 
 Electron supports some of the [CLI flags][node-cli] supported by Node.js.

docs/api/content-tracing.md

@@ -16,7 +16,7 @@ const { app, contentTracing } = require('electron')
 app.whenReady().then(() => {
   (async () => {
     await contentTracing.startRecording({
-      include_categories: ['*']
+      included_categories: ['*']
     })
     console.log('Tracing started')
     await new Promise(resolve => setTimeout(resolve, 5000))

docs/api/desktop-capturer.md

@@ -72,50 +72,6 @@ const constraints = {
 }
 ```
 
-This example shows how to capture a video from a [WebContents](web-contents.md)
-
-```javascript
-// In the renderer process.
-const { desktopCapturer, remote } = require('electron')
-
-desktopCapturer.getMediaSourceIdForWebContents(remote.getCurrentWebContents().id).then(async mediaSourceId => {
-  try {
-    const stream = await navigator.mediaDevices.getUserMedia({
-      audio: {
-        mandatory: {
-          chromeMediaSource: 'tab',
-          chromeMediaSourceId: mediaSourceId
-        }
-      },
-      video: {
-        mandatory: {
-          chromeMediaSource: 'tab',
-          chromeMediaSourceId: mediaSourceId,
-          minWidth: 1280,
-          maxWidth: 1280,
-          minHeight: 720,
-          maxHeight: 720
-        }
-      }
-    })
-    handleStream(stream)
-  } catch (e) {
-    handleError(e)
-  }
-})
-
-function handleStream (stream) {
-  const video = document.querySelector('video')
-  video.srcObject = stream
-  video.onloadedmetadata = (e) => video.play()
-}
-
-function handleError (e) {
-  console.log(e)
-}
-```
-
-
 ## Methods
 
 The `desktopCapturer` module has the following methods:
@@ -138,15 +94,6 @@ Returns `Promise<DesktopCapturerSource[]>` - Resolves with an array of [`Desktop
 **Note** Capturing the screen contents requires user consent on macOS 10.15 Catalina or higher,
 which can detected by [`systemPreferences.getMediaAccessStatus`].
 
-### `desktopCapturer.getMediaSourceIdForWebContents(webContentsId)`
-
-* `webContentsId` number - Id of the WebContents to get stream of
-
-Returns `Promise<string>` - Resolves with the identifier of a WebContents stream, this identifier can be
-used with [`navigator.mediaDevices.getUserMedia`].
-The identifier is **only valid for 10 seconds**.
-The identifier may be empty if not requested from a renderer process.
-
 [`navigator.mediaDevices.getUserMedia`]: https://developer.mozilla.org/en/docs/Web/API/MediaDevices/getUserMedia
 [`systemPreferences.getMediaAccessStatus`]: system-preferences.md#systempreferencesgetmediaaccessstatusmediatype-macos
 

docs/api/extensions.md

@@ -102,3 +102,21 @@ The following methods of `chrome.tabs` are supported:
 > **Note:** In Chrome, passing `-1` as a tab ID signifies the "currently active
 > tab". Since Electron has no such concept, passing `-1` as a tab ID is not
 > supported and will raise an error.
+
+### `chrome.management`
+
+The following methods of `chrome.management` are supported:
+
+- `chrome.management.getAll`
+- `chrome.management.get`
+- `chrome.management.getSelf`
+- `chrome.management.getPermissionWarningsById`
+- `chrome.management.getPermissionWarningsByManifest`
+- `chrome.management.onEnabled`
+- `chrome.management.onDisabled`
+
+### `chrome.webRequest`
+
+All features of this API are supported.
+
+> **NOTE:** Electron's [`webRequest`](web-request.md) module takes precedence over `chrome.webRequest` if there are conflicting handlers.

docs/api/global-shortcut.md

@@ -9,7 +9,7 @@ with the operating system so that you can customize the operations for various
 shortcuts.
 
 **Note:** The shortcut is global; it will work even if the app does
-not have the keyboard focus. You should not use this module until the `ready`
+not have the keyboard focus. This module cannot be used before the `ready`
 event of the app module is emitted.
 
 ```javascript

docs/api/ipc-main.md

@@ -91,7 +91,7 @@ Removes listeners of the specified `channel`.
 ### `ipcMain.handle(channel, listener)`
 
 * `channel` String
-* `listener` Function<Promise<void> | any>
+* `listener` Function<Promise\<void> | any>
   * `event` IpcMainInvokeEvent
   * `...args` any[]
 
@@ -123,7 +123,7 @@ WebContents is the source of the invoke request.
 ### `ipcMain.handleOnce(channel, listener)`
 
 * `channel` String
-* `listener` Function<Promise<void> | any>
+* `listener` Function<Promise\<void> | any>
   * `event` IpcMainInvokeEvent
   * `...args` any[]
 

docs/api/power-monitor.md

@@ -8,19 +8,19 @@ Process: [Main](../glossary.md#main-process)
 
 The `powerMonitor` module emits the following events:
 
-### Event: 'suspend'
+### Event: 'suspend' _macOS_ _Windows_
 
 Emitted when the system is suspending.
 
-### Event: 'resume'
+### Event: 'resume' _macOS_ _Windows_
 
 Emitted when system is resuming.
 
-### Event: 'on-ac' _Windows_
+### Event: 'on-ac' _macOS_ _Windows_
 
 Emitted when the system changes to AC power.
 
-### Event: 'on-battery' _Windows_
+### Event: 'on-battery' _macOS_  _Windows_
 
 Emitted when system changes to battery power.
 

docs/api/session.md

@@ -349,6 +349,7 @@ win.webContents.session.setCertificateVerifyProc((request, callback) => {
 * `handler` Function | null
   * `webContents` [WebContents](web-contents.md) - WebContents requesting the permission.  Please note that if the request comes from a subframe you should use `requestingUrl` to check the request origin.
   * `permission` String - The type of requested permission.
+    * `clipboard-read` - Request access to read from the clipboard.
     * `media` -  Request access to media devices such as camera, microphone and speakers.
     * `mediaKeySystem` - Request access to DRM protected content.
     * `geolocation` - Request access to user's current location.
@@ -384,7 +385,7 @@ session.fromPartition('some-partition').setPermissionRequestHandler((webContents
 
 #### `ses.setPermissionCheckHandler(handler)`
 
-* `handler` Function<Boolean> | null
+* `handler` Function\<Boolean> | null
   * `webContents` [WebContents](web-contents.md) - WebContents checking the permission.  Please note that if the request comes from a subframe you should use `requestingUrl` to check the request origin.
   * `permission` String - Enum of 'media'.
   * `requestingOrigin` String - The origin URL of the permission check

docs/api/structures/ipc-main-event.md

@@ -1,5 +1,6 @@
 # IpcMainEvent Object extends `Event`
 
+* `processId` Integer - The internal ID of the renderer process that sent this message
 * `frameId` Integer - The ID of the renderer frame that sent this message
 * `returnValue` any - Set this to the value to be returned in a synchronous message
 * `sender` WebContents - Returns the `webContents` that sent the message

docs/api/structures/ipc-main-invoke-event.md

@@ -1,4 +1,5 @@
 # IpcMainInvokeEvent Object extends `Event`
 
+* `processId` Integer - The internal ID of the renderer process that sent this message
 * `frameId` Integer - The ID of the renderer frame that sent this message
 * `sender` WebContents - Returns the `webContents` that sent the message

docs/api/structures/stream-protocol-response.md

@@ -1,5 +0,0 @@
-# StreamProtocolResponse Object
-
-* `statusCode` Number (optional) - The HTTP response code.
-* `headers` Record<String, String | String[]> (optional) - An object containing the response headers.
-* `data` ReadableStream | null - A Node.js readable stream representing the response body.

docs/api/structures/string-protocol-response.md

@@ -1,5 +0,0 @@
-# StringProtocolResponse Object
-
-* `mimeType` String (optional) - MIME type of the response.
-* `charset` String (optional) - Charset of the response.
-* `data` String | null - A string representing the response body.

docs/api/web-contents.md

@@ -42,7 +42,8 @@ returns `null`.
 
 * `id` Integer
 
-Returns `WebContents` - A WebContents instance with the given ID.
+Returns `WebContents` | undefined - A WebContents instance with the given ID, or
+`undefined` if there is no WebContents associated with the given ID.
 
 ## Class: WebContents
 
@@ -364,7 +365,7 @@ Returns:
     * `killed` - Process was sent a SIGTERM or otherwise killed externally
     * `crashed` - Process crashed
     * `oom` - Process ran out of memory
-    * `launch-failure` - Process never successfully launched
+    * `launch-failed` - Process never successfully launched
     * `integrity-failure` - Windows code integrity checks failed
 
 Emitted when the renderer process unexpectedly disappears.  This is normally
@@ -998,6 +999,34 @@ Navigates to the specified offset from the "current entry".
 
 Returns `Boolean` - Whether the renderer process has crashed.
 
+#### `contents.forcefullyCrashRenderer()`
+
+Forcefully terminates the renderer process that is currently hosting this
+`webContents`. This will cause the `render-process-gone` event to be emitted
+with the `reason=killed || reason=crashed`. Please note that some webContents share renderer
+processes and therefore calling this method may also crash the host process
+for other webContents as well.
+
+Calling `reload()` immediately after calling this
+method will force the reload to occur in a new process. This should be used
+when this process is unstable or unusable, for instance in order to recover
+from the `unresponsive` event.
+
+```js
+contents.on('unresponsive', async () => {
+  const { response } = await dialog.showMessageBox({
+    message: 'App X has become unresponsive',
+    title: 'Do you want to try forcefully reloading the app?',
+    buttons: ['OK', 'Cancel'],
+    cancelId: 1
+  })
+  if (response === 0) {
+    contents.forcefullyCrashRenderer()
+    contents.reload()
+  }
+})
+```
+
 #### `contents.setUserAgent(userAgent)`
 
 * `userAgent` String
@@ -1296,9 +1325,9 @@ Returns [`PrinterInfo[]`](structures/printer-info.md)
   * `pagesPerSheet` Number (optional) - The number of pages to print per page sheet.
   * `collate` Boolean (optional) - Whether the web page should be collated.
   * `copies` Number (optional) - The number of copies of the web page to print.
-  * `pageRanges` Record<string, number> (optional) - The page range to print.
-    * `from` Number - the start page.
-    * `to` Number - the end page.
+  * `pageRanges` Object[] (optional) - The page range to print. On macOS, only one range is honored.
+    * `from` Number - Index of the first page to print (0-based).
+    * `to` Number - Index of the last page to print (inclusive) (0-based).
   * `duplexMode` String (optional) - Set the duplex mode of the printed web page. Can be `simplex`, `shortEdge`, or `longEdge`.
   * `dpi` Record<string, number> (optional)
     * `horizontal` Number (optional) - The horizontal dpi.
@@ -1324,10 +1353,10 @@ Example usage:
 const options = {
   silent: true,
   deviceName: 'My-Printer',
-  pageRanges: {
+  pageRanges: [{
     from: 0,
     to: 1
-  }
+  }]
 }
 win.webContents.print(options, (success, errorType) => {
   if (!success) console.log(errorType)
@@ -1345,8 +1374,8 @@ win.webContents.print(options, (success, errorType) => {
     default margin, 1 for no margin, and 2 for minimum margin.
   * `scaleFactor` Number (optional) - The scale factor of the web page. Can range from 0 to 100.
   * `pageRanges` Record<string, number> (optional) - The page range to print.
-    * `from` Number - zero-based index of the first page to print.
-    * `to` Number - zero-based index of the last page to print (inclusive).
+    * `from` Number - Index of the first page to print (0-based).
+    * `to` Number - Index of the last page to print (inclusive) (0-based).
   * `pageSize` String | Size (optional) - Specify page size of the generated PDF. Can be `A3`,
   `A4`, `A5`, `Legal`, `Letter`, `Tabloid` or an Object containing `height` and `width` in microns.
   * `printBackground` Boolean (optional) - Whether to print CSS backgrounds.
@@ -1593,7 +1622,9 @@ app.whenReady().then(() => {
 
 #### `contents.sendToFrame(frameId, channel, ...args)`
 
-* `frameId` Integer
+* `frameId` Integer | [number, number] - the ID of the frame to send to, or a
+  pair of `[processId, frameId]` if the frame is in a different process to the
+  main frame.
 * `channel` String
 * `...args` any[]
 
@@ -1767,7 +1798,7 @@ Returns `Boolean` - If *offscreen rendering* is enabled returns whether it is cu
 * `fps` Integer
 
 If *offscreen rendering* is enabled sets the frame rate to the specified number.
-Only values between 1 and 60 are accepted.
+Only values between 1 and 240 are accepted.
 
 #### `contents.getFrameRate()`
 
@@ -1865,7 +1896,7 @@ The zoom factor is the zoom percent divided by 100, so 300% = 3.0.
 #### `contents.frameRate`
 
 An `Integer` property that sets the frame rate of the web contents to the specified number.
-Only values between 1 and 60 are accepted.
+Only values between 1 and 240 are accepted.
 
 Only applicable if *offscreen rendering* is enabled.
 

docs/api/webview-tag.md

@@ -560,9 +560,9 @@ Stops any `findInPage` request for the `webview` with the provided `action`.
   * `pagesPerSheet` Number (optional) - The number of pages to print per page sheet.
   * `collate` Boolean (optional) - Whether the web page should be collated.
   * `copies` Number (optional) - The number of copies of the web page to print.
-  * `pageRanges` Record<string, number> (optional) - The page range to print.
-    * `from` Number - zero-based index of the first page to print.
-    * `to` Number - zero-based index of the last page to print (inclusive).
+  * `pageRanges` Object[] (optional) - The page range to print.
+    * `from` Number - Index of the first page to print (0-based).
+    * `to` Number - Index of the last page to print (inclusive) (0-based).
   * `duplexMode` String (optional) - Set the duplex mode of the printed web page. Can be `simplex`, `shortEdge`, or `longEdge`.
   * `dpi` Record<string, number> (optional)
     * `horizontal` Number (optional) - The horizontal dpi.
@@ -588,8 +588,8 @@ Prints `webview`'s web page. Same as `webContents.print([options])`.
     and `width` in microns.
   * `scaleFactor` Number (optional) - The scale factor of the web page. Can range from 0 to 100.
   * `pageRanges` Record<string, number> (optional) - The page range to print.
-    * `from` Number - the first page to print.
-    * `to` Number - the last page to print (inclusive).
+    * `from` Number - Index of the first page to print (0-based).
+    * `to` Number - Index of the last page to print (inclusive) (0-based).
   * `pageSize` String | Size (optional) - Specify page size of the generated PDF. Can be `A3`,
   `A4`, `A5`, `Legal`, `Letter`, `Tabloid` or an Object containing `height`
   * `printBackground` Boolean (optional) - Whether to print CSS backgrounds.
@@ -968,4 +968,4 @@ Emitted when DevTools is closed.
 Emitted when DevTools is focused / opened.
 
 [runtime-enabled-features]: https://cs.chromium.org/chromium/src/third_party/blink/renderer/platform/runtime_enabled_features.json5?l=70
-[chrome-webview]: https://developer.chrome.com/apps/tags/webview
+[chrome-webview]: https://developer.chrome.com/docs/extensions/reference/webviewTag/

docs/breaking-changes-ns.md

@@ -1,61 +0,0 @@
-# Breaking changes (NetworkService) (Draft)
-
-This document describes changes to Electron APIs after migrating network code
-to NetworkService API.
-
-We don't currently have an estimate of when we will enable `NetworkService` by
-default in Electron, but as Chromium is already removing non-`NetworkService`
-code, we might switch before Electron 10.
-
-The content of this document should be moved to `breaking-changes.md` once we have
-determined when to enable `NetworkService` in Electron.
-
-## Planned Breaking API Changes
-
-### `protocol.unregisterProtocol`
-### `protocol.uninterceptProtocol`
-
-The APIs are now synchronous and the optional callback is no longer needed.
-
-```javascript
-// Deprecated
-protocol.unregisterProtocol(scheme, () => { /* ... */ })
-// Replace with
-protocol.unregisterProtocol(scheme)
-```
-
-### `protocol.registerFileProtocol`
-### `protocol.registerBufferProtocol`
-### `protocol.registerStringProtocol`
-### `protocol.registerHttpProtocol`
-### `protocol.registerStreamProtocol`
-### `protocol.interceptFileProtocol`
-### `protocol.interceptStringProtocol`
-### `protocol.interceptBufferProtocol`
-### `protocol.interceptHttpProtocol`
-### `protocol.interceptStreamProtocol`
-
-The APIs are now synchronous and the optional callback is no longer needed.
-
-```javascript
-// Deprecated
-protocol.registerFileProtocol(scheme, handler, () => { /* ... */ })
-// Replace with
-protocol.registerFileProtocol(scheme, handler)
-```
-
-The registered or intercepted protocol does not have effect on current page
-until navigation happens.
-
-### `protocol.isProtocolHandled`
-
-This API is deprecated and users should use `protocol.isProtocolRegistered`
-and `protocol.isProtocolIntercepted` instead.
-
-```javascript
-// Deprecated
-protocol.isProtocolHandled(scheme).then(() => { /* ... */ })
-// Replace with
-const isRegistered = protocol.isProtocolRegistered(scheme)
-const isIntercepted = protocol.isProtocolIntercepted(scheme)
-```

docs/breaking-changes.md

@@ -133,6 +133,54 @@ const w = new BrowserWindow({
 We [recommend moving away from the remote
 module](https://medium.com/@nornagon/electrons-remote-module-considered-harmful-70d69500f31).
 
+### `protocol.unregisterProtocol`
+### `protocol.uninterceptProtocol`
+
+The APIs are now synchronous and the optional callback is no longer needed.
+
+```javascript
+// Deprecated
+protocol.unregisterProtocol(scheme, () => { /* ... */ })
+// Replace with
+protocol.unregisterProtocol(scheme)
+```
+
+### `protocol.registerFileProtocol`
+### `protocol.registerBufferProtocol`
+### `protocol.registerStringProtocol`
+### `protocol.registerHttpProtocol`
+### `protocol.registerStreamProtocol`
+### `protocol.interceptFileProtocol`
+### `protocol.interceptStringProtocol`
+### `protocol.interceptBufferProtocol`
+### `protocol.interceptHttpProtocol`
+### `protocol.interceptStreamProtocol`
+
+The APIs are now synchronous and the optional callback is no longer needed.
+
+```javascript
+// Deprecated
+protocol.registerFileProtocol(scheme, handler, () => { /* ... */ })
+// Replace with
+protocol.registerFileProtocol(scheme, handler)
+```
+
+The registered or intercepted protocol does not have effect on current page
+until navigation happens.
+
+### `protocol.isProtocolHandled`
+
+This API is deprecated and users should use `protocol.isProtocolRegistered`
+and `protocol.isProtocolIntercepted` instead.
+
+```javascript
+// Deprecated
+protocol.isProtocolHandled(scheme).then(() => { /* ... */ })
+// Replace with
+const isRegistered = protocol.isProtocolRegistered(scheme)
+const isIntercepted = protocol.isProtocolIntercepted(scheme)
+```
+
 ## Planned Breaking API Changes (9.0)
 
 ### Default Changed: Loading non-context-aware native modules in the renderer process is disabled by default
@@ -147,6 +195,45 @@ you should plan to update your native modules to be context aware.
 
 For more detailed information see [#18397](https://github.com/electron/electron/issues/18397).
 
+### Deprecated: `BrowserWindow` extension APIs
+
+The following extension APIs have been deprecated:
+* `BrowserWindow.addExtension(path)`
+* `BrowserWindow.addDevToolsExtension(path)`
+* `BrowserWindow.removeExtension(name)`
+* `BrowserWindow.removeDevToolsExtension(name)`
+* `BrowserWindow.getExtensions()`
+* `BrowserWindow.getDevToolsExtensions()`
+
+Use the session APIs instead:
+* `ses.loadExtension(path)`
+* `ses.removeExtension(extension_id)`
+* `ses.getAllExtensions()`
+
+```js
+// Deprecated in Electron 9
+BrowserWindow.addExtension(path)
+BrowserWindow.addDevToolsExtension(path)
+// Replace with
+session.defaultSession.loadExtension(path)
+```
+
+```js
+// Deprecated in Electron 9
+BrowserWindow.removeExtension(name)
+BrowserWindow.removeDevToolsExtension(name)
+// Replace with
+session.defaultSession.removeExtension(extension_id)
+```
+
+```js
+// Deprecated in Electron 9
+BrowserWindow.getExtensions()
+BrowserWindow.getDevToolsExtensions()
+// Replace with
+session.defaultSession.getAllExtensions()
+```
+
 ### Removed: `<webview>.getWebContents()`
 
 This API, which was deprecated in Electron 8.0, is now removed.
@@ -290,6 +377,52 @@ in Electron 8.x, and cease to exist in Electron 9.x. The layout zoom level
 limits are now fixed at a minimum of 0.25 and a maximum of 5.0, as defined
 [here](https://chromium.googlesource.com/chromium/src/+/938b37a6d2886bf8335fc7db792f1eb46c65b2ae/third_party/blink/common/page/page_zoom.cc#11).
 
+### Deprecated events in `systemPreferences`
+
+The following `systemPreferences` events have been deprecated:
+* `inverted-color-scheme-changed`
+* `high-contrast-color-scheme-changed`
+
+Use the new `updated` event on the `nativeTheme` module instead.
+
+```js
+// Deprecated
+systemPreferences.on('inverted-color-scheme-changed', () => { /* ... */ })
+systemPreferences.on('high-contrast-color-scheme-changed', () => { /* ... */ })
+
+// Replace with
+nativeTheme.on('updated', () => { /* ... */ })
+```
+
+### Deprecated: methods in `systemPreferences`
+
+The following `systemPreferences` methods have been deprecated:
+* `systemPreferences.isDarkMode()`
+* `systemPreferences.isInvertedColorScheme()`
+* `systemPreferences.isHighContrastColorScheme()`
+
+Use the following `nativeTheme` properties instead:
+* `nativeTheme.shouldUseDarkColors`
+* `nativeTheme.shouldUseInvertedColorScheme`
+* `nativeTheme.shouldUseHighContrastColors`
+
+```js
+// Deprecated
+systemPreferences.isDarkMode()
+// Replace with
+nativeTheme.shouldUseDarkColors
+
+// Deprecated
+systemPreferences.isInvertedColorScheme()
+// Replace with
+nativeTheme.shouldUseInvertedColorScheme
+
+// Deprecated
+systemPreferences.isHighContrastColorScheme()
+// Replace with
+nativeTheme.shouldUseHighContrastColors
+```
+
 ## Planned Breaking API Changes (7.0)
 
 ### Deprecated: Atom.io Node Headers URL

docs/development/build-instructions-gn.md

@@ -177,12 +177,12 @@ $ gn gen out/Testing-x86 --args='... target_cpu = "x86"'
 
 Not all combinations of source and target CPU/OS are supported by Chromium.
 
-<table>
-<tr><th>Host</th><th>Target</th><th>Status</th></tr>
-<tr><td>Windows x64</td><td>Windows arm64</td><td>Experimental</td>
-<tr><td>Windows x64</td><td>Windows x86</td><td>Automatically tested</td></tr>
-<tr><td>Linux x64</td><td>Linux x86</td><td>Automatically tested</td></tr>
-</table>
+| Host        | Target        | Status               |
+|-------------|---------------|----------------------|
+| Windows x64 | Windows arm64 | Experimental         |
+| Windows x64 | Windows x86   | Automatically tested |
+| Linux x64   | Linux x86     | Automatically tested |
+
 
 If you test other combinations and find them to work, please update this document :)
 

docs/development/setting-up-symbol-server.md

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

docs/fiddles/features/drag-and-drop/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Hello World!</title>
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
+</head>
+<body>
+    <h1>Hello World!</h1>
+    <p>
+        We are using node <script>document.write(process.versions.node)</script>,
+        Chrome <script>document.write(process.versions.chrome)</script>,
+        and Electron <script>document.write(process.versions.electron)</script>.
+    </p>
+    <a href="#" id="drag">Drag me</a>
+    <script src="renderer.js"></script>
+</body>
+</html>

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

@@ -0,0 +1,41 @@
+const { app, BrowserWindow, ipcMain, nativeImage, NativeImage } = require('electron')
+const fs = require('fs');
+const http = require('http');
+
+function createWindow () {
+  const win = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      nodeIntegration: true
+    }
+  })
+
+  win.loadFile('index.html')
+}
+const iconName = 'iconForDragAndDrop.png';
+const icon = fs.createWriteStream(`${process.cwd()}/${iconName}`);
+http.get('http://img.icons8.com/ios/452/drag-and-drop.png', (response) => {
+  response.pipe(icon);
+});
+
+app.whenReady().then(createWindow)
+
+ipcMain.on('ondragstart', (event, filePath) => {
+  event.sender.startDrag({
+    file: filePath,
+    icon: `${process.cwd()}/${iconName}`
+  })
+})
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow()
+  }
+})

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

@@ -0,0 +1,9 @@
+const { ipcRenderer } = require('electron')
+const fs = require('fs')
+
+document.getElementById('drag').ondragstart = (event) => {
+  const fileName = 'drag-and-drop.md'
+  fs.writeFileSync(fileName, '# Test drag and drop');
+  event.preventDefault()
+  ipcRenderer.send('ondragstart', process.cwd() + `/${fileName}`)
+}

docs/fiddles/features/keyboard-shortcuts/global/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Hello World!</title>
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
+</head>
+<body>
+    <h1>Hello World!</h1>
+    <p>
+        We are using node <script>document.write(process.versions.node)</script>,
+        Chrome <script>document.write(process.versions.chrome)</script>,
+        and Electron <script>document.write(process.versions.electron)</script>.
+    </p>
+</body>
+</html>

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

@@ -0,0 +1,31 @@
+const { app, BrowserWindow, globalShortcut } = require('electron')
+
+function createWindow () {
+  const win = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      nodeIntegration: true
+    }
+  })
+
+  win.loadFile('index.html')
+}
+
+app.whenReady().then(() => {
+  globalShortcut.register('Alt+CommandOrControl+I', () => {
+    console.log('Electron loves global shortcuts!')
+  })
+}).then(createWindow)
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow()
+  }
+})

docs/fiddles/features/keyboard-shortcuts/interception-from-main/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Hello World!</title>
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
+</head>
+<body>
+    <h1>Hello World!</h1>
+    We are using node <script>document.write(process.versions.node)</script>,
+    Chrome <script>document.write(process.versions.chrome)</script>,
+    and Electron <script>document.write(process.versions.electron)</script>.
+</body>
+</html>

docs/fiddles/features/keyboard-shortcuts/interception-from-main/main.js

@@ -0,0 +1,13 @@
+const { app, BrowserWindow } = require('electron')
+
+app.whenReady().then(() => {
+  const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } })
+
+  win.loadFile('index.html')
+  win.webContents.on('before-input-event', (event, input) => {
+    if (input.control && input.key.toLowerCase() === 'i') {
+      console.log('Pressed Control+I')
+      event.preventDefault()
+    }
+  })
+})

docs/fiddles/features/keyboard-shortcuts/local/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Hello World!</title>
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
+</head>
+<body>
+    <h1>Hello World!</h1>
+    <p>
+        We are using node <script>document.write(process.versions.node)</script>,
+        Chrome <script>document.write(process.versions.chrome)</script>,
+        and Electron <script>document.write(process.versions.electron)</script>.
+    </p>
+</body>
+</html>

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

@@ -0,0 +1,39 @@
+const { app, BrowserWindow, Menu, MenuItem } = require('electron')
+
+function createWindow () {
+  const win = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      nodeIntegration: true
+    }
+  })
+
+  win.loadFile('index.html')
+}
+
+const menu = new Menu()
+menu.append(new MenuItem({
+  label: 'Electron',
+  submenu: [{
+    role: 'help',
+    accelerator: process.platform === 'darwin' ? 'Alt+Cmd+I' : 'Alt+Shift+I',
+    click: () => { console.log('Electron rocks!') }
+  }]
+}))
+
+Menu.setApplicationMenu(menu)
+
+app.whenReady().then(createWindow)
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow()
+  }
+})

docs/fiddles/features/macos-dark-mode/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Hello World!</title>
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
+    <link rel="stylesheet" type="text/css" href="./styles.css">
+</head>
+<body>
+    <h1>Hello World!</h1>
+    <p>Current theme source: <strong id="theme-source">System</strong></p>
+
+    <button id="toggle-dark-mode">Toggle Dark Mode</button>
+    <button id="reset-to-system">Reset to System Theme</button>
+
+    <script src="renderer.js"></script>
+  </body>
+</body>
+</html>

docs/fiddles/features/macos-dark-mode/main.js

@@ -0,0 +1,40 @@
+const { app, BrowserWindow, ipcMain, nativeTheme } = require('electron')
+
+function createWindow () {
+  const win = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      nodeIntegration: true
+    }
+  })
+
+  win.loadFile('index.html')
+
+  ipcMain.handle('dark-mode:toggle', () => {
+    if (nativeTheme.shouldUseDarkColors) {
+      nativeTheme.themeSource = 'light'
+    } else {
+      nativeTheme.themeSource = 'dark'
+    }
+    return nativeTheme.shouldUseDarkColors
+  })
+
+  ipcMain.handle('dark-mode:system', () => {
+    nativeTheme.themeSouce = 'system'
+  })
+}
+
+app.whenReady().then(createWindow)
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow()
+  }
+})

docs/fiddles/features/macos-dark-mode/renderer.js

@@ -0,0 +1,11 @@
+const { ipcRenderer } = require('electron')
+
+document.getElementById('toggle-dark-mode').addEventListener('click', async () => {
+  const isDarkMode = await ipcRenderer.invoke('dark-mode:toggle')
+  document.getElementById('theme-source').innerHTML = isDarkMode ? 'Dark' : 'Light'
+})
+
+document.getElementById('reset-to-system').addEventListener('click', async () => {
+  await ipcRenderer.invoke('dark-mode:system')
+  document.getElementById('theme-source').innerHTML = 'System'
+})

docs/fiddles/features/macos-dark-mode/styles.css

@@ -0,0 +1,7 @@
+@media (prefers-color-scheme: dark) {
+  body { background: #333; color: white; }
+}
+
+@media (prefers-color-scheme: light) {
+  body { background: #ddd; color: black; }
+}

docs/fiddles/features/macos-dock-menu/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Hello World!</title>
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
+</head>
+<body>
+    <h1>Hello World!</h1>
+    <p>
+        We are using node <script>document.write(process.versions.node)</script>,
+        Chrome <script>document.write(process.versions.chrome)</script>,
+        and Electron <script>document.write(process.versions.electron)</script>.
+    </p>
+</body>
+</html>

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

@@ -0,0 +1,43 @@
+const { app, BrowserWindow, Menu } = require('electron')
+
+function createWindow () {
+  const win = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      nodeIntegration: true
+    }
+  })
+
+  win.loadFile('index.html')
+}
+
+const dockMenu = Menu.buildFromTemplate([
+  {
+    label: 'New Window',
+    click () { console.log('New Window') }
+  }, {
+    label: 'New Window with Settings',
+    submenu: [
+      { label: 'Basic' },
+      { label: 'Pro' }
+    ]
+  },
+  { label: 'New Command...' }
+])
+
+app.whenReady().then(() => {
+  app.dock.setMenu(dockMenu)
+}).then(createWindow)
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow()
+  }
+})

docs/fiddles/features/notifications/main/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Hello World!</title>
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
+</head>
+<body>
+    <h1>Hello World!</h1>
+    <p>
+        We are using node <script>document.write(process.versions.node)</script>,
+        Chrome <script>document.write(process.versions.chrome)</script>,
+        and Electron <script>document.write(process.versions.electron)</script>.
+    </p>
+</body>
+</html>

docs/fiddles/features/notifications/main/main.js

@@ -0,0 +1,35 @@
+const { app, BrowserWindow, Notification } = require('electron')
+
+function createWindow () {
+  const win = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      nodeIntegration: true
+    }
+  })
+
+  win.loadFile('index.html')
+}
+
+function showNotification () {
+  const notification = {
+    title: 'Basic Notification',
+    body: 'Notification from the Main process'
+  }
+  new Notification(notification).show()
+}
+
+app.whenReady().then(createWindow).then(showNotification)
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow()
+  }
+})

docs/fiddles/features/notifications/renderer/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Hello World!</title>
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
+</head>
+<body>
+    <h1>Hello World!</h1>
+    <p>
+        We are using node <script>document.write(process.versions.node)</script>,
+        Chrome <script>document.write(process.versions.chrome)</script>,
+        and Electron <script>document.write(process.versions.electron)</script>.
+    </p>
+    <script src="renderer.js"></script>
+</body>
+</html>

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

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

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

@@ -0,0 +1,7 @@
+const myNotification = new Notification('Title', {
+  body: 'Notification from the Renderer process'
+})
+
+myNotification.onclick = () => {
+  console.log('Notification clicked')
+}

docs/fiddles/features/offscreen-rendering/index.html

@@ -0,0 +1,15 @@
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Hello World!</title>
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
+</head>
+<body>
+    <h1>Hello World!</h1>
+    <p>
+        We are using node <script>document.write(process.versions.node)</script>,
+        Chrome <script>document.write(process.versions.chrome)</script>,
+        and Electron <script>document.write(process.versions.electron)</script>.
+    </p>
+</body>
+</html>

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

@@ -0,0 +1,28 @@
+const { app, BrowserWindow } = require('electron')
+const fs = require('fs')
+
+app.disableHardwareAcceleration()
+
+let win
+
+app.whenReady().then(() => {
+  win = new BrowserWindow({ webPreferences: { offscreen: true } })
+  win.loadURL('https://github.com')
+  win.webContents.on('paint', (event, dirty, image) => {
+    fs.writeFileSync('ex.png', image.toPNG())
+  })
+  win.webContents.setFrameRate(60)
+  console.log(`The screenshot has been successfully saved to ${process.cwd()}/ex.png`)
+})
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow()
+  }
+})

docs/fiddles/features/online-detection/main/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Hello World!</title>
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
+</head>
+<body>
+    <h1>Hello World!</h1>
+    <p>
+        We are using node <script>document.write(process.versions.node)</script>,
+        Chrome <script>document.write(process.versions.chrome)</script>,
+        and Electron <script>document.write(process.versions.electron)</script>.
+    </p>
+    <script src="renderer.js"></script>
+</body>
+</html>

docs/fiddles/features/online-detection/main/main.js

@@ -0,0 +1,24 @@
+const { app, BrowserWindow, ipcMain } = require('electron')
+
+let onlineStatusWindow
+
+app.whenReady().then(() => {
+  onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false, webPreferences: { nodeIntegration: true } })
+  onlineStatusWindow.loadURL(`file://${__dirname}/index.html`)
+})
+
+ipcMain.on('online-status-changed', (event, status) => {
+  console.log(status)
+})
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow()
+  }
+})

docs/fiddles/features/online-detection/main/renderer.js

@@ -0,0 +1,7 @@
+const { ipcRenderer } = require('electron')
+const updateOnlineStatus = () => { ipcRenderer.send('online-status-changed', navigator.onLine ? 'online' : 'offline') }
+
+window.addEventListener('online', updateOnlineStatus)
+window.addEventListener('offline', updateOnlineStatus)
+
+updateOnlineStatus()

docs/fiddles/features/online-detection/renderer/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Hello World!</title>
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
+</head>
+<body>
+    <h1>Hello World!</h1>
+    <p>
+        We are using node <script>document.write(process.versions.node)</script>,
+        Chrome <script>document.write(process.versions.chrome)</script>,
+        and Electron <script>document.write(process.versions.electron)</script>.
+    </p>
+    <script src="renderer.js"></script>
+</body>
+</html>

docs/fiddles/features/online-detection/renderer/main.js

@@ -0,0 +1,20 @@
+const { app, BrowserWindow } = require('electron')
+
+let onlineStatusWindow
+
+app.whenReady().then(() => {
+  onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false })
+  onlineStatusWindow.loadURL(`file://${__dirname}/index.html`)
+})
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow()
+  }
+})

docs/fiddles/features/online-detection/renderer/renderer.js

@@ -0,0 +1,6 @@
+const alertOnlineStatus = () => { window.alert(navigator.onLine ? 'online' : 'offline') }
+
+window.addEventListener('online', alertOnlineStatus)
+window.addEventListener('offline', alertOnlineStatus)
+
+alertOnlineStatus()

docs/fiddles/features/progress-bar/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Hello World!</title>
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
+</head>
+<body>
+    <h1>Hello World!</h1>
+    <p>
+        We are using node <script>document.write(process.versions.node)</script>,
+        Chrome <script>document.write(process.versions.chrome)</script>,
+        and Electron <script>document.write(process.versions.electron)</script>.
+    </p>
+</body>
+</html>

docs/fiddles/features/progress-bar/main.js

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

docs/fiddles/features/recent-documents/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Hello World!</title>
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
+</head>
+<body>
+    <h1>Hello World!</h1>
+    <p>
+        We are using node <script>document.write(process.versions.node)</script>,
+        Chrome <script>document.write(process.versions.chrome)</script>,
+        and Electron <script>document.write(process.versions.electron)</script>.
+    </p>
+</body>
+</html>

docs/fiddles/features/recent-documents/main.js

@@ -0,0 +1,34 @@
+const { app, BrowserWindow } = require('electron')
+const fs = require('fs')
+const path = require('path')
+
+function createWindow () {
+  const win = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      nodeIntegration: true
+    }
+  })
+
+  win.loadFile('index.html')
+}
+const fileName = 'recently-used.md'
+fs.writeFile(fileName, 'Lorem Ipsum', () => {
+  app.addRecentDocument(path.join(process.cwd(), `${fileName}`))
+})
+
+app.whenReady().then(createWindow)
+
+app.on('window-all-closed', () => {
+  app.clearRecentDocuments()
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow()
+  }
+})

docs/fiddles/features/represented-file/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Hello World!</title>
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
+</head>
+<body>
+    <h1>Hello World!</h1>
+    <p>
+        We are using node <script>document.write(process.versions.node)</script>,
+        Chrome <script>document.write(process.versions.chrome)</script>,
+        and Electron <script>document.write(process.versions.electron)</script>.
+    </p>
+</body>
+</html>

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

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

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

@@ -1,95 +1,95 @@
-// Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain, dialog } = require('electron')
-
-// Keep a global reference of the window object, if you don't, the window will
-// be closed automatically when the JavaScript object is garbage collected.
-let mainWindow
-
-function createWindow () {
-  // Create the browser window.
-  mainWindow = new BrowserWindow({
-    width: 800,
-    height: 600,
-    webPreferences: {
-      nodeIntegration: true
-    }
-  })
-
-  // and load the index.html of the app.
-  mainWindow.loadFile('index.html')
-
-  // Open the DevTools.
-  // mainWindow.webContents.openDevTools()
-
-  // Emitted when the window is closed.
-  mainWindow.on('closed', function () {
-    // Dereference the window object, usually you would store windows
-    // in an array if your app supports multi windows, this is the time
-    // when you should delete the corresponding element.
-    mainWindow = null
-  })
-}
-
-// 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)
-
-// 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 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()
-  }
-})
-
-ipcMain.on('open-error-dialog', event => {
-  dialog.showErrorBox('An Error Message', 'Demonstrating an error message.')
-})
-
-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)
-  })
-})
-
-ipcMain.on('open-file-dialog', event => {
-  dialog.showOpenDialog(
-    {
-      properties: ['openFile', 'openDirectory']
-    },
-    files => {
-      if (files) {
-        event.sender.send('selected-directory', files)
-      }
-    }
-  )
-})
-
-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)
-  })
-})
-
-// 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.
+// Modules to control application life and create native browser window
+const { app, BrowserWindow, ipcMain, dialog } = require('electron')
+
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the JavaScript object is garbage collected.
+let mainWindow
+
+function createWindow () {
+  // Create the browser window.
+  mainWindow = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      nodeIntegration: true
+    }
+  })
+
+  // and load the index.html of the app.
+  mainWindow.loadFile('index.html')
+
+  // Open the DevTools.
+  // mainWindow.webContents.openDevTools()
+
+  // Emitted when the window is closed.
+  mainWindow.on('closed', function () {
+    // Dereference the window object, usually you would store windows
+    // in an array if your app supports multi windows, this is the time
+    // when you should delete the corresponding element.
+    mainWindow = null
+  })
+}
+
+// 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)
+
+// 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 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()
+  }
+})
+
+ipcMain.on('open-error-dialog', event => {
+  dialog.showErrorBox('An Error Message', 'Demonstrating an error message.')
+})
+
+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)
+  })
+})
+
+ipcMain.on('open-file-dialog', event => {
+  dialog.showOpenDialog(
+    {
+      properties: ['openFile', 'openDirectory']
+    },
+    files => {
+      if (files) {
+        event.sender.send('selected-directory', files)
+      }
+    }
+  )
+})
+
+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)
+  })
+})
+
+// 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/error-dialog/renderer.js

@@ -1,18 +1,18 @@
-const { ipcRenderer, shell } = require('electron')
-
-const links = document.querySelectorAll('a[href]')
-const errorBtn = document.getElementById('error-dialog')
-
-errorBtn.addEventListener('click', event => {
-  ipcRenderer.send('open-error-dialog')
-})
-
-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)
-    })
-  }
+const { ipcRenderer, shell } = require('electron')
+
+const links = document.querySelectorAll('a[href]')
+const errorBtn = document.getElementById('error-dialog')
+
+errorBtn.addEventListener('click', event => {
+  ipcRenderer.send('open-error-dialog')
+})
+
+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/dialogs/information-dialog/main.js

@@ -1,70 +1,70 @@
-// Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain, dialog } = require('electron')
-
-// Keep a global reference of the window object, if you don't, the window will
-// be closed automatically when the JavaScript object is garbage collected.
-let mainWindow
-
-function createWindow () {
-  // Create the browser window.
-  mainWindow = new BrowserWindow({
-    width: 800,
-    height: 600,
-    webPreferences: {
-      nodeIntegration: true
-    }
-  })
-
-  // and load the index.html of the app.
-  mainWindow.loadFile('index.html')
-
-  // Open the DevTools.
-  // mainWindow.webContents.openDevTools()
-
-  // Emitted when the window is closed.
-  mainWindow.on('closed', function () {
-    // Dereference the window object, usually you would store windows
-    // in an array if your app supports multi windows, this is the time
-    // when you should delete the corresponding element.
-    mainWindow = null
-  })
-}
-
-// 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)
-
-// 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 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()
-  }
-})
-
-
-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)
-  })
-})
-
-
-// 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.
+// Modules to control application life and create native browser window
+const { app, BrowserWindow, ipcMain, dialog } = require('electron')
+
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the JavaScript object is garbage collected.
+let mainWindow
+
+function createWindow () {
+  // Create the browser window.
+  mainWindow = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      nodeIntegration: true
+    }
+  })
+
+  // and load the index.html of the app.
+  mainWindow.loadFile('index.html')
+
+  // Open the DevTools.
+  // mainWindow.webContents.openDevTools()
+
+  // Emitted when the window is closed.
+  mainWindow.on('closed', function () {
+    // Dereference the window object, usually you would store windows
+    // in an array if your app supports multi windows, this is the time
+    // when you should delete the corresponding element.
+    mainWindow = null
+  })
+}
+
+// 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)
+
+// 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 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()
+  }
+})
+
+
+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)
+  })
+})
+
+
+// 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

@@ -1,25 +1,25 @@
-const { ipcRenderer, shell } = require('electron')
-
-const informationBtn = document.getElementById('information-dialog')
-const links = document.querySelectorAll('a[href]')
-
-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
-})
-
-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)
-    })
-  }
+const { ipcRenderer, shell } = require('electron')
+
+const informationBtn = document.getElementById('information-dialog')
+const links = document.querySelectorAll('a[href]')
+
+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
+})
+
+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/dialogs/open-file-or-directory/main.js

@@ -1,70 +1,70 @@
-// Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain, dialog } = require('electron')
-
-// Keep a global reference of the window object, if you don't, the window will
-// be closed automatically when the JavaScript object is garbage collected.
-let mainWindow
-
-function createWindow () {
-  // Create the browser window.
-  mainWindow = new BrowserWindow({
-    width: 800,
-    height: 600,
-    webPreferences: {
-      nodeIntegration: true
-    }
-  })
-
-  // and load the index.html of the app.
-  mainWindow.loadFile('index.html')
-
-  // Open the DevTools.
-  // mainWindow.webContents.openDevTools()
-
-  // Emitted when the window is closed.
-  mainWindow.on('closed', function () {
-    // Dereference the window object, usually you would store windows
-    // in an array if your app supports multi windows, this is the time
-    // when you should delete the corresponding element.
-    mainWindow = null
-  })
-}
-
-// 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)
-
-// 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 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()
-  }
-})
-
-
-ipcMain.on('open-file-dialog', event => {
-  dialog.showOpenDialog(
-    {
-      properties: ['openFile', 'openDirectory']
-    },
-    files => {
-      if (files) {
-        event.sender.send('selected-directory', files)
-      }
-    }
-  )
-})
-
-// 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.
+// Modules to control application life and create native browser window
+const { app, BrowserWindow, ipcMain, dialog } = require('electron')
+
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the JavaScript object is garbage collected.
+let mainWindow
+
+function createWindow () {
+  // Create the browser window.
+  mainWindow = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      nodeIntegration: true
+    }
+  })
+
+  // and load the index.html of the app.
+  mainWindow.loadFile('index.html')
+
+  // Open the DevTools.
+  // mainWindow.webContents.openDevTools()
+
+  // Emitted when the window is closed.
+  mainWindow.on('closed', function () {
+    // Dereference the window object, usually you would store windows
+    // in an array if your app supports multi windows, this is the time
+    // when you should delete the corresponding element.
+    mainWindow = null
+  })
+}
+
+// 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)
+
+// 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 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()
+  }
+})
+
+
+ipcMain.on('open-file-dialog', event => {
+  dialog.showOpenDialog(
+    {
+      properties: ['openFile', 'openDirectory']
+    },
+    files => {
+      if (files) {
+        event.sender.send('selected-directory', files)
+      }
+    }
+  )
+})
+
+// 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/open-file-or-directory/renderer.js

@@ -1,22 +1,22 @@
-const { ipcRenderer, shell } = require('electron')
-
-const selectDirBtn = document.getElementById('select-directory')
-const links = document.querySelectorAll('a[href]')
-
-selectDirBtn.addEventListener('click', event => {
-  ipcRenderer.send('open-file-dialog')
-})
-
-ipcRenderer.on('selected-directory', (event, path) => {
-  document.getElementById('selected-file').innerHTML = `You selected: ${path}`
-})
-
-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)
-    })
-  }
-})
+const { ipcRenderer, shell } = require('electron')
+
+const selectDirBtn = document.getElementById('select-directory')
+const links = document.querySelectorAll('a[href]')
+
+selectDirBtn.addEventListener('click', event => {
+  ipcRenderer.send('open-file-dialog')
+})
+
+ipcRenderer.on('selected-directory', (event, path) => {
+  document.getElementById('selected-file').innerHTML = `You selected: ${path}`
+})
+
+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/dialogs/save-dialog/main.js

@@ -1,66 +1,66 @@
-// Modules to control application life and create native browser window
-const { app, BrowserWindow, ipcMain, dialog } = require('electron')
-
-// Keep a global reference of the window object, if you don't, the window will
-// be closed automatically when the JavaScript object is garbage collected.
-let mainWindow
-
-function createWindow () {
-  // Create the browser window.
-  mainWindow = new BrowserWindow({
-    width: 800,
-    height: 600,
-    webPreferences: {
-      nodeIntegration: true
-    }
-  })
-
-  // and load the index.html of the app.
-  mainWindow.loadFile('index.html')
-
-  // Open the DevTools.
-  // mainWindow.webContents.openDevTools()
-
-  // Emitted when the window is closed.
-  mainWindow.on('closed', function () {
-    // Dereference the window object, usually you would store windows
-    // in an array if your app supports multi windows, this is the time
-    // when you should delete the corresponding element.
-    mainWindow = null
-  })
-}
-
-// 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)
-
-// 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 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()
-  }
-})
-
-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)
-  })
-})
-
-// 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.
+// Modules to control application life and create native browser window
+const { app, BrowserWindow, ipcMain, dialog } = require('electron')
+
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the JavaScript object is garbage collected.
+let mainWindow
+
+function createWindow () {
+  // Create the browser window.
+  mainWindow = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      nodeIntegration: true
+    }
+  })
+
+  // and load the index.html of the app.
+  mainWindow.loadFile('index.html')
+
+  // Open the DevTools.
+  // mainWindow.webContents.openDevTools()
+
+  // Emitted when the window is closed.
+  mainWindow.on('closed', function () {
+    // Dereference the window object, usually you would store windows
+    // in an array if your app supports multi windows, this is the time
+    // when you should delete the corresponding element.
+    mainWindow = null
+  })
+}
+
+// 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)
+
+// 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 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()
+  }
+})
+
+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)
+  })
+})
+
+// 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/save-dialog/renderer.js

@@ -1,23 +1,23 @@
-const { ipcRenderer, shell } = require('electron')
-
-const saveBtn = document.getElementById('save-dialog')
-const links = document.querySelectorAll('a[href]')
-
-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}`
-})
-
-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)
-    })
-  }
+const { ipcRenderer, shell } = require('electron')
+
+const saveBtn = document.getElementById('save-dialog')
+const links = document.querySelectorAll('a[href]')
+
+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}`
+})
+
+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/main.js

@@ -1,56 +1,56 @@
-// Modules to control application life and create native browser window
-const { app, BrowserWindow } = require('electron')
-
-// Keep a global reference of the window object, if you don't, the window will
-// be closed automatically when the JavaScript object is garbage collected.
-let mainWindow
-
-function createWindow () {
-  // Create the browser window.
-  mainWindow = new BrowserWindow({
-    width: 800,
-    height: 600,
-    webPreferences: {
-      nodeIntegration: true
-    }
-  })
-
-  // and load the index.html of the app.
-  mainWindow.loadFile('index.html')
-
-  // Open the DevTools.
-  // mainWindow.webContents.openDevTools()
-
-  // Emitted when the window is closed.
-  mainWindow.on('closed', function () {
-    // Dereference the window object, usually you would store windows
-    // in an array if your app supports multi windows, this is the time
-    // when you should delete the corresponding element.
-    mainWindow = null
-  })
-}
-
-// 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)
-
-// 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 is common to re-create a window in the app when the
-  // dock icon is clicked and there are no other windows open.
-  if (mainWindow === null) {
-    createWindow()
-  }
-})
-
-// In this file you can include the rest of your app's specific main process
+// Modules to control application life and create native browser window
+const { app, BrowserWindow } = require('electron')
+
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the JavaScript object is garbage collected.
+let mainWindow
+
+function createWindow () {
+  // Create the browser window.
+  mainWindow = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      nodeIntegration: true
+    }
+  })
+
+  // and load the index.html of the app.
+  mainWindow.loadFile('index.html')
+
+  // Open the DevTools.
+  // mainWindow.webContents.openDevTools()
+
+  // Emitted when the window is closed.
+  mainWindow.on('closed', function () {
+    // Dereference the window object, usually you would store windows
+    // in an array if your app supports multi windows, this is the time
+    // when you should delete the corresponding element.
+    mainWindow = null
+  })
+}
+
+// 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)
+
+// 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 is common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (mainWindow === null) {
+    createWindow()
+  }
+})
+
+// In this file you can include the rest of your app's specific main process
 // code. You can also put them in separate files and require them here.

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

@@ -1,13 +1,13 @@
-const { shell } = require('electron')
-const os = require('os')
-
-const exLinksBtn = document.getElementById('open-ex-links')
-const fileManagerBtn = document.getElementById('open-file-manager')
-
-fileManagerBtn.addEventListener('click', (event) => {
-  shell.showItemInFolder(os.homedir())
-})
-
-exLinksBtn.addEventListener('click', (event) => {
-  shell.openExternal('https://electronjs.org')
+const { shell } = require('electron')
+const os = require('os')
+
+const exLinksBtn = document.getElementById('open-ex-links')
+const fileManagerBtn = document.getElementById('open-file-manager')
+
+fileManagerBtn.addEventListener('click', (event) => {
+  shell.showItemInFolder(os.homedir())
+})
+
+exLinksBtn.addEventListener('click', (event) => {
+  shell.openExternal('https://electronjs.org')
 })

docs/fiddles/native-ui/notifications/main.js

@@ -1,56 +1,56 @@
-// Modules to control application life and create native browser window
-const { app, BrowserWindow } = require('electron')
-
-// Keep a global reference of the window object, if you don't, the window will
-// be closed automatically when the JavaScript object is garbage collected.
-let mainWindow
-
-function createWindow () {
-  // Create the browser window.
-  mainWindow = new BrowserWindow({
-    width: 800,
-    height: 600,
-    webPreferences: {
-      nodeIntegration: true
-    }
-  })
-
-  // and load the index.html of the app.
-  mainWindow.loadFile('index.html')
-
-  // Open the DevTools.
-  // mainWindow.webContents.openDevTools()
-
-  // Emitted when the window is closed.
-  mainWindow.on('closed', function () {
-    // Dereference the window object, usually you would store windows
-    // in an array if your app supports multi windows, this is the time
-    // when you should delete the corresponding element.
-    mainWindow = null
-  })
-}
-
-// 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)
-
-// 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 is common to re-create a window in the app when the
-  // dock icon is clicked and there are no other windows open.
-  if (mainWindow === null) {
-    createWindow()
-  }
-})
-
-// In this file you can include the rest of your app's specific main process
+// Modules to control application life and create native browser window
+const { app, BrowserWindow } = require('electron')
+
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the JavaScript object is garbage collected.
+let mainWindow
+
+function createWindow () {
+  // Create the browser window.
+  mainWindow = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      nodeIntegration: true
+    }
+  })
+
+  // and load the index.html of the app.
+  mainWindow.loadFile('index.html')
+
+  // Open the DevTools.
+  // mainWindow.webContents.openDevTools()
+
+  // Emitted when the window is closed.
+  mainWindow.on('closed', function () {
+    // Dereference the window object, usually you would store windows
+    // in an array if your app supports multi windows, this is the time
+    // when you should delete the corresponding element.
+    mainWindow = null
+  })
+}
+
+// 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)
+
+// 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 is common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (mainWindow === null) {
+    createWindow()
+  }
+})
+
+// In this file you can include the rest of your app's specific main process
 // code. You can also put them in separate files and require them here.

docs/fiddles/native-ui/notifications/renderer.js

@@ -1,29 +1,29 @@
-const basicNotification = {
-  title: 'Basic Notification',
-  body: 'Short message part'
-}
-
-const notification = {
-  title: 'Notification with image',
-  body: 'Short message plus a custom image',
-  icon: 'https://via.placeholder.com/150'
-}
-
-const basicNotificationButton = document.getElementById('basic-noti')
-const notificationButton = document.getElementById('advanced-noti')
-
-notificationButton.addEventListener('click', () => {
-  const myNotification = new window.Notification(notification.title, notification)
-
-  myNotification.onclick = () => {
-    console.log('Notification clicked')
-  }
-})
-
-basicNotificationButton.addEventListener('click', () => {
-  const myNotification = new window.Notification(basicNotification.title, basicNotification)
-
-  myNotification.onclick = () => {
-    console.log('Notification clicked')
-  }
-})
+const basicNotification = {
+  title: 'Basic Notification',
+  body: 'Short message part'
+}
+
+const notification = {
+  title: 'Notification with image',
+  body: 'Short message plus a custom image',
+  icon: 'https://via.placeholder.com/150'
+}
+
+const basicNotificationButton = document.getElementById('basic-noti')
+const notificationButton = document.getElementById('advanced-noti')
+
+notificationButton.addEventListener('click', () => {
+  const myNotification = new window.Notification(notification.title, notification)
+
+  myNotification.onclick = () => {
+    console.log('Notification clicked')
+  }
+})
+
+basicNotificationButton.addEventListener('click', () => {
+  const myNotification = new window.Notification(basicNotification.title, basicNotification)
+
+  myNotification.onclick = () => {
+    console.log('Notification clicked')
+  }
+})

docs/fiddles/native-ui/tray/renderer.js

@@ -1,35 +1,35 @@
-const { ipcRenderer, shell } = require('electron')
-
-const trayBtn = document.getElementById('put-in-tray')
-const links = document.querySelectorAll('a[href]')
-
-let trayOn = false
-
-trayBtn.addEventListener('click', function (event) {
-  if (trayOn) {
-    trayOn = false
-    document.getElementById('tray-countdown').innerHTML = ''
-    ipcRenderer.send('remove-tray')
-  } else {
-    trayOn = true
-    const message = 'Click demo again to remove.'
-    document.getElementById('tray-countdown').innerHTML = message
-    ipcRenderer.send('put-in-tray')
-  }
-})
-// Tray removed from context menu on icon
-ipcRenderer.on('tray-removed', function () {
-  ipcRenderer.send('remove-tray')
-  trayOn = false
-  document.getElementById('tray-countdown').innerHTML = ''
-})
-
-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)
-    })
-  }
+const { ipcRenderer, shell } = require('electron')
+
+const trayBtn = document.getElementById('put-in-tray')
+const links = document.querySelectorAll('a[href]')
+
+let trayOn = false
+
+trayBtn.addEventListener('click', function (event) {
+  if (trayOn) {
+    trayOn = false
+    document.getElementById('tray-countdown').innerHTML = ''
+    ipcRenderer.send('remove-tray')
+  } else {
+    trayOn = true
+    const message = 'Click demo again to remove.'
+    document.getElementById('tray-countdown').innerHTML = message
+    ipcRenderer.send('put-in-tray')
+  }
+})
+// Tray removed from context menu on icon
+ipcRenderer.on('tray-removed', function () {
+  ipcRenderer.send('remove-tray')
+  trayOn = false
+  document.getElementById('tray-countdown').innerHTML = ''
+})
+
+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/quick-start/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Hello World!</title>
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
+</head>
+<body>
+    <h1>Hello World!</h1>
+    <p>
+        We are using node <script>document.write(process.versions.node)</script>,
+        Chrome <script>document.write(process.versions.chrome)</script>,
+        and Electron <script>document.write(process.versions.electron)</script>.
+    </p>
+</body>
+</html>

docs/fiddles/quick-start/main.js

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

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

@@ -1,56 +1,56 @@
-// Modules to control application life and create native browser window
-const { app, BrowserWindow } = require('electron')
-
-// Keep a global reference of the window object, if you don't, the window will
-// be closed automatically when the JavaScript object is garbage collected.
-let mainWindow
-
-function createWindow () {
-  // Create the browser window.
-  mainWindow = new BrowserWindow({
-    width: 800,
-    height: 600,
-    webPreferences: {
-      nodeIntegration: true
-    }
-  })
-
-  // and load the index.html of the app.
-  mainWindow.loadFile('index.html')
-
-  // Open the DevTools.
-  // mainWindow.webContents.openDevTools()
-
-  // Emitted when the window is closed.
-  mainWindow.on('closed', function () {
-    // Dereference the window object, usually you would store windows
-    // in an array if your app supports multi windows, this is the time
-    // when you should delete the corresponding element.
-    mainWindow = null
-  })
-}
-
-// 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)
-
-// 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 is common to re-create a window in the app when the
-  // dock icon is clicked and there are no other windows open.
-  if (mainWindow === null) {
-    createWindow()
-  }
-})
-
-// In this file you can include the rest of your app's specific main process
+// Modules to control application life and create native browser window
+const { app, BrowserWindow } = require('electron')
+
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the JavaScript object is garbage collected.
+let mainWindow
+
+function createWindow () {
+  // Create the browser window.
+  mainWindow = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      nodeIntegration: true
+    }
+  })
+
+  // and load the index.html of the app.
+  mainWindow.loadFile('index.html')
+
+  // Open the DevTools.
+  // mainWindow.webContents.openDevTools()
+
+  // Emitted when the window is closed.
+  mainWindow.on('closed', function () {
+    // Dereference the window object, usually you would store windows
+    // in an array if your app supports multi windows, this is the time
+    // when you should delete the corresponding element.
+    mainWindow = null
+  })
+}
+
+// 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)
+
+// 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 is common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (mainWindow === null) {
+    createWindow()
+  }
+})
+
+// In this file you can include the rest of your app's specific main process
 // code. You can also put them in separate files and require them here.

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

@@ -1,25 +1,25 @@
-const { BrowserWindow } = require('electron').remote
-const shell = require('electron').shell
-
-const framelessWindowBtn = document.getElementById('frameless-window')
-
-const links = document.querySelectorAll('a[href]')
-
-framelessWindowBtn.addEventListener('click', (event) => {
-  const modalPath = 'https://electronjs.org'
-  let win = new BrowserWindow({ frame: false })
-
-  win.on('close', () => { win = null })
-  win.loadURL(modalPath)
-  win.show()
-})
-
-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)
-    })
-  }
-})
+const { BrowserWindow } = require('electron').remote
+const shell = require('electron').shell
+
+const framelessWindowBtn = document.getElementById('frameless-window')
+
+const links = document.querySelectorAll('a[href]')
+
+framelessWindowBtn.addEventListener('click', (event) => {
+  const modalPath = 'https://electronjs.org'
+  let win = new BrowserWindow({ frame: false })
+
+  win.on('close', () => { win = null })
+  win.loadURL(modalPath)
+  win.show()
+})
+
+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/windows/manage-windows/manage-window-state/main.js

@@ -1,56 +1,56 @@
-// Modules to control application life and create native browser window
-const { app, BrowserWindow } = require('electron')
-
-// Keep a global reference of the window object, if you don't, the window will
-// be closed automatically when the JavaScript object is garbage collected.
-let mainWindow
-
-function createWindow () {
-  // Create the browser window.
-  mainWindow = new BrowserWindow({
-    width: 800,
-    height: 600,
-    webPreferences: {
-      nodeIntegration: true
-    }
-  })
-
-  // and load the index.html of the app.
-  mainWindow.loadFile('index.html')
-
-  // Open the DevTools.
-  // mainWindow.webContents.openDevTools()
-
-  // Emitted when the window is closed.
-  mainWindow.on('closed', function () {
-    // Dereference the window object, usually you would store windows
-    // in an array if your app supports multi windows, this is the time
-    // when you should delete the corresponding element.
-    mainWindow = null
-  })
-}
-
-// 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)
-
-// 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 is common to re-create a window in the app when the
-  // dock icon is clicked and there are no other windows open.
-  if (mainWindow === null) {
-    createWindow()
-  }
-})
-
-// In this file you can include the rest of your app's specific main process
+// Modules to control application life and create native browser window
+const { app, BrowserWindow } = require('electron')
+
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the JavaScript object is garbage collected.
+let mainWindow
+
+function createWindow () {
+  // Create the browser window.
+  mainWindow = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      nodeIntegration: true
+    }
+  })
+
+  // and load the index.html of the app.
+  mainWindow.loadFile('index.html')
+
+  // Open the DevTools.
+  // mainWindow.webContents.openDevTools()
+
+  // Emitted when the window is closed.
+  mainWindow.on('closed', function () {
+    // Dereference the window object, usually you would store windows
+    // in an array if your app supports multi windows, this is the time
+    // when you should delete the corresponding element.
+    mainWindow = null
+  })
+}
+
+// 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)
+
+// 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 is common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (mainWindow === null) {
+    createWindow()
+  }
+})
+
+// In this file you can include the rest of your app's specific main process
 // code. You can also put them in separate files and require them here.

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

@@ -1,35 +1,35 @@
-const { BrowserWindow } = require('electron').remote
-const shell = require('electron').shell
-
-const manageWindowBtn = document.getElementById('manage-window')
-
-const links = document.querySelectorAll('a[href]')
-
-let win
-
-manageWindowBtn.addEventListener('click', (event) => {
-  const modalPath = 'https://electronjs.org'
-  win = new BrowserWindow({ width: 400, height: 275 })
-
-  win.on('resize', updateReply)
-  win.on('move', updateReply)
-  win.on('close', () => { win = null })
-  win.loadURL(modalPath)
-  win.show()
-
-  function updateReply () {
-    const manageWindowReply = document.getElementById('manage-window-reply')
-    const message = `Size: ${win.getSize()} Position: ${win.getPosition()}`
-    manageWindowReply.innerText = message
-  }
-})
-
-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)
-    })
-  }
-})
+const { BrowserWindow } = require('electron').remote
+const shell = require('electron').shell
+
+const manageWindowBtn = document.getElementById('manage-window')
+
+const links = document.querySelectorAll('a[href]')
+
+let win
+
+manageWindowBtn.addEventListener('click', (event) => {
+  const modalPath = 'https://electronjs.org'
+  win = new BrowserWindow({ width: 400, height: 275 })
+
+  win.on('resize', updateReply)
+  win.on('move', updateReply)
+  win.on('close', () => { win = null })
+  win.loadURL(modalPath)
+  win.show()
+
+  function updateReply () {
+    const manageWindowReply = document.getElementById('manage-window-reply')
+    const message = `Size: ${win.getSize()} Position: ${win.getPosition()}`
+    manageWindowReply.innerText = message
+  }
+})
+
+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/windows/manage-windows/window-events/main.js

@@ -1,56 +1,56 @@
-// Modules to control application life and create native browser window
-const { app, BrowserWindow } = require('electron')
-
-// Keep a global reference of the window object, if you don't, the window will
-// be closed automatically when the JavaScript object is garbage collected.
-let mainWindow
-
-function createWindow () {
-  // Create the browser window.
-  mainWindow = new BrowserWindow({
-    width: 800,
-    height: 600,
-    webPreferences: {
-      nodeIntegration: true
-    }
-  })
-
-  // and load the index.html of the app.
-  mainWindow.loadFile('index.html')
-
-  // Open the DevTools.
-  // mainWindow.webContents.openDevTools()
-
-  // Emitted when the window is closed.
-  mainWindow.on('closed', function () {
-    // Dereference the window object, usually you would store windows
-    // in an array if your app supports multi windows, this is the time
-    // when you should delete the corresponding element.
-    mainWindow = null
-  })
-}
-
-// 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)
-
-// 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 is common to re-create a window in the app when the
-  // dock icon is clicked and there are no other windows open.
-  if (mainWindow === null) {
-    createWindow()
-  }
-})
-
-// In this file you can include the rest of your app's specific main process
+// Modules to control application life and create native browser window
+const { app, BrowserWindow } = require('electron')
+
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the JavaScript object is garbage collected.
+let mainWindow
+
+function createWindow () {
+  // Create the browser window.
+  mainWindow = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      nodeIntegration: true
+    }
+  })
+
+  // and load the index.html of the app.
+  mainWindow.loadFile('index.html')
+
+  // Open the DevTools.
+  // mainWindow.webContents.openDevTools()
+
+  // Emitted when the window is closed.
+  mainWindow.on('closed', function () {
+    // Dereference the window object, usually you would store windows
+    // in an array if your app supports multi windows, this is the time
+    // when you should delete the corresponding element.
+    mainWindow = null
+  })
+}
+
+// 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)
+
+// 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 is common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (mainWindow === null) {
+    createWindow()
+  }
+})
+
+// In this file you can include the rest of your app's specific main process
 // code. You can also put them in separate files and require them here.

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

@@ -1,48 +1,48 @@
-const { BrowserWindow } = require('electron').remote
-const shell = require('electron').shell
-
-const listenToWindowBtn = document.getElementById('listen-to-window')
-const focusModalBtn = document.getElementById('focus-on-modal-window')
-
-const links = document.querySelectorAll('a[href]')
-
-let win
-
-listenToWindowBtn.addEventListener('click', () => {
-  const modalPath = 'https://electronjs.org'
-  win = new BrowserWindow({ width: 600, height: 400 })
-
-  const hideFocusBtn = () => {
-    focusModalBtn.classList.add('disappear')
-    focusModalBtn.classList.remove('smooth-appear')
-    focusModalBtn.removeEventListener('click', clickHandler)
-  }
-
-  const showFocusBtn = (btn) => {
-    if (!win) return
-    focusModalBtn.classList.add('smooth-appear')
-    focusModalBtn.classList.remove('disappear')
-    focusModalBtn.addEventListener('click', clickHandler)
-  }
-
-  win.on('focus', hideFocusBtn)
-  win.on('blur', showFocusBtn)
-  win.on('close', () => {
-    hideFocusBtn()
-    win = null
-  })
-  win.loadURL(modalPath)
-  win.show()
-
-  const clickHandler = () => { win.focus() }
-})
-
-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)
-    })
-  }
-})
+const { BrowserWindow } = require('electron').remote
+const shell = require('electron').shell
+
+const listenToWindowBtn = document.getElementById('listen-to-window')
+const focusModalBtn = document.getElementById('focus-on-modal-window')
+
+const links = document.querySelectorAll('a[href]')
+
+let win
+
+listenToWindowBtn.addEventListener('click', () => {
+  const modalPath = 'https://electronjs.org'
+  win = new BrowserWindow({ width: 600, height: 400 })
+
+  const hideFocusBtn = () => {
+    focusModalBtn.classList.add('disappear')
+    focusModalBtn.classList.remove('smooth-appear')
+    focusModalBtn.removeEventListener('click', clickHandler)
+  }
+
+  const showFocusBtn = (btn) => {
+    if (!win) return
+    focusModalBtn.classList.add('smooth-appear')
+    focusModalBtn.classList.remove('disappear')
+    focusModalBtn.addEventListener('click', clickHandler)
+  }
+
+  win.on('focus', hideFocusBtn)
+  win.on('blur', showFocusBtn)
+  win.on('close', () => {
+    hideFocusBtn()
+    win = null
+  })
+  win.loadURL(modalPath)
+  win.show()
+
+  const clickHandler = () => { win.focus() }
+})
+
+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/tutorial/devtools-extension.md

@@ -1,25 +1,28 @@
 # DevTools Extension
 
-Electron supports the [Chrome DevTools Extension][devtools-extension], which can
-be used to extend the ability of devtools for debugging popular web frameworks.
+Electron supports [Chrome DevTools extensions][devtools-extension], which can
+be used to extend the ability of Chrome's developer tools for debugging
+popular web frameworks.
 
-## How to load a DevTools Extension
+## Loading a DevTools extension with tooling
 
-This document outlines the process for manually loading an extension.
-You may also try
-[electron-devtools-installer](https://github.com/GPMDP/electron-devtools-installer),
-a third-party tool that downloads extensions directly from the Chrome WebStore.
+The easiest way to load a DevTools extension is to use third-party tooling to automate the
+process for you. [electron-devtools-installer][electron-devtools-installer] is a popular
+NPM package that does just that.
 
-To load an extension in Electron, you need to download it in Chrome browser,
-locate its filesystem path, and then load it by calling the
-`BrowserWindow.addDevToolsExtension(extension)` API.
+## Manually loading a DevTools extension
 
-Using the [React Developer Tools][react-devtools] as example:
+If you don't want to use the tooling approach, you can also do all of the necessary
+operations by hand. To load an extension in Electron, you need to download it via Chrome,
+locate its filesystem path, and then load it into your [Session][session] by calling the
+[`ses.loadExtension`] API.
 
-1. Install it in Chrome browser.
+Using the [React Developer Tools][react-devtools] as an example:
+
+1. Install the extension in Google Chrome.
 1. Navigate to `chrome://extensions`, and find its extension ID, which is a hash
    string like `fmkadmapgofadopljbjfkapdkoienihi`.
-1. Find out filesystem location used by Chrome for storing extensions:
+1. Find out the filesystem location used by Chrome for storing extensions:
    * on Windows it is `%LOCALAPPDATA%\Google\Chrome\User Data\Default\Extensions`;
    * on Linux it could be:
      * `~/.config/google-chrome/Default/Extensions/`
@@ -27,36 +30,48 @@ Using the [React Developer Tools][react-devtools] as example:
      * `~/.config/google-chrome-canary/Default/Extensions/`
      * `~/.config/chromium/Default/Extensions/`
    * on macOS it is `~/Library/Application Support/Google/Chrome/Default/Extensions`.
-1. Pass the location of the extension to `BrowserWindow.addDevToolsExtension`
-   API, for the React Developer Tools, it is something like:
+1. Pass the location of the extension to the [`ses.loadExtension`][load-extension]
+   API. For React Developer Tools `v4.9.0`, it looks something like:
    ```javascript
-   const path = require('path')
-   const os = require('os')
+    const { app, session } = require('electron')
+    const path = require('path')
+    const os = require('os')
 
-   BrowserWindow.addDevToolsExtension(
-      path.join(os.homedir(), '/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.3.0_0')
-   )
+    // on macOS
+    const reactDevToolsPath = path.join(
+      os.homedir(),
+      '/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.9.0_0'
+    )
+
+    app.whenReady().then(async () => {
+      await session.defaultSession.loadExtension(reactDevToolsPath)
+    })
    ```
 
-**Note:** The `BrowserWindow.addDevToolsExtension` API cannot be called before the
-ready event of the app module is emitted.
+**Notes:**
 
-The extension will be remembered so you only need to call this API once per
-extension. If you try to add an extension that has already been loaded, this method
-will not return and instead log a warning to the console.
+* `loadExtension` returns a Promise with an [Extension object][extension-structure],
+which contains metadata about the extension that was loaded. This promise needs to
+resolve (e.g. with an `await` expression) before loading a page. Otherwise, the
+extension won't be guaranteed to load.
+* `loadExtension` cannot be called before the `ready` event of the `app` module
+is emitted, nor can it be called on in-memory (non-persistent) sessions.
+* `loadExtension` must be called on every boot of your app if you want the
+extension to be loaded.
 
-### How to remove a DevTools Extension
+### Removing a DevTools extension
 
-You can pass the name of the extension to the `BrowserWindow.removeDevToolsExtension`
-API to remove it. The name of the extension is returned by
-`BrowserWindow.addDevToolsExtension` and you can get the names of all installed
-DevTools Extensions using the `BrowserWindow.getDevToolsExtensions` API.
+You can pass the extension's ID to the [`ses.removeExtension`][remove-extension] API to
+remove it from your Session. Loaded extensions are not persisted between
+app launches.
 
-## Supported DevTools Extensions
+## DevTools extension support
 
-Electron only supports a limited set of `chrome.*` APIs, so some extensions
-using unsupported `chrome.*` APIs for chrome extension features may not work.
-Following Devtools Extensions are tested and guaranteed to work in Electron:
+Electron only supports
+[a limited set of `chrome.*` APIs][supported-extension-apis],
+so extensions using unsupported `chrome.*` APIs under the hood may not work.
+
+The following Devtools extensions have been tested to work in Electron:
 
 * [Ember Inspector](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi)
 * [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
@@ -68,14 +83,22 @@ Following Devtools Extensions are tested and guaranteed to work in Electron:
 * [Redux DevTools Extension](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd)
 * [MobX Developer Tools](https://chrome.google.com/webstore/detail/mobx-developer-tools/pfgnfdagidkfgccljigdamigbcnndkod)
 
-### What should I do if a DevTools Extension is not working?
+### What should I do if a DevTools extension is not working?
 
-First please make sure the extension is still being maintained, some extensions
-can not even work for recent versions of Chrome browser, and we are not able to
-do anything for them.
+First, please make sure the extension is still being maintained and is compatible
+with the latest version of Google Chrome. We cannot provide additional support for
+unsupported extensions.
 
-Then file a bug at Electron's issues list, and describe which part of the
-extension is not working as expected.
+If the extension works on Chrome but not on Electron, file a bug in Electron's
+[issue tracker][issue-tracker] and describe which part
+of the extension is not working as expected.
 
 [devtools-extension]: https://developer.chrome.com/extensions/devtools
+[session]: ../api/session.md
 [react-devtools]: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
+[load-extension]: ../api/session.md#sesloadextensionpath
+[extension-structure]: ../api/structures/extension.md
+[remove-extension]: ../api/session.md#sesremoveextensionextensionid
+[electron-devtools-installer]: https://github.com/MarshallOfSound/electron-devtools-installer
+[supported-extension-apis]: ../api/extensions.md
+[issue-tracker]: https://github.com/electron/electron/issues

docs/tutorial/offscreen-rendering.md

@@ -9,7 +9,7 @@ Two modes of rendering can be used and only the dirty area is passed in the
 `'paint'` event to be more efficient. The rendering can be stopped, continued
 and the frame rate can be set. The specified frame rate is a top limit value,
 when there is nothing happening on a webpage, no frames are generated. The
-maximum frame rate is 60, because above that there is no benefit, only
+maximum frame rate is 240, because above that there is no benefit, only
 performance loss.
 
 **Note:** An offscreen window is always created as a [Frameless Window](../api/frameless-window.md).

docs/tutorial/using-pepper-flash-plugin.md

@@ -7,7 +7,7 @@ and then enable it in your application.
 ## Prepare a Copy of Flash Plugin
 
 On macOS and Linux, the details of the Pepper Flash plugin can be found by
-navigating to `chrome://flash` in the Chrome browser. Its location and version
+navigating to `chrome://version` in the Chrome browser. Its location and version
 are useful for Electron's Pepper Flash support. You can also copy it to another
 location.