Merge branch 'master' of github.com:MetaMask/metamask-extension into ci-screens

2024-11-22 01:47:00 +01:00 · 2018-03-30 13:57:50 -07:00 · 2018-03-30 13:57:50 -07:00 · 7dde948c45
commit 7dde948c45
parent 32bb09bcb9 8e0f39353d
26 changed files with 1246 additions and 664 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@ -103,6 +103,32 @@ jobs:
          key: build-cache-{{ .Revision }}
          paths:
            - dist
+      - store_artifacts:
+          path: dist/mascara
+          destination: builds/mascara
+      - store_artifacts:
+          path: builds
+          destination: builds
+      - run:
+          name: build:announce
+          command: |
+            CIRCLE_PR_NUMBER="${CIRCLE_PR_NUMBER:-${CIRCLE_PULL_REQUEST##*/}}"
+            SHORT_SHA1=$(echo $CIRCLE_SHA1 | cut -c 1-7)
+            BUILD_LINK_BASE="https://$CIRCLE_BUILD_NUM-42009758-gh.circle-artifacts.com/0/builds"
+            VERSION=$(node -p 'require("./dist/chrome/manifest.json").version')
+            MASCARA="$BUILD_LINK_BASE/mascara/home.html"
+            CHROME="$BUILD_LINK_BASE/metamask-chrome-$VERSION.zip"
+            FIREFOX="$BUILD_LINK_BASE/metamask-firefox-$VERSION.zip"
+            OPERA="$BUILD_LINK_BASE/metamask-opera-$VERSION.zip"
+            EDGE="$BUILD_LINK_BASE/metamask-edge-$VERSION.zip"
+            COMMENT_MAIN="Builds ready [$SHORT_SHA1]: [mascara][mascara], [chrome][chrome], [firefox][firefox], [edge][edge], [opera][opera]"
+            COMMENT_LINKS="[mascara]:$MASCARA\n[chrome]:$CHROME\n[firefox]:$FIREFOX\n[opera]:$OPERA\n[edge]:$EDGE\n"
+            COMMENT_BODY="$COMMENT_MAIN\n\n$COMMENT_LINKS"
+            JSON_PAYLOAD="{\"body\":\"$COMMENT_BODY\"}"
+            POST_COMMENT_URI="https://api.github.com/repos/metamask/metamask-extension/issues/$CIRCLE_PR_NUMBER/comments"
+            echo "Announcement:\n$COMMENT_BODY"
+            echo "Posting to $POST_COMMENT_URI"
+            curl -d "$JSON_PAYLOAD" -H "Authorization: token $GITHUB_COMMENT_TOKEN" $POST_COMMENT_URI

  prep-scss:
    docker:
--- a/app/home.html
+++ b/app/home.html
@ -3,10 +3,10 @@
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
-    <title>MetaMask Plugin</title>
+    <title>MetaMask</title>
  </head>
  <body>
    <div id="app-content"></div>
-    <script src="./scripts/popup.js" type="text/javascript" charset="utf-8"></script>
+    <script src="./ui.js" type="text/javascript" charset="utf-8"></script>
  </body>
 </html>
--- a/app/manifest.json
+++ b/app/manifest.json
@ -27,8 +27,8 @@
  "default_locale": "en",
  "background": {
    "scripts": [
-      "scripts/chromereload.js",
-      "scripts/background.js"
+      "chromereload.js",
+      "background.js"
    ],
    "persistent": true
  },
@ -48,7 +48,7 @@
        "https://*/*"
      ],
      "js": [
-        "scripts/contentscript.js"
+        "contentscript.js"
      ],
      "run_at": "document_start",
      "all_frames": true
@ -62,11 +62,11 @@
    "https://*.infura.io/"
  ],
  "web_accessible_resources": [
-    "scripts/inpage.js"
+    "inpage.js"
  ],
  "externally_connectable": {
    "matches": [
      "https://metamask.io/*"
    ]
  }
-}
+}
--- a/app/notification.html
+++ b/app/notification.html
@ -11,6 +11,6 @@
  </head>
  <body class="notification" style="height:600px;">
    <div id="app-content"></div>
-    <script src="./scripts/popup.js" type="text/javascript" charset="utf-8"></script>
+    <script src="./ui.js" type="text/javascript" charset="utf-8"></script>
  </body>
 </html>
--- a/app/popup.html
+++ b/app/popup.html
@ -3,10 +3,10 @@
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
-    <title>MetaMask Plugin</title>
+    <title>MetaMask</title>
  </head>
  <body style="width:357px; height:600px;">
    <div id="app-content"></div>
-    <script src="./scripts/popup.js" type="text/javascript" charset="utf-8"></script>
+    <script src="./ui.js" type="text/javascript" charset="utf-8"></script>
  </body>
 </html>
--- a/app/scripts/contentscript.js
+++ b/app/scripts/contentscript.js
@ -7,8 +7,8 @@ const ObjectMultiplex = require('obj-multiplex')
 const extension = require('extensionizer')
 const PortStream = require('./lib/port-stream.js')

-const inpageContent = fs.readFileSync(path.join(__dirname, '..', '..', 'dist', 'chrome', 'scripts', 'inpage.js')).toString()
-const inpageSuffix = '//# sourceURL=' + extension.extension.getURL('scripts/inpage.js') + '\n'
+const inpageContent = fs.readFileSync(path.join(__dirname, '..', '..', 'dist', 'chrome', 'inpage.js')).toString()
+const inpageSuffix = '//# sourceURL=' + extension.extension.getURL('inpage.js') + '\n'
 const inpageBundle = inpageContent + inpageSuffix

 // Eventually this streaming injection could be replaced with:
@ -96,7 +96,7 @@ function logStreamDisconnectWarning (remoteLabel, err) {
 }

 function shouldInjectWeb3 () {
-  return doctypeCheck() && suffixCheck() 
+  return doctypeCheck() && suffixCheck()
    && documentElementCheck() && !blacklistedDomainCheck()
 }

--- a/app/scripts/popup.js
+++ b/app/scripts/popup.js
--- a/gulpfile.js
+++ b/gulpfile.js
@ -1,37 +1,51 @@
-var watchify = require('watchify')
-var browserify = require('browserify')
-var disc = require('disc')
-var gulp = require('gulp')
-var source = require('vinyl-source-stream')
-var buffer = require('vinyl-buffer')
-var gutil = require('gulp-util')
-var watch = require('gulp-watch')
-var sourcemaps = require('gulp-sourcemaps')
-var jsoneditor = require('gulp-json-editor')
-var zip = require('gulp-zip')
-var assign = require('lodash.assign')
-var livereload = require('gulp-livereload')
-var del = require('del')
-var eslint = require('gulp-eslint')
-var fs = require('fs')
-var path = require('path')
-var manifest = require('./app/manifest.json')
-var gulpif = require('gulp-if')
-var replace = require('gulp-replace')
-var mkdirp = require('mkdirp')
-var asyncEach = require('async/each')
-var exec = require('child_process').exec
-var sass = require('gulp-sass')
-var autoprefixer = require('gulp-autoprefixer')
-var gulpStylelint = require('gulp-stylelint')
-var stylefmt = require('gulp-stylefmt')
-var uglify = require('gulp-uglify-es').default
-var babel = require('gulp-babel')
+const watchify = require('watchify')
+const browserify = require('browserify')
+const disc = require('disc')
+const gulp = require('gulp')
+const source = require('vinyl-source-stream')
+const buffer = require('vinyl-buffer')
+const gutil = require('gulp-util')
+const watch = require('gulp-watch')
+const sourcemaps = require('gulp-sourcemaps')
+const jsoneditor = require('gulp-json-editor')
+const zip = require('gulp-zip')
+const assign = require('lodash.assign')
+const livereload = require('gulp-livereload')
+const del = require('del')
+const eslint = require('gulp-eslint')
+const fs = require('fs')
+const path = require('path')
+const manifest = require('./app/manifest.json')
+const gulpif = require('gulp-if')
+const replace = require('gulp-replace')
+const mkdirp = require('mkdirp')
+const asyncEach = require('async/each')
+const exec = require('child_process').exec
+const sass = require('gulp-sass')
+const autoprefixer = require('gulp-autoprefixer')
+const gulpStylelint = require('gulp-stylelint')
+const stylefmt = require('gulp-stylefmt')
+const uglify = require('gulp-uglify-es').default
+const babel = require('gulp-babel')
+const debug = require('gulp-debug')
+const pify = require('pify')
+const endOfStream = pify(require('end-of-stream'))

+const disableDebugTools = gutil.env.disableDebugTools
+const debugMode = gutil.env.debug

-var disableDebugTools = gutil.env.disableDebugTools
-var debug = gutil.env.debug
-
+const browserPlatforms = [
+  'firefox',
+  'chrome',
+  'edge',
+  'opera',
+]
+const commonPlatforms = [
+  // browser webapp
+  'mascara',
+  // browser extensions
+  ...browserPlatforms
+]

 // browser reload

@ -41,65 +55,98 @@ gulp.task('dev:reload', function() {
  })
 })

+// copy universal

-// copy static
+const copyTaskNames = []
+const copyDevTaskNames = []

-gulp.task('copy:locales', copyTask({
+createCopyTasks('locales', {
  source: './app/_locales/',
-  destinations: [
-    './dist/firefox/_locales',
-    './dist/chrome/_locales',
-    './dist/edge/_locales',
-    './dist/opera/_locales',
-  ]
-}))
-gulp.task('copy:images', copyTask({
+  destinations: commonPlatforms.map(platform => `./dist/${platform}/_locales`),
+})
+createCopyTasks('images', {
  source: './app/images/',
-  destinations: [
-    './dist/firefox/images',
-    './dist/chrome/images',
-    './dist/edge/images',
-    './dist/opera/images',
-  ],
-}))
-gulp.task('copy:contractImages', copyTask({
+  destinations: commonPlatforms.map(platform => `./dist/${platform}/images`),
+})
+createCopyTasks('contractImages', {
  source: './node_modules/eth-contract-metadata/images/',
-  destinations: [
-    './dist/firefox/images/contract',
-    './dist/chrome/images/contract',
-    './dist/edge/images/contract',
-    './dist/opera/images/contract',
-  ],
-}))
-gulp.task('copy:fonts', copyTask({
+  destinations: commonPlatforms.map(platform => `./dist/${platform}/images/contract`),
+})
+createCopyTasks('fonts', {
  source: './app/fonts/',
-  destinations: [
-    './dist/firefox/fonts',
-    './dist/chrome/fonts',
-    './dist/edge/fonts',
-    './dist/opera/fonts',
-  ],
-}))
-gulp.task('copy:reload', copyTask({
+  destinations: commonPlatforms.map(platform => `./dist/${platform}/fonts`),
+})
+createCopyTasks('reload', {
+  devOnly: true,
  source: './app/scripts/',
-  destinations: [
-    './dist/firefox/scripts',
-    './dist/chrome/scripts',
-    './dist/edge/scripts',
-    './dist/opera/scripts',
-  ],
  pattern: '/chromereload.js',
-}))
-gulp.task('copy:root', copyTask({
+  destinations: commonPlatforms.map(platform => `./dist/${platform}`),
+})
+createCopyTasks('html', {
  source: './app/',
-  destinations: [
-    './dist/firefox',
-    './dist/chrome',
-    './dist/edge',
-    './dist/opera',
-  ],
-  pattern: '/*',
-}))
+  pattern: '/*.html',
+  destinations: commonPlatforms.map(platform => `./dist/${platform}`),
+})
+
+// copy extension
+
+createCopyTasks('manifest', {
+  source: './app/',
+  pattern: '/*.json',
+  destinations: browserPlatforms.map(platform => `./dist/${platform}`),
+})
+
+// copy mascara
+
+createCopyTasks('html:mascara', {
+  source: './mascara/',
+  pattern: 'proxy/index.html',
+  destinations: [`./dist/mascara/`],
+})
+
+function createCopyTasks(label, opts) {
+  if (!opts.devOnly) {
+    const copyTaskName = `copy:${label}`
+    copyTask(copyTaskName, opts)
+    copyTaskNames.push(copyTaskName)
+  }
+  const copyDevTaskName = `dev:copy:${label}`
+  copyTask(copyDevTaskName, Object.assign({ devMode: true }, opts))
+  copyDevTaskNames.push(copyDevTaskName)
+}
+
+function copyTask(taskName, opts){
+  const source = opts.source
+  const destination = opts.destination
+  const destinations = opts.destinations || [destination]
+  const pattern = opts.pattern || '/**/*'
+  const devMode = opts.devMode
+
+  return gulp.task(taskName, function () {
+    if (devMode) {
+      watch(source + pattern, (event) => {
+        livereload.changed(event.path)
+        performCopy()
+      })
+    }
+
+    return performCopy()
+  })
+
+  function performCopy() {
+    // stream from source
+    let stream = gulp.src(source + pattern, { base: source })
+
+    // copy to destinations
+    destinations.forEach(function(destination) {
+      stream = stream.pipe(gulp.dest(destination))
+    })
+
+    return stream
+  }
+}
+
+// manifest tinkering

 gulp.task('manifest:chrome', function() {
  return gulp.src('./dist/chrome/manifest.json')
@ -134,7 +181,7 @@ gulp.task('manifest:production', function() {
  ],{base: './dist/'})

  // Exclude chromereload script in production:
-  .pipe(gulpif(!debug,jsoneditor(function(json) {
+  .pipe(gulpif(!debugMode,jsoneditor(function(json) {
    json.background.scripts = json.background.scripts.filter((script) => {
      return !script.includes('chromereload')
    })
@ -144,36 +191,22 @@ gulp.task('manifest:production', function() {
  .pipe(gulp.dest('./dist/', { overwrite: true }))
 })

-const staticFiles = [
-  'locales',
-  'images',
-  'fonts',
-  'root'
-]
+gulp.task('copy',
+  gulp.series(
+    gulp.parallel(...copyTaskNames),
+    'manifest:production',
+    'manifest:chrome',
+    'manifest:opera'
+  )
+)

-var copyStrings = staticFiles.map(staticFile => `copy:${staticFile}`)
-copyStrings.push('copy:contractImages')
-
-if (debug) {
-  copyStrings.push('copy:reload')
-}
-
-gulp.task('copy', gulp.series(gulp.parallel(...copyStrings), 'manifest:production', 'manifest:chrome', 'manifest:opera'))
-gulp.task('copy:watch', function(){
-  gulp.watch(['./app/{_locales,images}/*', './app/scripts/chromereload.js', './app/*.{html,json}'], gulp.series('copy'))
-})
-
-// record deps
-
-gulp.task('deps', function (cb) {
-  exec('npm ls', (err, stdoutOutput, stderrOutput) => {
-    if (err) return cb(err)
-    const browsers = ['firefox','chrome','edge','opera']
-    asyncEach(browsers, (target, done) => {
-      fs.writeFile(`./dist/${target}/deps.txt`, stdoutOutput, done)
-    }, cb)
-  })
-})
+gulp.task('dev:copy',
+  gulp.series(
+    gulp.parallel(...copyDevTaskNames),
+    'manifest:chrome',
+    'manifest:opera'
+  )
+)

 // lint js

@ -196,41 +229,49 @@ gulp.task('lint:fix', function () {
    .pipe(eslint.failAfterError())
 });

-/*
-gulp.task('default', ['lint'], function () {
-    // This will only run if the lint task is successful...
-});
-*/
-
-// build js
-
-const jsFiles = [
-  'inpage',
-  'contentscript',
-  'background',
-  'popup',
-]
-
 // scss compilation and autoprefixing tasks

-gulp.task('build:scss', function () {
-  return gulp.src('ui/app/css/index.scss')
-    .pipe(sourcemaps.init())
-    .pipe(sass().on('error', sass.logError))
-    .pipe(sourcemaps.write())
-    .pipe(autoprefixer())
-    .pipe(gulp.dest('ui/app/css/output'))
-})
-gulp.task('watch:scss', function() {
-  gulp.watch(['ui/app/css/**/*.scss'], gulp.series(['build:scss']))
-})
+gulp.task('build:scss', createScssBuildTask({
+  src: 'ui/app/css/index.scss',
+  dest: 'ui/app/css/output',
+  devMode: false,
+}))
+
+gulp.task('dev:scss', createScssBuildTask({
+  src: 'ui/app/css/index.scss',
+  dest: 'ui/app/css/output',
+  devMode: true,
+  pattern: 'ui/app/css/**/*.scss',
+}))
+
+function createScssBuildTask({ src, dest, devMode, pattern }) {
+  return function () {
+    if (devMode) {
+      watch(pattern, async (event) => {
+        const stream = buildScss()
+        await endOfStream(stream)
+        livereload.changed(event.path)
+      })
+    }
+    return buildScss()
+  }
+
+  function buildScss() {
+    return gulp.src(src)
+      .pipe(sourcemaps.init())
+      .pipe(sass().on('error', sass.logError))
+      .pipe(sourcemaps.write())
+      .pipe(autoprefixer())
+      .pipe(gulp.dest(dest))
+  }
+}

 gulp.task('lint-scss', function() {
  return gulp
    .src('ui/app/css/itcss/**/*.scss')
    .pipe(gulpStylelint({
      reporters: [
-        {formatter: 'string', console: true}
+        { formatter: 'string', console: true }
      ],
      fix: true,
    }));
@ -242,46 +283,82 @@ gulp.task('fmt-scss', function () {
    .pipe(gulp.dest('ui/app/css/itcss'));
 });

+// build js
+
+const buildJsFiles = [
+  'inpage',
+  'contentscript',
+  'background',
+  'ui',
+]
+
 // bundle tasks
+createTasksForBuildJsExtension({ buildJsFiles, taskPrefix: 'dev:extension:js', devMode: true })
+createTasksForBuildJsExtension({ buildJsFiles, taskPrefix: 'build:extension:js'  })
+createTasksForBuildJsMascara({ taskPrefix: 'build:mascara:js' })
+createTasksForBuildJsMascara({ taskPrefix: 'dev:mascara:js', devMode: true })

-var jsDevStrings = jsFiles.map(jsFile => `dev:js:${jsFile}`)
-var jsBuildStrings = jsFiles.map(jsFile => `build:js:${jsFile}`)
+function createTasksForBuildJsExtension({ buildJsFiles, taskPrefix, devMode, bundleTaskOpts = {} }) {
+  // inpage must be built before all other scripts:
+  const rootDir = './app/scripts'
+  const nonInpageFiles = buildJsFiles.filter(file => file !== 'inpage')
+  const buildPhase1 = ['inpage']
+  const buildPhase2 = nonInpageFiles
+  const destinations = browserPlatforms.map(platform => `./dist/${platform}`)
+  bundleTaskOpts = Object.assign({
+    buildSourceMaps: true,
+    sourceMapDir: devMode ? './' : '../sourcemaps',
+    minifyBuild: !devMode,
+    buildWithFullPaths: devMode,
+    watch: devMode,
+  }, bundleTaskOpts)
+  createTasksForBuildJs({ rootDir, taskPrefix, bundleTaskOpts, destinations, buildPhase1, buildPhase2 })
+}

-jsFiles.forEach((jsFile) => {
-  gulp.task(`dev:js:${jsFile}`,   bundleTask({
-    watch: true,
-    label: jsFile,
-    filename: `${jsFile}.js`,
-    isBuild: false
-  }))
-  gulp.task(`build:js:${jsFile}`, bundleTask({
-    watch: false,
-    label: jsFile,
-    filename: `${jsFile}.js`,
-    isBuild: true
-  }))
-})
+function createTasksForBuildJsMascara({ taskPrefix, devMode, bundleTaskOpts = {} }) {
+  // inpage must be built before all other scripts:
+  const rootDir = './mascara/src/'
+  const buildPhase1 = ['ui', 'proxy', 'background', 'metamascara']
+  const destinations = ['./dist/mascara']
+  bundleTaskOpts = Object.assign({
+    buildSourceMaps: true,
+    sourceMapDir: './',
+    minifyBuild: !devMode,
+    buildWithFullPaths: devMode,
+    watch: devMode,
+  }, bundleTaskOpts)
+  createTasksForBuildJs({ rootDir, taskPrefix, bundleTaskOpts, destinations, buildPhase1 })
+}

-// inpage must be built before all other scripts:
-const firstDevString = jsDevStrings.shift()
-gulp.task('dev:js', gulp.series(firstDevString, gulp.parallel(...jsDevStrings)))
+function createTasksForBuildJs({ rootDir, taskPrefix, bundleTaskOpts, destinations, buildPhase1 = [], buildPhase2 = [] }) {
+  // bundle task for each file
+  const jsFiles = [].concat(buildPhase1, buildPhase2)
+  jsFiles.forEach((jsFile) => {
+    gulp.task(`${taskPrefix}:${jsFile}`, bundleTask(Object.assign({
+      label: jsFile,
+      filename: `${jsFile}.js`,
+      filepath: `${rootDir}/${jsFile}.js`,
+      destinations,
+    }, bundleTaskOpts)))
+  })
+  // compose into larger task
+  const subtasks = []
+  subtasks.push(gulp.parallel(buildPhase1.map(file => `${taskPrefix}:${file}`)))
+  if (buildPhase2.length) subtasks.push(gulp.parallel(buildPhase2.map(file => `${taskPrefix}:${file}`)))

-// inpage must be built before all other scripts:
-const firstBuildString = jsBuildStrings.shift()
-gulp.task('build:js',  gulp.series(firstBuildString, gulp.parallel(...jsBuildStrings)))
+  gulp.task(taskPrefix, gulp.series(subtasks))
+}

 // disc bundle analyzer tasks

-jsFiles.forEach((jsFile) => {
-  gulp.task(`disc:${jsFile}`,   discTask({ label: jsFile, filename: `${jsFile}.js` }))
+buildJsFiles.forEach((jsFile) => {
+  gulp.task(`disc:${jsFile}`, discTask({ label: jsFile, filename: `${jsFile}.js` }))
 })

-gulp.task('disc', gulp.parallel(jsFiles.map(jsFile => `disc:${jsFile}`)))
-
+gulp.task('disc', gulp.parallel(buildJsFiles.map(jsFile => `disc:${jsFile}`)))

 // clean dist

-
 gulp.task('clean', function clean() {
  return del(['./dist/*'])
 })
@ -293,40 +370,95 @@ gulp.task('zip:edge', zipTask('edge'))
 gulp.task('zip:opera', zipTask('opera'))
 gulp.task('zip', gulp.parallel('zip:chrome', 'zip:firefox', 'zip:edge', 'zip:opera'))

-// set env var for production
+// set env for production
 gulp.task('apply-prod-environment', function(done) {
-    process.env.NODE_ENV = 'production'
-    done()
+  process.env.NODE_ENV = 'production'
+  done()
 });

 // high level tasks

-gulp.task('dev', gulp.series('build:scss', 'dev:js', 'copy', gulp.parallel('watch:scss', 'copy:watch', 'dev:reload')))
+gulp.task('dev',
+  gulp.series(
+    'clean',
+    'dev:scss',
+    gulp.parallel(
+      'dev:extension:js',
+      'dev:mascara:js',
+      'dev:copy',
+      'dev:reload'
+    )
+  )
+)

-gulp.task('build', gulp.series('clean', 'build:scss', gulp.parallel('build:js', 'copy')))
-gulp.task('dist', gulp.series('apply-prod-environment', 'build', 'zip'))
+gulp.task('dev:extension',
+  gulp.series(
+    'clean',
+    'dev:scss',
+    gulp.parallel(
+      'dev:extension:js',
+      'dev:copy',
+      'dev:reload'
+    )
+  )
+)
+
+gulp.task('dev:mascara',
+  gulp.series(
+    'clean',
+    'dev:scss',
+    gulp.parallel(
+      'dev:mascara:js',
+      'dev:copy',
+      'dev:reload'
+    )
+  )
+)
+
+gulp.task('build',
+  gulp.series(
+    'clean',
+    'build:scss',
+    gulp.parallel(
+      'build:extension:js',
+      'build:mascara:js',
+      'copy'
+    )
+  )
+)
+
+gulp.task('build:extension',
+  gulp.series(
+    'clean',
+    'build:scss',
+    gulp.parallel(
+      'build:extension:js',
+      'copy'
+    )
+  )
+)
+
+gulp.task('build:mascara',
+  gulp.series(
+    'clean',
+    'build:scss',
+    gulp.parallel(
+      'build:mascara:js',
+      'copy'
+    )
+  )
+)
+
+gulp.task('dist',
+  gulp.series(
+    'apply-prod-environment',
+    'build',
+    'zip'
+  )
+)

 // task generators

-function copyTask(opts){
-  var source = opts.source
-  var destination = opts.destination
-  var destinations = opts.destinations || [ destination ]
-  var pattern = opts.pattern || '/**/*'
-
-  return performCopy
-
-  function performCopy(){
-    let stream = gulp.src(source + pattern, { base: source })
-    destinations.forEach(function(destination) {
-      stream = stream.pipe(gulp.dest(destination))
-    })
-    stream.pipe(gulpif(debug,livereload()))
-
-    return stream
-  }
-}
-
 function zipTask(target) {
  return () => {
    return gulp.src(`dist/${target}/**`)
@ -337,10 +469,10 @@ function zipTask(target) {

 function generateBundler(opts, performBundle) {
  const browserifyOpts = assign({}, watchify.args, {
-    entries: ['./app/scripts/'+opts.filename],
+    entries: [opts.filepath],
    plugin: 'browserify-derequire',
-    debug: true,
-    fullPaths: debug,
+    debug: opts.buildSourceMaps,
+    fullPaths: opts.buildWithFullPaths,
  })

  let bundler = browserify(browserifyOpts)
@ -348,13 +480,21 @@ function generateBundler(opts, performBundle) {
  if (opts.watch) {
    bundler = watchify(bundler)
    // on any file update, re-runs the bundler
-    bundler.on('update', performBundle)
+    bundler.on('update', async (ids) => {
+      const stream = performBundle()
+      await endOfStream(stream)
+      livereload.changed(`${ids}`)
+    })
  }

  return bundler
 }

 function discTask(opts) {
+  opts = Object.assign({
+    buildWithFullPaths: true,
+  }, opts)
+
  const bundler = generateBundler(opts, performBundle)
  // output build logs to terminal
  bundler.on('log', gutil.log)
@ -363,9 +503,9 @@ function discTask(opts) {

  function performBundle(){
    // start "disc" build
-    let discDir = path.join(__dirname, 'disc')
+    const discDir = path.join(__dirname, 'disc')
    mkdirp.sync(discDir)
-    let discPath = path.join(discDir, `${opts.label}.html`)
+    const discPath = path.join(discDir, `${opts.label}.html`)

    return (
      bundler.bundle()
@ -384,43 +524,58 @@ function bundleTask(opts) {
  return performBundle

  function performBundle(){
-    return (
+    let buildStream = bundler.bundle()

-      bundler.bundle()
+    // handle errors
+    buildStream.on('error', (err) => {
+      beep()
+      if (opts.watch) {
+        console.warn(err.stack)
+      } else {
+        throw err
+      }
+    })

-      // handle errors
-      .on('error', (err) => {
-        beep()
-        if (opts.watch) {
-          console.warn(err.stack)
-        } else {
-          throw err
-        }
-      })
+    // process bundles
+    buildStream = buildStream
      // convert bundle stream to gulp vinyl stream
      .pipe(source(opts.filename))
      // inject variables into bundle
-      .pipe(replace('\'GULP_METAMASK_DEBUG\'', debug))
+      .pipe(replace('\'GULP_METAMASK_DEBUG\'', debugMode))
      // buffer file contents (?)
      .pipe(buffer())
-      // sourcemaps
-      // loads map from browserify file
-      .pipe(sourcemaps.init({ loadMaps: true }))
-      // Minification
-      .pipe(gulpif(opts.isBuild, uglify({
-        mangle: {  reserved: [ 'MetamaskInpageProvider' ] },
-      })))
-      // writes .map file
-      .pipe(sourcemaps.write(debug ? './' : '../../sourcemaps'))
-      // write completed bundles
-      .pipe(gulp.dest('./dist/firefox/scripts'))
-      .pipe(gulp.dest('./dist/chrome/scripts'))
-      .pipe(gulp.dest('./dist/edge/scripts'))
-      .pipe(gulp.dest('./dist/opera/scripts'))
-      // finally, trigger live reload
-      .pipe(gulpif(debug, livereload()))

-    )
+
+    // Initialize Source Maps
+    if (opts.buildSourceMaps) {
+      buildStream = buildStream
+        // loads map from browserify file
+        .pipe(sourcemaps.init({ loadMaps: true }))
+    }
+
+    // Minification
+    if (opts.minifyBuild) {
+      buildStream = buildStream
+        .pipe(uglify({
+          mangle: {
+            reserved: [ 'MetamaskInpageProvider' ]
+          },
+        }))
+    }
+
+    // Finalize Source Maps (writes .map file)
+    if (opts.buildSourceMaps) {
+      buildStream = buildStream
+        .pipe(sourcemaps.write(opts.sourceMapDir))
+    }
+
+    // write completed bundles
+    opts.destinations.forEach((dest) => {
+      buildStream = buildStream.pipe(gulp.dest(dest))
+    })
+
+    return buildStream
+
  }
 }

--- a/mascara/proxy/index.html
+++ b/mascara/proxy/index.html
@ -17,4 +17,4 @@
  Hello! I am the MetaMask iframe.
  <script src="./proxy.js"></script>
 </body>
-</html>
+</html>
--- a/mascara/server/index.js
+++ b/mascara/server/index.js
@ -1,7 +1,5 @@
 const path = require('path')
 const express = require('express')
-const createBundle = require('./util').createBundle
-const serveBundle = require('./util').serveBundle
 const compression = require('compression')

 module.exports = createMetamascaraServer
@ -9,27 +7,14 @@ module.exports = createMetamascaraServer

 function createMetamascaraServer () {

-  // start bundlers
-  const metamascaraBundle = createBundle(path.join(__dirname, '/../src/mascara.js'))
-  const proxyBundle = createBundle(path.join(__dirname, '/../src/proxy.js'))
-  const uiBundle = createBundle(path.join(__dirname, '/../src/ui.js'))
-  const backgroundBuild = createBundle(path.join(__dirname, '/../src/background.js'))
-
-  // serve bundles
+  // setup server
  const server = express()
  server.use(compression())

-  // ui window
-  serveBundle(server, '/ui.js', uiBundle)
+  // serve assets
  server.use(express.static(path.join(__dirname, '/../ui/'), { setHeaders: (res) => res.set('X-Frame-Options', 'DENY') }))
-  server.use(express.static(path.join(__dirname, '/../../dist/chrome')))
-  // metamascara
-  serveBundle(server, '/metamascara.js', metamascaraBundle)
-  // proxy
-  serveBundle(server, '/proxy/proxy.js', proxyBundle)
-  server.use('/proxy/', express.static(path.join(__dirname, '/../proxy')))
-  // background
-  serveBundle(server, '/background.js', backgroundBuild)
+  server.use(express.static(path.join(__dirname, '/../../dist/mascara')))
+  server.use(express.static(path.join(__dirname, '/../proxy')))

  return server

--- a/mascara/src/background.js
+++ b/mascara/src/background.js
@ -30,15 +30,19 @@ global.addEventListener('activate', function (event) {

 log.debug('inside:open')

-
-// // state persistence
+// state persistence
 const dbController = new DbController({
  key: STORAGE_KEY,
 })
-loadStateFromPersistence()
-.then((initState) => setupController(initState))
-.then(() => log.debug('MetaMask initialization complete.'))
-.catch((err) => console.error('WHILE SETTING UP:', err))
+
+start().catch(log.error)
+
+async function start() {
+  log.debug('MetaMask initializing...')
+  const initState = await loadStateFromPersistence()
+  await setupController(initState)
+  log.debug('MetaMask initialization complete.')
+}

 //
 // State and Persistence
--- a/mascara/src/metamascara.js
+++ b/mascara/src/metamascara.js
--- a/mascara/src/proxy.js
+++ b/mascara/src/proxy.js
@ -1,13 +1,13 @@
 const createParentStream = require('iframe-stream').ParentStream
-const SWcontroller = require('client-sw-ready-event/lib/sw-client.js')
+const SwController = require('sw-controller')
 const SwStream = require('sw-stream/lib/sw-stream.js')

-const intervalDelay = Math.floor(Math.random() * (30000 - 1000)) + 1000
-const background = new SWcontroller({
-  fileName: '/background.js',
-  letBeIdle: false,
-  wakeUpInterval: 30000,
-  intervalDelay,
+const keepAliveDelay = Math.floor(Math.random() * (30000 - 1000)) + 1000
+const background = new SwController({
+  fileName: './scripts/background.js',
+  keepAlive: true,
+  keepAliveInterval: 30000,
+  keepAliveDelay,
 })

 const pageStream = createParentStream()
--- a/mascara/src/ui.js
+++ b/mascara/src/ui.js
@ -1,6 +1,6 @@
 const injectCss = require('inject-css')
-const SWcontroller = require('client-sw-ready-event/lib/sw-client.js')
-const SwStream = require('sw-stream/lib/sw-stream.js')
+const SwController = require('sw-controller')
+const SwStream = require('sw-stream')
 const MetaMaskUiCss = require('../../ui/css')
 const MetamascaraPlatform = require('../../app/scripts/platforms/window')
 const startPopup = require('../../app/scripts/popup-core')
@ -8,27 +8,44 @@ const startPopup = require('../../app/scripts/popup-core')
 // create platform global
 global.platform = new MetamascaraPlatform()

-
 var css = MetaMaskUiCss()
 injectCss(css)
 const container = document.getElementById('app-content')

-var name = 'popup'
+const name = 'popup'
 window.METAMASK_UI_TYPE = name
 window.METAMASK_PLATFORM_TYPE = 'mascara'

-const intervalDelay = Math.floor(Math.random() * (30000 - 1000)) + 1000
+const keepAliveDelay = Math.floor(Math.random() * (30000 - 1000)) + 1000

-const background = new SWcontroller({
-  fileName: '/background.js',
-  letBeIdle: false,
-  intervalDelay,
-  wakeUpInterval: 20000,
+const swController = new SwController({
+  fileName: './background.js',
+  keepAlive: true,
+  keepAliveDelay,
+  keepAliveInterval: 20000,
 })
+
+swController.once('updatefound', windowReload)
+swController.once('ready', async () => {
+  try {
+    swController.removeListener('updatefound', windowReload)
+    console.log('swController ready')
+    await timeout(1000)
+    console.log('connecting to app')
+    await connectApp()
+    console.log('app connected')
+  } catch (err) {
+    console.error(err)
+  }
+})
+
+console.log('starting service worker')
+swController.startWorker()
+
 // Setup listener for when the service worker is read
-const connectApp = function (readSw) {
+function connectApp() {
  const connectionStream = SwStream({
-    serviceWorker: background.controller,
+    serviceWorker: swController.getWorker(),
    context: name,
  })
  return new Promise((resolve, reject) => {
@ -43,19 +60,6 @@ const connectApp = function (readSw) {
    })
  })
 }
-background.on('ready', async (sw) => {
-  try {
-    background.removeListener('updatefound', connectApp)
-    await timeout(1000)
-    await connectApp(sw)
-    console.log('hello from cb ready event!')
-  } catch (e) {
-    console.error(e)
-  }
-})
-background.on('updatefound', windowReload)
-
-background.startWorker()

 function windowReload () {
  if (window.METAMASK_SKIP_RELOAD) return
--- a/mascara/ui/index.html
+++ b/mascara/ui/index.html
@ -7,6 +7,6 @@
  </head>
  <body>
    <div id="app-content"></div>
-    <script src="./ui.js" type="text/javascript" charset="utf-8"></script>
+    <script src="./scripts/ui.js" type="text/javascript" charset="utf-8"></script>
  </body>
-</html>
+</html>
--- a/old-ui/app/app.js
+++ b/old-ui/app/app.js
@ -171,7 +171,7 @@ App.prototype.renderAppBar = function () {
          h('img', {
            height: 24,
            width: 24,
-            src: '/images/icon-128.png',
+            src: './images/icon-128.png',
          }),

          h(NetworkIndicator, {
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -4,14 +4,9 @@
  "public": false,
  "private": true,
  "scripts": {
-    "start": "npm run dev",
-    "dev": "gulp dev --debug",
-    "ui": "npm run test:flat:build:states && beefy development/ui-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./",
-    "mock": "beefy development/mock-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./",
-    "watch": "mocha watch --recursive \"test/unit/**/*.js\"",
-    "mascara": "gulp build && cross-env METAMASK_DEBUG=true node ./mascara/example/server",
-    "dist": "npm run dist:clear && npm install && gulp dist",
-    "dist:clear": "rm -rf node_modules/eth-contract-metadata && rm -rf node_modules/eth-phishing-detect",
+    "start": "gulp dev:extension",
+    "mascara": "gulp dev:mascara & cross-env METAMASK_DEBUG=true node ./mascara/example/server",
+    "dist": "gulp dist",
    "test": "npm run test:unit && npm run test:integration && npm run lint",
    "test:unit": "cross-env METAMASK_ENV=test mocha --exit --require babel-core/register --require test/helper.js --recursive \"test/unit/**/*.js\"",
    "test:single": "cross-env METAMASK_ENV=test mocha --require test/helper.js",
@ -45,6 +40,9 @@
    "sentry:upload:maps": "sentry-cli releases --org 'metamask' --project 'metamask' files $RELEASE upload-sourcemaps ./dist/sourcemaps/ --url-prefix 'sourcemaps' --rewrite",
    "lint": "gulp lint",
    "lint:fix": "gulp lint:fix",
+    "ui": "npm run test:flat:build:states && beefy development/ui-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./",
+    "mock": "beefy development/mock-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./",
+    "watch": "mocha watch --recursive \"test/unit/**/*.js\"",
    "disc": "gulp disc --debug",
    "announce": "node development/announcer.js",
    "version:bump": "node development/run-version-bump.js",
@ -82,7 +80,6 @@
    "browserify-derequire": "^0.9.4",
    "browserify-unibabel": "^3.0.0",
    "classnames": "^2.2.5",
-    "client-sw-ready-event": "^3.3.0",
    "clone": "^2.1.1",
    "copy-to-clipboard": "^3.0.8",
    "debounce": "^1.0.0",
@ -122,6 +119,7 @@
    "fuse.js": "^3.2.0",
    "gulp": "github:gulpjs/gulp#4.0",
    "gulp-autoprefixer": "^5.0.0",
+    "gulp-debug": "^3.2.0",
    "gulp-eslint": "^4.0.0",
    "gulp-sass": "^3.1.0",
    "hat": "0.0.3",
@ -183,7 +181,8 @@
    "semaphore": "^1.0.5",
    "semver": "^5.4.1",
    "shallow-copy": "0.0.1",
-    "sw-stream": "^2.0.0",
+    "sw-controller": "^1.0.3",
+    "sw-stream": "^2.0.2",
    "textarea-caret": "^3.0.1",
    "through2": "^2.0.3",
    "valid-url": "^1.0.9",
--- a/test/e2e/metamask.spec.js
+++ b/test/e2e/metamask.spec.js
@ -44,7 +44,7 @@ describe('Metamask popup page', function () {

    it('should match title', async () => {
      const title = await driver.getTitle()
-      assert.equal(title, 'MetaMask Plugin', 'title matches MetaMask Plugin')
+      assert.equal(title, 'MetaMask', 'title matches MetaMask')
    })

    it('should show privacy notice', async () => {
--- a/ui/app/app.js
+++ b/ui/app/app.js
@ -294,7 +294,7 @@ App.prototype.renderAppBar = function () {
            h('img.metafox-icon', {
              height: 42,
              width: 42,
-              src: '/images/metamask-fox.svg',
+              src: './images/metamask-fox.svg',
            }),

            // metamask name
--- a/ui/app/components/identicon.js
+++ b/ui/app/components/identicon.js
@ -47,7 +47,7 @@ IdenticonComponent.prototype.render = function () {
    )
    : (
      h('img.balance-icon', {
-        src: '../images/eth_logo.svg',
+        src: './images/eth_logo.svg',
        style: {
          height: diameter,
          width: diameter,
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@ -150,7 +150,7 @@ DepositEtherModal.prototype.render = function () {

        this.renderRow({
          logo: h('img.deposit-ether-modal__logo', {
-            src: '../../../images/deposit-eth.svg',
+            src: './images/deposit-eth.svg',
          }),
          title: DIRECT_DEPOSIT_ROW_TITLE,
          text: DIRECT_DEPOSIT_ROW_TEXT,
@ -171,7 +171,7 @@ DepositEtherModal.prototype.render = function () {
        this.renderRow({
          logo: h('div.deposit-ether-modal__logo', {
            style: {
-              backgroundImage: 'url(\'../../../images/coinbase logo.png\')',
+              backgroundImage: 'url(\'./images/coinbase logo.png\')',
              height: '40px',
            },
          }),
@ -185,7 +185,7 @@ DepositEtherModal.prototype.render = function () {
        this.renderRow({
          logo: h('div.deposit-ether-modal__logo', {
            style: {
-              backgroundImage: 'url(\'../../../images/shapeshift logo.png\')',
+              backgroundImage: 'url(\'./images/shapeshift logo.png\')',
            },
          }),
          title: SHAPESHIFT_ROW_TITLE,
--- a/ui/app/components/sender-to-recipient.js
+++ b/ui/app/components/sender-to-recipient.js
@ -46,7 +46,7 @@ class SenderToRecipient extends Component {
            h('img', {
              height: 15,
              width: 15,
-              src: '/images/arrow-right.svg',
+              src: './images/arrow-right.svg',
            }),
          ]),
        ]),
--- a/ui/app/css/itcss/settings/typography.scss
+++ b/ui/app/css/itcss/settings/typography.scss
@ -1,4 +1,4 @@
-@import url('/fonts/Font_Awesome/font-awesome.min.css');
+@import url('./fonts/Font_Awesome/font-awesome.min.css');

@font-face {
  font-family: 'Roboto';
@ -338,8 +338,8 @@

@font-face {
  font-family: 'Montserrat Regular';
-  src: url('/fonts/Montserrat/Montserrat-Regular.woff') format('woff');
-  src: url('/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
+  src: url('./fonts/Montserrat/Montserrat-Regular.woff') format('woff');
+  src: url('./fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-size: 'small';
@ -347,59 +347,59 @@

@font-face {
  font-family: 'Montserrat Bold';
-  src: url('/fonts/Montserrat/Montserrat-Bold.woff') format('woff');
-  src: url('/fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
+  src: url('./fonts/Montserrat/Montserrat-Bold.woff') format('woff');
+  src: url('./fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
 }

@font-face {
  font-family: 'Montserrat Light';
-  src: url('/fonts/Montserrat/Montserrat-Light.woff') format('woff');
-  src: url('/fonts/Montserrat/Montserrat-Light.ttf') format('truetype');
+  src: url('./fonts/Montserrat/Montserrat-Light.woff') format('woff');
+  src: url('./fonts/Montserrat/Montserrat-Light.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
 }

@font-face {
  font-family: 'Montserrat UltraLight';
-  src: url('/fonts/Montserrat/Montserrat-UltraLight.woff') format('woff');
-  src: url('/fonts/Montserrat/Montserrat-UltraLight.ttf') format('truetype');
+  src: url('./fonts/Montserrat/Montserrat-UltraLight.woff') format('woff');
+  src: url('./fonts/Montserrat/Montserrat-UltraLight.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
 }

@font-face {
  font-family: 'DIN OT';
-  src: url('/fonts/DIN_OT/DINOT-2.otf') format('opentype');
+  src: url('./fonts/DIN_OT/DINOT-2.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
 }

@font-face {
  font-family: 'DIN OT Light';
-  src: url('/fonts/DIN_OT/DINOT-2.otf') format('opentype');
+  src: url('./fonts/DIN_OT/DINOT-2.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
 }

@font-face {
  font-family: 'DIN NEXT';
-  src: url('/fonts/DIN Next/DIN Next W01 Regular.otf') format('opentype');
+  src: url('./fonts/DIN Next/DIN Next W01 Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
 }

@font-face {
  font-family: 'DIN NEXT Light';
-  src: url('/fonts/DIN Next/DIN Next W10 Light.otf') format('opentype');
+  src: url('./fonts/DIN Next/DIN Next W10 Light.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
 }

@font-face {
  font-family: 'Lato';
-  src: url('/fonts/Lato/Lato-Regular.ttf') format('truetype');
+  src: url('./fonts/Lato/Lato-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
 }
--- a/ui/app/settings.js
+++ b/ui/app/settings.js
@ -108,11 +108,12 @@ class Settings extends Component {
  renderCurrentLocale () {
    const { updateCurrentLocale, currentLocale } = this.props
    const currentLocaleMeta = locales.find(locale => locale.code === currentLocale)
+    const currentLocaleName = currentLocaleMeta ? currentLocaleMeta.name : ''

    return h('div.settings__content-row', [
      h('div.settings__content-item', [
        h('span', 'Current Language'),
-        h('span.settings__content-description', `${currentLocaleMeta.name}`),
+        h('span.settings__content-description', `${currentLocaleName}`),
      ]),
      h('div.settings__content-item', [
        h('div.settings__content-item-col', [
--- a/ui/i18n-helper.js
+++ b/ui/i18n-helper.js
@ -27,7 +27,7 @@ const getMessage = (locale, key, substitutions) => {

 function fetchLocale (localeName) {
  return new Promise((resolve, reject) => {
-    return fetch(`/_locales/${localeName}/messages.json`)
+    return fetch(`./_locales/${localeName}/messages.json`)
      .then(response => response.json())
      .then(
        locale => resolve(locale),