Move GUI code into lib/gui (#358)

This refactoring will be useful on future changes, where there will be
a single application entry point that will execute the CLI or the GUI
version depending on the environment.

Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>

gulpfile.js

@@ -29,9 +29,9 @@ const paths = {
     'gulpfile.js'
   ],
   sass: [
-    './lib/**/*.scss'
+    './lib/gui/**/*.scss'
   ],
-  sassMain: './lib/scss/main.scss'
+  sassMain: './lib/gui/scss/main.scss'
 };
 
 gulp.task('sass', function() {

lib/gui/app.js

@@ -23,40 +23,40 @@
 var angular = require('angular');
 const _ = require('lodash');
 const electron = require('electron');
-const dialog = electron.remote.require('./src/dialog');
+const dialog = electron.remote.require('./dialog');
 
 const app = angular.module('Etcher', [
   require('angular-ui-router'),
 
   // Etcher modules
-  require('./browser/modules/drive-scanner'),
-  require('./browser/modules/image-writer'),
-  require('./browser/modules/analytics'),
+  require('./modules/drive-scanner'),
+  require('./modules/image-writer'),
+  require('./modules/analytics'),
 
   // Models
-  require('./browser/models/selection-state'),
-  require('./browser/models/settings'),
+  require('./models/selection-state'),
+  require('./models/settings'),
 
   // Components
-  require('./browser/components/progress-button/progress-button'),
-  require('./browser/components/drive-selector/drive-selector'),
-  require('./browser/components/svg-icon/svg-icon'),
+  require('./components/progress-button/progress-button'),
+  require('./components/drive-selector/drive-selector'),
+  require('./components/svg-icon/svg-icon'),
 
   // Pages
-  require('./browser/pages/finish/finish'),
-  require('./browser/pages/settings/settings'),
+  require('./pages/finish/finish'),
+  require('./pages/settings/settings'),
 
   // OS
-  require('./browser/os/notification/notification'),
-  require('./browser/os/window-progress/window-progress'),
-  require('./browser/os/open-external/open-external'),
-  require('./browser/os/dropzone/dropzone'),
+  require('./os/notification/notification'),
+  require('./os/window-progress/window-progress'),
+  require('./os/open-external/open-external'),
+  require('./os/dropzone/dropzone'),
 
   // Utils
-  require('./browser/utils/if-state/if-state'),
-  require('./browser/utils/notifier/notifier'),
-  require('./browser/utils/path/path'),
-  require('./browser/utils/manifest-bind/manifest-bind')
+  require('./utils/if-state/if-state'),
+  require('./utils/notifier/notifier'),
+  require('./utils/path/path'),
+  require('./utils/manifest-bind/manifest-bind')
 ]);
 
 app.run(function(AnalyticsService) {

lib/gui/components/drive-selector/drive-selector.js

@@ -24,8 +24,8 @@ const angular = require('angular');
 const MODULE_NAME = 'Etcher.Components.DriveSelector';
 const DriveSelector = angular.module(MODULE_NAME, [
   require('angular-ui-bootstrap'),
-  require('../../../browser/modules/drive-scanner'),
-  require('../../../browser/models/selection-state')
+  require('../../modules/drive-scanner'),
+  require('../../models/selection-state')
 ]);
 
 DriveSelector.controller('DriveSelectorController', require('./controllers/drive-selector'));

lib/gui/components/drive-selector/services/drive-selector.js

@@ -36,7 +36,7 @@ module.exports = function($uibModal, $q) {
   this.open = function() {
     modal = $uibModal.open({
       animation: true,
-      templateUrl: './browser/components/drive-selector/templates/drive-selector-modal.tpl.html',
+      templateUrl: './components/drive-selector/templates/drive-selector-modal.tpl.html',
       controller: 'DriveSelectorController as modal',
       size: 'sm'
     });

lib/gui/components/progress-button/directives/progress-button.js

@@ -32,7 +32,7 @@
  */
 module.exports = function() {
   return {
-    templateUrl: './browser/components/progress-button/templates/progress-button.tpl.html',
+    templateUrl: './components/progress-button/templates/progress-button.tpl.html',
     restrict: 'E',
     replace: true,
     transclude: true,

lib/gui/components/svg-icon/directives/svg-icon.js

@@ -34,7 +34,7 @@ const fs = require('fs');
  */
 module.exports = function() {
   return {
-    templateUrl: './browser/components/svg-icon/templates/svg-icon.tpl.html',
+    templateUrl: './components/svg-icon/templates/svg-icon.tpl.html',
     replace: true,
     restrict: 'E',
     scope: {

lib/gui/etcher.js

@@ -19,8 +19,8 @@
 const electron = require('electron');
 const globalShortcut = require('global-shortcut');
 const path = require('path');
-const elevate = require('./elevate');
-const packageJSON = require('../package.json');
+const elevate = require('../src/elevate');
+const packageJSON = require('../../package.json');
 let mainWindow = null;
 
 electron.app.on('window-all-closed', electron.app.quit);
@@ -45,7 +45,7 @@ electron.app.on('ready', function() {
       resizable: false,
       fullscreen: false,
       titleBarStyle: 'hidden-inset',
-      icon: path.join(__dirname, '..', 'assets', 'icon.png')
+      icon: path.join(__dirname, '..', '..', 'assets', 'icon.png')
     });
 
     // Prevent flash of white when starting the application

lib/gui/index.html

@@ -2,8 +2,8 @@
 <html>
   <head>
     <title>Etcher</title>
-    <link rel="stylesheet" type="text/css" href="../node_modules/flexboxgrid/dist/flexboxgrid.css">
-    <link rel="stylesheet" type="text/css" href="../build/css/main.css">
+    <link rel="stylesheet" type="text/css" href="../../node_modules/flexboxgrid/dist/flexboxgrid.css">
+    <link rel="stylesheet" type="text/css" href="../../build/css/main.css">
     <link rel="stylesheet" type="text/css" href="css/desktop.css">
     <link rel="stylesheet" type="text/css" href="css/angular.css">
 
@@ -13,9 +13,9 @@
         application: 'etcher'
       };
     </script>
-    <script src="../node_modules/trackjs/tracker.js"></script>
+    <script src="../../node_modules/trackjs/tracker.js"></script>
 
-    <script src="./browser/app.js"></script>
+    <script src="./app.js"></script>
   </head>
   <body ng-app="Etcher" style="display: none">
     <header class="section-header">
@@ -35,7 +35,7 @@
     <main class="wrapper" ui-view></main>
 
     <footer class="section-footer">
-      <svg-icon path="../../../../../assets/images/etcher.svg"
+      <svg-icon path="../../../assets/etcher.svg"
         width="83px"
         height="13px"
         os-open-external="http://etcher.io"></svg-icon>
@@ -44,7 +44,7 @@
         IS <span class="caption" os-open-external="https://github.com/resin-io/etcher">AN OPEN SOURCE PROJECT</span> BY
       </span>
 
-      <svg-icon path="../../../../../assets/images/resin.svg"
+      <svg-icon path="../../../assets/resin.svg"
         width="79px"
         height="23px"
         os-open-external="https://resin.io"></svg-icon>

lib/gui/modules/analytics.js

@@ -28,7 +28,7 @@ const packageJSON = require('../../../package.json');
 
 // Force Mixpanel snippet to load Mixpanel locally
 // instead of using a CDN for performance reasons
-window.MIXPANEL_CUSTOM_LIB_URL = '../bower_components/mixpanel/mixpanel.js';
+window.MIXPANEL_CUSTOM_LIB_URL = '../../bower_components/mixpanel/mixpanel.js';
 
 require('../../../bower_components/mixpanel/mixpanel-jslib-snippet.js');
 require('../../../bower_components/angular-mixpanel/src/angular-mixpanel');

lib/gui/modules/image-writer.js

@@ -26,7 +26,7 @@ const electron = require('electron');
 if (window.mocha) {
   var writer = electron.remote.require(require('path').join(__dirname, '..', '..', 'src', 'writer'));
 } else {
-  var writer = electron.remote.require('./src/writer');
+  var writer = electron.remote.require('../src/writer');
 }
 
 const MODULE_NAME = 'Etcher.image-writer';

lib/gui/pages/finish/finish.js

@@ -43,7 +43,7 @@ FinishPage.config(function($stateProvider) {
     .state('success', {
       url: '/success',
       controller: 'FinishController as finish',
-      templateUrl: './browser/pages/finish/templates/success.tpl.html'
+      templateUrl: './pages/finish/templates/success.tpl.html'
     });
 });
 

lib/gui/pages/settings/settings.js

@@ -34,7 +34,7 @@ SettingsPage.config(function($stateProvider) {
     .state('settings', {
       url: '/settings',
       controller: 'SettingsController as settings',
-      templateUrl: './browser/pages/settings/templates/settings.tpl.html'
+      templateUrl: './pages/settings/templates/settings.tpl.html'
     });
 });
 

lib/gui/partials/main.html

@@ -1,7 +1,7 @@
 <div class="row around-xs">
   <div class="col-xs">
     <div class="box text-center" os-dropzone="app.selectImage($file)">
-      <svg-icon class="center-block" path="../../../../../assets/images/image.svg"></svg-icon>
+      <svg-icon class="center-block" path="../../../assets/image.svg"></svg-icon>
       <span class="icon-caption">SELECT IMAGE</span>
       <span class="badge space-top-medium">1</span>
 
@@ -27,7 +27,7 @@
       <div class="step-border-right" ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()"></div>
 
       <svg-icon class="center-block"
-        path="../../../../../assets/images/drive.svg"
+        path="../../../assets/drive.svg"
         ng-disabled="!app.selection.hasImage()"></svg-icon>
       <span class="icon-caption"
         ng-disabled="!app.selection.hasImage()">SELECT DRIVE</span>
@@ -62,7 +62,7 @@
   <div class="col-xs">
     <div class="box text-center">
       <svg-icon class="center-block"
-        path="../../../../../assets/images/flash.svg"
+        path="../../../assets/flash.svg"
         ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()"></svg-icon>
       <span class="icon-caption"
         ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()">FLASH IMAGE</span>

lib/gui/scss/main.scss

@@ -33,7 +33,7 @@ $alert-warning-bg: $brand-warning;
 $alert-warning-text: #fff;
 $alert-padding: 13px;
 
-@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
+@import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
 
 @import "./modules/bootstrap";
 @import "./modules/space";
@@ -41,8 +41,8 @@ $alert-padding: 13px;
 @import "./components/caption";
 @import "./components/button";
 @import "./components/tick";
-@import "../browser/components/progress-button/styles/progress-button";
-@import "../browser/components/svg-icon/styles/svg-icon";
+@import "../components/progress-button/styles/progress-button";
+@import "../components/svg-icon/styles/svg-icon";
 @import "./components/modal";
 @import "./components/alert-ribbon";
 

package.json

@@ -2,7 +2,7 @@
   "name": "etcher",
   "displayName": "Etcher",
   "version": "1.0.0-beta.4",
-  "main": "lib/etcher.js",
+  "main": "lib/gui/etcher.js",
   "description": "An image flasher with support for Windows, OS X and GNU/Linux.",
   "homepage": "https://github.com/resin-io/etcher",
   "repository": {
@@ -11,9 +11,9 @@
   },
   "scripts": {
     "test:main": "electron-mocha --recursive tests/src -R progress",
-    "test:browser": "electron-mocha --recursive --renderer tests/browser -R progress",
-    "test": "npm run-script test:main && npm run-script test:browser",
-    "start": "electron lib/etcher.js"
+    "test:gui": "electron-mocha --recursive --renderer tests/gui -R progress",
+    "test": "npm run-script test:main && npm run-script test:gui",
+    "start": "electron lib/gui/etcher.js"
   },
   "author": "Juan Cruz Viotti <juan@resin.io>",
   "license": "Apache-2.0",

tests/gui/components/drive-selector.spec.js

@@ -7,7 +7,7 @@ require('angular-mocks');
 describe('Browser: DriveSelector', function() {
 
   beforeEach(angular.mock.module(
-    require('../../../lib/browser/components/drive-selector/drive-selector')
+    require('../../../lib/gui/components/drive-selector/drive-selector')
   ));
 
   describe('DriveSelectorStateService', function() {

tests/gui/components/svg-icon.spec.js

@@ -9,7 +9,7 @@ require('angular-mocks');
 describe('Browser: SVGIcon', function() {
 
   beforeEach(angular.mock.module(
-    require('../../../lib/browser/components/svg-icon/svg-icon')
+    require('../../../lib/gui/components/svg-icon/svg-icon')
   ));
 
   describe('svgIcon', function() {
@@ -23,8 +23,8 @@ describe('Browser: SVGIcon', function() {
 
       // Workaround `Unexpected request: GET template.html. No more request expected` error.
       // See http://stackoverflow.com/a/29437480/1641422
-      const templatePath = './browser/components/svg-icon/templates/svg-icon.tpl.html';
-      const template = fs.readFileSync(path.resolve('lib', templatePath), {
+      const templatePath = './components/svg-icon/templates/svg-icon.tpl.html';
+      const template = fs.readFileSync(path.resolve('lib', 'gui', templatePath), {
         encoding: 'utf8'
       });
       $templateCache.put(templatePath, template);
@@ -32,8 +32,8 @@ describe('Browser: SVGIcon', function() {
     }));
 
     it('should inline the svg contents in the element', function() {
-      const icon = '../../../../../assets/images/etcher.svg';
-      let iconContents = fs.readFileSync(path.join(__dirname, '../../../assets/images/etcher.svg'), {
+      const icon = '../../../../../lib/gui/assets/etcher.svg';
+      let iconContents = fs.readFileSync(path.join(__dirname, '../../../lib/gui/assets/etcher.svg'), {
         encoding: 'utf8'
       }).split('\n');
 
@@ -48,7 +48,7 @@ describe('Browser: SVGIcon', function() {
     });
 
     it('should default the size to 40x40 pixels', function() {
-      const icon = '../../../../../assets/images/etcher.svg';
+      const icon = '../../../../../lib/gui/assets/etcher.svg';
       const element = $compile(`<svg-icon path="${icon}">Resin.io</svg-icon>`)($rootScope);
       $rootScope.$digest();
       m.chai.expect(element.css('width')).to.equal('40px');
@@ -56,7 +56,7 @@ describe('Browser: SVGIcon', function() {
     });
 
     it('should be able to set a custom height', function() {
-      const icon = '../../../../../assets/images/etcher.svg';
+      const icon = '../../../../../lib/gui/assets/etcher.svg';
       const element = $compile(`<svg-icon path="${icon}" width="20px">Resin.io</svg-icon>`)($rootScope);
       $rootScope.$digest();
       m.chai.expect(element.css('width')).to.equal('20px');
@@ -64,7 +64,7 @@ describe('Browser: SVGIcon', function() {
     });
 
     it('should be able to set a custom height', function() {
-      const icon = '../../../../../assets/images/etcher.svg';
+      const icon = '../../../../../lib/gui/assets/etcher.svg';
       const element = $compile(`<svg-icon path="${icon}" height="20px">Resin.io</svg-icon>`)($rootScope);
       $rootScope.$digest();
       m.chai.expect(element.css('width')).to.equal('40px');

tests/gui/models/selection-state.spec.js

@@ -7,7 +7,7 @@ require('angular-mocks');
 describe('Browser: SelectionState', function() {
 
   beforeEach(angular.mock.module(
-    require('../../../lib/browser/models/selection-state')
+    require('../../../lib/gui/models/selection-state')
   ));
 
   describe('SelectionStateModel', function() {

tests/gui/modules/drive-scanner.spec.js

@@ -8,7 +8,7 @@ require('angular-mocks');
 describe('Browser: DriveScanner', function() {
 
   beforeEach(angular.mock.module(
-    require('../../../lib/browser/modules/drive-scanner')
+    require('../../../lib/gui/modules/drive-scanner')
   ));
 
   describe('DriveScannerService', function() {

tests/gui/modules/image-writer.spec.js

@@ -7,7 +7,7 @@ require('angular-mocks');
 describe('Browser: ImageWriter', function() {
 
   beforeEach(angular.mock.module(
-    require('../../../lib/browser/modules/image-writer')
+    require('../../../lib/gui/modules/image-writer')
   ));
 
   describe('ImageWriterService', function() {

tests/gui/os/dropzone.spec.js

@@ -23,7 +23,7 @@ require('angular-mocks');
 describe('Browser: OSDropzone', function() {
 
   beforeEach(angular.mock.module(
-    require('../../../lib/browser/os/dropzone/dropzone')
+    require('../../../lib/gui/os/dropzone/dropzone')
   ));
 
   describe('osDropzone', function() {

tests/gui/os/open-external.spec.js

@@ -25,7 +25,7 @@ require('angular-mocks');
 describe('Browser: OSOpenExternal', function() {
 
   beforeEach(angular.mock.module(
-    require('../../../lib/browser/os/open-external/open-external')
+    require('../../../lib/gui/os/open-external/open-external')
   ));
 
   describe('osOpenExternal', function() {

tests/gui/os/window-progress.spec.js

@@ -23,7 +23,7 @@ require('angular-mocks');
 describe('Browser: OSWindowProgress', function() {
 
   beforeEach(angular.mock.module(
-    require('../../../lib/browser/os/window-progress/window-progress')
+    require('../../../lib/gui/os/window-progress/window-progress')
   ));
 
   describe('OSWindowProgressService', function() {

tests/gui/utils/if-state.spec.js

@@ -23,7 +23,7 @@ require('angular-mocks');
 describe('Browser: IfState', function() {
 
   beforeEach(angular.mock.module(
-    require('../../../lib/browser/utils/if-state/if-state')
+    require('../../../lib/gui/utils/if-state/if-state')
   ));
 
   let $compile;

tests/gui/utils/manifest-bind.spec.js

@@ -24,7 +24,7 @@ require('angular-mocks');
 describe('Browser: ManifestBind', function() {
 
   beforeEach(angular.mock.module(
-    require('../../../lib/browser/utils/manifest-bind/manifest-bind')
+    require('../../../lib/gui/utils/manifest-bind/manifest-bind')
   ));
 
   let $compile;

tests/gui/utils/notifier.spec.js

@@ -7,7 +7,7 @@ require('angular-mocks');
 describe('Browser: Notifier', function() {
 
   beforeEach(angular.mock.module(
-    require('../../../lib/browser/utils/notifier/notifier')
+    require('../../../lib/gui/utils/notifier/notifier')
   ));
 
   describe('NotifierService', function() {

tests/gui/utils/path.spec.js

@@ -8,7 +8,7 @@ require('angular-mocks');
 describe('Browser: Path', function() {
 
   beforeEach(angular.mock.module(
-    require('../../../lib/browser/utils/path/path')
+    require('../../../lib/gui/utils/path/path')
   ));
 
   describe('BasenameFilter', function() {

tests/src/dialog.spec.js

@@ -2,7 +2,7 @@
 
 const m = require('mochainon');
 const electron = require('electron');
-const dialog = require('../../lib/src/dialog');
+const dialog = require('../../lib/gui/dialog');
 
 describe('Dialog:', function() {