electron basics

app/style.css

@@ -0,0 +1,101 @@
+.widget {
+  width: 600px;
+  margin: 15px auto;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.banner {
+  text-align: center;
+  font-size: 16px;
+  font-style: bold;
+}
+
+.buttons {
+  margin: 8px 0;
+}
+
+.start, .length {
+  width: 50px;
+}
+
+.widget pre {
+  margin: 0;
+  padding: 0;
+  background: inherit;
+  border: none;
+}
+
+.code {
+  margin: 0 0 6px 0;
+  padding: 6px;
+  border: 1px solid black;
+  width: 420px;
+  height: 290px;
+  font-family: monospace;
+  overflow: auto;
+  float: left;
+}
+
+.screen {
+  float: right;
+}
+
+.debugger {
+  border: 1px black solid;
+  margin-top: 6px;
+  padding: 3px;
+  padding-top: 8px;
+  height: 125px;
+  width: 152px;
+  text-align: center;
+  float: right;
+}
+
+.minidebugger {
+  margin: 0;
+  margin-top: 6px;
+  padding: 0;
+  font-family: monospace;
+  font-size: 11px;
+}
+
+.monitorControls {
+  width: 587px;
+  clear: both;
+  margin-bottom: 10px;
+  padding: 0;
+}
+
+.monitorControls input {
+  margin-right: 0.5em;
+}
+
+.monitor {
+  margin: 10px 0;
+  padding: 6px;
+  border: 1px solid #999;
+  background-color: #ddd;
+  width: 587px;
+  height: 100px;
+  overflow: auto;
+  display: none;
+}
+
+.monitor-invalid {
+  border: 1px inset #c00;
+  padding: 2px 1px;
+}
+
+.messages {
+  margin: 0;
+  padding: 6px;
+  border: 1px solid #999;
+  background-color: #eee;
+  overflow: auto;
+  width: 587px;
+  height: 100px;
+  text-align: left;
+  font-size: 12px;
+  color: #444;
+}

main.js

@@ -0,0 +1,60 @@
+const electron = require('electron')
+// Module to control application life.
+const app = electron.app
+// Module to create native browser window.
+const BrowserWindow = electron.BrowserWindow
+
+const path = require('path')
+const url = require('url')
+
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the JavaScript object is garbage collected.
+let mainWindow
+
+function createWindow () {
+  // Create the browser window.
+  mainWindow = new BrowserWindow({width: 800, height: 600})
+
+  // and load the index.html of the app.
+  mainWindow.loadURL(url.format({
+    pathname: path.join(__dirname, 'app/index.html'),
+    protocol: 'file:',
+    slashes: true
+  }))
+
+  // Open the DevTools.
+  // mainWindow.webContents.openDevTools()
+
+  // Emitted when the window is closed.
+  mainWindow.on('closed', function () {
+    // Dereference the window object, usually you would store windows
+    // in an array if your app supports multi windows, this is the time
+    // when you should delete the corresponding element.
+    mainWindow = null
+  })
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', createWindow)
+
+// Quit when all windows are closed.
+app.on('window-all-closed', function () {
+  // On OS X it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', function () {
+  // On OS X it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (mainWindow === null) {
+    createWindow()
+  }
+})
+
+// In this file you can include the rest of your app's specific main process
+// code. You can also put them in separate files and require them here.