docs: fix year typos in electron-timelines.md (#40730)

Co-authored-by: trop[bot] <37223003+trop[bot]@users.noreply.github.com>
Co-authored-by: Yureka <yuka@yuka.dev>

.circleci/config/base.yml

@@ -2165,7 +2165,7 @@ jobs:
       <<: *env-ninja-status
       <<: *env-macos-build
       <<: *env-apple-silicon
-      GCLIENT_EXTRA_ARGS: '--custom-var=checkout_mac=True --custom-var=host_os=mac'
+      GCLIENT_EXTRA_ARGS: '--custom-var=checkout_mac=True --custom-var=host_os=mac --custom-var=host_cpu=arm64'
     steps:
       - electron-build:
           persist: true

.github/workflows/branch-created.yml

@@ -8,7 +8,7 @@ permissions: {}
 jobs:
   release-branch-created:
     name: Release Branch Created
-    if: ${{ github.event.ref_type == 'branch' && endsWith(github.event.ref, '-x-y') }}
+    if: ${{ github.event.ref_type == 'branch' && endsWith(github.event.ref, '-x-y') && !startsWith(github.event.ref, 'roller') }}
     permissions:
       contents: read
       pull-requests: write
@@ -87,6 +87,7 @@ jobs:
       - name: Create Release Project Board
         if: ${{ steps.check-major-version.outputs.MAJOR }}
         uses: dsanders11/project-actions/copy-project@3a81985616963f32fae17d1d1b406c631f3201a1 # v1.1.0
+        id: create-release-board
         with:
           drafts: true
           project-number: 64
@@ -96,6 +97,11 @@ jobs:
           template-view: ${{ steps.generate-project-metadata.outputs.template-view }}
           title: ${{ steps.generate-project-metadata.outputs.major }}-x-y
           token: ${{ steps.generate-token.outputs.token }}
+      - name: Dump Release Project Board Contents
+        if: ${{ steps.check-major-version.outputs.MAJOR }}
+        run: gh project item-list ${{ steps.create-release-board.outputs.number }} --owner electron --format json | jq
+        env:
+          GITHUB_TOKEN: ${{ steps.generate-token.outputs.token }}
       - name: Find Previous Release Project Board
         if: ${{ steps.check-major-version.outputs.MAJOR }}
         uses: dsanders11/project-actions/find-project@3a81985616963f32fae17d1d1b406c631f3201a1 # v1.1.0

.github/workflows/pull-request-labeled.yml

@@ -1,13 +1,26 @@
 name: Pull Request Labeled
 
 on:
-  pull_request:
+  pull_request_target:
     types: [labeled]
 
-permissions:
-  contents: read
+permissions: {}
 
 jobs:
+  pull-request-labeled-backport-requested:
+    name: backport/requested label added
+    if: github.event.label.name == 'backport/requested 🗳'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Trigger Slack workflow
+        uses: slackapi/slack-github-action@e28cf165c92ffef168d23c5c9000cffc8a25e117 # v1.24.0
+        with:
+          payload: |
+            {
+              "url": "${{ github.event.pull_request.html_url }}"
+            }
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.BACKPORT_REQUESTED_SLACK_WEBHOOK_URL }}
   pull-request-labeled-deprecation-review-complete:
     name: deprecation-review/complete label added
     if: github.event.label.name == 'deprecation-review/complete ✅'

BUILD.gn

@@ -29,6 +29,7 @@ import("filenames.gni")
 import("filenames.hunspell.gni")
 import("filenames.libcxx.gni")
 import("filenames.libcxxabi.gni")
+import("js2c_toolchain.gni")
 
 if (is_mac) {
   import("//build/config/mac/rules.gni")
@@ -237,6 +238,7 @@ action("electron_js2c") {
     ":electron_sandboxed_renderer_bundle",
     ":electron_utility_bundle",
     ":electron_worker_bundle",
+    "//third_party/electron_node:node_js2c($electron_js2c_toolchain)",
   ]
 
   sources = [
@@ -249,13 +251,17 @@ action("electron_js2c") {
     "$target_gen_dir/js2c/worker_init.js",
   ]
 
-  inputs = sources + [ "//third_party/electron_node/tools/js2c.py" ]
+  inputs = sources
   outputs = [ "$root_gen_dir/electron_natives.cc" ]
 
   script = "build/js2c.py"
-  args = [ rebase_path("//third_party/electron_node") ] +
-         rebase_path(outputs, root_build_dir) +
-         rebase_path(sources, root_build_dir)
+  out_dir =
+      get_label_info(":anything($electron_js2c_toolchain)", "root_out_dir")
+  args = [
+           rebase_path("$out_dir/node_js2c"),
+           rebase_path("$root_gen_dir"),
+         ] + rebase_path(outputs, root_gen_dir) +
+         rebase_path(sources, root_gen_dir)
 }
 
 action("generate_config_gypi") {

DEPS

@@ -2,9 +2,9 @@ gclient_gn_args_from = 'src'
 
 vars = {
   'chromium_version':
-    '121.0.6116.0',
+    '121.0.6147.0',
   'node_version':
-    'v18.18.2',
+    'v20.9.0',
   'nan_version':
     'e14bdcd1f72d62bca1d541b66da43130384ec213',
   'squirrel.mac_version':

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/main/doc/abi_version_registry.json
-node_module_version = 119
+node_module_version = 121
 
 v8_promise_internal_field_count = 1
 v8_embedder_string = "-electron.0"
@@ -60,3 +60,6 @@ enable_dangling_raw_ptr_checks = false
 # This flag speeds up the performance of fork/execve on linux systems.
 # Ref: https://chromium-review.googlesource.com/c/v8/v8/+/4602858
 v8_enable_private_mapping_fork_optimization = true
+
+# Expose public V8 symbols for native modules.
+v8_expose_public_symbols = true

build/js2c.py

@@ -4,32 +4,14 @@ import os
 import subprocess
 import sys
 
-TEMPLATE = """
-#include "node_native_module.h"
-#include "node_internals.h"
-
-namespace node::native_module {{
-
-{definitions}
-
-void NativeModuleLoader::LoadEmbedderJavaScriptSource() {{
-  {initializers}
-}}
-
-}}  // namespace node::native_module
-"""
-
 def main():
-  node_path = os.path.abspath(sys.argv[1])
-  natives = os.path.abspath(sys.argv[2])
-  js_source_files = sys.argv[3:]
+  js2c = sys.argv[1]
+  root = sys.argv[2]
+  natives = sys.argv[3]
+  js_source_files = sys.argv[4:]
 
-  js2c = os.path.join(node_path, 'tools', 'js2c.py')
   subprocess.check_call(
-    [sys.executable, js2c] +
-    js_source_files +
-    ['--only-js', '--target', natives])
-
+    [js2c, natives] + js_source_files + ['--only-js', "--root", root])
 
 if __name__ == '__main__':
-  sys.exit(main())
+  sys.exit(main())

build/run-in-dir.py

@@ -1,10 +1,11 @@
 import sys
 import os
+import subprocess
 
 def main(argv):
-  cwd = argv[1]
-  os.chdir(cwd)
-  os.execv(sys.executable, [sys.executable] + argv[2:])
+  os.chdir(argv[1])
+  p = subprocess.Popen(argv[2:])
+  return p.wait()
 
 if __name__ == '__main__':
-  main(sys.argv)
+  sys.exit(main(sys.argv))

chromium_src/BUILD.gn

@@ -31,6 +31,8 @@ static_library("chrome") {
     "//chrome/browser/devtools/devtools_file_system_indexer.cc",
     "//chrome/browser/devtools/devtools_file_system_indexer.h",
     "//chrome/browser/devtools/devtools_settings.h",
+    "//chrome/browser/devtools/visual_logging.cc",
+    "//chrome/browser/devtools/visual_logging.h",
     "//chrome/browser/extensions/global_shortcut_listener.cc",
     "//chrome/browser/extensions/global_shortcut_listener.h",
     "//chrome/browser/icon_loader.cc",
@@ -256,6 +258,8 @@ static_library("chrome") {
     sources += [
       "//chrome/browser/bad_message.cc",
       "//chrome/browser/bad_message.h",
+      "//chrome/browser/printing/prefs_util.cc",
+      "//chrome/browser/printing/prefs_util.h",
       "//chrome/browser/printing/print_job.cc",
       "//chrome/browser/printing/print_job.h",
       "//chrome/browser/printing/print_job_manager.cc",
@@ -333,6 +337,8 @@ static_library("chrome") {
         "//chrome/browser/pdf/pdf_extension_util.h",
         "//chrome/browser/pdf/pdf_frame_util.cc",
         "//chrome/browser/pdf/pdf_frame_util.h",
+        "//chrome/browser/pdf/pdf_viewer_stream_manager.cc",
+        "//chrome/browser/pdf/pdf_viewer_stream_manager.h",
         "//chrome/browser/plugins/pdf_iframe_navigation_throttle.cc",
         "//chrome/browser/plugins/pdf_iframe_navigation_throttle.h",
       ]

docs/api/accelerator.md

@@ -15,7 +15,7 @@ Shortcuts are registered with the [`globalShortcut`](global-shortcut.md) module
 using the [`register`](global-shortcut.md#globalshortcutregisteraccelerator-callback)
 method, i.e.
 
-```javascript
+```js
 const { app, globalShortcut } = require('electron')
 
 app.whenReady().then(() => {

docs/api/browser-view.md

@@ -16,7 +16,7 @@ module is emitted.
 
 ### Example
 
-```javascript
+```js
 // In the main process.
 const { app, BrowserView, BrowserWindow } = require('electron')
 

docs/api/browser-window.md

@@ -7,7 +7,7 @@ Process: [Main](../glossary.md#main-process)
 This module cannot be used until the `ready` event of the `app`
 module is emitted.
 
-```javascript
+```js
 // In the main process.
 const { BrowserWindow } = require('electron')
 
@@ -38,7 +38,7 @@ While loading the page, the `ready-to-show` event will be emitted when the rende
 process has rendered the page for the first time if the window has not been shown yet. Showing
 the window after this event will have no visual flash:
 
-```javascript
+```js
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow({ show: false })
 win.once('ready-to-show', () => {
@@ -59,7 +59,7 @@ For a complex app, the `ready-to-show` event could be emitted too late, making
 the app feel slow. In this case, it is recommended to show the window
 immediately, and use a `backgroundColor` close to your app's background:
 
-```javascript
+```js
 const { BrowserWindow } = require('electron')
 
 const win = new BrowserWindow({ backgroundColor: '#2e2c29' })
@@ -85,7 +85,7 @@ For more information about these color types see valid options in [win.setBackgr
 
 By using `parent` option, you can create child windows:
 
-```javascript
+```js
 const { BrowserWindow } = require('electron')
 
 const top = new BrowserWindow()
@@ -101,7 +101,7 @@ The `child` window will always show on top of the `top` window.
 A modal window is a child window that disables parent window, to create a modal
 window, you have to set both `parent` and `modal` options:
 
-```javascript
+```js
 const { BrowserWindow } = require('electron')
 
 const top = new BrowserWindow()
@@ -188,7 +188,7 @@ window should be closed, which will also be called when the window is
 reloaded. In Electron, returning any value other than `undefined` would cancel the
 close. For example:
 
-```javascript
+```js
 window.onbeforeunload = (e) => {
   console.log('I do not want to be closed')
 
@@ -351,7 +351,7 @@ Commands are lowercased, underscores are replaced with hyphens, and the
 `APPCOMMAND_` prefix is stripped off.
 e.g. `APPCOMMAND_BROWSER_BACKWARD` is emitted as `browser-backward`.
 
-```javascript
+```js
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow()
 win.on('app-command', (e, cmd) => {
@@ -456,7 +456,7 @@ Returns `BrowserWindow | null` - The window with the given `id`.
 
 Objects created with `new BrowserWindow` have the following properties:
 
-```javascript
+```js
 const { BrowserWindow } = require('electron')
 // In this example `win` is our instance
 const win = new BrowserWindow({ width: 800, height: 600 })
@@ -780,7 +780,7 @@ Closes the currently open [Quick Look][quick-look] panel.
 
 Resizes and moves the window to the supplied bounds. Any properties that are not supplied will default to their current values.
 
-```javascript
+```js
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow()
 
@@ -1035,7 +1035,7 @@ Changes the attachment point for sheets on macOS. By default, sheets are
 attached just below the window frame, but you may want to display them beneath
 a HTML-rendered toolbar. For example:
 
-```javascript
+```js
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow()
 
@@ -1178,7 +1178,7 @@ To ensure that file URLs are properly formatted, it is recommended to use
 Node's [`url.format`](https://nodejs.org/api/url.html#url_url_format_urlobject)
 method:
 
-```javascript
+```js
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow()
 
@@ -1194,7 +1194,7 @@ win.loadURL(url)
 You can load a URL using a `POST` request with URL-encoded data by doing
 the following:
 
-```javascript
+```js
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow()
 

docs/api/client-request.md

@@ -65,7 +65,7 @@ strictly follow the Node.js model as described in the
 
 For instance, we could have created the same request to 'github.com' as follows:
 
-```javascript
+```js
 const request = net.request({
   method: 'GET',
   protocol: 'https:',
@@ -104,7 +104,7 @@ The `callback` function is expected to be called back with user credentials:
 * `username` string
 * `password` string
 
-```javascript @ts-type={request:Electron.ClientRequest}
+```js @ts-type={request:Electron.ClientRequest}
 request.on('login', (authInfo, callback) => {
   callback('username', 'password')
 })
@@ -113,7 +113,7 @@ request.on('login', (authInfo, callback) => {
 Providing empty credentials will cancel the request and report an authentication
 error on the response object:
 
-```javascript @ts-type={request:Electron.ClientRequest}
+```js @ts-type={request:Electron.ClientRequest}
 request.on('response', (response) => {
   console.log(`STATUS: ${response.statusCode}`)
   response.on('error', (error) => {

docs/api/clipboard.md

@@ -7,7 +7,7 @@ Process: [Main](../glossary.md#main-process), [Renderer](../glossary.md#renderer
 On Linux, there is also a `selection` clipboard. To manipulate it
 you need to pass `selection` to each method:
 
-```javascript
+```js
 const { clipboard } = require('electron')
 
 clipboard.writeText('Example string', 'selection')

docs/api/command-line-switches.md

@@ -6,7 +6,7 @@ You can use [app.commandLine.appendSwitch][append-switch] to append them in
 your app's main script before the [ready][ready] event of the [app][app] module
 is emitted:
 
-```javascript
+```js
 const { app } = require('electron')
 app.commandLine.appendSwitch('remote-debugging-port', '8315')
 app.commandLine.appendSwitch('host-rules', 'MAP * 127.0.0.1')
@@ -185,7 +185,7 @@ list of hosts. This flag has an effect only if used in tandem with
 
 For example:
 
-```javascript
+```js
 const { app } = require('electron')
 app.commandLine.appendSwitch('proxy-bypass-list', '<local>;*.google.com;*foo.com;1.2.3.4:5678')
 ```

docs/api/command-line.md

@@ -7,7 +7,7 @@ _This class is not exported from the `'electron'` module. It is only available a
 
 The following example shows how to check if the `--disable-gpu` flag is set.
 
-```javascript
+```js
 const { app } = require('electron')
 app.commandLine.hasSwitch('disable-gpu')
 ```

docs/api/content-tracing.md

@@ -10,7 +10,7 @@ This module does not include a web interface. To view recorded traces, use
 **Note:** You should not use this module until the `ready` event of the app
 module is emitted.
 
-```javascript
+```js
 const { app, contentTracing } = require('electron')
 
 app.whenReady().then(() => {

docs/api/context-bridge.md

@@ -6,7 +6,7 @@ Process: [Renderer](../glossary.md#renderer-process)
 
 An example of exposing an API to a renderer from an isolated preload script is given below:
 
-```javascript
+```js
 // Preload (Isolated World)
 const { contextBridge, ipcRenderer } = require('electron')
 
@@ -18,7 +18,7 @@ contextBridge.exposeInMainWorld(
 )
 ```
 
-```javascript @ts-nocheck
+```js @ts-nocheck
 // Renderer (Main World)
 
 window.electron.doThing()
@@ -64,7 +64,7 @@ the API become immutable and updates on either side of the bridge do not result
 
 An example of a complex API is shown below:
 
-```javascript
+```js
 const { contextBridge, ipcRenderer } = require('electron')
 
 contextBridge.exposeInMainWorld(
@@ -92,7 +92,7 @@ contextBridge.exposeInMainWorld(
 
 An example of `exposeInIsolatedWorld` is shown below:
 
-```javascript
+```js
 const { contextBridge, ipcRenderer } = require('electron')
 
 contextBridge.exposeInIsolatedWorld(
@@ -104,7 +104,7 @@ contextBridge.exposeInIsolatedWorld(
 )
 ```
 
-```javascript @ts-nocheck
+```js @ts-nocheck
 // Renderer (In isolated world id1004)
 
 window.electron.doThing()
@@ -145,7 +145,7 @@ The table of supported types described above also applies to Node APIs that you
 Please note that many Node APIs grant access to local system resources.
 Be very cautious about which globals and APIs you expose to untrusted remote content.
 
-```javascript
+```js
 const { contextBridge } = require('electron')
 const crypto = require('node:crypto')
 contextBridge.exposeInMainWorld('nodeCrypto', {

docs/api/cookies.md

@@ -10,7 +10,7 @@ a `Session`.
 
 For example:
 
-```javascript
+```js
 const { session } = require('electron')
 
 // Query all cookies.

docs/api/crash-reporter.md

@@ -7,7 +7,7 @@ Process: [Main](../glossary.md#main-process), [Renderer](../glossary.md#renderer
 The following is an example of setting up Electron to automatically submit
 crash reports to a remote server:
 
-```javascript
+```js
 const { crashReporter } = require('electron')
 
 crashReporter.start({ submitURL: 'https://your-domain.com/url-to-submit' })

docs/api/debugger.md

@@ -8,7 +8,7 @@ _This class is not exported from the `'electron'` module. It is only available a
 Chrome Developer Tools has a [special binding][rdp] available at JavaScript
 runtime that allows interacting with pages and instrumenting them.
 
-```javascript
+```js
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow()
 

docs/api/desktop-capturer.md

@@ -8,7 +8,7 @@ Process: [Main](../glossary.md#main-process)
 The following example shows how to capture video from a desktop window whose
 title is `Electron`:
 
-```javascript
+```js
 // In the main process.
 const { BrowserWindow, desktopCapturer } = require('electron')
 
@@ -24,7 +24,7 @@ desktopCapturer.getSources({ types: ['window', 'screen'] }).then(async sources =
 })
 ```
 
-```javascript @ts-nocheck
+```js @ts-nocheck
 // In the preload script.
 const { ipcRenderer } = require('electron')
 
@@ -68,7 +68,7 @@ To capture both audio and video from the entire desktop the constraints passed
 to [`navigator.mediaDevices.getUserMedia`][] must include `chromeMediaSource: 'desktop'`,
 for both `audio` and `video`, but should not include a `chromeMediaSourceId` constraint.
 
-```javascript
+```js
 const constraints = {
   audio: {
     mandatory: {

docs/api/dialog.md

@@ -6,7 +6,7 @@ Process: [Main](../glossary.md#main-process)
 
 An example of showing a dialog to select multiple files:
 
-```javascript
+```js
 const { dialog } = require('electron')
 console.log(dialog.showOpenDialog({ properties: ['openFile', 'multiSelections'] }))
 ```
@@ -52,7 +52,7 @@ The `browserWindow` argument allows the dialog to attach itself to a parent wind
 The `filters` specifies an array of file types that can be displayed or
 selected when you want to limit the user to a specific type. For example:
 
-```javascript
+```js
 {
   filters: [
     { name: 'Images', extensions: ['jpg', 'png', 'gif'] },
@@ -119,7 +119,7 @@ The `browserWindow` argument allows the dialog to attach itself to a parent wind
 The `filters` specifies an array of file types that can be displayed or
 selected when you want to limit the user to a specific type. For example:
 
-```javascript
+```js
 {
   filters: [
     { name: 'Images', extensions: ['jpg', 'png', 'gif'] },

docs/api/dock.md

@@ -7,7 +7,7 @@ _This class is not exported from the `'electron'` module. It is only available a
 
 The following example shows how to bounce your icon on the dock.
 
-```javascript
+```js
 const { app } = require('electron')
 app.dock.bounce()
 ```

docs/api/download-item.md

@@ -9,7 +9,7 @@ _This class is not exported from the `'electron'` module. It is only available a
 It is used in `will-download` event of `Session` class, and allows users to
 control the download item.
 
-```javascript
+```js
 // In the main process.
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow()

docs/api/environment-variables.md

@@ -59,7 +59,7 @@ geolocation webservice. To enable this feature, acquire a
 and place the following code in your main process file, before opening any
 browser windows that will make geolocation requests:
 
-```javascript
+```js
 process.env.GOOGLE_API_KEY = 'YOUR_KEY_HERE'
 ```
 

docs/api/file-object.md

@@ -2,6 +2,11 @@
 
 > Use the HTML5 `File` API to work natively with files on the filesystem.
 
+> **Warning**
+> The `path` property that Electron adds to the `File` interface is deprecated
+> and **will** be removed in a future Electron release.  We recommend you
+> use `webUtils.getPathForFile` instead.
+
 The DOM's File interface provides abstraction around native files in order to
 let users work on native files directly with the HTML5 file API. Electron has
 added a `path` attribute to the `File` interface which exposes the file's real

docs/api/global-shortcut.md

@@ -12,7 +12,7 @@ shortcuts.
 not have the keyboard focus. This module cannot be used before the `ready`
 event of the app module is emitted.
 
-```javascript
+```js
 const { app, globalShortcut } = require('electron')
 
 app.whenReady().then(() => {

docs/api/incoming-message.md

@@ -89,7 +89,7 @@ tuples. So, the even-numbered offsets are key values, and the odd-numbered
 offsets are the associated values. Header names are not lowercased, and
 duplicates are not merged.
 
-```javascript @ts-type={response:Electron.IncomingMessage}
+```js @ts-type={response:Electron.IncomingMessage}
 // Prints something like:
 //
 // [ 'user-agent',

docs/api/ipc-renderer.md

@@ -120,7 +120,7 @@ The main process should listen for `channel` with
 
 For example:
 
-```javascript @ts-type={someArgument:unknown} @ts-type={doSomeWork:(arg:unknown)=>Promise<unknown>}
+```js @ts-type={someArgument:unknown} @ts-type={doSomeWork:(arg:unknown)=>Promise<unknown>}
 // Renderer process
 ipcRenderer.invoke('some-name', someArgument).then((result) => {
   // ...

docs/api/menu.md

@@ -151,7 +151,7 @@ can have a submenu.
 
 An example of creating the application menu with the simple template API:
 
-```javascript @ts-expect-error=[107]
+```js @ts-expect-error=[107]
 const { app, Menu } = require('electron')
 
 const isMac = process.platform === 'darwin'
@@ -353,7 +353,7 @@ By default, items will be inserted in the order they exist in the template unles
 
 Template:
 
-```javascript
+```js
 [
   { id: '1', label: 'one' },
   { id: '2', label: 'two' },
@@ -373,7 +373,7 @@ Menu:
 
 Template:
 
-```javascript
+```js
 [
   { id: '1', label: 'one' },
   { type: 'separator' },
@@ -397,7 +397,7 @@ Menu:
 
 Template:
 
-```javascript
+```js
 [
   { id: '1', label: 'one', after: ['3'] },
   { id: '2', label: 'two', before: ['1'] },

docs/api/native-image.md

@@ -10,7 +10,7 @@ In Electron, for the APIs that take images, you can pass either file paths or
 For example, when creating a tray or setting a window's icon, you can pass an
 image file path as a `string`:
 
-```javascript
+```js
 const { BrowserWindow, Tray } = require('electron')
 
 const appIcon = new Tray('/Users/somebody/images/icon.png')
@@ -20,7 +20,7 @@ console.log(appIcon, win)
 
 Or read the image from the clipboard, which returns a `NativeImage`:
 
-```javascript
+```js
 const { clipboard, Tray } = require('electron')
 const image = clipboard.readImage()
 const appIcon = new Tray(image)
@@ -71,7 +71,7 @@ images/
 └── icon@3x.png
 ```
 
-```javascript
+```js
 const { Tray } = require('electron')
 const appIcon = new Tray('/Users/somebody/images/icon.png')
 console.log(appIcon)
@@ -138,7 +138,7 @@ Creates a new `NativeImage` instance from a file located at `path`. This method
 returns an empty image if the `path` does not exist, cannot be read, or is not
 a valid image.
 
-```javascript
+```js
 const nativeImage = require('electron').nativeImage
 
 const image = nativeImage.createFromPath('/Users/somebody/images/icon.png')

docs/api/net-log.md

@@ -4,7 +4,7 @@
 
 Process: [Main](../glossary.md#main-process)
 
-```javascript
+```js
 const { app, netLog } = require('electron')
 
 app.whenReady().then(async () => {

docs/api/net.md

@@ -26,7 +26,7 @@ Node.js.
 
 Example usage:
 
-```javascript
+```js
 const { app } = require('electron')
 app.whenReady().then(() => {
   const { net } = require('electron')

docs/api/power-save-blocker.md

@@ -6,7 +6,7 @@ Process: [Main](../glossary.md#main-process)
 
 For example:
 
-```javascript
+```js
 const { powerSaveBlocker } = require('electron')
 
 const id = powerSaveBlocker.start('prevent-display-sleep')

docs/api/protocol.md

@@ -7,7 +7,7 @@ Process: [Main](../glossary.md#main-process)
 An example of implementing a protocol that has the same effect as the
 `file://` protocol:
 
-```javascript
+```js
 const { app, protocol, net } = require('electron')
 
 app.whenReady().then(() => {
@@ -31,7 +31,7 @@ a different session and your custom protocol will not work if you just use
 To have your custom protocol work in combination with a custom session, you need
 to register it to that session explicitly.
 
-```javascript
+```js
 const { app, BrowserWindow, net, protocol, session } = require('electron')
 const path = require('node:path')
 const url = require('url')
@@ -61,13 +61,14 @@ The `protocol` module has the following methods:
 module gets emitted and can be called only once.
 
 Registers the `scheme` as standard, secure, bypasses content security policy for
-resources, allows registering ServiceWorker, supports fetch API, and streaming
-video/audio. Specify a privilege with the value of `true` to enable the capability.
+resources, allows registering ServiceWorker, supports fetch API, streaming
+video/audio, and V8 code cache. Specify a privilege with the value of `true` to
+enable the capability.
 
 An example of registering a privileged scheme, that bypasses Content Security
 Policy:
 
-```javascript
+```js
 const { protocol } = require('electron')
 protocol.registerSchemesAsPrivileged([
   { scheme: 'foo', privileges: { bypassCSP: true } }
@@ -222,7 +223,7 @@ property.
 
 Example:
 
-```javascript
+```js
 protocol.registerBufferProtocol('atom', (request, callback) => {
   callback({ mimeType: 'text/html', data: Buffer.from('<h5>Response</h5>') })
 })
@@ -277,7 +278,7 @@ has the `data` property.
 
 Example:
 
-```javascript
+```js
 const { protocol } = require('electron')
 const { PassThrough } = require('stream')
 
@@ -302,7 +303,7 @@ protocol.registerStreamProtocol('atom', (request, callback) => {
 It is possible to pass any object that implements the readable stream API (emits
 `data`/`end`/`error` events). For example, here's how a file could be returned:
 
-```javascript
+```js
 protocol.registerStreamProtocol('atom', (request, callback) => {
   callback(fs.createReadStream('index.html'))
 })

docs/api/push-notifications.md

@@ -6,7 +6,7 @@ Process: [Main](../glossary.md#main-process)
 
 For example, when registering for push notifications via Apple push notification services (APNS):
 
-```javascript
+```js
 const { pushNotifications, Notification } = require('electron')
 
 pushNotifications.registerForAPNSNotifications().then((token) => {

docs/api/screen.md

@@ -14,20 +14,29 @@ property, so writing `let { screen } = require('electron')` will not work.
 
 An example of creating a window that fills the whole screen:
 
-```javascript fiddle='docs/fiddles/screen/fit-screen'
-const { app, BrowserWindow, screen } = require('electron')
+```fiddle docs/fiddles/screen/fit-screen
+// Retrieve information about screen size, displays, cursor position, etc.
+//
+// For more info, see:
+// https://www.electronjs.org/docs/latest/api/screen
+
+const { app, BrowserWindow, screen } = require('electron/main')
+
+let mainWindow = null
 
-let win
 app.whenReady().then(() => {
-  const { width, height } = screen.getPrimaryDisplay().workAreaSize
-  win = new BrowserWindow({ width, height })
-  win.loadURL('https://github.com')
+  // Create a window that fills the screen's available work area.
+  const primaryDisplay = screen.getPrimaryDisplay()
+  const { width, height } = primaryDisplay.workAreaSize
+
+  mainWindow = new BrowserWindow({ width, height })
+  mainWindow.loadURL('https://electronjs.org')
 })
 ```
 
 Another example of creating a window in the external display:
 
-```javascript
+```js
 const { app, BrowserWindow, screen } = require('electron')
 
 let win

docs/api/service-workers.md

@@ -10,7 +10,7 @@ a `Session`.
 
 For example:
 
-```javascript
+```js
 const { session } = require('electron')
 
 // Get all service workers.

docs/api/session.md

@@ -9,7 +9,7 @@ The `session` module can be used to create new `Session` objects.
 You can also access the `session` of existing pages by using the `session`
 property of [`WebContents`](web-contents.md), or from the `session` module.
 
-```javascript
+```js
 const { BrowserWindow } = require('electron')
 
 const win = new BrowserWindow({ width: 800, height: 600 })
@@ -75,7 +75,7 @@ _This class is not exported from the `'electron'` module. It is only available a
 
 You can create a `Session` object in the `session` module:
 
-```javascript
+```js
 const { session } = require('electron')
 const ses = session.fromPartition('persist:name')
 console.log(ses.getUserAgent())
@@ -98,7 +98,7 @@ Emitted when Electron is about to download `item` in `webContents`.
 Calling `event.preventDefault()` will cancel the download and `item` will not be
 available from next tick of the process.
 
-```javascript @ts-expect-error=[4]
+```js @ts-expect-error=[4]
 const { session } = require('electron')
 session.defaultSession.on('will-download', (event, item, webContents) => {
   event.preventDefault()
@@ -214,7 +214,7 @@ cancel the request.  Additionally, permissioning on `navigator.hid` can
 be further managed by using [`ses.setPermissionCheckHandler(handler)`](#sessetpermissioncheckhandlerhandler)
 and [`ses.setDevicePermissionHandler(handler)`](#sessetdevicepermissionhandlerhandler).
 
-```javascript @ts-type={fetchGrantedDevices:()=>(Array<Electron.DevicePermissionHandlerHandlerDetails['device']>)}
+```js @ts-type={fetchGrantedDevices:()=>(Array<Electron.DevicePermissionHandlerHandlerDetails['device']>)}
 const { app, BrowserWindow } = require('electron')
 
 let win = null
@@ -320,7 +320,7 @@ cancel the request.  Additionally, permissioning on `navigator.serial` can
 be managed by using [ses.setPermissionCheckHandler(handler)](#sessetpermissioncheckhandlerhandler)
 with the `serial` permission.
 
-```javascript @ts-type={fetchGrantedDevices:()=>(Array<Electron.DevicePermissionHandlerHandlerDetails['device']>)}
+```js @ts-type={fetchGrantedDevices:()=>(Array<Electron.DevicePermissionHandlerHandlerDetails['device']>)}
 const { app, BrowserWindow } = require('electron')
 
 let win = null
@@ -463,7 +463,7 @@ cancel the request.  Additionally, permissioning on `navigator.usb` can
 be further managed by using [`ses.setPermissionCheckHandler(handler)`](#sessetpermissioncheckhandlerhandler)
 and [`ses.setDevicePermissionHandler(handler)`](#sessetdevicepermissionhandlerhandler).
 
-```javascript @ts-type={fetchGrantedDevices:()=>(Array<Electron.DevicePermissionHandlerHandlerDetails['device']>)} @ts-type={updateGrantedDevices:(devices:Array<Electron.DevicePermissionHandlerHandlerDetails['device']>)=>void}
+```js @ts-type={fetchGrantedDevices:()=>(Array<Electron.DevicePermissionHandlerHandlerDetails['device']>)} @ts-type={updateGrantedDevices:(devices:Array<Electron.DevicePermissionHandlerHandlerDetails['device']>)=>void}
 const { app, BrowserWindow } = require('electron')
 
 let win = null
@@ -754,7 +754,7 @@ Sets download saving directory. By default, the download directory will be the
 
 Emulates network with the given configuration for the `session`.
 
-```javascript
+```js
 const win = new BrowserWindow()
 
 // To emulate a GPRS connection with 50kbps throughput and 500 ms latency.
@@ -868,7 +868,7 @@ calling `callback(-2)` rejects it.
 Calling `setCertificateVerifyProc(null)` will revert back to default certificate
 verify proc.
 
-```javascript
+```js
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow()
 
@@ -921,7 +921,7 @@ To clear the handler, call `setPermissionRequestHandler(null)`.  Please note tha
 you must also implement `setPermissionCheckHandler` to get complete permission handling.
 Most web APIs do a permission check and then make a permission request if the check is denied.
 
-```javascript
+```js
 const { session } = require('electron')
 session.fromPartition('some-partition').setPermissionRequestHandler((webContents, permission, callback) => {
   if (webContents.getURL() === 'some-host' && permission === 'notifications') {
@@ -967,7 +967,7 @@ you must also implement `setPermissionRequestHandler` to get complete permission
 Most web APIs do a permission check and then make a permission request if the check is denied.
 To clear the handler, call `setPermissionCheckHandler(null)`.
 
-```javascript
+```js
 const { session } = require('electron')
 const url = require('url')
 session.fromPartition('some-partition').setPermissionCheckHandler((webContents, permission, requestingOrigin) => {
@@ -1012,7 +1012,7 @@ via the `navigator.mediaDevices.getDisplayMedia` API. Use the
 [desktopCapturer](desktop-capturer.md) API to choose which stream(s) to grant
 access to.
 
-```javascript
+```js
 const { session, desktopCapturer } = require('electron')
 
 session.defaultSession.setDisplayMediaRequestHandler((request, callback) => {
@@ -1026,7 +1026,7 @@ session.defaultSession.setDisplayMediaRequestHandler((request, callback) => {
 Passing a [WebFrameMain](web-frame-main.md) object as a video or audio stream
 will capture the video or audio stream from that frame.
 
-```javascript
+```js
 const { session } = require('electron')
 
 session.defaultSession.setDisplayMediaRequestHandler((request, callback) => {
@@ -1055,7 +1055,7 @@ Additionally, the default behavior of Electron is to store granted device permis
 If longer term storage is needed, a developer can store granted device
 permissions (eg when handling the `select-hid-device` event) and then read from that storage with `setDevicePermissionHandler`.
 
-```javascript @ts-type={fetchGrantedDevices:()=>(Array<Electron.DevicePermissionHandlerHandlerDetails['device']>)}
+```js @ts-type={fetchGrantedDevices:()=>(Array<Electron.DevicePermissionHandlerHandlerDetails['device']>)}
 const { app, BrowserWindow } = require('electron')
 
 let win = null
@@ -1137,7 +1137,7 @@ The return value for the handler is a string array of USB classes which should b
 Returning an empty string array from the handler will allow all USB classes; returning the passed in array will maintain the default list of protected USB classes (this is also the default behavior if a handler is not defined).
 To clear the handler, call `setUSBProtectedClassesHandler(null)`.
 
-```javascript
+```js
 const { app, BrowserWindow } = require('electron')
 
 let win = null
@@ -1192,7 +1192,7 @@ that requires additional validation will be automatically cancelled.
 macOS does not require a handler because macOS handles the pairing
 automatically.  To clear the handler, call `setBluetoothPairingHandler(null)`.
 
-```javascript
+```js
 const { app, BrowserWindow, session } = require('electron')
 const path = require('node:path')
 
@@ -1238,7 +1238,7 @@ Clears the host resolver cache.
 Dynamically sets whether to always send credentials for HTTP NTLM or Negotiate
 authentication.
 
-```javascript
+```js
 const { session } = require('electron')
 // consider any url ending with `example.com`, `foobar.com`, `baz`
 // for integrated authentication.
@@ -1356,6 +1356,10 @@ registered.
 Sets the directory to store the generated JS [code cache](https://v8.dev/blog/code-caching-for-devs) for this session. The directory is not required to be created by the user before this call, the runtime will create if it does not exist otherwise will use the existing directory. If directory cannot be created, then code cache will not be used and all operations related to code cache will fail silently inside the runtime. By default, the directory will be `Code Cache` under the
 respective user data folder.
 
+Note that by default code cache is only enabled for http(s) URLs, to enable code
+cache for custom protocols, `codeCache: true` and `standard: true` must be
+specified when registering the protocol.
+
 #### `ses.clearCodeCaches(options)`
 
 * `options` Object
@@ -1543,7 +1547,7 @@ A [`WebRequest`](web-request.md) object for this session.
 
 A [`Protocol`](protocol.md) object for this session.
 
-```javascript
+```js
 const { app, session } = require('electron')
 const path = require('node:path')
 
@@ -1562,7 +1566,7 @@ app.whenReady().then(() => {
 
 A [`NetLog`](net-log.md) object for this session.
 
-```javascript
+```js
 const { app, session } = require('electron')
 
 app.whenReady().then(async () => {

docs/api/shell.md

@@ -8,7 +8,7 @@ The `shell` module provides functions related to desktop integration.
 
 An example of opening a URL in the user's default browser:
 
-```javascript
+```js
 const { shell } = require('electron')
 
 shell.openExternal('https://github.com')

docs/api/structures/custom-scheme.md

@@ -9,3 +9,5 @@
   * `supportFetchAPI` boolean (optional) - Default false.
   * `corsEnabled` boolean (optional) - Default false.
   * `stream` boolean (optional) - Default false.
+  * `codeCache` boolean (optional) - Enable V8 code cache for the scheme, only
+    works when `standard` is also set to true. Default false.

docs/api/structures/display.md

@@ -1,22 +1,25 @@
 # Display Object
 
-* `id` number - Unique identifier associated with the display.
+* `accelerometerSupport` string - Can be `available`, `unavailable`, `unknown`.
+* `bounds` [Rectangle](rectangle.md) - the bounds of the display in DIP points.
+* `colorDepth` number - The number of bits per pixel.
+* `colorSpace` string -  represent a color space (three-dimensional object which contains all realizable color combinations) for the purpose of color conversions.
+* `depthPerComponent` number - The number of bits per color component.
+* `detected` boolean - `true`` if the display is detected by the system.
+* `displayFrequency` number - The display refresh rate.
+* `id` number - Unique identifier associated with the display. A value of of -1 means the display is invalid or the correct `id` is not yet known, and a value of -10 means the display is a virtual display assigned to a unified desktop.
+* `internal` boolean - `true` for an internal display and `false` for an external display.
 * `label` string - User-friendly label, determined by the platform.
+* `maximumCursorSize` [Size](size.md) - Maximum cursor size in native pixels.
+* `nativeOrigin` [Point](point.md) - Returns the display's origin in pixel coordinates. Only available on windowing systems like X11 that position displays in pixel coordinates.
 * `rotation` number - Can be 0, 90, 180, 270, represents screen rotation in
   clock-wise degrees.
 * `scaleFactor` number - Output device's pixel scale factor.
 * `touchSupport` string - Can be `available`, `unavailable`, `unknown`.
 * `monochrome` boolean - Whether or not the display is a monochrome display.
-* `accelerometerSupport` string - Can be `available`, `unavailable`, `unknown`.
-* `colorSpace` string -  represent a color space (three-dimensional object which contains all realizable color combinations) for the purpose of color conversions
-* `colorDepth` number - The number of bits per pixel.
-* `depthPerComponent` number - The number of bits per color component.
-* `displayFrequency` number - The display refresh rate.
-* `bounds` [Rectangle](rectangle.md) - the bounds of the display in DIP points.
 * `size` [Size](size.md)
 * `workArea` [Rectangle](rectangle.md) - the work area of the display in DIP points.
-* `workAreaSize` [Size](size.md)
-* `internal` boolean - `true` for an internal display and `false` for an external display
+* `workAreaSize` [Size](size.md) - The size of the work area.
 
 The `Display` object represents a physical display connected to the system. A
 fake `Display` may exist on a headless system, or a `Display` may correspond to

docs/api/structures/printer-info.md

@@ -14,7 +14,7 @@ The number represented by `status` means different things on different platforms
 Below is an example of some of the additional options that may be set which
 may be different on each platform.
 
-```javascript
+```js
 {
   name: 'Austin_4th_Floor_Printer___C02XK13BJHD4',
   displayName: 'Austin 4th Floor Printer @ C02XK13BJHD4',

docs/api/system-preferences.md

@@ -4,7 +4,7 @@
 
 Process: [Main](../glossary.md#main-process)
 
-```javascript
+```js
 const { systemPreferences } = require('electron')
 console.log(systemPreferences.isAeroGlassEnabled())
 ```
@@ -189,7 +189,7 @@ enabled, and `false` otherwise.
 An example of using it to determine if you should create a transparent window or
 not (transparent windows won't work correctly when DWM composition is disabled):
 
-```javascript
+```js
 const { BrowserWindow, systemPreferences } = require('electron')
 const browserOptions = { width: 1000, height: 800 }
 
@@ -348,7 +348,7 @@ Returns `boolean` - whether or not this device has the ability to use Touch ID.
 
 Returns `Promise<void>` - resolves if the user has successfully authenticated with Touch ID.
 
-```javascript
+```js
 const { systemPreferences } = require('electron')
 
 systemPreferences.promptTouchID('To get consent for a Security-Gated Thing').then(success => {

docs/api/touch-bar.md

@@ -79,7 +79,7 @@ immediately updates the escape item in the touch bar.
 Below is an example of a simple slot machine touch bar game with a button
 and some labels.
 
-```javascript
+```js
 const { app, BrowserWindow, TouchBar } = require('electron')
 
 const { TouchBarLabel, TouchBarButton, TouchBarSpacer } = TouchBar

docs/api/tray.md

@@ -8,7 +8,7 @@ Process: [Main](../glossary.md#main-process)
 
 `Tray` is an [EventEmitter][event-emitter].
 
-```javascript
+```js
 const { app, Menu, Tray } = require('electron')
 
 let tray = null
@@ -39,7 +39,7 @@ app.whenReady().then(() => {
 * In order for changes made to individual `MenuItem`s to take effect,
   you have to call `setContextMenu` again. For example:
 
-```javascript
+```js
 const { app, Menu, Tray } = require('electron')
 
 let appIcon = null

docs/api/web-contents.md

@@ -9,7 +9,7 @@ It is responsible for rendering and controlling a web page and is a property of
 the [`BrowserWindow`](browser-window.md) object. An example of accessing the
 `webContents` object:
 
-```javascript
+```js
 const { BrowserWindow } = require('electron')
 
 const win = new BrowserWindow({ width: 800, height: 1500 })
@@ -53,7 +53,7 @@ If you want to also observe navigations in `<iframe>`s, use [`will-frame-navigat
 
 These methods can be accessed from the `webContents` module:
 
-```javascript
+```js
 const { webContents } = require('electron')
 console.log(webContents)
 ```
@@ -439,7 +439,7 @@ Emitted when a `beforeunload` event handler is attempting to cancel a page unloa
 Calling `event.preventDefault()` will ignore the `beforeunload` event handler
 and allow the page to be unloaded.
 
-```javascript
+```js
 const { BrowserWindow, dialog } = require('electron')
 const win = new BrowserWindow({ width: 800, height: 600 })
 win.webContents.on('will-prevent-unload', (event) => {
@@ -527,7 +527,7 @@ and the menu shortcuts.
 To only prevent the menu shortcuts, use
 [`setIgnoreMenuShortcuts`](#contentssetignoremenushortcutsignore):
 
-```javascript
+```js
 const { BrowserWindow } = require('electron')
 
 const win = new BrowserWindow({ width: 800, height: 600 })
@@ -837,7 +837,7 @@ Due to the nature of bluetooth, scanning for devices when
 `select-bluetooth-device` to fire multiple times until `callback` is called
 with either a device id or an empty string to cancel the request.
 
-```javascript title='main.js'
+```js title='main.js'
 const { app, BrowserWindow } = require('electron')
 
 let win = null
@@ -872,7 +872,7 @@ Returns:
 Emitted when a new frame is generated. Only the dirty area is passed in the
 buffer.
 
-```javascript
+```js
 const { BrowserWindow } = require('electron')
 
 const win = new BrowserWindow({ webPreferences: { offscreen: true } })
@@ -1004,7 +1004,7 @@ Loads the `url` in the window. The `url` must contain the protocol prefix,
 e.g. the `http://` or `file://`. If the load should bypass http cache then
 use the `pragma` header to achieve it.
 
-```javascript
+```js
 const win = new BrowserWindow()
 const options = { extraHeaders: 'pragma: no-cache\n' }
 win.webContents.loadURL('https://github.com', options)
@@ -1054,7 +1054,7 @@ Initiates a download of the resource at `url` without navigating. The
 
 Returns `string` - The URL of the current web page.
 
-```javascript
+```js
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow({ width: 800, height: 600 })
 win.loadURL('https://github.com').then(() => {
@@ -1503,7 +1503,7 @@ can be obtained by subscribing to [`found-in-page`](web-contents.md#event-found-
 
 Stops any `findInPage` request for the `webContents` with the provided `action`.
 
-```javascript
+```js
 const win = new BrowserWindow()
 win.webContents.on('found-in-page', (event, result) => {
   if (result.finalUpdate) win.webContents.stopFindInPage('clearSelection')
@@ -1623,7 +1623,7 @@ The `landscape` will be ignored if `@page` CSS at-rule is used in the web page.
 
 An example of `webContents.printToPDF`:
 
-```javascript
+```js
 const { BrowserWindow } = require('electron')
 const fs = require('node:fs')
 const path = require('node:path')
@@ -1655,7 +1655,7 @@ See [Page.printToPdf](https://chromedevtools.github.io/devtools-protocol/tot/Pag
 Adds the specified path to DevTools workspace. Must be used after DevTools
 creation:
 
-```javascript
+```js
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow()
 win.webContents.on('devtools-opened', () => {
@@ -1978,7 +1978,7 @@ the cursor when dragging.
 
 Returns `Promise<void>` - resolves if the page is saved.
 
-```javascript
+```js
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow()
 

docs/api/web-frame-main.md

@@ -8,7 +8,7 @@ The `webFrameMain` module can be used to lookup frames across existing
 [`WebContents`](web-contents.md) instances. Navigation events are the common
 use case.
 
-```javascript
+```js
 const { BrowserWindow, webFrameMain } = require('electron')
 
 const win = new BrowserWindow({ width: 800, height: 1500 })
@@ -29,7 +29,7 @@ win.webContents.on(
 You can also access frames of existing pages by using the `mainFrame` property
 of [`WebContents`](web-contents.md).
 
-```javascript
+```js
 const { BrowserWindow } = require('electron')
 
 async function main () {

docs/api/web-frame.md

@@ -10,7 +10,7 @@ certain properties and methods (e.g. `webFrame.firstChild`).
 
 An example of zooming current page to 200%.
 
-```javascript
+```js
 const { webFrame } = require('electron')
 
 webFrame.setZoomFactor(2)
@@ -96,7 +96,7 @@ with an array of misspelt words when complete.
 
 An example of using [node-spellchecker][spellchecker] as provider:
 
-```javascript @ts-expect-error=[2,6]
+```js @ts-expect-error=[2,6]
 const { webFrame } = require('electron')
 const spellChecker = require('spellchecker')
 webFrame.setSpellCheckProvider('en-US', {
@@ -205,14 +205,14 @@ Returns `Object`:
 Returns an object describing usage information of Blink's internal memory
 caches.
 
-```javascript
+```js
 const { webFrame } = require('electron')
 console.log(webFrame.getResourceUsage())
 ```
 
 This will generate:
 
-```javascript
+```js
 {
   images: {
     count: 22,

docs/api/web-request.md

@@ -23,7 +23,7 @@ called with a `response` object when `listener` has done its work.
 
 An example of adding `User-Agent` header for requests:
 
-```javascript
+```js
 const { session } = require('electron')
 
 // Modify the user agent for all requests to the following urls.

docs/api/web-utils.md

@@ -0,0 +1,26 @@
+# webUtils
+
+> A utility layer to interact with Web API objects (Files, Blobs, etc.)
+
+Process: [Renderer](../glossary.md#renderer-process)
+
+## Methods
+
+The `webUtils` module has the following methods:
+
+### `webUtils.getPathForFile(file)`
+
+* `file` File - A web [File](https://developer.mozilla.org/en-US/docs/Web/API/File) object.
+
+Returns `string` - The file system path that this `File` object points to. In the case where the object passed in is not a `File` object an exception is thrown. In the case where the File object passed in was constructed in JS and is not backed by a file on disk an empty string is returned.
+
+This method superceded the previous augmentation to the `File` object with the `path` property.  An example is included below.
+
+```js
+// Before
+const oldPath = document.querySelector('input').files[0].path
+
+// After
+const { webUtils } = require('electron')
+const newPath = webUtils.getPathForFile(document.querySelector('input').files[0])
+```

docs/api/webview-tag.md

@@ -255,7 +255,7 @@ The `webview` tag has the following methods:
 
 **Example**
 
-```javascript @ts-expect-error=[3]
+```js @ts-expect-error=[3]
 const webview = document.querySelector('webview')
 webview.addEventListener('dom-ready', () => {
   webview.openDevTools()
@@ -802,7 +802,7 @@ Fired when the guest window logs a console message.
 The following example code forwards all log messages to the embedder's console
 without regard for log level or other properties.
 
-```javascript @ts-expect-error=[3]
+```js @ts-expect-error=[3]
 const webview = document.querySelector('webview')
 webview.addEventListener('console-message', (e) => {
   console.log('Guest page logged a message:', e.message)
@@ -823,7 +823,7 @@ Returns:
 Fired when a result is available for
 [`webview.findInPage`](#webviewfindinpagetext-options) request.
 
-```javascript @ts-expect-error=[3,6]
+```js @ts-expect-error=[3,6]
 const webview = document.querySelector('webview')
 webview.addEventListener('found-in-page', (e) => {
   webview.stopFindInPage('keepSelection')
@@ -948,7 +948,7 @@ Fired when the guest page attempts to close itself.
 The following example code navigates the `webview` to `about:blank` when the
 guest attempts to close itself.
 
-```javascript @ts-expect-error=[3]
+```js @ts-expect-error=[3]
 const webview = document.querySelector('webview')
 webview.addEventListener('close', () => {
   webview.src = 'about:blank'
@@ -968,7 +968,7 @@ Fired when the guest page has sent an asynchronous message to embedder page.
 With `sendToHost` method and `ipc-message` event you can communicate
 between guest page and embedder page:
 
-```javascript @ts-expect-error=[4,7]
+```js @ts-expect-error=[4,7]
 // In embedder page.
 const webview = document.querySelector('webview')
 webview.addEventListener('ipc-message', (event) => {
@@ -978,7 +978,7 @@ webview.addEventListener('ipc-message', (event) => {
 webview.send('ping')
 ```
 
-```javascript
+```js
 // In guest page.
 const { ipcRenderer } = require('electron')
 ipcRenderer.on('ping', () => {

docs/api/window-open.md

@@ -80,7 +80,7 @@ window will not close when the opener window closes. The default value is `false
 
 ### Native `Window` example
 
-```javascript
+```js
 // main.js
 const mainWindow = new BrowserWindow()
 
@@ -104,7 +104,7 @@ mainWindow.webContents.setWindowOpenHandler(({ url }) => {
 })
 ```
 
-```javascript
+```js
 // renderer process (mainWindow)
 const childWindow = window.open('', 'modal')
 childWindow.document.write('<h1>Hello</h1>')

docs/breaking-changes.md

@@ -590,7 +590,7 @@ The `new-window` event of `<webview>` has been removed. There is no direct repla
 webview.addEventListener('new-window', (event) => {})
 ```
 
-```javascript fiddle='docs/fiddles/ipc/webview-new-window'
+```js
 // Replace with
 
 // main.js
@@ -1255,7 +1255,7 @@ module](https://medium.com/@nornagon/electrons-remote-module-considered-harmful-
 
 The APIs are now synchronous and the optional callback is no longer needed.
 
-```javascript
+```js
 // Deprecated
 protocol.unregisterProtocol(scheme, () => { /* ... */ })
 // Replace with
@@ -1284,7 +1284,7 @@ protocol.unregisterProtocol(scheme)
 
 The APIs are now synchronous and the optional callback is no longer needed.
 
-```javascript
+```js
 // Deprecated
 protocol.registerFileProtocol(scheme, handler, () => { /* ... */ })
 // Replace with
@@ -1299,7 +1299,7 @@ until navigation happens.
 This API is deprecated and users should use `protocol.isProtocolRegistered`
 and `protocol.isProtocolIntercepted` instead.
 
-```javascript
+```js
 // Deprecated
 protocol.isProtocolHandled(scheme).then(() => { /* ... */ })
 // Replace with

docs/development/creating-api.md

@@ -164,7 +164,7 @@ An example of the contents of this file can be found [here](https://github.com/e
 
 Add your module to the module list found at `"lib/browser/api/module-list.ts"` like so:
 
-```typescript title='lib/browser/api/module-list.ts' @ts-nocheck
+```ts title='lib/browser/api/module-list.ts' @ts-nocheck
 export const browserModuleList: ElectronInternal.ModuleEntry[] = [
   { name: 'apiName', loader: () => require('./api-name') },
 ];

docs/faq.md

@@ -65,7 +65,7 @@ If you encounter this problem, the following articles may prove helpful:
 If you want a quick fix, you can make the variables global by changing your
 code from this:
 
-```javascript
+```js
 const { app, Tray } = require('electron')
 app.whenReady().then(() => {
   const tray = new Tray('/path/to/icon.png')
@@ -75,7 +75,7 @@ app.whenReady().then(() => {
 
 to this:
 
-```javascript
+```js
 const { app, Tray } = require('electron')
 let tray = null
 app.whenReady().then(() => {
@@ -92,7 +92,7 @@ for some libraries since they want to insert the symbols with the same names.
 
 To solve this, you can turn off node integration in Electron:
 
-```javascript
+```js
 // In the main process.
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow({
@@ -141,7 +141,7 @@ Sub-pixel anti-aliasing needs a non-transparent background of the layer containi
 
 To achieve this goal, set the background in the constructor for [BrowserWindow][browser-window]:
 
-```javascript
+```js
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow({
   backgroundColor: '#fff'

docs/tutorial/application-debugging.md

@@ -12,7 +12,7 @@ including instances of `BrowserWindow`, `BrowserView`, and `WebView`. You
 can open them programmatically by calling the `openDevTools()` API on the
 `webContents` of the instance:
 
-```javascript
+```js
 const { BrowserWindow } = require('electron')
 
 const win = new BrowserWindow()

docs/tutorial/asar-archives.md

@@ -41,27 +41,27 @@ $ asar list /path/to/example.asar
 
 Read a file in the ASAR archive:
 
-```javascript
+```js
 const fs = require('node:fs')
 fs.readFileSync('/path/to/example.asar/file.txt')
 ```
 
 List all files under the root of the archive:
 
-```javascript
+```js
 const fs = require('node:fs')
 fs.readdirSync('/path/to/example.asar')
 ```
 
 Use a module from the archive:
 
-```javascript @ts-nocheck
+```js @ts-nocheck
 require('./path/to/example.asar/dir/module.js')
 ```
 
 You can also display a web page in an ASAR archive with `BrowserWindow`:
 
-```javascript
+```js
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow()
 
@@ -90,7 +90,7 @@ For some cases like verifying the ASAR archive's checksum, we need to read the
 content of an ASAR archive as a file. For this purpose you can use the built-in
 `original-fs` module which provides original `fs` APIs without `asar` support:
 
-```javascript
+```js
 const originalFs = require('original-fs')
 originalFs.readFileSync('/path/to/example.asar')
 ```
@@ -98,7 +98,7 @@ originalFs.readFileSync('/path/to/example.asar')
 You can also set `process.noAsar` to `true` to disable the support for `asar` in
 the `fs` module:
 
-```javascript
+```js
 const fs = require('node:fs')
 process.noAsar = true
 fs.readFileSync('/path/to/example.asar')

docs/tutorial/context-isolation.md

@@ -16,7 +16,7 @@ Context isolation has been enabled by default since Electron 12, and it is a rec
 
 Exposing APIs from your preload script to a loaded website in the renderer process is a common use-case. With context isolation disabled, your preload script would share a common global `window` object with the renderer. You could then attach arbitrary properties to a preload script:
 
-```javascript title='preload.js' @ts-nocheck
+```js title='preload.js' @ts-nocheck
 // preload with contextIsolation disabled
 window.myAPI = {
   doAThing: () => {}
@@ -25,7 +25,7 @@ window.myAPI = {
 
 The `doAThing()` function could then be used directly in the renderer process:
 
-```javascript title='renderer.js' @ts-nocheck
+```js title='renderer.js' @ts-nocheck
 // use the exposed API in the renderer
 window.myAPI.doAThing()
 ```
@@ -34,7 +34,7 @@ window.myAPI.doAThing()
 
 There is a dedicated module in Electron to help you do this in a painless way. The [`contextBridge`](../api/context-bridge.md) module can be used to **safely** expose APIs from your preload script's isolated context to the context the website is running in. The API will also be accessible from the website on `window.myAPI` just like it was before.
 
-```javascript title='preload.js'
+```js title='preload.js'
 // preload with contextIsolation enabled
 const { contextBridge } = require('electron')
 
@@ -43,7 +43,7 @@ contextBridge.exposeInMainWorld('myAPI', {
 })
 ```
 
-```javascript title='renderer.js' @ts-nocheck
+```js title='renderer.js' @ts-nocheck
 // use the exposed API in the renderer
 window.myAPI.doAThing()
 ```
@@ -54,7 +54,7 @@ Please read the `contextBridge` documentation linked above to fully understand i
 
 Just enabling `contextIsolation` and using `contextBridge` does not automatically mean that everything you do is safe. For instance, this code is **unsafe**.
 
-```javascript title='preload.js'
+```js title='preload.js'
 // ❌ Bad code
 contextBridge.exposeInMainWorld('myAPI', {
   send: ipcRenderer.send
@@ -63,7 +63,7 @@ contextBridge.exposeInMainWorld('myAPI', {
 
 It directly exposes a powerful API without any kind of argument filtering. This would allow any website to send arbitrary IPC messages, which you do not want to be possible. The correct way to expose IPC-based APIs would instead be to provide one method per IPC message.
 
-```javascript title='preload.js'
+```js title='preload.js'
 // ✅ Good code
 contextBridge.exposeInMainWorld('myAPI', {
   loadPreferences: () => ipcRenderer.invoke('load-prefs')
@@ -76,7 +76,7 @@ If you're building your Electron app with TypeScript, you'll want to add types t
 
 For example, given this `preload.ts` script:
 
-```typescript title='preload.ts'
+```ts title='preload.ts'
 contextBridge.exposeInMainWorld('electronAPI', {
   loadPreferences: () => ipcRenderer.invoke('load-prefs')
 })
@@ -84,7 +84,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
 
 You can create a `interface.d.ts` declaration file and globally augment the `Window` interface:
 
-```typescript title='interface.d.ts' @ts-noisolate
+```ts title='interface.d.ts' @ts-noisolate
 export interface IElectronAPI {
   loadPreferences: () => Promise<void>,
 }
@@ -98,7 +98,7 @@ declare global {
 
 Doing so will ensure that the TypeScript compiler will know about the `electronAPI` property on your global `window` object when writing scripts in your renderer process:
 
-```typescript title='renderer.ts'
+```ts title='renderer.ts'
 window.electronAPI.loadPreferences()
 ```
 

docs/tutorial/dark-mode.md

@@ -50,7 +50,7 @@ of this theming, due to the use of the macOS 10.14 SDK.
 This example demonstrates an Electron application that derives its theme colors from the
 `nativeTheme`. Additionally, it provides theme toggle and reset controls using IPC channels.
 
-```javascript fiddle='docs/fiddles/features/dark-mode'
+```fiddle docs/fiddles/features/dark-mode
 
 ```
 

docs/tutorial/devices.md

@@ -26,7 +26,7 @@ This example demonstrates an Electron application that automatically selects
 the first available bluetooth device when the `Test Bluetooth` button is
 clicked.
 
-```javascript fiddle='docs/fiddles/features/web-bluetooth'
+```fiddle docs/fiddles/features/web-bluetooth
 
 ```
 
@@ -61,7 +61,7 @@ By default Electron employs the same [blocklist](https://github.com/WICG/webhid/
 used by Chromium.  If you wish to override this behavior, you can do so by
 setting the `disable-hid-blocklist` flag:
 
-```javascript
+```js
 app.commandLine.appendSwitch('disable-hid-blocklist')
 ```
 
@@ -72,7 +72,7 @@ HID devices through [`ses.setDevicePermissionHandler(handler)`](../api/session.m
 and through [`select-hid-device` event on the Session](../api/session.md#event-select-hid-device)
 when the `Test WebHID` button is clicked.
 
-```javascript fiddle='docs/fiddles/features/web-hid'
+```fiddle docs/fiddles/features/web-hid
 
 ```
 
@@ -112,7 +112,7 @@ as well as demonstrating selecting the first available Arduino Uno serial device
 [`select-serial-port` event on the Session](../api/session.md#event-select-serial-port)
 when the `Test Web Serial` button is clicked.
 
-```javascript fiddle='docs/fiddles/features/web-serial'
+```fiddle docs/fiddles/features/web-serial
 
 ```
 
@@ -152,6 +152,6 @@ USB devices (if they are attached) through [`ses.setDevicePermissionHandler(hand
 and through [`select-usb-device` event on the Session](../api/session.md#event-select-usb-device)
 when the `Test WebUSB` button is clicked.
 
-```javascript fiddle='docs/fiddles/features/web-usb'
+```fiddle docs/fiddles/features/web-usb
 
 ```

docs/tutorial/devtools-extension.md

@@ -33,7 +33,7 @@ Using the [React Developer Tools][react-devtools] as an example:
 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
+   ```js
    const { app, session } = require('electron')
    const path = require('node:path')
    const os = require('node:os')

docs/tutorial/electron-timelines.md

@@ -9,10 +9,11 @@ check out our [Electron Versioning](./electron-versioning.md) doc.
 
 | Electron | Alpha | Beta | Stable | EOL | Chrome | Node | Supported |
 | ------- | ----- | ------- | ------ | ------ | ---- | ---- | ---- |
-| 28.0.0 |  2023-Oct-11 | 2023-Nov-6 | 2023-Dec-5 | TBD | M120 | TBD | ✅ |
+| 29.0.0 |  2023-Dec-07 | 2024-Jan-24 | 2024-Feb-20 | 2024-Aug-20 | M122 | v18.19 | ✅ |
+| 28.0.0 |  2023-Oct-11 | 2023-Nov-06 | 2023-Dec-05 | 2024-Jun-11 | M120 | v18.18 | ✅ |
 | 27.0.0 |  2023-Aug-17 | 2023-Sep-13 | 2023-Oct-10 | 2024-Apr-16 | M118 | v18.17 | ✅ |
-| 26.0.0 | 2023-Jun-01 | 2023-Jun-27 | 2023-Aug-15 | 2024-Feb-27 | M116 | v18.16 | ✅ |
-| 25.0.0 | 2023-Apr-10 | 2023-May-02 | 2023-May-30 | 2024-Jan-02 | M114 | v18.15 | ✅ |
+| 26.0.0 | 2023-Jun-01 | 2023-Jun-27 | 2023-Aug-15 | 2024-Feb-20 | M116 | v18.16 | ✅ |
+| 25.0.0 | 2023-Apr-10 | 2023-May-02 | 2023-May-30 | 2023-Dec-05 | M114 | v18.15 | 🚫 |
 | 24.0.0 | 2023-Feb-09 | 2023-Mar-07 | 2023-Apr-04 | 2023-Oct-10 | M112 | v18.14 | 🚫 |
 | 23.0.0 | 2022-Dec-01 | 2023-Jan-10 | 2023-Feb-07 | 2023-Aug-15 | M110 | v18.12 | 🚫 |
 | 22.0.0 | 2022-Sep-29 | 2022-Oct-25 | 2022-Nov-29 | 2023-Oct-10 | M108 | v16.17 | 🚫 |

docs/tutorial/examples.md

@@ -16,16 +16,7 @@ Once Fiddle is installed, you can press on the "Open in Fiddle" button that you
 will find below code samples like the following one:
 
 ```fiddle docs/fiddles/quick-start
-window.addEventListener('DOMContentLoaded', () => {
-  const replaceText = (selector, text) => {
-    const element = document.getElementById(selector)
-    if (element) element.innerText = text
-  }
 
-  for (const type of ['chrome', 'node', 'electron']) {
-    replaceText(`${type}-version`, process.versions[type])
-  }
-})
 ```
 
 If there is still something that you do not know how to do, please take a look at the [API][app]

docs/tutorial/in-app-purchases.md

@@ -34,7 +34,7 @@ To test In-App Purchase in development with Electron you'll have to change the `
 
 Here is an example that shows how to use In-App Purchases in Electron. You'll have to replace the product ids by the identifiers of the products created with iTunes Connect (the identifier of `com.example.app.product1` is `product1`). Note that you have to listen to the `transactions-updated` event as soon as possible in your app.
 
-```javascript
+```js
 // Main process
 const { inAppPurchase } = require('electron')
 const PRODUCT_IDS = ['id1', 'id2']

docs/tutorial/installation.md

@@ -66,7 +66,7 @@ You can use environment variables to override the base URL, the path at which to
 look for Electron binaries, and the binary filename. The URL used by `@electron/get`
 is composed as follows:
 
-```javascript @ts-nocheck
+```js @ts-nocheck
 url = ELECTRON_MIRROR + ELECTRON_CUSTOM_DIR + '/' + ELECTRON_CUSTOM_FILENAME
 ```
 

docs/tutorial/ipc.md

@@ -50,7 +50,7 @@ sections.
 
 In the main process, set an IPC listener on the `set-title` channel with the `ipcMain.on` API:
 
-```javascript {6-10,22} title='main.js (Main Process)'
+```js {6-10,22} title='main.js (Main Process)'
 const { app, BrowserWindow, ipcMain } = require('electron')
 const path = require('node:path')
 
@@ -96,7 +96,7 @@ you need to choose which APIs to expose from your preload script using the `cont
 In your preload script, add the following code, which will expose a global `window.electronAPI`
 variable to your renderer process.
 
-```javascript title='preload.js (Preload Script)'
+```js title='preload.js (Preload Script)'
 const { contextBridge, ipcRenderer } = require('electron')
 
 contextBridge.exposeInMainWorld('electronAPI', {
@@ -138,7 +138,7 @@ To make these elements interactive, we'll be adding a few lines of code in the i
 `renderer.js` file that leverages the `window.electronAPI` functionality exposed from the preload
 script:
 
-```javascript title='renderer.js (Renderer Process)' @ts-expect-error=[4,5]
+```js title='renderer.js (Renderer Process)' @ts-expect-error=[4,5]
 const setButton = document.getElementById('btn')
 const titleInput = document.getElementById('title')
 setButton.addEventListener('click', () => {
@@ -181,7 +181,7 @@ provided to the renderer process. Please refer to
 [#24427](https://github.com/electron/electron/issues/24427) for details.
 :::
 
-```javascript {6-13,25} title='main.js (Main Process)'
+```js {6-13,25} title='main.js (Main Process)'
 const { app, BrowserWindow, dialog, ipcMain } = require('electron')
 const path = require('node:path')
 
@@ -225,7 +225,7 @@ In the preload script, we expose a one-line `openFile` function that calls and r
 `ipcRenderer.invoke('dialog:openFile')`. We'll be using this API in the next step to call the
 native dialog from our renderer's user interface.
 
-```javascript title='preload.js (Preload Script)'
+```js title='preload.js (Preload Script)'
 const { contextBridge, ipcRenderer } = require('electron')
 
 contextBridge.exposeInMainWorld('electronAPI', {
@@ -263,7 +263,7 @@ The UI consists of a single `#btn` button element that will be used to trigger o
 a `#filePath` element that will be used to display the path of the selected file. Making these
 pieces work will take a few lines of code in the renderer process script:
 
-```javascript title='renderer.js (Renderer Process)' @ts-expect-error=[5]
+```js title='renderer.js (Renderer Process)' @ts-expect-error=[5]
 const btn = document.getElementById('btn')
 const filePathElement = document.getElementById('filePath')
 
@@ -280,8 +280,8 @@ selected file path in the `#filePath` element.
 ### Note: legacy approaches
 
 The `ipcRenderer.invoke` API was added in Electron 7 as a developer-friendly way to tackle two-way
-IPC from the renderer process. However, there exist a couple alternative approaches to this IPC
-pattern.
+IPC from the renderer process. However, a couple of alternative approaches to this IPC pattern
+exist.
 
 :::warning Avoid legacy approaches if possible
 We recommend using `ipcRenderer.invoke` whenever possible. The following two-way renderer-to-main
@@ -299,7 +299,7 @@ The `ipcRenderer.send` API that we used for single-way communication can also be
 perform two-way communication. This was the recommended way for asynchronous two-way communication
 via IPC prior to Electron 7.
 
-```javascript title='preload.js (Preload Script)'
+```js title='preload.js (Preload Script)'
 // You can also put expose this code to the renderer
 // process with the `contextBridge` API
 const { ipcRenderer } = require('electron')
@@ -310,7 +310,7 @@ ipcRenderer.on('asynchronous-reply', (_event, arg) => {
 ipcRenderer.send('asynchronous-message', 'ping')
 ```
 
-```javascript title='main.js (Main Process)'
+```js title='main.js (Main Process)'
 ipcMain.on('asynchronous-message', (event, arg) => {
   console.log(arg) // prints "ping" in the Node console
   // works like `send`, but returning a message back
@@ -332,7 +332,7 @@ channels, you would need to add additional app code to track each call and respo
 The `ipcRenderer.sendSync` API sends a message to the main process and waits _synchronously_ for a
 response.
 
-```javascript title='main.js (Main Process)'
+```js title='main.js (Main Process)'
 const { ipcMain } = require('electron')
 ipcMain.on('synchronous-message', (event, arg) => {
   console.log(arg) // prints "ping" in the Node console
@@ -340,7 +340,7 @@ ipcMain.on('synchronous-message', (event, arg) => {
 })
 ```
 
-```javascript title='preload.js (Preload Script)'
+```js title='preload.js (Preload Script)'
 // You can also put expose this code to the renderer
 // process with the `contextBridge` API
 const { ipcRenderer } = require('electron')
@@ -376,7 +376,7 @@ For this demo, we'll need to first build a custom menu in the main process using
 module that uses the `webContents.send` API to send an IPC message from the main process to the
 target renderer.
 
-```javascript {11-26} title='main.js (Main Process)'
+```js {11-26} title='main.js (Main Process)'
 const { app, BrowserWindow, Menu, ipcMain } = require('electron')
 const path = require('node:path')
 
@@ -412,7 +412,7 @@ function createWindow () {
 For the purposes of the tutorial, it's important to note that the `click` handler
 sends a message (either `1` or `-1`) to the renderer process through the `update-counter` channel.
 
-```javascript @ts-type={mainWindow:Electron.BrowserWindow}
+```js @ts-type={mainWindow:Electron.BrowserWindow}
 click: () => mainWindow.webContents.send('update-counter', -1)
 ```
 
@@ -425,7 +425,7 @@ Make sure you're loading the `index.html` and `preload.js` entry points for the
 Like in the previous renderer-to-main example, we use the `contextBridge` and `ipcRenderer`
 modules in the preload script to expose IPC functionality to the renderer process:
 
-```javascript title='preload.js (Preload Script)'
+```js title='preload.js (Preload Script)'
 const { contextBridge, ipcRenderer } = require('electron')
 
 contextBridge.exposeInMainWorld('electronAPI', {
@@ -447,7 +447,7 @@ Use a custom handler that invoke the `callback` only with the desired arguments.
 In the case of this minimal example, you can call `ipcRenderer.on` directly in the preload script
 rather than exposing it over the context bridge.
 
-```javascript title='preload.js (Preload Script)'
+```js title='preload.js (Preload Script)'
 const { ipcRenderer } = require('electron')
 
 window.addEventListener('DOMContentLoaded', () => {
@@ -488,7 +488,7 @@ To tie it all together, we'll create an interface in the loaded HTML file that c
 Finally, to make the values update in the HTML document, we'll add a few lines of DOM manipulation
 so that the value of the `#counter` element is updated whenever we fire an `update-counter` event.
 
-```javascript title='renderer.js (Renderer Process)' @ts-window-type={electronAPI:{onUpdateCounter:(callback:(value:number)=>void)=>void}}
+```js title='renderer.js (Renderer Process)' @ts-window-type={electronAPI:{onUpdateCounter:(callback:(value:number)=>void)=>void}}
 const counter = document.getElementById('counter')
 
 window.electronAPI.onUpdateCounter((value) => {
@@ -511,7 +511,7 @@ We can demonstrate this with slight modifications to the code from the previous
 renderer process, expose another API to send a reply back to the main process through the
 `counter-value` channel.
 
-```javascript title='preload.js (Preload Script)'
+```js title='preload.js (Preload Script)'
 const { contextBridge, ipcRenderer } = require('electron')
 
 contextBridge.exposeInMainWorld('electronAPI', {
@@ -520,7 +520,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
 })
 ```
 
-```javascript title='renderer.js (Renderer Process)' @ts-window-type={electronAPI:{onUpdateCounter:(callback:(value:number)=>void)=>void,counterValue:(value:number)=>void}}
+```js title='renderer.js (Renderer Process)' @ts-window-type={electronAPI:{onUpdateCounter:(callback:(value:number)=>void)=>void,counterValue:(value:number)=>void}}
 const counter = document.getElementById('counter')
 
 window.electronAPI.onUpdateCounter((value) => {
@@ -533,7 +533,7 @@ window.electronAPI.onUpdateCounter((value) => {
 
 In the main process, listen for `counter-value` events and handle them appropriately.
 
-```javascript title='main.js (Main Process)'
+```js title='main.js (Main Process)'
 // ...
 ipcMain.on('counter-value', (_event, value) => {
   console.log(value) // will print value to Node console

docs/tutorial/keyboard-shortcuts.md

@@ -14,11 +14,19 @@ To configure a local keyboard shortcut, you need to specify an [`accelerator`][]
 property when creating a [MenuItem][] within the [Menu][] module.
 
 Starting with a working application from the
-[Quick Start Guide](quick-start.md), update the `main.js` file with the
-following lines:
+[Quick Start Guide](quick-start.md), update the `main.js` to be:
 
-```javascript fiddle='docs/fiddles/features/keyboard-shortcuts/local'
-const { Menu, MenuItem } = require('electron')
+```fiddle docs/fiddles/features/keyboard-shortcuts/local
+const { app, BrowserWindow, Menu, MenuItem } = require('electron/main')
+
+function createWindow () {
+  const win = new BrowserWindow({
+    width: 800,
+    height: 600
+  })
+
+  win.loadFile('index.html')
+}
 
 const menu = new Menu()
 menu.append(new MenuItem({
@@ -31,6 +39,20 @@ menu.append(new MenuItem({
 }))
 
 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()
+  }
+})
 ```
 
 > NOTE: In the code above, you can see that the accelerator differs based on the
@@ -53,17 +75,37 @@ module to detect keyboard events even when the application does not have
 keyboard focus.
 
 Starting with a working application from the
-[Quick Start Guide](quick-start.md), update the `main.js` file with the
-following lines:
+[Quick Start Guide](quick-start.md), update the `main.js` to be:
 
-```javascript fiddle='docs/fiddles/features/keyboard-shortcuts/global' @ts-type={createWindow:()=>void}
-const { app, globalShortcut } = require('electron')
+```fiddle docs/fiddles/features/keyboard-shortcuts/global
+const { app, BrowserWindow, globalShortcut } = require('electron/main')
+
+function createWindow () {
+  const win = new BrowserWindow({
+    width: 800,
+    height: 600
+  })
+
+  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()
+  }
+})
 ```
 
 > NOTE: In the code above, the `CommandOrControl` combination uses `Command`
@@ -81,8 +123,8 @@ If you want to handle keyboard shortcuts within a [BrowserWindow][], you can
 listen for the `keyup` and `keydown` [DOM events][dom-events] inside the
 renderer process using the [addEventListener() API][addEventListener-api].
 
-```javascript fiddle='docs/fiddles/features/keyboard-shortcuts/web-apis|focus=renderer.js'
-const handleKeyPress = (event) => {
+```fiddle docs/fiddles/features/keyboard-shortcuts/web-apis|focus=renderer.js
+function handleKeyPress (event) {
   // You can put code here to handle the keypress.
   document.getElementById('last-keypress').innerText = event.key
   console.log(`You pressed ${event.key}`)
@@ -105,8 +147,8 @@ Starting with a working application from the
 [Quick Start Guide](quick-start.md), update the `main.js` file with the
 following lines:
 
-```javascript fiddle='docs/fiddles/features/keyboard-shortcuts/interception-from-main'
-const { app, BrowserWindow } = require('electron')
+```fiddle docs/fiddles/features/keyboard-shortcuts/interception-from-main
+const { app, BrowserWindow } = require('electron/main')
 
 app.whenReady().then(() => {
   const win = new BrowserWindow({ width: 800, height: 600 })

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

@@ -25,14 +25,14 @@ we will use will be "`electron-fiddle://`".
 First, we will import the required modules from `electron`. These modules help
 control our application lifecycle and create a native browser window.
 
-```javascript
+```js
 const { app, BrowserWindow, shell } = require('electron')
 const path = require('node:path')
 ```
 
 Next, we will proceed to register our application to handle all "`electron-fiddle://`" protocols.
 
-```javascript
+```js
 if (process.defaultApp) {
   if (process.argv.length >= 2) {
     app.setAsDefaultProtocolClient('electron-fiddle', process.execPath, [path.resolve(process.argv[1])])
@@ -44,7 +44,7 @@ if (process.defaultApp) {
 
 We will now define the function in charge of creating our browser window and load our application's `index.html` file.
 
-```javascript
+```js
 let mainWindow
 
 const createWindow = () => {
@@ -67,7 +67,7 @@ This code will be different in Windows and Linux compared to MacOS. This is due
 
 #### Windows and Linux code:
 
-```javascript @ts-type={mainWindow:Electron.BrowserWindow} @ts-type={createWindow:()=>void}
+```js @ts-type={mainWindow:Electron.BrowserWindow} @ts-type={createWindow:()=>void}
 const gotTheLock = app.requestSingleInstanceLock()
 
 if (!gotTheLock) {
@@ -92,7 +92,7 @@ if (!gotTheLock) {
 
 #### MacOS code:
 
-```javascript @ts-type={createWindow:()=>void}
+```js @ts-type={createWindow:()=>void}
 // 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.
@@ -108,7 +108,7 @@ app.on('open-url', (event, url) => {
 
 Finally, we will add some additional code to handle when someone closes our application.
 
-```javascript
+```js
 // Quit when all windows are closed, except on macOS. There, it's common
 // for applications and their menu bar to stay active until the user quits
 // explicitly with Cmd + Q.
@@ -167,7 +167,7 @@ If you're using Electron Packager's API, adding support for protocol handlers is
 Electron Forge is handled, except
 `protocols` is part of the Packager options passed to the `packager` function.
 
-```javascript @ts-nocheck
+```js @ts-nocheck
 const packager = require('@electron/packager')
 
 packager({

docs/tutorial/macos-dock.md

@@ -23,10 +23,10 @@ To set your custom dock menu, you need to use the
 [`app.dock.setMenu`](../api/dock.md#docksetmenumenu-macos) API,
 which is only available on macOS.
 
-```javascript fiddle='docs/fiddles/features/macos-dock-menu'
-const { app, BrowserWindow, Menu } = require('electron')
+```fiddle docs/fiddles/features/macos-dock-menu
+const { app, BrowserWindow, Menu } = require('electron/main')
 
-const createWindow = () => {
+function createWindow () {
   const win = new BrowserWindow({
     width: 800,
     height: 600

docs/tutorial/multithreading.md

@@ -9,7 +9,7 @@ It is possible to use Node.js features in Electron's Web Workers, to do
 so the `nodeIntegrationInWorker` option should be set to `true` in
 `webPreferences`.
 
-```javascript
+```js
 const win = new BrowserWindow({
   webPreferences: {
     nodeIntegrationInWorker: true
@@ -42,7 +42,7 @@ safe.
 The only way to load a native module safely for now, is to make sure the app
 loads no native modules after the Web Workers get started.
 
-```javascript @ts-expect-error=[1]
+```js @ts-expect-error=[1]
 process.dlopen = () => {
   throw new Error('Load native module is not safe')
 }

docs/tutorial/native-file-drag-drop.md

@@ -44,7 +44,7 @@ Add a draggable element to `index.html`, and reference your renderer script:
 
 In `renderer.js` set up the renderer process to handle drag events by calling the method you added via the [`contextBridge`][] above.
 
-```javascript @ts-expect-error=[3]
+```js @ts-expect-error=[3]
 document.getElementById('drag').ondragstart = (event) => {
   event.preventDefault()
   window.electron.startDrag('drag-and-drop.md')
@@ -56,15 +56,55 @@ document.getElementById('drag').ondragstart = (event) => {
 In the Main process (`main.js` file), expand the received event with a path to the file that is
 being dragged and an icon:
 
-```javascript fiddle='docs/fiddles/features/drag-and-drop'
-const { ipcMain } = require('electron')
+```fiddle docs/fiddles/features/drag-and-drop
+const { app, BrowserWindow, ipcMain } = require('electron/main')
+const path = require('node:path')
+const fs = require('node:fs')
+const https = require('node:https')
+
+function createWindow () {
+  const win = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js')
+    }
+  })
+
+  win.loadFile('index.html')
+}
+
+const iconName = path.join(__dirname, 'iconForDragAndDrop.png')
+const icon = fs.createWriteStream(iconName)
+
+// Create a new file to copy - you can also copy existing files.
+fs.writeFileSync(path.join(__dirname, 'drag-and-drop-1.md'), '# First file to test drag and drop')
+fs.writeFileSync(path.join(__dirname, 'drag-and-drop-2.md'), '# Second file to test drag and drop')
+
+https.get('https://img.icons8.com/ios/452/drag-and-drop.png', (response) => {
+  response.pipe(icon)
+})
+
+app.whenReady().then(createWindow)
 
 ipcMain.on('ondragstart', (event, filePath) => {
   event.sender.startDrag({
-    file: filePath,
-    icon: '/path/to/icon.png'
+    file: path.join(__dirname, filePath),
+    icon: iconName
   })
 })
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow()
+  }
+})
 ```
 
 After launching the Electron application, try dragging and dropping

docs/tutorial/notifications.md

@@ -30,16 +30,38 @@ new Notification({
 
 Here's a full example that you can open with Electron Fiddle:
 
-```javascript fiddle='docs/fiddles/features/notifications/main'
-const { Notification } = require('electron')
+```fiddle docs/fiddles/features/notifications/main
+const { app, BrowserWindow, Notification } = require('electron/main')
+
+function createWindow () {
+  const win = new BrowserWindow({
+    width: 800,
+    height: 600
+  })
+
+  win.loadFile('index.html')
+}
 
 const NOTIFICATION_TITLE = 'Basic Notification'
 const NOTIFICATION_BODY = 'Notification from the Main process'
 
-new Notification({
-  title: NOTIFICATION_TITLE,
-  body: NOTIFICATION_BODY
-}).show()
+function showNotification () {
+  new Notification({ title: NOTIFICATION_TITLE, body: NOTIFICATION_BODY }).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()
+  }
+})
 ```
 
 ### Show notifications in the renderer process
@@ -59,14 +81,13 @@ new Notification(NOTIFICATION_TITLE, { body: NOTIFICATION_BODY }).onclick =
 
 Here's a full example that you can open with Electron Fiddle:
 
-```javascript fiddle='docs/fiddles/features/notifications/renderer'
+```fiddle docs/fiddles/features/notifications/renderer|focus=renderer.js
 const NOTIFICATION_TITLE = 'Title'
-const NOTIFICATION_BODY =
-  'Notification from the Renderer process. Click to log to console.'
-const CLICK_MESSAGE = 'Notification clicked'
+const NOTIFICATION_BODY = 'Notification from the Renderer process. Click to log to console.'
+const CLICK_MESSAGE = 'Notification clicked!'
 
-new Notification(NOTIFICATION_TITLE, { body: NOTIFICATION_BODY }).onclick =
-  () => console.log(CLICK_MESSAGE)
+new window.Notification(NOTIFICATION_TITLE, { body: NOTIFICATION_BODY })
+  .onclick = () => { document.getElementById('output').innerText = CLICK_MESSAGE }
 ```
 
 ## Platform considerations

docs/tutorial/offscreen-rendering.md

@@ -39,22 +39,44 @@ To enable this mode, GPU acceleration has to be disabled by calling the
 
 ## Example
 
-```javascript fiddle='docs/fiddles/features/offscreen-rendering'
-const { app, BrowserWindow } = require('electron')
+```fiddle docs/fiddles/features/offscreen-rendering
+const { app, BrowserWindow } = require('electron/main')
 const fs = require('node:fs')
+const path = require('node:path')
 
 app.disableHardwareAcceleration()
 
-let win
-
-app.whenReady().then(() => {
-  win = new BrowserWindow({ webPreferences: { offscreen: true } })
+function createWindow () {
+  const win = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      offscreen: true
+    }
+  })
 
   win.loadURL('https://github.com')
   win.webContents.on('paint', (event, dirty, image) => {
     fs.writeFileSync('ex.png', image.toPNG())
   })
   win.webContents.setFrameRate(60)
+  console.log(`The screenshot has been successfully saved to ${path.join(process.cwd(), 'ex.png')}`)
+}
+
+app.whenReady().then(() => {
+  createWindow()
+
+  app.on('activate', () => {
+    if (BrowserWindow.getAllWindows().length === 0) {
+      createWindow()
+    }
+  })
+})
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
 })
 ```
 

docs/tutorial/progress-bar.md

@@ -50,12 +50,12 @@ See the [API documentation for more options and modes][setprogressbar].
 In this example, we add a progress bar to the main window that increments over time
 using Node.js timers.
 
-```javascript fiddle='docs/fiddles/features/progress-bar'
-const { app, BrowserWindow } = require('electron')
+```fiddle docs/fiddles/features/progress-bar
+const { app, BrowserWindow } = require('electron/main')
 
 let progressInterval
 
-const createWindow = () => {
+function createWindow () {
   const win = new BrowserWindow({
     width: 800,
     height: 600
@@ -73,8 +73,11 @@ const createWindow = () => {
     win.setProgressBar(c)
 
     // increment or reset progress bar
-    if (c < 2) c += INCREMENT
-    else c = 0
+    if (c < 2) {
+      c += INCREMENT
+    } else {
+      c = (-INCREMENT * 5) // reset to a bit less than 0 to show reset state
+    }
   }, INTERVAL_DELAY)
 }
 

docs/tutorial/quick-start.md

@@ -155,7 +155,7 @@ need two Electron modules:
   windows.
 
 Because the main process runs Node.js, you can import these as [CommonJS][commonjs]
-modules at the top of your file:
+modules at the top of your `main.js` file:
 
 ```js
 const { app, BrowserWindow } = require('electron')

docs/tutorial/recent-documents.md

@@ -24,12 +24,12 @@ the application via JumpList or dock menu, respectively.
 
 ### Managing recent documents
 
-```javascript fiddle='docs/fiddles/features/recent-documents'
-const { app, BrowserWindow } = require('electron')
+```fiddle docs/fiddles/features/recent-documents
+const { app, BrowserWindow } = require('electron/main')
 const fs = require('node:fs')
 const path = require('node:path')
 
-const createWindow = () => {
+function createWindow () {
   const win = new BrowserWindow({
     width: 800,
     height: 600
@@ -116,7 +116,7 @@ following code snippet to your menu template:
 Make sure the application menu is added after the [`'ready'`](../api/app.md#event-ready)
 event and not before, or the menu item will be disabled:
 
-```javascript
+```js
 const { app, Menu } = require('electron')
 
 const template = [

docs/tutorial/represented-file.md

@@ -27,22 +27,30 @@ To set the represented file of window, you can use the
 
 ## Example
 
-```javascript fiddle='docs/fiddles/features/represented-file'
-const { app, BrowserWindow } = require('electron')
+```fiddle docs/fiddles/features/represented-file
+const { app, BrowserWindow } = require('electron/main')
 const os = require('node:os')
 
-const createWindow = () => {
+function createWindow () {
   const win = new BrowserWindow({
     width: 800,
     height: 600
   })
-}
-
-app.whenReady().then(() => {
-  const win = new BrowserWindow()
 
   win.setRepresentedFilename(os.homedir())
   win.setDocumentEdited(true)
+
+  win.loadFile('index.html')
+}
+
+app.whenReady().then(() => {
+  createWindow()
+
+  app.on('activate', () => {
+    if (BrowserWindow.getAllWindows().length === 0) {
+      createWindow()
+    }
+  })
 })
 
 app.on('window-all-closed', () => {
@@ -50,12 +58,6 @@ app.on('window-all-closed', () => {
     app.quit()
   }
 })
-
-app.on('activate', () => {
-  if (BrowserWindow.getAllWindows().length === 0) {
-    createWindow()
-  }
-})
 ```
 
 After launching the Electron application, click on the title with `Command` or

docs/tutorial/sandbox.md

@@ -46,7 +46,7 @@ scripts attached to sandboxed renderers will still have a polyfilled subset of N
 APIs available. A `require` function similar to Node's `require` module is exposed,
 but can only import a subset of Electron and Node's built-in modules:
 
-* `electron` (following renderer process modules: `contextBridge`, `crashReporter`, `ipcRenderer`, `nativeImage`, `webFrame`)
+* `electron` (following renderer process modules: `contextBridge`, `crashReporter`, `ipcRenderer`, `nativeImage`, `webFrame`, `webUtils`)
 * [`events`](https://nodejs.org/api/events.html)
 * [`timers`](https://nodejs.org/api/timers.html)
 * [`url`](https://nodejs.org/api/url.html)

docs/tutorial/security.md

@@ -375,7 +375,7 @@ which can be set using Electron's
 [`webRequest.onHeadersReceived`](../api/web-request.md#webrequestonheadersreceivedfilter-listener)
 handler:
 
-```javascript title='main.js (Main Process)'
+```js title='main.js (Main Process)'
 const { session } = require('electron')
 
 session.defaultSession.webRequest.onHeadersReceived((details, callback) => {

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

@@ -243,11 +243,11 @@ const { app, BrowserWindow } = require('electron/main')
 For more information, see the [Process Model docs](../tutorial/process-model.md#process-specific-module-aliases-typescript).
 </details>
 
-:::warning ES Modules in Electron
+:::info ES Modules in Electron
 
 [ECMAScript modules](https://nodejs.org/api/esm.html) (i.e. using `import` to load a module)
-are currently not directly supported in Electron. You can find more information about the
-state of ESM in Electron in [electron/electron#21457](https://github.com/electron/electron/issues/21457).
+are supported in Electron as of Electron 28. You can find more information about the
+state of ESM in Electron and how to use them in our app in [our ESM guide](../tutorial/esm.md).
 
 :::
 

docs/tutorial/updates.md

@@ -81,14 +81,14 @@ You can use the [app.isPackaged](../api/app.md#appispackaged-readonly) API to ch
 
 :::
 
-```javascript title='main.js'
+```js title='main.js'
 const { app, autoUpdater, dialog } = require('electron')
 ```
 
 Next, construct the URL of the update server feed and tell
 [autoUpdater](../api/auto-updater.md) about it:
 
-```javascript title='main.js'
+```js title='main.js'
 const server = 'https://your-deployment-url.com'
 const url = `${server}/update/${process.platform}/${app.getVersion()}`
 
@@ -97,7 +97,7 @@ autoUpdater.setFeedURL({ url })
 
 As the final step, check for updates. The example below will check every minute:
 
-```javascript title='main.js'
+```js title='main.js'
 setInterval(() => {
   autoUpdater.checkForUpdates()
 }, 60000)
@@ -113,7 +113,7 @@ Now that you've configured the basic update mechanism for your application, you
 need to ensure that the user will get notified when there's an update. This
 can be achieved using the [autoUpdater API events](../api/auto-updater.md#events):
 
-```javascript title="main.js" @ts-expect-error=[11]
+```js title="main.js" @ts-expect-error=[11]
 autoUpdater.on('update-downloaded', (event, releaseNotes, releaseName) => {
   const dialogOpts = {
     type: 'info',
@@ -134,7 +134,7 @@ Also make sure that errors are
 [being handled](../api/auto-updater.md#event-error). Here's an example
 for logging them to `stderr`:
 
-```javascript title="main.js"
+```js title="main.js"
 autoUpdater.on('error', (message) => {
   console.error('There was a problem updating the application')
   console.error(message)

docs/tutorial/window-customization.md

@@ -14,7 +14,7 @@ that are not a part of the web page.
 To create a frameless window, you need to set `frame` to `false` in the `BrowserWindow`
 constructor.
 
-```javascript title='main.js'
+```js title='main.js'
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow({ frame: false })
 ```
@@ -28,7 +28,7 @@ option in the `BrowserWindow` constructor.
 Applying the `hidden` title bar style results in a hidden title bar and a full-size
 content window.
 
-```javascript title='main.js'
+```js title='main.js'
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow({ titleBarStyle: 'hidden' })
 ```
@@ -44,7 +44,7 @@ The `customButtonsOnHover` title bar style will hide the traffic lights until yo
 over them. This is useful if you want to create custom traffic lights in your HTML but still
 use the native UI to control the window.
 
-```javascript
+```js
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow({ titleBarStyle: 'customButtonsOnHover' })
 ```
@@ -57,7 +57,7 @@ options available.
 Applying `hiddenInset` title bar style will shift the vertical inset of the traffic lights
 by a fixed amount.
 
-```javascript title='main.js'
+```js title='main.js'
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow({ titleBarStyle: 'hiddenInset' })
 ```
@@ -66,7 +66,7 @@ If you need more granular control over the positioning of the traffic lights, yo
 a set of coordinates to the `trafficLightPosition` option in the `BrowserWindow`
 constructor.
 
-```javascript title='main.js'
+```js title='main.js'
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow({
   titleBarStyle: 'hidden',
@@ -80,7 +80,7 @@ You can also show and hide the traffic lights programmatically from the main pro
 The `win.setWindowButtonVisibility` forces traffic lights to be show or hidden depending
 on the value of its boolean parameter.
 
-```javascript title='main.js'
+```js title='main.js'
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow()
 // hides the traffic lights
@@ -106,7 +106,7 @@ The `titleBarOverlay` option accepts two different value formats.
 Specifying `true` on either platform will result in an overlay region with default
 system colors:
 
-```javascript title='main.js'
+```js title='main.js'
 // on macOS or Windows
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow({
@@ -119,7 +119,7 @@ On either platform `titleBarOverlay` can also be an object. On both macOS and Wi
 
 If a color option is not specified, the color will default to its system color for the window control buttons. Similarly, if the height option is not specified it will default to the default height:
 
-```javascript title='main.js'
+```js title='main.js'
 // on Windows
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow({
@@ -140,7 +140,7 @@ const win = new BrowserWindow({
 
 By setting the `transparent` option to `true`, you can make a fully transparent window.
 
-```javascript title='main.js'
+```js title='main.js'
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow({ transparent: true })
 ```
@@ -169,7 +169,7 @@ To create a click-through window, i.e. making the window ignore all mouse
 events, you can call the [win.setIgnoreMouseEvents(ignore)][ignore-mouse-events]
 API:
 
-```javascript title='main.js'
+```js title='main.js'
 const { BrowserWindow } = require('electron')
 const win = new BrowserWindow()
 win.setIgnoreMouseEvents(true)
@@ -182,7 +182,7 @@ meaning that mouse movement events will not be emitted. On Windows and macOS, an
 optional parameter can be used to forward mouse move messages to the web page,
 allowing events such as `mouseleave` to be emitted:
 
-```javascript title='main.js'
+```js title='main.js'
 const { BrowserWindow, ipcMain } = require('electron')
 const path = require('node:path')
 
@@ -198,7 +198,7 @@ ipcMain.on('set-ignore-mouse-events', (event, ignore, options) => {
 })
 ```
 
-```javascript title='preload.js'
+```js title='preload.js'
 window.addEventListener('DOMContentLoaded', () => {
   const el = document.getElementById('clickThroughElement')
   el.addEventListener('mouseenter', () => {

docs/tutorial/windows-taskbar.md

@@ -60,7 +60,7 @@ Starting with a working application from the
 [Quick Start Guide](quick-start.md), update the `main.js` file with the
 following lines:
 
-```javascript
+```js
 const { app } = require('electron')
 
 app.setUserTasks([
@@ -80,7 +80,7 @@ app.setUserTasks([
 To clear your tasks list, you need to call `app.setUserTasks` with an empty
 array in the `main.js` file.
 
-```javascript
+```js
 const { app } = require('electron')
 
 app.setUserTasks([])
@@ -124,7 +124,7 @@ Starting with a working application from the
 [Quick Start Guide](quick-start.md), update the `main.js` file with the
 following lines:
 
-```javascript
+```js
 const { BrowserWindow, nativeImage } = require('electron')
 const path = require('node:path')
 
@@ -149,7 +149,7 @@ win.setThumbarButtons([
 To clear thumbnail toolbar buttons, you need to call
 `BrowserWindow.setThumbarButtons` with an empty array in the `main.js` file.
 
-```javascript
+```js
 const { BrowserWindow } = require('electron')
 
 const win = new BrowserWindow()
@@ -188,7 +188,7 @@ Starting with a working application from the
 [Quick Start Guide](quick-start.md), update the `main.js` file with the
 following lines:
 
-```javascript
+```js
 const { BrowserWindow, nativeImage } = require('electron')
 
 const win = new BrowserWindow()
@@ -217,7 +217,7 @@ Starting with a working application from the
 [Quick Start Guide](quick-start.md), update the `main.js` file with the
 following lines:
 
-```javascript
+```js
 const { BrowserWindow } = require('electron')
 
 const win = new BrowserWindow()

filenames.auto.gni

@@ -67,6 +67,7 @@ auto_filenames = {
     "docs/api/web-frame-main.md",
     "docs/api/web-frame.md",
     "docs/api/web-request.md",
+    "docs/api/web-utils.md",
     "docs/api/webview-tag.md",
     "docs/api/window-open.md",
     "docs/api/structures/bluetooth-device.md",
@@ -151,6 +152,7 @@ auto_filenames = {
     "lib/renderer/api/crash-reporter.ts",
     "lib/renderer/api/ipc-renderer.ts",
     "lib/renderer/api/web-frame.ts",
+    "lib/renderer/api/web-utils.ts",
     "lib/renderer/common-init.ts",
     "lib/renderer/inspector.ts",
     "lib/renderer/ipc-renderer-internal-utils.ts",
@@ -281,6 +283,7 @@ auto_filenames = {
     "lib/renderer/api/ipc-renderer.ts",
     "lib/renderer/api/module-list.ts",
     "lib/renderer/api/web-frame.ts",
+    "lib/renderer/api/web-utils.ts",
     "lib/renderer/common-init.ts",
     "lib/renderer/init.ts",
     "lib/renderer/inspector.ts",
@@ -318,6 +321,7 @@ auto_filenames = {
     "lib/renderer/api/ipc-renderer.ts",
     "lib/renderer/api/module-list.ts",
     "lib/renderer/api/web-frame.ts",
+    "lib/renderer/api/web-utils.ts",
     "lib/renderer/ipc-renderer-internal-utils.ts",
     "lib/renderer/ipc-renderer-internal.ts",
     "lib/worker/init.ts",

filenames.gni

@@ -199,6 +199,8 @@ filenames = {
     "shell/common/language_util_mac.mm",
     "shell/common/mac/main_application_bundle.h",
     "shell/common/mac/main_application_bundle.mm",
+    "shell/common/mac/codesign_util.cc",
+    "shell/common/mac/codesign_util.h",
     "shell/common/node_bindings_mac.cc",
     "shell/common/node_bindings_mac.h",
     "shell/common/platform_util_mac.mm",
@@ -372,8 +374,6 @@ filenames = {
     "shell/browser/electron_download_manager_delegate.h",
     "shell/browser/electron_gpu_client.cc",
     "shell/browser/electron_gpu_client.h",
-    "shell/browser/electron_javascript_dialog_manager.cc",
-    "shell/browser/electron_javascript_dialog_manager.h",
     "shell/browser/electron_navigation_throttle.cc",
     "shell/browser/electron_navigation_throttle.h",
     "shell/browser/electron_permission_manager.cc",
@@ -682,6 +682,8 @@ filenames = {
     "shell/renderer/api/electron_api_spell_check_client.cc",
     "shell/renderer/api/electron_api_spell_check_client.h",
     "shell/renderer/api/electron_api_web_frame.cc",
+    "shell/renderer/api/electron_api_web_utils.cc",
+    "shell/renderer/api/electron_api_web_utils.h",
     "shell/renderer/browser_exposed_renderer_interfaces.cc",
     "shell/renderer/browser_exposed_renderer_interfaces.h",
     "shell/renderer/content_settings_observer.cc",

filenames.libcxx.gni

@@ -818,7 +818,6 @@ libcxx_headers = [
   "//third_party/libc++/src/include/__type_traits/negation.h",
   "//third_party/libc++/src/include/__type_traits/noexcept_move_assign_container.h",
   "//third_party/libc++/src/include/__type_traits/operation_traits.h",
-  "//third_party/libc++/src/include/__type_traits/predicate_traits.h",
   "//third_party/libc++/src/include/__type_traits/promote.h",
   "//third_party/libc++/src/include/__type_traits/rank.h",
   "//third_party/libc++/src/include/__type_traits/remove_all_extents.h",
@@ -1003,6 +1002,7 @@ libcxx_headers = [
   "//third_party/libc++/src/include/string.h",
   "//third_party/libc++/src/include/string_view",
   "//third_party/libc++/src/include/strstream",
+  "//third_party/libc++/src/include/syncstream",
   "//third_party/libc++/src/include/system_error",
   "//third_party/libc++/src/include/tgmath.h",
   "//third_party/libc++/src/include/thread",

js2c_toolchain.gni

@@ -0,0 +1,71 @@
+# Copyright (c) 2023 Microsoft, GmbH
+# Use of this source code is governed by the MIT license that can be
+# found in the LICENSE file.
+
+declare_args() {
+  electron_js2c_toolchain = ""
+}
+
+if (electron_js2c_toolchain == "") {
+  if (current_os == host_os && current_cpu == host_cpu) {
+    # This is not a cross-compile, so build the snapshot with the current
+    # toolchain.
+    electron_js2c_toolchain = current_toolchain
+  } else if (current_os == host_os && current_cpu == "x86" &&
+             host_cpu == "x64") {
+    # This is an x64 -> x86 cross-compile, but x64 hosts can usually run x86
+    # binaries built for the same OS, so build the snapshot with the current
+    # toolchain here, too.
+    electron_js2c_toolchain = current_toolchain
+  } else if (current_os == host_os && host_cpu == "arm64" &&
+             current_cpu == "arm") {
+    # Trying to compile 32-bit arm on arm64. Good luck!
+    electron_js2c_toolchain = current_toolchain
+  } else if (host_cpu == current_cpu) {
+    # Cross-build from same ISA on one OS to another. For example:
+    # * targeting win/x64 on a linux/x64 host
+    # * targeting win/arm64 on a mac/arm64 host
+    electron_js2c_toolchain = host_toolchain
+  } else if (host_cpu == "arm64" && current_cpu == "x64") {
+    # Cross-build from arm64 to intel (likely on an Apple Silicon mac).
+    electron_js2c_toolchain =
+        "//build/toolchain/${host_os}:clang_arm64_v8_$current_cpu"
+  } else if (host_cpu == "x64") {
+    # This is a cross-compile from an x64 host to either a non-Intel target
+    # cpu or to 32-bit x86 on a different target OS.
+
+    assert(current_cpu != "x64", "handled by host_cpu == current_cpu branch")
+    if (current_cpu == "x86") {
+      _cpus = current_cpu
+    } else if (current_cpu == "arm64") {
+      if (is_win) {
+        # set _cpus to blank for Windows ARM64 so host_toolchain could be
+        # selected as snapshot toolchain later.
+        _cpus = ""
+      } else {
+        _cpus = "x64_v8_${current_cpu}"
+      }
+    } else if (current_cpu == "arm") {
+      _cpus = "x86_v8_${current_cpu}"
+    } else {
+      # This branch should not be reached; leave _cpus blank so the assert
+      # below will fail.
+      _cpus = ""
+    }
+
+    if (_cpus != "") {
+      electron_js2c_toolchain = "//build/toolchain/${host_os}:clang_${_cpus}"
+    } else if (is_win && current_cpu == "arm64") {
+      # cross compile Windows arm64 with host toolchain.
+      electron_js2c_toolchain = host_toolchain
+    }
+  } else if (host_cpu == "arm64" && current_cpu == "arm64" &&
+             host_os == "mac") {
+    # cross compile iOS arm64 with host_toolchain
+    electron_js2c_toolchain = host_toolchain
+  }
+}
+
+assert(electron_js2c_toolchain != "",
+       "Do not know how to build js2c for $current_toolchain " +
+           "on $host_os $host_cpu")

lib/browser/api/web-contents.ts

@@ -1,5 +1,5 @@
-import { app, ipcMain, session, webFrameMain } from 'electron/main';
-import type { BrowserWindowConstructorOptions, LoadURLOptions } from 'electron/main';
+import { app, ipcMain, session, webFrameMain, dialog } from 'electron/main';
+import type { BrowserWindowConstructorOptions, LoadURLOptions, MessageBoxOptions, WebFrameMain } from 'electron/main';
 
 import * as url from 'url';
 import * as path from 'path';
@@ -729,6 +729,56 @@ WebContents.prototype._init = function () {
     }
   });
 
+  const originCounts = new Map<string, number>();
+  const openDialogs = new Set<AbortController>();
+  this.on('-run-dialog' as any, async (info: {frame: WebFrameMain, dialogType: 'prompt' | 'confirm' | 'alert', messageText: string, defaultPromptText: string}, callback: (success: boolean, user_input: string) => void) => {
+    const originUrl = new URL(info.frame.url);
+    const origin = originUrl.protocol === 'file:' ? originUrl.href : originUrl.origin;
+    if ((originCounts.get(origin) ?? 0) < 0) return callback(false, '');
+
+    const prefs = this.getLastWebPreferences();
+    if (!prefs || prefs.disableDialogs) return callback(false, '');
+
+    // We don't support prompt() for some reason :)
+    if (info.dialogType === 'prompt') return callback(false, '');
+
+    originCounts.set(origin, (originCounts.get(origin) ?? 0) + 1);
+
+    // TODO: translate?
+    const checkbox = originCounts.get(origin)! > 1 && prefs.safeDialogs ? prefs.safeDialogsMessage || 'Prevent this app from creating additional dialogs' : '';
+    const parent = this.getOwnerBrowserWindow();
+    const abortController = new AbortController();
+    const options: MessageBoxOptions = {
+      message: info.messageText,
+      checkboxLabel: checkbox,
+      signal: abortController.signal,
+      ...(info.dialogType === 'confirm') ? {
+        buttons: ['OK', 'Cancel'],
+        defaultId: 0,
+        cancelId: 1
+      } : {
+        buttons: ['OK'],
+        defaultId: -1, // No default button
+        cancelId: 0
+      }
+    };
+    openDialogs.add(abortController);
+    const promise = parent && !prefs.offscreen ? dialog.showMessageBox(parent, options) : dialog.showMessageBox(options);
+    try {
+      const result = await promise;
+      if (abortController.signal.aborted) return;
+      if (result.checkboxChecked) originCounts.set(origin, -1);
+      return callback(result.response === 0, '');
+    } finally {
+      openDialogs.delete(abortController);
+    }
+  });
+
+  this.on('-cancel-dialogs' as any, () => {
+    for (const controller of openDialogs) { controller.abort(); }
+    openDialogs.clear();
+  });
+
   app.emit('web-contents-created', { sender: this, preventDefault () {}, get defaultPrevented () { return false; } }, this);
 
   // Properties

lib/renderer/api/module-list.ts

@@ -4,5 +4,6 @@ export const rendererModuleList: ElectronInternal.ModuleEntry[] = [
   { name: 'contextBridge', loader: () => require('./context-bridge') },
   { name: 'crashReporter', loader: () => require('./crash-reporter') },
   { name: 'ipcRenderer', loader: () => require('./ipc-renderer') },
-  { name: 'webFrame', loader: () => require('./web-frame') }
+  { name: 'webFrame', loader: () => require('./web-frame') },
+  { name: 'webUtils', loader: () => require('./web-utils') }
 ];

lib/renderer/api/web-utils.ts

@@ -0,0 +1,3 @@
+const binding = process._linkedBinding('electron_renderer_web_utils');
+
+export const getPathForFile = binding.getPathForFile;

lib/renderer/init.ts

@@ -58,7 +58,7 @@ require('@electron/internal/renderer/common-init');
 
 if (nodeIntegration) {
   // Export node bindings to global.
-  const { makeRequireFunction } = __non_webpack_require__('internal/modules/cjs/helpers');
+  const { makeRequireFunction } = __non_webpack_require__('internal/modules/helpers');
   global.module = new Module('electron/js2c/renderer_init');
   global.require = makeRequireFunction(global.module);
 

lib/sandboxed_renderer/api/module-list.ts

@@ -18,5 +18,9 @@ export const moduleList: ElectronInternal.ModuleEntry[] = [
   {
     name: 'webFrame',
     loader: () => require('@electron/internal/renderer/api/web-frame')
+  },
+  {
+    name: 'webUtils',
+    loader: () => require('@electron/internal/renderer/api/web-utils')
   }
 ];

lib/worker/init.ts

@@ -16,7 +16,7 @@ require('@electron/internal/common/init');
 const { hasSwitch, getSwitchValue } = process._linkedBinding('electron_common_command_line');
 
 // Export node bindings to global.
-const { makeRequireFunction } = __non_webpack_require__('internal/modules/cjs/helpers');
+const { makeRequireFunction } = __non_webpack_require__('internal/modules/helpers');
 global.module = new Module('electron/js2c/worker_init');
 global.require = makeRequireFunction(global.module);
 

npm/package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@electron/get": "^2.0.0",
-    "@types/node": "^18.11.18",
+    "@types/node": "^20.9.0",
     "extract-zip": "^2.0.1"
   },
   "engines": {

package.json

@@ -10,7 +10,7 @@
     "@electron/fiddle-core": "^1.0.4",
     "@electron/github-app-auth": "^2.0.0",
     "@electron/lint-roller": "^1.9.0",
-    "@electron/typescript-definitions": "^8.15.1",
+    "@electron/typescript-definitions": "^8.15.2",
     "@octokit/rest": "^19.0.7",
     "@primer/octicons": "^10.0.0",
     "@types/basic-auth": "^1.1.3",
@@ -23,7 +23,7 @@
     "@types/klaw": "^3.0.1",
     "@types/minimist": "^1.2.0",
     "@types/mocha": "^7.0.2",
-    "@types/node": "^18.11.18",
+    "@types/node": "^20.9.0",
     "@types/semver": "^7.3.3",
     "@types/send": "^0.14.5",
     "@types/split": "^1.0.0",
@@ -89,10 +89,10 @@
     "lint:objc": "node ./script/lint.js --objc",
     "lint:py": "node ./script/lint.js --py",
     "lint:gn": "node ./script/lint.js --gn",
-    "lint:docs": "remark docs -qf && npm run lint:js-in-markdown && npm run create-typescript-definitions && npm run lint:ts-check-js-in-markdown && npm run lint:docs-fiddles && npm run lint:docs-relative-links && npm run lint:markdownlint",
+    "lint:docs": "remark docs -qf && npm run lint:js-in-markdown && npm run create-typescript-definitions && npm run lint:ts-check-js-in-markdown && npm run lint:docs-fiddles && npm run lint:docs-relative-links && npm run lint:markdown",
     "lint:docs-fiddles": "standard \"docs/fiddles/**/*.js\"",
     "lint:docs-relative-links": "electron-lint-markdown-links --root docs \"**/*.md\"",
-    "lint:markdownlint": "electron-markdownlint \"*.md\" \"docs/**/*.md\"",
+    "lint:markdown": "node ./script/lint.js --md",
     "lint:ts-check-js-in-markdown": "electron-lint-markdown-ts-check --root docs \"**/*.md\" --ignore \"breaking-changes.md\"",
     "lint:js-in-markdown": "electron-lint-markdown-standard --root docs \"**/*.md\"",
     "create-api-json": "node script/create-api-json.js",

patches/chromium/.patches

@@ -16,14 +16,7 @@ pepper_plugin_support.patch
 gtk_visibility.patch
 resource_file_conflict.patch
 scroll_bounce_flag.patch
-mas_blink_no_private_api.patch
-mas_no_private_api.patch
-mas-cgdisplayusesforcetogray.patch
-mas_disable_remote_layer.patch
-mas_disable_remote_accessibility.patch
-mas_disable_custom_window_frame.patch
-mas_avoid_usage_of_private_macos_apis.patch
-mas_use_public_apis_to_determine_if_a_font_is_a_system_font.patch
+mas_avoid_private_macos_api_usage.patch.patch
 add_didinstallconditionalfeatures.patch
 desktop_media_list.patch
 proxy_config_monitor.patch
@@ -73,7 +66,6 @@ fix_export_zlib_symbols.patch
 web_contents.patch
 webview_fullscreen.patch
 disable_unload_metrics.patch
-fix_add_check_for_sandbox_then_result.patch
 extend_apply_webpreferences.patch
 build_libc_as_static_library.patch
 build_do_not_depend_on_packed_resource_integrity.patch
@@ -111,10 +103,8 @@ fix_on-screen-keyboard_hides_on_input_blur_in_webview.patch
 preconnect_manager.patch
 fix_remove_caption-removing_style_call.patch
 build_allow_electron_to_use_exec_script.patch
-build_only_use_the_mas_build_config_in_the_required_components.patch
 chore_introduce_blocking_api_for_electron.patch
 chore_patch_out_partition_attribute_dcheck_for_webviews.patch
-expose_v8initializer_codegenerationcheckcallbackinmainthread.patch
 chore_patch_out_profile_methods_in_profile_selections_cc.patch
 add_gin_converter_support_for_arraybufferview.patch
 chore_defer_usb_service_getdevices_request_until_usb_service_is.patch
@@ -130,8 +120,12 @@ fix_harden_blink_scriptstate_maybefrom.patch
 chore_add_buildflag_guard_around_new_include.patch
 fix_use_delegated_generic_capturer_when_available.patch
 build_remove_ent_content_analysis_assert.patch
-fix_activate_background_material_on_windows.patch
+expose_webblob_path_to_allow_embedders_to_get_file_paths.patch
 fix_move_autopipsettingshelper_behind_branding_buildflag.patch
 revert_remove_the_allowaggressivethrottlingwithwebsocket_feature.patch
+fix_activate_background_material_on_windows.patch
 feat_allow_passing_of_objecttemplate_to_objecttemplatebuilder.patch
 chore_remove_check_is_test_on_script_injection_tracker.patch
+fix_restore_original_resize_performance_on_macos.patch
+fix_font_flooding_in_dev_tools.patch
+feat_allow_code_cache_in_custom_schemes.patch

patches/chromium/add_contentgpuclient_precreatemessageloop_callback.patch

@@ -10,10 +10,10 @@ Allows Electron to restore WER when ELECTRON_DEFAULT_ERROR_MODE is set.
 This should be upstreamed.
 
 diff --git a/content/gpu/gpu_main.cc b/content/gpu/gpu_main.cc
-index bfb0a24b2a57b4c75f64e0853700174c11df8d48..c9c40aca92fd7e0dde0da62d34120edb8479331a 100644
+index 8d9c853f7fe861ed7ff790fa2c02706b3a2c7264..fa9717eeb7a6f46aebf14d1fc00e2b19741b55a2 100644
 --- a/content/gpu/gpu_main.cc
 +++ b/content/gpu/gpu_main.cc
-@@ -262,6 +262,10 @@ int GpuMain(MainFunctionParams parameters) {
+@@ -264,6 +264,10 @@ int GpuMain(MainFunctionParams parameters) {
    // to the GpuProcessHost once the GpuServiceImpl has started.
    viz::GpuServiceImpl::InstallPreInitializeLogHandler();
  
@@ -24,7 +24,7 @@ index bfb0a24b2a57b4c75f64e0853700174c11df8d48..c9c40aca92fd7e0dde0da62d34120edb
    // We are experiencing what appear to be memory-stomp issues in the GPU
    // process. These issues seem to be impacting the task executor and listeners
    // registered to it. Create the task executor on the heap to guard against
-@@ -358,7 +362,6 @@ int GpuMain(MainFunctionParams parameters) {
+@@ -360,7 +364,6 @@ int GpuMain(MainFunctionParams parameters) {
        const_cast<base::CommandLine*>(&command_line), gpu_preferences);
    const bool dead_on_arrival = !init_success;
  

patches/chromium/add_didinstallconditionalfeatures.patch

@@ -23,10 +23,10 @@ index c302f3e672cea9b73591048cf581f3e81078d5cb..eb1d1b0b59e687b996e76c205a871234
                                          int32_t world_id) {}
    virtual void DidClearWindowObject() {}
 diff --git a/content/renderer/render_frame_impl.cc b/content/renderer/render_frame_impl.cc
-index d20115a7c92f2cd516d40e456c82b23c9dc07a97..e124b9c231dd77d0d646f50cce2a30d92dbc480a 100644
+index 9bea02ba22dc601e57406513ed02c8704bf587de..ccd3c27b7537f9c1adce9d32137d0e596be7c545 100644
 --- a/content/renderer/render_frame_impl.cc
 +++ b/content/renderer/render_frame_impl.cc
-@@ -4560,6 +4560,12 @@ void RenderFrameImpl::DidCreateScriptContext(v8::Local<v8::Context> context,
+@@ -4565,6 +4565,12 @@ void RenderFrameImpl::DidCreateScriptContext(v8::Local<v8::Context> context,
      observer.DidCreateScriptContext(context, world_id);
  }
  
@@ -40,10 +40,10 @@ index d20115a7c92f2cd516d40e456c82b23c9dc07a97..e124b9c231dd77d0d646f50cce2a30d9
                                                 int world_id) {
    for (auto& observer : observers_)
 diff --git a/content/renderer/render_frame_impl.h b/content/renderer/render_frame_impl.h
-index 2a675b88da91dff73cec17c4587ea46a5296d67b..3fc435922f105c752cacd5d91dcf7ed0b9fc598c 100644
+index 6fa0c635d1080cf2d7dbc0c7bd2c9bb5c083b986..dee1c7e60a998fd1947b4ff542872de0eb8d87cd 100644
 --- a/content/renderer/render_frame_impl.h
 +++ b/content/renderer/render_frame_impl.h
-@@ -618,6 +618,8 @@ class CONTENT_EXPORT RenderFrameImpl
+@@ -621,6 +621,8 @@ class CONTENT_EXPORT RenderFrameImpl
    void DidObserveLayoutShift(double score, bool after_input_or_scroll) override;
    void DidCreateScriptContext(v8::Local<v8::Context> context,
                                int world_id) override;
@@ -53,10 +53,10 @@ index 2a675b88da91dff73cec17c4587ea46a5296d67b..3fc435922f105c752cacd5d91dcf7ed0
                                  int world_id) override;
    void DidChangeScrollOffset() override;
 diff --git a/third_party/blink/public/web/web_local_frame_client.h b/third_party/blink/public/web/web_local_frame_client.h
-index 64d8aca52be5e63c56fea2cb2a835761df11e098..6d3c66f3b08a625c4bcfffc3f2caf2d67f9ca258 100644
+index ac82f8a9c14546d09e0181da93fbc361dc09dd78..94e177829c75ba3f4b33b4ca0802173e7faa1b92 100644
 --- a/third_party/blink/public/web/web_local_frame_client.h
 +++ b/third_party/blink/public/web/web_local_frame_client.h
-@@ -620,6 +620,9 @@ class BLINK_EXPORT WebLocalFrameClient {
+@@ -619,6 +619,9 @@ class BLINK_EXPORT WebLocalFrameClient {
    virtual void DidCreateScriptContext(v8::Local<v8::Context>,
                                        int32_t world_id) {}
  
@@ -67,7 +67,7 @@ index 64d8aca52be5e63c56fea2cb2a835761df11e098..6d3c66f3b08a625c4bcfffc3f2caf2d6
    virtual void WillReleaseScriptContext(v8::Local<v8::Context>,
                                          int32_t world_id) {}
 diff --git a/third_party/blink/renderer/bindings/core/v8/local_window_proxy.cc b/third_party/blink/renderer/bindings/core/v8/local_window_proxy.cc
-index 5030619779b7bcd67923026991bb44d926d81e1a..1eea33740fcdca49e094ad7ad00cfda8938f96c1 100644
+index e22ccf32a9e3c596e44506244f284f1c2be86762..65ff494dc7c5676fbb534c1dd1854010c507a1eb 100644
 --- a/third_party/blink/renderer/bindings/core/v8/local_window_proxy.cc
 +++ b/third_party/blink/renderer/bindings/core/v8/local_window_proxy.cc
 @@ -202,6 +202,7 @@ void LocalWindowProxy::Initialize() {
@@ -79,10 +79,10 @@ index 5030619779b7bcd67923026991bb44d926d81e1a..1eea33740fcdca49e094ad7ad00cfda8
    if (World().IsMainWorld()) {
      probe::DidCreateMainWorldContext(GetFrame());
 diff --git a/third_party/blink/renderer/core/frame/local_frame_client.h b/third_party/blink/renderer/core/frame/local_frame_client.h
-index c0fa11ea9ec9f35fe7ee1c36a8ea618cc0ccaea0..cd8a420bb51be71996d697b49ccf51f2bcce2c4c 100644
+index e982a11fc5412a9dce2ecde8af2fdaab4b2d56e7..a2169ba91e8856667b300672ed1a64841bf9c3a6 100644
 --- a/third_party/blink/renderer/core/frame/local_frame_client.h
 +++ b/third_party/blink/renderer/core/frame/local_frame_client.h
-@@ -320,6 +320,8 @@ class CORE_EXPORT LocalFrameClient : public FrameClient {
+@@ -302,6 +302,8 @@ class CORE_EXPORT LocalFrameClient : public FrameClient {
  
    virtual void DidCreateScriptContext(v8::Local<v8::Context>,
                                        int32_t world_id) = 0;
@@ -92,7 +92,7 @@ index c0fa11ea9ec9f35fe7ee1c36a8ea618cc0ccaea0..cd8a420bb51be71996d697b49ccf51f2
                                          int32_t world_id) = 0;
    virtual bool AllowScriptExtensions() = 0;
 diff --git a/third_party/blink/renderer/core/frame/local_frame_client_impl.cc b/third_party/blink/renderer/core/frame/local_frame_client_impl.cc
-index 5dd3383cfddf4edc050ef5b37e98452f3476d7a9..25942059009f735a1d6b52fc9c1033d26c893306 100644
+index 150f4280ec4c3829c14da8166ab2a4e9c043d551..b9dd77befa57677fa2b1f507c90cf0bedd09eafa 100644
 --- a/third_party/blink/renderer/core/frame/local_frame_client_impl.cc
 +++ b/third_party/blink/renderer/core/frame/local_frame_client_impl.cc
 @@ -283,6 +283,13 @@ void LocalFrameClientImpl::DidCreateScriptContext(
@@ -110,7 +110,7 @@ index 5dd3383cfddf4edc050ef5b37e98452f3476d7a9..25942059009f735a1d6b52fc9c1033d2
      v8::Local<v8::Context> context,
      int32_t world_id) {
 diff --git a/third_party/blink/renderer/core/frame/local_frame_client_impl.h b/third_party/blink/renderer/core/frame/local_frame_client_impl.h
-index 2dd6df6727828335ca4462b470df4afd8dd29539..91ee3bf31ba43e650cacd2f781a3a8103d216570 100644
+index 19b6d04a1dc5ae33fa1ede248fd580a4eb95ede6..2b238811b634f449a90ee7cf5d19c2e55343eb10 100644
 --- a/third_party/blink/renderer/core/frame/local_frame_client_impl.h
 +++ b/third_party/blink/renderer/core/frame/local_frame_client_impl.h
 @@ -84,6 +84,8 @@ class CORE_EXPORT LocalFrameClientImpl final : public LocalFrameClient {
@@ -123,10 +123,10 @@ index 2dd6df6727828335ca4462b470df4afd8dd29539..91ee3bf31ba43e650cacd2f781a3a810
                                  int32_t world_id) override;
  
 diff --git a/third_party/blink/renderer/core/loader/empty_clients.h b/third_party/blink/renderer/core/loader/empty_clients.h
-index e0c700c76f360b24d7ffa4edfe16dc855e4fd8b1..265f3c590062009ec98be231f9e1f496c39370e0 100644
+index 97bd9953e14088517a80b44c244f2bacf3b699bb..e67b3126f1082ecd2b6867ae01ab30d4c6ea41c5 100644
 --- a/third_party/blink/renderer/core/loader/empty_clients.h
 +++ b/third_party/blink/renderer/core/loader/empty_clients.h
-@@ -408,6 +408,8 @@ class CORE_EXPORT EmptyLocalFrameClient : public LocalFrameClient {
+@@ -406,6 +406,8 @@ class CORE_EXPORT EmptyLocalFrameClient : public LocalFrameClient {
  
    void DidCreateScriptContext(v8::Local<v8::Context>,
                                int32_t world_id) override {}