Add browser icons. Currently requires stf-browser-db to be npm linked to work.

lib/middleware/browsericons.js

@@ -0,0 +1,8 @@
+var express = require('express')
+
+var pathutil = require('../util/pathutil')
+
+module.exports = function(options) {
+  return express.static(
+    pathutil.root('node_modules/stf-browser-db/dist'))
+}

lib/middleware/deviceicons.js

@@ -0,0 +1,8 @@
+var express = require('express')
+
+var pathutil = require('../util/pathutil')
+
+module.exports = function(options) {
+  return express.static(
+    pathutil.root('node_modules/stf-devices-db/data/small'))
+}

lib/roles/app.js

@@ -22,6 +22,8 @@ var datautil = require('../util/datautil')
 
 var auth = require('../middleware/auth')
 var webpack = require('../middleware/webpack')
+var deviceIconMiddleware = require('../middleware/deviceicons')
+var browserIconMiddleware = require('../middleware/browsericons')
 
 module.exports = function(options) {
   var log = logger.createLogger('app')
@@ -55,7 +57,8 @@ module.exports = function(options) {
   app.use('/static/bower_components',
     express.static(pathutil.resource('bower_components')))
   app.use('/static/data', express.static(pathutil.resource('data')))
-  app.use('/static/devices', datautil.middleware())
+  app.use('/static/browsers', browserIconMiddleware())
+  app.use('/static/devices', deviceIconMiddleware())
   app.use('/static', express.static(pathutil.resource('app')))
 
   app.use(express.favicon(pathutil.resource(
@@ -347,10 +350,10 @@ module.exports = function(options) {
       .on(wire.DeviceBrowserMessage, function(channel, message) {
         var serial = message.serial
         delete message.serial
-        socket.emit('device.change', {
+        socket.emit('device.change', datautil.applyBrowsers({
           serial: serial
         , browser: message
-        })
+        }))
       })
       .on(wire.ConnectivityEvent, function(channel, message) {
         var serial = message.serial

lib/roles/device/plugins/browser.js

@@ -1,24 +1,21 @@
 var syrup = require('syrup')
 
+var browsers = require('stf-browser-db')
+
 var logger = require('../../../util/logger')
 var wire = require('../../../wire')
 var wireutil = require('../../../wire/util')
 
-var mapping = {
-  'com.android.chrome': 'chrome'
-, 'com.chrome.beta': 'chrome-beta'
-, 'com.sec.android.app.sbrowser': 'samsung-chrome'
-, 'com.android.browser': 'android'
-, 'org.mozilla.firefox': 'firefox'
-, 'org.mozilla.firefox_beta': 'firefox-beta'
-, 'com.opera.browser': 'opera'
-, 'com.opera.mini.android': 'opera-mini'
-, 'com.opera.browser.beta': 'opera-beta'
-, 'com.UCMobile.intl': 'uc'
-, 'com.explore.web.browser': 'lightning'
-, 'com.baidu.browser.inter': 'baidu'
-, 'com.tencent.ibibo.mtt': 'one'
-}
+var mapping = (function() {
+  var list = Object.create(null)
+  Object.keys(browsers).forEach(function(id) {
+    var browser = browsers[id]
+    if (browser.platforms.android) {
+      list[browser.platforms.android.package] = id
+    }
+  })
+  return list
+})()
 
 module.exports = syrup.serial()
   .dependency(require('../support/router'))
@@ -33,11 +30,17 @@ module.exports = syrup.serial()
     }
 
     function processApp(app) {
+      var packageName = pkg(app.component)
+      var browserId = mapping[packageName]
+
+      if (!browserId) {
+        throw new Error(util.format('Unmapped browser "%s"', packageName))
+      }
+
       return {
         id: app.component
-      , type: mapping[pkg(app.component)] ||
-          app.name.toLowerCase().replace(/\s+/g, '-')
-      , name: app.name
+      , type: browserId
+      , name: browsers[browserId].name
       , selected: app.selected
       , system: app.system
       }

lib/util/datautil.js

@@ -1,4 +1,5 @@
 var deviceData = require('stf-devices-db')
+var browserData = require('stf-browser-db')
 var express = require('express')
 
 var pathutil = require('./pathutil')
@@ -53,6 +54,18 @@ datautil.applyData = function(device) {
   return device
 }
 
+datautil.applyBrowsers = function(device) {
+  if (device.browser) {
+    device.browser.apps.forEach(function(app) {
+      var data = browserData[app.type]
+      if (data) {
+        app.developer = data.developer
+      }
+    })
+  }
+  return device
+}
+
 datautil.applyOwner = function(device, user) {
   device.using = !!device.owner && device.owner.email === user.email
   return device
@@ -60,12 +73,9 @@ datautil.applyOwner = function(device, user) {
 
 datautil.normalize = function(device, user) {
   datautil.applyData(device)
+  datautil.applyBrowsers(device)
   datautil.applyOwner(device, user)
   if (!device.present) {
     device.owner = null
   }
 }
-
-datautil.middleware = function() {
-  return express.static(pathutil.root('node_modules/stf-devices-db/data/small'))
-}

lib/util/pathutil.js

@@ -14,3 +14,8 @@ module.exports.resource = function(target) {
 module.exports.vendor = function(target) {
   return path.resolve(__dirname, '../../vendor', target)
 }
+
+// Export
+module.exports.module = function(target) {
+  return path.resolve(__dirname, '../../node_modules', target)
+}

res/app/control-panes/dashboard/navigation/navigation.jade

@@ -26,15 +26,15 @@
             li
               a(ng-click='clearHistory()', type='button', translate).btn-link Clear
 
-    .btn-group
+    .btn-group(ng-if='$root.browser')
       button.btn.btn-smx.btn-default-outline.dropdown-toggle
-        //img(ng-src='/img/platforms/{{$root.browser}}.png').browser-icon
+        img(ng-src='/static/browsers/icon/16x16/{{$root.browser.type}}.png').browser-icon
         //| {{$root.browser | browserName}}
-        span(ng-show='$root.browser') {{$root.browser.name}} ({{$root.browser.type}})
+        span(ng-show='$root.browser') {{$root.browser.name}} ({{$root.browser.developer}})
         span.caret(ng-show='device.browser.apps.length > 1')
       ul.dropdown-menu(ng-show='device.browser.apps.length > 1')
         li(ng-repeat='b in device.browser.apps')
           a(ng-click='$root.browser = b').pointer
-            span {{b.name}} ({{b.type}})
-            //img(ng-src='/img/platforms/{{b}}.png').browser-icon.pointer
-            //| {{ b | browserName }}
+            img(ng-src='/static/browsers/icon/16x16/{{b.type}}.png').browser-icon.pointer
+            span {{b.name}} ({{b.developer}})
+            //| {{ b | browserName }}