Compare commits

..

53 Commits

Author SHA1 Message Date
John Kleinschmidt
3e29e2523a Revert "6582142: Use content::Create*Capturer in DesktopCaptureDevice."
This reverts commit e0bbf31843.
2025-06-11 17:52:23 -04:00
John Kleinschmidt
970477f33b Revert "Use content::Create*Capturer in DesktopCaptureDevice." 2025-06-11 17:51:59 -04:00
John Kleinschmidt
c6a4706a54 actually remove patches 2025-06-11 16:08:04 -04:00
John Kleinschmidt
e7c520afdd temporarily revert webrtc patches to see if this helps 2025-06-11 15:21:22 -04:00
John Kleinschmidt
eba8ebe349 fixup patch 2025-06-11 15:20:03 -04:00
John Kleinschmidt
19acbffea3 chore: debug dcheck error in webrtc on linux 2025-06-11 14:43:05 -04:00
John Kleinschmidt
f78f177030 test: more cleanup of api-desktop-capturer-spec.ts 2025-06-11 13:02:03 -04:00
John Kleinschmidt
51f0fdd891 test: cleanup api-desktop-capturer-spec.ts 2025-06-10 16:08:20 -04:00
John Kleinschmidt
88befe082d Revert "Reland "Roll libc++ from a01c02c9d4ac to a9cc573e7c59"
This reverts commit 33e1436a0c.
2025-06-10 12:14:54 -04:00
John Kleinschmidt
65d16e20e5 tls: remove deprecated tls.createSecurePair and SecurePair
https://github.com/nodejs/node/pull/57361
2025-06-09 19:42:31 -04:00
John Kleinschmidt
e91e3894e6 revert Don't use static variable for UseExternalPopupMenus 2025-06-09 17:56:33 -04:00
John Kleinschmidt
b56aaabd88 chore: update patches 2025-06-09 17:09:38 -04:00
John Kleinschmidt
a746464b16 chore: bump chromium in DEPS to 139.0.7219.0 2025-06-09 17:09:24 -04:00
John Kleinschmidt
33e1436a0c Reland "Roll libc++ from a01c02c9d4ac to a9cc573e7c59
https://chromium-review.googlesource.com/c/chromium/src/+/6607589
2025-06-09 16:33:44 -04:00
John Kleinschmidt
b946020f1d Don't use static variable for UseExternalPopupMenus
https://chromium-review.googlesource.com/c/chromium/src/+/6534657
2025-06-09 13:57:05 -04:00
John Kleinschmidt
57d0945c4e chore: update patches 2025-06-09 10:14:29 -04:00
electron-roller[bot]
8ab66b2ab0 chore: bump chromium in DEPS to 139.0.7228.0 2025-06-09 09:43:36 -04:00
electron-roller[bot]
c8488312f3 chore: bump chromium in DEPS to 139.0.7226.0 2025-06-09 09:43:35 -04:00
electron-roller[bot]
df5baf313b chore: bump chromium in DEPS to 139.0.7224.0 2025-06-09 09:43:35 -04:00
electron-roller[bot]
76ccbcfada chore: bump chromium in DEPS to 139.0.7222.0 2025-06-09 09:43:35 -04:00
clavin
983de0bc5e 6543986: Mac: decouple deserializing and applying sandbox policy
https://chromium-review.googlesource.com/c/chromium/src/+/6543986

The DecodeVarInt and DecodeString functions look benign from a MAS perspective. I suspect they were patched out to avoid "unused function" errors. Their complements for encoding are unpatched, supporting this idea.

The code that uses these functions was refactored out of the section that we patch out. Instead of patching out that new function, I decided to treat it the same as the serialization function that is unpatched.
2025-06-09 09:43:35 -04:00
clavin
880a670f1a chore: update patches
Minor changes due to:

6613978: pwa: let events fall through in the transparent area of TopContainerView | https://chromium-review.googlesource.com/c/chromium/src/+/6613978
6614778: Refactor auto pip tab observer for Android support | https://chromium-review.googlesource.com/c/chromium/src/+/6614778
2025-06-09 09:43:35 -04:00
electron-roller[bot]
c07a4f64d3 chore: bump chromium in DEPS to 139.0.7220.0 2025-06-09 09:43:35 -04:00
clavin
32e75651c1 fixup! 6606232: [views] Remove DesktopWindowTreeHostWin::window_enlargement_ https://chromium-review.googlesource.com/c/chromium/src/+/6606232 2025-06-09 09:43:35 -04:00
clavin
0385b5c85e chore: update CI build-tools commit target for macOS SDK 15.4
The following change uses an API that was added in the macOS 15.4 SDK. Support for that SDK version was added later than the current build-tools commit target.

6575804: Use a quick-and-dirty solution to avoid glitching with paste-and-go | https://chromium-review.googlesource.com/c/chromium/src/+/6575804

See: https://developer.apple.com/documentation/appkit/nspasteboard/accessbehavior-swift.enum?language=objc
2025-06-09 09:43:35 -04:00
clavin
2239c8f3a6 chore: update libcxx filenames 2025-06-09 09:43:35 -04:00
clavin
4bdfb1a910 chore: add include for base::SingleThreadTaskRunner
Not sure what change caused this, I expect it would be a removed include somewhere else, but it's likely not important to track down.
2025-06-09 09:43:35 -04:00
clavin
4155dedaa0 6579732: Two minor API "quality of life" cleanups in OSCrypt Async
https://chromium-review.googlesource.com/c/chromium/src/+/6579732
2025-06-09 09:43:35 -04:00
clavin
e0bbf31843 6582142: Use content::Create*Capturer in DesktopCaptureDevice.
https://chromium-review.googlesource.com/c/chromium/src/+/6582142
2025-06-09 09:43:35 -04:00
clavin
45a4de6a85 add squirrel.mac patch for removed function
This was triggered by the macOS 12.0 deployment upgrade change.

See: https://developer.apple.com/documentation/coreservices/1444079-uttypeconformsto?language=objc
2025-06-09 09:43:34 -04:00
clavin
89c51aa1c7 6606232: [views] Remove DesktopWindowTreeHostWin::window_enlargement_
https://chromium-review.googlesource.com/c/chromium/src/+/6606232

|NativeWindow::GetContentMinimumSize| and |NativeWindow::GetContentMaximumSize| may be good opportunities for a refactor now.
2025-06-09 09:43:34 -04:00
clavin
b623043447 6594615: Change Chromium's deployment target to macOS 12
https://chromium-review.googlesource.com/c/chromium/src/+/6594615

Updated the assertion message to match the docs structure now too. I removed the callout to the supported versions doc because it has moved and doesn't contain minimum platform version information.
2025-06-09 09:43:34 -04:00
clavin
ec8020d4b5 chore: update patches 2025-06-09 09:43:34 -04:00
electron-roller[bot]
458195023b chore: bump chromium in DEPS to 139.0.7219.0 2025-06-09 09:43:34 -04:00
clavin
5adc2496ce chore: update patches
fix_use_delegated_generic_capturer_when_available.patch was updated to handle a small change:
6582142: Use content::Create*Capturer in DesktopCaptureDevice. | https://chromium-review.googlesource.com/c/chromium/src/+/6582142
2025-06-09 09:43:34 -04:00
electron-roller[bot]
f753908b28 chore: bump chromium in DEPS to 139.0.7218.0 2025-06-09 09:34:17 -04:00
electron-roller[bot]
1007257196 chore: bump chromium in DEPS to 139.0.7217.0 2025-06-09 09:34:17 -04:00
deepak1556
4b170e87a9 build: disable libcxx modules for rbe 2025-06-09 09:34:17 -04:00
Samuel Maddock
e9047f4ee9 [PDF Ink Signatures] Support PdfAnnotationsEnabled policy
https://chromium-review.googlesource.com/c/chromium/src/+/6558970
2025-06-09 09:34:17 -04:00
Samuel Maddock
fd49d1ec43 6568811: Add FunctionCall structured metrics event for DevTools
Refs https://chromium-review.googlesource.com/c/chromium/src/+/6568811
2025-06-09 09:34:17 -04:00
Samuel Maddock
bd980c9801 6577970: Remove superfluous includes for base/strings/stringprintf.h in headers
Refs https://chromium-review.googlesource.com/c/chromium/src/+/6577970
2025-06-09 09:34:17 -04:00
Samuel Maddock
a0e753a8fe fixup! 6566111: Change UtilityProcessHost to manage its instance internally Refs https://chromium-review.googlesource.com/c/chromium/src/+/6566111 2025-06-09 09:34:17 -04:00
Samuel Maddock
8ef05bfa42 chore: update remaining patches 2025-06-09 09:34:16 -04:00
Samuel Maddock
ea00207582 chore: update chromium patches 2025-06-09 09:34:16 -04:00
Samuel Maddock
6ead745422 6579713: Remove base::NotFatalUntil::M130 usage
6566111: Change UtilityProcessHost to manage its instance internally
Refs
https://chromium-review.googlesource.com/c/chromium/src/+/6579713
https://chromium-review.googlesource.com/c/chromium/src/+/6566111
2025-06-09 09:34:16 -04:00
Samuel Maddock
95bf5ca402 6565918: Validate path is valid UTF8 in SelectFileDialogLinuxPortal
Refs https://chromium-review.googlesource.com/c/chromium/src/+/6565918
2025-06-09 09:34:16 -04:00
Samuel Maddock
8b051a91c2 6550237: Rename ReconnectEventObserver to ConnectionChangeObserverClient
Refs https://chromium-review.googlesource.com/c/chromium/src/+/6550237
2025-06-09 09:34:16 -04:00
Samuel Maddock
abe3c1e140 6566111: Change UtilityProcessHost to manage its instance internally
Refs https://chromium-review.googlesource.com/c/chromium/src/+/6566111
2025-06-09 09:34:16 -04:00
Samuel Maddock
9c0150168a 6572556: Move LogMessageManager out of gpu_service_impl.cc.
Refs https://chromium-review.googlesource.com/c/chromium/src/+/6572556
2025-06-09 09:34:16 -04:00
Samuel Maddock
4414f5eaeb 6505716: guest-contents: Add components/guest_contents
Refs https://chromium-review.googlesource.com/c/chromium/src/+/6505716
2025-06-09 09:34:16 -04:00
Samuel Maddock
6044b9b4eb 6580079: Reland 'Remove the third-party blocking feature'
Refs https://chromium-review.googlesource.com/c/chromium/src/+/6580079
2025-06-09 09:34:16 -04:00
Samuel Maddock
a025dd1cc7 6543986: Mac: decouple deserializing and applying sandbox policy
Refs https://chromium-review.googlesource.com/c/chromium/src/+/6543986
2025-06-09 09:34:16 -04:00
electron-roller[bot]
292972385b chore: bump chromium in DEPS to 139.0.7205.0 2025-06-09 09:34:16 -04:00
512 changed files with 5539 additions and 10772 deletions

View File

@@ -58,13 +58,13 @@ if [ ! -f $buildtools/configs/evm.testing.json ]; then
},
\"\$schema\": \"file:///home/builduser/.electron_build_tools/evm-config.schema.json\",
\"configValidationLevel\": \"strict\",
\"remoteBuild\": \"reclient\",
\"preserveSDK\": 5
\"reclient\": \"$1\",
\"preserveXcode\": 5
}
" >$buildtools/configs/evm.testing.json
}
write_config
write_config remote_exec
e use testing
else

View File

@@ -58,16 +58,6 @@ body:
label: Last Known Working Electron version
description: What is the last version of Electron this worked in, if applicable?
placeholder: 16.0.0
- type: dropdown
attributes:
label: Does the issue also appear in Chromium / Google Chrome?
description: If it does, please report the issue in the [Chromium issue tracker](https://issues.chromium.org/issues), not against Electron. Electron will inherit the fix once Chromium resolves the issue.
options:
- I don't know how to test
- "Yes"
- "No"
validations:
required: true
- type: textarea
attributes:
label: Expected Behavior

View File

@@ -38,12 +38,6 @@ runs:
run: |
GN_APPENDED_ARGS="$GN_EXTRA_ARGS target_cpu=\"x64\" v8_snapshot_toolchain=\"//build/toolchain/mac:clang_x64\""
echo "GN_EXTRA_ARGS=$GN_APPENDED_ARGS" >> $GITHUB_ENV
- name: Set GN_EXTRA_ARGS for Windows
shell: bash
if: ${{inputs.target-arch != 'x64' && inputs.target-platform == 'win' }}
run: |
GN_APPENDED_ARGS="$GN_EXTRA_ARGS target_cpu=\"${{ inputs.target-arch }}\""
echo "GN_EXTRA_ARGS=$GN_APPENDED_ARGS" >> $GITHUB_ENV
- name: Add Clang problem matcher
shell: bash
run: echo "::add-matcher::src/electron/.github/problem-matchers/clang.json"
@@ -190,8 +184,8 @@ runs:
electron/script/zip-symbols.py -b $BUILD_PATH
fi
- name: Generate FFMpeg ${{ inputs.step-suffix }}
if: ${{ inputs.is-release == 'true' }}
shell: bash
if: ${{ inputs.is-release == 'true' }}
run: |
cd src
gn gen out/ffmpeg --args="import(\"//electron/build/args/ffmpeg.gn\") use_remoteexec=true $GN_EXTRA_ARGS"

View File

@@ -43,7 +43,7 @@ runs:
curl --unix-socket /var/run/sas/sas.sock --fail "http://foo/$CACHE_FILE?platform=${{ inputs.target-platform }}" > sas-token
- name: Save SAS Key
if: ${{ inputs.generate-sas-token == 'true' }}
uses: actions/cache/save@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3
uses: actions/cache/save@d4323d4df104b026a6aa633fdb11d772146be0bf
with:
path: sas-token
key: sas-key-${{ inputs.target-platform }}-${{ github.run_number }}-${{ github.run_attempt }}
@@ -117,7 +117,12 @@ runs:
git update-index --refresh || true
if ! git diff-index --quiet HEAD --; then
# There are changes to the patches. Make a git commit with the updated patches
if node ./script/patch-up.js; then
git add patches
GIT_COMMITTER_NAME="PatchUp" GIT_COMMITTER_EMAIL="73610968+patchup[bot]@users.noreply.github.com" git commit -m "chore: update patches" --author="PatchUp <73610968+patchup[bot]@users.noreply.github.com>"
# Export it
mkdir -p ../../patches
git format-patch -1 --stdout --keep-subject --no-stat --full-index > ../../patches/update-patches.patch
if node ./script/push-patch.js; then
echo
echo "======================================================================"
echo "Changes to the patches when applying, we have auto-pushed the diff to the current branch"
@@ -125,11 +130,6 @@ runs:
echo "======================================================================"
exit 1
else
git add patches
GIT_COMMITTER_NAME="PatchUp" GIT_COMMITTER_EMAIL="73610968+patchup[bot]@users.noreply.github.com" git commit -m "chore: update patches" --author="PatchUp <73610968+patchup[bot]@users.noreply.github.com>"
# Export it
mkdir -p ../../patches
git format-patch -1 --stdout --keep-subject --no-stat --full-index > ../../patches/update-patches.patch
echo
echo "======================================================================"
echo "There were changes to the patches when applying."

View File

@@ -19,13 +19,11 @@ inputs:
runs:
using: "composite"
steps:
- name: Fix llvm toolchain
- name: Fix clang
shell: bash
run : |
rm -rf src/third_party/llvm-build
python3 src/tools/clang/scripts/update.py
# Refs https://chromium-review.googlesource.com/c/chromium/src/+/6667681
python3 src/tools/clang/scripts/update.py --package objdump
- name: Fix esbuild
uses: ./src/electron/.github/actions/cipd-install
with:

View File

@@ -57,19 +57,8 @@ runs:
sudo rm -rf $TMPDIR/del-target
sudo rm -rf /Applications/Safari.app
sudo rm -rf /Applications/Xcode_16.1.app
sudo rm -rf /Applications/Xcode_16.3.app
sudo rm -rf /Applications/Xcode_16.2.app
sudo rm -rf /Applications/Google Chrome.app
sudo rm -rf /Applications/Xcode_16.4.app
sudo rm -rf /Applications/Google Chrome for Testing.app
sudo rm -rf /Applications/Firefox.app
sudo rm -rf ~/project/src/third_party/catapult/tracing/test_data
sudo rm -rf ~/project/src/third_party/angle/third_party/VK-GL-CTS
sudo rm -rf /Users/runner/Library/Android
sudo rm -rf $JAVA_HOME_11_arm64
sudo rm -rf $JAVA_HOME_17_arm64
sudo rm -rf $JAVA_HOME_21_arm64
# lipo off some huge binaries arm64 versions to save space
strip_universal_deep $(xcode-select -p)/../SharedFrameworks

View File

@@ -11,10 +11,9 @@ runs:
git config --global core.autocrlf false
git config --global branch.autosetuprebase always
git config --global core.fscache true
git config --global core.longpaths true
git config --global core.preloadindex true
fi
export BUILD_TOOLS_SHA=274cba0474f0d1e4e6adbb66c1da48556cb0add5
export BUILD_TOOLS_SHA=0a7f6bef9453ceee45612442660ca16d2c40171b
npm i -g @electron/build-tools
# Update depot_tools to ensure python
e d update_depot_tools

View File

@@ -7,7 +7,7 @@ runs:
shell: bash
id: yarn-cache-dir-path
run: echo "dir=$(node src/electron/script/yarn cache dir)" >> $GITHUB_OUTPUT
- uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3
- uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57
id: yarn-cache
with:
path: ${{ steps.yarn-cache-dir-path.outputs.dir }}

View File

@@ -8,14 +8,14 @@ runs:
steps:
- name: Obtain SAS Key
continue-on-error: true
uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3
uses: actions/cache/restore@d4323d4df104b026a6aa633fdb11d772146be0bf
with:
path: sas-token
key: sas-key-${{ inputs.target-platform }}-${{ github.run_number }}-1
enableCrossOsArchive: true
- name: Obtain SAS Key
continue-on-error: true
uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3
uses: actions/cache/restore@d4323d4df104b026a6aa633fdb11d772146be0bf
with:
path: sas-token
key: sas-key-${{ inputs.target-platform }}-${{ github.run_number }}-${{ github.run_attempt }}
@@ -32,7 +32,7 @@ runs:
shell: bash
command: |
sas_token=$(cat sas-token)
if [ -z "$sas_token" ]; then
if [ -z $sas-token ]; then
echo "SAS Token not found; exiting src cache download early..."
exit 1
else
@@ -96,7 +96,7 @@ runs:
$TEMP_DIR=New-Item -ItemType Directory -Path temp-cache
$TEMP_DIR_PATH = $TEMP_DIR.FullName
C:\ProgramData\Chocolatey\bin\7z.exe -y -snld x $src_cache -o"$TEMP_DIR_PATH"
C:\ProgramData\Chocolatey\bin\7z.exe -y x $src_cache -o"$TEMP_DIR_PATH"
- name: Move Src Cache (Windows)
if: ${{ inputs.target-platform == 'win' }}

View File

@@ -1,20 +0,0 @@
name: Debug via SSH
description: Setup a SSH server with a tunnel to access it to debug via SSH.
inputs:
tunnel:
description: 'Enable SSH tunneling via cloudflared'
required: true
default: 'false'
timeout:
description: 'SSH session timeout in minutes'
required: false
type: number
default: 60
runs:
using: composite
steps:
- run: $GITHUB_ACTION_PATH/setup-ssh.sh
shell: bash
env:
TUNNEL: ${{ inputs.tunnel }}
TIMEOUT: ${{ inputs.timeout }}

View File

@@ -1,4 +0,0 @@
# If we're in an interactive SSH session and we're not already in tmux and there's no explicit SSH command, auto attach tmux
if [ -n "$SSH_TTY" ] && [ -z "$TMUX" ] && [ -z "$SSH_ORIGINAL_COMMAND" ]; then
exec tmux attach || exec tmux
fi

View File

@@ -1,140 +0,0 @@
#!/bin/bash -e
get_authorized_keys() {
if [ -z "$AUTHORIZED_USERS" ] || ! echo "$AUTHORIZED_USERS" | grep -q "\b$GITHUB_ACTOR\b"; then
return 1
fi
api_response=$(curl -s "https://api.github.com/users/$GITHUB_ACTOR/keys")
if echo "$api_response" | jq -e 'type == "object" and has("message")' >/dev/null; then
error_msg=$(echo "$api_response" | jq -r '.message')
echo "Error: $error_msg"
return 1
else
echo "$api_response" | jq -r '.[].key'
fi
}
authorized_keys=$(get_authorized_keys "$GITHUB_ACTOR")
if [ -n "$authorized_keys" ]; then
echo "Configured SSH key(s) for user: $GITHUB_ACTOR"
else
echo "Error: User '$GITHUB_ACTOR' is not authorized to access this debug session."
echo "Authorized users: $AUTHORIZED_USERS"
exit 1
fi
if [ "$TUNNEL" != "true" ]; then
echo "SSH tunneling is disabled. Set enable-tunnel: true to enable remote access."
echo "Local SSH server would be available on localhost:2222 if this were a local environment."
exit 0
fi
echo "SSH tunneling enabled. Setting up remote access..."
EXTERNAL_DEPS="curl jq ssh-keygen"
for dep in $EXTERNAL_DEPS; do
if ! command -v "$dep" > /dev/null 2>&1; then
echo "Command $dep not installed on the system!" >&2
exit 1
fi
done
cd "$GITHUB_ACTION_PATH"
bashrc_path=$(pwd)/bashrc
# Source `bashrc` to auto start tmux on SSH login.
if ! grep -q "$bashrc_path" ~/.bash_profile; then
echo >> ~/.bash_profile # On macOS runner there's no newline at the end of the file
echo "source \"$bashrc_path\"" >> ~/.bash_profile
fi
OS=$(uname -s | tr '[:upper:]' '[:lower:]')
ARCH=$(uname -m)
if [ "$ARCH" = "x86_64" ]; then
ARCH="amd64"
elif [ "$ARCH" = "aarch64" ]; then
ARCH="arm64"
fi
# Install tmux on macOS runners if not present.
if [ "$OS" = "darwin" ] && ! command -v tmux > /dev/null 2>&1; then
echo "Installing tmux..."
brew install tmux
fi
if [ "$OS" = "darwin" ]; then
cloudflared_url="https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-${OS}-${ARCH}.tgz"
echo "Downloading \`cloudflared\` from <$cloudflared_url>..."
curl --location --silent --output cloudflared.tgz "$cloudflared_url"
tar xf cloudflared.tgz
rm cloudflared.tgz
else
cloudflared_url="https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-${OS}-${ARCH}"
echo "Downloading \`cloudflared\` from <$cloudflared_url>..."
curl --location --silent --output cloudflared "$cloudflared_url"
fi
chmod +x cloudflared
echo "Setting up SSH key for authorized user: $GITHUB_ACTOR"
echo "$authorized_keys" > authorized_keys
echo 'Creating SSH server key...'
ssh-keygen -q -f ssh_host_rsa_key -N ''
echo 'Creating SSH server config...'
sed "s,\$PWD,$PWD,;s,\$USER,$USER," sshd_config.template > sshd_config
echo 'Starting SSH server...'
/usr/sbin/sshd -f sshd_config -D &
sshd_pid=$!
echo 'Starting tmux session...'
(cd "$GITHUB_WORKSPACE" && tmux new-session -d -s debug)
#if no cloudflare tunnel token is provided, exit
if [ -z "$CLOUDFLARE_TUNNEL_TOKEN" ]; then
echo "Error: required CLOUDFLARE_TUNNEL_TOKEN not found"
exit 1
fi
echo 'Starting Cloudflare tunnel...'
./cloudflared tunnel --no-autoupdate run --token "$CLOUDFLARE_TUNNEL_TOKEN" 2>&1 | tee cloudflared.log | sed -u 's/^/cloudflared: /' &
cloudflared_pid=$!
url="$TUNNEL_HOSTNAME"
public_key=$(cut -d' ' -f1,2 < ssh_host_rsa_key.pub)
(
echo ' '
echo ' '
echo '🔗 SSH Debug Session Ready!'
echo '━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━'
echo ' '
echo '📋 Copy and run this command to connect:'
echo ' '
if [ -n "$TUNNEL_HOSTNAME" ]; then
echo "ssh-keygen -R action-ssh-debug && echo 'action-ssh-debug $public_key' >> ~/.ssh/known_hosts && ssh -o ProxyCommand='cloudflared access tcp --hostname $url' runner@action-ssh-debug"
else
echo "ssh-keygen -R action-ssh-debug && echo 'action-ssh-debug $public_key' >> ~/.ssh/known_hosts && ssh -o ProxyCommand='cloudflared access tcp --hostname $url' runner@action-ssh-debug"
fi
echo ' '
echo "⏰ Session expires automatically in $TIMEOUT minutes"
echo '━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━'
echo ' '
echo ' '
) | cat
echo 'Starting SSH session in background...'
./ssh-session.sh "$sshd_pid" "$cloudflared_pid" $TIMEOUT &
echo 'SSH session is running in background. GitHub Action will continue.'
echo 'Session will auto-cleanup after timeout or when processes end.'

View File

@@ -1,21 +0,0 @@
#!/bin/bash
SSHD_PID=$1
CLOUDFLARED_PID=$2
SESSION_TIMEOUT=${3:-3600}
# Wait for timeout or until processes die.
sleep "$SESSION_TIMEOUT" &
SLEEP_PID=$!
# Monitor if SSH or cloudflared dies early.
while kill -0 "$SSHD_PID" 2>/dev/null && kill -0 "$CLOUDFLARED_PID" 2>/dev/null && kill -0 "$SLEEP_PID" 2>/dev/null; do
sleep 10
done
# Cleanup.
kill "$SLEEP_PID" 2>/dev/null || true
kill "$SSHD_PID" 2>/dev/null || true
kill "$CLOUDFLARED_PID" 2>/dev/null || true
echo "SSH session ended"

View File

@@ -1,9 +0,0 @@
Port 2222
HostKey $PWD/ssh_host_rsa_key
PidFile $PWD/sshd.pid
# Only allow single user
AllowUsers $USER
# Only allow those keys
AuthorizedKeysFile $PWD/authorized_keys

View File

@@ -15,11 +15,7 @@ jobs:
permissions:
contents: read
steps:
- name: Setup Node.js
uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
with:
node-version: 22.17.x
- run: npm install @actions/cache@4.0.3 @electron/fiddle-core@2.0.1
- run: npm install @actions/cache @electron/fiddle-core
- uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
id: audit-errors
with:
@@ -33,7 +29,7 @@ jobs:
// Only want the most recent workflow run that wasn't skipped or cancelled
const isValidWorkflowRun = (run) => !['skipped', 'cancelled'].includes(run.conclusion);
const versions = await ElectronVersions.create({ ignoreCache: true });
const versions = await ElectronVersions.create(undefined, { ignoreCache: true });
const branches = versions.supportedMajors.map((branch) => `${branch}-x-y`);
for (const branch of ["main", ...branches]) {
@@ -105,6 +101,7 @@ jobs:
}
if (runsWithErrors.length > 0) {
core.setOutput('errorsFound', true);
core.summary.addHeading('⚠️ Runs with Errors');
core.summary.addTable([
[
@@ -131,7 +128,6 @@ jobs:
// Set this as failed so it's easy to scan runs to find failures
if (runsWithErrors.find((run) => !run.isStale)) {
core.setOutput('errorsFound', true);
process.exitCode = 1;
}
} else {
@@ -140,8 +136,8 @@ jobs:
await core.summary.write();
- name: Send Slack message if errors
if: ${{ always() && steps.audit-errors.outputs.errorsFound && github.ref == 'refs/heads/main' }}
uses: slackapi/slack-github-action@91efab103c0de0a537f72a35f6b8cda0ee76bf0a # v2.1.1
if: ${{ steps.audit-errors.outputs.errorsFound && github.ref == 'refs/heads/main' }}
uses: slackapi/slack-github-action@b0fa283ad8fea605de13dc3f449259339835fc52 # v2.1.0
with:
payload: |
link: "https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}"

View File

@@ -60,8 +60,6 @@ jobs:
// It's possible for multiple versions to be listed -
// for now check for comma or space separated version.
const versions = electronVersion.split(/, | /);
let hasSupportedVersion = false;
for (const version of versions) {
const major = semver.coerce(version, { loose: true })?.major;
if (major) {
@@ -77,20 +75,19 @@ jobs:
labelExists = true;
} catch {}
const { ElectronVersions } = await import('${{ github.workspace }}/node_modules/@electron/fiddle-core/dist/index.js');
const electronVersions = await ElectronVersions.create(undefined, { ignoreCache: true });
const validVersions = [...electronVersions.supportedMajors, ...electronVersions.prereleaseMajors];
if (labelExists) {
// Check if it's an unsupported major
const { ElectronVersions } = await import('${{ github.workspace }}/node_modules/@electron/fiddle-core/dist/index.js');
const versions = await ElectronVersions.create(undefined, { ignoreCache: true });
if (validVersions.includes(major)) {
hasSupportedVersion = true;
if (labelExists) {
const validVersions = [...versions.supportedMajors, ...versions.prereleaseMajors];
if (validVersions.includes(major)) {
labels.push(versionLabel);
}
}
}
}
if (!hasSupportedVersion) {
if (labels.length === 0) {
core.setOutput('unsupportedMajor', true);
labels.push('blocked/need-info ❌');
}

View File

@@ -73,7 +73,6 @@ env:
SUDOWOODO_EXCHANGE_TOKEN: ${{ secrets.SUDOWOODO_EXCHANGE_TOKEN }}
GCLIENT_EXTRA_ARGS: ${{ inputs.target-platform == 'macos' && '--custom-var=checkout_mac=True --custom-var=host_os=mac' || inputs.target-platform == 'win' && '--custom-var=checkout_win=True' || '--custom-var=checkout_arm=True --custom-var=checkout_arm64=True' }}
ELECTRON_OUT_DIR: Default
ACTIONS_STEP_DEBUG: ${{ secrets.ACTIONS_STEP_DEBUG }}
jobs:
build:
@@ -95,15 +94,6 @@ jobs:
path: src/electron
fetch-depth: 0
ref: ${{ github.event.pull_request.head.sha }}
- name: Setup SSH Debugging
if: ${{ inputs.target-platform == 'macos' && env.ACTIONS_STEP_DEBUG == 'true' }}
uses: ./src/electron/.github/actions/ssh-debug
with:
tunnel: 'true'
env:
CLOUDFLARE_TUNNEL_TOKEN: ${{ secrets.CLOUDFLARE_TUNNEL_TOKEN }}
TUNNEL_HOSTNAME: ${{ secrets.CLOUDFLARED_SSH_HOSTNAME }}
AUTHORIZED_USERS: ${{ secrets.SSH_DEBUG_AUTHORIZED_USERS }}
- name: Free up space (macOS)
if: ${{ inputs.target-platform == 'macos' }}
uses: ./src/electron/.github/actions/free-space-macos

View File

@@ -40,7 +40,6 @@ env:
CHROMIUM_GIT_COOKIE_WINDOWS_STRING: ${{ secrets.CHROMIUM_GIT_COOKIE_WINDOWS_STRING }}
ELECTRON_OUT_DIR: Default
ELECTRON_RBE_JWT: ${{ secrets.ELECTRON_RBE_JWT }}
ACTIONS_STEP_DEBUG: ${{ secrets.ACTIONS_STEP_DEBUG }}
jobs:
test:
@@ -101,9 +100,9 @@ jobs:
}
userValuesArray=(
"'kTCCServiceMicrophone','/usr/local/opt/runner/provisioner/provisioner',1,2,4,1,NULL,NULL,0,'UNUSED',NULL,0,1687786159"
"'kTCCServiceCamera','/usr/local/opt/runner/provisioner/provisioner',1,2,4,1,NULL,NULL,0,'UNUSED',NULL,0,1687786159"
"'kTCCServiceBluetoothAlways','/usr/local/opt/runner/provisioner/provisioner',1,2,4,1,NULL,NULL,0,'UNUSED',NULL,0,1687786159"
"'kTCCServiceAppleEvents','/usr/local/opt/runner/provisioner/provisioner',1,2,4,1,NULL,NULL,0,'UNUSED',NULL,0,1687786159"
)
for values in "${userValuesArray[@]}"; do
# Sonoma and higher have a few extra values
@@ -125,15 +124,6 @@ jobs:
path: src/electron
fetch-depth: 0
ref: ${{ github.event.pull_request.head.sha }}
- name: Setup SSH Debugging
if: ${{ inputs.target-platform == 'macos' && env.ACTIONS_STEP_DEBUG == 'true' }}
uses: ./src/electron/.github/actions/ssh-debug
with:
tunnel: 'true'
env:
CLOUDFLARE_TUNNEL_TOKEN: ${{ secrets.CLOUDFLARE_TUNNEL_TOKEN }}
TUNNEL_HOSTNAME: ${{ secrets.CLOUDFLARED_SSH_HOSTNAME }}
AUTHORIZED_USERS: ${{ secrets.SSH_DEBUG_AUTHORIZED_USERS }}
- name: Install Dependencies
uses: ./src/electron/.github/actions/install-dependencies
- name: Set Chromium Git Cookie
@@ -145,7 +135,6 @@ jobs:
git config --global core.autocrlf false
git config --global branch.autosetuprebase always
git config --global core.fscache true
git config --global core.longpaths true
git config --global core.preloadindex true
git clone --filter=tree:0 https://chromium.googlesource.com/chromium/tools/depot_tools.git
# Ensure depot_tools does not update.
@@ -203,6 +192,7 @@ jobs:
MOCHA_REPORTER: mocha-multi-reporters
MOCHA_MULTI_REPORTERS: mocha-junit-reporter, tap
ELECTRON_DISABLE_SECURITY_WARNINGS: 1
ELECTRON_SKIP_NATIVE_MODULE_TESTS: true
DISPLAY: ':99.0'
NPM_CONFIG_MSVS_VERSION: '2022'
run: |

View File

@@ -13,7 +13,7 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: Trigger Slack workflow
uses: slackapi/slack-github-action@91efab103c0de0a537f72a35f6b8cda0ee76bf0a # v2.1.1
uses: slackapi/slack-github-action@b0fa283ad8fea605de13dc3f449259339835fc52 # v2.1.0
with:
webhook: ${{ secrets.BACKPORT_REQUESTED_SLACK_WEBHOOK_URL }}
webhook-type: webhook-trigger

View File

@@ -50,6 +50,6 @@ jobs:
# Upload the results to GitHub's code scanning dashboard.
- name: "Upload to code-scanning"
uses: github/codeql-action/upload-sarif@181d5eefc20863364f96762470ba6f862bdef56b # v3.29.2
uses: github/codeql-action/upload-sarif@ff0a06e83cb2de871e5a09832bc6a81e7276941f # v3.28.18
with:
sarif_file: results.sarif

View File

@@ -27,7 +27,7 @@ jobs:
This issue has been automatically marked as stale. **If this issue is still affecting you, please leave any comment** (for example, "bump"), and we'll keep it open. If you have any new additional information—in particular, if this is still reproducible in the [latest version of Electron](https://www.electronjs.org/releases/stable) or in the [beta](https://www.electronjs.org/releases/beta)—please include it with your comment!
close-issue-message: >
This issue has been closed due to inactivity, and will not be monitored. If this is a bug and you can reproduce this issue on a [supported version of Electron](https://www.electronjs.org/docs/latest/tutorial/electron-timelines#timeline) please open a new issue and include instructions for reproducing the issue.
exempt-issue-labels: "discussion,security \U0001F512,enhancement :sparkles:,status/confirmed,stale-exempt,upgrade-follow-up"
exempt-issue-labels: "discussion,security \U0001F512,enhancement :sparkles:,status/confirmed,stale-exempt"
only-pr-labels: not-a-real-label
pending-repro:
runs-on: ubuntu-latest

View File

@@ -21,9 +21,7 @@
"ul",
"unknown",
"Tabs",
"TabItem",
"DocCardList",
"kbd"
"TabItem"
]
},
"no-newline-in-links": true

View File

@@ -4,9 +4,9 @@ import("//build/config/win/manifest.gni")
import("//components/os_crypt/sync/features.gni")
import("//components/spellcheck/spellcheck_build_features.gni")
import("//content/public/app/mac_helpers.gni")
import("//content/public/common/features.gni")
import("//extensions/buildflags/buildflags.gni")
import("//pdf/features.gni")
import("//ppapi/buildflags/buildflags.gni")
import("//printing/buildflags/buildflags.gni")
import("//testing/test.gni")
import("//third_party/electron_node/node.gni")

6
DEPS
View File

@@ -2,9 +2,9 @@ gclient_gn_args_from = 'src'
vars = {
'chromium_version':
'140.0.7314.0',
'139.0.7219.0',
'node_version':
'v22.17.1',
'v22.16.0',
'nan_version':
'e14bdcd1f72d62bca1d541b66da43130384ec213',
'squirrel.mac_version':
@@ -31,7 +31,7 @@ vars = {
'sysroots_json_path': 'electron/script/sysroots.json',
# KEEP IN SYNC WITH utils.js FILE
'yarn_version': '1.22.22',
'yarn_version': '1.15.2',
# To be able to build clean Chromium from sources.
'apply_patches': True,

View File

@@ -1,8 +1,8 @@
{
"plugins": [
"import"
"unicorn"
],
"rules": {
"import/enforce-node-protocol-usage": ["error", "always"]
"unicorn/prefer-node-protocol": "error"
}
}

View File

@@ -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 = 139
node_module_version = 136
v8_promise_internal_field_count = 1
v8_embedder_string = "-electron.0"
@@ -70,6 +70,6 @@ v8_expose_public_symbols = true
# sensitive content by enterprise users.
enterprise_cloud_content_analysis = false
# Disable siso until we are ready to use it.
# https://chromium-review.googlesource.com/c/chromium/src/+/6638830
use_siso = false
# TODO: remove dependency on legacy ipc
# https://issues.chromium.org/issues/40943039
content_enable_legacy_ipc = true

View File

@@ -67,6 +67,10 @@ template("mac_xib_bundle_data") {
ibtool_flags = [
"--minimum-deployment-target",
mac_deployment_target,
# TODO(rsesek): Enable this once all the bots are on Xcode 7+.
# "--target-device",
# "mac",
]
}

View File

@@ -1,21 +0,0 @@
# -*- bazel-starlark -*-
load("@builtin//struct.star", "module")
def __platform_properties(ctx):
container_image = "docker://gcr.io/chops-public-images-prod/rbe/siso-chromium/linux@sha256:ef35d347f4a4a2d32b76fd908e66e96f59bf8ba7379fd5626548244c45343b2b"
return {
"default": {
"OSFamily": "Linux",
"container-image": container_image,
},
"large": {
"OSFamily": "Linux",
"container-image": container_image,
},
}
backend = module(
"backend",
platform_properties = __platform_properties,
)

View File

@@ -66,8 +66,6 @@ static_library("chrome") {
"//chrome/browser/picture_in_picture/picture_in_picture_occlusion_tracker.h",
"//chrome/browser/picture_in_picture/picture_in_picture_occlusion_tracker_observer.cc",
"//chrome/browser/picture_in_picture/picture_in_picture_occlusion_tracker_observer.h",
"//chrome/browser/picture_in_picture/picture_in_picture_widget_fade_animator.cc",
"//chrome/browser/picture_in_picture/picture_in_picture_widget_fade_animator.h",
"//chrome/browser/picture_in_picture/picture_in_picture_window_manager.cc",
"//chrome/browser/picture_in_picture/picture_in_picture_window_manager.h",
"//chrome/browser/picture_in_picture/picture_in_picture_window_manager_uma_helper.cc",
@@ -78,8 +76,6 @@ static_library("chrome") {
"//chrome/browser/platform_util.h",
"//chrome/browser/predictors/preconnect_manager.cc",
"//chrome/browser/predictors/preconnect_manager.h",
"//chrome/browser/predictors/preconnect_manager_impl.cc",
"//chrome/browser/predictors/preconnect_manager_impl.h",
"//chrome/browser/predictors/predictors_features.cc",
"//chrome/browser/predictors/predictors_features.h",
"//chrome/browser/predictors/proxy_lookup_client_impl.cc",
@@ -132,8 +128,6 @@ static_library("chrome") {
"//chrome/browser/ui/views/overlay/hang_up_button.h",
"//chrome/browser/ui/views/overlay/minimize_button.cc",
"//chrome/browser/ui/views/overlay/minimize_button.h",
"//chrome/browser/ui/views/overlay/overlay_controls_fade_animation.cc",
"//chrome/browser/ui/views/overlay/overlay_controls_fade_animation.h",
"//chrome/browser/ui/views/overlay/overlay_window_image_button.cc",
"//chrome/browser/ui/views/overlay/overlay_window_image_button.h",
"//chrome/browser/ui/views/overlay/playback_image_button.cc",
@@ -150,10 +144,6 @@ static_library("chrome") {
"//chrome/browser/ui/views/overlay/toggle_microphone_button.h",
"//chrome/browser/ui/views/overlay/video_overlay_window_views.cc",
"//chrome/browser/ui/views/overlay/video_overlay_window_views.h",
"//chrome/browser/ui/views/picture_in_picture/picture_in_picture_bounds_change_animation.cc",
"//chrome/browser/ui/views/picture_in_picture/picture_in_picture_bounds_change_animation.h",
"//chrome/browser/ui/views/picture_in_picture/picture_in_picture_tucker.cc",
"//chrome/browser/ui/views/picture_in_picture/picture_in_picture_tucker.h",
"//chrome/browser/ui/webui/accessibility/accessibility_ui.cc",
"//chrome/browser/ui/webui/accessibility/accessibility_ui.h",
"//chrome/browser/usb/usb_blocklist.cc",
@@ -227,8 +217,8 @@ static_library("chrome") {
sources += [
"//chrome/browser/platform_util_aura.cc",
"//chrome/browser/ui/views/eye_dropper/eye_dropper_aura.cc",
"//ui/native_window_tracker/native_window_tracker_aura.cc",
"//ui/native_window_tracker/native_window_tracker_aura.h",
"//ui/views/native_window_tracker_aura.cc",
"//ui/views/native_window_tracker_aura.h",
]
deps += [ "//components/eye_dropper" ]
}
@@ -284,8 +274,6 @@ static_library("chrome") {
"//chrome/browser/process_singleton_mac.mm",
"//chrome/browser/ui/views/eye_dropper/eye_dropper_view_mac.h",
"//chrome/browser/ui/views/eye_dropper/eye_dropper_view_mac.mm",
"//chrome/browser/ui/views/overlay/video_overlay_window_native_widget_mac.h",
"//chrome/browser/ui/views/overlay/video_overlay_window_native_widget_mac.mm",
]
deps += [ ":system_media_capture_permissions_mac_conflict" ]
}
@@ -508,17 +496,15 @@ source_set("chrome_spellchecker") {
]
}
if (is_mac) {
# These sources create an object file conflict with one in |:chrome|, so they
# must live in a separate target.
# Conflicting sources:
# //chrome/browser/media/webrtc/system_media_capture_permissions_stats_mac.mm
# //chrome/browser/permissions/system/system_media_capture_permissions_mac.mm
source_set("system_media_capture_permissions_mac_conflict") {
sources = [
"//chrome/browser/permissions/system/system_media_capture_permissions_mac.h",
"//chrome/browser/permissions/system/system_media_capture_permissions_mac.mm",
]
deps = [ "//chrome/common" ]
}
# These sources create an object file conflict with one in |:chrome|, so they
# must live in a separate target.
# Conflicting sources:
# //chrome/browser/media/webrtc/system_media_capture_permissions_stats_mac.mm
# //chrome/browser/permissions/system/system_media_capture_permissions_mac.mm
source_set("system_media_capture_permissions_mac_conflict") {
sources = [
"//chrome/browser/permissions/system/system_media_capture_permissions_mac.h",
"//chrome/browser/permissions/system/system_media_capture_permissions_mac.mm",
]
deps = [ "//chrome/common" ]
}

View File

@@ -1,8 +1,8 @@
{
"plugins": [
"import"
"unicorn"
],
"rules": {
"import/enforce-node-protocol-usage": ["error", "always"]
"unicorn/prefer-node-protocol": "error"
}
}

View File

@@ -1,8 +1,8 @@
{
"extends": "standard",
"plugins": [
"import",
"markdown"
"markdown",
"unicorn"
],
"overrides": [
{
@@ -30,6 +30,6 @@
"no-undef": "off",
"no-unused-expressions": "off",
"no-unused-vars": "off",
"import/enforce-node-protocol-usage": ["error", "always"]
"unicorn/prefer-node-protocol": "error"
}
}

82
docs/api/accelerator.md Normal file
View File

@@ -0,0 +1,82 @@
# Accelerator
> Define keyboard shortcuts.
Accelerators are strings that can contain multiple modifiers and a single key code,
combined by the `+` character, and are used to define keyboard shortcuts
throughout your application. Accelerators are case insensitive.
Examples:
* `CommandOrControl+A`
* `CommandOrControl+Shift+Z`
Shortcuts are registered with the [`globalShortcut`](global-shortcut.md) module
using the [`register`](global-shortcut.md#globalshortcutregisteraccelerator-callback)
method, i.e.
```js
const { app, globalShortcut } = require('electron')
app.whenReady().then(() => {
// Register a 'CommandOrControl+Y' shortcut listener.
globalShortcut.register('CommandOrControl+Y', () => {
// Do stuff when Y and either Command/Control is pressed.
})
})
```
## Platform notice
On Linux and Windows, the `Command` key does not have any effect so
use `CommandOrControl` which represents `Command` on macOS and `Control` on
Linux and Windows to define some accelerators.
Use `Alt` instead of `Option`. The `Option` key only exists on macOS, whereas
the `Alt` key is available on all platforms.
The `Super` (or `Meta`) key is mapped to the `Windows` key on Windows and Linux and
`Cmd` on macOS.
## Available modifiers
* `Command` (or `Cmd` for short)
* `Control` (or `Ctrl` for short)
* `CommandOrControl` (or `CmdOrCtrl` for short)
* `Alt`
* `Option`
* `AltGr`
* `Shift`
* `Super`
* `Meta`
## Available key codes
* `0` to `9`
* `A` to `Z`
* `F1` to `F24`
* Various Punctuation: `)`, `!`, `@`, `#`, `$`, `%`, `^`, `&`, `*`, `(`, `:`, `;`, `:`, `+`, `=`, `<`, `,`, `_`, `-`, `>`, `.`, `?`, `/`, `~`, `` ` ``, `{`, `]`, `[`, `|`, `\`, `}`, `"`
* `Plus`
* `Space`
* `Tab`
* `Capslock`
* `Numlock`
* `Scrolllock`
* `Backspace`
* `Delete`
* `Insert`
* `Return` (or `Enter` as alias)
* `Up`, `Down`, `Left` and `Right`
* `Home` and `End`
* `PageUp` and `PageDown`
* `Escape` (or `Esc` for short)
* `VolumeUp`, `VolumeDown` and `VolumeMute`
* `MediaNextTrack`, `MediaPreviousTrack`, `MediaStop` and `MediaPlayPause`
* `PrintScreen`
* NumPad Keys
* `num0` - `num9`
* `numdec` - decimal key
* `numadd` - numpad `+` key
* `numsub` - numpad `-` key
* `nummult` - numpad `*` key
* `numdiv` - numpad `÷` key

View File

@@ -99,10 +99,6 @@ Process: [Main](../glossary.md#main-process)
It creates a new `BaseWindow` with native properties as set by the `options`.
> [!WARNING]
> Electron's built-in classes cannot be subclassed in user code.
> For more information, see [the FAQ](../faq.md#class-inheritance-does-not-work-with-electron-built-in-modules).
### `new BaseWindow([options])`
* `options` [BaseWindowConstructorOptions](structures/base-window-options.md?inline) (optional)

View File

@@ -38,10 +38,6 @@ Process: [Main](../glossary.md#main-process)
This module cannot be used until the `ready` event of the `app`
module is emitted.
> [!WARNING]
> Electron's built-in classes cannot be subclassed in user code.
> For more information, see [the FAQ](../faq.md#class-inheritance-does-not-work-with-electron-built-in-modules).
### Example
```js

View File

@@ -151,10 +151,6 @@ Process: [Main](../glossary.md#main-process)
It creates a new `BrowserWindow` with native properties as set by the `options`.
> [!WARNING]
> Electron's built-in classes cannot be subclassed in user code.
> For more information, see [the FAQ](../faq.md#class-inheritance-does-not-work-with-electron-built-in-modules).
### `new BrowserWindow([options])`
* `options` [BrowserWindowConstructorOptions](structures/browser-window-options.md?inline) (optional)
@@ -1533,8 +1529,8 @@ events.
Prevents the window contents from being captured by other apps.
On macOS it sets the NSWindow's [`sharingType`](https://developer.apple.com/documentation/appkit/nswindow/sharingtype-swift.property?language=objc) to [`NSWindowSharingNone`](https://developer.apple.com/documentation/appkit/nswindow/sharingtype-swift.enum/none?language=objc).
On Windows it calls [`SetWindowDisplayAffinity`](https://learn.microsoft.com/en-us/windows/win32/api/winuser/nf-winuser-setwindowdisplayaffinity) with `WDA_EXCLUDEFROMCAPTURE`.
On macOS it sets the NSWindow's sharingType to NSWindowSharingNone.
On Windows it calls SetWindowDisplayAffinity with `WDA_EXCLUDEFROMCAPTURE`.
For Windows 10 version 2004 and up the window will be removed from capture entirely,
older Windows versions behave as if `WDA_MONITOR` is applied capturing a black window.

View File

@@ -292,7 +292,7 @@ Specify ways of the inspector web socket url exposure.
By default inspector websocket url is available in stderr and under /json/list endpoint on `http://host:port/json/list`.
### `--experimental-network-inspection`
### `--experimental-network-inspector`
Enable support for devtools network inspector events, for visibility into requests made by the nodejs `http` and `https` modules.
@@ -331,22 +331,6 @@ Affects the default output directory of [v8.setHeapSnapshotNearHeapLimit](https:
Disable exposition of [Navigator API][] on the global scope from Node.js.
## Chromium Flags
There isn't a documented list of all Chromium switches, but there are a few ways to find them.
The easiest way is through Chromium's flags page, which you can access at `about://flags`. These flags don't directly match switch names, but they show up in the process's command-line arguments.
To see these arguments, enable a flag in `about://flags`, then go to `about://version` in Chromium. You'll find a list of command-line arguments, including `--flag-switches-begin --your --list --flag-switches-end`, which contains the list of your flag enabled switches.
Most flags are included as part of `--enable-features=`, but some are standalone switches, like `--enable-experimental-web-platform-features`.
A complete list of flags exists in [Chromium's flag metadata page](https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/flag-metadata.json), but this list includes platform, environment and GPU specific, expired and potentially non-functional flags, so many of them might not always work in every situation.
Keep in mind that standalone switches can sometimes be split into individual features, so there's no fully complete list of switches.
Finally, you'll need to ensure that the version of Chromium in Electron matches the version of the browser you're using to cross-reference the switches.
[app]: app.md
[append-switch]: command-line.md#commandlineappendswitchswitch-value
[debugging-main-process]: ../tutorial/debugging-main-process.md

View File

@@ -51,17 +51,19 @@ Use the `system-ui` keyword to match the smoothness to the OS design language.
### Controlling availibility
This CSS rule can be disabled using the Blink feature flag `ElectronCSSCornerSmoothing`.
This CSS rule can be disabled by setting [the `cornerSmoothingCSS` web preference](./structures/web-preferences.md) to `false`.
```js
const myWindow = new BrowserWindow({
// [...]
webPreferences: {
disableBlinkFeatures: 'ElectronCSSCornerSmoothing' // Disables the `-electron-corner-smoothing` CSS rule
enableCornerSmoothingCSS: false // Disables the `-electron-corner-smoothing` CSS rule
}
})
```
The CSS rule will still parse, but will have no visual effect.
### Formal reference
* **Initial value**: `0%`

View File

@@ -63,7 +63,7 @@ The `crashReporter` module has the following methods:
* `extra` Record\<string, string\> (optional) - Extra string key/value
annotations that will be sent along with crash reports that are generated
in the main process. Only string values are supported. Crashes generated in
child processes will not include these extra parameters. To add extra
child processes will not contain these extra
parameters to crash reports generated from child processes, call
[`addExtraParameter`](#crashreporteraddextraparameterkey-value) from the
child process.

View File

@@ -5,8 +5,13 @@
Process: [Main](../glossary.md#main-process)<br />
_This class is not exported from the `'electron'` module. It is only available as a return value of other methods in the Electron API._
> [!TIP]
> See also: [A detailed guide about how to implement Dock menus](../tutorial/macos-dock.md).
The following example shows how to bounce your icon on the dock.
```js
const { app } = require('electron')
app.dock?.bounce()
```
### Instance Methods
@@ -45,9 +50,6 @@ Bounces the Downloads stack if the filePath is inside the Downloads folder.
Sets the string to be displayed in the docks badging area.
> [!IMPORTANT]
> You need to ensure that your application has the permission to display notifications for this method to work.
#### `dock.getBadge()` _macOS_
Returns `string` - The badge string of the dock.

View File

@@ -46,16 +46,13 @@ app.on('will-quit', () => {
})
```
> [!TIP]
> See also: [A detailed guide on Keyboard Shortcuts](../tutorial/keyboard-shortcuts.md).
## Methods
The `globalShortcut` module has the following methods:
### `globalShortcut.register(accelerator, callback)`
* `accelerator` string - An [accelerator](../tutorial/keyboard-shortcuts.md#accelerators) shortcut.
* `accelerator` [Accelerator](accelerator.md)
* `callback` Function
Returns `boolean` - Whether or not the shortcut was registered successfully.
@@ -77,7 +74,7 @@ the app has been authorized as a [trusted accessibility client](https://develope
### `globalShortcut.registerAll(accelerators, callback)`
* `accelerators` string[] - An array of [accelerator](../tutorial/keyboard-shortcuts.md#accelerators) shortcuts.
* `accelerators` [Accelerator](accelerator.md)[] - an array of [Accelerator](accelerator.md)s.
* `callback` Function
Registers a global shortcut of all `accelerator` items in `accelerators`. The `callback` is called when any of the registered shortcuts are pressed by the user.
@@ -96,7 +93,7 @@ the app has been authorized as a [trusted accessibility client](https://develope
### `globalShortcut.isRegistered(accelerator)`
* `accelerator` string - An [accelerator](../tutorial/keyboard-shortcuts.md#accelerators) shortcut.
* `accelerator` [Accelerator](accelerator.md)
Returns `boolean` - Whether this application has registered `accelerator`.
@@ -106,7 +103,7 @@ don't want applications to fight for global shortcuts.
### `globalShortcut.unregister(accelerator)`
* `accelerator` string - An [accelerator](../tutorial/keyboard-shortcuts.md#accelerators) shortcut.
* `accelerator` [Accelerator](accelerator.md)
Unregisters the global shortcut of `accelerator`.

View File

@@ -43,10 +43,6 @@ Process: [Main](../glossary.md#main-process)
`ImageView` is an [EventEmitter][event-emitter].
> [!WARNING]
> Electron's built-in classes cannot be subclassed in user code.
> For more information, see [the FAQ](../faq.md#class-inheritance-does-not-work-with-electron-built-in-modules).
### `new ImageView()` _Experimental_
Creates an ImageView.

View File

@@ -11,10 +11,6 @@ Process: [Main](../glossary.md#main-process)
<!-- TODO(samuelmaddock): refactor doc gen to allow generics to reduce duplication -->
> [!WARNING]
> Electron's built-in classes cannot be subclassed in user code.
> For more information, see [the FAQ](../faq.md#class-inheritance-does-not-work-with-electron-built-in-modules).
### Instance Methods
#### `ipcMainServiceWorker.on(channel, listener)`

View File

@@ -6,10 +6,6 @@ Process: [Main](../glossary.md#main-process)
See [`Menu`](menu.md) for examples.
> [!WARNING]
> Electron's built-in classes cannot be subclassed in user code.
> For more information, see [the FAQ](../faq.md#class-inheritance-does-not-work-with-electron-built-in-modules).
### `new MenuItem(options)`
* `options` Object
@@ -19,7 +15,7 @@ See [`Menu`](menu.md) for examples.
* `window` [BaseWindow](base-window.md) | undefined - This will not be defined if no window is open.
* `event` [KeyboardEvent](structures/keyboard-event.md)
* `role` string (optional) - Can be `undo`, `redo`, `cut`, `copy`, `paste`, `pasteAndMatchStyle`, `delete`, `selectAll`, `reload`, `forceReload`, `toggleDevTools`, `resetZoom`, `zoomIn`, `zoomOut`, `toggleSpellChecker`, `togglefullscreen`, `window`, `minimize`, `close`, `help`, `about`, `services`, `hide`, `hideOthers`, `unhide`, `quit`, `showSubstitutions`, `toggleSmartQuotes`, `toggleSmartDashes`, `toggleTextReplacement`, `startSpeaking`, `stopSpeaking`, `zoom`, `front`, `appMenu`, `fileMenu`, `editMenu`, `viewMenu`, `shareMenu`, `recentDocuments`, `toggleTabBar`, `selectNextTab`, `selectPreviousTab`, `showAllTabs`, `mergeAllWindows`, `clearRecentDocuments`, `moveTabToNewWindow` or `windowMenu` - Define the action of the menu item, when specified the
`click` property will be ignored. See [roles](../tutorial/menus.md#roles).
`click` property will be ignored. See [roles](#roles).
* `type` string (optional)
* `normal`
* `separator`
@@ -31,7 +27,7 @@ See [`Menu`](menu.md) for examples.
* `label` string (optional)
* `sublabel` string (optional) _macOS_ - Available in macOS >= 14.4
* `toolTip` string (optional) _macOS_ - Hover text for this menu item.
* `accelerator` string (optional) - An [Accelerator](../tutorial/keyboard-shortcuts.md#accelerators) string.
* `accelerator` [Accelerator](accelerator.md) (optional)
* `icon` ([NativeImage](native-image.md) | string) (optional)
* `enabled` boolean (optional) - If false, the menu item will be greyed out and
unclickable.
@@ -64,13 +60,88 @@ See [`Menu`](menu.md) for examples.
> [!NOTE]
> `acceleratorWorksWhenHidden` is specified as being macOS-only because accelerators always work when items are hidden on Windows and Linux. The option is exposed to users to give them the option to turn it off, as this is possible in native macOS development.
### Roles
Roles allow menu items to have predefined behaviors.
It is best to specify `role` for any menu item that matches a standard role,
rather than trying to manually implement the behavior in a `click` function.
The built-in `role` behavior will give the best native experience.
The `label` and `accelerator` values are optional when using a `role` and will
default to appropriate values for each platform.
Every menu item must have either a `role`, `label`, or in the case of a separator
a `type`.
The `role` property can have following values:
* `undo`
* `about` - Trigger a native about panel (custom message box on Window, which does not provide its own).
* `redo`
* `cut`
* `copy`
* `paste`
* `pasteAndMatchStyle`
* `selectAll`
* `delete`
* `minimize` - Minimize current window.
* `close` - Close current window.
* `quit` - Quit the application.
* `reload` - Reload the current window.
* `forceReload` - Reload the current window ignoring the cache.
* `toggleDevTools` - Toggle developer tools in the current window.
* `togglefullscreen` - Toggle full screen mode on the current window.
* `resetZoom` - Reset the focused page's zoom level to the original size.
* `zoomIn` - Zoom in the focused page by 10%.
* `zoomOut` - Zoom out the focused page by 10%.
* `toggleSpellChecker` - Enable/disable builtin spell checker.
* `fileMenu` - Whole default "File" menu (Close / Quit)
* `editMenu` - Whole default "Edit" menu (Undo, Copy, etc.).
* `viewMenu` - Whole default "View" menu (Reload, Toggle Developer Tools, etc.)
* `windowMenu` - Whole default "Window" menu (Minimize, Zoom, etc.).
The following additional roles are available on _macOS_:
* `appMenu` - Whole default "App" menu (About, Services, etc.)
* `hide` - Map to the `hide` action.
* `hideOthers` - Map to the `hideOtherApplications` action.
* `unhide` - Map to the `unhideAllApplications` action.
* `showSubstitutions` - Map to the `orderFrontSubstitutionsPanel` action.
* `toggleSmartQuotes` - Map to the `toggleAutomaticQuoteSubstitution` action.
* `toggleSmartDashes` - Map to the `toggleAutomaticDashSubstitution` action.
* `toggleTextReplacement` - Map to the `toggleAutomaticTextReplacement` action.
* `startSpeaking` - Map to the `startSpeaking` action.
* `stopSpeaking` - Map to the `stopSpeaking` action.
* `front` - Map to the `arrangeInFront` action.
* `zoom` - Map to the `performZoom` action.
* `toggleTabBar` - Map to the `toggleTabBar` action.
* `selectNextTab` - Map to the `selectNextTab` action.
* `selectPreviousTab` - Map to the `selectPreviousTab` action.
* `showAllTabs` - Map to the `showAllTabs` action.
* `mergeAllWindows` - Map to the `mergeAllWindows` action.
* `moveTabToNewWindow` - Map to the `moveTabToNewWindow` action.
* `window` - The submenu is a "Window" menu.
* `help` - The submenu is a "Help" menu.
* `services` - The submenu is a ["Services"](https://developer.apple.com/documentation/appkit/nsapplication/1428608-servicesmenu?language=objc) menu. This is only intended for use in the Application Menu and is _not_ the same as the "Services" submenu used in context menus in macOS apps, which is not implemented in Electron.
* `recentDocuments` - The submenu is an "Open Recent" menu.
* `clearRecentDocuments` - Map to the `clearRecentDocuments` action.
* `shareMenu` - The submenu is [share menu][ShareMenu]. The `sharingItem` property must also be set to indicate the item to share.
When specifying a `role` on macOS, `label` and `accelerator` are the only
options that will affect the menu item. All other options will be ignored.
Lowercase `role`, e.g. `toggledevtools`, is still supported.
> [!NOTE]
> The `enabled` and `visibility` properties are not available for top-level menu items in the tray on macOS.
### Instance Properties
The following properties are available on instances of `MenuItem`:
#### `menuItem.id`
A `string` indicating the item's unique id. This property can be
A `string` indicating the item's unique id, this property can be
dynamically changed.
#### `menuItem.label`
@@ -128,17 +199,17 @@ A `string` indicating the item's hover text.
#### `menuItem.enabled`
A `boolean` indicating whether the item is enabled. This property can be
A `boolean` indicating whether the item is enabled, this property can be
dynamically changed.
#### `menuItem.visible`
A `boolean` indicating whether the item is visible. This property can be
A `boolean` indicating whether the item is visible, this property can be
dynamically changed.
#### `menuItem.checked`
A `boolean` indicating whether the item is checked. This property can be
A `boolean` indicating whether the item is checked, this property can be
dynamically changed.
A `checkbox` menu item will toggle the `checked` property on and off when
@@ -169,3 +240,5 @@ A `number` indicating an item's sequential unique id.
#### `menuItem.menu`
A `Menu` that the item is a part of.
[ShareMenu]: https://developer.apple.com/design/human-interface-guidelines/macos/extensions/share-extensions/

View File

@@ -6,13 +6,6 @@
Process: [Main](../glossary.md#main-process)
> [!TIP]
> See also: [A detailed guide about how to implement menus in your application](../tutorial/menus.md).
> [!WARNING]
> Electron's built-in classes cannot be subclassed in user code.
> For more information, see [the FAQ](../faq.md#class-inheritance-does-not-work-with-electron-built-in-modules).
### `new Menu()`
Creates a new menu.
@@ -23,7 +16,7 @@ The `Menu` class has the following static methods:
#### `Menu.setApplicationMenu(menu)`
- `menu` Menu | null
* `menu` Menu | null
Sets `menu` as the application menu on macOS. On Windows and Linux, the
`menu` will be set as each window's top menu.
@@ -54,18 +47,18 @@ Returns `Menu | null` - The application menu, if set, or `null`, if not set.
#### `Menu.sendActionToFirstResponder(action)` _macOS_
- `action` string
* `action` string
Sends the `action` to the first responder of application. This is used for
emulating default macOS menu behaviors. Usually you would use the
[`role`](../tutorial/menus.md#roles) property of a [`MenuItem`](menu-item.md).
[`role`](menu-item.md#roles) property of a [`MenuItem`](menu-item.md).
See the [macOS Cocoa Event Handling Guide](https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/EventOverview/EventArchitecture/EventArchitecture.html#//apple_ref/doc/uid/10000060i-CH3-SW7)
for more information on macOS' native actions.
#### `Menu.buildFromTemplate(template)`
- `template` (MenuItemConstructorOptions | MenuItem)[]
* `template` (MenuItemConstructorOptions | MenuItem)[]
Returns `Menu`
@@ -80,50 +73,47 @@ The `menu` object has the following instance methods:
#### `menu.popup([options])`
- `options` Object (optional)
- `window` [BaseWindow](base-window.md) (optional) - Default is the focused window.
- `frame` [WebFrameMain](web-frame-main.md) (optional) - Provide the relevant frame
* `options` Object (optional)
* `window` [BaseWindow](base-window.md) (optional) - Default is the focused window.
* `frame` [WebFrameMain](web-frame-main.md) (optional) - Provide the relevant frame
if you want certain OS-level features such as Writing Tools on macOS to function correctly. Typically, this should be `params.frame` from the [`context-menu` event](web-contents.md#event-context-menu) on a WebContents, or the [`focusedFrame` property](web-contents.md#contentsfocusedframe-readonly) of a WebContents.
- `x` number (optional) - Default is the current mouse cursor position.
* `x` number (optional) - Default is the current mouse cursor position.
Must be declared if `y` is declared.
- `y` number (optional) - Default is the current mouse cursor position.
* `y` number (optional) - Default is the current mouse cursor position.
Must be declared if `x` is declared.
- `positioningItem` number (optional) _macOS_ - The index of the menu item to
* `positioningItem` number (optional) _macOS_ - The index of the menu item to
be positioned under the mouse cursor at the specified coordinates. Default
is -1.
- `sourceType` string (optional) _Windows_ _Linux_ - This should map to the `menuSourceType`
* `sourceType` string (optional) _Windows_ _Linux_ - This should map to the `menuSourceType`
provided by the `context-menu` event. It is not recommended to set this value manually,
only provide values you receive from other APIs or leave it `undefined`.
Can be `none`, `mouse`, `keyboard`, `touch`, `touchMenu`, `longPress`, `longTap`, `touchHandle`, `stylus`, `adjustSelection`, or `adjustSelectionReset`.
- `callback` Function (optional) - Called when menu is closed.
* `callback` Function (optional) - Called when menu is closed.
Pops up this menu as a context menu in the [`BaseWindow`](base-window.md).
> [!TIP]
> For more details, see the [Context Menu](../tutorial/context-menu.md) guide.
#### `menu.closePopup([window])`
- `window` [BaseWindow](base-window.md) (optional) - Default is the focused window.
* `window` [BaseWindow](base-window.md) (optional) - Default is the focused window.
Closes the context menu in the `window`.
#### `menu.append(menuItem)`
- `menuItem` [MenuItem](menu-item.md)
* `menuItem` [MenuItem](menu-item.md)
Appends the `menuItem` to the menu.
#### `menu.getMenuItemById(id)`
- `id` string
* `id` string
Returns `MenuItem | null` the item with the specified `id`
#### `menu.insert(pos, menuItem)`
- `pos` Integer
- `menuItem` [MenuItem](menu-item.md)
* `pos` Integer
* `menuItem` [MenuItem](menu-item.md)
Inserts the `menuItem` to the `pos` position of the menu.
@@ -139,7 +129,7 @@ Objects created with `new Menu` or returned by `Menu.buildFromTemplate` emit the
Returns:
- `event` Event
* `event` Event
Emitted when `menu.popup()` is called.
@@ -147,7 +137,7 @@ Emitted when `menu.popup()` is called.
Returns:
- `event` Event
* `event` Event
Emitted when a popup is closed either manually or with `menu.closePopup()`.
@@ -159,5 +149,296 @@ Emitted when a popup is closed either manually or with `menu.closePopup()`.
A `MenuItem[]` array containing the menu's items.
Each `Menu` consists of multiple [`MenuItem`](menu-item.md) instances and each `MenuItem`
can nest a `Menu` into its `submenu` property.
Each `Menu` consists of multiple [`MenuItem`](menu-item.md)s and each `MenuItem`
can have a submenu.
## Examples
An example of creating the application menu with the simple template API:
```js @ts-expect-error=[107]
const { app, Menu } = require('electron')
const isMac = process.platform === 'darwin'
const template = [
// { role: 'appMenu' }
...(isMac
? [{
label: app.name,
submenu: [
{ role: 'about' },
{ type: 'separator' },
{ role: 'services' },
{ type: 'separator' },
{ role: 'hide' },
{ role: 'hideOthers' },
{ role: 'unhide' },
{ type: 'separator' },
{ role: 'quit' }
]
}]
: []),
// { role: 'fileMenu' }
{
label: 'File',
submenu: [
isMac ? { role: 'close' } : { role: 'quit' }
]
},
// { role: 'editMenu' }
{
label: 'Edit',
submenu: [
{ role: 'undo' },
{ role: 'redo' },
{ type: 'separator' },
{ role: 'cut' },
{ role: 'copy' },
{ role: 'paste' },
...(isMac
? [
{ role: 'pasteAndMatchStyle' },
{ role: 'delete' },
{ role: 'selectAll' },
{ type: 'separator' },
{
label: 'Speech',
submenu: [
{ role: 'startSpeaking' },
{ role: 'stopSpeaking' }
]
}
]
: [
{ role: 'delete' },
{ type: 'separator' },
{ role: 'selectAll' }
])
]
},
// { role: 'viewMenu' }
{
label: 'View',
submenu: [
{ role: 'reload' },
{ role: 'forceReload' },
{ role: 'toggleDevTools' },
{ type: 'separator' },
{ role: 'resetZoom' },
{ role: 'zoomIn' },
{ role: 'zoomOut' },
{ type: 'separator' },
{ role: 'togglefullscreen' }
]
},
// { role: 'windowMenu' }
{
label: 'Window',
submenu: [
{ role: 'minimize' },
{ role: 'zoom' },
...(isMac
? [
{ type: 'separator' },
{ role: 'front' },
{ type: 'separator' },
{ role: 'window' }
]
: [
{ role: 'close' }
])
]
},
{
role: 'help',
submenu: [
{
label: 'Learn More',
click: async () => {
const { shell } = require('electron')
await shell.openExternal('https://electronjs.org')
}
}
]
}
]
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
```
### Render process
To create menus initiated by the renderer process, send the required
information to the main process using IPC and have the main process display the
menu on behalf of the renderer.
Below is an example of showing a menu when the user right clicks the page:
```js @ts-expect-error=[21]
// renderer
window.addEventListener('contextmenu', (e) => {
e.preventDefault()
ipcRenderer.send('show-context-menu')
})
ipcRenderer.on('context-menu-command', (e, command) => {
// ...
})
// main
ipcMain.on('show-context-menu', (event) => {
const template = [
{
label: 'Menu Item 1',
click: () => { event.sender.send('context-menu-command', 'menu-item-1') }
},
{ type: 'separator' },
{ label: 'Menu Item 2', type: 'checkbox', checked: true }
]
const menu = Menu.buildFromTemplate(template)
menu.popup({ window: BrowserWindow.fromWebContents(event.sender) })
})
```
## Notes on macOS Application Menu
macOS has a completely different style of application menu from Windows and
Linux. Here are some notes on making your app's menu more native-like.
### Standard Menus
On macOS there are many system-defined standard menus, like the [`Services`](https://developer.apple.com/documentation/appkit/nsapplication/1428608-servicesmenu?language=objc) and
`Windows` menus. To make your menu a standard menu, you should set your menu's
`role` to one of the following and Electron will recognize them and make them
become standard menus:
* `window`
* `help`
* `services`
### Standard Menu Item Actions
macOS has provided standard actions for some menu items, like `About xxx`,
`Hide xxx`, and `Hide Others`. To set the action of a menu item to a standard
action, you should set the `role` attribute of the menu item.
### Main Menu's Name
On macOS the label of the application menu's first item is always your app's
name, no matter what label you set. To change it, modify your app bundle's
`Info.plist` file. See
[About Information Property List Files][AboutInformationPropertyListFiles]
for more information.
### Menu Sublabels
Menu sublabels, or [subtitles](https://developer.apple.com/documentation/appkit/nsmenuitem/subtitle?language=objc), can be added to menu items using the `sublabel` option. Below is an example based on the renderer example above:
```js @ts-expect-error=[12]
// main
ipcMain.on('show-context-menu', (event) => {
const template = [
{
label: 'Menu Item 1',
sublabel: 'Subtitle 1',
click: () => { event.sender.send('context-menu-command', 'menu-item-1') }
},
{ type: 'separator' },
{ label: 'Menu Item 2', sublabel: 'Subtitle 2', type: 'checkbox', checked: true }
]
const menu = Menu.buildFromTemplate(template)
menu.popup({ window: BrowserWindow.fromWebContents(event.sender) })
})
```
## Setting Menu for Specific Browser Window (_Linux_ _Windows_)
The [`setMenu` method][setMenu] of browser windows can set the menu of certain
browser windows.
## Menu Item Position
You can make use of `before`, `after`, `beforeGroupContaining`, `afterGroupContaining` and `id` to control how the item will be placed when building a menu with `Menu.buildFromTemplate`.
* `before` - Inserts this item before the item with the specified id. If the
referenced item doesn't exist the item will be inserted at the end of
the menu. Also implies that the menu item in question should be placed in the same “group” as the item.
* `after` - Inserts this item after the item with the specified id. If the
referenced item doesn't exist the item will be inserted at the end of
the menu. Also implies that the menu item in question should be placed in the same “group” as the item.
* `beforeGroupContaining` - Provides a means for a single context menu to declare
the placement of their containing group before the containing group of the item with the specified id.
* `afterGroupContaining` - Provides a means for a single context menu to declare
the placement of their containing group after the containing group of the item with the specified id.
By default, items will be inserted in the order they exist in the template unless one of the specified positioning keywords is used.
### Examples
Template:
```js
[
{ id: '1', label: 'one' },
{ id: '2', label: 'two' },
{ id: '3', label: 'three' },
{ id: '4', label: 'four' }
]
```
Menu:
```sh
- 1
- 2
- 3
- 4
```
Template:
```js
[
{ id: '1', label: 'one' },
{ type: 'separator' },
{ id: '3', label: 'three', beforeGroupContaining: ['1'] },
{ id: '4', label: 'four', afterGroupContaining: ['2'] },
{ type: 'separator' },
{ id: '2', label: 'two' }
]
```
Menu:
```sh
- 3
- 4
- ---
- 1
- ---
- 2
```
Template:
```js
[
{ id: '1', label: 'one', after: ['3'] },
{ id: '2', label: 'two', before: ['1'] },
{ id: '3', label: 'three' }
]
```
Menu:
```sh
- ---
- 3
- 2
- 1
```
[AboutInformationPropertyListFiles]: https://developer.apple.com/library/ios/documentation/general/Reference/InfoPlistKeyReference/Articles/AboutInformationPropertyListFiles.html
[setMenu]: browser-window.md#winsetmenumenu-linux-windows

View File

@@ -37,10 +37,6 @@ ipcRenderer.on('port', (e) => {
})
```
> [!WARNING]
> Electron's built-in classes cannot be subclassed in user code.
> For more information, see [the FAQ](../faq.md#class-inheritance-does-not-work-with-electron-built-in-modules).
### Instance Properties
#### `channel.port1`

View File

@@ -4,9 +4,12 @@
Process: [Main](../glossary.md#main-process)
> [!NOTE]
> If you want to show notifications from a renderer process you should use the
> [web Notifications API](../tutorial/notifications.md)
:::info Renderer process notifications
If you want to show notifications from a renderer process you should use the
[web Notifications API](../tutorial/notifications.md)
:::
## Class: Notification
@@ -18,10 +21,6 @@ Process: [Main](../glossary.md#main-process)
It creates a new `Notification` with native properties as set by the `options`.
> [!WARNING]
> Electron's built-in classes cannot be subclassed in user code.
> For more information, see [the FAQ](../faq.md#class-inheritance-does-not-work-with-electron-built-in-modules).
### Static Methods
The `Notification` class has the following static methods:

View File

@@ -73,6 +73,5 @@ command line flag is provided `--password-store="basic"`.
is provided `--password-store="kwallet"`.
* `kwallet5` - When the desktop session is `kde5` or if the following command line flag
is provided `--password-store="kwallet5"`.
* `kwallet6` - When the desktop session is `kde6` or if the following command line flag
is provided `--password-store="kwallet6"`.
* `kwallet6` - When the desktop session is `kde6`.
* `unknown` - When the function is called before app has emitted the `ready` event.

View File

@@ -13,10 +13,6 @@ For including the share menu as a submenu of other menus, please use the
Process: [Main](../glossary.md#main-process)
> [!WARNING]
> Electron's built-in classes cannot be subclassed in user code.
> For more information, see [the FAQ](../faq.md#class-inheritance-does-not-work-with-electron-built-in-modules).
### `new ShareMenu(sharingItem)`
* `sharingItem` SharingItem - The item to share.

View File

@@ -95,7 +95,6 @@
* `color` String (optional) _Windows_ _Linux_ - The CSS color of the Window Controls Overlay when enabled. Default is the system color.
* `symbolColor` String (optional) _Windows_ _Linux_ - The CSS color of the symbols on the Window Controls Overlay when enabled. Default is the system color.
* `height` Integer (optional) - The height of the title bar and Window Controls Overlay in pixels. Default is system height.
* `accentColor` boolean | string (optional) _Windows_ - The accent color for the window. By default, follows user preference in System Settings. Set to `false` to explicitly disable, or set the color in Hex, RGB, RGBA, HSL, HSLA or named CSS color format. Alpha values will be ignored.
* `trafficLightPosition` [Point](point.md) (optional) _macOS_ -
Set a custom position for the traffic light buttons in frameless windows.
* `roundedCorners` boolean (optional) _macOS_ _Windows_ - Whether frameless window

View File

@@ -1,195 +0,0 @@
# ColorSpace Object
* `primaries` string - The color primaries of the color space. Can be one of the following values:
* `bt709` - BT709 primaries (also used for sRGB)
* `bt470m` - BT470M primaries
* `bt470bg` - BT470BG primaries
* `smpte170m` - SMPTE170M primaries
* `smpte240m` - SMPTE240M primaries
* `film` - Film primaries
* `bt2020` - BT2020 primaries
* `smptest428-1` - SMPTEST428-1 primaries
* `smptest431-2` - SMPTEST431-2 primaries
* `p3` - P3 primaries
* `xyz-d50` - XYZ D50 primaries
* `adobe-rgb` - Adobe RGB primaries
* `apple-generic-rgb` - Apple Generic RGB primaries
* `wide-gamut-color-spin` - Wide Gamut Color Spin primaries
* `ebu-3213-e` - EBU 3213-E primaries
* `custom` - Custom primaries
* `invalid` - Invalid primaries
* `transfer` string - The transfer function of the color space. Can be one of the following values:
* `bt709` - BT709 transfer function
* `bt709-apple` - BT709 Apple transfer function
* `gamma18` - Gamma 1.8 transfer function
* `gamma22` - Gamma 2.2 transfer function
* `gamma24` - Gamma 2.4 transfer function
* `gamma28` - Gamma 2.8 transfer function
* `smpte170m` - SMPTE170M transfer function
* `smpte240m` - SMPTE240M transfer function
* `linear` - Linear transfer function
* `log` - Log transfer function
* `log-sqrt` - Log Square Root transfer function
* `iec61966-2-4` - IEC61966-2-4 transfer function
* `bt1361-ecg` - BT1361 ECG transfer function
* `srgb` - sRGB transfer function
* `bt2020-10` - BT2020-10 transfer function
* `bt2020-12` - BT2020-12 transfer function
* `pq` - PQ (Perceptual Quantizer) transfer function
* `smptest428-1` - SMPTEST428-1 transfer function
* `hlg` - HLG (Hybrid Log-Gamma) transfer function
* `srgb-hdr` - sRGB HDR transfer function
* `linear-hdr` - Linear HDR transfer function
* `custom` - Custom transfer function
* `custom-hdr` - Custom HDR transfer function
* `scrgb-linear-80-nits` - scRGB Linear 80 nits transfer function
* `invalid` - Invalid transfer function
* `matrix` string - The color matrix of the color space. Can be one of the following values:
* `rgb` - RGB matrix
* `bt709` - BT709 matrix
* `fcc` - FCC matrix
* `bt470bg` - BT470BG matrix
* `smpte170m` - SMPTE170M matrix
* `smpte240m` - SMPTE240M matrix
* `ycocg` - YCoCg matrix
* `bt2020-ncl` - BT2020 NCL matrix
* `ydzdx` - YDzDx matrix
* `gbr` - GBR matrix
* `invalid` - Invalid matrix
* `range` string - The color range of the color space. Can be one of the following values:
* `limited` - Limited color range (RGB values ranging from 16 to 235)
* `full` - Full color range (RGB values from 0 to 255)
* `derived` - Range defined by the transfer function and matrix
* `invalid` - Invalid range
## Common `ColorSpace` definitions
### Standard Color Spaces
**sRGB**:
```js
const cs = {
primaries: 'bt709',
transfer: 'srgb',
matrix: 'rgb',
range: 'full'
}
```
**Display P3**:
```js
const cs = {
primaries: 'p3',
transfer: 'srgb',
matrix: 'rgb',
range: 'full'
}
```
**XYZ D50**:
```js
const cs = {
primaries: 'xyz-d50',
transfer: 'linear',
matrix: 'rgb',
range: 'full'
}
```
### HDR Color Spaces
**Extended sRGB** (extends sRGB to all real values):
```js
const cs = {
primaries: 'bt709',
transfer: 'srgb-hdr',
matrix: 'rgb',
range: 'full'
}
```
**scRGB Linear** (linear transfer function for all real values):
```js
const cs = {
primaries: 'bt709',
transfer: 'linear-hdr',
matrix: 'rgb',
range: 'full'
}
```
**scRGB Linear 80 Nits** (with an SDR white level of 80 nits):
```js
const cs = {
primaries: 'bt709',
transfer: 'scrgb-linear-80-nits',
matrix: 'rgb',
range: 'full'
}
```
**HDR10** (BT.2020 primaries with PQ transfer function):
```js
const cs = {
primaries: 'bt2020',
transfer: 'pq',
matrix: 'rgb',
range: 'full'
}
```
**HLG** (BT.2020 primaries with HLG transfer function):
```js
const cs = {
primaries: 'bt2020',
transfer: 'hlg',
matrix: 'rgb',
range: 'full'
}
```
### Video Color Spaces
**Rec. 601** (SDTV):
```js
const cs = {
primaries: 'smpte170m',
transfer: 'smpte170m',
matrix: 'smpte170m',
range: 'limited'
}
```
**Rec. 709** (HDTV):
```js
const cs = {
primaries: 'bt709',
transfer: 'bt709',
matrix: 'bt709',
range: 'limited'
}
```
**JPEG** (typical color space for JPEG images):
```js
const cs = {
primaries: 'bt709',
transfer: 'srgb',
matrix: 'smpte170m',
range: 'full'
}
```

View File

@@ -6,11 +6,3 @@
* `productId` Integer - The USB product ID.
* `serialNumber` string (optional) - The USB device serial number.
* `guid` string (optional) - Unique identifier for the HID interface. A device may have multiple HID interfaces.
* `collections` Object[] - an array of report formats. See [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/API/HIDDevice/collections) for more.
* `usage` Integer - An integer representing the usage ID component of the HID usage associated with this collection.
* `usagePage` Integer - An integer representing the usage page component of the HID usage associated with this collection.
* `type` Integer - An 8-bit value representing the collection type, which describes a different relationship between the grouped items.
* `children` Object[] - An array of sub-collections which takes the same format as a top-level collection.
* `inputReports` Object[] - An array of inputReport items which represent individual input reports described in this collection.
* `outputReports` Object[] - An array of outputReport items which represent individual output reports described in this collection.
* `featureReports` Object[] - An array of featureReport items which represent individual feature reports described in this collection.

View File

@@ -2,5 +2,5 @@
* `type` string - The type of the event, can be `rawKeyDown`, `keyDown`, `keyUp` or `char`.
* `keyCode` string - The character that will be sent
as the keyboard event. Should only use valid [Accelerator](../../tutorial/keyboard-shortcuts.md#accelerators)
key codes.
as the keyboard event. Should only use the valid key codes in
[Accelerator](../accelerator.md).

View File

@@ -1,35 +1,17 @@
# USBDevice Object
* `configuration` Object (optional) - A [USBConfiguration](https://developer.mozilla.org/en-US/docs/Web/API/USBConfiguration) object containing information about the currently selected configuration of a USB device.
* `configurationValue` Integer - the configuration value of this configuration.
* `configurationName` string - the name provided by the device to describe this configuration.
* `interfaces` Object[] - An array of [USBInterface](https://developer.mozilla.org/en-US/docs/Web/API/USBInterface) objects containing information about an interface provided by the USB device.
* `interfaceNumber` Integer - the interface number of this interface.
* `alternate` Object - the currently selected alternative configuration of this interface.
* `alternateSetting` Integer - the alternate setting number of this interface.
* `interfaceClass` Integer - the class of this interface. See [USB.org](https://www.usb.org/defined-class-codes) for class code descriptions.
* `interfaceSubclass` Integer - the subclass of this interface.
* `interfaceProtocol` Integer - the protocol supported by this interface.
* `interfaceName` string (optional) - the name of the interface, if one is provided by the device.
* `endpoints` Object[] - an array containing instances of the [USBEndpoint interface](https://developer.mozilla.org/en-US/docs/Web/API/USBEndpoint) describing each of the endpoints that are part of this interface.
* `endpointNumber` Integer - this endpoint's "endpoint number" which is a value from 1 to 15.
* `direction` string - the direction in which this endpoint transfers data - can be either 'in' or 'out'.
* `type` string - the type of this endpoint - can be either 'bulk', 'interrupt', or 'isochronous'.
* `packetSize` Integer - the size of the packets that data sent through this endpoint will be divided into.
* `alternates` Object[] - an array containing instances of the [USBAlternateInterface](https://developer.mozilla.org/en-US/docs/Web/API/USBAlternateInterface) interface describing each of the alternative configurations possible for this interface.
* `configurations` Object[] - An array of [USBConfiguration](https://developer.mozilla.org/en-US/docs/Web/API/USBConfiguration) interfaces for controlling a paired USB device.
* `deviceClass` Integer - The device class for the communication interface supported by the device.
* `deviceId` string - Unique identifier for the device.
* `deviceProtocol` Integer - The device protocol for the communication interface supported by the device.
* `deviceSubclass` Integer - The device subclass for the communication interface supported by the device.
* `deviceVersionMajor` Integer - The major version number of the device as defined by the device manufacturer.
* `deviceVersionMinor` Integer - The minor version number of the device as defined by the device manufacturer.
* `deviceVersionSubminor` Integer - The subminor version number of the device as defined by the device manufacturer.
* `manufacturerName` string (optional) - The manufacturer name of the device.
* `vendorId` Integer - The USB vendor ID.
* `productId` Integer - The USB product ID.
* `productName` string (optional) - Name of the device.
* `serialNumber` string (optional) - The USB device serial number.
* `usbVersionMajor` Integer - The USB protocol major version supported by the device.
* `usbVersionMinor` Integer - The USB protocol minor version supported by the device.
* `usbVersionSubminor` Integer - The USB protocol subminor version supported by the device.
* `vendorId` Integer - The USB vendor ID.
* `manufacturerName` string (optional) - The manufacturer name of the device.
* `usbVersionMajor` Integer - The USB protocol major version supported by the device
* `usbVersionMinor` Integer - The USB protocol minor version supported by the device
* `usbVersionSubminor` Integer - The USB protocol subminor version supported by the device
* `deviceClass` Integer - The device class for the communication interface supported by the device
* `deviceSubclass` Integer - The device subclass for the communication interface supported by the device
* `deviceProtocol` Integer - The device protocol for the communication interface supported by the device
* `deviceVersionMajor` Integer - The major version number of the device as defined by the device manufacturer.
* `deviceVersionMinor` Integer - The minor version number of the device as defined by the device manufacturer.
* `deviceVersionSubminor` Integer - The subminor version number of the device as defined by the device manufacturer.

View File

@@ -149,6 +149,7 @@
`WebContents` when the preferred size changes. Default is `false`.
* `transparent` boolean (optional) - Whether to enable background transparency for the guest page. Default is `true`. **Note:** The guest page's text and background colors are derived from the [color scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme) of its root element. When transparency is enabled, the text color will still change accordingly but the background will remain transparent.
* `enableDeprecatedPaste` boolean (optional) _Deprecated_ - Whether to enable the `paste` [execCommand](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand). Default is `false`.
* `enableCornerSmoothingCSS` boolean (optional) _Experimental_ - Whether the [`-electron-corner-smoothing` CSS rule](../corner-smoothing-css.md) is enabled. Default is `true`.
[chrome-content-scripts]: https://developer.chrome.com/extensions/content_scripts#execution-environment
[runtime-enabled-features]: https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/platform/runtime_enabled_features.json5

View File

@@ -1,9 +1,5 @@
# TouchBar
> [!WARNING]
> Electron's built-in classes cannot be subclassed in user code.
> For more information, see [the FAQ](../faq.md#class-inheritance-does-not-work-with-electron-built-in-modules).
## Class: TouchBar
> Create TouchBar layouts for native macOS applications

View File

@@ -8,7 +8,7 @@ Process: [Main](../glossary.md#main-process)
`Tray` is an [EventEmitter][event-emitter].
```js title='Creating a basic tray menu'
```js
const { app, Menu, Tray } = require('electron')
let tray = null
@@ -25,13 +25,6 @@ app.whenReady().then(() => {
})
```
> [!TIP]
> See also: [A detailed guide about how to implement Tray menus](../tutorial/tray.md).
> [!WARNING]
> Electron's built-in classes cannot be subclassed in user code.
> For more information, see [the FAQ](../faq.md#class-inheritance-does-not-work-with-electron-built-in-modules).
**Platform Considerations**
**Linux**
@@ -332,47 +325,3 @@ The `bounds` of this tray icon as `Object`.
Returns `boolean` - Whether the tray icon is destroyed.
[event-emitter]: https://nodejs.org/api/events.html#events_class_eventemitter
## Platform considerations
### Linux
* Tray icon uses [StatusNotifierItem](https://www.freedesktop.org/wiki/Specifications/StatusNotifierItem/)
by default, when it is not available in user's desktop environment the
`GtkStatusIcon` will be used instead.
* The `click` event is emitted when the tray icon receives activation from
user, however the StatusNotifierItem spec does not specify which action would
cause an activation, for some environments it is left mouse click, but for
some it might be double left mouse click.
* In order for changes made to individual `MenuItem`s to take effect,
you have to call `setContextMenu` again. For example:
```js
const { app, Menu, Tray } = require('electron')
let appIcon = null
app.whenReady().then(() => {
appIcon = new Tray('/path/to/my/icon')
const contextMenu = Menu.buildFromTemplate([
{ label: 'Item1', type: 'radio' },
{ label: 'Item2', type: 'radio' }
])
// Make a change to the context menu
contextMenu.items[1].checked = false
// Call this again for Linux because we modified the context menu
appIcon.setContextMenu(contextMenu)
})
```
### macOS
* Icons passed to the Tray constructor should be [Template Images](native-image.md#template-image-macos).
* To make sure your icon isn't grainy on retina monitors, be sure your `@2x` image is 144dpi.
* If you are bundling your application (e.g., with webpack for development), be sure that the file names are not being mangled or hashed. The filename needs to end in Template, and the `@2x` image needs to have the same filename as the standard image, or MacOS will not magically invert your image's colors or use the high density image.
* 16x16 (72dpi) and 32x32@2x (144dpi) work well for most icons.
### Windows
* It is recommended to use `ICO` icons to get best visual effects.

View File

@@ -26,10 +26,6 @@ Process: [Main](../glossary.md#main-process)
`View` is an [EventEmitter][event-emitter].
> [!WARNING]
> Electron's built-in classes cannot be subclassed in user code.
> For more information, see [the FAQ](../faq.md#class-inheritance-does-not-work-with-electron-built-in-modules).
### `new View()`
Creates a new `View`.

View File

@@ -33,10 +33,6 @@ Process: [Main](../glossary.md#main-process)
`WebContentsView` is an [EventEmitter][event-emitter].
> [!WARNING]
> Electron's built-in classes cannot be subclassed in user code.
> For more information, see [the FAQ](../faq.md#class-inheritance-does-not-work-with-electron-built-in-modules).
### `new WebContentsView([options])`
* `options` Object (optional)

View File

@@ -486,6 +486,16 @@ Emitted when the web page becomes unresponsive.
Emitted when the unresponsive web page becomes responsive again.
#### Event: 'plugin-crashed'
Returns:
* `event` Event
* `name` string
* `version` string
Emitted when a plugin process has crashed.
#### Event: 'destroyed'
Emitted when `webContents` is destroyed.

View File

@@ -237,11 +237,6 @@ not used again.
A `string` representing the frame name.
#### `frame.frameToken` _Readonly_
A `string` which uniquely identifies the frame within its associated renderer
process. This is equivalent to [`webFrame.frameToken`](web-frame.md#webframeframetoken-readonly).
#### `frame.osProcessId` _Readonly_
An `Integer` representing the operating system `pid` of the process which owns this frame.

View File

@@ -67,7 +67,7 @@ Sets the maximum and minimum pinch-to-zoom level.
> [!NOTE]
> Visual zoom only applies to pinch-to-zoom behavior. Cmd+/-/0 zoom shortcuts are
> controlled by the 'zoomIn', 'zoomOut', and 'resetZoom' MenuItem roles in the application
> Menu. To disable shortcuts, manually [define the Menu](../tutorial/menus.md) and omit zoom roles
> Menu. To disable shortcuts, manually [define the Menu](./menu.md#examples) and omit zoom roles
> from the definition.
### `webFrame.setSpellCheckProvider(language, provider)`
@@ -265,7 +265,7 @@ Returns `WebFrame` - A child of `webFrame` with the supplied `name`, `null`
would be returned if there's no such frame or if the frame is not in the current
renderer process.
### `webFrame.findFrameByRoutingId(routingId)` _Deprecated_
### `webFrame.findFrameByRoutingId(routingId)`
* `routingId` Integer - An `Integer` representing the unique frame id in the
current renderer process. Routing IDs can be retrieved from `WebFrame`
@@ -274,15 +274,6 @@ renderer process.
Returns `WebFrame` - that has the supplied `routingId`, `null` if not found.
### `webFrame.findFrameByToken(frameToken)`
* `frameToken` string - A `string` representing the unique frame id in the
current renderer process. Frame tokens can be retrieved from `WebFrame`
instances (`webFrame.frameToken`) and can also be retrieved from
`WebFrameMain` instances using `webFrameMain.frameToken`.
Returns `WebFrame` - that has the supplied `frameToken`, `null` if not found.
### `webFrame.isWordMisspelled(word)`
* `word` string - The word to be spellchecked.
@@ -327,14 +318,8 @@ A `WebFrame | null` representing next sibling frame, the property would be `null
`webFrame` is the last frame in its parent or if the next sibling is not in the
current renderer process.
### `webFrame.routingId` _Readonly_ _Deprecated_
### `webFrame.routingId` _Readonly_
An `Integer` representing the unique frame id in the current renderer process.
Distinct WebFrame instances that refer to the same underlying frame will have
the same `routingId`.
### `webFrame.frameToken` _Readonly_
A `string` representing the unique frame token in the current renderer process.
Distinct WebFrame instances that refer to the same underlying frame will have
the same `frameToken`.

View File

@@ -1002,6 +1002,15 @@ Returns:
Fired when the renderer process unexpectedly disappears. This is normally
because it was crashed or killed.
### Event: 'plugin-crashed'
Returns:
* `name` string
* `version` string
Fired when a plugin process is crashed.
### Event: 'destroyed'
Fired when the WebContents is destroyed.

View File

@@ -21,39 +21,6 @@ macOS 11 (Big Sur) is no longer supported by [Chromium](https://chromium-review.
Older versions of Electron will continue to run on Big Sur, but macOS 12 (Monterey)
or later will be required to run Electron v38.0.0 and higher.
### Removed: `plugin-crashed` event
The `plugin-crashed` event has been removed from `webContents`.
### Deprecated: `webFrame.routingId` property
The `routingId` property will be removed from `webFrame` objects.
You should use `webFrame.frameToken` instead.
### Deprecated: `webFrame.findFrameByRoutingId(routingId)`
The `webFrame.findFrameByRoutingId(routingId)` function will be removed.
You should use `webFrame.findFrameByToken(frameToken)` instead.
### Behavior Changed: window.open popups are always resizable
Per current [WHATWG spec](https://html.spec.whatwg.org/multipage/nav-history-apis.html#dom-open-dev), the `window.open` API will now always create a resizable popup window.
To restore previous behavior:
```js
webContents.setWindowOpenHandler((details) => {
return {
action: 'allow',
overrideBrowserWindowOptions: {
resizable: details.features.includes('resizable=yes')
}
}
})
```
## Planned Breaking API Changes (37.0)
### Utility Process unhandled rejection behavior change
@@ -69,16 +36,6 @@ process.on('unhandledRejection', () => {
})
```
### Behavior Changed: `process.exit()` kills utility process synchronously
Calling `process.exit()` in a utility process will now kill the utility process synchronously.
This brings the behavior of `process.exit()` in line with Node.js behavior.
Please refer to the
[Node.js docs](https://nodejs.org/docs/latest-v22.x/api/process.html#processexitcode) and
[PR #45690](https://github.com/electron/electron/pull/45690) to understand the potential
implications of that, e.g., when calling `console.log()` before `process.exit()`.
### Behavior Changed: WebUSB and WebSerial Blocklist Support
[WebUSB](https://developer.mozilla.org/en-US/docs/Web/API/WebUSB_API) and [Web Serial](https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API) now support the [WebUSB Blocklist](https://wicg.github.io/webusb/#blocklist) and [Web Serial Blocklist](https://wicg.github.io/serial/#blocklist) used by Chromium and outlined in their respective specifications.

View File

@@ -7,8 +7,11 @@ Follow the guidelines below for building **Electron itself** on Linux, for the p
## Prerequisites
* At least 25GB disk space and 8GB RAM.
* Python >= 3.9.
* [Node.js](https://nodejs.org/download/) >= 22.12.0
* Python >= 3.7.
* Node.js. There are various ways to install Node. You can download
source code from [nodejs.org](https://nodejs.org) and compile it.
Doing so permits installing Node on your own home directory as a standard user.
Or try repositories such as [NodeSource](https://nodesource.com/blog/nodejs-v012-iojs-and-the-nodesource-linux-repositories).
* [clang](https://clang.llvm.org/get_started.html) 3.4 or later.
* Development headers of GTK 3 and libnotify.

View File

@@ -10,8 +10,8 @@ Follow the guidelines below for building **Electron itself** on macOS, for the p
* [Xcode](https://developer.apple.com/technologies/tools/). The exact version
needed depends on what branch you are building, but the latest version of
Xcode is generally a good bet for building `main`.
* Python >= 3.9
* [Node.js](https://nodejs.org/download/) >= 22.12.0
* [node.js](https://nodejs.org) (external)
* Python >= 3.7
### Arm64-specific prerequisites

View File

@@ -14,7 +14,7 @@ Follow the guidelines below for building **Electron itself** on Windows, for the
set a few environment variables to point the toolchains to your installation path.
* `vs2022_install = DRIVE:\path\to\Microsoft Visual Studio\2022\Community`, replacing `2022` and `Community` with your installed versions and replacing `DRIVE:` with the drive that Visual Studio is on. Often, this will be `C:`.
* `WINDOWSSDKDIR = DRIVE:\path\to\Windows Kits\10`, replacing `DRIVE:` with the drive that Windows Kits is on. Often, this will be `C:`.
* [Node.js](https://nodejs.org/download/) >= 22.12.0
* [Node.js](https://nodejs.org/download/)
* [Git](https://git-scm.com)
* Debugging Tools for Windows of Windows SDK 10.0.15063.468 if you plan on
creating a full distribution since `symstore.exe` is used for creating a symbol

View File

@@ -60,12 +60,12 @@ namespace electron {
namespace api {
class ApiName : public gin::DeprecatedWrappable<ApiName> {
class ApiName : public gin::Wrappable<ApiName> {
public:
static gin::Handle<ApiName> Create(v8::Isolate* isolate);
// gin::Wrappable
static gin::DeprecatedWrapperInfo kWrapperInfo;
static gin::WrapperInfo kWrapperInfo;
gin::ObjectTemplateBuilder GetObjectTemplateBuilder(
v8::Isolate* isolate) override;
const char* GetTypeName() override;
@@ -90,7 +90,7 @@ namespace electron {
namespace api {
gin::DeprecatedWrapperInfo ApiName::kWrapperInfo = {gin::kEmbedderNativeGin};
gin::WrapperInfo ApiName::kWrapperInfo = {gin::kEmbedderNativeGin};
gin::ObjectTemplateBuilder ApiName::GetObjectTemplateBuilder(
v8::Isolate* isolate) {

View File

@@ -156,14 +156,6 @@ The effect is visible only on (some?) LCD screens. Even if you don't see a diffe
Notice that just setting the background in the CSS does not have the desired effect.
## Class inheritance does not work with Electron built-in modules
Electron classes cannot be subclassed with the [`extends`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/extends)
keyword (also known as class inheritance). This feature was never implemented in Electron due
to the added complexity it would add to C++/JavaScript interop in Electron's internals.
For more information, see [electron/electron#23](https://github.com/electron/electron/issues/23).
[memory-management]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management
[closures]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
[storage]: https://developer.mozilla.org/en-US/docs/Web/API/Storage

View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello World!</h1>
<p>Hit Alt+Ctrl+I on Windows or Opt+Cmd+I on Mac to see a message printed to the console.</p>
</body>
</html>

View File

@@ -0,0 +1,28 @@
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()
}
})

View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello World!</h1>
<p>Hit Alt+Shift+I on Windows, or Opt+Cmd+I on mac to see a message printed to the console.</p>
</body>
</html>

View File

@@ -0,0 +1,36 @@
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({
label: 'Electron',
submenu: [{
role: 'help',
accelerator: process.platform === 'darwin' ? 'Alt+Cmd+I' : 'Alt+Shift+I',
click: () => { console.log('Electron rocks!') }
}]
}))
Menu.setApplicationMenu(menu)
app.whenReady().then(createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})

View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello World!</h1>
<p>Right click the dock icon to see the custom menu options.</p>
</body>
</html>

View File

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

View File

@@ -1,14 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Context Menu Demo</title>
</head>
<body>
<h1>Context Menu Demo</h1>
<!-- highlight-next-line -->
<textarea id="editable"></textarea>
</body>
</html>

View File

@@ -1,39 +0,0 @@
// Modules to control application life and create native browser window
const { app, BrowserWindow, ipcMain, Menu } = require('electron/main')
const path = require('node:path')
function createWindow () {
const mainWindow = new BrowserWindow({
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
mainWindow.loadFile('index.html')
const menu = Menu.buildFromTemplate([
{ role: 'copy' },
{ role: 'cut' },
{ role: 'paste' },
{ role: 'selectall' }
])
// highlight-start
ipcMain.on('context-menu', (event) => {
menu.popup({
window: BrowserWindow.fromWebContents(event.sender)
})
})
// highlight-end
}
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})

View File

@@ -1,11 +0,0 @@
const { ipcRenderer } = require('electron/renderer')
document.addEventListener('DOMContentLoaded', () => {
const textarea = document.getElementById('editable')
// highlight-start
textarea.addEventListener('contextmenu', (event) => {
event.preventDefault()
ipcRenderer.send('context-menu')
})
// highlight-end
})

View File

@@ -1,14 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Context Menu Demo</title>
</head>
<body>
<h1>Context Menu Demo</h1>
<!-- highlight-next-line -->
<textarea></textarea>
</body>
</html>

View File

@@ -1,32 +0,0 @@
const { app, BrowserWindow, Menu } = require('electron/main')
function createWindow () {
const win = new BrowserWindow()
// highlight-start
const menu = Menu.buildFromTemplate([
{ role: 'copy' },
{ role: 'cut' },
{ role: 'paste' },
{ role: 'selectall' }
])
win.webContents.on('context-menu', (_event, params) => {
// only show the context menu if the element is editable
if (params.isEditable) {
menu.popup()
}
})
// highlight-end
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})

View File

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

View File

@@ -0,0 +1,368 @@
// Modules to control application life and create native browser window
const {
BrowserWindow,
Menu,
MenuItem,
ipcMain,
app,
shell,
dialog,
autoUpdater
} = require('electron/main')
const path = require('node:path')
const menu = new Menu()
menu.append(new MenuItem({ label: 'Hello' }))
menu.append(new MenuItem({ type: 'separator' }))
menu.append(
new MenuItem({ label: 'Electron', type: 'checkbox', checked: true })
)
const template = [
{
label: 'Edit',
submenu: [
{
label: 'Undo',
accelerator: 'CmdOrCtrl+Z',
role: 'undo'
},
{
label: 'Redo',
accelerator: 'Shift+CmdOrCtrl+Z',
role: 'redo'
},
{
type: 'separator'
},
{
label: 'Cut',
accelerator: 'CmdOrCtrl+X',
role: 'cut'
},
{
label: 'Copy',
accelerator: 'CmdOrCtrl+C',
role: 'copy'
},
{
label: 'Paste',
accelerator: 'CmdOrCtrl+V',
role: 'paste'
},
{
label: 'Select All',
accelerator: 'CmdOrCtrl+A',
role: 'selectall'
}
]
},
{
label: 'View',
submenu: [
{
label: 'Reload',
accelerator: 'CmdOrCtrl+R',
click: (item, focusedWindow) => {
if (focusedWindow) {
// on reload, start fresh and close any old
// open secondary windows
if (focusedWindow.id === 1) {
for (const win of BrowserWindow.getAllWindows()) {
if (win.id > 1) win.close()
}
}
focusedWindow.reload()
}
}
},
{
label: 'Toggle Full Screen',
accelerator: (() => {
if (process.platform === 'darwin') {
return 'Ctrl+Command+F'
} else {
return 'F11'
}
})(),
click: (item, focusedWindow) => {
if (focusedWindow) {
focusedWindow.setFullScreen(!focusedWindow.isFullScreen())
}
}
},
{
label: 'Toggle Developer Tools',
accelerator: (() => {
if (process.platform === 'darwin') {
return 'Alt+Command+I'
} else {
return 'Ctrl+Shift+I'
}
})(),
click: (item, focusedWindow) => {
if (focusedWindow) {
focusedWindow.webContents.toggleDevTools()
}
}
},
{
type: 'separator'
},
{
label: 'App Menu Demo',
click: function (item, focusedWindow) {
if (focusedWindow) {
const options = {
type: 'info',
title: 'Application Menu Demo',
buttons: ['Ok'],
message:
'This demo is for the Menu section, showing how to create a clickable menu item in the application menu.'
}
dialog.showMessageBox(focusedWindow, options, function () {})
}
}
}
]
},
{
label: 'Window',
role: 'window',
submenu: [
{
label: 'Minimize',
accelerator: 'CmdOrCtrl+M',
role: 'minimize'
},
{
label: 'Close',
accelerator: 'CmdOrCtrl+W',
role: 'close'
},
{
type: 'separator'
},
{
label: 'Reopen Window',
accelerator: 'CmdOrCtrl+Shift+T',
enabled: false,
key: 'reopenMenuItem',
click: () => {
app.emit('activate')
}
}
]
},
{
label: 'Help',
role: 'help',
submenu: [
{
label: 'Learn More',
click: () => {
shell.openExternal('https://electronjs.org')
}
}
]
}
]
function addUpdateMenuItems (items, position) {
if (process.mas) return
const version = app.getVersion()
const updateItems = [
{
label: `Version ${version}`,
enabled: false
},
{
label: 'Checking for Update',
enabled: false,
key: 'checkingForUpdate'
},
{
label: 'Check for Update',
visible: false,
key: 'checkForUpdate',
click: () => {
autoUpdater.checkForUpdates()
}
},
{
label: 'Restart and Install Update',
enabled: true,
visible: false,
key: 'restartToUpdate',
click: () => {
autoUpdater.quitAndInstall()
}
}
]
items.splice.apply(items, [position, 0].concat(updateItems))
}
function findReopenMenuItem () {
const menu = Menu.getApplicationMenu()
if (!menu) return
let reopenMenuItem
for (const item of menu.items) {
if (item.submenu) {
for (const subitem of item.submenu.items) {
if (subitem.key === 'reopenMenuItem') {
reopenMenuItem = subitem
}
}
}
}
return reopenMenuItem
}
if (process.platform === 'darwin') {
const name = app.getName()
template.unshift({
label: name,
submenu: [
{
label: `About ${name}`,
role: 'about'
},
{
type: 'separator'
},
{
label: 'Services',
role: 'services',
submenu: []
},
{
type: 'separator'
},
{
label: `Hide ${name}`,
accelerator: 'Command+H',
role: 'hide'
},
{
label: 'Hide Others',
accelerator: 'Command+Alt+H',
role: 'hideothers'
},
{
label: 'Show All',
role: 'unhide'
},
{
type: 'separator'
},
{
label: 'Quit',
accelerator: 'Command+Q',
click: () => {
app.quit()
}
}
]
})
// Window menu.
template[3].submenu.push(
{
type: 'separator'
},
{
label: 'Bring All to Front',
role: 'front'
}
)
addUpdateMenuItems(template[0].submenu, 1)
}
if (process.platform === 'win32') {
const helpMenu = template[template.length - 1].submenu
addUpdateMenuItems(helpMenu, 0)
}
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow
function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
// and load the index.html of the app.
mainWindow.loadFile('index.html')
// Open the DevTools.
// mainWindow.webContents.openDevTools()
// Emitted when the window is closed.
mainWindow.on('closed', function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
})
// Open external links in the default browser
mainWindow.webContents.on('will-navigate', (event, url) => {
event.preventDefault()
shell.openExternal(url)
})
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
createWindow()
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
})
// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
const reopenMenuItem = findReopenMenuItem()
if (reopenMenuItem) reopenMenuItem.enabled = true
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
// On macOS it is common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) {
createWindow()
}
})
app.on('browser-window-created', (event, win) => {
const reopenMenuItem = findReopenMenuItem()
if (reopenMenuItem) reopenMenuItem.enabled = false
win.webContents.on('context-menu', (e, params) => {
menu.popup(win, params.x, params.y)
})
})
ipcMain.on('show-context-menu', event => {
const win = BrowserWindow.fromWebContents(event.sender)
menu.popup(win)
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

View File

@@ -0,0 +1,5 @@
const { contextBridge, ipcRenderer } = require('electron/renderer')
contextBridge.exposeInMainWorld('electronAPI', {
showContextMenu: () => ipcRenderer.send('show-context-menu')
})

View File

@@ -0,0 +1,6 @@
// Tell main process to show the menu when demo button is clicked
const contextMenuBtn = document.getElementById('context-menu')
contextMenuBtn.addEventListener('click', () => {
window.electronAPI.showContextMenu()
})

View File

@@ -1,18 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Dock Menu Demo</title>
</head>
<body>
<h1>Dock Menu Demo</h1>
<ul>
<li>Create new BrowserWindow instances via the "New Window" option</li>
<li>Close all BrowserWindow instances via the "Close All Windows" option</li>
<li>Read the docs via the "Show Electron Docs" option</li>
</ul>
<script src="./renderer.js"></script>
</body>
</html>

View File

@@ -1,46 +0,0 @@
const { app, BrowserWindow, Menu } = require('electron/main')
const { shell } = require('electron/common')
function createWindow () {
const win = new BrowserWindow()
win.loadFile('index.html')
}
function closeAllWindows () {
const wins = BrowserWindow.getAllWindows()
for (const win of wins) {
win.close()
}
}
app.whenReady().then(() => {
createWindow()
const dockMenu = Menu.buildFromTemplate([
{
label: 'New Window',
click: () => { createWindow() }
},
{
label: 'Close All Windows',
click: () => { closeAllWindows() }
},
{
label: 'Open Electron Docs',
click: () => {
shell.openExternal('https://electronjs.org/docs')
}
}
// add more menu options to the array
])
app.dock.setMenu(dockMenu)
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})

View File

@@ -1 +0,0 @@
document.title = `${document.title} - ${new Date()}`

View File

@@ -1,19 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Tray Menu Demo</title>
</head>
<body>
<h1>Tray Menu Demo</h1>
<p>This app will stay running even after all windows are closed.</p>
<ul>
<li>Use the "Open App" menu item to focus the main window (or open one if it does not exist).</li>
<li>Change between red and green Tray icons with the "Set Green Icon" checkbox.</li>
<li>Give the Tray icon a title using the "Set Title" checkbox.</li>
<li>Quit the app using the "Quit" menu item.</li>
</ul>
</body>
</html>

View File

@@ -1,60 +0,0 @@
const { app, BrowserWindow, Menu, Tray } = require('electron/main')
const { nativeImage } = require('electron/common')
// save a reference to the Tray object globally to avoid garbage collection
let tray = null
function createWindow () {
const mainWindow = new BrowserWindow()
mainWindow.loadFile('index.html')
}
// The Tray object can only be instantiated after the 'ready' event is fired
app.whenReady().then(() => {
createWindow()
const red = nativeImage.createFromDataURL('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACTSURBVHgBpZKBCYAgEEV/TeAIjuIIbdQIuUGt0CS1gW1iZ2jIVaTnhw+Cvs8/OYDJA4Y8kR3ZR2/kmazxJbpUEfQ/Dm/UG7wVwHkjlQdMFfDdJMFaACebnjJGyDWgcnZu1/lrCrl6NCoEHJBrDwEr5NrT6ko/UV8xdLAC2N49mlc5CylpYh8wCwqrvbBGLoKGvz8Bfq0QPWEUo/EAAAAASUVORK5CYII=')
const green = nativeImage.createFromDataURL('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACOSURBVHgBpZLRDYAgEEOrEzgCozCCGzkCbKArOIlugJvgoRAUNcLRpvGH19TkgFQWkqIohhK8UEaKwKcsOg/+WR1vX+AlA74u6q4FqgCOSzwsGHCwbKliAF89Cv89tWmOT4VaVMoVbOBrdQUz+FrD6XItzh4LzYB1HFJ9yrEkZ4l+wvcid9pTssh4UKbPd+4vED2Nd54iAAAAAElFTkSuQmCC')
tray = new Tray(red)
tray.setToolTip('Tray Icon Demo')
const contextMenu = Menu.buildFromTemplate([
{
label: 'Open App',
click: () => {
const wins = BrowserWindow.getAllWindows()
if (wins.length === 0) {
createWindow()
} else {
wins[0].focus()
}
}
},
{
label: 'Set Green Icon',
type: 'checkbox',
click: ({ checked }) => {
checked ? tray.setImage(green) : tray.setImage(red)
}
},
{
label: 'Set Title',
type: 'checkbox',
click: ({ checked }) => {
checked ? tray.setTitle('Title') : tray.setTitle('')
}
},
{ role: 'quit' }
])
tray.setContextMenu(contextMenu)
})
app.on('window-all-closed', function () {
// This will prevent the app from closing when windows close
})
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

View File

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

View File

@@ -0,0 +1,18 @@
const { app, Tray, Menu, nativeImage } = require('electron/main')
let tray
app.whenReady().then(() => {
const icon = nativeImage.createFromDataURL('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KTMInWQAACsZJREFUWAmtWFlsXFcZ/u82++Jt7IyT2Em6ZFHTpAtWIzspEgjEUhA8VNAiIYEQUvuABBIUwUMkQIVKPCIoEiABLShISEBbhFJwIGRpIKRpbNeJ7bh2HHvssR3PPnPnLnzfmRlju6EQqUc+c++c8y/fv54z1uQOh+/7Glh0TD59TE/TND7lnfa4/64OKsM071QoeZpA/y9WWvk/B4XCC06TUC+Xyw8HTXNQ1+Ww6PpOrMebewXxvBueJ6/XHOdMJBL5J9Y97m2R0SS/wweE6JxkGx5dilWr1S/7dXsEa2o4+LyFmcFcaL5zbX3Y9gh5hpeWYpSB9XV5/H678V89BGYDXnHJlCsWn4gHrGc1K9CXxferOdvPOOKUfF8cH7nUyCtklQZXih/VNNlmirk3GdBSoIcRswW7/vVkLPYi5W2Uze8bh7J+4wLfh4dViFx5/nmrUi7/MhGNvrCkBfpeWqnW/7BUdadqntQ8zwr6vhUV34xpYnDynWvcmwQNaclDXsqgLMqkocPDw7fNx7d5qIX+/PmJxKGD6VdDkeh7ztyqOFfrokGCEWiiZ1mp0uITnuKAosaT7+pNxMYTyefutcQfbA+b1XLpH5fnF97/yD335Fu6mqTqsclDINBVmI4fDxw80KPAvJSt1MZtMcLiGxYUu83p4UkgnJZlqcl3LAj3WnTkIS9lUBYNPJjueVWgg7qocyOgliFqjZsg8gq5tRdiieQTf1gq15Y8CUbRZtyWOzZwc8lEqS3PTCtgqd13ieO68BQ2uNl64tXAewktrFuX2mPdkWAxn3sxnmx7sqUTJGqso8MGS9tbXFz8DMH8bblUX3T9QARVi8RV8qljfcJy0zRlaf6mzHEuzEtmekqCoZB4rqp0OmudHtUnlEWZlE0d1EWd1N3EozourcO65pw4eTIZQTW9VazJtbqvw9XwKVFQMsKDBuNhtp4uvGGFI+IDgKnpMjYyIis3ZsQMBIR7pONsIaMsyqRs6ohY1rPUSd3EQFDqo+kdZ3Fh4aupbdu+99uFQr2A1CBs4uEAjZjIFUMHi4dVxMXzCdCXQj4vBrwVCofl0ulTcv/DAxJJJBUPc8mpoyI2JDw7bFyT+ifTcSubyXytJ51+roWBxwG9Q73WWjZ7eSUU3//nXM0NI+x0PBGrTSgsLS9JFuFxHFrvSqIrJV279gi6tjiVspTza3JjZhY+0CQZj0mlWJSeHTslCro6eFqymCcVVN77kkGjs1p4sy2VOoSlOrFwT+XR+PjkgGaZ+ycKVbRTYUdVrmaImCvzk1dlFCEJdHRJ284+ie/ol0h7p7jFvExcvCCXzp2Rqem3pAMAiqWS6JGYhFI9Mjo6KjevXVUyKEuFHrKpY6JQ8TXT3D8+OTkAHBw6o6LCFo9ag3o4JtlCyTHEt5AxKvS6YUi5kJeZG3Py0NAxlLcJ9xti+K7Mjo/JfGZRuvv6Ze+9+yWEhDZAvzg3JyhX2d6/S7q6e+TimdOS7ElLKBZDwqvmj6rztayr1fVI1IoXi4PAcYZY1tPEEO1wEVlXgRFBDcmIXTqJsS+XyhKLJ5A/OpIVXXptWUYv/UvaenfIocEhMQ2EzHHErlXFCgQl3paU1eVl6QAY8sQTCSmVihKJx1V/ogvgIYF/pACdcMBhqONoHhF88/2d+bojyA6cRvje2IdFjoSjUSnBS8hgyS9lZOzKFdmPxO3o6gQIGzwuDn1dVSCtCKPy1pZXlATXqUsVYMLRmKo87vP4Y1ioqwCdCegmMYx3W/VPn8RrSDwwIMMbcEjkYo29JZVOy+ybI7K4eksODx1VSqvligpReSVLgySM/FI5h2q062jNyL3s7FtoAyGJIlx1225UmwJF6aJRJ3XzHXO9bWvsJa3jQFlBJkz6iuXdu32HzM7MyP0PPNgAU6ko4Qzp6b+flr8MD9OYJg9CwtzL5+T65ITs2bsP3mGxN/ZbBcOn0sk20gAkLQ+huXpFi8vkoY9AoyDjxTR1mbo6Ltt275HpN0dlNxQE40mVM8Ajjxx9VAGhAvQR1akZFCq799ADysMuQqOxh2FNmamEaz51ItGLfFD9+oUJoZkLowHoFA2mljUacqOMflKuVmHpfmnfvlMuvXZeStmMBIMhcWEdjgFJtrUjXI0KchAuAg0ilxLJNoRVBxhIBm0TjjKAuqjTqTs3CQZ6QUUMGFW7eiWMUg6w+yo8YMW7DqtqlZLkUDV2ISfd29KyDwk9MjYmMyOXxQIIKuShqo4VGFNBEgeDQYqVam5N5tEePFQgURIUBCsd1EWd1XrtDUUMLARD9bKaK5ytQ2Gb75g8WMiEP6VkfnZGevv6UF1vSBW5E0PFDAweFRvlfun8WVmamhDNrkmweQ0pwaPt6M4m8mgKTTFXqcrV0ZH1FKBg6qAu6qTuJiCV1Cp2Q0NDr9Uq5Ym+oMEDlSewsoRwrVBEaij7AJ4s7zrOpumxEdm15y6558GHJVe1Zezy6zJx6aJkpq5JFB4z6zVZmBiX1VWUP0IY4CFMYcpQdZ3xqIs6oftCE5DHKwd0q/tzOV8svdDb3nk8VnG9qmgQC0ZURz8Ur91alXgSByZ6ES9kZZTr/PR16UOCh+7dq0CWyyXJ4xqCQ0nKt9YQSlPue2gAeYZzD7yNLk0wmqAreb2WYSxAJ8Dget64wxtEBlDaqVOn/K5dB67t6+t5MhoMJuc8w8UPKiQ9CQR9JK5czhZAQxPt7TKF3OiAIisUViAD2Lg5d0P2HDgoKeRaW0enyqVwBJcO5fFG5dqa7h406qaeX8384uTZL5w9+UqxhYHFp0YLIYA9ddfu3T+4UJF6Rg+YAc9D0+RoIGP1ULhpWspr10evyK7+ftWTrk9PS/++A9KZSm26cih2mMOErem6n/ZsZwA2TM/MPHXs2LEftnSTbh0Q36mIIbx44cLvOnu3f+xUwbWLmoHTCUlF6g2jBQo/GnFrnGNqSHdvr+rIKGMW1KahwEBdzHft98aNwMr8zd8/NDDwccihc0hLi3GubRjY0Bm6H19fPvnZI4c/fHd7PJ2peXYZ+WQ26JufZELjQ6lbAQtnWre0d3apY8TFIdtAo+Qri6mupsB49lBMC+QXF0YefObZT8j0eKWlswVjEyCCOXHihPGb575VCvVuf3lvetsH9rXF0rla3cnhpoIGjgsUPhR3I4TMKYJQV1Z6WO02aEjHa5mNe3OPW3OPRHVrbXFh9Ocvv/KR1372owx1Pf3005uc35Ddgtd8rsf06IdS5777zZ+mUqmPzjm6TPpmvayZOq4LyATeCzkanmiy4qEuC/yXiO8CSMRzvLs1x9phepLNZl868sy3Pyen/5hd1/EfRvWmuvSWNeaRS/RkPDI4+NjE1NSXEoXlpaNB1zqo20abi59/vu/UfM2pie7WUDVq8l3wTwnskeZ+zTbIQ17KoCzKpGzq2KqX32/roRbh8ePHdUzl0s9/5Rv9n/7go19MxCKfCkZiu3V06wrO5gocxL7Dgd/IEobEMH6rejg+auXidL5Y/vWv/vTX53/y/e/MkGajTH7fOt4RUJOY1df4RdtY6ICFRzqTySOhUOA+3Ai3o31H1ZbnlXBruFmt2iMrudy5xx9//BzWV7nXDBGN2xpjbt/5oGUEdhtO3iD47xZOvm8a5CHvpsV38wsUaMwBWsz3rbK5xr0mzdv2t9Jv/f5vhsF4J+Q63IUAAAAASUVORK5CYII=')
tray = new Tray(icon)
const contextMenu = Menu.buildFromTemplate([
{ label: 'Item1', type: 'radio' },
{ label: 'Item2', type: 'radio' },
{ label: 'Item3', type: 'radio', checked: true },
{ label: 'Item4', type: 'radio' }
])
tray.setToolTip('This is my application.')
tray.setContextMenu(contextMenu)
})

View File

@@ -1,208 +0,0 @@
---
title: Application Menu
description: Customize the main application menu for your Electron app
slug: application-menu
hide_title: true
---
# Application Menu
Each Electron app has a single top-level application menu.
* On macOS, this menu is shown in the system [menu bar](https://support.apple.com/en-ca/guide/mac-help/mchlp1446/mac).
* On Windows and Linux, this menu is shown at the top of each [BaseWindow](../api/base-window.md).
## Building application menus
The application menu can be set by passing a [Menu](../api/menu.md) instance into the
[`Menu.setApplicationMenu`](../api/menu.md#menusetapplicationmenumenu) static function.
When building an application menu in Electron, each top-level array menu item **must be a submenu**.
Electron will set a default menu for your app if this API is never called. Below is an example of
that default menu being created manually using shorthand [`MenuItem` roles](./menus.md#roles).
```js title='Manually creating the default menu' @ts-expect-error=[107]
const { shell } = require('electron/common')
const { app, Menu } = require('electron/main')
const isMac = process.platform === 'darwin'
const template = [
// { role: 'appMenu' }
...(isMac
? [{
label: app.name,
submenu: [
{ role: 'about' },
{ type: 'separator' },
{ role: 'services' },
{ type: 'separator' },
{ role: 'hide' },
{ role: 'hideOthers' },
{ role: 'unhide' },
{ type: 'separator' },
{ role: 'quit' }
]
}]
: []),
// { role: 'fileMenu' }
{
label: 'File',
submenu: [
isMac ? { role: 'close' } : { role: 'quit' }
]
},
// { role: 'editMenu' }
{
label: 'Edit',
submenu: [
{ role: 'undo' },
{ role: 'redo' },
{ type: 'separator' },
{ role: 'cut' },
{ role: 'copy' },
{ role: 'paste' },
...(isMac
? [
{ role: 'pasteAndMatchStyle' },
{ role: 'delete' },
{ role: 'selectAll' },
{ type: 'separator' },
{
label: 'Speech',
submenu: [
{ role: 'startSpeaking' },
{ role: 'stopSpeaking' }
]
}
]
: [
{ role: 'delete' },
{ type: 'separator' },
{ role: 'selectAll' }
])
]
},
// { role: 'viewMenu' }
{
label: 'View',
submenu: [
{ role: 'reload' },
{ role: 'forceReload' },
{ role: 'toggleDevTools' },
{ type: 'separator' },
{ role: 'resetZoom' },
{ role: 'zoomIn' },
{ role: 'zoomOut' },
{ type: 'separator' },
{ role: 'togglefullscreen' }
]
},
// { role: 'windowMenu' }
{
label: 'Window',
submenu: [
{ role: 'minimize' },
{ role: 'zoom' },
...(isMac
? [
{ type: 'separator' },
{ role: 'front' },
{ type: 'separator' },
{ role: 'window' }
]
: [
{ role: 'close' }
])
]
},
{
role: 'help',
submenu: [
{
label: 'Learn More',
click: async () => {
const { shell } = require('electron')
await shell.openExternal('https://electronjs.org')
}
}
]
}
]
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
```
> [!IMPORTANT]
> On macOS, the first submenu of the application menu will **always** have your application's name
> as its label. In general, you can populate this submenu by conditionally adding a menu item with
> the `appMenu` role.
> [!TIP]
> For additional descriptions of available roles, see the [`MenuItem` roles](./menus.md#roles)
> section of the general Menus guide.
### Using standard OS menu roles
Defining each submenu explicitly can get very verbose. If you want to re-use default submenus
in your app, you can use various submenu-related roles provided by Electron.
```js title='Using default roles for each submenu' @ts-expect-error=[26]
const { shell } = require('electron/common')
const { app, Menu } = require('electron/main')
const template = [
...(process.platform === 'darwin'
? [{ role: 'appMenu' }]
: []),
{ role: 'fileMenu' },
{ role: 'editMenu' },
{ role: 'viewMenu' },
{ role: 'windowMenu' },
{
role: 'help',
submenu: [
{
label: 'Learn More',
click: async () => {
const { shell } = require('electron')
await shell.openExternal('https://electronjs.org')
}
}
]
}
]
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
```
> [!NOTE]
> On macOS, the `help` role defines a top-level Help submenu that has a search bar for
> other menu items. It requires items to be added to its `submenu` to function.
## Setting window-specific application menus _Linux_ _Windows_
Since the root application menu exists on each `BaseWindow` on Windows and Linux, you can override
it with a window-specific `Menu` instance via the [`win.setMenu`](../api/browser-window.md#winsetmenumenu-linux-windows) method.
```js title='Override a window's menu'
const { BrowserWindow, Menu } = require('electron/main')
const win = new BrowserWindow()
const menu = Menu.buildFromTemplate([
{
label: 'my custom menu',
submenu: [
{ role: 'copy' },
{ role: 'paste' }
]
}
])
win.setMenu(menu)
```
> [!TIP]
> You can remove a specific window's application menu by calling the
> [`win.removeMenu`](../api/base-window.md#winremovemenu-linux-windows) API.

View File

@@ -74,22 +74,46 @@ describe('keyboard input', () => {
Furthermore, WebdriverIO allows you to access Electron APIs to get static information about your application:
```js @ts-nocheck
import { browser } from '@wdio/globals'
import { browser, $, expect } from '@wdio/globals'
describe('trigger message modal', async () => {
it('message modal can be triggered from a test', async () => {
await browser.electron.execute(
(electron, param1, param2, param3) => {
const appWindow = electron.BrowserWindow.getFocusedWindow()
electron.dialog.showMessageBox(appWindow, {
message: 'Hello World!',
detail: `${param1} + ${param2} + ${param3} = ${param1 + param2 + param3}`
})
},
1,
2,
3
)
describe('when the make smaller button is clicked', () => {
it('should decrease the window height and width by 10 pixels', async () => {
const boundsBefore = await browser.electron.browserWindow('getBounds')
expect(boundsBefore.width).toEqual(210)
expect(boundsBefore.height).toEqual(310)
await $('.make-smaller').click()
const boundsAfter = await browser.electron.browserWindow('getBounds')
expect(boundsAfter.width).toEqual(200)
expect(boundsAfter.height).toEqual(300)
})
})
```
or to retrieve other Electron process information:
```js @ts-nocheck
import fs from 'node:fs'
import path from 'node:path'
import { browser, expect } from '@wdio/globals'
const packageJson = JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'package.json'), { encoding: 'utf-8' }))
const { name, version } = packageJson
describe('electron APIs', () => {
it('should retrieve app metadata through the electron API', async () => {
const appName = await browser.electron.app('getName')
expect(appName).toEqual(name)
const appVersion = await browser.electron.app('getVersion')
expect(appVersion).toEqual(version)
})
it('should pass args through to the launched application', async () => {
// custom args are set in the wdio.conf.js file as they need to be set before WDIO starts
const argv = await browser.electron.mainProcess('argv')
expect(argv).toContain('--foo')
expect(argv).toContain('--bar=baz')
})
})
```
@@ -182,7 +206,7 @@ npm install --save-dev @playwright/test
```
:::caution Dependencies
This tutorial was written with `@playwright/test@1.52.0`. Check out
This tutorial was written with `@playwright/test@1.41.1`. Check out
[Playwright's releases][playwright-releases] page to learn about
changes that might affect the code below.
:::
@@ -194,10 +218,10 @@ To point this API to your Electron app, you can pass the path to your main proce
entry point (here, it is `main.js`).
```js {5} @ts-nocheck
import { test, _electron as electron } from '@playwright/test'
const { test, _electron: electron } = require('@playwright/test')
test('launch app', async () => {
const electronApp = await electron.launch({ args: ['.'] })
const electronApp = await electron.launch({ args: ['main.js'] })
// close app
await electronApp.close()
})
@@ -207,10 +231,10 @@ After that, you will access to an instance of Playwright's `ElectronApp` class.
is a powerful class that has access to main process modules for example:
```js {5-10} @ts-nocheck
import { test, _electron as electron } from '@playwright/test'
const { test, _electron: electron } = require('@playwright/test')
test('get isPackaged', async () => {
const electronApp = await electron.launch({ args: ['.'] })
const electronApp = await electron.launch({ args: ['main.js'] })
const isPackaged = await electronApp.evaluate(async ({ app }) => {
// This runs in Electron's main process, parameter here is always
// the result of the require('electron') in the main app script.
@@ -226,10 +250,10 @@ It can also create individual [Page][playwright-page] objects from Electron Brow
For example, to grab the first BrowserWindow and save a screenshot:
```js {6-7} @ts-nocheck
import { test, _electron as electron } from '@playwright/test'
const { test, _electron: electron } = require('@playwright/test')
test('save screenshot', async () => {
const electronApp = await electron.launch({ args: ['.'] })
const electronApp = await electron.launch({ args: ['main.js'] })
const window = await electronApp.firstWindow()
await window.screenshot({ path: 'intro.png' })
// close app
@@ -241,7 +265,7 @@ Putting all this together using the Playwright test-runner, let's create a `exam
test file with a single test and assertion:
```js title='example.spec.js' @ts-nocheck
import { test, expect, _electron as electron } from '@playwright/test'
const { test, expect, _electron: electron } = require('@playwright/test')
test('example test', async () => {
const electronApp = await electron.launch({ args: ['.'] })

View File

@@ -1,69 +0,0 @@
---
title: Context Menu
description: Configure cross-platform native OS menus with the Menu API.
slug: context-menu
hide_title: true
---
# Context Menu
Context menus are pop-up menus that appear when right-clicking (or pressing a shortcut
such as <kbd>Shift</kbd> + <kbd>F10</kbd> on Windows) somewhere in an app's interface.
No context menu will appear by default in Electron. However, context menus can be created by using
the [`menu.popup`](../api/menu.md#menupopupoptions) function on an instance of the
[Menu](../api/menu.md) class. You will need to listen for specific context menu events and set up
the trigger for `menu.popup` manually.
There are two ways of listening for context menu events in Electron: either via the main process
through [webContents](../api/web-contents.md) or in the renderer process via the
[`contextmenu`](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event) web event.
## Using the `context-menu` event (main)
Whenever a right-click is detected within the bounds of a specific `WebContents` instance, a
[`context-menu`](../api/web-contents.md#event-context-menu) event is triggered. The `params` object
passed to the listener provides an extensive list of attributes to distinguish which type of element
is receiving the event.
For example, if you want to provide a context menu for links, check for the `linkURL` parameter.
If you want to check for editable elements such as `<textarea/>`, check for the `isEditable` parameter.
```fiddle docs/fiddles/menus/context-menu/web-contents
```
## Using the `contextmenu` event (renderer)
Alternatively, you can also listen to the [`contextmenu`](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event)
event available on DOM elements in the renderer process and call the `menu.popup` function via IPC.
> [!TIP]
> To learn more about IPC basics in Electron, see the [Inter-Process Communication](./ipc.md) guide.
```fiddle docs/fiddles/menus/context-menu/dom|focus=preload.js
```
## Additional macOS menu items (e.g. Writing Tools)
On macOS, the [Writing Tools](https://support.apple.com/en-ca/guide/mac-help/mchldcd6c260/15.0/mac/15.0),
[AutoFill](https://support.apple.com/en-mz/guide/safari/ibrwf71ba236/mac), and
[Services](https://support.apple.com/en-ca/guide/mac-help/mchlp1012/mac) menu items
are disabled by default for context menus in Electron. To enable these features, pass the
[WebFrameMain](../api/web-frame-main.md) associated to the target `webContents` to the `frame`
parameter in `menu.popup`.
```js title='Associating a frame to the context menu'
const { BrowserWindow, Menu } = require('electron/main')
const menu = Menu.buildFromTemplate([{ role: 'editMenu' }])
const win = new BrowserWindow()
win.webContents.on('context-menu', (_event, params) => {
// Whether the context is editable.
if (params.isEditable) {
menu.popup({
// highlight-next-line
frame: params.frame
})
}
})
```

View File

@@ -1,7 +1,6 @@
# Debugging in VSCode
This guide goes over how to set up VSCode debugging for both your own Electron
project as well as the native Electron codebase.
This guide goes over how to set up VSCode debugging for both your own Electron project as well as the native Electron codebase.
## Debugging your Electron app
@@ -10,8 +9,8 @@ project as well as the native Electron codebase.
#### 1. Open an Electron project in VSCode.
```sh
$ npx create-electron-app@latest my-app
$ code my-app
$ git clone git@github.com:electron/electron-quick-start.git
$ code electron-quick-start
```
#### 2. Add a file `.vscode/launch.json` with the following configuration:
@@ -38,27 +37,23 @@ $ code my-app
#### 3. Debugging
Set some breakpoints in `main.js`, and start debugging in the
[Debug View](https://code.visualstudio.com/docs/editor/debugging). You should
be able to hit the breakpoints.
Set some breakpoints in `main.js`, and start debugging in the [Debug View](https://code.visualstudio.com/docs/editor/debugging). You should be able to hit the breakpoints.
Here is a pre-configured project that you can download and directly debug in VSCode: https://github.com/octref/vscode-electron-debug/tree/master/electron-quick-start
## Debugging the Electron codebase
If you want to build Electron from source and modify the native Electron codebase,
this section will help you in testing your modifications.
If you want to build Electron from source and modify the native Electron codebase, this section will help you in testing your modifications.
For those unsure where to acquire this code or how to build it,
[Electron's Build Tools](https://github.com/electron/build-tools) automates and
explains most of this process. If you wish to manually set up the environment,
you can instead use these [build instructions](../development/build-instructions-gn.md).
For those unsure where to acquire this code or how to build it, [Electron's Build Tools](https://github.com/electron/build-tools) automates and explains most of this process. If you wish to manually set up the environment, you can instead use these [build instructions](../development/build-instructions-gn.md).
### Windows (C++)
#### 1. Open an Electron project in VSCode.
```sh
$ npx create-electron-app@latest my-app
$ code my-app
$ git clone git@github.com:electron/electron-quick-start.git
$ code electron-quick-start
```
#### 2. Add a file `.vscode/launch.json` with the following configuration:
@@ -91,22 +86,14 @@ $ code my-app
**Configuration Notes**
* `cppvsdbg` requires the
[built-in C/C++ extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools)
be enabled.
* `cppvsdbg` requires the [built-in C/C++ extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools) be enabled.
* `${workspaceFolder}` is the full path to Chromium's `src` directory.
* `your-executable-location` will be one of the following depending on a few items:
* `Testing`: If you are using the default settings of
[Electron's Build-Tools](https://github.com/electron/build-tools) or the default
instructions when [building from source](../development/build-instructions-gn.md#building).
* `Testing`: If you are using the default settings of [Electron's Build-Tools](https://github.com/electron/build-tools) or the default instructions when [building from source](../development/build-instructions-gn.md#building).
* `Release`: If you built a Release build rather than a Testing build.
* `your-directory-name`: If you modified this during your build process from
the default, this will be whatever you specified.
* The `args` array string `"your-electron-project-path"` should be the absolute
path to either the directory or `main.js` file of the Electron project you are
using for testing. In this example, it should be your path to `my-app`.
* `your-directory-name`: If you modified this during your build process from the default, this will be whatever you specified.
* The `args` array string `"your-electron-project-path"` should be the absolute path to either the directory or `main.js` file of the Electron project you are using for testing. In this example, it should be your path to `electron-quick-start`.
#### 3. Debugging
Set some breakpoints in the .cc files of your choosing in the native Electron C++
code, and start debugging in the [Debug View](https://code.visualstudio.com/docs/editor/debugging).
Set some breakpoints in the .cc files of your choosing in the native Electron C++ code, and start debugging in the [Debug View](https://code.visualstudio.com/docs/editor/debugging).

View File

@@ -9,11 +9,10 @@ check out our [Electron Versioning](./electron-versioning.md) doc.
| Electron | Alpha | Beta | Stable | EOL | Chrome | Node | Supported |
| ------- | ----- | ------- | ------ | ------ | ---- | ---- | ---- |
| 38.0.0 | 2025-Jun-26 | 2025-Aug-06 | 2025-Sep-02 | 2026-Mar-10 | M140 | TBD | ✅ |
| 37.0.0 | 2025-May-01 | 2025-May-28 | 2025-Jun-24 | 2026-Jan-13 | M138 | v22.16 | ✅ |
| 37.0.0 | 2025-May-01 | 2025-May-28 | 2025-Jun-24 | 2026-Jan-13 | M138 | TBD | ✅ |
| 36.0.0 | 2025-Mar-06 | 2025-Apr-02 | 2025-Apr-29 | 2025-Oct-28 | M136 | v22.14 | ✅ |
| 35.0.0 | 2025-Jan-16 | 2025-Feb-05 | 2025-Mar-04 | 2025-Sep-02 | M134 | v22.14 | ✅ |
| 34.0.0 | 2024-Oct-17 | 2024-Nov-13 | 2025-Jan-14 | 2025-Jun-24 | M132 | v20.18 | 🚫 |
| 34.0.0 | 2024-Oct-17 | 2024-Nov-13 | 2025-Jan-14 | 2025-Jun-24 | M132 | v20.18 | |
| 33.0.0 | 2024-Aug-22 | 2024-Sep-18 | 2024-Oct-15 | 2025-Apr-29 | M130 | v20.18 | 🚫 |
| 32.0.0 | 2024-Jun-14 | 2024-Jul-24 | 2024-Aug-20 | 2025-Mar-04 | M128 | v20.16 | 🚫 |
| 31.0.0 | 2024-Apr-18 | 2024-May-15 | 2024-Jun-11 | 2025-Jan-14 | M126 | v20.14 | 🚫 |

View File

@@ -143,7 +143,7 @@ The `electron/electron` repository also enforces squash merging, so you only nee
## Historical versioning (Electron 1.X)
Electron versions _< 2.0_ did not conform to the [SemVer](https://semver.org) spec: major versions corresponded to end-user API changes, minor versions corresponded to Chromium major releases, and patch versions corresponded to new features and bug fixes. While convenient for developers merging features, it creates problems for developers of client-facing applications. The QA testing cycles of major apps like Slack, Teams, VS Code, and GitHub Desktop can be lengthy and stability is a highly desired outcome. There is a high risk in adopting new features while trying to absorb bug fixes.
Electron versions _< 2.0_ did not conform to the [SemVer](https://semver.org) spec: major versions corresponded to end-user API changes, minor versions corresponded to Chromium major releases, and patch versions corresponded to new features and bug fixes. While convenient for developers merging features, it creates problems for developers of client-facing applications. The QA testing cycles of major apps like Slack, Teams, Skype, VS Code, and GitHub Desktop can be lengthy and stability is a highly desired outcome. There is a high risk in adopting new features while trying to absorb bug fixes.
Here is an example of the 1.x strategy:

View File

@@ -48,7 +48,7 @@ The nodeCliInspect fuse toggles whether the `--inspect`, `--inspect-brk`, etc. f
**@electron/fuses:** `FuseV1Options.EnableEmbeddedAsarIntegrityValidation`
The embeddedAsarIntegrityValidation fuse toggles an experimental feature on macOS and Windows that validates the content of the `app.asar` file when it is loaded. This feature is designed to have a minimal performance impact but may marginally slow down file reads from inside the `app.asar` archive.
The embeddedAsarIntegrityValidation fuse toggles an experimental feature on macOS that validates the content of the `app.asar` file when it is loaded. This feature is designed to have a minimal performance impact but may marginally slow down file reads from inside the `app.asar` archive.
For more information on how to use asar integrity validation please read the [Asar Integrity](asar-integrity.md) documentation.

View File

@@ -1,170 +1,127 @@
---
title: "Keyboard Shortcuts"
description: "Define accelerator strings for local and global keyboard shortcuts"
slug: keyboard-shortcuts
hide_title: false
---
# Keyboard Shortcuts
## Accelerators
## Overview
Accelerators are strings that can be used to represent keyboard shortcuts throughout your Electron.
These strings can contain multiple modifiers keys and a single key code joined by the `+` character.
This feature allows you to configure local and global keyboard shortcuts
for your Electron application.
> [!NOTE]
> Accelerators are **case-insensitive**.
## Example
### Available modifiers
### Local Shortcuts
* `Command` (or `Cmd` for short)
* `Control` (or `Ctrl` for short)
* `CommandOrControl` (or `CmdOrCtrl` for short)
* `Alt`
* `Option`
* `AltGr`
* `Shift`
* `Super` (or `Meta` as alias)
Local keyboard shortcuts are triggered only when the application is focused.
To configure a local keyboard shortcut, you need to specify an [`accelerator`][]
property when creating a [MenuItem][] within the [Menu][] module.
### Available key codes
Starting with a working application from the
[tutorial starter code][tutorial-starter-code], update the `main.js` to be:
* `0` to `9`
* `A` to `Z`
* `F1` to `F24`
* Various Punctuation: `)`, `!`, `@`, `#`, `$`, `%`, `^`, `&`, `*`, `(`, `:`, `;`, `:`, `+`, `=`, `<`, `,`, `_`, `-`, `>`, `.`, `?`, `/`, `~`, `` ` ``, `{`, `]`, `[`, `|`, `\`, `}`, `"`
* `Plus`
* `Space`
* `Tab`
* `Capslock`
* `Numlock`
* `Scrolllock`
* `Backspace`
* `Delete`
* `Insert`
* `Return` (or `Enter` as alias)
* `Up`, `Down`, `Left` and `Right`
* `Home` and `End`
* `PageUp` and `PageDown`
* `Escape` (or `Esc` for short)
* `VolumeUp`, `VolumeDown` and `VolumeMute`
* `MediaNextTrack`, `MediaPreviousTrack`, `MediaStop` and `MediaPlayPause`
* `PrintScreen`
* NumPad Keys
* `num0` - `num9`
* `numdec` - decimal key
* `numadd` - numpad `+` key
* `numsub` - numpad `-` key
* `nummult` - numpad `*` key
* `numdiv` - numpad `÷` key
```fiddle docs/fiddles/features/keyboard-shortcuts/local
const { app, BrowserWindow, Menu, MenuItem } = require('electron/main')
### Cross-platform modifiers
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600
})
Many modifier accelerators map to different keys between operating systems.
| Modifier | macOS | Windows and Linux |
|------------------|-------------|----------------------|
|`CommandOrControl`| Command (⌘) | Control |
|`Command` | Command (⌘) | N/A |
|`Control` | Control (^) | Control |
|`Alt` | Option (⌥) | Alt |
|`Option` | Option (⌥) | N/A |
|`Super` (`Meta`) | Command (⌘) | Windows (⊞) |
> [!IMPORTANT]
>
> * On Linux and Windows, the `Command` modifier does not have any effect. In general, you should use
> the `CommandOrControl` modifier instead, which represents <kbd>⌘ Cmd</kbd> on macOS and <kbd>Ctrl</kbd>
> on Linux and Windows.
> * Use `Alt` instead of `Option`. The <kbd>⌥ Opt</kbd> key only exists on macOS, whereas the `Alt` will
> map to the appropriate modifier on all platforms.
#### Examples
Here are some examples of cross-platform Electron accelerators for common editing operations:
* Copy: `CommandOrControl+C`
* Paste: `CommandOrControl+V`
* Undo: `CommandOrControl+Z`
* Redo: `CommandOrControl+Shift+Z`
## Local shortcuts
**Local** keyboard shortcuts are triggered only when the application is focused. These shortcuts
map to specific menu items within the app's main [application menu](./application-menu.md).
To define a local keyboard shortcut, you need to configure the `accelerator` property when creating
a [MenuItem](../api/menu-item.md). Then, the `click` event associated to that menu item will trigger
upon using that accelerator.
```js title='Opening a dialog via accelerator (local)'
const { dialog, Menu, MenuItem } = require('electron/main')
const menu = new Menu()
// The first submenu needs to be the app menu on macOS
if (process.platform === 'darwin') {
const appMenu = new MenuItem({ role: 'appMenu' })
menu.append(appMenu)
win.loadFile('index.html')
}
// highlight-start
const submenu = Menu.buildFromTemplate([{
label: 'Open a Dialog',
click: () => dialog.showMessageBox({ message: 'Hello World!' }),
accelerator: 'CommandOrControl+Alt+R'
}])
menu.append(new MenuItem({ label: 'Custom Menu', submenu }))
// highlight-end
const menu = new Menu()
menu.append(new MenuItem({
label: 'Electron',
submenu: [{
role: 'help',
accelerator: process.platform === 'darwin' ? 'Alt+Cmd+I' : 'Alt+Shift+I',
click: () => { console.log('Electron rocks!') }
}]
}))
Menu.setApplicationMenu(menu)
```
In the above example, a native "Hello World" dialog will open when pressing <kbd>⌘ Cmd</kbd>+<kbd>⌥ Opt</kbd>+<kbd>R</kbd>
on macOS or <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>R</kbd> on other platforms.
app.whenReady().then(createWindow)
> [!TIP]
> Accelerators can work even when menu items are hidden. On macOS, this feature can be disabled by
> setting `acceleratorWorksWhenHidden: false` when building a `MenuItem`.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
> [!TIP]
> On Windows and Linux, the `registerAccelerator` property of the `MenuItem` can be set to `false`
> so that the accelerator is visible in the system menu but not enabled.
## Global shortcuts
**Global** keyboard shortcuts work even when your app is out of focus. To configure a global keyboard
shortcut, you can use the [`globalShortcut.register`](../api/global-shortcut.md#globalshortcutregisteraccelerator-callback)
function to specify shortcuts.
```js title='Opening a dialog via accelerator (global)'
const { dialog, globalShortcut } = require('electron/main')
globalShortcut.register('CommandOrControl+Alt+R', () => {
dialog.showMessageBox({ message: 'Hello World!' })
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
```
To later unregister a shortcut, you can use the [`globalShortcut.unregisterAccelerator`](../api/global-shortcut.md#globalshortcutunregisteraccelerator)
function.
> NOTE: In the code above, you can see that the accelerator differs based on the
user's operating system. For MacOS, it is `Alt+Cmd+I`, whereas for Linux and
Windows, it is `Alt+Shift+I`.
```js title='Opening a dialog via accelerator (global)'
const { globalShortcut } = require('electron/main')
After launching the Electron application, you should see the application menu
along with the local shortcut you just defined:
globalShortcut.unregister('CommandOrControl+Alt+R')
![Menu with a local shortcut](../images/local-shortcut.png)
If you click `Help` or press the defined accelerator and then open the terminal
that you ran your Electron application from, you will see the message that was
generated after triggering the `click` event: "Electron rocks!".
### Global Shortcuts
To configure a global keyboard shortcut, you need to use the [globalShortcut][]
module to detect keyboard events even when the application does not have
keyboard focus.
Starting with a working application from the
[tutorial starter code][tutorial-starter-code], update the `main.js` to be:
```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()
}
})
```
> [!WARNING]
> On macOS, there's a long-standing bug with `globalShortcut` that prevents it from working with
> keyboard layouts other than QWERTY ([electron/electron#19747](https://github.com/electron/electron/issues/19747)).
> NOTE: In the code above, the `CommandOrControl` combination uses `Command`
on macOS and `Control` on Windows/Linux.
## Shortcuts within a window
After launching the Electron application, if you press the defined key
combination then open the terminal that you ran your Electron application from,
you will see that Electron loves global shortcuts!
### In the renderer process
### Shortcuts within a BrowserWindow
If you want to handle keyboard shortcuts within a [BaseWindow](../api/base-window.md), you can
listen for the [`keyup`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event) and
[`keydown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event) DOM Events inside
the renderer process using the [addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) API.
#### Using web APIs
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].
```fiddle docs/fiddles/features/keyboard-shortcuts/web-apis|focus=renderer.js
function handleKeyPress (event) {
@@ -184,14 +141,18 @@ window.addEventListener('keyup', handleKeyPress, true)
#### Intercepting events in the main process
The [`before-input-event`](../api/web-contents.md#event-before-input-event) event
is emitted before dispatching `keydown` and `keyup` events in the renderer process. It can
is emitted before dispatching `keydown` and `keyup` events in the page. It can
be used to catch and handle custom shortcuts that are not visible in the menu.
```js title='Intercepting the Ctrl+I event from the main process'
Starting with a working application from the
[tutorial starter code][tutorial-starter-code], update the `main.js` file with the
following lines:
```fiddle docs/fiddles/features/keyboard-shortcuts/interception-from-main
const { app, BrowserWindow } = require('electron/main')
app.whenReady().then(() => {
const win = new BrowserWindow()
const win = new BrowserWindow({ width: 800, height: 600 })
win.loadFile('index.html')
win.webContents.on('before-input-event', (event, input) => {
@@ -202,3 +163,49 @@ app.whenReady().then(() => {
})
})
```
After launching the Electron application, if you open the terminal that you ran
your Electron application from and press `Ctrl+I` key combination, you will
see that this key combination was successfully intercepted.
#### Using third-party libraries
If you don't want to do manual shortcut parsing, there are libraries that do
advanced key detection, such as [mousetrap][]. Below are examples of usage of the
`mousetrap` running in the Renderer process:
```js @ts-nocheck
Mousetrap.bind('4', () => { console.log('4') })
Mousetrap.bind('?', () => { console.log('show shortcuts!') })
Mousetrap.bind('esc', () => { console.log('escape') }, 'keyup')
// combinations
Mousetrap.bind('command+shift+k', () => { console.log('command shift k') })
// map multiple combinations to the same callback
Mousetrap.bind(['command+k', 'ctrl+k'], () => {
console.log('command k or control k')
// return false to prevent default behavior and stop event from bubbling
return false
})
// gmail style sequences
Mousetrap.bind('g i', () => { console.log('go to inbox') })
Mousetrap.bind('* a', () => { console.log('select all') })
// konami code!
Mousetrap.bind('up up down down left right left right b a enter', () => {
console.log('konami code')
})
```
[Menu]: ../api/menu.md
[MenuItem]: ../api/menu-item.md
[globalShortcut]: ../api/global-shortcut.md
[`accelerator`]: ../api/accelerator.md
[BrowserWindow]: ../api/browser-window.md
[mousetrap]: https://github.com/ccampbell/mousetrap
[dom-events]: https://developer.mozilla.org/en-US/docs/Web/Events
[addEventListener-api]: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
[tutorial-starter-code]: tutorial-2-first-app.md#final-starter-code

View File

@@ -1,73 +1,76 @@
---
title: Dock Menu
description: Configure your app's Dock presence on macOS.
title: Dock
description: Configure your application's Dock presence on macOS.
slug: macos-dock
hide_title: true
---
# Dock Menu
# Dock
On macOS, the [Dock](https://support.apple.com/en-ca/guide/mac-help/mh35859/mac) is an interface
element that displays open and frequently-used apps. While opened or pinned, each app has its own
icon in the Dock.
Electron has APIs to configure the app's icon in the macOS Dock. A macOS-only
API exists to create a custom dock menu, but Electron also uses the app dock
icon as the entry point for cross-platform features like
[recent documents][recent-documents] and [application progress][progress-bar].
> [!NOTE]
> On macOS, the Dock is the entry point for certain cross-platform features like
> [Recent Documents](./recent-documents.md) and [Application Progress](./progress-bar.md).
> Read those guides for more details.
The custom dock is commonly used to add shortcuts to tasks the user wouldn't
want to open the whole app window for.
## Dock API
**Dock menu of Terminal.app:**
All functionality for the Dock is exposed via the [Dock](../api/dock.md) class exposed via
[`app.dock`](../api/app.md#appdock-macos-readonly) property. There is a single `Dock` instance per
Electron application, and this property only exists on macOS.
![Dock Menu][dock-menu-image]
One of the main uses for your app's Dock icon is to expose additional app menus. The Dock menu is
triggered by right-clicking or <kbd>Ctrl</kbd>-clicking the app icon. By default, the app's Dock menu
will come with system-provided window management utilities, including the ability to show all windows,
hide the app, and switch betweeen different open windows.
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.
To set an app-defined custom Dock menu, pass any [Menu](../api/menu.md) instance into the
[`dock.setMenu`](../api/dock.md#docksetmenumenu-macos) API.
> [!TIP]
> For best practices to make your Dock menu feel more native, see Apple's
> [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/dock-menus)
> page on Dock menus.
## Attaching a context menu
```js title='Setting a Dock menu'
```fiddle docs/fiddles/features/macos-dock-menu
const { app, BrowserWindow, Menu } = require('electron/main')
// dock.setMenu only works after the 'ready' event is fired
app.whenReady().then(() => {
const dockMenu = Menu.buildFromTemplate([
{
label: 'New Window',
click: () => { const win = new BrowserWindow() }
}
// add more menu options to the array
])
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600
})
// Dock is undefined on platforms outside of macOS
// highlight-next-line
win.loadFile('index.html')
}
const dockMenu = Menu.buildFromTemplate([
{
label: 'New Window',
click () { console.log('New Window') }
}, {
label: 'New Window with Settings',
submenu: [
{ label: 'Basic' },
{ label: 'Pro' }
]
},
{ label: 'New Command...' }
])
app.whenReady().then(() => {
app.dock?.setMenu(dockMenu)
}).then(createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
```
> [!NOTE]
> Unlike with regular [context menus](./context-menu.md), Dock context menus don't need to be
> manually instrumented using the `menu.popup` API. Instead, the Dock object handles click events
> for you.
After launching the Electron application, right click the application icon.
You should see the custom menu you just defined:
> [!TIP]
> To learn more about crafting menus in Electron, see the [Menus](./menus.md#building-menus) guide.
![macOS dock menu](../images/macos-dock-menu.png)
## Runnable Fiddle demo
Below is a runnable example of how you can use the Dock menu to create and close windows in your
Electron app.
```fiddle docs/fiddles/menus/dock-menu
```
[dock-menu-image]: https://cloud.githubusercontent.com/assets/639601/5069962/6032658a-6e9c-11e4-9953-aa84006bdfff.png
[recent-documents]: ./recent-documents.md
[progress-bar]: ./progress-bar.md

View File

@@ -1,348 +0,0 @@
---
title: Menus
description: Configure cross-platform native OS menus with the Menu API.
slug: menus
hide_title: true
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import DocCardList from '@theme/DocCardList';
# Menus
Electron's [Menu](../api/menu.md) class provides a standardized way to create cross-platform native
menus throughout your application.
## Available menus in Electron
The same menu API is used for multiple use cases:
* The **application menu** is the top-level menu for your application. Each app only has a single
application menu at a time.
* **Context menus** are triggered by the user when right-clicking on a portion of your app's
interface.
* The **tray menu** is a special context menu triggered when right-clicking on your app's [Tray](../api/tray.md)
instance.
* On macOS, the **dock menu** is a special context menu triggered when right-clicking on your app's
icon in the system [Dock](https://support.apple.com/en-ca/guide/mac-help/mh35859/mac).
To learn more about the various kinds of native menus you can create and how to specify keyboard
shortcuts, see the individual guides in this section:
<DocCardList />
## Building menus
Each `Menu` instance is composed of an array of [MenuItem](../api/menu-item.md) objects accessible via
the `menu.items` instance property. Menus can be nested by setting the `item.submenu` property to
another menu.
There are two ways to build a menu: either by directly calling [`menu.append`](../api/menu.md#menuappendmenuitem)
or by using the static [`Menu.buildFromTemplate`](../api/menu.md#menubuildfromtemplatetemplate)
helper function.
The helper function reduces boilerplate by allowing you to pass a collection of `MenuItem`
constructor options (or instantiated `MenuItem` instances) in a single array rather than having to
append each item in a separate function call.
Below is an example of a minimal application menu:
<Tabs>
<TabItem value="constructor" label="Constructor">
```js title='menu.js'
const submenu = new Menu()
submenu.append(new MenuItem({ label: 'Hello' }))
submenu.append(new MenuItem({ type: 'separator' }))
submenu.append(new MenuItem({ label: 'Electron', type: 'checkbox', checked: true }))
const menu = new Menu()
menu.append(new MenuItem({ label: 'Menu', submenu }))
Menu.setApplicationMenu(menu)
```
</TabItem>
<TabItem value="template" label="Template Helper">
```js title='menu.js'
const menu = Menu.buildFromTemplate([{
label: 'Menu',
submenu: [
{ label: 'Hello' },
{ type: 'separator' },
{ label: 'Electron', type: 'checkbox', checked: true }
]
}])
Menu.setApplicationMenu(menu)
```
</TabItem>
</Tabs>
> [!IMPORTANT]
> All menu items (except for the `separator` type) must have a label. Labels can either be manually
> defined using the `label` property or inherited from the item's `role`.
### Types
A menu item's type grants it a particular appearance and functionality. Some types are
automatically assigned based on other constructor options:
* By default, menu items have the `normal` type.
* Menu items that contain the `submenu` property will be assigned the `submenu` type.
Other available types, when specified, give special additional properties to the menu item:
* `checkbox` - toggles the `checked` property whenever the menu item is clicked
* `radio` - toggles the `checked` property and turns off that property for all adjacent `radio` items
* `palette` - creates a [Palette](https://developer.apple.com/documentation/appkit/nsmenu/presentationstyle-swift.enum/palette)
submenu, which aligns items horizontally (available on macOS 14 and above)
* `header` - creates a section header, which can convey groupings with labels (available on macOS 14 and above)
> [!TIP]
> Adjacent `radio` items are at the same level of submenu and not divided by a separator.
>
> ```js
> [
> { type: 'radio', label: 'Adjacent 1' },
> { type: 'radio', label: 'Adjacent 2' },
> { type: 'separator' },
> { type: 'radio', label: 'Non-adjacent' } // unaffected by the others
> ]
> ```
### Roles
Roles give `normal` type menu items predefined behaviors.
We recommend specifying the `role` attribute for any menu item that matches a standard role
rather than trying to manually implement the behavior in a `click` function.
The built-in `role` behavior will give the best native experience.
The `label` and `accelerator` values are optional when using a `role` and will
default to appropriate values for each platform.
> [!TIP]
> Role strings are **case-insensitive**. For example, `toggleDevTools`, `toggledevtools`, and
> `TOGGLEDEVTOOLS` are all equivalent roles when defining menu items.
#### Edit roles
* `undo`
* `redo`
* `cut`
* `copy`
* `paste`
* `pasteAndMatchStyle`
* `selectAll`
* `delete`
#### Window roles
* `about` - Trigger a native about panel (custom message box on Window, which does not provide its own).
* `minimize` - Minimize current window.
* `close` - Close current window.
* `quit` - Quit the application.
* `reload` - Reload the current window.
* `forceReload` - Reload the current window ignoring the cache.
* `toggleDevTools` - Toggle developer tools in the current window.
* `togglefullscreen` - Toggle full screen mode on the current window.
* `resetZoom` - Reset the focused page's zoom level to the original size.
* `zoomIn` - Zoom in the focused page by 10%.
* `zoomOut` - Zoom out the focused page by 10%.
* `toggleSpellChecker` - Enable/disable built-in spellchecker.
#### Default menu roles
* `fileMenu` - The submenu is a "File" menu (Close / Quit)
* `editMenu` - The submenu is an "Edit" menu (Undo, Copy, etc.)
* `viewMenu` - The submenu is a "View" menu (Reload, Toggle Developer Tools, etc.)
* `windowMenu` - The submenu is a "Window" menu (Minimize, Zoom, etc.)
#### macOS-only roles
macOS has a number of platform-specific menu roles available. Many of these map to underlying
[AppKit](https://developer.apple.com/documentation/appkit) APIs.
##### App management roles
* `hide` - Map to the [`hide`](https://developer.apple.com/documentation/appkit/nsapplication/hide(_:)) action.
* `hideOthers` - Map to the [`hideOtherApplications`](https://developer.apple.com/documentation/appkit/nsapplication/hideotherapplications(_:)) action.
* `unhide` - Map to the [`unhideAllApplications`](https://developer.apple.com/documentation/appkit/nsapplication/unhideallapplications(_:)) action.
* `front` - Map to the [`arrangeInFront`](https://developer.apple.com/documentation/appkit/nsapplication/arrangeinfront(_:)) action.
* `zoom` - Map to the [`performZoom`](https://developer.apple.com/documentation/appkit/nswindow/performzoom(_:)) action.
##### Edit roles
* `showSubstitutions` - Map to the [`orderFrontSubstitutionsPanel`](https://developer.apple.com/documentation/appkit/nstextview/orderfrontsubstitutionspanel(_:)) action.
* `toggleSmartQuotes` - Map to the [`toggleAutomaticQuoteSubstitution`](https://developer.apple.com/documentation/appkit/nstextview/toggleautomaticquotesubstitution(_:)) action.
* `toggleSmartDashes` - Map to the [`toggleAutomaticDashSubstitution`](https://developer.apple.com/documentation/appkit/nstextview/toggleautomaticdashsubstitution(_:)) action.
* `toggleTextReplacement` - Map to the [`toggleAutomaticTextReplacement`](https://developer.apple.com/documentation/appkit/nstextview/toggleautomatictextreplacement(_:)) action.
##### Speech roles
* `startSpeaking` - Map to the [`startSpeaking`](https://developer.apple.com/documentation/appkit/nstextview/startspeaking(_:)) action.
* `stopSpeaking` - Map to the [`stopSpeaking`](https://developer.apple.com/documentation/appkit/nstextview/stopspeaking(_:)) action.
##### Native tab roles
* `toggleTabBar` - Map to the [`toggleTabBar`](https://developer.apple.com/documentation/appkit/nswindow/toggletabbar(_:)) action.
* `selectNextTab` - Map to the [`selectNextTab`](https://developer.apple.com/documentation/appkit/nswindow/selectnexttab(_:)) action.
* `selectPreviousTab` - Map to the [`selectPreviousTab`](https://developer.apple.com/documentation/appkit/nswindow/selectprevioustab(_:)) action.
<!-- * `showAllTabs` - Map to the `showAllTabs` action. -->
* `mergeAllWindows` - Map to the [`mergeAllWindows`](https://developer.apple.com/documentation/appkit/nswindow/mergeallwindows(_:)) action.
* `moveTabToNewWindow` - Map to the [`moveTabToNewWindow`](https://developer.apple.com/documentation/appkit/nswindow/movetabtonewwindow(_:)) action.
##### Default menu roles
* `appMenu` - Whole default "App" menu (About, Services, etc.)
* `services` - The submenu is a ["Services"](https://developer.apple.com/documentation/appkit/nsapplication/1428608-servicesmenu?language=objc) menu.
* `window` - The submenu is a "Window" menu.
* `help` - The submenu is a "Help" menu.
##### Other menu roles
* `recentDocuments` - The submenu is an "Open Recent" menu.
* `clearRecentDocuments` - Map to the [`clearRecentDocuments`](https://developer.apple.com/documentation/appkit/nsdocumentcontroller/clearrecentdocuments(_:)) action.
* `shareMenu` - The submenu is [share menu][ShareMenu]. The `sharingItem` property must also be set to indicate the item to share.
> [!IMPORTANT]
> When specifying a `role` on macOS, `label` and `accelerator` are the only
> options that will affect the menu item. All other options will be ignored.
### Accelerators
The `accelerator` property allows you to define accelerator strings to map menu items to keyboard
shortcuts. For more details, see the [Keyboard Shortcuts](./keyboard-shortcuts.md) guide.
## Advanced configuration
### Programmatic item positioning
You can make use of the `before`, `after`, `beforeGroupContaining`, `afterGroupContaining` and `id` attributes
to control how menu items will be placed when building a menu with `Menu.buildFromTemplate`.
* `before` - Inserts this item before the item with the specified id. If the
referenced item doesn't exist, the item will be inserted at the end of
the menu. Also implies that the menu item in question should be placed in the same “group” as the item.
* `after` - Inserts this item after the item with the specified id. If the
referenced item doesn't exist, the item will be inserted at the end of
the menu. Also implies that the menu item in question should be placed in the same “group” as the item.
* `beforeGroupContaining` - Provides a means for a single context menu to declare
the placement of their containing group before the containing group of the item with the specified id.
* `afterGroupContaining` - Provides a means for a single context menu to declare
the placement of their containing group after the containing group of the item with the specified id.
By default, items will be inserted in the order they exist in the template unless one of the specified
positioning keywords is used.
#### Examples
Template:
```js
[
{ id: '1', label: 'one' },
{ id: '2', label: 'two' },
{ id: '3', label: 'three' },
{ id: '4', label: 'four' }
]
```
Menu:
```plaintext
- one
- two
- three
- four
```
Template:
```js
[
{ id: '1', label: 'one' },
{ type: 'separator' },
{ id: '3', label: 'three', beforeGroupContaining: ['1'] },
{ id: '4', label: 'four', afterGroupContaining: ['2'] },
{ type: 'separator' },
{ id: '2', label: 'two' }
]
```
Menu:
```plaintext
- three
- four
- ---
- one
- ---
- two
```
Template:
```js
[
{ id: '1', label: 'one', after: ['3'] },
{ id: '2', label: 'two', before: ['1'] },
{ id: '3', label: 'three' }
]
```
Menu:
```plaintext
- ---
- three
- two
- one
```
### Icons
To add visual aid to your menus, you can use the `icon` property to assign images to individual
`MenuItem` instances.
```js title='Adding a little green circle to a menu item'
const { nativeImage } = require('electron/common')
const { MenuItem } = require('electron/main')
// highlight-next-line
const green = nativeImage.createFromDataURL('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACOSURBVHgBpZLRDYAgEEOrEzgCozCCGzkCbKArOIlugJvgoRAUNcLRpvGH19TkgFQWkqIohhK8UEaKwKcsOg/+WR1vX+AlA74u6q4FqgCOSzwsGHCwbKliAF89Cv89tWmOT4VaVMoVbOBrdQUz+FrD6XItzh4LzYB1HFJ9yrEkZ4l+wvcid9pTssh4UKbPd+4vED2Nd54iAAAAAElFTkSuQmCC')
const item = new MenuItem({
label: 'Green Circle',
// highlight-next-line
icon: green
})
```
### Sublabels _macOS_
You can add sublabels (also known as [subtitles](https://developer.apple.com/documentation/appkit/nsmenuitem/subtitle))
to menu items using the `sublabel` option on macOS 14.4 and above.
```js title='Adding descriptions via sublabel'
const { MenuItem } = require('electron/main')
const item = new MenuItem({
label: 'Log Message',
// highlight-next-line
sublabel: 'This will use the console.log utility',
click: () => { console.log('Logging via menu...') }
})
```
### Tooltips _macOS_
Tooltips are informational indicators that appear when you hover over a menu item. You can set menu
item tooltips on macOS using the `toolTip` option.
```js title='Adding additional information via tooltip'
const { MenuItem } = require('electron/main')
const item = new MenuItem({
label: 'Hover Over Me',
// highlight-next-line
toolTip: 'This is additional info that appears on hover'
})
```

Some files were not shown because too many files have changed in this diff Show More