From 55babea2bbd994acbb9f2db48d7139c878a2102a Mon Sep 17 00:00:00 2001
From: Steve Kinney <hello@stevekinney.net>
Date: Wed, 4 May 2016 12:11:51 -0600
Subject: [PATCH] :memo: Update tutorials to ES6 [ci skip]

---
 docs/tutorial/application-packaging.md        |  8 ++--
 .../desktop-environment-integration.md        | 21 +++++-----
 docs/tutorial/online-offline-events.md        | 22 ++++++-----
 docs/tutorial/quick-start.md                  | 32 ++++++++--------
 docs/tutorial/using-pepper-flash-plugin.md    |  4 +-
 docs/tutorial/using-selenium-and-webdriver.md | 38 +++++++++----------
 docs/tutorial/using-widevine-cdm-plugin.md    |  4 +-
 7 files changed, 66 insertions(+), 63 deletions(-)

diff --git a/docs/tutorial/application-packaging.md b/docs/tutorial/application-packaging.md
index b42a2f9298ba..257119a573a6 100644
--- a/docs/tutorial/application-packaging.md
+++ b/docs/tutorial/application-packaging.md
@@ -71,8 +71,8 @@ require('/path/to/example.asar/dir/module.js');
 You can also display a web page in an `asar` archive with `BrowserWindow`:
 
 ```javascript
-const BrowserWindow = require('electron').BrowserWindow;
-var win = new BrowserWindow({width: 800, height: 600});
+const { BrowserWindow } = require('electron');
+let win = new BrowserWindow({width: 800, height: 600});
 win.loadURL('file:///path/to/example.asar/static/index.html');
 ```
 
@@ -86,7 +86,7 @@ For example, to get a file with `$.get`:
 ```html
 <script>
 var $ = require('./jquery.min.js');
-$.get('file:///path/to/example.asar/file.txt', function(data) {
+$.get('file:///path/to/example.asar/file.txt', (data) => {
   console.log(data);
 });
 </script>
@@ -99,7 +99,7 @@ content of `asar` archive as file. For this purpose you can use the built-in
 `original-fs` module which provides original `fs` APIs without `asar` support:
 
 ```javascript
-var originalFs = require('original-fs');
+const originalFs = require('original-fs');
 originalFs.readFileSync('/path/to/example.asar');
 ```
 
diff --git a/docs/tutorial/desktop-environment-integration.md b/docs/tutorial/desktop-environment-integration.md
index 110d2917ab47..470e7799656b 100644
--- a/docs/tutorial/desktop-environment-integration.md
+++ b/docs/tutorial/desktop-environment-integration.md
@@ -18,7 +18,7 @@ the currently running operating system's native notification APIs to display it.
 **Note:** Since this is an HTML5 API it is only available in the renderer process.
 
 ```javascript
-var myNotification = new Notification('Title', {
+let myNotification = new Notification('Title', {
   body: 'Lorem Ipsum Dolor Sit Amet'
 });
 
@@ -117,8 +117,8 @@ const electron = require('electron');
 const app = electron.app;
 const Menu = electron.Menu;
 
-var dockMenu = Menu.buildFromTemplate([
-  { label: 'New Window', click: function() { console.log('New Window'); } },
+const dockMenu = Menu.buildFromTemplate([
+  { label: 'New Window', click: () => { console.log('New Window'); } },
   { label: 'New Window with Settings', submenu: [
     { label: 'Basic' },
     { label: 'Pro'}
@@ -209,24 +209,25 @@ You can use [BrowserWindow.setThumbarButtons][setthumbarbuttons] to set
 thumbnail toolbar in your application:
 
 ```javascript
-const BrowserWindow = require('electron').BrowserWindow;
+const { BrowserWindow } = require('electron');
 const path = require('path');
 
-var win = new BrowserWindow({
+let win = new BrowserWindow({
   width: 800,
   height: 600
 });
+
 win.setThumbarButtons([
   {
     tooltip: "button1",
     icon: path.join(__dirname, 'button1.png'),
-    click: function() { console.log("button2 clicked"); }
+    click: () => { console.log("button2 clicked"); }
   },
   {
     tooltip: "button2",
     icon: path.join(__dirname, 'button2.png'),
     flags:['enabled', 'dismissonclick'],
-    click: function() { console.log("button2 clicked."); }
+    click: () => { console.log("button2 clicked."); }
   }
 ]);
 ```
@@ -266,7 +267,7 @@ To set the progress bar for a Window, you can use the
 [BrowserWindow.setProgressBar][setprogressbar] API:
 
 ```javascript
-var window = new BrowserWindow({...});
+let window = new BrowserWindow({...});
 window.setProgressBar(0.5);
 ```
 
@@ -293,7 +294,7 @@ To set the overlay icon for a window, you can use the
 [BrowserWindow.setOverlayIcon][setoverlayicon] API:
 
 ```javascript
-var window = new BrowserWindow({...});
+let window = new BrowserWindow({...});
 window.setOverlayIcon('path/to/overlay.png', 'Description for overlay');
 ```
 
@@ -315,7 +316,7 @@ To set the represented file of window, you can use the
 [BrowserWindow.setDocumentEdited][setdocumentedited] APIs:
 
 ```javascript
-var window = new BrowserWindow({...});
+let window = new BrowserWindow({...});
 window.setRepresentedFilename('/etc/passwd');
 window.setDocumentEdited(true);
 ```
diff --git a/docs/tutorial/online-offline-events.md b/docs/tutorial/online-offline-events.md
index d143118e0158..7e784e336e36 100644
--- a/docs/tutorial/online-offline-events.md
+++ b/docs/tutorial/online-offline-events.md
@@ -10,10 +10,11 @@ const electron = require('electron');
 const app = electron.app;
 const BrowserWindow = electron.BrowserWindow;
 
-var onlineStatusWindow;
-app.on('ready', function() {
+let onlineStatusWindow;
+
+app.on('ready', () => {
   onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false });
-  onlineStatusWindow.loadURL('file://' + __dirname + '/online-status.html');
+  onlineStatusWindow.loadURL(`file://${__dirname}/online-status.html`);
 });
 ```
 
@@ -24,7 +25,7 @@ _online-status.html_
 <html>
 <body>
 <script>
-  var alertOnlineStatus = function() {
+  const alertOnlineStatus = () => {
     window.alert(navigator.onLine ? 'online' : 'offline');
   };
 
@@ -51,13 +52,14 @@ const app = electron.app;
 const ipcMain = electron.ipcMain;
 const BrowserWindow = electron.BrowserWindow;
 
-var onlineStatusWindow;
-app.on('ready', function() {
+let onlineStatusWindow;
+
+app.on('ready', () => {
   onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false });
-  onlineStatusWindow.loadURL('file://' + __dirname + '/online-status.html');
+  onlineStatusWindow.loadURL(`file://${__dirname}/online-status.html`);
 });
 
-ipcMain.on('online-status-changed', function(event, status) {
+ipcMain.on('online-status-changed', (event, status) => {
   console.log(status);
 });
 ```
@@ -69,8 +71,8 @@ _online-status.html_
 <html>
 <body>
 <script>
-  const ipcRenderer = require('electron').ipcRenderer;
-  var updateOnlineStatus = function() {
+  const { ipcRenderer } = require('electron');
+  const updateOnlineStatus = () => {
     ipcRenderer.send('online-status-changed', navigator.onLine ? 'online' : 'offline');
   };
 
diff --git a/docs/tutorial/quick-start.md b/docs/tutorial/quick-start.md
index 573e296d4d17..58f14a281dcb 100644
--- a/docs/tutorial/quick-start.md
+++ b/docs/tutorial/quick-start.md
@@ -82,54 +82,54 @@ example being:
 ```javascript
 const electron = require('electron')
 // Module to control application life.
-const app = electron.app
+const app = electron.app;
 // Module to create native browser window.
-const BrowserWindow = electron.BrowserWindow
+const BrowserWindow = electron.BrowserWindow;
 
 // 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
+let mainWindow;
 
 function createWindow () {
   // Create the browser window.
-  mainWindow = new BrowserWindow({width: 800, height: 600})
+  mainWindow = new BrowserWindow({width: 800, height: 600});
 
   // and load the index.html of the app.
-  mainWindow.loadURL('file://' + __dirname + '/index.html')
+  mainWindow.loadURL(`file://${__dirname}/index.html`);
 
   // Open the DevTools.
-  mainWindow.webContents.openDevTools()
+  mainWindow.webContents.openDevTools();
 
   // Emitted when the window is closed.
-  mainWindow.on('closed', function () {
+  mainWindow.on('closed', () => {
     // 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
-  })
+    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)
+app.on('ready', createWindow);
 
 // Quit when all windows are closed.
-app.on('window-all-closed', function () {
+app.on('window-all-closed', () => {
   // 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.quit();
   }
-})
+});
 
-app.on('activate', function () {
+app.on('activate', () => {
   // 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()
+    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.
diff --git a/docs/tutorial/using-pepper-flash-plugin.md b/docs/tutorial/using-pepper-flash-plugin.md
index de7c7001cf36..31ab1104b1a3 100644
--- a/docs/tutorial/using-pepper-flash-plugin.md
+++ b/docs/tutorial/using-pepper-flash-plugin.md
@@ -28,7 +28,7 @@ app.commandLine.appendSwitch('ppapi-flash-path', '/path/to/libpepflashplayer.so'
 // Optional: Specify flash version, for example, v17.0.0.169
 app.commandLine.appendSwitch('ppapi-flash-version', '17.0.0.169');
 
-app.on('ready', function() {
+app.on('ready', () => {
   mainWindow = new BrowserWindow({
     width: 800,
     height: 600,
@@ -36,7 +36,7 @@ app.on('ready', function() {
       plugins: true
     }
   });
-  mainWindow.loadURL('file://' + __dirname + '/index.html');
+  mainWindow.loadURL(`file://${__dirname}/index.html`);
   // Something else
 });
 ```
diff --git a/docs/tutorial/using-selenium-and-webdriver.md b/docs/tutorial/using-selenium-and-webdriver.md
index 32a96cd84b74..af8f00cb2324 100644
--- a/docs/tutorial/using-selenium-and-webdriver.md
+++ b/docs/tutorial/using-selenium-and-webdriver.md
@@ -43,7 +43,7 @@ and where to find Electron's binary:
 ```javascript
 const webdriver = require('selenium-webdriver');
 
-var driver = new webdriver.Builder()
+const driver = new webdriver.Builder()
   // The "9515" is the port opened by chrome driver.
   .usingServer('http://localhost:9515')
   .withCapabilities({
@@ -58,7 +58,7 @@ var driver = new webdriver.Builder()
 driver.get('http://www.google.com');
 driver.findElement(webdriver.By.name('q')).sendKeys('webdriver');
 driver.findElement(webdriver.By.name('btnG')).click();
-driver.wait(function() {
+driver.wait(() => {
  return driver.getTitle().then(function(title) {
    return title === 'webdriver - Google Search';
  });
@@ -94,29 +94,29 @@ $ npm install webdriverio
 
 ```javascript
 const webdriverio = require('webdriverio');
-var options = {
-    host: "localhost", // Use localhost as chrome driver server
-    port: 9515,        // "9515" is the port opened by chrome driver.
-    desiredCapabilities: {
-        browserName: 'chrome',
-        chromeOptions: {
-          binary: '/Path-to-Your-App/electron', // Path to your Electron binary.
-          args: [/* cli arguments */]           // Optional, perhaps 'app=' + /path/to/your/app/
-        }
+const options = {
+  host: 'localhost', // Use localhost as chrome driver server
+  port: 9515,        // "9515" is the port opened by chrome driver.
+  desiredCapabilities: {
+    browserName: 'chrome',
+    chromeOptions: {
+      binary: '/Path-to-Your-App/electron', // Path to your Electron binary.
+      args: [/* cli arguments */]           // Optional, perhaps 'app=' + /path/to/your/app/
     }
+  }
 };
 
 var client = webdriverio.remote(options);
 
 client
-    .init()
-    .url('http://google.com')
-    .setValue('#q', 'webdriverio')
-    .click('#btnG')
-    .getTitle().then(function(title) {
-        console.log('Title was: ' + title);
-    })
-    .end();
+  .init()
+  .url('http://google.com')
+  .setValue('#q', 'webdriverio')
+  .click('#btnG')
+  .getTitle().then((title) => {
+    console.log('Title was: ' + title);
+  })
+  .end();
 ```
 
 ## Workflow
diff --git a/docs/tutorial/using-widevine-cdm-plugin.md b/docs/tutorial/using-widevine-cdm-plugin.md
index fa288bab0ff5..26590250ed5d 100644
--- a/docs/tutorial/using-widevine-cdm-plugin.md
+++ b/docs/tutorial/using-widevine-cdm-plugin.md
@@ -59,8 +59,8 @@ app.commandLine.appendSwitch('widevine-cdm-path', '/path/to/widevinecdmadapter.p
 // The version of plugin can be got from `chrome://plugins` page in Chrome.
 app.commandLine.appendSwitch('widevine-cdm-version', '1.4.8.866');
 
-var mainWindow = null;
-app.on('ready', function() {
+let mainWindow = null;
+app.on('ready', () => {
   mainWindow = new BrowserWindow({
     webPreferences: {
       // The `plugins` have to be enabled.