tidy up. escape key. smoother animations

package.json

@@ -38,14 +38,10 @@
     "prettier": "^1.4.4"
   },
   "dependencies": {
-    "browser-logos": "github:alrra/browser-logos",
     "electron-compile": "^6.4.1",
     "jsonpath": "^0.2.11",
-    "minireset.css": "^0.0.3",
     "mousetrap": "^1.6.1",
-    "nslog": "^3.0.0",
     "opn": "^5.1.0",
-    "xml2js": "^0.4.17",
     "xml2json": "^0.11.0"
   },
   "config": {

src/index.html

@@ -15,12 +15,6 @@
 
   <ul id="browserList"></ul>
 
-  <!--<div class="wrapper">-->
-  <!-- <button id="firefox">Firefox</button>
-  <button id="chrome">Chrome</button>
-  <button id="safari">Safari</button> -->
-  <!--</div>-->
-
 </body>
 
 <script>

src/main.js

@@ -5,12 +5,6 @@ import parser from 'xml2json'
 
 import browsers from './browsers'
 
-// This allows for log messages to be sent to console.app
-// import nslog from 'nslog'
-//  e.g. nslog('message')
-
-const devMode = false
-
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
 let pickerWindow = null
@@ -66,7 +60,9 @@ function createPickerWindow(numberOfBrowsers, callback) {
     movable: false,
     show: false,
     title: 'Browserosaurus',
-    backgroundColor: '#111111'
+    // backgroundColor: '#111111',
+    transparent: true,
+    hasShadow: false
   })
 
   // and load the index.html of the app.
@@ -86,11 +82,10 @@ function createPickerWindow(numberOfBrowsers, callback) {
   tray.setToolTip('Browserosaurus')
   tray.setContextMenu(contextMenu)
 
-  if (!devMode) {
-    pickerWindow.on('blur', () => {
-      pickerWindow.hide()
-    })
-  }
+  pickerWindow.on('blur', () => {
+    pickerWindow.webContents.send('close', true)
+    setTimeout(() => pickerWindow.hide(), 300)
+  })
 
   if (callback) {
     callback()
@@ -101,6 +96,7 @@ const sendUrlToRenderer = url => {
   pickerWindow.webContents.send('incomingURL', url)
   pickerWindow.center() // moves window to current screen
   pickerWindow.show()
+  pickerWindow.webContents.send('open', true)
 }
 
 app.on('ready', () => {
@@ -113,9 +109,7 @@ app.on('ready', () => {
           sendUrlToRenderer(global.URLToOpen)
           global.URLToOpen = null
         }
-        if (devMode) {
-          pickerWindow.webContents.openDevTools({ mode: 'detach' })
-        }
+        // pickerWindow.webContents.openDevTools({ mode: 'detach' })
       })
     })
   })
@@ -134,6 +128,4 @@ app.on('open-url', (event, url) => {
 })
 
 // Prompt to set as default browser
-if (devMode) {
-  app.setAsDefaultProtocolClient('http')
-}
+// app.setAsDefaultProtocolClient('http')

src/main.scss

@@ -28,6 +28,16 @@ body {
 #browserList {
   margin: 0;
   padding: 0;
+  transition: all 200ms ease-in;
+  transform: scaleY(0);
+  transform-origin: center top;
+  opacity: 0;
+
+  .is-open & {
+    transition-timing-function: ease-out;
+    transform: scaleY(1);
+    opacity: 1;
+  }
 
    > li {
     display: flex;
@@ -37,28 +47,37 @@ body {
     transition: all 200ms linear;
     border-width: 0;
     outline: none;
-    background-color: transparent;
+    background-color: #111111;
 
     &:hover,
     &.active {
       color: #111111;
       background-color: white;
     }
   }
+}
 
-  .browserLogo {
-    display: block;
-    width: 32px;
-    height: 32px;
-    margin-right: 1rem;
-  }
+.browserLogo {
+  display: block;
+  width: 32px;
+  height: 32px;
+  margin-right: 1rem;
+  opacity: 0;
+}
 
-  .browserName {
-    margin-right: auto;
-  }
+.browserName {
+  margin-right: auto;
+  opacity: 0;
+}
 
-  .browserKey {
-    opacity: 0.3;
-    font-weight: bold;
-  }
+.browserKey {
+  opacity: 0.3;
+  opacity: 0;
+  font-weight: bold;
+}
+
+.is-open .browserLogo,
+.is-open .browserName,
+.is-open .browserKey {
+  opacity: 1;
 }

src/renderer.js

@@ -3,6 +3,15 @@ const opn = require('opn')
 const currentWindow = electron.remote.getCurrentWindow()
 const Mousetrap = require('mousetrap')
 let url = null
+const browserList = document.getElementById('browserList')
+
+const closeWindow = () => {
+  document.body.classList.remove('is-open')
+  setTimeout(() => {
+    currentWindow.hide()
+    url = null
+  }, 300)
+}
 
 // Listen for URL
 electron.ipcRenderer.on('incomingURL', (event, message) => {
@@ -11,12 +20,21 @@ electron.ipcRenderer.on('incomingURL', (event, message) => {
   url = message
 })
 
+electron.ipcRenderer.on('open', () => {
+  document.body.classList.add('is-open')
+})
+
+electron.ipcRenderer.on('close', () => {
+  closeWindow()
+})
+
+Mousetrap.bind('esc', () => {
+  closeWindow()
+})
+
 const openBrowser = appName =>
   opn(url, { app: appName, wait: false })
-    .then(() => {
-      currentWindow.hide()
-      url = null
-    })
+    .then(() => closeWindow())
     .catch(() =>
       alert(
         'Oh no! An error just occurred, please report this as a  GitHub issue. Opened URL was ' +
@@ -26,7 +44,6 @@ const openBrowser = appName =>
 
 // Listen for installedBrowsers
 electron.ipcRenderer.on('installedBrowsers', (event, installedBrowsers) => {
-  const browserList = document.getElementById('browserList')
   document.getElementById('loading').style.display = 'none'
   installedBrowsers
     .map(browser => {