Merge branch 'master' of github.com:kitematic/kitematic

.gitignore

@@ -14,3 +14,6 @@ resources/boot2docker*
 cache
 
 resources/settings*
+
+# Tests
+.test

.jshintrc

@@ -23,7 +23,9 @@
   "camelcase": false,
   "jasmine": true,
   "globals": {
-    "define": true
+    "define": true,
+    "jest": true,
+    "pit": true
   },
   "predef": [ "-Promise" ]
 }

.travis.yml

@@ -0,0 +1,3 @@
+language: node_js
+node_js:
+  - 0.10

README.md

@@ -1,4 +1,4 @@
-[![bitHound Score](https://app.bithound.io/kitematic/kitematic/badges/score.svg)](http://app.bithound.io/kitematic/kitematic)
+[![Build Status](https://travis-ci.org/kitematic/kitematic.svg)](https://travis-ci.org/kitematic/kitematic) [![bitHound Score](https://app.bithound.io/kitematic/kitematic/badges/score.svg)](http://app.bithound.io/kitematic/kitematic)
 
 ![Kitematic Logo](https://cloud.githubusercontent.com/assets/251292/5269258/1b229c3c-7a2f-11e4-96f1-e7baf3c86d73.png)
 

__tests__/Boot2Docker-test.js

@@ -0,0 +1,37 @@
+jest.dontMock('../src/Boot2Docker');
+var boot2docker = require('../src/Boot2Docker');
+
+var fs = require('fs');
+var util = require('../src/Util');
+var Promise = require('bluebird');
+
+describe('Boot2Docker', () => {
+  pit('cli version is parsed correctly', function () {
+    util.exec.mockReturnValueOnce(Promise.resolve('Boot2Docker-cli version: v1.4.1\nGit commit: 43241cb'));
+    return boot2docker.cliversion().then(version => {
+      expect(util.exec).toBeCalledWith([boot2docker.command(), 'version']);
+      expect(version).toBe('1.4.1');
+    });
+  });
+
+  it('iso version parsed correctly', function () {
+    fs.readFileSync.mockReturnValueOnce('9adjaldijaslkjd123Boot2Docker-v1.4.1aisudhha82jj123');
+    expect(boot2docker.isoversion()).toBe('1.4.1');
+  });
+
+  pit('should exist if status command succeeds', function () {
+    util.exec.mockReturnValueOnce(Promise.resolve(true));
+    return boot2docker.exists().then(exists => {
+      expect(util.exec).toBeCalledWith([boot2docker.command(), 'status']);
+      expect(exists).toBe(true);
+    });
+  });
+
+  pit('should not exist if status command fails', function () {
+    util.exec.mockReturnValueOnce(Promise.reject(false));
+    return boot2docker.exists().then(exists => {
+      expect(util.exec).toBeCalledWith([boot2docker.command(), 'status']);
+      expect(exists).toBe(false);
+    });
+  });
+});

__tests__/Virtualbox-test.js

@@ -0,0 +1,21 @@
+jest.dontMock('../src/Virtualbox');
+var virtualbox = require('../src/Virtualbox');
+var util = require('../src/Util');
+var Promise = require('bluebird');
+
+describe('Virtualbox', function () {
+  it('returns the right command', function () {
+    expect(virtualbox.command()).toBe('/usr/bin/VBoxManage');
+  });
+
+  describe('version 4.3.20r96996', function () {
+    pit('correctly parses virtualbox version', function () {
+      util.exec.mockImplementation(function () {
+        return Promise.resolve('4.3.20r96996');
+      });
+      return virtualbox.version().then(function (version) {
+        expect(version).toBe('4.3.20');
+      });
+    });
+  });
+});

browser/main.js

@@ -21,6 +21,16 @@ if (argv.integration) {
 app.commandLine.appendSwitch('js-flags', '--harmony');
 
 var mainWindow = null;
+var windowOptions = {
+  width: 1000,
+  height: 700,
+  'min-width': 1000,
+  'min-height': 700,
+  resizable: true,
+  frame: false,
+  show: false
+};
+
 app.on('activate-with-no-open-windows', function () {
   if (mainWindow) {
     mainWindow.show();
@@ -29,18 +39,8 @@ app.on('activate-with-no-open-windows', function () {
 });
 
 app.on('ready', function() {
-  mainWindow = new BrowserWindow({
-    width: 1000,
-    height: 700,
-    'min-width': 1000,
-    'min-height': 700,
-    resizable: true,
-    frame: false,
-    show: false
-  });
-
+  mainWindow = new BrowserWindow(windowOptions);
   var saveVMOnQuit = false;
-
   if (argv.test) {
     mainWindow.loadUrl(path.normalize('file://' + path.join(__dirname, '..', 'build/tests.html')));
   } else {
@@ -83,6 +83,7 @@ app.on('ready', function () {
       autoUpdater.on('update-downloaded', function (e, releaseNotes, releaseName, releaseDate, updateURL) {
         console.log(e, releaseNotes, releaseName, releaseDate, updateURL);
         console.log('Update downloaded.');
+        console.log(releaseNotes, releaseName, releaseDate, updateURL);
         mainWindow.webContents.send('notify', 'window:update-available');
       });
 

gulpfile.js

@@ -28,37 +28,19 @@ var options = {
 };
 
 gulp.task('js', function () {
-  gulp.src('src/**/*.js')
+  return gulp.src('src/**/*.js')
     .pipe(plumber(function(error) {
       gutil.log(gutil.colors.red('Error (' + error.plugin + '): ' + error.message));
-      // emit the end event, to properly end the task
       this.emit('end');
     }))
-    .pipe(sourcemaps.init())
+    .pipe(gulpif(options.dev || options.test, sourcemaps.init()))
     .pipe(react())
     .pipe(to5({blacklist: ['regenerator']}))
-    .pipe(sourcemaps.write('.'))
+    .pipe(gulpif(options.dev || options.test, sourcemaps.write('.')))
     .pipe(gulp.dest((options.dev || options.test) ? './build' : './dist/osx/' + options.filename + '/Contents/Resources/app/build'))
     .pipe(gulpif(options.dev, livereload()));
 });
 
-gulp.task('tests', function () {
-  gulp.src('tests/*.js')
-    .pipe(plumber(function(error) {
-      gutil.log(gutil.colors.red('Error (' + error.plugin + '): ' + error.message));
-      // emit the end event, to properly end the task
-      this.emit('end');
-    }))
-    .pipe(sourcemaps.init())
-    .pipe(react())
-    .pipe(to5())
-    .pipe(sourcemaps.write('.'))
-    .pipe(gulp.dest('./build'));
-
-  gulp.src('./tests/tests.html').pipe(gulp.dest('./build'));
-  gulp.src('./tests/jasmine-2.1.3/*').pipe(gulp.dest('./build/jasmine-2.1.3'));
-});
-
 gulp.task('images', function() {
   return gulp.src('images/*')
     .pipe(gulp.dest(options.dev ? './build' : './dist/osx/' + options.filename + '/Contents/Resources/app/build'))
@@ -165,20 +147,6 @@ gulp.task('release', function () {
   runSequence('download', 'dist', ['copy', 'images', 'js', 'styles'], 'sign', 'zip');
 });
 
-gulp.task('test', ['download', 'copy', 'js', 'tests'], function () {
-  var env = process.env;
-  env.NODE_ENV = 'test';
-  if (options.integration) {
-    gulp.src('').pipe(shell(['./cache/Atom.app/Contents/MacOS/Atom . --test --integration'], {
-      env: env
-    }));
-  } else {
-    gulp.src('').pipe(shell(['./cache/Atom.app/Contents/MacOS/Atom . --test'], {
-      env: env
-    }));
-  }
-});
-
 gulp.task('default', ['download', 'copy', 'js', 'images', 'styles'], function () {
   gulp.watch('src/**/*.js', ['js']);
   gulp.watch('index.html', ['copy']);

package.json

@@ -12,12 +12,11 @@
   "bugs": "https://github.com/kitematic/kitematic/issues",
   "scripts": {
     "start": "gulp",
-    "test": "gulp test",
-    "test:integration": "gulp test --integration",
-    "test:all": "npm test && npm run test:integration",
+    "test": "jest",
     "release": "gulp release",
     "release:beta": "gulp release --beta",
-    "preinstall": "./deps"
+    "preinstall": "./deps",
+    "lint": "jsxhint src/**/* && jsxhint browser/**/*"
   },
   "licenses": [
     {
@@ -26,16 +25,19 @@
     }
   ],
   "jest": {
+    "scriptPreprocessor": "preprocessor.js",
     "unmockedModulePathPatterns": [
-      "dockerode",
-      "react",
-      "debug"
+      "node_modules/request",
+      "node_modules/react",
+      "node_modules/bluebird",
+      "node_modules/6to5"
     ]
   },
   "boot2docker-version": "1.4.1",
   "atom-shell-version": "0.21.1",
   "virtualbox-version": "4.3.20",
-  "virtualbox-filename": "VirtualBox-4.3.20-96996-OSX.dmg",
+  "virtualbox-filename": "VirtualBox-4.3.20.pkg",
+  "virtualbox-checksum": "89edac4cc7298c8a04fd4bb646ff2197e7673137c6566c7757f0e9cd6265d0c5",
   "virtualbox-required-version": "4.3.18",
   "dependencies": {
     "ansi-to-html": "0.2.0",
@@ -44,6 +46,7 @@
     "bugsnag-js": "git+https://git@github.com/bugsnag/bugsnag-js",
     "dockerode": "2.0.4",
     "exec": "0.1.2",
+    "html2canvas": "^0.5.0-alpha2",
     "jquery": "^2.1.3",
     "minimist": "^1.1.0",
     "node-uuid": "1.4.1",
@@ -61,6 +64,9 @@
     "underscore": "^1.7.0"
   },
   "devDependencies": {
+    "6to5": "^3.4.1",
+    "6to5-core": "^3.4.1",
+    "6to5-jest": "^3.0.0",
     "browserify": "^6.2.0",
     "ecstatic": "^0.5.8",
     "glob": "^4.0.6",
@@ -83,11 +89,14 @@
     "gulp-uglify": "^0.3.1",
     "gulp-uglifyjs": "^0.5.0",
     "gulp-util": "^3.0.0",
+    "jest-cli": "^0.2.2",
+    "merge-stream": "^0.1.7",
+    "react-tools": "^0.12.2",
     "reactify": "^0.15.2",
+    "regenerator": "^0.8.9",
     "run-sequence": "^1.0.2",
     "time-require": "^0.1.2",
     "vinyl-source-stream": "^0.1.1",
-    "watchify": "^2.1.1",
-    "zombie": "^2.5.1"
+    "watchify": "^2.1.1"
   }
 }

preprocessor.js

@@ -0,0 +1,14 @@
+var ReactTools = require('react-tools');
+
+module.exports = {
+  process: function(src, filename) {
+    if (filename.indexOf('node_modules') === -1) {
+      var res = ReactTools.transform(require('6to5').transform(src).code);
+      if (filename.indexOf('-test') !== -1) {
+        res = 'require(\'6to5/polyfill\');' + res;
+      }
+      return res;
+    }
+    return src;
+  }
+};

src/Boot2Docker.js

@@ -1,12 +1,20 @@
+var _ = require('underscore');
 var path = require('path');
 var Promise = require('bluebird');
 var _ = require('underscore');
-var fs = Promise.promisifyAll(require('fs'));
+var fs = require('fs');
 var util = require('./Util');
 
 var Boot2Docker = {
+  command: function () {
+    return path.join(process.cwd(), 'resources', 'boot2docker-' + this.version());
+  },
   version: function () {
+    try {
       return JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'package.json'), 'utf8'))['boot2docker-version'];
+    } catch (err) {
+      return null;
+    }
   },
   cliversion: function () {
     return util.exec([Boot2Docker.command(), 'version']).then(stdout => {
@@ -21,17 +29,17 @@ var Boot2Docker = {
     });
   },
   isoversion: function () {
-    return fs.readFileAsync(path.join(util.home(), '.boot2docker', 'boot2docker.iso'), 'utf8').then(data => {
+    try {
+      var data = fs.readFileSync(path.join(util.home(), '.boot2docker', 'boot2docker.iso'), 'utf8');
       var match = data.match(/Boot2Docker-v(\d+\.\d+\.\d+)/);
       if (match) {
-        return Promise.resolve(match[1]);
+        return match[1];
       } else {
-        return Promise.resolve(null);
+        return null;
+      }
+    } catch (err) {
+      return null;
     }
-    });
-  },
-  command: function () {
-    return path.join(process.cwd(), 'resources', 'boot2docker-' + this.version());
   },
   exists: function () {
     return util.exec([Boot2Docker.command(), 'status']).then(() => {
@@ -92,11 +100,11 @@ var Boot2Docker = {
         var usedGb = parseInt(tokens[2], 10) / 1000000;
         var totalGb = parseInt(tokens[3], 10) / 1000000;
         var percent = parseInt(tokens[4].replace('%', ''), 10);
-        Promise.resolve({
+        return {
           used_gb: usedGb.toFixed(2),
           total_gb: totalGb.toFixed(2),
           percent: percent
-        });
+        };
       } catch (err) {
         return Promise.reject(err);
       }
@@ -117,12 +125,12 @@ var Boot2Docker = {
         var freeGb = parseInt(tokens[3], 10) / 1000;
         var totalGb = usedGb + freeGb;
         var percent = Math.round(usedGb / totalGb * 100);
-        return Promise.resolve({
+        return {
           used_gb: usedGb.toFixed(2),
           total_gb: totalGb.toFixed(2),
           free_gb: freeGb.toFixed(2),
           percent: percent
-        });
+        };
       } catch (err) {
         return Promise.reject(err);
       }

src/ContainerDetails.react.js

@@ -4,33 +4,36 @@ var React = require('react/addons');
 var Router = require('react-router');
 var exec = require('exec');
 var path =  require('path');
-var assign =  require('object-assign');
 var remote = require('remote');
 var rimraf = require('rimraf');
 var fs = require('fs');
 var dialog = remote.require('dialog');
 var ContainerStore = require('./ContainerStore');
 var ContainerUtil = require('./ContainerUtil');
-var docker = require('./Docker');
 var boot2docker = require('./Boot2Docker');
-var ProgressBar = require('react-bootstrap/ProgressBar');
-var Popover = require('react-bootstrap/Popover');
+var ContainerDetailsHeader = require('./ContainerDetailsHeader.react');
+var ContainerHome = require('./ContainerHome.react');
+var RetinaImage = require('react-retina-image');
+var Radial = require('./Radial.react');
+
+var _oldHeight = 0;
 
 var ContainerDetails = React.createClass({
   mixins: [Router.State, Router.Navigation],
-  _oldHeight: 0,
+  PAGE_HOME: 'home',
   PAGE_LOGS: 'logs',
   PAGE_SETTINGS: 'settings',
+  PAGE_PORTS: 'ports',
+  PAGE_VOLUMES: 'volumes',
   getInitialState: function () {
     return {
       logs: [],
-      page: this.PAGE_LOGS,
+      page: this.PAGE_HOME,
       env: {},
       pendingEnv: {},
       ports: {},
-      defaultPort: null,
-      popoverVolumeOpen: false,
-      popoverViewOpen: false,
+      volumes: {},
+      defaultPort: null
     };
   },
   componentWillReceiveProps: function () {
@@ -40,22 +43,6 @@ var ContainerDetails = React.createClass({
     this.init();
     ContainerStore.on(ContainerStore.SERVER_PROGRESS_EVENT, this.updateProgress);
     ContainerStore.on(ContainerStore.SERVER_LOGS_EVENT, this.updateLogs);
-
-    // Make clicking anywhere close popovers
-    $('body').on('click', function (e) {
-      var popoverViewIsTarget = $('.popover-view').is(e.target) || $('.popover-view').has(e.target).length !== 0 || $('.dropdown-view').is(e.target) || $('.dropdown-view').has(e.target).length !== 0;
-      var popoverVolumeIsTarget = $('.popover-volume').is(e.target) || $('.popover-volume').has(e.target).length !== 0 || $('.dropdown-volume').is(e.target) || $('.dropdown-volume').has(e.target).length !== 0;
-      var state = {};
-      if (!popoverViewIsTarget) {
-        state.popoverViewOpen = false;
-      }
-      if (!popoverVolumeIsTarget) {
-        state.popoverVolumeOpen = false;
-      }
-      if (this.state.popoverViewOpen || this.state.popoverVolumeOpen) {
-        this.setState(state);
-      }
-    }.bind(this));
   },
   componentWillUnmount: function () {
     ContainerStore.removeListener(ContainerStore.SERVER_PROGRESS_EVENT, this.updateProgress);
@@ -65,29 +52,11 @@ var ContainerDetails = React.createClass({
     // Scroll logs to bottom
     var parent = $('.details-logs');
     if (parent.length) {
-      if (parent.scrollTop() >= this._oldHeight) {
+      if (parent.scrollTop() >= _oldHeight) {
         parent.stop();
         parent.scrollTop(parent[0].scrollHeight - parent.height());
       }
-      this._oldHeight = parent[0].scrollHeight - parent.height();
-    }
-
-    var $viewDropdown = $(this.getDOMNode()).find('.dropdown-view > .icon-dropdown');
-    var $volumeDropdown = $(this.getDOMNode()).find('.dropdown-volume');
-    var $viewPopover = $(this.getDOMNode()).find('.popover-view');
-    var $volumePopover = $(this.getDOMNode()).find('.popover-volume');
-
-    if ($viewDropdown.offset()) {
-      $viewPopover.offset({
-        top: $viewDropdown.offset().top + 27,
-        left: $viewDropdown.offset().left - ($viewPopover.outerWidth() / 2) + 5
-      });
-    }
-    if ($volumeDropdown.offset()) {
-      $volumePopover.offset({
-        top: $volumeDropdown.offset().top + 33,
-        left: $volumeDropdown.offset().left + $volumeDropdown.outerWidth() - $volumePopover.outerWidth() / 2 - 20
-      });
+      _oldHeight = parent[0].scrollHeight - parent.height();
     }
   },
   init: function () {
@@ -98,7 +67,7 @@ var ContainerDetails = React.createClass({
     this.setState({
       progress: ContainerStore.progress(this.getParams().name),
       env: ContainerUtil.env(container),
-      page: this.PAGE_LOGS
+      page: this.PAGE_HOME
     });
     var ports = ContainerUtil.ports(container);
     var webPorts = ['80', '8000', '8080', '3000', '5000', '2368'];
@@ -125,17 +94,35 @@ var ContainerDetails = React.createClass({
       });
     }
   },
+  showHome: function () {
+    this.setState({
+      page: this.PAGE_HOME
+    });
+  },
   showLogs: function () {
     this.setState({
       page: this.PAGE_LOGS
     });
   },
+  showPorts: function () {
+    this.setState({
+      page: this.PAGE_PORTS
+    });
+  },
+  showVolumes: function () {
+    this.setState({
+      page: this.PAGE_VOLUMES
+    });
+  },
   showSettings: function () {
     this.setState({
       page: this.PAGE_SETTINGS
     });
   },
   handleView: function () {
+    console.log('CLICKED');
+    console.log(this.state.ports);
+    console.log(this.state.defaultPort);
     if (this.state.defaultPort) {
       exec(['open', this.state.ports[this.state.defaultPort].url], function (err) {
         if (err) { throw err; }
@@ -158,19 +145,6 @@ var ContainerDetails = React.createClass({
       });
     }
   },
-  handleViewDropdown: function(e) {
-    this.setState({
-      popoverViewOpen: !this.state.popoverViewOpen
-    });
-  },
-  handleVolumeDropdown: function(e) {
-    var self = this;
-    if (_.keys(this.props.container.Volumes).length) {
-      exec(['open', path.join(process.env.HOME, 'Kitematic', self.props.container.Name)], function (err) {
-        if (err) { throw err; }
-      });
-    }
-  },
   handleChooseVolumeClick: function (dockerVol) {
     var self = this;
     dialog.showOpenDialog({properties: ['openDirectory', 'createDirectory']}, function (filenames) {
@@ -187,7 +161,7 @@ var ContainerDetails = React.createClass({
         ContainerStore.updateContainer(self.props.container.Name, {
           Binds: binds
         }, function (err) {
-          if (err) console.log(err);
+          if (err) { console.log(err); }
         });
       }
     });
@@ -215,10 +189,10 @@ var ContainerDetails = React.createClass({
     });
   },
   handleSaveContainerName: function () {
+    var newName = $('#input-container-name').val();
     if (newName === this.props.container.Name) {
       return;
     }
-    var newName = $('#input-container-name').val();
     if (fs.existsSync(path.join(process.env.HOME, 'Kitematic', this.props.container.Name))) {
       fs.renameSync(path.join(process.env.HOME, 'Kitematic', this.props.container.Name), path.join(process.env.HOME, 'Kitematic', newName));
     }
@@ -298,6 +272,30 @@ var ContainerDetails = React.createClass({
       }
     }.bind(this));
   },
+  handleItemMouseEnterRun: function () {
+    var $action = $(this.getDOMNode()).find('.action .run');
+    $action.css("visibility", "visible");
+  },
+  handleItemMouseLeaveRun: function () {
+    var $action = $(this.getDOMNode()).find('.action .run');
+    $action.css("visibility", "hidden");
+  },
+  handleItemMouseEnterRestart: function () {
+    var $action = $(this.getDOMNode()).find('.action .restart');
+    $action.css("visibility", "visible");
+  },
+  handleItemMouseLeaveRestart: function () {
+    var $action = $(this.getDOMNode()).find('.action .restart');
+    $action.css("visibility", "hidden");
+  },
+  handleItemMouseEnterTerminal: function () {
+    var $action = $(this.getDOMNode()).find('.action .terminal');
+    $action.css("visibility", "visible");
+  },
+  handleItemMouseLeaveTerminal: function () {
+    var $action = $(this.getDOMNode()).find('.action .terminal');
+    $action.css("visibility", "hidden");
+  },
   render: function () {
     var self = this;
 
@@ -313,17 +311,6 @@ var ContainerDetails = React.createClass({
       return false;
     }
 
-    var state;
-    if (this.props.container.State.Running) {
-      state = <h2 className="status running">running</h2>;
-    } else if (this.props.container.State.Restarting) {
-      state = <h2 className="status restarting">restarting</h2>;
-    } else if (this.props.container.State.Paused) {
-      state = <h2 className="status paused">paused</h2>;
-    } else if (this.props.container.State.Downloading) {
-      state = <h2 className="status">downloading</h2>;
-    }
-
     var button;
     if (this.state.progress === 1) {
       button = <a className="btn btn-primary" onClick={this.handleClick}>View</a>;
@@ -355,7 +342,7 @@ var ContainerDetails = React.createClass({
       disabledClass = 'disabled';
     }
 
-    var buttonClass = React.addons.classSet({
+    /*var buttonClass = React.addons.classSet({
       btn: true,
       'btn-action': true,
       'with-icon': true,
@@ -401,56 +388,92 @@ var ContainerDetails = React.createClass({
       'only-icon': true,
       'active': this.state.page === this.PAGE_SETTINGS,
       disabled: this.props.container.State.Downloading
+    });*/
+
+    var ports = _.map(_.pairs(self.state.ports), function (pair) {
+      var key = pair[0];
+      var val = pair[1];
+      return (
+        <div key={key} className="table-values">
+        <span className="value-left">{key}</span><span className="icon icon-arrow-right"></span>
+        <a className="value-right" onClick={self.handleViewLink.bind(self, val.url)}>{val.display}</a>
+        </div>
+      );
     });
 
-    var viewPopoverClasses = React.addons.classSet({
-      popover: true,
-      hidden: false
+    var volumes = _.map(self.props.container.Volumes, function (val, key) {
+      if (!val || val.indexOf(process.env.HOME) === -1) {
+        val = 'No Host Folder';
+      }
+      return (
+        <div key={key} className="table-values">
+        <span className="value-left">{key}</span><span className="icon icon-arrow-right"></span>
+        <a className="value-right">{val.replace(process.env.HOME, '~')}</a>
+        </div>
+      );
     });
 
-    var popoverVolumeClasses = React.addons.classSet({
-      'popover-volume': true,
-      hidden: !this.state.popoverVolumeOpen
-    });
-
-    var popoverViewClasses = React.addons.classSet({
-      'popover-view': true,
-      hidden: !this.state.popoverViewOpen
-    });
-
-    var dropdownClasses = {
-      btn: true,
-      'btn-action': true,
-      'with-icon': true,
-      'dropdown-toggle': true,
-      disabled: !this.props.container.State.Running
-    };
-    var dropdownViewButtonClass = React.addons.classSet(assign({'dropdown-view': true}, dropdownClasses));
-
     var body;
     if (this.props.container.State.Downloading) {
       if (this.state.progress) {
         body = (
           <div className="details-progress">
-            <h3>Downloading</h3>
-            <ProgressBar now={this.state.progress * 100} label="%(percent)s%"/>
+            <h2>Downloading Image</h2>
+            <Radial progress={Math.round(this.state.progress * 100)}/>
           </div>
         );
       } else {
-
+        body = (
+          <div className="details-progress">
+            <h2>Connecting to Docker Hub</h2>
+            <Radial spin="true" progress="90"/>
+          </div>
+        );
       }
     } else {
-      if (this.state.page === this.PAGE_LOGS) {
+      if (this.state.page === this.PAGE_HOME) {
         body = (
-          <div className="details-panel details-logs">
-            <div className="logs">
+          <ContainerHome ports={this.state.ports} defaultPort={this.state.defaultPort} logs={logs} container={this.props.container} />
+        );
+      } else if (this.state.page === this.PAGE_LOGS) {
+        body = (
+          <div className="details-panel details-logs logs">
             {logs}
           </div>
+        );
+      } else if (this.state.page === this.PAGE_PORTS) {
+        body = (
+          <div className="details-panel">
+            <div className="ports">
+              <h3>Configure Ports</h3>
+              <div className="table">
+                <div className="table-labels">
+                  <div className="label-left">DOCKER PORT</div>
+                  <div className="label-right">MAC PORT</div>
+                </div>
+                {ports}
+              </div>
+            </div>
+          </div>
+        );
+      } else if (this.state.page === this.PAGE_VOLUMES) {
+        body = (
+          <div className="details-panel">
+            <div className="volumes">
+              <h3>Configure Volumes</h3>
+              <div className="table">
+                <div className="table-labels">
+                  <div className="label-left">DOCKER FOLDER</div>
+                  <div className="label-right">MAC FOLDER</div>
+                </div>
+                {volumes}
+              </div>
+            </div>
           </div>
         );
       } else {
         var rename = (
-          <div>
+          <div className="settings-section">
             <h3>Container Name</h3>
             <div className="container-name">
               <input id="input-container-name" type="text" className="line" placeholder="Container Name" defaultValue={this.props.container.Name}></input>
@@ -462,6 +485,7 @@ var ContainerDetails = React.createClass({
           <div className="details-panel">
             <div className="settings">
               {rename}
+              <div className="settings-section">
                 <h3>Environment Variables</h3>
                 <div className="env-vars-labels">
                   <div className="label-key">KEY</div>
@@ -477,15 +501,36 @@ var ContainerDetails = React.createClass({
                   </div>
                 </div>
                 <a className="btn btn-action" onClick={this.handleSaveEnvVar}>Save</a>
+              </div>
+              <div className="settings-section">
                 <h3>Delete Container</h3>
                 <a className="btn btn-action" onClick={this.handleDeleteContainer}>Delete Container</a>
               </div>
             </div>
+          </div>
         );
       }
     }
 
-    var ports = _.map(_.pairs(self.state.ports), function (pair, index, list) {
+    var tabHomeClasses = React.addons.classSet({
+      'tab': true,
+      'active': this.state.page === this.PAGE_HOME,
+      disabled: this.props.container.State.Downloading
+    });
+
+    var tabLogsClasses = React.addons.classSet({
+      'tab': true,
+      'active': this.state.page === this.PAGE_LOGS,
+      disabled: this.props.container.State.Downloading
+    });
+
+    var tabSettingsClasses = React.addons.classSet({
+      'tab': true,
+      'active': this.state.page === this.PAGE_SETTINGS,
+      disabled: this.props.container.State.Downloading
+    });
+
+    /*var ports = _.map(_.pairs(self.state.ports), function (pair, index, list) {
       var key = pair[0];
       var val = pair[1];
       return (
@@ -509,9 +554,9 @@ var ContainerDetails = React.createClass({
           {val}
         </div>
       );
-    });
+    });*/
 
-    var view;
+  /*  var view;
     if (this.state.defaultPort) {
       view = (
         <div className="action btn-group">
@@ -525,48 +570,31 @@ var ContainerDetails = React.createClass({
           <a className={dropdownViewButtonClass} onClick={this.handleViewDropdown}><span className="icon icon-preview-2"></span> <span className="content">Ports</span> <span className="icon-dropdown icon icon-arrow-37"></span></a>
         </div>
       );
-    }
+    }*/
 
     return (
       <div className="details">
-        <div className="details-header">
-          <div className="details-header-info">
-            <h1>{this.props.container.Name}</h1>{state}<h2 className="image-label">Image</h2><h2 className="image">{this.props.container.Config.Image}</h2>
-          </div>
+        <ContainerDetailsHeader container={this.props.container} />
+        <div className="details-subheader">
           <div className="details-header-actions">
-            {view}
-            <div className="action">
-              <a className={volumesButtonClass} onClick={this.handleVolumeDropdown}><span className="icon icon-folder-1"></span> <span className="content">Volumes</span></a>
+            <div className="action" onMouseEnter={this.handleItemMouseEnterRun} onMouseLeave={this.handleItemMouseLeaveRun}>
+              <span className="action-icon" onClick={this.handleView}><RetinaImage src="button-run.png"/></span>
+              <span className="btn-label run">Run</span>
             </div>
-            <div className="action">
-              <a className={restartButtonClass} onClick={this.handleRestart}><span className="icon icon-refresh"></span> <span className="content">Restart</span></a>
+            <div className="action" onMouseEnter={this.handleItemMouseEnterRestart} onMouseLeave={this.handleItemMouseLeaveRestart}>
+              <span className="action-icon" onClick={this.handleRestart}><RetinaImage src="button-restart.png"/></span>
+              <span className="btn-label restart">Restart</span>
             </div>
-            <div className="action">
-              <a className={buttonClass} onClick={this.handleTerminal}><span className="icon icon-window-code-3"></span> <span className="content">Terminal</span></a>
-            </div>
-            <div className="details-header-actions-rhs tabs btn-group">
-              <a className={textButtonClasses} onClick={this.showLogs}><span className="icon icon-text-wrapping-2"></span></a>
-              <a className={gearButtonClass} onClick={this.showSettings}><span className="icon icon-setting-gear"></span></a>
+            <div className="action" onMouseEnter={this.handleItemMouseEnterTerminal} onMouseLeave={this.handleItemMouseLeaveTerminal}>
+              <span className="action-icon" onClick={this.handleTerminal}><RetinaImage src="button-terminal.png"/></span>
+              <span className="btn-label terminal">Terminal</span>
             </div>
           </div>
-          <Popover className={popoverViewClasses} placement="bottom">
-            <div className="table ports">
-              <div className="table-labels">
-                <div className="label-left">DOCKER PORT</div>
-                <div className="label-right">MAC PORT</div>
+          <div className="details-subheader-tabs">
+            <span className={tabHomeClasses} onClick={this.showHome}>Home</span>
+            <span className={tabLogsClasses} onClick={this.showLogs}>Logs</span>
+            <span className={tabSettingsClasses} onClick={this.showSettings}>Settings</span>
           </div>
-              {ports}
-            </div>
-          </Popover>
-          <Popover className={popoverVolumeClasses} placement="bottom">
-            <div className="table volumes">
-              <div className="table-labels">
-                <div className="label-left">DOCKER VOLUME</div>
-                <div className="label-right">MAC FOLDER</div>
-              </div>
-              {volumes}
-            </div>
-          </Popover>
         </div>
         {body}
       </div>

src/ContainerDetailsHeader.react.js

@@ -0,0 +1,25 @@
+var React = require('react/addons');
+
+var ContainerDetailsHeader = React.createClass({
+  render: function () {
+    var state;
+    if (this.props.container.State.Running) {
+      state = <span className="status running">RUNNING</span>;
+    } else if (this.props.container.State.Restarting) {
+      state = <span className="status restarting">RESTARTING</span>;
+    } else if (this.props.container.State.Paused) {
+      state = <span className="status paused">PAUSED</span>;
+    } else if (this.props.container.State.Downloading) {
+      state = <span className="status downloading">DOWNLOADING</span>;
+    } else {
+      state = <span className="status stopped">STOPPED</span>;
+    }
+    return (
+      <div className="details-header">
+        <h1>{this.props.container.Name}</h1>{state}
+      </div>
+    );
+  }
+});
+
+module.exports = ContainerDetailsHeader;

src/ContainerHome.react.js

@@ -0,0 +1,106 @@
+var _ = require('underscore');
+var $ = require('jquery');
+var React = require('react/addons');
+var RetinaImage = require('react-retina-image');
+var path = require('path');
+var exec = require('exec');
+
+var ContainerHome = React.createClass({
+  handleResize: function () {
+    $('.web-preview').height(window.innerHeight - 240);
+    $('.mini-logs').height(window.innerHeight / 2 - 100);
+    $('.folders').height(window.innerHeight / 2 - 150);
+  },
+  componentDidMount: function() {
+    $('.web-preview').height(window.innerHeight - 240);
+    $('.mini-logs').height(window.innerHeight / 2 - 100);
+    $('.folders').height(window.innerHeight / 2 - 150);
+    window.addEventListener('resize', this.handleResize);
+  },
+  componentWillUnmount: function() {
+    window.removeEventListener('resize', this.handleResize);
+  },
+  componentDidUpdate: function () {
+    // Scroll logs to bottom
+    $('.web-preview').height(window.innerHeight - 240);
+    $('.mini-logs').height(window.innerHeight / 2 - 100);
+    $('.folders').height(window.innerHeight / 2 - 150);
+    var parent = $('.mini-logs');
+    if (parent.length) {
+      if (parent.scrollTop() >= this._oldHeight) {
+        parent.stop();
+        parent.scrollTop(parent[0].scrollHeight - parent.height());
+      }
+      this._oldHeight = parent[0].scrollHeight - parent.height();
+    }
+  },
+  handleClickFolder: function (path) {
+    exec(['open', path], function (err) {
+      if (err) { throw err; }
+    });
+  },
+  handleClickPreview: function () {
+    if (this.props.defaultPort) {
+      exec(['open', this.props.ports[this.props.defaultPort].url], function (err) {
+        if (err) { throw err; }
+      });
+    }
+  },
+  render: function () {
+    var preview;
+    if (this.props.defaultPort) {
+      preview = (
+        <div className="web-preview">
+          <h4>Web Preview</h4>
+          <div className="widget">
+            <iframe sandbox="allow-same-origin allow-scripts" src={this.props.ports[this.props.defaultPort].url} scrolling="no"></iframe>
+            <div className="iframe-overlay" onClick={this.handleClickPreview}><span className="icon icon-upload-2"></span><div className="text">Open in Browser</div></div>
+          </div>
+          <div className="subtext">Not showing correctly?</div>
+        </div>
+      );
+    }
+    console.log(this.props.container.Volumes);
+    var self = this;
+    var folders = _.map(self.props.container.Volumes, function (val, key) {
+      var firstFolder = key.split(path.sep)[1];
+      if (!val || val.indexOf(process.env.HOME) === -1) {
+        return;
+      } else {
+        return (
+          <div key={key} className="folder" onClick={self.handleClickFolder.bind(self, val)}>
+            <RetinaImage src="folder.png" />
+            <div className="text">{firstFolder}</div>
+          </div>
+        );
+      }
+    });
+    return (
+      <div className="details-panel home">
+        <div className="content">
+          <div className="left">
+            {preview}
+          </div>
+          <div className="right">
+            <div className="mini-logs">
+              <h4>Logs</h4>
+              <div className="widget">
+                {this.props.logs}
+                <div className="mini-logs-overlay"><span className="icon icon-scale-spread-1"></span><div className="text">View Logs</div></div>
+              </div>
+            </div>
+            <div className="folders">
+              <h4>Edit Files</h4>
+              <div className="widget">
+                {folders}
+              </div>
+              <div className="subtext">Change Folders</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+});
+
+module.exports = ContainerHome;

src/ContainerList.react.js

@@ -1,14 +1,6 @@
-var async = require('async');
-var _ = require('underscore');
-var $ = require('jquery');
 var React = require('react/addons');
-var Router = require('react-router');
-var Modal = require('react-bootstrap/Modal');
-var RetinaImage = require('react-retina-image');
-var ModalTrigger = require('react-bootstrap/ModalTrigger');
-var ContainerModal = require('./ContainerModal.react');
-var Header = require('./Header.react');
-var docker = require('./Docker');
+var ContainerListItem = require('./ContainerListItem.react');
+var ContainerListNewItem = require('./ContainerListNewItem.react');
 
 var ContainerList = React.createClass({
   componentWillMount: function () {
@@ -17,59 +9,13 @@ var ContainerList = React.createClass({
   render: function () {
     var self = this;
     var containers = this.props.containers.map(function (container) {
-      var downloadingImage = null, downloading = false;
-      var env = container.Config.Env;
-      if (env.length) {
-        var obj = _.object(env.map(function (e) {
-          return e.split('=');
-        }));
-        if (obj.KITEMATIC_DOWNLOADING) {
-          downloading = true;
-        }
-        downloadingImage = obj.KITEMATIC_DOWNLOADING_IMAGE || null;
-      }
-
-      var imageName = downloadingImage || container.Config.Image;
-
-      // Synchronize all animations
-      var style = {
-        WebkitAnimationDelay: (self._start - Date.now()) + 'ms'
-      };
-
-      var state;
-      if (downloading) {
-        state = <div className="state state-downloading"><div style={style} className="downloading-arrow"></div></div>;
-      } else if (container.State.Running && !container.State.Paused) {
-        state = <div className="state state-running"><div style={style} className="runningwave"></div></div>;
-      } else if (container.State.Restarting) {
-        state = <div className="state state-restarting" style={style}></div>;
-      } else if (container.State.Paused) {
-        state = <div className="state state-paused"></div>;
-      } else if (container.State.ExitCode) {
-        // state = <div className="state state-error"></div>;
-        state = <div className="state state-stopped"></div>;
-      } else {
-        state = <div className="state state-stopped"></div>;
-      }
-
       return (
-        <Router.Link key={container.Name} data-container={name} to="container" params={{name: container.Name}}>
-          <li>
-            {state}
-            <div className="info">
-              <div className="name">
-                {container.Name}
-              </div>
-              <div className="image">
-                {imageName}
-              </div>
-            </div>
-          </li>
-        </Router.Link>
+        <ContainerListItem key={container.Id} container={container} start={self._start}/>
       );
     });
     return (
       <ul>
+        <ContainerListNewItem key={'newcontainer'} containers={this.props.containers} />
         {containers}
       </ul>
     );

src/ContainerListItem.react.js

@@ -0,0 +1,89 @@
+var _ = require('underscore');
+var $ = require('jquery');
+var React = require('react/addons');
+var Router = require('react-router');
+var remote = require('remote');
+var dialog = remote.require('dialog');
+var ContainerStore = require('./ContainerStore');
+
+var ContainerListItem = React.createClass({
+  handleItemMouseEnter: function () {
+    var $action = $(this.getDOMNode()).find('.action');
+    $action.show();
+  },
+  handleItemMouseLeave: function () {
+    var $action = $(this.getDOMNode()).find('.action');
+    $action.hide();
+  },
+  handleDeleteContainer: function () {
+    dialog.showMessageBox({
+      message: 'Are you sure you want to delete this container?',
+      buttons: ['Delete', 'Cancel']
+    }, function (index) {
+      if (index === 0) {
+        ContainerStore.remove(this.props.container.Name, function (err) {
+          console.error(err);
+        });
+      }
+    }.bind(this));
+  },
+  render: function () {
+    var self = this;
+    var container = this.props.container;
+    var downloadingImage = null, downloading = false;
+    var env = container.Config.Env;
+    if (env.length) {
+      var obj = _.object(env.map(function (e) {
+        return e.split('=');
+      }));
+      if (obj.KITEMATIC_DOWNLOADING) {
+        downloading = true;
+      }
+      downloadingImage = obj.KITEMATIC_DOWNLOADING_IMAGE || null;
+    }
+
+    var imageName = downloadingImage || container.Config.Image;
+
+    // Synchronize all animations
+    var style = {
+      WebkitAnimationDelay: (self.props.start - Date.now()) + 'ms'
+    };
+
+    var state;
+    if (downloading) {
+      state = <div className="state state-downloading"><div style={style} className="downloading-arrow"></div></div>;
+    } else if (container.State.Running && !container.State.Paused) {
+      state = <div className="state state-running"><div style={style} className="runningwave"></div></div>;
+    } else if (container.State.Restarting) {
+      state = <div className="state state-restarting" style={style}></div>;
+    } else if (container.State.Paused) {
+      state = <div className="state state-paused"></div>;
+    } else if (container.State.ExitCode) {
+      // state = <div className="state state-error"></div>;
+      state = <div className="state state-stopped"></div>;
+    } else {
+      state = <div className="state state-stopped"></div>;
+    }
+
+    return (
+      <Router.Link data-container={name} to="container" params={{name: container.Name}}>
+        <li onMouseEnter={self.handleItemMouseEnter} onMouseLeave={self.handleItemMouseLeave}>
+          {state}
+          <div className="info">
+            <div className="name">
+              {container.Name}
+            </div>
+            <div className="image">
+              {imageName}
+            </div>
+          </div>
+          <div className="action">
+            <span className="icon icon-delete-3 btn-delete" onClick={this.handleDeleteContainer}></span>
+          </div>
+        </li>
+      </Router.Link>
+    );
+  }
+});
+
+module.exports = ContainerListItem;

src/ContainerListNewItem.react.js

@@ -0,0 +1,43 @@
+var $ = require('jquery');
+var React = require('react/addons');
+var Router = require('react-router');
+
+var ContainerListNewItem = React.createClass({
+  handleItemMouseEnter: function () {
+    var $action = $(this.getDOMNode()).find('.action');
+    $action.show();
+  },
+  handleItemMouseLeave: function () {
+    var $action = $(this.getDOMNode()).find('.action');
+    $action.hide();
+  },
+  handleDelete: function () {
+    $(this.getDOMNode()).fadeOut();
+  },
+  render: function () {
+    var self = this;
+    var action;
+    if (this.props.containers.length > 0) {
+      action = (
+        <div className="action">
+          <span className="icon icon-delete-3 btn-delete" onClick={this.handleDelete}></span>
+        </div>
+      );
+    }
+    return (
+      <Router.Link to="new">
+        <li className="new-container-item" onMouseEnter={self.handleItemMouseEnter} onMouseLeave={self.handleItemMouseLeave}>
+          <div className="state state-new"></div>
+          <div className="info">
+            <div className="name">
+              New Container
+            </div>
+          </div>
+          {action}
+        </li>
+      </Router.Link>
+    );
+  }
+});
+
+module.exports = ContainerListNewItem;

src/ContainerModal.react.js

@@ -1,13 +1,9 @@
-var async = require('async');
 var $ = require('jquery');
 var assign = require('object-assign');
 var React = require('react/addons');
 var Modal = require('react-bootstrap').Modal;
 var OverlayTrigger = require('react-bootstrap');
 var Popover = require('react-bootstrap/Popover');
-var SplitButton = require('react-bootstrap/SplitButton');
-var MenuItem = require('react-bootstrap/MenuItem');
-
 var RetinaImage = require('react-retina-image');
 var ContainerStore = require('./ContainerStore');
 var OverlayTrigger = require('react-bootstrap/OverlayTrigger');
@@ -81,19 +77,19 @@ var ContainerModal = React.createClass({
       }, 200);
     }
   },
-  handleClick: function (name, event) {
+  handleClick: function (name) {
     this.props.onRequestHide();
-    ContainerStore.create(name, 'latest', function (err, containerName) {
+    ContainerStore.create(name, 'latest', function (err) {
       if (err) {
         throw err;
       }
     }.bind(this));
   },
-  handleTagClick: function (tag, name, event) {
+  handleTagClick: function (tag, name) {
     this.props.onRequestHide();
-    ContainerStore.create(name, tag, function (err, containerName) {});
+    ContainerStore.create(name, tag, function () {});
   },
-  handleDropdownClick: function (name, event) {
+  handleDropdownClick: function (name) {
     this.setState({
       active: name
     });

src/ContainerStore.js

@@ -4,14 +4,12 @@ var EventEmitter = require('events').EventEmitter;
 var async = require('async');
 var path = require('path');
 var assign = require('object-assign');
-var Stream = require('stream');
 var Convert = require('ansi-to-html');
 var docker = require('./Docker');
 var registry = require('./Registry');
 var ContainerUtil = require('./ContainerUtil');
 
 var convert = new Convert();
-
 var _recommended = [];
 var _containers = {};
 var _progress = {};
@@ -35,7 +33,7 @@ var ContainerStore = assign(EventEmitter.prototype, {
             return;
           }
           stream.setEncoding('utf8');
-          stream.on('data', function (data) {});
+          stream.on('data', function () {});
           stream.on('end', function () {
             callback();
           });
@@ -120,11 +118,11 @@ var ContainerStore = assign(EventEmitter.prototype, {
     if (containerData.Config && containerData.Config.Image) {
       containerData.Image = containerData.Config.Image;
     }
-    existing.kill(function (err, data) {
+    existing.kill(function (err) {
       if (err) {
         console.log(err);
       }
-      existing.remove(function (err, data) {
+      existing.remove(function (err) {
         if (err) {
           console.log(err);
         }
@@ -179,7 +177,7 @@ var ContainerStore = assign(EventEmitter.prototype, {
         ],
         Cmd: 'placeholder',
         name: name
-      }, function (err, container) {
+      }, function (err) {
         if (err) {
           callback(err);
           return;
@@ -212,7 +210,7 @@ var ContainerStore = assign(EventEmitter.prototype, {
     downloading.forEach(function (container) {
       docker.client().pull(container.KitematicDownloadingImage, function (err, stream) {
         stream.setEncoding('utf8');
-        stream.on('data', function (data) {});
+        stream.on('data', function () {});
         stream.on('end', function () {
           self._createContainer(container.Name, {Image: container.KitematicDownloadingImage}, function () {});
         });
@@ -268,7 +266,7 @@ var ContainerStore = assign(EventEmitter.prototype, {
       this._resumePulling();
       this._startListeningToEvents();
     }.bind(this));
-    this.fetchRecommended(function (err) {
+    this.fetchRecommended(function () {
       this.emit(this.CLIENT_RECOMMENDED_EVENT);
     }.bind(this));
   },
@@ -289,7 +287,7 @@ var ContainerStore = assign(EventEmitter.prototype, {
         container.State.Downloading = !!env.KITEMATIC_DOWNLOADING;
         container.KitematicDownloadingImage = env.KITEMATIC_DOWNLOADING_IMAGE;
 
-        this.fetchLogs(container.Name, function (err) {
+        this.fetchLogs(container.Name, function () {
         }.bind(this));
 
         _containers[container.Name] = container;
@@ -308,7 +306,7 @@ var ContainerStore = assign(EventEmitter.prototype, {
         self.fetchContainer(container.Id, function (err) {
           callback(err);
         });
-      }, function (err, results) {
+      }, function (err) {
         callback(err);
       });
     });
@@ -317,20 +315,19 @@ var ContainerStore = assign(EventEmitter.prototype, {
     if (_recommended.length) {
      return;
    }
-    var self = this;
     $.ajax({
       url: 'https://kitematic.com/recommended.json',
       cache: false,
       dataType: 'json',
-      success: function (res, status) {
-        var recommended = res.recommended;
-        async.map(recommended, function (repository, callback) {
-          $.get('https://registry.hub.docker.com/v1/search?q=' + repository, function (data) {
-            console.log(data);
+      success: function (res) {
+        var recommended = res.repos;
+        async.map(recommended, function (rec, callback) {
+          $.get('https://registry.hub.docker.com/v1/search?q=' + rec.repo, function (data) {
             var results = data.results;
-            callback(null, _.find(results, function (r) {
-              return r.name === repository;
-            }));
+            var result = _.find(results, function (r) {
+              return r.name === rec.repo;
+            });
+            callback(null, _.extend(result, rec));
           });
         }, function (err, results) {
           _recommended = results.filter(function(r) { return !!r; });
@@ -365,7 +362,7 @@ var ContainerStore = assign(EventEmitter.prototype, {
       stream.on('data', function (buf) {
         // Every other message is a header
         if (index % 2 === 1) {
-          var time = buf.substr(0,buf.indexOf(' '));
+          //var time = buf.substr(0,buf.indexOf(' '));
           var msg = buf.substr(buf.indexOf(' ')+1);
           if (timeout) {
             clearTimeout(timeout);
@@ -389,7 +386,6 @@ var ContainerStore = assign(EventEmitter.prototype, {
     var self = this;
     var imageName = repository + ':' + tag;
     var containerName = this._generateName(repository);
-    var image = docker.client().getImage(imageName);
     // Pull image
     self._createPlaceholderContainer(imageName, containerName, function (err, container) {
       if (err) {
@@ -401,7 +397,7 @@ var ContainerStore = assign(EventEmitter.prototype, {
       _muted[containerName] = true;
       _progress[containerName] = 0;
       self._pullImage(repository, tag, function () {
-        self._createContainer(containerName, {Image: imageName}, function (err, container) {
+        self._createContainer(containerName, {Image: imageName}, function () {
           delete _progress[containerName];
           _muted[containerName] = false;
           self.emit(self.CLIENT_CONTAINER_EVENT, containerName);
@@ -432,7 +428,6 @@ var ContainerStore = assign(EventEmitter.prototype, {
     });
   },
   remove: function (name, callback) {
-    var self = this;
     var container = docker.client().getContainer(name);
     if (_containers[name].State.Paused) {
       container.unpause(function (err) {

src/ContainerUtil.js

@@ -12,7 +12,7 @@ var ContainerUtil = {
       return splits;
     }));
   },
-  ports: function (container, callback) {
+  ports: function (container) {
     var res = {};
     var ip = docker.host;
     _.each(container.NetworkSettings.Ports, function (value, key) {

src/Containers.react.js

@@ -1,22 +1,17 @@
-var async = require('async');
-var _ = require('underscore');
 var $ = require('jquery');
 var React = require('react/addons');
 var Router = require('react-router');
-var RetinaImage = require('react-retina-image');
-var ModalTrigger = require('react-bootstrap/ModalTrigger');
-var ContainerModal = require('./ContainerModal.react');
 var ContainerStore = require('./ContainerStore');
 var ContainerList = require('./ContainerList.react');
 var Header = require('./Header.react');
-var docker = require('./Docker');
+
 var Containers = React.createClass({
   mixins: [Router.Navigation, Router.State],
   getInitialState: function () {
     return {
       sidebarOffset: 0,
       containers: ContainerStore.containers(),
-      sorted: ContainerStore.sorted(),
+      sorted: ContainerStore.sorted()
     };
   },
   componentDidMount: function () {
@@ -65,6 +60,10 @@ var Containers = React.createClass({
       });
     }
   },
+  handleNewContainer: function () {
+    $(this.getDOMNode()).find('.new-container-item').parent().fadeIn();
+    this.transitionTo('new');
+  },
   render: function () {
     var sidebarHeaderClass = 'sidebar-header';
     if (this.state.sidebarOffset) {
@@ -78,15 +77,13 @@ var Containers = React.createClass({
         <div className="containers-body">
           <div className="sidebar">
             <section className={sidebarHeaderClass}>
-              <h4>My Containers</h4>
+              <h4>Containers</h4>
               <div className="create">
-                <ModalTrigger modal={<ContainerModal/>}>
-                  <a className="btn btn-action only-icon"><span className="icon icon-add-1"></span></a>
-                </ModalTrigger>
+                <span className="btn-new icon icon-add-3" onClick={this.handleNewContainer}></span>
               </div>
             </section>
             <section className="sidebar-containers" onScroll={this.handleScroll}>
-              <ContainerList containers={this.state.sorted}/>
+              <ContainerList containers={this.state.sorted} newContainer={this.state.newContainer} />
             </section>
           </div>
           <Router.RouteHandler container={container}/>

src/Header.react.js

@@ -1,5 +1,6 @@
 var React = require('react/addons');
 var remote = require('remote');
+var RetinaImage = require('react-retina-image');
 
 var Header = React.createClass({
   getInitialState: function () {
@@ -35,25 +36,26 @@ var Header = React.createClass({
     this.update();
   },
   render: function () {
-    var buttons;
     if (this.state.fullscreen) {
       return (
         <div className="header no-drag">
           <div className="buttons">
-            <div className="button button-close disabled"></div>
-            <div className="button button-minimize disabled"></div>
-            <div className="button button-fullscreenclose enabled" onClick={this.handleFullscreen}></div>
+            <div className="button button-close red disabled"></div>
+            <div className="button button-minimize yellow disabled"></div>
+            <div className="button button-fullscreenclose green enabled" onClick={this.handleFullscreen}></div>
           </div>
+          <RetinaImage className="logo" src="logo.png"/>
         </div>
       );
     } else {
       return (
         <div className="header">
           <div className="buttons">
-            <div className="button button-close enabled" onClick={this.handleClose}></div>
-            <div className="button button-minimize enabled" onClick={this.handleMinimize}></div>
-            <div className="button button-fullscreen enabled" onClick={this.handleFullscreen}></div>
+            <div className="button button-close red enabled" onClick={this.handleClose}></div>
+            <div className="button button-minimize yellow enabled" onClick={this.handleMinimize}></div>
+            <div className="button button-fullscreen green enabled" onClick={this.handleFullscreen}></div>
           </div>
+          <RetinaImage className="logo" src="logo.png"/>
         </div>
       );
     }

src/Main.js

@@ -1,3 +1,4 @@
+require.main.paths.splice(0, 0, process.env.NODE_PATH);
 var remote = require('remote');
 var app = remote.require('app');
 var React = require('react');

src/Menu.js

@@ -1,7 +1,6 @@
 var remote = require('remote');
 var app = remote.require('app');
 var Menu = remote.require('menu');
-var MenuItem = remote.require('menu-item');
 var BrowserWindow = remote.require('browser-window');
 var router = require('./Router');
 
@@ -136,7 +135,7 @@ var template = [
 },
 ];
 
-menu = Menu.buildFromTemplate(template);
+var menu = Menu.buildFromTemplate(template);
 Menu.setApplicationMenu(menu);
 
 module.exports = menu;

src/NewContainer.react.js

@@ -0,0 +1,217 @@
+var _ = require('underscore');
+var $ = require('jquery');
+var React = require('react/addons');
+var RetinaImage = require('react-retina-image');
+var ContainerStore = require('./ContainerStore');
+var Radial = require('./Radial.react');
+var assign = require('object-assign');
+
+var NewContainer = React.createClass({
+  _searchRequest: null,
+  getInitialState: function () {
+    return {
+      query: '',
+      results: ContainerStore.recommended(),
+      loading: false,
+      tags: {},
+      active: null,
+      creating: []
+    };
+  },
+  componentDidMount: function () {
+    this.setState({
+      creating: []
+    });
+    this.refs.searchInput.getDOMNode().focus();
+    ContainerStore.on(ContainerStore.CLIENT_RECOMMENDED_EVENT, this.update);
+  },
+  update: function () {
+    if (!this.state.query.length) {
+      this.setState({
+        results: ContainerStore.recommended()
+      });
+    }
+  },
+  search: function (query) {
+    if (this._searchRequest) {
+      this._searchRequest.abort();
+      this._searchRequest = null;
+    }
+
+    if (!query.length) {
+      return;
+    }
+
+    this.setState({
+      loading: true
+    });
+
+    var self = this;
+    this._searchRequest = $.get('https://registry.hub.docker.com/v1/search?q=' + query, function (result) {
+      self.setState({
+        query: query,
+        loading: false
+      });
+      self._searchRequest = null;
+      if (self.isMounted()) {
+        self.setState(result);
+      }
+    });
+  },
+  handleChange: function (e) {
+    var query = e.target.value;
+
+    if (query === this.state.query) {
+      return;
+    }
+
+    clearTimeout(this.timeout);
+    if (!query.length) {
+      this.setState({
+        query: query,
+        results: ContainerStore.recommended()
+      });
+    } else {
+      var self = this;
+      this.timeout = setTimeout(function () {
+        self.search(query);
+      }, 200);
+    }
+  },
+  handleClick: function (name) {
+    ContainerStore.create(name, 'latest', function (err) {
+      if (err) {
+        throw err;
+      }
+      $(document.body).find('.new-container-item').parent().fadeOut();
+    }.bind(this));
+  },
+  handleDropdownClick: function (name) {
+    this.setState({
+      active: name
+    });
+    if (this.state.tags[name]) {
+      return;
+    }
+    $.get('https://registry.hub.docker.com/v1/repositories/' + name + '/tags', function (result) {
+      var res = {};
+      res[name] = result;
+      console.log(assign(this.state.tags, res));
+      this.setState({
+        tags: assign(this.state.tags, res)
+      });
+    }.bind(this));
+  },
+  render: function () {
+    var self = this;
+    var title = this.state.query ? 'Results' : 'Recommended';
+    var data = this.state.results.slice(0, 6);
+
+    var results;
+    if (data.length) {
+      var items = data.map(function (r) {
+        var name;
+        if (r.is_official) {
+          name = <span><RetinaImage src="official.png"/>{r.name}</span>;
+        } else {
+          name = <span>{r.name}</span>;
+        }
+        var description;
+        if (r.description) {
+          description = r.description;
+        } else {
+          description = "No description.";
+        }
+        var logoStyle = {
+          backgroundImage: `linear-gradient(-180deg, ${r.gradient_start} 4%, ${r.gradient_end}  100%)`
+        };
+        var imgsrc;
+        if (r.img) {
+          imgsrc = `http://kitematic.com/recommended/${r.img}`;
+        } else {
+          imgsrc = 'http://kitematic.com/recommended/kitematic_html.png';
+        }
+        var action;
+        if (_.find(self.state.creating, r.name)) {
+          action = <RetinaImage src="loading.png"/>;
+        } else {
+          action = <a className="btn btn-action" onClick={self.handleClick.bind(self, r.name)}>Create</a>;
+        }
+        return (
+          <div key={r.name} className="image-item">
+            <div className="logo" style={logoStyle}>
+              <RetinaImage src={imgsrc}/>
+            </div>
+            <div className="card">
+              <div className="name">
+                {name}
+              </div>
+              <div className="description">
+                {description}
+              </div>
+              <div className="actions">
+                <div className="stars">
+                  <span className="icon icon-star-9"></span>
+                  <span className="text">{r.star_count}</span>
+                </div>
+                <div className="tags">
+                  <span className="icon icon-tag-1"></span>
+                  <span className="text">latest</span>
+                </div>
+                <div className="action">
+                  {action}
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+      });
+
+      results = (
+        <div className="result-grid">
+          {items}
+        </div>
+      );
+    } else {
+      results = (
+        <div className="no-results">
+          <Radial spin="true" progress={90}/>
+        </div>
+      );
+    }
+    var loadingClasses = React.addons.classSet({
+      hidden: !this.state.loading,
+      loading: true
+    });
+    var magnifierClasses = React.addons.classSet({
+      hidden: this.state.loading,
+      icon: true,
+      'icon-magnifier': true,
+      'search-icon': true
+    });
+    return (
+      <div className="details">
+        <div className="new-container">
+          <div className="new-container-header">
+            <div className="text">
+              Pick an image to create new container.
+            </div>
+            <div className="search">
+              <div className="search-bar">
+                <input type="search" ref="searchInput" className="form-control" placeholder="Find an existing image" onChange={this.handleChange}/>
+                <div className={magnifierClasses}></div>
+                <RetinaImage className={loadingClasses} src="loading.png"/>
+              </div>
+            </div>
+          </div>
+          <div className="results">
+            <h4>{title}</h4>
+            {results}
+          </div>
+        </div>
+      </div>
+    );
+  }
+});
+
+module.exports = NewContainer;

src/NoContainers.react.js

@@ -1,5 +1,4 @@
 var React = require('react/addons');
-var RetinaImage = require('react-retina-image');
 
 var NoContainers = React.createClass({
   render: function () {

src/Preferences.react.js

@@ -15,7 +15,7 @@ var Preferences = React.createClass({
       report_analytics: true
     }, data || {});
   },
-  handleChange: function (key, e) {
+  handleChange: function (key) {
     var change = {};
     change[key] = !this.state[key];
     console.log(change);

src/Registry.js

@@ -22,7 +22,7 @@ var Registry = {
       headers: {
         Authorization: 'Token ' + token
       },
-      success: function (layers, status, xhr) {
+      success: function (layers) {
         callback(null, layers);
       },
       error: function (err) {
@@ -36,7 +36,7 @@ var Registry = {
       headers: {
         Authorization: 'Token ' + token
       },
-      success: function (res, status, xhr) {
+      success: function (res) {
         callback(null, res);
       },
       error: function (err) {

src/Routes.js

@@ -3,7 +3,7 @@ var Setup = require('./Setup.react');
 var Containers = require('./Containers.react');
 var ContainerDetails = require('./ContainerDetails.react');
 var Preferences = require('./Preferences.react');
-var NoContainers = require('./NoContainers.react');
+var NewContainer = require('./NewContainer.react');
 var Router = require('react-router');
 
 var Route = Router.Route;
@@ -23,7 +23,7 @@ var routes = (
     <Route name="containers" handler={Containers}>
       <Route name="container" path="/containers/:name" handler={ContainerDetails}/>
       <Route name="preferences" path="/preferences" handler={Preferences}/>
-      <DefaultRoute handler={NoContainers}/>
+      <DefaultRoute name="new" handler={NewContainer}/>
     </Route>
     <DefaultRoute name="setup" handler={Setup}/>
   </Route>

src/Setup.react.js

@@ -3,6 +3,7 @@ var Router = require('react-router');
 var Radial = require('./Radial.react.js');
 var SetupStore = require('./SetupStore');
 var RetinaImage = require('react-retina-image');
+var Header = require('./Header.react');
 
 var Setup = React.createClass({
   mixins: [ Router.Navigation ],
@@ -28,9 +29,10 @@ var Setup = React.createClass({
     });
   },
   renderDownloadingVirtualboxStep: function () {
-    var message = 'Kitematic needs VirtualBox to run containers. VirtualBox is being downloaded from Oracle\'s website.';
+    var message = "VirtualBox is being downloaded from Oracle's servers. Kitematic requires VirtualBox to run.";
     return (
       <div className="setup">
+        <Header />
         <div className="image">
           <div className="contents">
             <RetinaImage img src="virtualbox.png"/>
@@ -41,6 +43,7 @@ var Setup = React.createClass({
         </div>
         <div className="desc">
           <div className="content">
+            <h4>Step 1 out of 4</h4>
             <h1>Downloading VirtualBox</h1>
             <p>{message}</p>
           </div>
@@ -49,9 +52,10 @@ var Setup = React.createClass({
     );
   },
   renderInstallingVirtualboxStep: function () {
-    var message = 'VirtualBox is being installed. Administrative privileges are required.';
+    var message = 'VirtualBox is being installed in the background. We may need you to type in your password to continue.';
     return (
       <div className="setup">
+        <Header />
         <div className="image">
           <div className="contents">
             <RetinaImage img src="virtualbox.png"/>
@@ -62,6 +66,7 @@ var Setup = React.createClass({
         </div>
         <div className="desc">
           <div className="content">
+            <h4>Step 2 out of 4</h4>
             <h1>Installing VirtualBox</h1>
             <p>{message}</p>
           </div>
@@ -70,9 +75,10 @@ var Setup = React.createClass({
     );
   },
   renderInitBoot2DockerStep: function () {
-    var message = 'Containers run in a virtual machine provided by Boot2Docker. Kitematic is setting up that Linux VM.';
+    var message = 'To run Docker containers on your computer, we are setting up a Linux virtual machine provided by boot2docker.';
     return (
       <div className="setup">
+        <Header />
         <div className="image">
           <div className="contents">
             <RetinaImage img src="boot2docker.png"/>
@@ -83,7 +89,8 @@ var Setup = React.createClass({
         </div>
         <div className="desc">
           <div className="content">
-            <h1>Setting up the Docker VM</h1>
+            <h4>Step 3 out of 4</h4>
+            <h1>Setting up Docker VM</h1>
             <p>{message}</p>
           </div>
         </div>
@@ -91,9 +98,10 @@ var Setup = React.createClass({
     );
   },
   renderStartBoot2DockerStep: function () {
-    var message = 'Kitematic is starting the Boot2Docker Linux VM.';
+    var message = 'Kitematic is starting the boot2docker VM. This may take about a minute.';
     return (
       <div className="setup">
+        <Header />
         <div className="image">
           <div className="contents">
             <RetinaImage img src="boot2docker.png"/>
@@ -104,7 +112,8 @@ var Setup = React.createClass({
         </div>
         <div className="desc">
           <div className="content">
-            <h1>Starting the Docker VM</h1>
+            <h4>Step 4 out of 4</h4>
+            <h1>Starting Docker VM</h1>
             <p>{message}</p>
           </div>
         </div>
@@ -132,8 +141,22 @@ var Setup = React.createClass({
     if (this.state.error) {
       return (
         <div className="setup">
-          <Radial error={true} spin="true" progress="100"/>;
-          <p className="error">Error: {this.state.error}</p>
+          <Header />
+          <div className="image">
+            <div className="contents">
+              <RetinaImage img src="install-error.png"/>
+              <div className="detail">
+              </div>
+            </div>
+          </div>
+          <div className="desc">
+            <div className="content">
+              <h4>Installation Error</h4>
+              <h1>We&#39;re Sorry!</h1>
+              <p>There seem to be an unexpected error with Kitematic:</p>
+              <p className="error">{this.state.error}</p>
+            </div>
+          </div>
         </div>
       );
     } else {

src/SetupStore.js

@@ -13,8 +13,8 @@ var _percent = 0;
 var _currentStep = null;
 var _error = null;
 
-var VIRTUALBOX_FILE = `http://download.virtualbox.org/virtualbox/${packagejson['virtualbox-version']}/${packagejson['virtualbox-filename']}`;
-var SUDO_PROMPT = 'Kitematic requires administrative privileges to install VirtualBox and copy itself to the Applications folder.';
+var VIRTUALBOX_FILE = `https://github.com/kitematic/virtualbox/releases/download/${packagejson['virtualbox-version']}/${packagejson['virtualbox-filename']}`;
+var SUDO_PROMPT = 'Kitematic requires administrative privileges to install VirtualBox.';
 
 var SetupStore = assign(EventEmitter.prototype, {
   PROGRESS_EVENT: 'setup_progress',
@@ -27,8 +27,7 @@ var SetupStore = assign(EventEmitter.prototype, {
         return;
       }
     }
-    var checksum = yield setupUtil.virtualboxSHA256(packagejson['virtualbox-version'], packagejson['virtualbox-filename']);
-    yield setupUtil.download(VIRTUALBOX_FILE, path.join(setupUtil.supportDir(), packagejson['virtualbox-filename']), checksum, percent => {
+    yield setupUtil.download(VIRTUALBOX_FILE, path.join(setupUtil.supportDir(), packagejson['virtualbox-filename']), packagejson.checksum, percent => {
       _percent = percent;
       SetupStore.emit(SetupStore.PROGRESS_EVENT);
     });
@@ -39,15 +38,13 @@ var SetupStore = assign(EventEmitter.prototype, {
       if (setupUtil.compareVersions(version, packagejson['virtualbox-required-version']) >= 0) {
         return;
       }
-      yield virtualbox.kill();
+      yield virtualbox.killall();
     }
-    yield util.exec(['hdiutil', 'attach', path.join(setupUtil.supportDir(), packagejson['virtualbox-filename'])]);
     var isSudo = yield setupUtil.isSudo();
     var iconPath = path.join(setupUtil.resourceDir(), 'kitematic.icns');
     var sudoCmd = isSudo ? ['sudo'] : [path.join(setupUtil.resourceDir(), 'cocoasudo'), '--icon=' + iconPath, `--prompt=${SUDO_PROMPT}`];
-    sudoCmd.push.apply(sudoCmd, ['installer', '-pkg', '/Volumes/VirtualBox/VirtualBox.pkg', '-target', '/']);
+    sudoCmd.push.apply(sudoCmd, ['installer', '-pkg', path.join(setupUtil.supportDir(), packagejson['virtualbox-filename']), '-target', '/']);
     yield util.exec(sudoCmd);
-    yield util.exec(['hdiutil', 'detach', '/Volumes/VirtualBox']);
   }),
   cleanupKitematicStep: function () {
     return virtualbox.vmdestroy('kitematic-vm');
@@ -60,10 +57,10 @@ var SetupStore = assign(EventEmitter.prototype, {
     }
 
     if (!boot2docker.haskeys()) {
-      throw new Error('Boot2Docker SSH key doesn\'t exist. Fix by removing the existing Boot2Docker VM and re-run the installer. This usually occurs because an old version of Boot2Docker is installed.');
+      throw new Error('Boot2Docker SSH keys do not exist. Fix this by removing the existing Boot2Docker VM setup and re-run the installer. This usually occurs because an old version of Boot2Docker is installed.');
     }
 
-    var isoversion = yield boot2docker.isoversion();
+    var isoversion = boot2docker.isoversion();
     if (!isoversion || setupUtil.compareVersions(isoversion, boot2docker.version()) < 0) {
       yield boot2docker.stop();
       yield boot2docker.upgrade();
@@ -116,6 +113,7 @@ var SetupStore = assign(EventEmitter.prototype, {
       try {
         yield step.run();
       } catch (err) {
+        console.log(err);
         _error = err;
         this.emit(this.ERROR_EVENT);
         throw err;

src/SetupUtil.js

@@ -4,7 +4,6 @@ var path = require('path');
 var crypto = require('crypto');
 var fs = require('fs');
 var exec = require('exec');
-var rp = require('request-promise');
 var Promise = require('bluebird');
 
 var SetupUtil = {
@@ -44,7 +43,9 @@ var SetupUtil = {
       }
 
       progress(request({ uri: url, rejectUnauthorized: false }), { throttle: 250 }).on('progress', state => {
+        if (percentCallback) {
           percentCallback(state.percent);
+        }
       }).on('error', err => {
         reject(err);
       }).pipe(fs.createWriteStream(filename)).on('error', err => {
@@ -57,17 +58,6 @@ var SetupUtil = {
       });
     });
   },
-  virtualboxSHA256: function (version, filename) {
-    return rp(`http://dlc-cdn.sun.com/virtualbox/${version}/SHA256SUMS`).then((body) => {
-      var checksums = body.split('\n').map(line => {
-        return line.split(' *');
-      }).reduce((obj, pair) => {
-        obj[pair[1]] = pair[0];
-        return obj;
-      }, {});
-      return Promise.resolve(checksums[filename]);
-    });
-  },
   compareVersions: function (v1, v2, options) {
     var lexicographical = options && options.lexicographical,
     zeroExtend = options && options.zeroExtend,

src/Virtualbox.js

@@ -7,12 +7,9 @@ var VirtualBox = {
     return '/usr/bin/VBoxManage';
   },
   installed: function () {
-    return fs.existsSync('/usr/bin/VBoxManage') && fs.existsSync('/Applications/VirtualBox.app/Contents/MacOS/VirtualBox');
+    return fs.existsSync('/usr/bin/VBoxManage') && fs.existsSync('/Applications/VirtualBox.app');
   },
   version: function () {
-    if (!this.installed()) {
-      return Promise.reject('VirtualBox not installed.');
-    }
     return new Promise((resolve, reject) => {
         util.exec([this.command(), '-v']).then(stdout => {
         var match = stdout.match(/(\d+\.\d+\.\d+).*/);
@@ -29,7 +26,7 @@ var VirtualBox = {
     }
     return util.exec(this.command() + ' list runningvms | sed -E \'s/.*\\{(.*)\\}/\\1/\' | xargs -L1 -I {} ' + this.command() + ' controlvm {} poweroff');
   },
-  kill: function () {
+  killall: function () {
     if (!this.installed()) {
       return Promise.reject('VirtualBox not installed.');
     }
@@ -51,16 +48,18 @@ var VirtualBox = {
     });
   },
   vmdestroy: function (name) {
+    return Promise.coroutine(function* () {
       if (!this.installed()) {
-      throw Promise.reject('VirtualBox not installed.');
+        return Promise.reject('VirtualBox not installed.');
       }
-    return util.exec([this.command(), 'controlvm', name, 'poweroff']).then(() => {
-      return util.exec([this.command(), 'unregistervm', name, '--delete']).then(() => {
-        return true;
-      });
-    }).catch(() => {
-      return false;
-    });
+      try {
+        var state = yield this.vmstate(name);
+        if (state === 'running') {
+          yield util.exec([this.command(), 'controlvm', name, 'poweroff']);
+        }
+        yield util.exec([this.command(), 'unregistervm', name, '--delete']);
+      } catch (err) {}
+    }.bind(this))();
   }
 };
 

styles/containers.less

@@ -13,130 +13,190 @@
     flex-direction: column;
     padding: 14px 14px 20px;
 
-    .table {
-      margin-bottom: 0;
-      .icon-arrow-right {
-        color: #aaa;
-        margin: 2px 9px 0;
-        flex: 0 auto;
-        min-width: 13px;
-      }
-      .btn {
-        min-width: 22px;
-        margin-left: 10px;
-      }
-      .table-labels {
-        flex: 1 auto;
-        display: flex;
-        font-size: 12px;
-        color: @gray-lightest;
-        .label-left {
-          flex: 0 auto;
-          min-width: 80px;
-          margin-right: 30px;
-          text-align: right;
-        }
-        .label-right {
-          flex: 1 auto;
-          display: inline-block;
-          width: 40%;
-        }
-      }
-      .table-values {
-        flex: 1 auto;
-        display: flex;
-        flex-direction: row;
-        margin: 8px 0;
-        .value-left {
-          text-align: right;
-          min-width: 80px;
-          flex: 0 auto;
-        }
-        .value-right {
-          position: relative;
-          flex: 0 auto;
-          -webkit-user-select: text;
-          width: 154px;
-          white-space: nowrap;
-          a {
-            overflow: hidden;
-            text-overflow: ellipsis;
-          }
-        }
-      }
-      .table-new {
-        margin-top: 10px;
-        flex: 1 auto;
-        display: flex;
-        input {
-          padding: 0;
-          font-weight: 400;
-        }
-        input.new-left {
-          flex: 0 auto;
-          text-align: right;
-          min-width: 80px;
-          max-width: 80px;
-        }
-        .new-right-wrapper {
-          position: relative;
-          display: flex;
-          flex: 1 auto;
-          .new-right-placeholder {
-            position: absolute;
-            top: 3px;
-            left: 0;
-            font-weight: 400;
-          }
-
-          input.new-right {
-            flex: 1 auto;
-            height: 24px;
-            position :relative;
-            padding-left: 107px;
-          }
-        }
-      }
-
-      &.ports {
-        input {
-          margin-left: 6px;
-          margin-right: 5px;
-        }
-      }
-
-      &.volumes {
-        .label-left {
-          min-width: 120px;
-        }
-        .value-left {
-          min-width: 120px;
-        }
-        .icon-arrow-right {
-          color: #aaa;
-          margin: 2px 9px 0;
-        }
-        .icon-folder-1 {
-          position: relative;
-          top: 4px;
-          font-size: 16px;
-          padding-right: 4px;
-        }
-        .btn-xs {
-          padding: 1px 5px;
-          font-size: 12px;
-          line-height: 1.5;
-          height: 22px;
-        }
-      }
-    }
-
     .question {
       margin: 12px 6px 6px;
     }
   }
 }
 
+.result-grid {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  margin-top: 10px;
+  overflow: auto;
+  .image-item {
+    display: flex;
+    width: 320px;
+    height: 170px;
+    border-radius: 4px;
+    border: 1px solid @gray-lightest;
+    background-color: white;
+    margin-right: 20px;
+    margin-bottom: 20px;
+    .logo {
+      flex: 1 auto;
+      min-width: 90px;
+      background-color: @brand-action;
+      justify-content: center;
+      text-align: center;
+      img {
+        margin-top: 15px;
+      }
+    }
+    .card {
+      padding: 10px 20px 10px 20px;
+      .name {
+        font-size: 18px;
+        color: @gray-darkest;
+        margin-bottom: 5px;
+        img {
+          margin-right: 7px;
+          position: relative;
+          top: -1px;
+        }
+      }
+      .description {
+        font-size: 12px;
+        color: @gray-normal;
+        height: 70px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 4;
+        display: -webkit-box;
+        word-wrap: break-word;
+      }
+      .actions {
+        width: 190px;
+        padding-top: 25px;
+        .stars {
+          height: 15px;
+          font-size: 10px;
+          color: @gray-darker;
+          border-right: 1px solid @gray-lightest;
+          padding-right: 10px;
+          .icon {
+            position: relative;
+            font-size: 16px;
+            margin-right: 3px;
+            top: -1px;
+            color: @gray-darkest;
+          }
+          .text {
+            position: relative;
+            top: -6px;
+          }
+        }
+        .tags {
+          height: 15px;
+          font-size: 10px;
+          color: @gray-darker;
+          padding-left: 10px;
+          .icon {
+            position: relative;
+            font-size: 11px;
+            margin-right: 5px;
+            top: 2px;
+            color: @gray-darkest;
+          }
+          .text {
+            position: relative;
+            top: 0px;
+          }
+        }
+        .action {
+          flex: 1 auto;
+          .btn {
+            text-align: right;
+            position: relative;
+            float: right;
+            top: -7px;
+          }
+        }
+        display: flex;
+        flex-direaction: row;
+        position: relative;
+        bottom: 0px;
+      }
+    }
+  }
+}
+
+.new-container {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: column;
+  padding: 35px 20px 32px 25px;
+  .results {
+    display: flex;
+    flex-direction: column;
+    flex: 1 auto;
+    .no-results {
+      flex: 1 auto;
+      display: flex;
+      align-items: center;
+    }
+  }
+  .new-container-header {
+    margin-bottom: 18px;
+    display: flex;
+    flex: 0 auto;
+    .text {
+      flex: 1 auto;
+      width: 50%;
+      font-size: 14px;
+      color: @gray-lighter;
+    }
+    .search {
+      flex: 1 auto;
+      margin-right: 30px;
+      .search-bar {
+        top: -7px;
+        position: relative;
+        .loading {
+          position: absolute;
+          left: 10px;
+          top: 7px;
+          width: 16px;
+          height: 16px;
+          -webkit-animation-name: spin;
+          -webkit-animation-duration: 1.8s;
+          -webkit-animation-iteration-count: infinite;
+          -webkit-animation-timing-function: linear;
+        }
+        .search-icon {
+          font-size: 18px;
+          color: @gray-lighter;
+          position: absolute;
+          top: 5px;
+          left: 10px;
+        }
+        input {
+          border-radius: 20px;
+          font-size: 12px;
+          height: 30px;
+          padding: 4px 8px 4px 35px;
+          color: @gray-darkest;
+          margin-bottom: 3px;
+          border-color: @gray-lightest;
+          box-shadow: none;
+
+          &:focus {
+            box-shadow: none;
+            border-color: @gray-lighter;
+          }
+
+          &::-webkit-input-placeholder {
+            color: #CCC;
+            font-weight: 400;
+          }
+        }
+      }
+    }
+  }
+}
+
 .containers {
   box-sizing: border-box;
   height: 100%;
@@ -147,22 +207,26 @@
     display: flex;
     flex-direction: row;
 
+    padding: 0px;
+
     .sidebar {
+      padding-top: 28px;
+      background-color: white;
       display: flex;
       flex-direction: column;
-      min-width: 280px;
+      min-width: 260px;
       margin: 0;
       box-sizing: border-box;
-      border-right: 1px solid #eee;
+      border-right: 1px solid #DCE2E2;
 
       .sidebar-header {
         flex: 0 auto;
         min-width: 240px;
-        min-height: 42px;
+        min-height: 47px;
         display: flex;
         border-bottom: 1px solid transparent;
         transition: border-bottom 0.25s;
-        padding: 0px 10px 0px 10px;
+        //padding: 0px 10px 0px 10px;
 
         &.sep {
           border-bottom: 1px solid #eee;
@@ -171,37 +235,37 @@
 
         h4 {
           align-self: flex-start;
-          padding: 0 24px;
+          //padding: 0 24px;
+          padding-left: 26px;
           margin: 14px 0 0;
           display: inline-block;
-          font-size: 14px;
           position: relative;
         }
 
         .create {
           flex: 1 auto;
           text-align: right;
-          /*.btn {
-            margin-top: 4px;
-            padding: 4px 7px;
-            font-size: 16px;
-            position: relative;
-            .icon {
-              position: relative;
-              top: 3px;
-              left: 1px;
+          margin-right: 20px;
+          margin-top: 3px;
+
+          .btn-new {
+            font-size: 24px;
+            color: @brand-action;
+            transition: all 0.25s;
+            &:hover {
+              color: darken(@brand-action, 10%);
+            }
           }
-          }*/
         }
       }
 
       .sidebar-containers {
         position: relative;
         flex: 1 auto;
-        overflow-y: scroll;
+        overflow-y: auto;
         overflow-x: hidden;
         box-sizing: border-box;
-        max-width: 280px;
+        max-width: 260px;
 
         &.sep {
           border-top: 1px solid #eee;
@@ -209,33 +273,43 @@
 
         ul {
           margin: 0;
-          min-width: 240px;
           padding: 0;
-          margin-top: 4px;
 
           display: flex;
           flex-direction: column;
 
+          .new-container-item {
+            .info {
+              position: relative;
+              top: 9px;
+            }
+          }
+
           a {
             color: inherit;
             flex-shrink: 0;
             cursor: default;
-            margin: 0px 3px 0px 0;
             outline: none;
-            padding: 4px 13px;
-
             &.active {
               background: @brand-primary;
               li {
+                height: 57px;
                 border-bottom: none;
+                background-image: linear-gradient(-180deg, #24B8EB 4%, #24A3EB 100%);
                 .name {
                   color: white;
                 }
                 .image {
                   color: white;
-                  opacity: 0.9;
+                  opacity: 0.8;
+                }
+                .btn-delete {
+                  font-size: 24px;
+                  color: white;
+                }
+                .state-new {
+                  .at2x('container-white.png', 20px, 20px);
                 }
-
                 .state-running {
                   .at2x('running-white.png', 20px, 20px);
 
@@ -246,7 +320,6 @@
                 .state-stopped {
                   .at2x('stopped-white.png', 20px, 20px);
                 }
-
                 .state-downloading {
                   .at2x('downloading-white.png', 20px, 20px);
 
@@ -268,10 +341,11 @@
 
           li {
             vertical-align: middle;
-            padding: 10px 16px 10px 16px;
+            padding: 10px 16px 10px 26px;
 
             display: flex;
             flex-direction: row;
+            height: 57px;
 
 
             .info {
@@ -295,6 +369,19 @@
               }
             }
 
+            .action {
+              display: none;
+              flex: 1;
+              position: relative;
+              top: 5px;
+              text-align: right;
+              margin-right: 4px;
+              .btn-delete {
+                font-size: 24px;
+                color: @gray-lighter;
+              }
+            }
+
             .state {
               margin-top: 9px;
               display: inline-block;
@@ -315,6 +402,10 @@
               .at2x('paused.png', 20px, 20px);
             }
 
+            .state-new {
+              .at2x('container.png', 20px, 20px);
+            }
+
             .state-downloading {
               .at2x('downloading.png', 20px, 20px);
               overflow: hidden;
@@ -385,6 +476,7 @@
     }
 
     .details {
+      background-color: #F9F9F9;
       margin: 0;
       padding: 0;
       box-sizing: border-box;
@@ -394,16 +486,125 @@
       display: flex;
       flex-direction: column;
 
+      .details-subheader {
+        flex: 0 auto;
+        display: flex;
+        flex-direction: row;
+        position: relative;
+        //border-top: 1px solid #EEE;
+        border-bottom: 1px solid #DCE2E2;
+        background-color: white;
+        height: 57px;
+        padding: 6px 10px 10px 24px;
+        font-size: 13px;
+        color: @gray-normal;
+
+        .image {
+          flex: 1 auto;
+          //margin: 7px 0px 0px 16px;
+          margin-top: 1px;
+          font-size: 13px;
+          color: @gray-normal;
+          //font-weight: 300;
+          img {
+            width: 30px;
+            height: 18px;
+            position: relative;
+            top: -2px;
+            margin-right: 10px;
+          }
+        }
+
+        .details-header-actions {
+          flex: 1 auto;
+          text-align: left;
+          margin-top: -12px;
+          .action {
+            display: inline-block;
+            .action-icon {
+              color: @gray-normal;
+              font-size: 30px;
+              margin-right: 20px;
+            }
+            .btn-label {
+              position: relative;
+              top: 0px;
+              display: block;
+              color: @brand-action;
+              font-size: 10px;
+              &.run {
+                left: 8px;
+              }
+              &.restart {
+                left: 1px;
+              }
+              &.terminal {
+                left: -2px;
+              }
+              visibility: hidden;
+            }
+          }
+        }
+
+        .details-subheader-tabs {
+          flex: 1 auto;
+          text-align: right;
+          margin-right: 3px;
+          margin-top: 3px;
+          .tab {
+            margin-left: 16px;
+            padding: 6px 10px;
+            font-weight: 400;
+            &:hover {
+              border-radius: 40px;
+              background-color: #F9F9F9;
+            }
+            &.active {
+              border-radius: 40px;
+              color: white;
+              background-image: linear-gradient(-180deg, #24B8EB 4%, #24A3EB 100%);
+            }
+          }
+        }
+      }
+
       .details-header {
         flex: 0 auto;
         display: flex;
-        flex-direction: column;
-        padding: 4px 40px 10px 40px;
+        flex-direction: row;
+        padding: 31px 24px 18px 24px;
         position: relative;
-        border-bottom: 1px solid #eee;
+        background-color: white;
+        height: 75px;
+        h1 {
+          margin: 0;
+          font-size: 20px;
+          font-weight: 400;
+          margin: 0;
+          color: @gray-darkest;
+        }
+        .status {
+          font-size: 10px;
+          font-weight: 500;
+          position: relative;
+          top: 8px;
+          left: 14px;
+          &.running {
+            color: @brand-positive;
+          }
+          &.paused {
+            color: @gray-lighter;
+          }
+          &.stopped {
+            color: @gray-lighter;
+          }
+          &.downloading {
+            color: @brand-action;
+          }
+        }
 
-        .details-header-actions {
-          flex: 0 auto;
+        /*.details-header-actions {
+          flex: 1;
           display: flex;
           flex-direction: row;
           margin-top: 24px;
@@ -429,68 +630,279 @@
               z-index: 0;
             }
           }
-        }
-
-        .details-header-info {
-          display: flex;
-          flex-direction: row;
-          a {
-            position: absolute;
-            right: 30px;
-            top: -4px;
-          }
-          h1 {
-            margin: 0;
-            font-size: 20px;
-            margin: 0;
-            color: @gray-darkest;
-          }
-          h2 {
-            &.status {
-              margin: 8px 0px 0px 16px;
-              text-transform: uppercase;
-              font-weight: bold;
-              font-size: 10px;
-              &.running {
-                color: @brand-positive;
-              }
-            }
-            &.image-label {
-              margin: 8px 0px 0px 30px;
-              font-size: 10px;
-              color: @gray-lighter;
-            }
-            &.image {
-              margin: 5px 0px 0px 16px;
-              font-size: 14px;
-              color: @gray-normal;
-            }
-          }
-        }
+        }*/
       }
 
       .details-progress {
-        margin: 26% auto 0;
+        margin: 20% auto 0;
         text-align: center;
         width: 300px;
+        h2 {
+          margin-bottom: 20px;
+        }
       }
 
       .details-panel {
         flex: 1;
         overflow: auto;
-        .logs {
+        background-color: #FFF;
+        &.home {
+          background-color: #F9F9F9;
+          overflow: hidden;
+          .content {
+            display: flex;
+            flex: 1 auto;
+            flex-direction: row;
+            padding: 10px 27px;
+            .left {
+              width: 60%;
+              flex-direction: column;
+              .web-preview {
+                margin-right: 30px;
+                .subtext {
+                  text-align: right;
+                  color: @gray-lightest;
+                  margin-top: 2px;
+                }
+                .widget {
+                  background-color: white;
+                  width: 100%;
+                  height: 100%;
+                  border-radius: 4px;
+                  border: 1px solid @gray-lightest;
+                  position: relative;
+                  iframe {
+                    border: 0;
+                    border-radius: 4px;
+                    /*width: 100%;
+                    height: 100%;*/
+                    position: relative;
+                    top: -50%;
+                    left: -50%;
+                    width: 200%;
+                    height: 200%;
+                    transform: scale(0.5);
+                  }
+                  .iframe-overlay {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    z-index: 100;
+                    color: transparent;
+                    transition: all 0.25s;
+                    .icon {
+                      margin-top: 40%;
+                      display: block;
+                      font-size: 60px;
+                      text-align: center;
+                    }
+                    .text {
+                      font-size: 20px;
+                      text-align: center;
+                    }
+                    &:hover {
+                      color: white;
+                      background-color: @gray-darkest;
+                      opacity: 0.75;
+                    }
+                  }
+                }
+              }
+            }
+            .right {
+              width: 40%;
+              flex-direction: column;
+              .mini-logs {
+                margin-bottom: 50px;
+                .widget {
+                  position: relative;
+                  border-radius: 4px;
+                  border: 1px solid @gray-lightest;
+                  background-color: @gray-darkest;
+                  color: @gray-lightest;
+                  height: 100%;
+                  padding: 10px;
+                  overflow: hidden;
+                  font-family: Menlo;
+                  font-size: 8px;
+                  white-space: pre-wrap;
+                  p {
+                    margin-bottom: 0px;
+                  }
+                  .mini-logs-overlay {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    z-index: 100;
+                    color: transparent;
+                    transition: all 0.25s;
+                    .icon {
+                      margin-top: 25%;
+                      display: block;
+                      font-size: 60px;
+                      text-align: center;
+                    }
+                    .text {
+                      font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+                      font-size: 20px;
+                      text-align: center;
+                    }
+                    &:hover {
+                      color: white;
+                      background-color: @gray-darkest;
+                      opacity: 0.75;
+                    }
+                  }
+                }
+              }
+              .folders {
+                .subtext {
+                  text-align: right;
+                  color: @gray-lightest;
+                  margin-top: 2px;
+                }
+                .widget {
+                  padding: 20px 10px;
+                  background-color: white;
+                  border-radius: 4px;
+                  border: 1px solid @gray-lightest;
+                  display: flex;
+                  .folder {
+                    width: 100px;
+                    img {
+                      display: block;
+                      margin: 0 auto;
+                    }
+                    .text {
+                      text-align: center;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+        &.logs {
+          background-color: @gray-darkest;
           -webkit-user-select: text;
           font-family: Menlo;
           font-size: 12px;
-          padding: 18px 35px;
-          color: lighten(@gray-normal, 6%);
+          padding: 20px 18px;
+          color: @gray-lightest;
           white-space: pre-wrap;
           p {
-            margin: 0 6px;
+            margin-bottom: 0px;
           }
         }
         .settings {
-          padding: 18px 35px;
+          padding: 18px 38px;
+          .settings-section {
+            margin-bottom: 40px;
+          }
+        }
+        .ports {
+          padding: 18px 38px;
+        }
+        .volumes {
+          padding: 18px 38px;
+        }
+
+        .table {
+          margin-bottom: 0;
+          .icon-arrow-right {
+            color: #aaa;
+            margin: 2px 9px 0;
+            flex: 0 auto;
+            min-width: 13px;
+          }
+          .btn {
+            min-width: 22px;
+            margin-left: 10px;
+          }
+          .table-labels {
+            margin-top: 20px;
+            flex: 1 auto;
+            display: flex;
+            font-size: 12px;
+            color: @gray-lightest;
+            .label-left {
+              flex: 0 auto;
+              min-width: 80px;
+              margin-right: 30px;
+              text-align: right;
+            }
+            .label-right {
+              flex: 1 auto;
+              display: inline-block;
+              width: 40%;
+            }
+          }
+          .table-values {
+            flex: 1 auto;
+            display: flex;
+            flex-direction: row;
+            margin: 8px 0;
+            .value-left {
+              text-align: right;
+              min-width: 80px;
+              flex: 0 auto;
+            }
+            .value-right {
+              flex: 1 auto;
+              -webkit-user-select: text;
+              width: 40%;
+            }
+          }
+          .table-new {
+            margin-top: 10px;
+            flex: 1 auto;
+            display: flex;
+            input {
+              padding: 0;
+              font-weight: 400;
+            }
+            input.new-left {
+              flex: 0 auto;
+              text-align: right;
+              min-width: 80px;
+              max-width: 80px;
+            }
+            .new-right-wrapper {
+              position: relative;
+              display: flex;
+              flex: 1 auto;
+              .new-right-placeholder {
+                position: absolute;
+                top: 3px;
+                left: 0;
+                font-weight: 400;
+              }
+
+              input.new-right {
+                flex: 1 auto;
+                height: 24px;
+                position :relative;
+                padding-left: 107px;
+              }
+            }
+          }
+
+          &.volumes {
+            .label-left {
+              min-width: 120px;
+            }
+            .value-left {
+              min-width: 120px;
+            }
+            .icon {
+              color: #aaa;
+              margin: 2px 9px 0;
+            }
+          }
         }
       }
 
@@ -507,6 +919,7 @@
         color: @gray-lightest;
         margin-left: 5px;
         margin-bottom: 5px;
+        margin-top: 20px;
         .label-key {
           display: inline-block;
           margin-right: 30px;

styles/header.less

@@ -1,9 +1,10 @@
 @import "bootstrap/bootstrap.less";
 
 .header {
+  position: absolute;
   min-width: 100%;
   flex: 0;
-  min-height: 50px;
+  min-height: 30px;
   -webkit-app-region: drag;
   -webkit-user-select: none;
   // border-bottom: 1px solid #efefef;
@@ -12,11 +13,19 @@
     -webkit-app-region: no-drag;
   }
 
+  .logo {
+    position: relative;
+    float: right;
+    top: 10px;
+    right: 10px;
+    z-index: 1000;
+  }
+
   .buttons {
     display: inline-block;
     position: relative;
-    top: 16px;
-    left: 20px;
+    top: 10px;
+    left: 15px;
 
     &:hover {
       .button-minimize.enabled {
@@ -44,9 +53,21 @@
       border-radius: 6px;
       box-shadow: 0px 1px 1px 0px rgba(234,234,234,0.50);
       -webkit-app-region: no-drag;
-
+      &.red {
+        background-color: #FF5F52;
+        border-color: #E33E32;
+      }
+      &.yellow {
+        background-color: #FFBE05;
+        border-color: #E2A100;
+      }
+      &.green {
+        background-color: #15CC35;
+        border-color: #17B230;
+      }
       &.disabled {
-        border: 1px solid #E8EEEF;
+        background-color: #DDDDDD;
+        border: 1px solid #D3D3D3;
       }
 
       &.enabled:hover {

styles/main.less

@@ -15,9 +15,8 @@ html, body {
   height: 100%;
   width: 100%;
   overflow: hidden;
-  -webkit-font-smoothing: antialiased;
   -webkit-user-select: none;
-  font-family: 'Clear Sans', sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
 
   cursor: default;
   img {
@@ -25,7 +24,7 @@ html, body {
   }
 }
 
-::-webkit-scrollbar {
+/*::-webkit-scrollbar {
   width: 13px;
 }
 
@@ -46,7 +45,7 @@ html, body {
   &:hover {
     background-color: rgba(0,0,0,0.25);
   }
-}
+}*/
 
 .question {
   color: @gray-lightest;

styles/radial.less

@@ -12,12 +12,12 @@
 .radial-progress {
 
   &.radial-spinner {
-    -webkit-animation: rotating 2.4s linear infinite;
+    -webkit-animation: rotating 1.6s linear infinite;
   }
 
   @circle-size: 140px;
   @circle-background: #F2F2F2;
-  @inset-size: 136px;
+  @inset-size: @circle-size - 4;
   @inset-color: white;
   @transition-length: 1s;
   // @percentage-color: #3FD899;
@@ -28,7 +28,6 @@
   width:  @circle-size;
   height: @circle-size;
 
-  background-color: @circle-background;
   border-radius: 100%;
   .circle {
     .mask, .fill, .shadow {

styles/setup.less

@@ -3,7 +3,7 @@
   height: 100%;
   width: 100%;
   flex-direction: row;
-  -webkit-app-region: drag;
+  //-webkit-app-region: drag;
 
   .image {
     display: flex;
@@ -13,12 +13,13 @@
     align-items: center;
     justify-content: flex-end;
     padding-right: 40px;
+    padding-left: 80px;
 
     .contents {
       position: relative;
       .detail {
         position: absolute;
-        right: 0;
+        right: -20px;
         bottom: 0;
       }
     }
@@ -36,13 +37,24 @@
       max-width: 320px;
 
       h1 {
-        margin-top: -30px;
+        color: @gray-darkest;
         font-size: 24px;
       }
-
+      h4 {
+        color: @gray-lightest;
+        font-size: 13px;
+        margin-top: -30px;
+      }
       p {
         font-size: 13px;
         color: @gray-normal;
+        &.error {
+          color: @brand-negative;
+          background-color: lighten(@brand-negative, 32%);
+          padding: 10px;
+          border-radius: 4px;
+          -webkit-user-select: text;
+        }
       }
     }
 

styles/theme.less

@@ -5,6 +5,11 @@
 @import "bootstrap/variables.less";
 @import "bootstrap/mixins.less";
 
+h2 {
+  font-size: 18px;
+  color: @gray-normal;
+}
+
 h3 {
   font-size: 14px;
   color: @gray-darkest;
@@ -12,8 +17,8 @@ h3 {
 
 h4 {
   font-size: 13px;
-  color: @gray-normal;
-  font-weight: 400;
+  color: @gray-darker;
+  font-weight: 500;
 }
 
 .popover-content {
@@ -28,7 +33,7 @@ input[type="text"] {
     color: @gray-normal;
     font-weight: 300;
     padding: 5px;
-    transition: all 0.1s;
+    transition: all 0.25s;
     &:focus {
       outline: 0;
       border-bottom: 1px solid @brand-action;
@@ -56,7 +61,7 @@ input[type="text"] {
 
 // Mixin for generating new styles
 .btn-styles(@btn-color: @gray-normal) {
-  transition: all 0.1s;
+  transition: all 0.25s;
   .reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners
   border-color: @btn-color;
   color: @btn-color;
@@ -118,16 +123,16 @@ input[type="text"] {
 
 // Common styles
 .btn {
-  font-size: 12px;
+  font-size: 13px;
   background-color: transparent;
   color: @gray-normal;
   border: 1px solid @gray-normal;
-  border-radius: 25px;
+  border-radius: 40px;
   box-shadow: none;
   font-weight: 400;
   text-shadow: none;
-  padding: 6px 14px 6px 14px;
-  height: 32px;
+  padding: 4px 14px 4px 14px;
+  height: 28px;
   cursor: default;
 
   &.small {
@@ -173,6 +178,7 @@ input[type="text"] {
   &.only-icon {
     padding: 6px 7px 6px 7px;
     &.small {
+      width: 22px;
       padding: 2px 5px 3px 5px;
     }
   }

styles/variables.less

@@ -1,7 +1,7 @@
 @brand-primary:         #24B8EB;
 @brand-action:          #24B8EB;
-@brand-positive:        #65E100;
-@brand-negative:        #F47A45;
+@brand-positive:        #15CC35;
+@brand-negative:        #FF5F52;
 
 @gray-darkest:          #253237;
 @gray-darker:           #394C51;

tests/Boot2Docker-integration.js

@@ -1,57 +0,0 @@
-var boot2docker = require('../build/Boot2Docker');
-var path = require('path');
-var fs = require('fs');
-var packagejson = JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'package.json'), 'utf8'));
-
-describe('Boot2Docker', () => {
-  it('cli version is correct', done => {
-    boot2docker.cliversion().then(version => {
-      expect(version).toBe(packagejson['boot2docker-version']);
-      done();
-    });
-  });
-
-  describe('with an existing & running boot2docker vm', () => {
-    beforeAll(done => {
-      boot2docker.init().then(boot2docker.start).then(() => {
-        done();
-      });
-    });
-
-    it('creates a vm', done => {
-      boot2docker.exists().then(exists => {
-        expect(exists).toBe(true);
-        done();
-      });
-    });
-
-    it('detects the correct state of running vm', done => {
-      boot2docker.status().then(status => {
-        expect(status).toBe('running');
-        done();
-      });
-    });
-
-    it('detects ssh keys', () => {
-      expect(boot2docker.haskeys()).toBe(true);
-    });
-
-    it('receives an ip address from the vm', done => {
-      boot2docker.ip().then(ip => {
-        expect(ip).toMatch(/\b\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\b/);
-        done();
-      });
-    });
-
-    it('reads a version from the boot2docker iso file', done => {
-      boot2docker.isoversion().then(version => {
-        expect(version).toMatch(/\d+\.\d+\.\d+/);
-        done();
-      });
-    });
-
-    afterAll(done => {
-      boot2docker.destroy().finally(done);
-    });
-  });
-});

tests/SetupStore-integration.js

@@ -1,91 +0,0 @@
-var virtualbox = require('../build/Virtualbox');
-var SetupStore = require('../build/SetupStore');
-var setupUtil = require('../build/SetupUtil');
-var path = require('path');
-var fs = require('fs');
-var Promise = require('bluebird');
-var packagejson = JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'package.json'), 'utf8'));
-
-jasmine.DEFAULT_TIMEOUT_INTERVAL = 300000; // 5 minutes for integration tests
-
-describe('Setup', function () {
-
-  describe('with virtualbox installed', function () {
-
-    // Before each teardown the boot2docker VM, keys and anything else
-
-    describe('and with a kitematic vm', function () {
-
-    });
-
-    describe('and without a boot2docker vm', function () {
-
-    });
-
-    describe('and with an old boot2docker vm', function () {
-
-    });
-
-    describe('and with a very old boot2docker vm', function () {
-
-    });
-
-    describe('and with a boot2docker vm running', function () {
-
-    });
-
-    describe('and with a boot2docker vm but with no ssh keys', function () {
-
-    });
-
-    describe('and with a boot2docker vm being powered off', function () {
-
-    });
-
-    describe('and with a boot2docker vm being removed', function () {
-
-    });
-
-    describe('and with a boot2docker vm initialized but not running', function () {
-
-    });
-  });
-
-  /*describe('with virtualbox downloaded', function () {
-    beforeEach(function (done) {
-      Promise.coroutine(SetupStore.downloadVirtualboxStep)().finally(function () {
-        if (virtualbox.installed()) {
-          virtualbox.kill().finally(function () {
-            done();
-          });
-        } else {
-          done();
-        }
-      });
-    });
-
-    it('install virtualbox succeeds', function (done) {
-      Promise.coroutine(SetupStore.installVirtualboxStep)().finally(function () {
-        expect(virtualbox.installed()).toBe(true);
-        done();
-      });
-    });
-  });*/
-
-  /*describe('without virtualbox installed or downloaded', function () {
-    var virtualboxFile = path.join(setupUtil.supportDir(), packagejson['virtualbox-filename']);
-    beforeEach(function () {
-      if (fs.existsSync(virtualboxFile)) {
-        fs.unlinkSync(virtualboxFile);
-      }
-      spyOn(virtualbox, 'installed').and.returnValue(false);
-    });
-
-    it('downloads virtualbox from the official website', function (done) {
-      Promise.coroutine(SetupStore.downloadVirtualboxStep)().finally(function () {
-        expect(fs.existsSync(virtualboxFile)).toBe(true);
-        done();
-      });
-    });
-  });*/
-});

tests/SetupUtil-integration.js

@@ -1,10 +0,0 @@
-var setupUtil = require('../build/SetupUtil');
-
-describe('SetupUtils', function() {
-  it('returns live sha256 checksum for a given virtualbox version & filename', function (done) {
-    setupUtil.virtualboxSHA256('4.3.20', 'VirtualBox-4.3.20-96996-OSX.dmg').then(function (checksum) {
-      expect(checksum).toBe('744e77119a640a5974160213c9912568a3d88dbd06a2fc6b6970070941732705');
-      done();
-    });
-  });
-});

tests/Virtualbox-integration.js

@@ -1,56 +0,0 @@
-var virtualbox = require('../build/Virtualbox');
-var util = require('../build/Util');
-
-describe('Virtualbox', function () {
-  beforeAll(function () {
-    // Make sure VirtualBox is installed
-  });
-
-  describe('with a running VM', function () {
-    beforeEach(function (done) {
-      return util.exec([virtualbox.command(), 'createvm', '--name', 'km-test', '--register']).finally(function () {
-        return util.exec([virtualbox.command(), 'startvm', 'km-test', '--type', 'headless']);
-      }).then(function() {
-        done();
-      }).catch(function () {
-        done();
-      });
-    });
-
-    it('powers off all vms', function (done) {
-      virtualbox.poweroffall().then(function () {
-        return virtualbox.vmstate('km-test');
-      }).then(function (state) {
-        expect(state).toBe('poweroff');
-        done();
-      }).catch(function (err) {
-        expect(err).toBeFalsy();
-        done();
-      });
-    });
-
-    it('destroys a vm', function (done) {
-      virtualbox.vmdestroy('km-test').then(function () {
-        return util.exec([virtualbox.command(), 'showvminfo', 'km-test']).then(function () {
-          done();
-        }).catch(function (err) {
-          expect(err).toBeTruthy();
-          done();
-        });
-      }).catch(function (err) {
-        console.log(err);
-        done();
-      });
-    });
-
-    afterEach(function (done) {
-      util.exec([virtualbox.command(), 'controlvm', 'km-test', 'poweroff']).finally(function () {
-        return util.exec([virtualbox.command(), 'unregistervm', 'km-test', '--delete']);
-      }).then(function () {
-        done();
-      }).catch(function () {
-        done();
-      });
-    });
-  });
-});

tests/Virtualbox-test.js

@@ -1,21 +0,0 @@
-var virtualbox = require('../build/Virtualbox');
-var util = require('../build/Util');
-var Promise = require('bluebird');
-
-describe('Virtualbox', function () {
-  it('returns the right command', function () {
-    expect(virtualbox.command()).toBe('/usr/bin/VBoxManage');
-  });
-
-  describe('version 4.3.20r96996', function () {
-    beforeEach(function () {
-      spyOn(util, 'exec').and.returnValue(Promise.resolve('4.3.20r96996'));
-    });
-    it('correctly parses virtualbox version', function (done) {
-      virtualbox.version().then(function (version) {
-        expect(version).toBe('4.3.20');
-        done();
-      });
-    });
-  });
-});

tests/jasmine-2.1.3/boot.js

@@ -1,120 +0,0 @@
-/**
- Starting with version 2.0, this file "boots" Jasmine, performing all of the necessary initialization before executing the loaded environment and all of a project's specs. This file should be loaded after `jasmine.js` and `jasmine_html.js`, but before any project source files or spec files are loaded. Thus this file can also be used to customize Jasmine for a project.
-
- If a project is using Jasmine via the standalone distribution, this file can be customized directly. If a project is using Jasmine via the [Ruby gem][jasmine-gem], this file can be copied into the support directory via `jasmine copy_boot_js`. Other environments (e.g., Python) will have different mechanisms.
-
- The location of `boot.js` can be specified and/or overridden in `jasmine.yml`.
-
- [jasmine-gem]: http://github.com/pivotal/jasmine-gem
- */
-
-(function() {
-
-  /**
-   * ## Require & Instantiate
-   *
-   * Require Jasmine's core files. Specifically, this requires and attaches all of Jasmine's code to the `jasmine` reference.
-   */
-  window.jasmine = jasmineRequire.core(jasmineRequire);
-
-  /**
-   * Since this is being run in a browser and the results should populate to an HTML page, require the HTML-specific Jasmine code, injecting the same reference.
-   */
-  jasmineRequire.html(jasmine);
-
-  /**
-   * Create the Jasmine environment. This is used to run all specs in a project.
-   */
-  var env = jasmine.getEnv();
-
-  /**
-   * ## The Global Interface
-   *
-   * Build up the functions that will be exposed as the Jasmine public interface. A project can customize, rename or alias any of these functions as desired, provided the implementation remains unchanged.
-   */
-  var jasmineInterface = jasmineRequire.interface(jasmine, env);
-
-  /**
-   * Add all of the Jasmine global/public interface to the proper global, so a project can use the public interface directly. For example, calling `describe` in specs instead of `jasmine.getEnv().describe`.
-   */
-  if (typeof window == "undefined" && typeof exports == "object") {
-    extend(exports, jasmineInterface);
-  } else {
-    extend(window, jasmineInterface);
-  }
-
-  /**
-   * ## Runner Parameters
-   *
-   * More browser specific code - wrap the query string in an object and to allow for getting/setting parameters from the runner user interface.
-   */
-
-  var queryString = new jasmine.QueryString({
-    getWindowLocation: function() { return window.location; }
-  });
-
-  var catchingExceptions = queryString.getParam("catch");
-  env.catchExceptions(typeof catchingExceptions === "undefined" ? true : catchingExceptions);
-
-  /**
-   * ## Reporters
-   * The `HtmlReporter` builds all of the HTML UI for the runner page. This reporter paints the dots, stars, and x's for specs, as well as all spec names and all failures (if any).
-   */
-  var htmlReporter = new jasmine.HtmlReporter({
-    env: env,
-    onRaiseExceptionsClick: function() { queryString.setParam("catch", !env.catchingExceptions()); },
-    getContainer: function() { return document.body; },
-    createElement: function() { return document.createElement.apply(document, arguments); },
-    createTextNode: function() { return document.createTextNode.apply(document, arguments); },
-    timer: new jasmine.Timer()
-  });
-
-  /**
-   * The `jsApiReporter` also receives spec results, and is used by any environment that needs to extract the results  from JavaScript.
-   */
-  env.addReporter(jasmineInterface.jsApiReporter);
-  env.addReporter(htmlReporter);
-
-  /**
-   * Filter which specs will be run by matching the start of the full name against the `spec` query param.
-   */
-  var specFilter = new jasmine.HtmlSpecFilter({
-    filterString: function() { return queryString.getParam("spec"); }
-  });
-
-  env.specFilter = function(spec) {
-    return specFilter.matches(spec.getFullName());
-  };
-
-  /**
-   * Setting up timing functions to be able to be overridden. Certain browsers (Safari, IE 8, phantomjs) require this hack.
-   */
-  window.setTimeout = window.setTimeout;
-  window.setInterval = window.setInterval;
-  window.clearTimeout = window.clearTimeout;
-  window.clearInterval = window.clearInterval;
-
-  /**
-   * ## Execution
-   *
-   * Replace the browser window's `onload`, ensure it's called, and then run all of the loaded specs. This includes initializing the `HtmlReporter` instance and then executing the loaded Jasmine environment. All of this will happen after all of the specs are loaded.
-   */
-  var currentWindowOnload = window.onload;
-
-  window.onload = function() {
-    if (currentWindowOnload) {
-      currentWindowOnload();
-    }
-    htmlReporter.initialize();
-    env.execute();
-  };
-
-  /**
-   * Helper function for readability above.
-   */
-  function extend(destination, source) {
-    for (var property in source) destination[property] = source[property];
-    return destination;
-  }
-
-}());

tests/jasmine-2.1.3/console.js

@@ -1,188 +0,0 @@
-/*
-Copyright (c) 2008-2014 Pivotal Labs
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-*/
-function getJasmineRequireObj() {
-  if (typeof module !== 'undefined' && module.exports) {
-    return exports;
-  } else {
-    window.jasmineRequire = window.jasmineRequire || {};
-    return window.jasmineRequire;
-  }
-}
-
-getJasmineRequireObj().console = function(jRequire, j$) {
-  j$.ConsoleReporter = jRequire.ConsoleReporter();
-};
-
-getJasmineRequireObj().ConsoleReporter = function() {
-
-  var noopTimer = {
-    start: function(){},
-    elapsed: function(){ return 0; }
-  };
-
-  function ConsoleReporter(options) {
-    var print = options.print,
-      showColors = options.showColors || false,
-      onComplete = options.onComplete || function() {},
-      timer = options.timer || noopTimer,
-      specCount,
-      failureCount,
-      failedSpecs = [],
-      pendingCount,
-      ansi = {
-        green: '\x1B[32m',
-        red: '\x1B[31m',
-        yellow: '\x1B[33m',
-        none: '\x1B[0m'
-      },
-      failedSuites = [];
-
-    this.jasmineStarted = function() {
-      specCount = 0;
-      failureCount = 0;
-      pendingCount = 0;
-      print('Started');
-      printNewline();
-      timer.start();
-    };
-
-    this.jasmineDone = function() {
-      printNewline();
-      for (var i = 0; i < failedSpecs.length; i++) {
-        specFailureDetails(failedSpecs[i]);
-      }
-
-      if(specCount > 0) {
-        printNewline();
-
-        var specCounts = specCount + ' ' + plural('spec', specCount) + ', ' +
-          failureCount + ' ' + plural('failure', failureCount);
-
-        if (pendingCount) {
-          specCounts += ', ' + pendingCount + ' pending ' + plural('spec', pendingCount);
-        }
-
-        print(specCounts);
-      } else {
-        print('No specs found');
-      }
-
-      printNewline();
-      var seconds = timer.elapsed() / 1000;
-      print('Finished in ' + seconds + ' ' + plural('second', seconds));
-      printNewline();
-
-      for(i = 0; i < failedSuites.length; i++) {
-        suiteFailureDetails(failedSuites[i]);
-      }
-
-      onComplete(failureCount === 0);
-    };
-
-    this.specDone = function(result) {
-      specCount++;
-
-      if (result.status == 'pending') {
-        pendingCount++;
-        print(colored('yellow', '*'));
-        return;
-      }
-
-      if (result.status == 'passed') {
-        print(colored('green', '.'));
-        return;
-      }
-
-      if (result.status == 'failed') {
-        failureCount++;
-        failedSpecs.push(result);
-        print(colored('red', 'F'));
-      }
-    };
-
-    this.suiteDone = function(result) {
-      if (result.failedExpectations && result.failedExpectations.length > 0) {
-        failureCount++;
-        failedSuites.push(result);
-      }
-    };
-
-    return this;
-
-    function printNewline() {
-      print('\n');
-    }
-
-    function colored(color, str) {
-      return showColors ? (ansi[color] + str + ansi.none) : str;
-    }
-
-    function plural(str, count) {
-      return count == 1 ? str : str + 's';
-    }
-
-    function repeat(thing, times) {
-      var arr = [];
-      for (var i = 0; i < times; i++) {
-        arr.push(thing);
-      }
-      return arr;
-    }
-
-    function indent(str, spaces) {
-      var lines = (str || '').split('\n');
-      var newArr = [];
-      for (var i = 0; i < lines.length; i++) {
-        newArr.push(repeat(' ', spaces).join('') + lines[i]);
-      }
-      return newArr.join('\n');
-    }
-
-    function specFailureDetails(result) {
-      printNewline();
-      print(result.fullName);
-
-      for (var i = 0; i < result.failedExpectations.length; i++) {
-        var failedExpectation = result.failedExpectations[i];
-        printNewline();
-        print(indent(failedExpectation.message, 2));
-        print(indent(failedExpectation.stack, 2));
-      }
-
-      printNewline();
-    }
-
-    function suiteFailureDetails(result) {
-      for (var i = 0; i < result.failedExpectations.length; i++) {
-        printNewline();
-        print(colored('red', 'An error was thrown in an afterAll'));
-        printNewline();
-        print(colored('red', 'AfterAll ' + result.failedExpectations[i].message));
-
-      }
-      printNewline();
-    }
-  }
-
-  return ConsoleReporter;
-};

tests/jasmine-2.1.3/jasmine-html.js

@@ -1,404 +0,0 @@
-/*
-Copyright (c) 2008-2014 Pivotal Labs
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-*/
-jasmineRequire.html = function(j$) {
-  j$.ResultsNode = jasmineRequire.ResultsNode();
-  j$.HtmlReporter = jasmineRequire.HtmlReporter(j$);
-  j$.QueryString = jasmineRequire.QueryString();
-  j$.HtmlSpecFilter = jasmineRequire.HtmlSpecFilter();
-};
-
-jasmineRequire.HtmlReporter = function(j$) {
-
-  var noopTimer = {
-    start: function() {},
-    elapsed: function() { return 0; }
-  };
-
-  function HtmlReporter(options) {
-    var env = options.env || {},
-      getContainer = options.getContainer,
-      createElement = options.createElement,
-      createTextNode = options.createTextNode,
-      onRaiseExceptionsClick = options.onRaiseExceptionsClick || function() {},
-      timer = options.timer || noopTimer,
-      results = [],
-      specsExecuted = 0,
-      failureCount = 0,
-      pendingSpecCount = 0,
-      htmlReporterMain,
-      symbols,
-      failedSuites = [];
-
-    this.initialize = function() {
-      clearPrior();
-      htmlReporterMain = createDom('div', {className: 'jasmine_html-reporter'},
-        createDom('div', {className: 'banner'},
-          createDom('a', {className: 'title', href: 'http://jasmine.github.io/', target: '_blank'}),
-          createDom('span', {className: 'version'}, j$.version)
-        ),
-        createDom('ul', {className: 'symbol-summary'}),
-        createDom('div', {className: 'alert'}),
-        createDom('div', {className: 'results'},
-          createDom('div', {className: 'failures'})
-        )
-      );
-      getContainer().appendChild(htmlReporterMain);
-
-      symbols = find('.symbol-summary');
-    };
-
-    var totalSpecsDefined;
-    this.jasmineStarted = function(options) {
-      totalSpecsDefined = options.totalSpecsDefined || 0;
-      timer.start();
-    };
-
-    var summary = createDom('div', {className: 'summary'});
-
-    var topResults = new j$.ResultsNode({}, '', null),
-      currentParent = topResults;
-
-    this.suiteStarted = function(result) {
-      currentParent.addChild(result, 'suite');
-      currentParent = currentParent.last();
-    };
-
-    this.suiteDone = function(result) {
-      if (result.status == 'failed') {
-        failedSuites.push(result);
-      }
-
-      if (currentParent == topResults) {
-        return;
-      }
-
-      currentParent = currentParent.parent;
-    };
-
-    this.specStarted = function(result) {
-      currentParent.addChild(result, 'spec');
-    };
-
-    var failures = [];
-    this.specDone = function(result) {
-      if(noExpectations(result) && typeof console !== 'undefined' && typeof console.error !== 'undefined') {
-        console.error('Spec \'' + result.fullName + '\' has no expectations.');
-      }
-
-      if (result.status != 'disabled') {
-        specsExecuted++;
-      }
-
-      symbols.appendChild(createDom('li', {
-          className: noExpectations(result) ? 'empty' : result.status,
-          id: 'spec_' + result.id,
-          title: result.fullName
-        }
-      ));
-
-      if (result.status == 'failed') {
-        failureCount++;
-
-        var failure =
-          createDom('div', {className: 'spec-detail failed'},
-            createDom('div', {className: 'description'},
-              createDom('a', {title: result.fullName, href: specHref(result)}, result.fullName)
-            ),
-            createDom('div', {className: 'messages'})
-          );
-        var messages = failure.childNodes[1];
-
-        for (var i = 0; i < result.failedExpectations.length; i++) {
-          var expectation = result.failedExpectations[i];
-          messages.appendChild(createDom('div', {className: 'result-message'}, expectation.message));
-          messages.appendChild(createDom('div', {className: 'stack-trace'}, expectation.stack));
-        }
-
-        failures.push(failure);
-      }
-
-      if (result.status == 'pending') {
-        pendingSpecCount++;
-      }
-    };
-
-    this.jasmineDone = function() {
-      var banner = find('.banner');
-      banner.appendChild(createDom('span', {className: 'duration'}, 'finished in ' + timer.elapsed() / 1000 + 's'));
-
-      var alert = find('.alert');
-
-      alert.appendChild(createDom('span', { className: 'exceptions' },
-        createDom('label', { className: 'label', 'for': 'raise-exceptions' }, 'raise exceptions'),
-        createDom('input', {
-          className: 'raise',
-          id: 'raise-exceptions',
-          type: 'checkbox'
-        })
-      ));
-      var checkbox = find('#raise-exceptions');
-
-      checkbox.checked = !env.catchingExceptions();
-      checkbox.onclick = onRaiseExceptionsClick;
-
-      if (specsExecuted < totalSpecsDefined) {
-        var skippedMessage = 'Ran ' + specsExecuted + ' of ' + totalSpecsDefined + ' specs - run all';
-        alert.appendChild(
-          createDom('span', {className: 'bar skipped'},
-            createDom('a', {href: '?', title: 'Run all specs'}, skippedMessage)
-          )
-        );
-      }
-      var statusBarMessage = '';
-      var statusBarClassName = 'bar ';
-
-      if (totalSpecsDefined > 0) {
-        statusBarMessage += pluralize('spec', specsExecuted) + ', ' + pluralize('failure', failureCount);
-        if (pendingSpecCount) { statusBarMessage += ', ' + pluralize('pending spec', pendingSpecCount); }
-        statusBarClassName += (failureCount > 0) ? 'failed' : 'passed';
-      } else {
-        statusBarClassName += 'skipped';
-        statusBarMessage += 'No specs found';
-      }
-
-      alert.appendChild(createDom('span', {className: statusBarClassName}, statusBarMessage));
-
-      for(i = 0; i < failedSuites.length; i++) {
-        var failedSuite = failedSuites[i];
-        for(var j = 0; j < failedSuite.failedExpectations.length; j++) {
-          var errorBarMessage = 'AfterAll ' + failedSuite.failedExpectations[j].message;
-          var errorBarClassName = 'bar errored';
-          alert.appendChild(createDom('span', {className: errorBarClassName}, errorBarMessage));
-        }
-      }
-
-      var results = find('.results');
-      results.appendChild(summary);
-
-      summaryList(topResults, summary);
-
-      function summaryList(resultsTree, domParent) {
-        var specListNode;
-        for (var i = 0; i < resultsTree.children.length; i++) {
-          var resultNode = resultsTree.children[i];
-          if (resultNode.type == 'suite') {
-            var suiteListNode = createDom('ul', {className: 'suite', id: 'suite-' + resultNode.result.id},
-              createDom('li', {className: 'suite-detail'},
-                createDom('a', {href: specHref(resultNode.result)}, resultNode.result.description)
-              )
-            );
-
-            summaryList(resultNode, suiteListNode);
-            domParent.appendChild(suiteListNode);
-          }
-          if (resultNode.type == 'spec') {
-            if (domParent.getAttribute('class') != 'specs') {
-              specListNode = createDom('ul', {className: 'specs'});
-              domParent.appendChild(specListNode);
-            }
-            var specDescription = resultNode.result.description;
-            if(noExpectations(resultNode.result)) {
-              specDescription = 'SPEC HAS NO EXPECTATIONS ' + specDescription;
-            }
-            specListNode.appendChild(
-              createDom('li', {
-                  className: resultNode.result.status,
-                  id: 'spec-' + resultNode.result.id
-                },
-                createDom('a', {href: specHref(resultNode.result)}, specDescription)
-              )
-            );
-          }
-        }
-      }
-
-      if (failures.length) {
-        alert.appendChild(
-          createDom('span', {className: 'menu bar spec-list'},
-            createDom('span', {}, 'Spec List | '),
-            createDom('a', {className: 'failures-menu', href: '#'}, 'Failures')));
-        alert.appendChild(
-          createDom('span', {className: 'menu bar failure-list'},
-            createDom('a', {className: 'spec-list-menu', href: '#'}, 'Spec List'),
-            createDom('span', {}, ' | Failures ')));
-
-        find('.failures-menu').onclick = function() {
-          setMenuModeTo('failure-list');
-        };
-        find('.spec-list-menu').onclick = function() {
-          setMenuModeTo('spec-list');
-        };
-
-        setMenuModeTo('failure-list');
-
-        var failureNode = find('.failures');
-        for (var i = 0; i < failures.length; i++) {
-          failureNode.appendChild(failures[i]);
-        }
-      }
-    };
-
-    return this;
-
-    function find(selector) {
-      return getContainer().querySelector('.jasmine_html-reporter ' + selector);
-    }
-
-    function clearPrior() {
-      // return the reporter
-      var oldReporter = find('');
-      
-      if(oldReporter) {
-        getContainer().removeChild(oldReporter);
-      }
-    }
-
-    function createDom(type, attrs, childrenVarArgs) {
-      var el = createElement(type);
-
-      for (var i = 2; i < arguments.length; i++) {
-        var child = arguments[i];
-
-        if (typeof child === 'string') {
-          el.appendChild(createTextNode(child));
-        } else {
-          if (child) {
-            el.appendChild(child);
-          }
-        }
-      }
-
-      for (var attr in attrs) {
-        if (attr == 'className') {
-          el[attr] = attrs[attr];
-        } else {
-          el.setAttribute(attr, attrs[attr]);
-        }
-      }
-
-      return el;
-    }
-
-    function pluralize(singular, count) {
-      var word = (count == 1 ? singular : singular + 's');
-
-      return '' + count + ' ' + word;
-    }
-
-    function specHref(result) {
-      return '?spec=' + encodeURIComponent(result.fullName);
-    }
-
-    function setMenuModeTo(mode) {
-      htmlReporterMain.setAttribute('class', 'jasmine_html-reporter ' + mode);
-    }
-
-    function noExpectations(result) {
-      return (result.failedExpectations.length + result.passedExpectations.length) === 0 &&
-        result.status === 'passed';
-    }
-  }
-
-  return HtmlReporter;
-};
-
-jasmineRequire.HtmlSpecFilter = function() {
-  function HtmlSpecFilter(options) {
-    var filterString = options && options.filterString() && options.filterString().replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
-    var filterPattern = new RegExp(filterString);
-
-    this.matches = function(specName) {
-      return filterPattern.test(specName);
-    };
-  }
-
-  return HtmlSpecFilter;
-};
-
-jasmineRequire.ResultsNode = function() {
-  function ResultsNode(result, type, parent) {
-    this.result = result;
-    this.type = type;
-    this.parent = parent;
-
-    this.children = [];
-
-    this.addChild = function(result, type) {
-      this.children.push(new ResultsNode(result, type, this));
-    };
-
-    this.last = function() {
-      return this.children[this.children.length - 1];
-    };
-  }
-
-  return ResultsNode;
-};
-
-jasmineRequire.QueryString = function() {
-  function QueryString(options) {
-
-    this.setParam = function(key, value) {
-      var paramMap = queryStringToParamMap();
-      paramMap[key] = value;
-      options.getWindowLocation().search = toQueryString(paramMap);
-    };
-
-    this.getParam = function(key) {
-      return queryStringToParamMap()[key];
-    };
-
-    return this;
-
-    function toQueryString(paramMap) {
-      var qStrPairs = [];
-      for (var prop in paramMap) {
-        qStrPairs.push(encodeURIComponent(prop) + '=' + encodeURIComponent(paramMap[prop]));
-      }
-      return '?' + qStrPairs.join('&');
-    }
-
-    function queryStringToParamMap() {
-      var paramStr = options.getWindowLocation().search.substring(1),
-        params = [],
-        paramMap = {};
-
-      if (paramStr.length > 0) {
-        params = paramStr.split('&');
-        for (var i = 0; i < params.length; i++) {
-          var p = params[i].split('=');
-          var value = decodeURIComponent(p[1]);
-          if (value === 'true' || value === 'false') {
-            value = JSON.parse(value);
-          }
-          paramMap[decodeURIComponent(p[0])] = value;
-        }
-      }
-
-      return paramMap;
-    }
-
-  }
-
-  return QueryString;
-};

tests/tests.html

@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <link rel="stylesheet" href="jasmine-2.1.3/jasmine.css"/>
-  </head>
-  <body>
-    <script src="tests.js"></script>
-  </body>
-</html>

tests/tests.js

@@ -1,26 +0,0 @@
-window.jasmineRequire = require('./jasmine-2.1.3/jasmine');
-require('./jasmine-2.1.3/jasmine-html');
-require('./jasmine-2.1.3/boot');
-var consoleReporter = require('./jasmine-2.1.3/console');
-var app = require('remote').require('app');
-
-jasmine.getEnv().addReporter(new consoleReporter.ConsoleReporter()({
-    showColors: true,
-    timer: new jasmine.Timer(),
-    verbose: true,
-    print: function() {
-      process.stdout.write.apply(process.stdout, arguments);
-    },
-    onComplete: function () {
-      app.quit();
-    }
-  }));
-
-var fs = require('fs');
-var tests = fs.readdirSync('./tests').filter(function (f) {
-  return f.indexOf('-' + process.env.TEST_TYPE) !== -1;
-});
-
-tests.forEach(function (t) {
-  require('./' + t);
-});