Cypress: Switch to using more official browser brand icons

[jennifer-shehane]

Current behavior:

Currently we use font awesome 5 free brand icons for browsers.

Our dropdown

FA available icons

Desired behavior:

This choice of icons has some downsides:

1. No separate icon for 'Electron' - using Chrome for Electron browser is likely confusing.
2. No separate icon for Canary and Chromium, we just have to do static colors.
3. They don't look as nice as rasterized images would.
4. They don't keep up with browser branding changes as fast as we could.

Since browsers are a key part of our product, these should probably look nicer.

Versions

3.7.0

To contribute

• Tests for browser icon dropdown: https://github.com/cypress-io/cypress/blob/develop/packages/desktop-gui/cypress/integration/project_nav_spec.js#L120:L120
• Code for browser icon dropdown icons:
  
  
  
  • jsx: https://github.com/cypress-io/cypress/blob/develop/packages/desktop-gui/src/project-nav/browsers.jsx#L73:L73
  
  
  • browser model: https://github.com/cypress-io/cypress/blob/develop/packages/desktop-gui/src/lib/browser-model.js#L29:L29
  
  
  • helper utility (this is used for other parts of the desktop-gui, so should not be removed/changed) https://github.com/cypress-io/cypress/blob/develop/packages/desktop-gui/src/lib/utils.js#L28:L28
  
  
• Browser icons css: https://github.com/cypress-io/cypress/blob/develop/packages/desktop-gui/src/app/nav.scss#L172:L172

[hiramzamorano]

i'll take a look into this