Build system refactor

.circleci/scripts/create-sesify-viz

@@ -9,5 +9,5 @@ set -o pipefail
 mkdir -p ./build-artifacts/deps-viz/
 
 # generate viz
-SESIFY_AUTOGEN=1 npx gulp build:extension:js:background
+SESIFY_AUTOGEN=1 yarn build scripts:core:prod:background
 npx sesify-viz --deps sesify/deps-background.json --config sesify/background.json --dest ./build-artifacts/deps-viz/background

app/manifest.json → app/manifest/_base.json

@@ -24,16 +24,9 @@
     "128": "images/icon-128.png",
     "512": "images/icon-512.png"
   },
-  "applications": {
-    "gecko": {
-      "id": "[email protected]",
-      "strict_min_version": "56.0"
-    }
-  },
   "default_locale": "en",
   "background": {
     "scripts": [
-      "chromereload.js",
       "bg-libs.js",
       "background.js"
     ],

app/manifest/brave.json

@@ -0,0 +1 @@
+{}

app/manifest/chrome.json

@@ -0,0 +1,3 @@
+{
+  "minimum_chrome_version": "58"
+}

app/manifest/firefox.json

@@ -0,0 +1,8 @@
+{
+  "applications": {
+    "gecko": {
+      "id": "[email protected]",
+      "strict_min_version": "56.0"
+    }
+  }
+}

app/manifest/opera.json

@@ -0,0 +1,9 @@
+{
+  "permissions": [
+    "storage",
+    "tabs",
+    "clipboardWrite",
+    "clipboardRead",
+    "http://localhost:8545/"
+  ]
+}

app/scripts/metamask-controller.js

@@ -50,7 +50,7 @@ import accountImporter from './account-import-strategies'
 import getBuyEthUrl from './lib/buy-eth-url'
 import selectChainId from './lib/select-chain-id'
 import { Mutex } from 'await-semaphore'
-import { version } from '../manifest.json'
+import { version } from '../manifest/_base.json'
 import ethUtil, { BN } from 'ethereumjs-util'
 
 const GWEI_BN = new BN('1000000000')

development/announcer.js

@@ -1,14 +1,10 @@
-const manifest = require('../app/manifest.json')
-
-const version = manifest.version
-
 const fs = require('fs')
 const path = require('path')
+const { version } = require('../app/manifest/_base.json')
 
-const changelog = fs.readFileSync(path.join(__dirname, '..', 'CHANGELOG.md')).toString()
+const changelog = fs.readFileSync(path.join(__dirname, '..', 'CHANGELOG.md'), 'utf8')
 
 const log = changelog.split(version)[1].split('##')[0].trim()
-
 const msg = `*MetaMask ${version}* now published! It should auto-update soon!\n${log}`
 
 console.log(msg)

development/build/display.js

@@ -0,0 +1,150 @@
+const randomColor = require('randomcolor')
+const chalk = require('chalk')
+
+module.exports = { setupTaskDisplay, displayChart }
+
+const SYMBOLS = {
+  Empty: '',
+  Space: ' ',
+  Full: '█',
+  SevenEighths: '▉',
+  ThreeQuarters: '▊',
+  FiveEighths: '▋',
+  Half: '▌',
+  ThreeEighths: '▍',
+  Quarter: '▎',
+  Eighth: '▏',
+  RightHalf: '▐',
+  RightEigth: '▕',
+}
+
+function setupTaskDisplay (taskEvents) {
+  const taskData = []
+  taskEvents.on('start', ([name]) => {
+    console.log(`Starting '${name}'...`)
+  })
+  taskEvents.on('end', ([name, start, end]) => {
+    taskData.push([name, start, end])
+    console.log(`Finished '${name}'`)
+  })
+  taskEvents.on('complete', () => {
+    displayChart(taskData)
+  })
+}
+
+function displayChart (data) {
+  // sort tasks by start time
+  data.sort((a, b,) => a[1] - b[1])
+
+  // get bounds
+  const first = Math.min(...data.map((entry) => entry[1]))
+  const last = Math.max(...data.map((entry) => entry[2]))
+
+  // get colors
+  const colors = randomColor({ count: data.length })
+
+  // some heading before the bars
+  console.log(`\nbuild completed. task timeline:`)
+
+  // build bars for bounds
+  data.map((entry, index) => {
+    const [label, start, end] = entry
+    const [start2, end2] = [start, end].map((value) => adjust(value, first, last, 40))
+    const barString = barBuilder(start2, end2)
+    const color = colors[index]
+    const coloredBarString = colorize(color, barString)
+    const duration = ((end - start) / 1e3).toFixed(1)
+    console.log(coloredBarString, `${label} ${duration}s`)
+  })
+
+}
+
+function colorize (color, string) {
+  const colorizer = (typeof chalk[color] === 'function') ? chalk[color] : chalk.hex(color)
+  return colorizer(string)
+}
+
+// scale number within bounds
+function adjust (value, first, last, size) {
+  const length = last - first
+  const result = (value - first) / length * size
+  return result
+}
+
+// draw bars
+function barBuilder (start, end) {
+  const [spaceInt, spaceRest] = splitNumber(start)
+  const barBodyLength = end - spaceInt
+  let [barInt, barRest] = splitNumber(barBodyLength)
+  // We are handling zero value as a special case
+  // to print at least something on the screen
+  if (barInt === 0 && barRest === 0) {
+    barInt = 0
+    barRest = 0.001
+  }
+
+  const spaceFull = SYMBOLS.Space.repeat(spaceInt)
+  const spacePartial = getSymbolNormalRight(spaceRest)
+  const barFull = SYMBOLS.Full.repeat(barInt)
+  const barPartial = getSymbolNormal(barRest)
+
+  return `${spaceFull}${spacePartial}${barFull}${barPartial}`
+}
+
+// get integer and remainder
+function splitNumber (value = 0) {
+  const [int, rest = '0'] = value.toString().split('.')
+  const int2 = parseInt(int, 10)
+  const rest2 = parseInt(rest, 10) / Math.pow(10, rest.length)
+  return [int2, rest2]
+}
+
+// get partial block char for value (left-adjusted)
+function getSymbolNormal (value) {
+  // round to closest supported value
+  const possibleValues = [0, 1 / 8, 1 / 4, 3 / 8, 1 / 2, 5 / 8, 3 / 4, 7 / 8, 1]
+  const rounded = possibleValues.reduce((prev, curr) => {
+    return (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev)
+  })
+
+  if (rounded === 0) {
+    return SYMBOLS.Empty
+  } else if (rounded === 1 / 8) {
+    return SYMBOLS.Eighth
+  } else if (rounded === 1 / 4) {
+    return SYMBOLS.Quarter
+  } else if (rounded === 3 / 8) {
+    return SYMBOLS.ThreeEighths
+  } else if (rounded === 1 / 2) {
+    return SYMBOLS.Half
+  } else if (rounded === 5 / 8) {
+    return SYMBOLS.FiveEighths
+  } else if (rounded === 3 / 4) {
+    return SYMBOLS.ThreeQuarters
+  } else if (rounded === 7 / 8) {
+    return SYMBOLS.SevenEighths
+  } else {
+    return SYMBOLS.Full
+  }
+}
+
+// get partial block char for value (right-adjusted)
+function getSymbolNormalRight (value) {
+  // round to closest supported value (not much :/)
+  const possibleValues = [0, 1 / 2, 7 / 8, 1]
+  const rounded = possibleValues.reduce((prev, curr) => {
+    return (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev)
+  })
+
+  if (rounded === 0) {
+    return SYMBOLS.Full
+  } else if (rounded === 1 / 2) {
+    return SYMBOLS.RightHalf
+  } else if (rounded === 7 / 8) {
+    return SYMBOLS.RightEigth
+  } else if (rounded === 1) {
+    return SYMBOLS.Space
+  } else {
+    throw new Error('getSymbolNormalRight got unexpected result')
+  }
+}

development/build/etc.js

@@ -0,0 +1,42 @@
+const gulp = require('gulp')
+const gulpZip = require('gulp-zip')
+const del = require('del')
+const { promises: fs } = require('fs')
+const pify = require('pify')
+const pump = pify(require('pump'))
+const baseManifest = require('../../app/manifest/_base.json')
+const { createTask, composeParallel } = require('./task')
+
+module.exports = createEtcTasks
+
+
+function createEtcTasks ({ browserPlatforms, livereload }) {
+
+  const clean = createTask('clean', async function clean () {
+    await del(['./dist/*'])
+    await Promise.all(browserPlatforms.map(async (platform) => {
+      await fs.mkdir(`./dist/${platform}`, { recursive: true })
+    }))
+  })
+
+  const reload = createTask('reload', function devReload () {
+    livereload.listen({ port: 35729 })
+  })
+
+  // zip tasks for distribution
+  const zip = createTask('zip', composeParallel(
+    ...browserPlatforms.map((platform) => createZipTask(platform))
+  ))
+
+  return { clean, reload, zip }
+}
+
+function createZipTask (target) {
+  return async () => {
+    await pump(
+      gulp.src(`dist/${target}/**`),
+      gulpZip(`metamask-${target}-${baseManifest.version}.zip`),
+      gulp.dest('builds'),
+    )
+  }
+}

development/build/index.js

@@ -0,0 +1,91 @@
+//
+// build task definitions
+//
+// run any task with "yarn build ${taskName}"
+//
+
+const livereload = require('gulp-livereload')
+const { createTask, composeSeries, composeParallel, detectAndRunEntryTask } = require('./task')
+const createManifestTasks = require('./manifest')
+const createScriptTasks = require('./scripts')
+const createStyleTasks = require('./styles')
+const createStaticAssetTasks = require('./static')
+const createEtcTasks = require('./etc')
+
+const browserPlatforms = [
+  'firefox',
+  'chrome',
+  'brave',
+  'opera',
+]
+
+defineAllTasks()
+detectAndRunEntryTask()
+
+function defineAllTasks () {
+
+  const staticTasks = createStaticAssetTasks({ livereload, browserPlatforms })
+  const manifestTasks = createManifestTasks({ browserPlatforms })
+  const styleTasks = createStyleTasks({ livereload })
+  const scriptTasks = createScriptTasks({ livereload, browserPlatforms })
+  const { clean, reload, zip } = createEtcTasks({ livereload, browserPlatforms })
+
+  // build for development (livereload)
+  createTask('dev',
+    composeSeries(
+      clean,
+      styleTasks.dev,
+      composeParallel(
+        scriptTasks.dev,
+        staticTasks.dev,
+        manifestTasks.dev,
+        reload
+      )
+    )
+  )
+
+  // build for test development (livereload)
+  createTask('testDev',
+    composeSeries(
+      clean,
+      styleTasks.dev,
+      composeParallel(
+        scriptTasks.testDev,
+        staticTasks.dev,
+        manifestTasks.testDev,
+        reload
+      )
+    )
+  )
+
+  // build for prod release
+  createTask('prod',
+    composeSeries(
+      clean,
+      styleTasks.prod,
+      composeParallel(
+        scriptTasks.prod,
+        staticTasks.prod,
+        manifestTasks.prod,
+      ),
+      zip,
+    )
+  )
+
+  // build for CI testing
+  createTask('test',
+    composeSeries(
+      clean,
+      styleTasks.prod,
+      composeParallel(
+        scriptTasks.test,
+        staticTasks.prod,
+        manifestTasks.test,
+      ),
+    )
+  )
+
+  // special build for minimal CI testing
+  createTask('styles', styleTasks.prod)
+
+}