Merge branch 'develop' into v4.0-release

packages/desktop-gui/cypress/fixtures/config.json

@@ -7,25 +7,41 @@
       "name": "chrome",
       "displayName": "Chrome",
       "family": "chrome",
-      "version": "50.0.2661.86",
+      "version": "78.0.3904.108",
       "path": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
-      "majorVersion": "50"
+      "majorVersion": "78"
     },
     {
       "name": "chromium",
       "displayName": "Chromium",
       "family": "chrome",
-      "version": "49.0.2609.0",
-      "path": "/Users/bmann/Downloads/chrome-mac/Chromium.app/Contents/MacOS/Chromium",
-      "majorVersion": "49"
+      "version": "74.0.3729.0",
+      "path": "/Applications/Chromium.app/Contents/MacOS/Chromium",
+      "majorVersion": "74"
     },
     {
       "name": "canary",
       "displayName": "Canary",
       "family": "chrome",
-      "version": "48.0",
-      "path": "/Users/bmann/Downloads/chrome-mac/Canary.app/Contents/MacOS/Canary",
-      "majorVersion": "48"
+      "version": "80.0.3977.4",
+      "path": "/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary",
+      "majorVersion": "80"
+    },
+    {
+      "name": "electron",
+      "displayName": "Electron",
+      "family": "electron",
+      "version": "73.0.3683.121",
+      "path": "",
+      "majorVersion": "73"
+    },
+    {
+      "name": "firefox",
+      "displayName": "Firefox",
+      "family": "firefox",
+      "version": "69.0.1",
+      "path": "/Applications/Firefox/Contents/MacOS/Firefox",
+      "majorVersion": "69"
     }
   ],
   "clientRoute": "/__/",

packages/desktop-gui/cypress/integration/project_nav_spec.js

@@ -102,13 +102,39 @@ describe('Project Nav', function () {
       })
 
       context('normal browser list behavior', function () {
-        it('lists browsers', () => {
+        it('lists browsers', function () {
           cy.get('.browsers-list').parent()
           .find('.dropdown-menu').first()
-          .find('li').should('have.length', 2)
-          .should(function ($li) {
-            expect($li.first()).to.contain('Chromium')
-            expect($li.last()).to.contain('Canary')
+          // one is showing in the selection, so won't be in the list
+          .find('li').should('have.length', this.config.browsers.length - 1)
+          .each(function ($li, i) {
+            const dropdownBrowsers = Cypress._.filter(this.config.browsers, (b) => {
+              // Chrome is shown in selection, so skip it
+              return b.displayName !== 'Chrome'
+            })
+
+            expect($li).to.contain(dropdownBrowsers[i].displayName)
+          })
+        })
+
+        it('displays browsers icons', function () {
+          cy.get('.browsers-list').parent()
+          .find('.dropdown-menu').first()
+          // one is showing in the selection, so won't be in the list
+          .find('.browser-icon')
+          .each(function ($i, i) {
+            const dropdownBrowsers = Cypress._.filter(this.config.browsers, (b) => {
+              // Chrome is shown in selection, so skip it
+              return b.displayName !== 'Chrome'
+            })
+
+            let family = dropdownBrowsers[i].family
+
+            family = family === 'electron' ? 'chrome' : family
+
+            // first one is shown in selection, so skip first
+            cy.wrap($i).should('have.class',
+              `fa-${family}`)
           })
         })
 
@@ -145,13 +171,16 @@ describe('Project Nav', function () {
           cy.get('.browsers-list>a').first().contains('Chromium')
         })
 
-        it('swaps the chosen browser into the dropdown', () => {
+        it('swaps the chosen browser into the dropdown', function () {
           cy.get('.browsers-list').find('.dropdown-menu')
-          .find('li').should('have.length', 2)
-          .should(function ($li) {
-            expect($li.first()).to.contain('Chrome')
-
-            expect($li.last()).to.contain('Canary')
+          .find('li').should('have.length', this.config.browsers.length - 1)
+          .each(function ($li, i) {
+            const dropdownBrowsers = Cypress._.filter(this.config.browsers, (b) => {
+              // Chrome is shown in selection, so skip it
+              return b.displayName !== 'Chromium'
+            })
+
+            expect($li).to.contain(dropdownBrowsers[i].displayName)
           })
         })
 
@@ -343,28 +372,33 @@ describe('Project Nav', function () {
     describe('custom browser available', function () {
       beforeEach(function () {
         this.config.browsers.push({
-          name: 'chromium',
-          family: 'chrome',
+          name: 'foo browser',
+          family: 'foo',
           custom: true,
-          displayName: 'Custom Chromium',
+          displayName: 'Custom Foo',
           version: '72.0.3626.96',
           majorVersion: '72',
-          path: '/usr/bin/chromium-x',
-          info: 'Loaded from /usr/bin/chromium-x',
+          path: '/usr/bin/foo-x',
+          info: 'Loaded from /usr/bin/foo-x',
         })
 
         this.openProject.resolve(this.config)
       })
 
+      it('displays generic icon', () => {
+        cy.get('.browsers-list>a').first()
+        .should('contain', 'Custom Foo')
+      })
+
       it('pre-selects the custom browser', () => {
         cy.get('.browsers-list>a').first()
-        .should('contain', 'Custom Chromium')
+        .should('contain', 'Custom Foo')
       })
 
       it('pre-selects the custom browser if chosenBrowser saved locally', function () {
         localStorage.setItem('chosenBrowser', 'electron')
         cy.get('.browsers-list>a').first()
-        .should('contain', 'Custom Chromium')
+        .should('contain', 'Custom Foo')
 
         cy.wrap(localStorage.getItem('chosenBrowser')).should('equal', 'electron')
       })

packages/desktop-gui/src/app/nav.scss

@@ -82,14 +82,16 @@
   .browsers.nav {
     i {
       font-size: 13px;
+
+      &.fa-firefox {
+        font-size: 14px;
+      }
     }
   }
 }
 
 
-.navbar-right {
-  margin-right: 0;
-
+.nav {
   .user-avatar {
     position: relative;
     top: -1px;
@@ -167,10 +169,26 @@
     display: inline-block;
   }
 
-  .chrome > i { color: #1aa15f; }
-  .canary > i { color: #e4b721; }
-  .chromium > i { color: #829ac3; }
-  .electron > i { color: #777; }
+  .browser-icon { 
+    color: #4573d9; 
+  }
+
+  .chrome > .browser-icon { 
+    color: #1da261; 
+  }
+  .canary > .browser-icon { 
+    color: #f29b14; 
+  }
+  .chromium > .browser-icon { 
+    color: #4573d9; 
+  }
+  .electron > .browser-icon { 
+    color: #2b2e3a; 
+  }
+  .firefox > .browser-icon { 
+    color: #ff720d; 
+  }
+
 
   .dropdown-menu {
     left: auto;

packages/desktop-gui/src/lib/browser-model.js

@@ -1,4 +1,5 @@
 import { computed, observable } from 'mobx'
+import { browserIcon } from '../lib/utils'
 
 export default class Browser {
   @observable displayName
@@ -25,6 +26,6 @@ export default class Browser {
   }
 
   @computed get icon () {
-    return 'chrome'
+    return browserIcon(this.family)
   }
 }

packages/desktop-gui/src/lib/utils.js

@@ -12,7 +12,7 @@ const osIconLookup = {
 
 const browserIconLookup = {
   chrome: 'chrome',
-  Electron: 'chrome',
+  electron: 'chrome',
   firefox: 'firefox',
   safari: 'safari',
 }
@@ -28,7 +28,7 @@ export const osIcon = (osName) => {
 export const browserIcon = (browserName) => {
   if (!browserName) return ''
 
-  return browserIconLookup[browserName] || 'globe'
+  return browserIconLookup[_.lowerCase(browserName)] || 'globe'
 }
 
 export const browserNameFormatted = (browserName) => {

packages/desktop-gui/src/project-nav/browsers.jsx

@@ -70,7 +70,7 @@ export default class Browsers extends Component {
 
     return (
       <span className={browser.name}>
-        <i className={icon}></i>{' '}
+        <i className={`browser-icon ${icon}`}></i>{' '}
         {prefixText}{' '}
         {browser.displayName}{' '}
         {browser.majorVersion}