feat: update icons with new design (#20338)

Co-authored-by: Lachlan Miller <lachlan.miller.1990@outlook.com> Co-authored-by: Zachary Williams <ZachJW34@gmail.com>
cypress-io · Feb 28, 2022 · 9f624b4 · 9f624b4 · cypress-bot · Feb 28, 2022
1 parent 031e66d
commit 9f624b4
Show file tree

Hide file tree

Showing 48 changed files with 357 additions and 53 deletions.
diff --git a/packages/app/index.html b/packages/app/index.html
@@ -3,9 +3,9 @@
 
 <head>
   <meta charset="utf-8" />
-  <link href="/__cypress/assets/favicon.png" rel="icon">
+  <link href="/__cypress/assets/favicon.png?v2" rel="icon">
   <title>Cypress</title>
-  <link href="/__cypress/runner/favicon.ico" rel="icon">
+  <link href="/__cypress/runner/favicon.ico?v2" rel="icon">
 </head>
 
 <body>

diff --git a/packages/data-context/package.json b/packages/data-context/package.json
@@ -9,7 +9,7 @@
     "check-ts": "tsc --noEmit && yarn -s tslint",
     "clean-deps": "rimraf node_modules",
     "tslint": "tslint --config ../ts/tslint.json --project .",
-    "clean": "rimraf './{src,test}/**/*.js'",
+    "clean": "rimraf './{src,test}/**/*(!.stories).js'",
     "test": "yarn test-unit",
     "test-unit": "mocha -r @packages/ts/register --config ./test/.mocharc.js"
   },

diff --git a/packages/electron/lib/install.js b/packages/electron/lib/install.js
@@ -2,13 +2,11 @@
 const _ = require('lodash')
 const os = require('os')
 const path = require('path')
-const Promise = require('bluebird')
 const pkg = require('../package.json')
 const paths = require('./paths')
 const log = require('debug')('cypress:electron')
-let fs = require('fs-extra')
-
-fs = Promise.promisifyAll(fs)
+const fs = require('fs-extra')
+const crypto = require('crypto')
 
 let electronVersion
 
@@ -25,44 +23,65 @@ module.exports = {
   // returns icons package so that the caller code can find
   // paths to the icons without hard-coding them
   icons () {
-    return require('@cypress/icons')
+    return require('@packages/icons')
   },
 
   checkCurrentVersion () {
     const pathToVersion = paths.getPathToVersion()
 
     // read in the version file
-    return fs.readFileAsync(pathToVersion, 'utf8')
+    return fs.readFile(pathToVersion, 'utf8')
     .then((str) => {
       const version = str.replace('v', '')
 
       // and if it doesn't match the electron version
       // throw an error
       if (version !== electronVersion) {
         throw new Error(`Currently installed version: '${version}' does not match electronVersion: '${electronVersion}`)
-      } else {
-        return process.exit()
+      }
+    })
+  },
+
+  getFileHash (filePath) {
+    return fs.readFile(filePath).then((buf) => {
+      const hashSum = crypto.createHash('sha1')
+
+      hashSum.update(buf)
+      const hash = hashSum.digest('hex')
+
+      return hash
+    })
+  },
+
+  checkIconVersion () {
+    const mainIconsPath = this.icons().getPathToIcon('cypress.icns')
+    const cachedIconsPath = path.join(__dirname, '../dist/Cypress/Cypress.app/Contents/Resources/electron.icns')
+
+    return Promise.all([this.getFileHash(mainIconsPath), this.getFileHash(cachedIconsPath)])
+    .then(([mainHash, cachedHash]) => {
+      if (mainHash !== cachedHash) {
+        throw new Error('Icon mismatch')
       }
     })
   },
 
   checkExecExistence () {
-    return fs.statAsync(paths.getPathToExec())
+    return fs.stat(paths.getPathToExec())
   },
 
   move (src, dest) {
     // src  is ./tmp/Cypress-darwin-x64
     // dest is ./dist/Cypress
-    return fs.moveAsync(src, dest, { overwrite: true })
+    return fs.move(src, dest, { overwrite: true })
     .then(() => {
       // remove the tmp folder now
-      return fs.removeAsync(path.dirname(src))
+      return fs.remove(path.dirname(src))
     })
   },
 
   removeEmptyApp () {
     // nuke the temporary blank /app
-    return fs.removeAsync(paths.getPathToResources('app'))
+    return fs.remove(paths.getPathToResources('app'))
   },
 
   packageAndExit () {
@@ -76,7 +95,7 @@ module.exports = {
 
   package (options = {}) {
     const pkgr = require('electron-packager')
-    const icons = require('@cypress/icons')
+    const icons = require('@packages/icons')
 
     const iconPath = icons.getPathToIcon('cypress')
 
@@ -117,15 +136,23 @@ module.exports = {
   },
 
   ensure () {
-    return Promise.join(
+    return Promise.all([
+      // check the version of electron and re-build if updated
       this.checkCurrentVersion(),
+      // check if the dist folder exist and re-build if not
       this.checkExecExistence(),
-    )
+      // Compare the icon in dist with the one in the icons
+      // package. If different, force the re-build.
+      this.checkIconVersion(),
+    ])
+
+    // if all is good, then return without packaging a new electron app
   },
 
   check () {
     return this.ensure()
-    .bind(this)
-    .catch(this.packageAndExit)
+    .catch(() => {
+      this.packageAndExit()
+    })
   },
 }
diff --git a/packages/electron/package.json b/packages/electron/package.json
@@ -15,7 +15,7 @@
     "test-watch": "yarn test-unit --watch"
   },
   "dependencies": {
-    "@cypress/icons": "0.7.0",
+    "@packages/icons": "0.0.0-development",
     "bluebird": "3.5.3",
     "debug": "^4.3.2",
     "fs-extra": "9.1.0",

diff --git a/packages/extension/gulpfile.ts b/packages/extension/gulpfile.ts
@@ -1,7 +1,7 @@
 import gulp from 'gulp'
 import rimraf from 'rimraf'
 import webpack from 'webpack'
-import cypressIcons from '@cypress/icons'
+import * as cypressIcons from '@packages/icons'
 import webpackConfig from './webpack.config.js'
 
 const clean = (done) => {

diff --git a/packages/extension/package.json b/packages/extension/package.json
@@ -20,7 +20,7 @@
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@cypress/icons": "0.7.0",
+    "@packages/icons": "0.0.0-development",
     "@packages/socket": "0.0.0-development",
     "chai": "3.5.0",
     "coffeescript": "1.12.7",

diff --git a/packages/icons/assets/cypress.iconset/icon_128x128.png b/packages/icons/assets/cypress.iconset/icon_128x128.png
diff --git a/packages/icons/assets/cypress.iconset/icon_128x128@2x.png b/packages/icons/assets/cypress.iconset/icon_128x128@2x.png
diff --git a/packages/icons/assets/cypress.iconset/icon_16x16.png b/packages/icons/assets/cypress.iconset/icon_16x16.png
diff --git a/packages/icons/assets/cypress.iconset/icon_16x16@2x.png b/packages/icons/assets/cypress.iconset/icon_16x16@2x.png
diff --git a/packages/icons/assets/cypress.iconset/icon_256x256.png b/packages/icons/assets/cypress.iconset/icon_256x256.png
diff --git a/packages/icons/assets/cypress.iconset/icon_256x256@2x.png b/packages/icons/assets/cypress.iconset/icon_256x256@2x.png
diff --git a/packages/icons/assets/cypress.iconset/icon_32x32.png b/packages/icons/assets/cypress.iconset/icon_32x32.png
diff --git a/packages/icons/assets/cypress.iconset/icon_32x32@2x.png b/packages/icons/assets/cypress.iconset/icon_32x32@2x.png
diff --git a/packages/icons/assets/cypress.iconset/icon_512x512.png b/packages/icons/assets/cypress.iconset/icon_512x512.png
diff --git a/packages/icons/assets/cypress.iconset/icon_512x512@2x.png b/packages/icons/assets/cypress.iconset/icon_512x512@2x.png
diff --git a/packages/icons/assets/favicon/favicon.ico b/packages/icons/assets/favicon/favicon.ico
diff --git a/packages/icons/assets/icons/icon_128x128.png b/packages/icons/assets/icons/icon_128x128.png
diff --git a/packages/icons/assets/icons/icon_16x16.png b/packages/icons/assets/icons/icon_16x16.png
diff --git a/packages/icons/assets/icons/icon_19x19.png b/packages/icons/assets/icons/icon_19x19.png
diff --git a/packages/icons/assets/icons/icon_24x24.png b/packages/icons/assets/icons/icon_24x24.png
diff --git a/packages/icons/assets/icons/icon_256x256.png b/packages/icons/assets/icons/icon_256x256.png
diff --git a/packages/icons/assets/icons/icon_32x32.png b/packages/icons/assets/icons/icon_32x32.png
diff --git a/packages/icons/assets/icons/icon_38x38.png b/packages/icons/assets/icons/icon_38x38.png
diff --git a/packages/icons/assets/icons/icon_48x48.png b/packages/icons/assets/icons/icon_48x48.png
diff --git a/packages/icons/assets/icons/icon_48x48@2x.png b/packages/icons/assets/icons/icon_48x48@2x.png
diff --git a/packages/icons/assets/icons/icon_64x64.png b/packages/icons/assets/icons/icon_64x64.png
diff --git a/packages/icons/assets/logo/cypress-bw.png b/packages/icons/assets/logo/cypress-bw.png
diff --git a/packages/icons/index.d.ts b/packages/icons/index.d.ts
@@ -0,0 +1 @@
+export * from './dist/icons'
diff --git a/packages/icons/index.js b/packages/icons/index.js
@@ -0,0 +1 @@
+module.exports = require('./dist/icons')
diff --git a/packages/icons/package.json b/packages/icons/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "@packages/icons",
+  "version": "0.0.0-development",
+  "description": "Cypress Icons",
+  "main": "index.js",
+  "scripts": {
+    "build": "scripts/build.sh",
+    "postbuild": "ts-node ./src/ico.ts",
+    "test": "NODE_ENV=test mocha",
+    "test-watch": "NODE_ENV=test mocha --watch",
+    "prepublish": "npm run build",
+    "release": "releaser"
+  },
+  "devDependencies": {
+    "@types/mocha": "^8.0.3",
+    "@types/to-ico": "^1.1.1",
+    "chai": "^4.2.0",
+    "mocha": "^8.1.3",
+    "to-ico": "^1.1.5"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cypress-io/cypress-icons.git"
+  },
+  "homepage": "https://github.com/cypress-io/cypress-icons#readme",
+  "author": "Brian Mann",
+  "bugs": {
+    "url": "https://github.com/cypress-io/cypress-icons/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/icons/readme.md b/packages/icons/readme.md
@@ -0,0 +1,43 @@
+# Cypress Icons
+
+The latest versions of the icons.
+The public API will always reference these files.
+
+`./dist` is not checked into source control.
+
+## API
+
+```js
+const icons = require("@cypress/icons")
+
+// get the absolute path to default favicon
+icons.getPathToFavicon("favicon-blue.ico")
+// => /Users/.../dist/favicon/favicon-blue.ico
+
+// get the absolute path to icon
+icons.getPathToIcon("icon_32x32@2x.png")
+// => /Users/.../dist/icons/icon_32x32@2x.png
+```
+
+## Architecture detail
+
+To build the MacOS icons you have to use the `iconutil` command line tool installed.
+This command line tool is only installed on MacOS.
+
+If you are not on MacOS, the building of this icon will simply be skipped.
+If you are not on MacOS, the building of this icon will be skipped instead of erroring. 
+
+## Developing
+
+All the icons are in the assets directory.
+
+```bash
+## run build to dump to ./dist
+yarn build
+```
+
+## Testing
+
+```bash
+yarn test
+```
diff --git a/packages/icons/scripts/build.sh b/packages/icons/scripts/build.sh
@@ -0,0 +1,10 @@
+#!/bin/bash
+set -e
+rm -rf dist && mkdir dist && mkdir dist/icons
+yarn tsc -p ./tsconfig.build.json
+if [[ "$OSTYPE" == "darwin"* ]]; then
+  iconutil -c icns assets/cypress.iconset -o dist/icons/cypress.icns
+fi
+cp -r assets/* dist
+mv dist/cypress.iconset/* dist/icons
+rm -r dist/cypress.iconset
diff --git a/packages/icons/src/ico.ts b/packages/icons/src/ico.ts
@@ -0,0 +1,16 @@
+import fs from 'fs'
+import toIco from 'to-ico'
+
+const files = [
+  fs.readFileSync('./assets/icons/icon_16x16.png'),
+  fs.readFileSync('./assets/icons/icon_24x24.png'),
+  fs.readFileSync('./assets/icons/icon_32x32.png'),
+  fs.readFileSync('./assets/icons/icon_48x48.png'),
+  fs.readFileSync('./assets/icons/icon_64x64.png'),
+  fs.readFileSync('./assets/icons/icon_128x128.png'),
+  fs.readFileSync('./assets/icons/icon_256x256.png'),
+]
+
+toIco(files).then((buf) => {
+  fs.writeFileSync('./dist/icons/cypress.ico', buf)
+})
diff --git a/packages/icons/src/icons.ts b/packages/icons/src/icons.ts
@@ -0,0 +1,19 @@
+import path from 'path'
+
+const dist = [__dirname, '..', 'dist']
+
+function distPath (...args: string[]) {
+  return path.join.apply(path, dist.concat([...args]))
+}
+
+export const getPathToFavicon = (filename: string) => {
+  return distPath('favicon', filename)
+}
+
+export const getPathToIcon = (filename: string) => {
+  return distPath('icons', filename)
+}
+
+export const getPathToLogo = (filename: string) => {
+  return distPath('logo', filename)
+}
diff --git a/packages/icons/test/icons_spec.ts b/packages/icons/test/icons_spec.ts
@@ -0,0 +1,18 @@
+import { expect } from 'chai'
+import * as icons from '../src/icons'
+
+const cwd = process.cwd()
+
+describe('Cypress Icons', function () {
+  it('returns path to favicon', function () {
+    expect(icons.getPathToFavicon('favicon-red.ico')).to.eq(`${cwd }/dist/favicon/favicon-red.ico`)
+  })
+
+  it('returns path to icon', function () {
+    expect(icons.getPathToIcon('cypress.icns')).to.eq(`${cwd }/dist/icons/cypress.icns`)
+  })
+
+  it('returns path to logo', function () {
+    expect(icons.getPathToLogo('cypress-bw.png')).to.eq(`${cwd }/dist/logo/cypress-bw.png`)
+  })
+})
diff --git a/packages/icons/tsconfig.build.json b/packages/icons/tsconfig.build.json
@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "files": [
+    "./src/icons.ts"
+  ]
+}
diff --git a/packages/icons/tsconfig.json b/packages/icons/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "extends": "../ts/tsconfig.json",
+  "compilerOptions": {
+    "strict": true,
+    "allowJs": false,
+    "noImplicitAny": true,
+    "noUnusedLocals": false,
+    "resolveJsonModule": true,
+    "experimentalDecorators": true,
+    "noUncheckedIndexedAccess": true,
+    "importsNotUsedAsValues": "error",
+    "outDir": "dist",
+    "declaration": true
+  },
+}
diff --git a/packages/runner-ct/static/index.html b/packages/runner-ct/static/index.html
@@ -7,7 +7,7 @@
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>{{projectName}}</title>
 
-      <link href="/{{namespace}}/runner/favicon.ico" rel="icon">
+      <link href="/{{namespace}}/runner/favicon.ico?v2" rel="icon">
 
       <link rel="stylesheet" href="/{{namespace}}/runner/cypress_runner.css">
   </head>

diff --git a/packages/runner-ct/webpack.config.ts b/packages/runner-ct/webpack.config.ts
@@ -4,7 +4,7 @@ import _ from 'lodash'
 import path from 'path'
 import type webpack from 'webpack'
 import { getCommonConfig, HtmlWebpackPlugin, getCopyWebpackPlugin } from '@packages/web-config/webpack.config.base'
-import cyIcons from '@cypress/icons'
+import * as cyIcons from '@packages/icons'
 
 const commonConfig = getCommonConfig()
 const CopyWebpackPlugin = getCopyWebpackPlugin()

diff --git a/packages/runner/package.json b/packages/runner/package.json
@@ -21,13 +21,13 @@
   },
   "devDependencies": {
     "@cypress/design-system": "0.0.0-development",
-    "@cypress/icons": "0.7.0",
     "@cypress/react-tooltip": "0.5.3",
     "@cypress/webpack-preprocessor": "0.0.0-development",
     "@fontsource/mulish": "4.3.0",
     "@fontsource/open-sans": "4.3.0",
     "@fortawesome/fontawesome-free": "5.12.1",
     "@packages/driver": "0.0.0-development",
+    "@packages/icons": "0.0.0-development",
     "@packages/reporter": "0.0.0-development",
     "@packages/socket": "0.0.0-development",
     "@packages/web-config": "0.0.0-development",

diff --git a/packages/runner/static/index.html b/packages/runner/static/index.html
@@ -5,7 +5,7 @@
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>{{projectName}}</title>
 
-      <link href="/{{namespace}}/runner/favicon.ico" rel="icon">
+      <link href="/{{namespace}}/runner/favicon.ico?v2" rel="icon">
 
       <link rel="stylesheet" href="/{{namespace}}/runner/cypress_runner.css">
   </head>