From 12fcac59a27605c86f959bcffad99a6588eacf58 Mon Sep 17 00:00:00 2001 From: Samuel Attard Date: Tue, 17 Jul 2018 10:26:58 +1000 Subject: [PATCH] refactor: clean up the default app, add CSP (#13437) * refactor: clean up the default app, add CSP * chore: appease the linter * refactor: make js2asar more generic, dont assume default_app as target --- default_app/default_app.js | 6 +- default_app/index.html | 162 +------------------------------------ default_app/renderer.js | 30 +++++++ default_app/styles.css | 155 +++++++++++++++++++++++++++++++++++ filenames.gypi | 7 ++ package-lock.json | 27 ++++--- package.json | 1 + tools/js2asar.py | 8 +- 8 files changed, 226 insertions(+), 170 deletions(-) create mode 100644 default_app/styles.css diff --git a/default_app/default_app.js b/default_app/default_app.js index e6ba9eea2cb5..1b9da74e503a 100644 --- a/default_app/default_app.js +++ b/default_app/default_app.js @@ -18,13 +18,17 @@ exports.load = (appUrl) => { webPreferences: { nodeIntegrationInWorker: true }, - useContentSize: true + useContentSize: true, + show: false } if (process.platform === 'linux') { options.icon = path.join(__dirname, 'icon.png') } mainWindow = new BrowserWindow(options) + + mainWindow.on('ready-to-show', () => mainWindow.show()) + mainWindow.loadURL(appUrl) mainWindow.focus() }) diff --git a/default_app/index.html b/default_app/index.html index c8564cb57a11..fd4525f128b5 100644 --- a/default_app/index.html +++ b/default_app/index.html @@ -2,165 +2,13 @@ Electron - + + +
-
- + \ No newline at end of file diff --git a/default_app/renderer.js b/default_app/renderer.js index 92e5530ada1a..977aad7ab9d4 100644 --- a/default_app/renderer.js +++ b/default_app/renderer.js @@ -1,4 +1,5 @@ const {remote, shell} = require('electron') +const fs = require('fs') const path = require('path') const URL = require('url') const electronPath = path.relative(process.cwd(), remote.process.execPath) @@ -20,3 +21,32 @@ document.querySelector('.chrome-version').innerText = `Chromium v${process.versi document.querySelector('.node-version').innerText = `Node v${process.versions.node}` document.querySelector('.v8-version').innerText = `v8 v${process.versions.v8}` document.querySelector('.command-example').innerText = `${electronPath} path-to-app` + +function getOcticonSvg (name) { + const octiconPath = path.resolve(__dirname, 'node_modules', 'octicons', 'build', 'svg', `${name}.svg`) + if (fs.existsSync(octiconPath)) { + const content = fs.readFileSync(octiconPath, 'utf8') + const div = document.createElement('div') + div.innerHTML = content + return div + } + return null +} + +function loadSVG (element) { + for (const cssClass of element.classList) { + if (cssClass.startsWith('octicon-')) { + const icon = getOcticonSvg(cssClass.substr(8)) + if (icon) { + icon.classList = element.classList + element.parentNode.insertBefore(icon, element) + element.remove() + break + } + } + } +} + +for (const element of document.querySelectorAll('.octicon')) { + loadSVG(element) +} diff --git a/default_app/styles.css b/default_app/styles.css new file mode 100644 index 000000000000..0839e520368d --- /dev/null +++ b/default_app/styles.css @@ -0,0 +1,155 @@ +body { + color: #86a5b1; + background-color: #2f3241; + font-family: Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", sans-serif; + margin: 0; + display: flex; + flex-direction: column; +} + +.container { + margin: 15px 30px 30px 30px; + background-color: #2f3241; + flex: 1; + display: flex; + flex-direction: column; +} + +.svg-stroke { + stroke: #9feaf9; +} + +.svg-fill { + fill: #9feaf9; +} + +.vertical-middle { + vertical-align: middle !important; +} + +h2, h4, p { + text-align: center; +} + +h4 { + font-weight: normal; + margin: 0; + line-height: 3; +} + +.hero-icons { + transform-origin: 50% 50%; +} + +hero-icon.loop-3 { + transform: translate(79px, 21px); + opacity: 1; +} + +.hero-icon { + fill: #c2f5ff; + opacity: 1; + transform-origin: 50% 50%; +} + +.hero-app { + fill: #71abb7; + transform-origin: 50% 50%; +} + +a { + color: #86a5b1; + text-decoration: none; + transition: all 0.2s; +} + +a:hover { + color: #c2f5ff; + text-decoration: none; +} + +pre, code, .code { + font-family: "Menlo", "Lucida Console", monospace; + color: #c2f5ff; +} + +pre { + background-color: #26282E; + white-space: pre-wrap; + line-height: 2.5; + overflow: auto; + margin: 0 auto; + display: inline-block; + padding: 6px 15px; + text-align: center; + border-radius: 3px; +} + +pre.with-prompt:before { + content: "$ "; + opacity: 0.7; +} + +code { + padding: 1px 4px; + font-size: 14px; + text-align: center; +} + +.versions { + list-style: none; + margin: 0 auto; + padding: 0; + float: none; + clear: both; + overflow: hidden; +} + +.versions li { + display: block; + float: left; + border-right: 1px solid rgba(194, 245, 255, 0.4); + padding: 0 20px; + font-size: 13px; + opacity: 0.8; +} + +.versions li:last-child { + border: none; +} + +nav { + margin: 40px 0 0 0; +} + +.linkcol { + width: 19%; + display: inline-block; + text-align: center; +} + +.hero-octicon { + display: block; + width: 80px; + height: 80px; + margin: 0; + padding: 0; + font-size: 42px !important; + color: #9feaf9; + text-align: center; + background-color: rgba(194, 245, 255, 0.1); + border-radius: 50%; +} + +.hero-octicon svg { + display: block; + padding-top: 20px; + height: 42px; + width: 42px; + margin: 0 auto; +} + +.octicon-gist:before { padding-left: 10px; } +.octicon-gear:before { padding-left: 5px; } +.octicon-star:before { padding-left: 6px; } +.octicon-gift:before { padding-left: 2px; } \ No newline at end of file diff --git a/filenames.gypi b/filenames.gypi index 0b4c35032018..2215cb4f6d89 100644 --- a/filenames.gypi +++ b/filenames.gypi @@ -98,6 +98,13 @@ 'default_app/main.js', 'default_app/package.json', 'default_app/renderer.js', + 'default_app/styles.css', + 'node_modules/octicons/build/build.css', + 'node_modules/octicons/build/svg/gist.svg', + 'node_modules/octicons/build/svg/mark-github.svg', + 'node_modules/octicons/build/svg/gear.svg', + 'node_modules/octicons/build/svg/star.svg', + 'node_modules/octicons/build/svg/gift.svg', ], 'lib_sources': [ 'atom/app/atom_content_client.cc', diff --git a/package-lock.json b/package-lock.json index 9ea2fedc3a74..d82dc7ef2310 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,9 +5,9 @@ "requires": true, "dependencies": { "@types/node": { - "version": "7.0.65", - "resolved": "https://registry.npmjs.org/@types/node/-/node-7.0.65.tgz", - "integrity": "sha512-iUdyWWikcQnGvIZnYh5ZxnxeREykndA9+iGdo068NGNutibWknDjmmNMq/8cnS1eaTCcgqJsPsFppw3XJWNlUg==", + "version": "7.0.66", + "resolved": "https://registry.npmjs.org/@types/node/-/node-7.0.66.tgz", + "integrity": "sha512-W11u5kUNSX2+N6bJ7rPyLW4N98/xzrZg8apRoTwC0zbFjIie//oxgKAvqkQNQ97KVchB49ost74kgzoeDiE+Uw==", "dev": true }, "JSONStream": { @@ -2517,9 +2517,9 @@ } }, "electron-typescript-definitions": { - "version": "1.3.4", - "resolved": "https://registry.npmjs.org/electron-typescript-definitions/-/electron-typescript-definitions-1.3.4.tgz", - "integrity": "sha512-/JI+ifj/Q4wtUTdsheACQS8fBIQ/eGvpLnmWCRpzZHl648gk4PxtsrrrnQYF5ZajSx9SXUTSq5UgfDt9Bq7Bhg==", + "version": "1.3.5", + "resolved": "https://registry.npmjs.org/electron-typescript-definitions/-/electron-typescript-definitions-1.3.5.tgz", + "integrity": "sha512-7Ryb7AN0Re63oeX3wHytjX0ScVlDcgj+GSBi6Q8aSNpo4B/sffAgZK6P/b4idqF26hp2jPJWcjBMizUb0VNfAQ==", "dev": true, "requires": { "@types/node": "^7.0.18", @@ -6248,6 +6248,15 @@ "is-extendable": "^0.1.1" } }, + "octicons": { + "version": "7.3.0", + "resolved": "https://registry.npmjs.org/octicons/-/octicons-7.3.0.tgz", + "integrity": "sha512-UVjlkmUL15Ef/7Rd72Io634Bdl61QgSMasAZpvXPoR2XNFj1RelAyhl4QJuR1hBGlPWFDR7KFj2jEzsFax2IUg==", + "dev": true, + "requires": { + "object-assign": "^4.1.1" + } + }, "on-finished": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", @@ -9417,9 +9426,9 @@ "dev": true }, "typescript": { - "version": "2.8.3", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.8.3.tgz", - "integrity": "sha512-K7g15Bb6Ra4lKf7Iq2l/I5/En+hLIHmxWZGq3D4DIRNFxMNV6j2SHSvDOqs2tGd4UvD/fJvrwopzQXjLrT7Itw==", + "version": "2.9.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.2.tgz", + "integrity": "sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w==", "dev": true }, "uc.micro": { diff --git a/package.json b/package.json index 825b01c8a163..4a0477ed6dcd 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "lint": "^1.1.2", "minimist": "^1.2.0", "nugget": "^2.0.1", + "octicons": "^7.3.0", "remark-cli": "^4.0.0", "remark-preset-lint-markdown-style-guide": "^2.1.1", "request": "^2.68.0", diff --git a/tools/js2asar.py b/tools/js2asar.py index adad1751e33d..633665079e7c 100755 --- a/tools/js2asar.py +++ b/tools/js2asar.py @@ -16,14 +16,18 @@ def main(): source_files = sys.argv[3:] output_dir = tempfile.mkdtemp() - copy_files(source_files, output_dir) + copy_files(source_files, output_dir, folder_name) call_asar(archive, os.path.join(output_dir, folder_name)) shutil.rmtree(output_dir) -def copy_files(source_files, output_dir): +def copy_files(source_files, output_dir, folder_name): for source_file in source_files: output_path = os.path.join(output_dir, source_file) + # Files that aren't in the default_app folder need to be put inside + # the temp one we are making so they end up in the ASAR + if not source_file.startswith(folder_name + "/"): + output_path = os.path.join(output_dir, folder_name, source_file) safe_mkdir(os.path.dirname(output_path)) shutil.copy2(source_file, output_path)