Merge pull request #91 from tomitm/browser-list

Display browsers as list

src/component/main-content/browser.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const {string, func} = React.PropTypes;
+const {object, func} = React.PropTypes;
 
 export default class Browser extends React.Component {
 
@@ -12,30 +12,53 @@ export default class Browser extends React.Component {
   }
 
   _openBrowserFactory() {
-    const {openBrowser, browserName} = this.props;
-    return () => openBrowser(browserName, (disableReason) => {
+    const {openBrowser, browser} = this.props;
+    const launchOptions = {
+      browser: browser.name,
+      version: browser.version
+    };
+
+    return () => openBrowser(launchOptions, (disableReason) => {
       this.setState({disableReason});
     });
   }
 
+  _enhanceBrowserName(browser) {
+    if (browser.name === 'ie') {
+      return 'Internet Explorer';
+    } else if (browser.type === 'chrome' && /SxS/.test(browser.command)) {
+      return 'Chrome Canary';
+    } else if (browser.type === 'firefox' && /Developer Edition/i.test(browser.command)) {
+      return 'Firefox Developer Edition';
+    }
+    return browser.name;
+  }
+
   render() {
-    const {browserName} = this.props;
+    const {browser} = this.props;
     const {disableReason} = this.state;
-    let className = 'open-browser';
+    const browserName = this._enhanceBrowserName(browser);
+
     let title = browserName;
+    let className = 'open-browser';
 
     if (disableReason) {
       className += ' disabled';
       title = disableReason;
     }
 
-    const src = './images/' + browserName + '_128x128.png';
-    return <img className={className} src={src} alt={browserName}
-                title={title} onClick={this._openBrowserFactory()} />;
+    const src = `./images/${browser.type}_128x128.png`;
+    return <a className={className} onClick={this._openBrowserFactory()}>
+      <img className="browser-icon" src={src} alt={browserName} title={title} />
+      <div className="browser-info">
+        <div className="browser-name">{browserName}</div>
+        <div className="browser-version">{browser.version}</div>
+      </div>
+    </a>;
   }
 }
 
 Browser.propTypes = {
-  browserName: string.isRequired,
+  browser: object.isRequired,
   openBrowser: func.isRequired
 };

src/component/main-content/welcome.js

@@ -3,17 +3,31 @@ import Browser from './browser.js';
 
 const {array, func} = React.PropTypes;
 
+const byNameThenVersion = (a, b) => {
+  if (a.name < b.name) return -1;
+  if (a.name > b.name) return 1;
+
+  if (a.version < b.version) return -1;
+  if (a.version > b.version) return 1;
+
+  return 0;
+};
+
 const Welcome = (props) => {
   const {browsers, openBrowser} = props;
 
-  const browserElements = browsers.map((browser) => {
-    return <Browser browserName={browser.name} key={browser.name} openBrowser={openBrowser} />;
-  });
+  const browserElements = browsers
+    .sort(byNameThenVersion)
+    .map((browser, index) => {
+      return <Browser browser={browser} openBrowser={openBrowser} key={index} />;
+    });
 
-  return <div className="setup-instruction">
-    <h2>Proxy started on localhost:1338</h2>
-    <h3>Launch a browser, using James as a proxy</h3>
-    {browserElements}
+  return <div className="setup-instructions">
+    <div className="setup-instructions-wrapper">
+      <h2>Proxy started on localhost:1338</h2>
+      <h3>Launch a browser, using James as a proxy</h3>
+      <div className="browsers">{browserElements}</div>
+    </div>
   </div>;
 };
 

src/open-browser.js

@@ -1,16 +1,21 @@
 import browserLauncher from 'browser-launcher2';
 
-export default function openBrowser(browser = 'firefox', failCb) {
-  const opts = {
-    browser: browser,
-    proxy: 'localhost:1338'
+const defaultOptions = {
+  browser: 'firefox',
+  proxy: 'localhost:1338'
+};
+
+export default function openBrowser(options, failCb) {
+  const launchOptions = {
+    ...defaultOptions,
+    ...options
   };
 
   browserLauncher(function(err, launch) {
     if (err) {
       failCb(err);
     }
-    launch('http://www.uxebu.com/', opts, function(launchErr) {
+    launch('http://www.uxebu.com/', launchOptions, function(launchErr) {
       if (launchErr) {
         failCb(launchErr);
       }

style/components/_titlebar.scss

@@ -1,6 +1,6 @@
 .titlebar {
   @extend .z-depth-2;
-  
+
   -webkit-app-region: drag;
   position: absolute;
   left: 0;
@@ -9,6 +9,7 @@
   height: 50px;
   background-color: $darkgray-dark;
   padding: 6px;
+  z-index: 1;
 
   .logo {
     width: 38px;

style/components/main-content.scss

@@ -28,7 +28,16 @@
     margin-top: 0;
   }
 
-  .setup-instruction {
+  .setup-instructions {
+    overflow-y: scroll;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  .setup-instructions-wrapper {
     text-align: center;
     width: 400px;
     margin: 5% auto;
@@ -47,4 +56,41 @@
       margin: 0;
     }
   }
+
+  .browsers {
+    text-align: left;
+    margin-top: 15px;
+
+    .open-browser {
+      background-color: $lightgray-dark;
+      border: 1px solid $mediumgray-light;
+      width: 100%;
+      padding: 5px 15px;
+
+      &:hover {
+        background-color: $mediumgray-light;
+      }
+      &:first-child {
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
+      }
+      &:last-child {
+        border-bottom-left-radius: 5px;
+        border-bottom-right-radius: 5px;
+      }
+    }
+    .browser-icon {
+      width: 32px;
+      height: 32px;
+    }
+    .browser-info {
+      display: inline-block;
+      margin-left: 15px;
+    }
+    .browser-name {
+      font-size: 16px;
+      font-weight: bold;
+      text-transform: capitalize;
+    }
+  }
 }