MVP Popup Notifications Working

I'm unsure which will be more performant: A notification using a trimmed down version of the UI, or using them both, letting the browser cache them both.

In any case, here I've modified the normal UI to recognize when it's a popup, and change the UX accordingly in a few ways:
 - Hide the menu bar
 - Hide the back button from the notifications view.
 - When confirming the last tx, close the window.

app/scripts/lib/extension-instance.js

@@ -45,7 +45,7 @@ function Extension () {
       if (browser[api]) {
         _this[api] = browser[api]
       }
-    }
+    } catch (e) {}
 
     try {
       _this.api = browser.extension[api]

app/scripts/lib/notifications.js

@@ -33,7 +33,8 @@ function createMsgNotification (state) {
 function showNotification() {
   extension.windows.create({
     url:"notification.html",
-    type:"panel",
+    type:"detached_panel",
+    focused:true,
     width:360,
     height:500,
   })

app/scripts/notification.js

@@ -1,85 +0,0 @@
-const url = require('url')
-const EventEmitter = require('events').EventEmitter
-const async = require('async')
-const Dnode = require('dnode')
-const Web3 = require('web3')
-const MetaMaskNotification = require('../../ui/notification')
-const MetaMaskUiCss = require('../../ui/css')
-const injectCss = require('inject-css')
-const PortStream = require('./lib/port-stream.js')
-const StreamProvider = require('web3-stream-provider')
-const setupMultiplex = require('./lib/stream-utils.js').setupMultiplex
-const extension = require('./lib/extension')
-
-// setup app
-var css = MetaMaskUiCss()
-injectCss(css)
-
-async.parallel({
-  currentDomain: getCurrentDomain,
-  accountManager: connectToAccountManager,
-}, setupApp)
-
-function connectToAccountManager (cb) {
-  // setup communication with background
-  var pluginPort = extension.runtime.connect({name: 'notification'})
-  var portStream = new PortStream(pluginPort)
-  // setup multiplexing
-  var mx = setupMultiplex(portStream)
-  // connect features
-  setupControllerConnection(mx.createStream('controller'), cb)
-  setupWeb3Connection(mx.createStream('provider'))
-}
-
-function setupWeb3Connection (stream) {
-  var remoteProvider = new StreamProvider()
-  remoteProvider.pipe(stream).pipe(remoteProvider)
-  stream.on('error', console.error.bind(console))
-  remoteProvider.on('error', console.error.bind(console))
-  global.web3 = new Web3(remoteProvider)
-}
-
-function setupControllerConnection (stream, cb) {
-  var eventEmitter = new EventEmitter()
-  var background = Dnode({
-    sendUpdate: function (state) {
-      eventEmitter.emit('update', state)
-    },
-  })
-  stream.pipe(background).pipe(stream)
-  background.once('remote', function (accountManager) {
-    // setup push events
-    accountManager.on = eventEmitter.on.bind(eventEmitter)
-    cb(null, accountManager)
-  })
-}
-
-function getCurrentDomain (cb) {
-  const unknown = '<unknown>'
-  if (!extension.tabs) return cb(null, unknown)
-  extension.tabs.query({active: true, currentWindow: true}, function (results) {
-    var activeTab = results[0]
-    var currentUrl = activeTab && activeTab.url
-    var currentDomain = url.parse(currentUrl).host
-    if (!currentUrl) {
-      return cb(null, unknown)
-    }
-    cb(null, currentDomain)
-  })
-}
-
-function setupApp (err, opts) {
-  if (err) {
-    alert(err.stack)
-    throw err
-  }
-
-  var container = document.getElementById('app-content')
-
-  MetaMaskNotification({
-    container: container,
-    accountManager: opts.accountManager,
-    currentDomain: opts.currentDomain,
-    networkVersion: opts.networkVersion,
-  })
-}

ui/app/app.js

@@ -95,6 +95,11 @@ App.prototype.render = function () {
 }
 
 App.prototype.renderAppBar = function () {
+
+  if (window.METAMASK_UI_TYPE === 'notification') {
+    return null
+  }
+
   const props = this.props
   const state = this.state || {}
   const isNetworkMenuOpen = state.isNetworkMenuOpen || false

ui/app/conf-tx.js

@@ -36,6 +36,7 @@ ConfirmTxScreen.prototype.render = function () {
   var unconfTxList = txHelper(unconfTxs, unconfMsgs)
   var index = state.index !== undefined ? state.index : 0
   var txData = unconfTxList[index] || {}
+  var isNotification = window.METAMASK_UI_TYPE === 'notification'
 
   return (
 
@@ -43,9 +44,9 @@ ConfirmTxScreen.prototype.render = function () {
 
       // subtitle and nav
       h('.section-title.flex-row.flex-center', [
-        h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
+        !isNotification ? h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
           onClick: this.goHome.bind(this),
-        }),
+        }) : null,
         h('h2.page-subtitle', 'Confirm Transaction'),
       ]),
 

ui/app/reducers/app.js

@@ -1,6 +1,7 @@
 const extend = require('xtend')
 const actions = require('../actions')
 const txHelper = require('../../lib/tx-helper')
+const extension = require('../../../app/scripts/lib/extension')
 
 module.exports = reduceApp
 
@@ -250,6 +251,17 @@ function reduceApp (state, action) {
           warning: null,
         })
       } else {
+
+        const isNotification = window.METAMASK_UI_TYPE === 'notification'
+        if (isNotification) {
+          return extension.windows.getCurrent({}, function(win) {
+						extension.windows.remove(win.id, function(err) {
+							if (err) console.err(err)
+						})
+					})
+        } else {
+          debugger
+        }
         return extend(appState, {
           transForward: false,
           warning: null,