[
{
"path": ".gitattributes",
"content": "# Auto detect text files and perform LF normalization\n* text=auto\n"
},
{
"path": ".github/workflows/sentinel.yml",
"content": "name: Generate Sentinel Report\n\non:\n repository_dispatch:\n types: generate-sentinel-report\n\njobs:\n build-and-test:\n name: Build Project\n runs-on: ubuntu-latest\n steps:\n - name: Check Out Repository\n uses: actions/checkout@v2\n\n - name: Install Dependencies\n run: npm ci\n\n - name: Run Test Suite\n run: npm run generate-test-report\n\n - name: Upload Test Report\n uses: actions/upload-artifact@v1\n with:\n name: report\n path: report.json\n\n send-data:\n name: Generate Report\n needs: build-and-test\n runs-on: ubuntu-latest\n steps:\n - name: Download Report\n uses: actions/download-artifact@v1\n with:\n name: report\n\n - name: Send Data to Sentinel\n uses: codebytere/sentinel-client@v1\n\n"
},
{
"path": ".gitignore",
"content": "node_modules\nout\nnpm-debug.log\n"
},
{
"path": ".node-version",
"content": "v8.9.3\n"
},
{
"path": ".travis.yml",
"content": "language: node_js\n\nnode_js:\n - \"node\"\n - \"lts/*\"\n\nbefore_script:\n - export DISPLAY=:99.0\n - sh -e /etc/init.d/xvfb start\n - sleep 3\n\nscript:\n - npm test\n - npm run package:linux\n\nbranches:\n only:\n - master\n\ncache:\n directories:\n - node_modules\n\nnotifications:\n email:\n on_success: never\n on_failure: change\n"
},
{
"path": "CODE_OF_CONDUCT.md",
"content": "# Contributor Code of Conduct\n\nAs contributors and maintainers of this project, and in the interest of fostering an open and welcoming community, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.\n\nWe are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, ethnicity, age, religion, or nationality.\n\nExamples of unacceptable behavior by participants include:\n\n- The use of sexualized language or imagery\n- Personal attacks\n- Trolling or insulting/derogatory comments\n- Public or private harassment\n- Publishing other's private information, such as physical or electronic addresses, without explicit permission\n- Other unethical or unprofessional conduct\n\nProject maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.\n\nBy adopting this Code of Conduct, project maintainers commit themselves to fairly and consistently applying these principles to every aspect of managing this project. Project maintainers who do not follow or enforce the Code of Conduct may be permanently removed from the project team.\n\nThis Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community.\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting a project maintainer at [coc@electronjs.org](mailto:coc@electronjs.org). All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. Maintainers are obligated to maintain confidentiality with regard to the reporter of an incident.\n\nThis Code of Conduct is adapted from the Contributor Covenant, version 1.3.0, available from http://contributor-covenant.org/version/1/3/0/\n"
},
{
"path": "CONTRIBUTING.md",
"content": "# Contributing to Electron API Demos\n\n[](http://standardjs.com)\n\n:+1::tada: First off, thanks for taking the time to contribute! :tada::+1:\n\nThis project adheres to the Contributor Covenant [code of conduct](CODE_OF_CONDUCT.md).\nBy participating, you are expected to uphold this code. Please report unacceptable\nbehavior to [coc@electronjs.org](mailto:coc@electronjs.org).\n\n**See the [documentation](docs.md) for information on how this project works.**\n\n## Code Style & ES6\n\nThis project uses the [JavaScript Standard](http://standardjs.com) style and limited ES6 syntax.\n\nBecause this project is intended for beginners we stick to mostly vanilla JavaScript. One of the features we want illustrate about Electron, however, is that you can use most of ES6 out of the box. To that end, in this project we use these parts of ES6:\n\n- [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const)\n- [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let)\n- [string templates](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)\n\n## Pull Requests and Issues\n\nTips for making an easier-to-review contribution:\n\n- Please provide a description.\n- Include screenshots and animated GIFs whenever possible.\n- Use short, present tense commit messages.\n"
},
{
"path": "ISSUE_TEMPLATE.md",
"content": "* What operating system are you using?\n* What version of Node.js is on your system?\n"
},
{
"path": "README.md",
"content": "# Electron API Demos\n\n[](https://travis-ci.org/electron/electron-api-demos)\n[](http://standardjs.com)\n\nThis is a desktop app that interactively and with sample code demonstrates core features of the [Electron](http://electronjs.org) API. It's built with Electron, too, of course. This app works on Windows, macOS and Linux operating systems.\n\nUse this app to see what you can do with Electron and use the source code to learn how to create a basic Electron app.\n\n\n\n---\n\nThis project adheres to the Contributor Covenant [code of conduct](CODE_OF_CONDUCT.md).\nBy participating, you are expected to uphold this code. Please report unacceptable\nbehavior to [coc@electronjs.org](mailto:coc@electronjs.org).\n\nFollow [@ElectronJS](https://twitter.com/electronjs) on Twitter for important\nannouncements. Visit the [electron website](http://electronjs.org).\n\n## Using\n\nYou can [download the latest release](https://github.com/electron/electron-api-demos/releases) for your operating system or build it yourself (see below).\n\n## Building\n\nYou'll need [Node.js](https://nodejs.org) installed on your computer in order to build this app.\n\n```bash\n$ git clone https://github.com/electron/electron-api-demos\n$ cd electron-api-demos\n$ npm install\n$ npm start\n```\n\nIf you don't wish to clone, you can [download the source code](https://github.com/electron/electron-api-demos/archive/master.zip).\n\nFor easier developing you can launch the app in fullscreen with DevTools open:\n\n```bash\n$ npm run dev\n```\n\n## Extending\n\n [Read the docs](docs.md) to learn more about how this app is built or how to [add a new demo](docs.md#add-a-section-or-demo).\n\n## Translations\n\n* Simplified Chinese translation of this app is available at [`demopark/electron-api-demos-Zh_CN`](https://github.com/demopark/electron-api-demos-Zh_CN).\n* Traditional Chinese translation of this app is available at [`CalvertYang/electron-api-demos-zh-Hant`](https://github.com/CalvertYang/electron-api-demos-zh-Hant).\n* Japanese translation of this app is available at [`LeeDDHH/electron-api-demos-ja`](https://github.com/LeeDDHH/electron-api-demos-ja).\n\nNote: these versions are maintained by outside contributors and may not always be in sync with this version.\n"
},
{
"path": "assets/code-blocks.js",
"content": "const fs = require('fs')\nconst path = require('path')\n\nconst codeBlocksWithPaths = document.querySelectorAll('code[data-path]')\n\nArray.prototype.forEach.call(codeBlocksWithPaths, (code) => {\n const codePath = path.join(__dirname, '..', code.dataset.path)\n const extension = path.extname(codePath)\n code.classList.add(`language-${extension.substring(1)}`)\n code.textContent = fs.readFileSync(codePath)\n})\n\ndocument.addEventListener('DOMContentLoaded', () => {\n const highlight = require('highlight.js')\n const codeBlocks = document.querySelectorAll('pre code')\n Array.prototype.forEach.call(codeBlocks, (code) => {\n highlight.highlightBlock(code)\n })\n})\n"
},
{
"path": "assets/css/about.css",
"content": "/* Welcome ------------------------ */\n\n.about {\n --about-space: 4rem;\n\n position: absolute;\n display: flex;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 1;\n overflow-x: hidden;\n overflow-y: auto;\n padding: 0;\n background-color: hsl(0,0%,98%);\n pointer-events: none;\n visibility: hidden;\n opacity: 0;\n transform: scale(1.1);\n transition: visibility 0s .12s linear , opacity .12s ease-in, transform .12s ease-in;\n}\n.about.is-shown {\n pointer-events: auto;\n visibility: visible;\n opacity: 1;\n transform: scale(1);\n transition: visibility 0s 0s linear , opacity .24s ease-out, transform .24s ease-out;\n}\n\n.about-wrapper {\n margin: auto;\n}\n\n.about-header {\n padding: var(--about-space) 0;\n border-bottom: 1px solid hsl(0,0%,88%);\n}\n\n.about-logo {\n display: block;\n margin: 0 auto;\n width: 320px; /* TODO: Adjust asset to this size */\n max-width: 100%;\n}\n\n.about-sections {\n max-width: 680px;\n padding: 0 var(--about-space);\n}\n\n.about-section {\n margin: var(--about-space) 0;\n}\n\n.about h2 {\n text-align: center;\n margin: 0 0 1em 0;\n font-size: 1.5em;\n color: hsl(0, 0%, 55%);\n}\n\n.about .about-code h2 {\n color: hsl(330, 65%, 55%);\n}\n\n.about .play-along h2 {\n color: hsl(222, 53%, 50%);\n}\n\n.about-button {\n display: block;\n margin: 0 auto;\n padding: .4em 1.2em;\n font: inherit;\n font-size: 1.6em;\n color: inherit;\n border: 2px solid;\n border-radius: 4px;\n background-color: transparent;\n}\n.about-button:focus {\n outline: none;\n border-color: hsl(0,0%,88%);\n}\n\nfooter.about-section {\n text-align: center;\n}\n\n.rainbow-button-wrapper {\n --rainbow-button-width: 170px;\n --rainbow-button-height: 50px;\n --rainbow-button-width-inner: 164px;\n --rainbow-button-height-inner: 44px;\n --rainbow-color-1: hsl(116, 30%, 36%);\n --rainbow-color-2: hsl(194, 60%, 36%);\n --rainbow-color-3: hsl(222, 53%, 50%);\n --rainbow-color-4: hsl(285, 47%, 46%);\n --rainbow-color-5: hsl(330, 65%, 48%);\n --rainbow-color-6: hsl(32, 79%, 49%);\n --rainbow-color-7: hsl(53, 84%, 50%);\n\n display: inline-block;\n width: var(--rainbow-button-width);\n height: var(--rainbow-button-height);\n position: relative;\n overflow: hidden;\n border-radius: 5px;\n}\n\n.rainbow-button-wrapper:before {\n display: block;\n position: absolute;\n z-index: 2;\n top: 0;\n left: 0;\n width: 600px;\n height: var(--rainbow-button-height);\n background: #CCC;\n background: linear-gradient(to right, var(--rainbow-color-1) 0%, var(--rainbow-color-2) 14%, var(--rainbow-color-3) 28%, var(--rainbow-color-4) 42%, var(--rainbow-color-5) 56%, var(--rainbow-color-6) 70%, var(--rainbow-color-7) 84%, var(--rainbow-color-1) 100%);\n background-position: -200px 0;\n transition: all 0.5s;\n content: \"\";\n}\n\n.rainbow-button-wrapper button {\n display: block;\n width: var(--rainbow-button-width-inner);\n height: var(--rainbow-button-height-inner);\n position: absolute;\n z-index: 3;\n top: 3px;\n left: 3px;\n border: none;\n background: white;\n color: black;\n font-size: 1.3rem;\n}\n\n.rainbow-button-wrapper:hover:before {\n background-position: 200px 0;\n}\n\n@media (min-width: 940px) {\n .about-header {\n align-self: center;\n padding: var(--about-space);\n border-right: 1px solid hsl(0,0%,88%);\n border-bottom: none;\n }\n .about-wrapper {\n display: flex;\n }\n}\n"
},
{
"path": "assets/css/demo.css",
"content": "/* Demo */\n\n.demo:first-of-type {\n margin-top: 2rem;\n}\n.demo:last-of-type {\n margin-bottom: 2rem;\n}\n@media (min-width: 940px) {\n .demo:last-of-type {\n margin-bottom: 4rem;\n }\n}\n\n.demo-wrapper {\n position: relative;\n max-width: 740px;\n margin: 0 auto;\n padding: 0 2rem;\n}\n\n\n/* Toggle Button ----------------------------- */\n\n.demo-toggle-button {\n position: relative;\n display: block;\n margin: 0;\n padding: .5em 1.5em;\n line-height: 1.5;\n font: inherit;\n font-weight: 600;\n font-size: 1.2em;\n text-align: left;\n border: none;\n color: inherit;\n background-color: transparent;\n transition: border-color .12s;\n outline: none;\n}\n\n.demo-toggle-button:before,\n.demo-toggle-button:after {\n content: \"\";\n position: absolute;\n left: 0;\n width: 2px;\n height: 50%;\n background-color: hsl(0,0%,88%);\n transition: transform .2s cubic-bezier(.4,.1,0,1);\n}\n.demo-toggle-button:before {\n top: 0;\n transform-origin: bottom center;\n transform: translateX(.7em) rotate(-30deg) scale(.75);\n}\n.demo-toggle-button:after {\n bottom: 0;\n transform-origin: top center;\n transform: translateX(.7em) rotate(30deg) scale(.75);\n}\n.is-open .demo-toggle-button:before,\n.is-open .demo-toggle-button:after {\n transform: rotate(0deg);\n}\n.demo-toggle-button:focus:before,\n.demo-toggle-button:focus:after {\n background-color: currentColor;\n}\n\n/* Meta info */\n\n.demo-meta {\n margin-top: .2em;\n font-size: 11px;\n font-weight: 300;\n text-transform: uppercase;\n color: var(--color-subtle);\n}\n.demo-meta-divider {\n margin: 0 .5em;\n}\n\n\n/* Demo Box ----------------------------- */\n\n.demo-box {\n display: none;\n position: relative;\n padding: 2em;\n margin-top: 1em;\n margin-bottom: 2em;\n border-radius: 6px;\n border: 1px solid var(--color-border);\n background-color: var(--color-bg);\n}\n.demo-box:before {\n content: \"\";\n position: absolute;\n top: -11px;\n width: 20px;\n height: 20px;\n background-color: inherit;\n border-top: inherit;\n border-right: inherit;\n border-top-right-radius: 3px;\n transform: rotate(-45deg);\n}\n\n.is-open .demo-box {\n display: block;\n animation: demo-box-fade-in .2s cubic-bezier(0, .20, .20, .96);\n}\n@keyframes demo-box-fade-in {\n 0% { opacity: 0; transform: translateY(-20px); }\n 100% { opacity: 1; transform: translateY(0); }\n}\n\n.demo-box > p:first-child {\n margin-top: 0;\n}\n\n.demo-box h5 {\n font-size: 1em;\n margin-bottom: .6em;\n}\n\n\n/* Demo Controls ----------------------------- */\n\n.demo-controls {\n display: flex;\n align-items: center;\n}\n\n.demo-button {\n align-self: flex-start;\n margin-right: 1em;\n border: 2px solid;\n border-radius: 4px;\n font: inherit;\n font-size: 1.2em;\n padding: .4em 1.2em;\n color: inherit;\n background-color: transparent;\n}\n.demo-button:focus {\n outline: none;\n background-color: white;\n}\n.demo-button:active {\n border-color: var(--color-border);\n}\n\n.demo-input {\n flex: 1;\n border: 2px solid var(--color-border);\n border-radius: 4px;\n font: inherit;\n font-size: 1.2em;\n padding: .4em .8em;\n color: inherit;\n background-color: transparent;\n}\n.demo-input:focus {\n outline: none;\n border-color: hsl(0,0%,80%);\n background-color: white;\n}\n\n.demo-response {\n flex: 1;\n word-break: break-word;\n}\n\n.smooth-appear {\n opacity: 1;\n transition: opacity .5s ease-in-out;\n}\n\n.disappear {\n opacity: 0;\n}\n.demo-button.smooth-disappear:focus {\n outline: inherit;\n border-color: inherit;\n background-color: inherit;\n}\n\n/* ProTip ----------------------------- */\n\n.demo-protip {\n margin-top: 2rem;\n padding: 1.5rem 2rem 2rem 2rem;\n border: 1px solid hsla(0,0%,0%,.06);\n border-radius: 6px;\n background: var(--color-accent) linear-gradient(hsla(0,0%,100%,.85), hsla(0,0%,100%,.85));\n}\n.demo-protip h2 {\n margin: 0 0 .5rem 0;\n}\n.demo-protip strong {\n font-weight: 600;\n}\n\n"
},
{
"path": "assets/css/github.css",
"content": "/*\n\ngithub.com style (c) Vasily Polovnyov \n\n*/\n\n.hljs {\n display: block;\n overflow-x: auto;\n padding: 0.5em;\n color: #333;\n background: #f8f8f8;\n}\n\n.hljs-comment,\n.hljs-quote {\n color: #998;\n font-style: italic;\n}\n\n.hljs-keyword,\n.hljs-selector-tag,\n.hljs-subst {\n color: #333;\n font-weight: bold;\n}\n\n.hljs-number,\n.hljs-literal,\n.hljs-variable,\n.hljs-template-variable,\n.hljs-tag .hljs-attr {\n color: #008080;\n}\n\n.hljs-string,\n.hljs-doctag {\n color: #d14;\n}\n\n.hljs-title,\n.hljs-section,\n.hljs-selector-id {\n color: #900;\n font-weight: bold;\n}\n\n.hljs-subst {\n font-weight: normal;\n}\n\n.hljs-type,\n.hljs-class .hljs-title {\n color: #458;\n font-weight: bold;\n}\n\n.hljs-tag,\n.hljs-name,\n.hljs-attribute {\n color: #000080;\n font-weight: normal;\n}\n\n.hljs-regexp,\n.hljs-link {\n color: #009926;\n}\n\n.hljs-symbol,\n.hljs-bullet {\n color: #990073;\n}\n\n.hljs-built_in,\n.hljs-builtin-name {\n color: #0086b3;\n}\n\n.hljs-meta {\n color: #999;\n font-weight: bold;\n}\n\n.hljs-deletion {\n background: #fdd;\n}\n\n.hljs-addition {\n background: #dfd;\n}\n\n.hljs-emphasis {\n font-style: italic;\n}\n\n.hljs-strong {\n font-weight: bold;\n}\n"
},
{
"path": "assets/css/global.css",
"content": "/* Fonts ---------------------------- */\n\n@font-face {\n font-family: 'Source Code Pro';\n font-style: normal;\n font-weight: 400;\n src: local('Source Code Pro'), local('SourceCodePro'), url(fonts/SourceCodePro-Regular.ttf) format('truetype');\n}\n\n\n/* Global ---------------------------- */\n\n* {\n box-sizing: border-box;\n}\n\nhtml {\n height: 100%;\n font-family: 'BlinkMacSystemFont', 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif;\n font-size: 14px;\n line-height: 1.5;\n overflow: hidden; /* Prevents rubber-band scrolling of the whole \"page\" */\n color: var(--color);\n background-color: #fff; /* To cover OSes with no default background color */\n}\n\nbody {\n margin: 0;\n height: 100%;\n display: flex;\n}\n\na {\n color: var(--color-link);\n}\n\nh1,\nh2,\nh3 {\n margin-top: 0;\n line-height: 1.5;\n}\n\nh1 {\n font-size: 1.5em;\n font-weight: 600;\n}\n\nh2 {\n font-size: 1.3em;\n font-weight: normal;\n}\n\nh3 {\n font-size: 1.12em;\n font-weight: 600;\n}\n\ntable {\n width: 100%;\n border-spacing: 0;\n border: 1px solid hsla(0,0%,0%,.08);\n border-width: 0 1px 1px 0;\n}\nth {\n background-color: hsla(0,0%,50%,.06);\n}\nth,\ntd {\n text-align: center;\n border: 1px solid hsla(0,0%,0%,.08);\n border-width: 1px 0 0 1px;\n}\n\nsvg {\n fill: currentColor;\n}\n\n/* Code */\n\ncode, kbd {\n font-family: 'Source Code Pro', monospace;\n border-radius: 4px;\n padding: 1px 4px;\n white-space: nowrap;\n color: hsl(0,0%,36%);\n background-color: hsla(0,0%,60%,.15);\n}\n\npre, kbd {\n font-size: 13px;\n overflow: auto;\n padding: 1em;\n margin: 0;\n border-radius: 4px;\n border: 1px solid;\n border-color: var(--color-border);\n background-color: white;\n}\n\npre code {\n white-space: pre;\n}\n\npre > .hljs {\n color: var(--color-subtle);\n background-color: white;\n}\n\nkbd {\n padding: 0.5em;\n}\n\n\n/* Utilities ---------------------------- */\n\n.u-avoid-clicks {\n pointer-events: none;\n}\n\n/* Visually hidden, but will be read by screen readers */\n.u-visible-to-screen-reader {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\n.no-display {\n display: none;\n}\n\n\n/* Content ------------------ */\n\n.content {\n flex: 1;\n position: relative;\n overflow: hidden;\n visibility: hidden;\n opacity: 0;\n}\n.content.is-shown {\n visibility: visible;;\n opacity: 1;\n}\n\n\n/* Hacks ---------------------------- */\n\n/* Fixes horizontal scrolling in code blocks on OS X El Cap (10.11.3), retina screen\n *\n * By adding an invisible outline property, it will force a repaint\n * which enables the scrolling.\n */\n\n.hljs:hover,\n.hljs:active {\n outline: 1px solid transparent;\n}\n"
},
{
"path": "assets/css/nativize.css",
"content": "/*\n** nativize.css\n** Makes the UI feel more native\n*/\n\nhtml {\n font-family: sans-serif;\n user-select: none; /* disable selection */\n -webkit-user-drag: none; /* disable dragging */\n cursor: default; /* use default cursor */\n}\n\nbody {\n margin: 0; /* remove default margin */\n}\n\n\n/* enable text selection */\n\n.is-selectable,\npre,\ncode {\n user-select: text;\n cursor: auto;\n}\n\n\n/* Buttons and links */\n\nbutton{\n cursor: default;\n}\n\n/* Internal links */\na {\n cursor: pointer;\n text-decoration: none;\n border-bottom: 1px dashed;\n outline: none;\n}\n\n/* New window (target) + external links */\na[target],\na[href^=\"https://\"],\na[href^=\"http://\"] {\n border-bottom: 1px solid;\n}\n\na:hover,\na:focus {\n border-bottom: none;\n}\n\n\n/* Images */\n\nimg {\n -webkit-user-drag: none; /* disable dragging */\n}\n"
},
{
"path": "assets/css/nav.css",
"content": "/* Nav */\n\n.nav {\n width: 340px;\n overflow-x: hidden;\n overflow-y: auto;\n color: var(--color-subtle);\n border-right: 1px solid var(--color-border);\n background-color: var(--color-bg);\n visibility: hidden;\n opacity: 0;\n}\n.nav.is-shown {\n visibility: visible;;\n opacity: 1;\n}\n\n.nav-header {\n position: relative;\n padding: 2rem;\n margin-bottom: 1rem;\n border-bottom: 1px solid var(--color-border);\n}\n\n.nav-title {\n text-transform: uppercase;\n font-weight: 300;\n line-height: 1;\n margin: 0;\n}\n\n.nav-title strong {\n font-weight: 600;\n color: var(--color-strong);\n}\n\n.nav-header-icon {\n position: absolute;\n width: 36px;\n height: 36px;\n top: 1.5rem; /* magic */\n right: 1.75rem; /* magic */\n}\n\n\n\n.nav-item {\n padding: .5em 0;\n}\n\n.nav-icon {\n width: 16px;\n height: 16px;\n vertical-align: top;\n margin-right: .25rem;\n}\n\n.nav-category {\n margin: .2em 0;\n padding-left: 2rem;\n font-size: 11px;\n font-weight: normal;\n text-transform: uppercase;\n}\n\n.nav-button {\n display: block;\n width: 100%;\n padding: .3rem;\n padding-left: calc(2rem + 16px + .5rem); /* padding + icon + magic */\n line-height: 2;\n text-align: left;\n font: inherit;\n font-size: 13px;\n color: inherit;\n border: none;\n background-color: transparent;\n cursor: default;\n outline: none;\n}\n.nav-button:hover,\n.nav-button:focus:not(.is-selected) {\n background-color: hsla(0,0%,0%,.1);\n}\n.nav-button.is-selected {\n background-color: var(--color-accent);\n}\n.nav-button.is-selected,\n.nav-button.is-selected em {\n color: #fff;\n}\n.nav-button.is-selected:focus {\n opacity: .8;\n}\n\n.nav-button em {\n font-style: normal;\n font-weight: 600;\n color: var(--color-strong);\n pointer-events: none; /* makes it invisible to clicks */\n}\n\n.nav-footer {\n margin-top: 1rem;\n padding: 2rem;\n border-top: 1px solid var(--color-border);\n text-align: center;\n}\n\n.nav-footer-icon {\n width: calc(770px / 6.5);\n height: calc(88px / 6.5);\n}\n\n.nav-footer a {\n outline: none;\n}\n\n.nav-footer-button {\n display: block;\n width: 100%;\n padding: 0;\n margin-bottom: .75rem;\n line-height: 2;\n text-align: left;\n font: inherit;\n font-size: 13px;\n color: inherit;\n border: none;\n background-color: transparent;\n cursor: default;\n outline: none;\n text-align: center;\n}\n.nav-footer-button:focus {\n color: var(--color-strong);\n}\n\n.nav-footer-logo {\n color: hsl(0,0%,66%);\n}\n.nav-footer-logo:focus {\n color: hsl(0,0%,33%);\n}\n\n/* Remove border on the logo */\n.nav-footer-logo.nav-footer-logo {\n border-bottom: none;\n}\n"
},
{
"path": "assets/css/print.css",
"content": "@media print {\n body {\n background: none;\n color: black !important;\n font-size: 70%;\n margin: 0; padding: 0;\n }\n\n h1 {\n font-size: 22px;\n }\n\n .nav, button, .demo-box:before,\n header p {\n display: none;\n }\n\n .demo-box, h2,\n pre, code {\n padding: 0 !important;\n margin: 0 !important;\n }\n\n header {\n padding: 0 0 10px 0;\n }\n\n code, .support {\n font-size: 10px;\n }\n}\n"
},
{
"path": "assets/css/section.css",
"content": "/* Section ------------------ */\n\n.section {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n overflow-x: hidden;\n overflow-y: auto;\n color: var(--color-accent);\n\n /* Hide */\n pointer-events: none;\n visibility: hidden;\n opacity: 0;\n transform: translateX(-20px);\n transition: visibility 0s .12s linear , opacity .12s ease-in, transform .12s ease-in;\n}\n.section.is-shown {\n pointer-events: auto;\n visibility: visible;\n opacity: 1;\n transform: translateX(0);\n transition: visibility 0s 0s linear , opacity .36s ease-out, transform .36s ease-out;\n}\n\n.section h3,\n.section p {\n color: var(--color);\n}\n\n.section-wrapper {\n position: relative;\n max-width: 740px;\n margin: 0 auto;\n padding: 2rem 2rem 1rem 2rem;\n border-bottom: 1px solid var(--color-border);\n}\n@media (min-width: 940px) {\n .section-wrapper {\n padding-top: 4rem;\n }\n}\n\n.section-icon {\n width: 32px;\n height: 32px;\n vertical-align: middle;\n margin-right: .5em;\n}\n"
},
{
"path": "assets/css/variables.css",
"content": "\n/* Custom Properties */\n\n:root {\n --color: hsl(0,0%,22%);\n --color-subtle: hsl(0,0%,44%);\n --color-strong: hsl(0,0%,11%);\n --color-link: hsl(0,0%,22%);\n\n --color-border: hsl(0,0%,88%);\n --color-bg: hsl(0,0%,96%);\n\n --color-accent: black; /* Fallback */\n}\n\n\n/* Category Colors */\n\n.u-category-windows { --color-accent: hsl(116, 30%, 36%); }\n.u-category-menu { --color-accent: hsl(194, 60%, 36%); }\n.u-category-native-ui { --color-accent: hsl(222, 53%, 50%); }\n.u-category-communication { --color-accent: hsl(285, 47%, 46%); }\n.u-category-system { --color-accent: hsl(330, 65%, 48%); }\n.u-category-media { --color-accent: hsl( 36, 77%, 34%); }\n"
},
{
"path": "assets/demo-btns.js",
"content": "const settings = require('electron-settings')\n\nconst demoBtns = document.querySelectorAll('.js-container-target')\n// Listen for demo button clicks\nArray.prototype.forEach.call(demoBtns, (btn) => {\n btn.addEventListener('click', (event) => {\n const parent = event.target.parentElement\n\n // Toggles the \"is-open\" class on the demo's parent element.\n parent.classList.toggle('is-open')\n\n // Saves the active demo if it is open, or clears it if the demo was user\n // collapsed by the user\n if (parent.classList.contains('is-open')) {\n settings.set('activeDemoButtonId', event.target.getAttribute('id'))\n } else {\n settings.delete('activeDemoButtonId')\n }\n })\n})\n\n// Default to the demo that was active the last time the app was open\nconst buttonId = settings.get('activeDemoButtonId')\nif (buttonId) {\n document.getElementById(buttonId).click()\n}\n"
},
{
"path": "assets/ex-links.js",
"content": "const shell = require('electron').shell\n\nconst links = document.querySelectorAll('a[href]')\n\nArray.prototype.forEach.call(links, (link) => {\n const url = link.getAttribute('href')\n if (url.indexOf('http') === 0) {\n link.addEventListener('click', (e) => {\n e.preventDefault()\n shell.openExternal(url)\n })\n }\n})\n"
},
{
"path": "assets/imports.js",
"content": "const links = document.querySelectorAll('link[rel=\"import\"]')\n\n// Import and add each page to the DOM\nArray.prototype.forEach.call(links, (link) => {\n let template = link.import.querySelector('.task-template')\n let clone = document.importNode(template.content, true)\n if (link.href.match('about.html')) {\n document.querySelector('body').appendChild(clone)\n } else {\n document.querySelector('.content').appendChild(clone)\n }\n})\n"
},
{
"path": "assets/mac/child.plist",
"content": "\n\n\n \n com.apple.security.app-sandbox\n \n com.apple.security.inherit\n \n \n\n"
},
{
"path": "assets/mac/info.plist",
"content": "\n\n\n\n CFBundleURLTypes\n \n \n CFBundleURLSchemes\n \n electron-api-demos\n \n CFBundleURLName\n Electron API Demos Protocol\n \n \n ElectronTeamID\n VEKTX9H2N7\n\n\n"
},
{
"path": "assets/mac/parent.plist",
"content": "\n\n\n \n com.apple.security.app-sandbox\n \n com.apple.security.application-groups\n VEKTX9H2N7.com.github.electron-api-demos\n com.apple.security.files.user-selected.read-write\n \n \n\n"
},
{
"path": "assets/nav.js",
"content": "const settings = require('electron-settings')\n\ndocument.body.addEventListener('click', (event) => {\n if (event.target.dataset.section) {\n handleSectionTrigger(event)\n } else if (event.target.dataset.modal) {\n handleModalTrigger(event)\n } else if (event.target.classList.contains('modal-hide')) {\n hideAllModals()\n }\n})\n\nfunction handleSectionTrigger (event) {\n hideAllSectionsAndDeselectButtons()\n\n // Highlight clicked button and show view\n event.target.classList.add('is-selected')\n\n // Display the current section\n const sectionId = `${event.target.dataset.section}-section`\n document.getElementById(sectionId).classList.add('is-shown')\n\n // Save currently active button in localStorage\n const buttonId = event.target.getAttribute('id')\n settings.set('activeSectionButtonId', buttonId)\n}\n\nfunction activateDefaultSection () {\n document.getElementById('button-windows').click()\n}\n\nfunction showMainContent () {\n document.querySelector('.js-nav').classList.add('is-shown')\n document.querySelector('.js-content').classList.add('is-shown')\n}\n\nfunction handleModalTrigger (event) {\n hideAllModals()\n const modalId = `${event.target.dataset.modal}-modal`\n document.getElementById(modalId).classList.add('is-shown')\n}\n\nfunction hideAllModals () {\n const modals = document.querySelectorAll('.modal.is-shown')\n Array.prototype.forEach.call(modals, (modal) => {\n modal.classList.remove('is-shown')\n })\n showMainContent()\n}\n\nfunction hideAllSectionsAndDeselectButtons () {\n const sections = document.querySelectorAll('.js-section.is-shown')\n Array.prototype.forEach.call(sections, (section) => {\n section.classList.remove('is-shown')\n })\n\n const buttons = document.querySelectorAll('.nav-button.is-selected')\n Array.prototype.forEach.call(buttons, (button) => {\n button.classList.remove('is-selected')\n })\n}\n\nfunction displayAbout () {\n document.querySelector('#about-modal').classList.add('is-shown')\n}\n\n// Default to the view that was active the last time the app was open\nconst sectionId = settings.get('activeSectionButtonId')\nif (sectionId) {\n showMainContent()\n const section = document.getElementById(sectionId)\n if (section) section.click()\n} else {\n activateDefaultSection()\n displayAbout()\n}\n"
},
{
"path": "assets/normalize-shortcuts.js",
"content": "const normalize = require('electron-shortcut-normalizer')\nlet shortcuts = document.querySelectorAll('kbd.normalize-to-platform')\n\nArray.prototype.forEach.call(shortcuts, (shortcut) => {\n shortcut.innerText = normalize(shortcut.innerText, process.platform)\n})\n"
},
{
"path": "cli.js",
"content": "#!/usr/bin/env node\n\nconst {spawn} = require('child_process')\nconst electron = require('electron')\nconst path = require('path')\n\nconst appPath = path.join(__dirname, 'main.js')\nconst args = [appPath].concat(process.argv.slice(2))\nconst proc = spawn(electron, args, {stdio: 'inherit'})\n\nproc.on('close', (code) => process.exit(code))\n"
},
{
"path": "docs.md",
"content": "# Documentation\n\nThis app has been developed to be a lightweight Electron app, demonstrating how to create a basic Electron app with a few exceptions that have been made for the sake of code organization in regards to the demos themselves.\n\nAll of the sample code shown in the app _is the actual code used in the app_. These JavaScript bits have been pulled out into their own file and organized by process (main or renderer) and then by section (communication, menus, native UI, media, system, windows).\n\nThis was done for maintainability—code updates only have to be made in one place—and organization—it's easy to find the sample code you're looking for.\n\nAll of the pages (or views) are separate `.html` files which are appended onto the `index.html` using [HTML imports](http://www.html5rocks.com/en/tutorials/webcomponents/imports/).\n\nAre you looking to add a demo? Jump to the [add a new demo section](#add-a-section-or-demo).\n\n## Folder Structure\n\n\n\n#### `assets`\nThis directory contains assets for the app itself: CSS, fonts, images and shared JavaScript libraries or helpers.\n\n#### `main-process`\nThis directory contains sub folders for each demo section that requires JavaScript in the main process. This structure is mirrored in the `renderer-process` directory.\n\nThe `main.js` file, located in the root, takes each `.js` file in these directories and executes them.\n\n#### `renderer-process`\nThis directory contains sub folders for each demo section that requires JavaScript in the renderer process. This structure is mirrored in the `main-process` directory.\n\nEach of the HTML page views requires the corresponding renderer-process `.js` files that it needs for its demo.\n\nEach page view reads the content of its relevant main and renderer process files and adds them to the page for the snippets.\n\n#### `sections`\nThis directory contains sub folders for each demo section. These subfolders contain the HTML files for each of the demo pages. Each of these files is appended to `index.html`, located at the root.\n\n#### `index.html`\nThis is the main view in the app. It contains the sidebar with navigation and uses [HTML imports](http://www.html5rocks.com/en/tutorials/webcomponents/imports/) to append each section HTML page to the `body`.\n\n#### `main.js`\nThis file contains the lifecycle instructions for the app like how to start and quit, it is the app's main process. It grabs every `.js` file in the `main-process` directory and executes.\n\nThe `package.json` sets this file as the `main` file.\n\n#### `package.json`\nThis file is required when using `npm` and Electron.js. It contains details on the app: the author, dependencies, repository and points to `main.js` as the application's main process file.\n\n#### Docs\nThe files: `CODE_OF_CONDUCT`, `README`, `docs` and `CONTRIBUTING` files make up the documentation for the project.\n\n## UI Terminology\n\n\n\n## CSS Naming Convention\n\nNothing too strict and used more as a guide:\n\n- Styling elements directly should be avoided, but ok in some cases. Like `
` or ``.\n- Elements that belong together are prefixed with their parent class. `.section`, `.section-header`, `.section-icon`.\n- States use `is-` prefix\n- Utilities use `u-` prefix\n\n## Add a Section or Demo\n\nHere are tips for covering the bases when adding a new section or demo. General tip—for some of these just copy the line or file of a similar existing item to get started!\n\n### New Section\n\nA whole new page with one or more demos.\n\n#### index.html\n\nThis page contains the sidebar list of sections as well as each section template that is imported with HTML imports.\n\n- Add demo to sidebar in the appropriate category in `index.html`\n - update `id` i.e. `id=\"button-dialogs\"`\n - update `data-section` i.e. `data-section=\"dialogs\"`\n- Add demo template path to the import links in the `head` of `index.html`\n - i.e. ``\n\n#### Template\n\nThis template is added to the `index.html` in the app.\n\n- In the `sections` directory, copy an existing template `html` file from the category you're adding a section to.\n- Update these tags `id`\n - i.e. `id=\"dialogs-section\"`\n- Update all the text in the `header` tag with text relevant to your new section.\n - Remove the demos and pro-tips as needed.\n\n### Demo\n\nAny code that you create for your demo should be added to the 'main-process' or 'renderer-process' directories depending on where it runs.\n\nAll JavaScript files within the 'main-process' directory are run when the app starts but you'll link to the file so that it is displayed within your demo (see below).\n\nThe renderer process code you add will be read and displayed within the demo and then required on the template page so that it runs in that process (see below).\n\n- Start by copying and pasting an existing `
` blocks from the template page.\n- Update the demo button `id`\n - i.e ``\n- If demo includes a response written to the DOM, update that `id`, otherwise delete:\n - i.e. ``\n- Update the text describing your demo.\n- If you are displaying main or renderer process sample code, include or remove that markup accordingly.\n - Sample code is read and added to the DOM by adding the path to the code in the `data-path`\n - i.e. `
To illustrate this we've made use of const, for unchanging declarations; let for scoped declarations; and template strings like: `Result is ${output}` in the demo snippets.
The ipc (inter-process communication) module allows you to send and receive synchronous and asynchronous messages between the main and renderer processes.
\n\n
There is a version of this module available for both processes: ipcMain and ipcRenderer.
Using ipc to send messages between processes asynchronously is the preferred method since it will return when finished without blocking other operations in the same process.
\n\n
This example sends a \"ping\" from this process (renderer) to the main process. The main process then replies with \"pong\".
\n
Renderer Process
\n
\n
Main Process
\n
\n
\n
\n
\n\n
\n
\n \n
\n
\n \n \n
\n
You can use the ipc module to send synchronous messages between processes as well, but note that the synchronous nature of this method means that it will block other operations while completing its task.
\n
This example sends a synchronous message, \"ping\", from this process (renderer) to the main process. The main process then replies with \"pong\".
\n
Renderer Process
\n
\n
Main Process
\n
\n
\n
\n
\n\n
\n
\n \n
\n
\n \n \n
\n
It is common practice to create a new invisible browser window (renderer process) in order to run tasks without impacting performance in the main app's window.
\n
In this example we use the remote module to create a new invisible browser window from this renderer process. When the new page is loaded we send a message with ipc that the new window is listening for.
\n
The new window then computes the factorial and sends the result to be received by this, the original, window and added to the page above.
The desktopCapturer module in Electron can be used to access any media, such as audio, video, screen and window, that is available through the getUserMedia web API in Chromium.
The Menu and MenuItem 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.
\n\n
This app uses the code below to set the application menu. If you click the 'View' option in the application menu and then the 'App Menu Demo', you'll see an information box displayed.
\n
Main Process
\n
\n\n
\n
ProTip
\n Know operating system menu differences.\n
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.
\n
For instance, on Windows, accelerators are set with an &. Naming conventions also vary, like between \"Settings\" or \"Preferences\". Below are resources for learning operating system specific standards.
A context, or right-click, menu can be created with the Menu and MenuItem modules as well. You can right-click anywhere in this app or click the demo button to see an example context menu.
\n\n
In this demo we use the ipcRenderer module to show the context menu when explicitly calling it from the renderer process.
The globalShortcut and Menu modules can be used to define keyboard shortcuts.
\n\n
\n In Electron, keyboard shortcuts are called accelerators.\n They can be assigned to actions in your application's Menu,\n or they can be assigned globally so they'll be triggered even when\n your app doesn't have keyboard focus.\n
\n To try this demo, press CommandOrControl+Alt+K on your keyboard.\n
\n\n
\n Global shortcuts are detected even when the app doesn't have\n keyboard focus, and they must be registered after the app's\n `ready` event is emitted.\n
\n When registering global shortcuts, it's important to be aware of\n existing defaults in the target operating system, so as not to\n override any existing behaviors. For an overview of each\n operating system's keyboard shortcuts, view these documents:\n
The dialog module in Electron allows you to use native system dialogs for opening files or directories, saving a file or displaying informational messages.
\n\n
This is a main process module because this process is more efficient with native utilities and it allows the call to happen without interrupting the visible elements in your page's renderer process.
In this demo, the ipc module is used to send a message from the renderer process instructing the main process to launch the open file (or directory) dialog. If a file is selected, the main process can send that information back to the renderer process.
\n
Renderer Process
\n
\n
Main Process
\n
\n\n
\n
ProTip
\n The sheet-style dialog on macOS.\n
On macOS you can choose between a \"sheet\" dialog or a default dialog. The sheet version descends from the top of the window. To use sheet version, pass the window as the first argument in the dialog method.
In this demo, the ipc module is used to send a message from the renderer process instructing the main process to launch the error dialog.
\n\n
You can use an error dialog before the app's ready event, which is useful for showing errors upon startup.
\n
Renderer Process
\n
\n
Main Process
\n
\n
\n
\n
\n\n
\n
\n \n
\n
\n \n \n
\n
In this demo, the ipc module is used to send a message from the renderer process instructing the main process to launch the information dialog. Options may be provided for responses which can then be relayed back to the renderer process.
\n\n
Note: The title property is not displayed in macOS.
\n\n
An information dialog can contain an icon, your choice of buttons, title and message.
\n
Renderer Process
\n
\n
Main Process
\n
\n
\n
\n
\n\n
\n
\n \n
\n
\n \n \n
\n
In this demo, the ipc module is used to send a message from the renderer process instructing the main process to launch the save dialog. It returns the path selected by the user which can be relayed back to the renderer process.
This demonstrates using the shell module to open the system file manager at a particular location.
\n
Clicking the demo button will open your file manager at the root.
\n
Renderer Process
\n
\n
\n
\n
\n\n
\n
\n \n
\n
\n \n
\n
If you do not want your app to open website links within the app, you can use the shell module to open them externally. When clicked, the links will open outside of your app and in the user's default web browser.
\n
When the demo button is clicked, the electron website will open in your browser.
\n
Renderer Process
\n
\n\n
\n
ProTip
\n Open all outbound links externally.\n
You may want to open all http and https links outside of your app. To do this, query the document and loop through each link and add a listener. This app uses the code below which is located in assets/ex-links.js.
The notification module in Electron allows you to add basic desktop notifications.
\n\n
Electron conveniently allows developers to send notifications with the HTML5 Notification API, using the currently running operating system’s native notification APIs to display it.
\n\n
Note: Since this is an HTML5 API it is only available in the renderer process.
The demo button sends a message to the main process using the ipc module. In the main process the app is told to place an icon, with a context menu, in the tray.
\n\n
In this example the tray icon can be removed by clicking 'Remove' in the context menu or selecting the demo button again.
\n
Main Process
\n
\n
Renderer Process
\n
\n\n
\n
ProTip
\n Tray support in Linux.\n
On Linux distributions that only have app indicator support, users will need to install libappindicator1 to make the tray icon work. See the full API documentation(opens in new window) for more details about using Tray on Linux.
With a few Node.js and Electron modules you can gather information about the user's system, app or screen.
\n
Links to the relevant documentation are in the demos below.
\n
\n \n\n
\n
\n \n
\n
\n \n \n
\n
The main process app module can be used to get the path at which your app is located on the user's computer.
\n
In this example, to get that information from the renderer process, we use the ipc module to send a message to the main process requesting the app's path.
The process module is built into Node.js (therefore you can use this in both the main and renderer processes) and in Electron apps this object has a few more useful properties on it.
\n
The example below gets the version of Electron in use by the app.
Electron also includes versions of Chromium, Node.js and V8 within the process.versions object. You can get there quickly by opening up developer tools in an Electron app and typing process.versions.
\n
// Returns version of Chromium in use\nprocess.versions.chrome\n// Returns version of V8 in use\nprocess.versions.v8\n// Returns version of Node in use\nprocess.versions.node
\n
\n
\n
\n
\n\n
\n
\n \n
\n
\n \n \n
\n
The Node.js os module provides useful information about the user's operating system. It's built into Node.js and can be used in both the main and renderer proesses.
\n
In the example below we require the module and then return the location of the home directory.
The Electron screen module retrieves information about screen size, displays, cursor position, etc. In the example below we retrieve the dimensions of the monitor in use.
The .size method in the example returns the raw dimensions of the screen but because of system menu bars this may not be the actual space available for your app.
\n\n
To get the dimensions of the available screen space use the .workAreaSize method. Using .workArea will return the coordinates as well as the dimensions of the available screen space.
In this example we copy a phrase to the clipboard. After clicking 'Copy' use the text area to paste (CMD + V or CTRL + V) the phrase from the clipboard.
\n
Renderer Process
\n
\n
\n
\n
\n\n
\n
\n \n
\n
\n \n \n
\n
In this example we copy a string to the clipboard and then paste the results into a message above.
The app module provides methods for handling protocols.
\n
These methods allow you to set and unset the protocols your app should be the default app for. Similar to when a browser asks to be your default for viewing web pages.
You can set your app as the default app to open for a specific protocol. For instance, in this demo we set this app as the default for electron-api-demos://. The demo button above will launch a page in your default browser with a link. Click that link and it will re-launch this app.
\n
Packaging
\n
This feature will only work on macOS when your app is packaged. It will not work when you're launching it in development from the command-line. When you package your app you'll need to make sure the macOS plist for the app is updated to include the new protocol handler. If you're using electron-packager then you can add the flag --extend-info with a path to the plist you've created. The one for this app is below.
The BrowserWindow module will emit events when the renderer process crashes or hangs. You can listen for these events and give users the chance to reload, wait or close that window.
In this demo we create a new window (via the remote module) and provide a link that will force a crash using process.crash().
\n
The window is listening for the crash event and when the event occurs it prompts the user with two options: reload or close.
\n\n
Renderer Process
\n
\n
\n
\n
\n\n
\n
\n \n
\n
\n \n
\n
In this demo we create a new window (via the remote module) and provide a link that will force the process to hang using process.hang().
\n
The window is listening for the process to become officially unresponsive (this can take up to 30 seconds). When this event occurs it prompts the user with two options: reload or close.
\n\n
Renderer Process
\n
\n\n
\n
ProTip
\n Wait for the process to become responsive again.\n
A third option in the case of a process that is hanging is to wait and see if the problem resolves, allowing the process to become responsive again. To do this, use the BrowserWindow event 'responsive' as shown below.
\n
win.on('responsive', function () {\n // Do something when the window is responsive again\n})
Resize or move the window. See the size and position in the main window.
\nClose this Window\n"
},
{
"path": "sections/windows/modal-toggle-visibility.html",
"content": "\n
Click on the parent window to see how the \"focus on demo\" button appears.
\nClose this Window"
},
{
"path": "sections/windows/modal.html",
"content": "\n\n
Hello World!
\nClose this Window\n"
},
{
"path": "sections/windows/process-crash.html",
"content": "\n\n
Click the text below to crash and then reload this process.
\nCrash this process\n"
},
{
"path": "sections/windows/process-hang.html",
"content": "\n\n
Click the text below to hang and then reload this process.
\n(This will take up to 30 seconds.)\n\nHang this process\n"
},
{
"path": "sections/windows/windows.html",
"content": "\n \n \n
\n
\n \n Create and Manage Windows\n
\n
The BrowserWindow module in Electron allows you to create a new browser window or manage an existing one.
\n\n
Each browser window is a separate process, known as the renderer process. This process, like the main process that controls the life cycle of the app, has full access to the Node.js APIs.\n\n
The BrowserWindow module gives you the ability to create new windows in your app. This main process module can be used from the renderer process with the remote module, as is shown in this demo.
\n\n
There are a lot of options when creating a new window. A few are in this demo, but visit the documentation(opens in new window) for the full list.
\n
Renderer Process
\n
\n\n
\n
ProTip
\n Use an invisible browser window to run background tasks.\n
You can set a new browser window to not be shown (be invisible) in order to use that additional renderer process as a kind of new thread in which to run JavaScript in the background of your app. You do this by setting the show property to false when defining the new window.
In this demo we create a new window and listen for move and resize events on it. Click the demo button, change the new window and see the dimensions and position update here, above.
\n
There are a lot of methods for controlling the state of the window such as the size, location, and focus status as well as events to listen to for window changes. Visit the documentation(opens in new window) for the full list.
\n
Renderer Process
\n
\n
\n
\n
\n\n
\n
\n \n
\n
\n \n \n
\n
In this demo, we create a new window and listen for blur event on it. Click the demo button to create a new modal window, and switch focus back to the parent window by clicking on it. You can click the Focus on Demo button to switch focus to the modal window again.
\n
Renderer Process
\n
\n
\n
\n
\n\n
\n
\n \n
\n
\n \n
\n
\n A frameless window is a window that has no \"chrome\",\n such as toolbars, title bars, status bars, borders, etc. You can make a browser window frameless by setting\n frame to false when creating the window.\n
\n\n
Renderer Process
\n
\n\n
Windows can have a transparent background, too. By setting the transparent option to true, you can also make your frameless window transparent:
\n
\nvar win = new BrowserWindow({\n transparent: true,\n frame: false\n})
![\"Electron](\"https://cloud.githubusercontent.com/assets/378023/15172388/b2b81950-1790-11e6-9a7c-ccc39912bb3a.png\")
Electron API Demos\n\n[](https://travis-ci.org/electron/electron-api-demos)\n[](http://standardjs.com)\n\nThis is a desktop app that interactively and with sample code demonstrates core features of the [Electron](http://electronjs.org) API. It's built with Electron, too, of course. This app works on Windows, macOS and Linux operating systems.\n\nUse this app to see what you can do with Electron and use the source code to learn how to create a basic Electron app.\n\n\n\n---\n\nThis project adheres to the Contributor Covenant [code of conduct](CODE_OF_CONDUCT.md).\nBy participating, you are expected to uphold this code. Please report unacceptable\nbehavior to [coc@electronjs.org](mailto:coc@electronjs.org).\n\nFollow [@ElectronJS](https://twitter.com/electronjs) on Twitter for important\nannouncements. Visit the [electron website](http://electronjs.org).\n\n## Using\n\nYou can [download the latest release](https://github.com/electron/electron-api-demos/releases) for your operating system or build it yourself (see below).\n\n## Building\n\nYou'll need [Node.js](https://nodejs.org) installed on your computer in order to build this app.\n\n```bash\n$ git clone https://github.com/electron/electron-api-demos\n$ cd electron-api-demos\n$ npm install\n$ npm start\n```\n\nIf you don't wish to clone, you can [download the source code](https://github.com/electron/electron-api-demos/archive/master.zip).\n\nFor easier developing you can launch the app in fullscreen with DevTools open:\n\n```bash\n$ npm run dev\n```\n\n## Extending\n\n [Read the docs](docs.md) to learn more about how this app is built or how to [add a new demo](docs.md#add-a-section-or-demo).\n\n## Translations\n\n* Simplified Chinese translation of this app is available at [`demopark/electron-api-demos-Zh_CN`](https://github.com/demopark/electron-api-demos-Zh_CN).\n* Traditional Chinese translation of this app is available at [`CalvertYang/electron-api-demos-zh-Hant`](https://github.com/CalvertYang/electron-api-demos-zh-Hant).\n* Japanese translation of this app is available at [`LeeDDHH/electron-api-demos-ja`](https://github.com/LeeDDHH/electron-api-demos-ja).\n\nNote: these versions are maintained by outside contributors and may not always be in sync with this version.\n"
},
{
"path": "assets/code-blocks.js",
"content": "const fs = require('fs')\nconst path = require('path')\n\nconst codeBlocksWithPaths = document.querySelectorAll('code[data-path]')\n\nArray.prototype.forEach.call(codeBlocksWithPaths, (code) => {\n const codePath = path.join(__dirname, '..', code.dataset.path)\n const extension = path.extname(codePath)\n code.classList.add(`language-${extension.substring(1)}`)\n code.textContent = fs.readFileSync(codePath)\n})\n\ndocument.addEventListener('DOMContentLoaded', () => {\n const highlight = require('highlight.js')\n const codeBlocks = document.querySelectorAll('pre code')\n Array.prototype.forEach.call(codeBlocks, (code) => {\n highlight.highlightBlock(code)\n })\n})\n"
},
{
"path": "assets/css/about.css",
"content": "/* Welcome ------------------------ */\n\n.about {\n --about-space: 4rem;\n\n position: absolute;\n display: flex;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 1;\n overflow-x: hidden;\n overflow-y: auto;\n padding: 0;\n background-color: hsl(0,0%,98%);\n pointer-events: none;\n visibility: hidden;\n opacity: 0;\n transform: scale(1.1);\n transition: visibility 0s .12s linear , opacity .12s ease-in, transform .12s ease-in;\n}\n.about.is-shown {\n pointer-events: auto;\n visibility: visible;\n opacity: 1;\n transform: scale(1);\n transition: visibility 0s 0s linear , opacity .24s ease-out, transform .24s ease-out;\n}\n\n.about-wrapper {\n margin: auto;\n}\n\n.about-header {\n padding: var(--about-space) 0;\n border-bottom: 1px solid hsl(0,0%,88%);\n}\n\n.about-logo {\n display: block;\n margin: 0 auto;\n width: 320px; /* TODO: Adjust asset to this size */\n max-width: 100%;\n}\n\n.about-sections {\n max-width: 680px;\n padding: 0 var(--about-space);\n}\n\n.about-section {\n margin: var(--about-space) 0;\n}\n\n.about h2 {\n text-align: center;\n margin: 0 0 1em 0;\n font-size: 1.5em;\n color: hsl(0, 0%, 55%);\n}\n\n.about .about-code h2 {\n color: hsl(330, 65%, 55%);\n}\n\n.about .play-along h2 {\n color: hsl(222, 53%, 50%);\n}\n\n.about-button {\n display: block;\n margin: 0 auto;\n padding: .4em 1.2em;\n font: inherit;\n font-size: 1.6em;\n color: inherit;\n border: 2px solid;\n border-radius: 4px;\n background-color: transparent;\n}\n.about-button:focus {\n outline: none;\n border-color: hsl(0,0%,88%);\n}\n\nfooter.about-section {\n text-align: center;\n}\n\n.rainbow-button-wrapper {\n --rainbow-button-width: 170px;\n --rainbow-button-height: 50px;\n --rainbow-button-width-inner: 164px;\n --rainbow-button-height-inner: 44px;\n --rainbow-color-1: hsl(116, 30%, 36%);\n --rainbow-color-2: hsl(194, 60%, 36%);\n --rainbow-color-3: hsl(222, 53%, 50%);\n --rainbow-color-4: hsl(285, 47%, 46%);\n --rainbow-color-5: hsl(330, 65%, 48%);\n --rainbow-color-6: hsl(32, 79%, 49%);\n --rainbow-color-7: hsl(53, 84%, 50%);\n\n display: inline-block;\n width: var(--rainbow-button-width);\n height: var(--rainbow-button-height);\n position: relative;\n overflow: hidden;\n border-radius: 5px;\n}\n\n.rainbow-button-wrapper:before {\n display: block;\n position: absolute;\n z-index: 2;\n top: 0;\n left: 0;\n width: 600px;\n height: var(--rainbow-button-height);\n background: #CCC;\n background: linear-gradient(to right, var(--rainbow-color-1) 0%, var(--rainbow-color-2) 14%, var(--rainbow-color-3) 28%, var(--rainbow-color-4) 42%, var(--rainbow-color-5) 56%, var(--rainbow-color-6) 70%, var(--rainbow-color-7) 84%, var(--rainbow-color-1) 100%);\n background-position: -200px 0;\n transition: all 0.5s;\n content: \"\";\n}\n\n.rainbow-button-wrapper button {\n display: block;\n width: var(--rainbow-button-width-inner);\n height: var(--rainbow-button-height-inner);\n position: absolute;\n z-index: 3;\n top: 3px;\n left: 3px;\n border: none;\n background: white;\n color: black;\n font-size: 1.3rem;\n}\n\n.rainbow-button-wrapper:hover:before {\n background-position: 200px 0;\n}\n\n@media (min-width: 940px) {\n .about-header {\n align-self: center;\n padding: var(--about-space);\n border-right: 1px solid hsl(0,0%,88%);\n border-bottom: none;\n }\n .about-wrapper {\n display: flex;\n }\n}\n"
},
{
"path": "assets/css/demo.css",
"content": "/* Demo */\n\n.demo:first-of-type {\n margin-top: 2rem;\n}\n.demo:last-of-type {\n margin-bottom: 2rem;\n}\n@media (min-width: 940px) {\n .demo:last-of-type {\n margin-bottom: 4rem;\n }\n}\n\n.demo-wrapper {\n position: relative;\n max-width: 740px;\n margin: 0 auto;\n padding: 0 2rem;\n}\n\n\n/* Toggle Button ----------------------------- */\n\n.demo-toggle-button {\n position: relative;\n display: block;\n margin: 0;\n padding: .5em 1.5em;\n line-height: 1.5;\n font: inherit;\n font-weight: 600;\n font-size: 1.2em;\n text-align: left;\n border: none;\n color: inherit;\n background-color: transparent;\n transition: border-color .12s;\n outline: none;\n}\n\n.demo-toggle-button:before,\n.demo-toggle-button:after {\n content: \"\";\n position: absolute;\n left: 0;\n width: 2px;\n height: 50%;\n background-color: hsl(0,0%,88%);\n transition: transform .2s cubic-bezier(.4,.1,0,1);\n}\n.demo-toggle-button:before {\n top: 0;\n transform-origin: bottom center;\n transform: translateX(.7em) rotate(-30deg) scale(.75);\n}\n.demo-toggle-button:after {\n bottom: 0;\n transform-origin: top center;\n transform: translateX(.7em) rotate(30deg) scale(.75);\n}\n.is-open .demo-toggle-button:before,\n.is-open .demo-toggle-button:after {\n transform: rotate(0deg);\n}\n.demo-toggle-button:focus:before,\n.demo-toggle-button:focus:after {\n background-color: currentColor;\n}\n\n/* Meta info */\n\n.demo-meta {\n margin-top: .2em;\n font-size: 11px;\n font-weight: 300;\n text-transform: uppercase;\n color: var(--color-subtle);\n}\n.demo-meta-divider {\n margin: 0 .5em;\n}\n\n\n/* Demo Box ----------------------------- */\n\n.demo-box {\n display: none;\n position: relative;\n padding: 2em;\n margin-top: 1em;\n margin-bottom: 2em;\n border-radius: 6px;\n border: 1px solid var(--color-border);\n background-color: var(--color-bg);\n}\n.demo-box:before {\n content: \"\";\n position: absolute;\n top: -11px;\n width: 20px;\n height: 20px;\n background-color: inherit;\n border-top: inherit;\n border-right: inherit;\n border-top-right-radius: 3px;\n transform: rotate(-45deg);\n}\n\n.is-open .demo-box {\n display: block;\n animation: demo-box-fade-in .2s cubic-bezier(0, .20, .20, .96);\n}\n@keyframes demo-box-fade-in {\n 0% { opacity: 0; transform: translateY(-20px); }\n 100% { opacity: 1; transform: translateY(0); }\n}\n\n.demo-box > p:first-child {\n margin-top: 0;\n}\n\n.demo-box h5 {\n font-size: 1em;\n margin-bottom: .6em;\n}\n\n\n/* Demo Controls ----------------------------- */\n\n.demo-controls {\n display: flex;\n align-items: center;\n}\n\n.demo-button {\n align-self: flex-start;\n margin-right: 1em;\n border: 2px solid;\n border-radius: 4px;\n font: inherit;\n font-size: 1.2em;\n padding: .4em 1.2em;\n color: inherit;\n background-color: transparent;\n}\n.demo-button:focus {\n outline: none;\n background-color: white;\n}\n.demo-button:active {\n border-color: var(--color-border);\n}\n\n.demo-input {\n flex: 1;\n border: 2px solid var(--color-border);\n border-radius: 4px;\n font: inherit;\n font-size: 1.2em;\n padding: .4em .8em;\n color: inherit;\n background-color: transparent;\n}\n.demo-input:focus {\n outline: none;\n border-color: hsl(0,0%,80%);\n background-color: white;\n}\n\n.demo-response {\n flex: 1;\n word-break: break-word;\n}\n\n.smooth-appear {\n opacity: 1;\n transition: opacity .5s ease-in-out;\n}\n\n.disappear {\n opacity: 0;\n}\n.demo-button.smooth-disappear:focus {\n outline: inherit;\n border-color: inherit;\n background-color: inherit;\n}\n\n/* ProTip ----------------------------- */\n\n.demo-protip {\n margin-top: 2rem;\n padding: 1.5rem 2rem 2rem 2rem;\n border: 1px solid hsla(0,0%,0%,.06);\n border-radius: 6px;\n background: var(--color-accent) linear-gradient(hsla(0,0%,100%,.85), hsla(0,0%,100%,.85));\n}\n.demo-protip h2 {\n margin: 0 0 .5rem 0;\n}\n.demo-protip strong {\n font-weight: 600;\n}\n\n"
},
{
"path": "assets/css/github.css",
"content": "/*\n\ngithub.com style (c) Vasily Polovnyov ![\"Electron](\"assets/img/about.png\")
\n