mirrors/electron
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions 1

chore: update line endings on HTML files (#37755)

Browse source
This commit is contained in:
John Kleinschmidt 2023-03-29 15:02:13 -04:00 • committed by GitHub
commit 8f3ef39f1e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 1118 additions and 1118 deletions
Download patch file Download diff file Expand all files Collapse all files

256
docs/fiddles/menus/customize-menus/index.html
View file

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

146
docs/fiddles/menus/shortcuts/index.html
View file

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

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

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

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

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

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

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

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

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

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

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

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

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

134
docs/fiddles/native-ui/notifications/index.html
View file

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

94
docs/fiddles/native-ui/tray/index.html
View file

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

154
docs/fiddles/windows/manage-windows/frameless-window/index.html
View file

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

128
docs/fiddles/windows/manage-windows/manage-window-state/index.html
View file

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

116
docs/fiddles/windows/manage-windows/window-events/index.html
View file

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

22
spec/fixtures/api/frame-subscriber.html vendored
View file

@ -1,11 +1,11 @@
<html> <html>
<body> <body>
<div style="width: 10px; height: 10px;" id="dirty"></div> <div style="width: 10px; height: 10px;" id="dirty"></div>
</body> </body>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
setInterval(function(){ setInterval(function(){
document.getElementById('dirty').style.backgroundColor = document.getElementById('dirty').style.backgroundColor =
'#'+(Math.random()*0xFFFFFF<<0).toString(16) '#'+(Math.random()*0xFFFFFF<<0).toString(16)
}, 100) }, 100)
</script> </script>
</html> </html>

22
spec/fixtures/api/offscreen-rendering.html vendored
View file

@ -1,11 +1,11 @@
<html> <html>
<body> <body>
<div style="width: 10px; height: 10px;" id="dirty"></div> <div style="width: 10px; height: 10px;" id="dirty"></div>
</body> </body>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
setInterval(function(){ setInterval(function(){
document.getElementById('dirty').style.backgroundColor = document.getElementById('dirty').style.backgroundColor =
'#'+(Math.random()*0xFFFFFF<<0).toString(16) '#'+(Math.random()*0xFFFFFF<<0).toString(16)
}, 10) }, 10)
</script> </script>
</html> </html>

18
spec/fixtures/api/service-workers/index.html vendored
View file

@ -1,10 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<body> <body>
<script> <script>
navigator.serviceWorker.register('sw.js', { navigator.serviceWorker.register('sw.js', {
scope: location.pathname.split('/').slice(0, 2).join('/') + '/' scope: location.pathname.split('/').slice(0, 2).join('/') + '/'
}) })
</script> </script>
</body> </body>
</html> </html>

18
spec/fixtures/api/service-workers/logs.html vendored
View file

@ -1,10 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<body> <body>
<script> <script>
navigator.serviceWorker.register('sw-logs.js', { navigator.serviceWorker.register('sw-logs.js', {
scope: location.pathname.split('/').slice(0, 2).join('/') + '/' scope: location.pathname.split('/').slice(0, 2).join('/') + '/'
}) })
</script> </script>
</body> </body>
</html> </html>