m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

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

Browse Source
This commit is contained in:
kumavis 2018-03-30 13:57:50 -07:00
commit 7dde948c45
26 changed files with 1246 additions and 664 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
.circleci/config.yml
View File

@ -103,6 +103,32 @@ jobs:
key: build-cache-{{ .Revision }} key: build-cache-{{ .Revision }}
paths: paths:
- dist - 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: prep-scss:
docker: docker:

4
app/home.html
View File

@ -3,10 +3,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
<title>MetaMask Plugin</title> <title>MetaMask</title>
</head> </head>
<body> <body>
<div id="app-content"></div> <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> </body>
</html> </html>

8
app/manifest.json
View File

@ -27,8 +27,8 @@
"default_locale": "en", "default_locale": "en",
"background": { "background": {
"scripts": [ "scripts": [
"scripts/chromereload.js", "chromereload.js",
"scripts/background.js" "background.js"
], ],
"persistent": true "persistent": true
}, },
@ -48,7 +48,7 @@
"https://*/*" "https://*/*"
], ],
"js": [ "js": [
"scripts/contentscript.js" "contentscript.js"
], ],
"run_at": "document_start", "run_at": "document_start",
"all_frames": true "all_frames": true
@ -62,7 +62,7 @@
"https://*.infura.io/" "https://*.infura.io/"
], ],
"web_accessible_resources": [ "web_accessible_resources": [
"scripts/inpage.js" "inpage.js"
], ],
"externally_connectable": { "externally_connectable": {
"matches": [ "matches": [

2
app/notification.html
View File

@ -11,6 +11,6 @@
</head> </head>
<body class="notification" style="height:600px;"> <body class="notification" style="height:600px;">
<div id="app-content"></div> <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> </body>
</html> </html>

4
app/popup.html
View File

@ -3,10 +3,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
<title>MetaMask Plugin</title> <title>MetaMask</title>
</head> </head>
<body style="width:357px; height:600px;"> <body style="width:357px; height:600px;">
<div id="app-content"></div> <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> </body>
</html> </html>

4
app/scripts/contentscript.js
View File

@ -7,8 +7,8 @@ const ObjectMultiplex = require('obj-multiplex')
const extension = require('extensionizer') const extension = require('extensionizer')
const PortStream = require('./lib/port-stream.js') const PortStream = require('./lib/port-stream.js')
const inpageContent = fs.readFileSync(path.join(__dirname, '..', '..', 'dist', 'chrome', 'scripts', 'inpage.js')).toString() const inpageContent = fs.readFileSync(path.join(__dirname, '..', '..', 'dist', 'chrome', 'inpage.js')).toString()
const inpageSuffix = '//# sourceURL=' + extension.extension.getURL('scripts/inpage.js') + '\n' const inpageSuffix = '//# sourceURL=' + extension.extension.getURL('inpage.js') + '\n'
const inpageBundle = inpageContent + inpageSuffix const inpageBundle = inpageContent + inpageSuffix
// Eventually this streaming injection could be replaced with: // Eventually this streaming injection could be replaced with:

0
app/scripts/popup.js → app/scripts/ui.js
View File

607
gulpfile.js
View File

@ -1,37 +1,51 @@
var watchify = require('watchify') const watchify = require('watchify')
var browserify = require('browserify') const browserify = require('browserify')
var disc = require('disc') const disc = require('disc')
var gulp = require('gulp') const gulp = require('gulp')
var source = require('vinyl-source-stream') const source = require('vinyl-source-stream')
var buffer = require('vinyl-buffer') const buffer = require('vinyl-buffer')
var gutil = require('gulp-util') const gutil = require('gulp-util')
var watch = require('gulp-watch') const watch = require('gulp-watch')
var sourcemaps = require('gulp-sourcemaps') const sourcemaps = require('gulp-sourcemaps')
var jsoneditor = require('gulp-json-editor') const jsoneditor = require('gulp-json-editor')
var zip = require('gulp-zip') const zip = require('gulp-zip')
var assign = require('lodash.assign') const assign = require('lodash.assign')
var livereload = require('gulp-livereload') const livereload = require('gulp-livereload')
var del = require('del') const del = require('del')
var eslint = require('gulp-eslint') const eslint = require('gulp-eslint')
var fs = require('fs') const fs = require('fs')
var path = require('path') const path = require('path')
var manifest = require('./app/manifest.json') const manifest = require('./app/manifest.json')
var gulpif = require('gulp-if') const gulpif = require('gulp-if')
var replace = require('gulp-replace') const replace = require('gulp-replace')
var mkdirp = require('mkdirp') const mkdirp = require('mkdirp')
var asyncEach = require('async/each') const asyncEach = require('async/each')
var exec = require('child_process').exec const exec = require('child_process').exec
var sass = require('gulp-sass') const sass = require('gulp-sass')
var autoprefixer = require('gulp-autoprefixer') const autoprefixer = require('gulp-autoprefixer')
var gulpStylelint = require('gulp-stylelint') const gulpStylelint = require('gulp-stylelint')
var stylefmt = require('gulp-stylefmt') const stylefmt = require('gulp-stylefmt')
var uglify = require('gulp-uglify-es').default const uglify = require('gulp-uglify-es').default
var babel = require('gulp-babel') 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 const browserPlatforms = [
var debug = gutil.env.debug 'firefox',
'chrome',
'edge',
'opera',
]
const commonPlatforms = [
// browser webapp
'mascara',
// browser extensions
...browserPlatforms
]
// browser reload // 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/', source: './app/_locales/',
destinations: [ destinations: commonPlatforms.map(platform => `./dist/${platform}/_locales`),
'./dist/firefox/_locales', })
'./dist/chrome/_locales', createCopyTasks('images', {
'./dist/edge/_locales',
'./dist/opera/_locales',
]
}))
gulp.task('copy:images', copyTask({
source: './app/images/', source: './app/images/',
destinations: [ destinations: commonPlatforms.map(platform => `./dist/${platform}/images`),
'./dist/firefox/images', })
'./dist/chrome/images', createCopyTasks('contractImages', {
'./dist/edge/images',
'./dist/opera/images',
],
}))
gulp.task('copy:contractImages', copyTask({
source: './node_modules/eth-contract-metadata/images/', source: './node_modules/eth-contract-metadata/images/',
destinations: [ destinations: commonPlatforms.map(platform => `./dist/${platform}/images/contract`),
'./dist/firefox/images/contract', })
'./dist/chrome/images/contract', createCopyTasks('fonts', {
'./dist/edge/images/contract',
'./dist/opera/images/contract',
],
}))
gulp.task('copy:fonts', copyTask({
source: './app/fonts/', source: './app/fonts/',
destinations: [ destinations: commonPlatforms.map(platform => `./dist/${platform}/fonts`),
'./dist/firefox/fonts', })
'./dist/chrome/fonts', createCopyTasks('reload', {
'./dist/edge/fonts', devOnly: true,
'./dist/opera/fonts',
],
}))
gulp.task('copy:reload', copyTask({
source: './app/scripts/', source: './app/scripts/',
destinations: [
'./dist/firefox/scripts',
'./dist/chrome/scripts',
'./dist/edge/scripts',
'./dist/opera/scripts',
],
pattern: '/chromereload.js', pattern: '/chromereload.js',
})) destinations: commonPlatforms.map(platform => `./dist/${platform}`),
gulp.task('copy:root', copyTask({ })
createCopyTasks('html', {
source: './app/', source: './app/',
destinations: [ pattern: '/*.html',
'./dist/firefox', destinations: commonPlatforms.map(platform => `./dist/${platform}`),
'./dist/chrome', })
'./dist/edge',
'./dist/opera', // copy extension
],
pattern: '/*', 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() { gulp.task('manifest:chrome', function() {
return gulp.src('./dist/chrome/manifest.json') return gulp.src('./dist/chrome/manifest.json')
@ -134,7 +181,7 @@ gulp.task('manifest:production', function() {
],{base: './dist/'}) ],{base: './dist/'})
// Exclude chromereload script in production: // 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) => { json.background.scripts = json.background.scripts.filter((script) => {
return !script.includes('chromereload') return !script.includes('chromereload')
}) })
@ -144,36 +191,22 @@ gulp.task('manifest:production', function() {
.pipe(gulp.dest('./dist/', { overwrite: true })) .pipe(gulp.dest('./dist/', { overwrite: true }))
}) })
const staticFiles = [ gulp.task('copy',
'locales', gulp.series(
'images', gulp.parallel(...copyTaskNames),
'fonts', 'manifest:production',
'root' 'manifest:chrome',
] 'manifest:opera'
)
)
var copyStrings = staticFiles.map(staticFile => `copy:${staticFile}`) gulp.task('dev:copy',
copyStrings.push('copy:contractImages') gulp.series(
gulp.parallel(...copyDevTaskNames),
if (debug) { 'manifest:chrome',
copyStrings.push('copy:reload') 'manifest:opera'
} )
)
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)
})
})
// lint js // lint js
@ -196,41 +229,49 @@ gulp.task('lint:fix', function () {
.pipe(eslint.failAfterError()) .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 // scss compilation and autoprefixing tasks
gulp.task('build:scss', function () { gulp.task('build:scss', createScssBuildTask({
return gulp.src('ui/app/css/index.scss') src: 'ui/app/css/index.scss',
.pipe(sourcemaps.init()) dest: 'ui/app/css/output',
.pipe(sass().on('error', sass.logError)) devMode: false,
.pipe(sourcemaps.write()) }))
.pipe(autoprefixer())
.pipe(gulp.dest('ui/app/css/output')) gulp.task('dev:scss', createScssBuildTask({
}) src: 'ui/app/css/index.scss',
gulp.task('watch:scss', function() { dest: 'ui/app/css/output',
gulp.watch(['ui/app/css/**/*.scss'], gulp.series(['build:scss'])) 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() { gulp.task('lint-scss', function() {
return gulp return gulp
.src('ui/app/css/itcss/**/*.scss') .src('ui/app/css/itcss/**/*.scss')
.pipe(gulpStylelint({ .pipe(gulpStylelint({
reporters: [ reporters: [
{formatter: 'string', console: true} { formatter: 'string', console: true }
], ],
fix: true, fix: true,
})); }));
@ -242,46 +283,82 @@ gulp.task('fmt-scss', function () {
.pipe(gulp.dest('ui/app/css/itcss')); .pipe(gulp.dest('ui/app/css/itcss'));
}); });
// build js
const buildJsFiles = [
'inpage',
'contentscript',
'background',
'ui',
]
// bundle tasks // 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}`) function createTasksForBuildJsExtension({ buildJsFiles, taskPrefix, devMode, bundleTaskOpts = {} }) {
var jsBuildStrings = jsFiles.map(jsFile => `build:js:${jsFile}`) // 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) => { function createTasksForBuildJsMascara({ taskPrefix, devMode, bundleTaskOpts = {} }) {
gulp.task(`dev:js:${jsFile}`, bundleTask({ // inpage must be built before all other scripts:
watch: true, const rootDir = './mascara/src/'
label: jsFile, const buildPhase1 = ['ui', 'proxy', 'background', 'metamascara']
filename: `${jsFile}.js`, const destinations = ['./dist/mascara']
isBuild: false bundleTaskOpts = Object.assign({
})) buildSourceMaps: true,
gulp.task(`build:js:${jsFile}`, bundleTask({ sourceMapDir: './',
watch: false, minifyBuild: !devMode,
label: jsFile, buildWithFullPaths: devMode,
filename: `${jsFile}.js`, watch: devMode,
isBuild: true }, bundleTaskOpts)
})) createTasksForBuildJs({ rootDir, taskPrefix, bundleTaskOpts, destinations, buildPhase1 })
}) }
// inpage must be built before all other scripts: function createTasksForBuildJs({ rootDir, taskPrefix, bundleTaskOpts, destinations, buildPhase1 = [], buildPhase2 = [] }) {
const firstDevString = jsDevStrings.shift() // bundle task for each file
gulp.task('dev:js', gulp.series(firstDevString, gulp.parallel(...jsDevStrings))) 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: gulp.task(taskPrefix, gulp.series(subtasks))
const firstBuildString = jsBuildStrings.shift() }
gulp.task('build:js', gulp.series(firstBuildString, gulp.parallel(...jsBuildStrings)))
// disc bundle analyzer tasks // disc bundle analyzer tasks
jsFiles.forEach((jsFile) => { buildJsFiles.forEach((jsFile) => {
gulp.task(`disc:${jsFile}`, discTask({ label: jsFile, filename: `${jsFile}.js` })) 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 // clean dist
gulp.task('clean', function clean() { gulp.task('clean', function clean() {
return del(['./dist/*']) return del(['./dist/*'])
}) })
@ -293,40 +370,95 @@ gulp.task('zip:edge', zipTask('edge'))
gulp.task('zip:opera', zipTask('opera')) gulp.task('zip:opera', zipTask('opera'))
gulp.task('zip', gulp.parallel('zip:chrome', 'zip:firefox', 'zip:edge', 'zip: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) { gulp.task('apply-prod-environment', function(done) {
process.env.NODE_ENV = 'production' process.env.NODE_ENV = 'production'
done() done()
}); });
// high level tasks // 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('dev:extension',
gulp.task('dist', gulp.series('apply-prod-environment', 'build', 'zip')) 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 // 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) { function zipTask(target) {
return () => { return () => {
return gulp.src(`dist/${target}/**`) return gulp.src(`dist/${target}/**`)
@ -337,10 +469,10 @@ function zipTask(target) {
function generateBundler(opts, performBundle) { function generateBundler(opts, performBundle) {
const browserifyOpts = assign({}, watchify.args, { const browserifyOpts = assign({}, watchify.args, {
entries: ['./app/scripts/'+opts.filename], entries: [opts.filepath],
plugin: 'browserify-derequire', plugin: 'browserify-derequire',
debug: true, debug: opts.buildSourceMaps,
fullPaths: debug, fullPaths: opts.buildWithFullPaths,
}) })
let bundler = browserify(browserifyOpts) let bundler = browserify(browserifyOpts)
@ -348,13 +480,21 @@ function generateBundler(opts, performBundle) {
if (opts.watch) { if (opts.watch) {
bundler = watchify(bundler) bundler = watchify(bundler)
// on any file update, re-runs the 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 return bundler
} }
function discTask(opts) { function discTask(opts) {
opts = Object.assign({
buildWithFullPaths: true,
}, opts)
const bundler = generateBundler(opts, performBundle) const bundler = generateBundler(opts, performBundle)
// output build logs to terminal // output build logs to terminal
bundler.on('log', gutil.log) bundler.on('log', gutil.log)
@ -363,9 +503,9 @@ function discTask(opts) {
function performBundle(){ function performBundle(){
// start "disc" build // start "disc" build
let discDir = path.join(__dirname, 'disc') const discDir = path.join(__dirname, 'disc')
mkdirp.sync(discDir) mkdirp.sync(discDir)
let discPath = path.join(discDir, `${opts.label}.html`) const discPath = path.join(discDir, `${opts.label}.html`)
return ( return (
bundler.bundle() bundler.bundle()
@ -384,43 +524,58 @@ function bundleTask(opts) {
return performBundle return performBundle
function 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 // process bundles
.on('error', (err) => { buildStream = buildStream
beep()
if (opts.watch) {
console.warn(err.stack)
} else {
throw err
}
})
// convert bundle stream to gulp vinyl stream // convert bundle stream to gulp vinyl stream
.pipe(source(opts.filename)) .pipe(source(opts.filename))
// inject variables into bundle // inject variables into bundle
.pipe(replace('\'GULP_METAMASK_DEBUG\'', debug)) .pipe(replace('\'GULP_METAMASK_DEBUG\'', debugMode))
// buffer file contents (?) // buffer file contents (?)
.pipe(buffer()) .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
} }
} }

23
mascara/server/index.js
View File

@ -1,7 +1,5 @@
const path = require('path') const path = require('path')
const express = require('express') const express = require('express')
const createBundle = require('./util').createBundle
const serveBundle = require('./util').serveBundle
const compression = require('compression') const compression = require('compression')
module.exports = createMetamascaraServer module.exports = createMetamascaraServer
@ -9,27 +7,14 @@ module.exports = createMetamascaraServer
function createMetamascaraServer () { function createMetamascaraServer () {
// start bundlers // setup server
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
const server = express() const server = express()
server.use(compression()) server.use(compression())
// ui window // serve assets
serveBundle(server, '/ui.js', uiBundle)
server.use(express.static(path.join(__dirname, '/../ui/'), { setHeaders: (res) => res.set('X-Frame-Options', 'DENY') })) 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'))) server.use(express.static(path.join(__dirname, '/../../dist/mascara')))
// metamascara server.use(express.static(path.join(__dirname, '/../proxy')))
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)
return server return server

16
mascara/src/background.js
View File

@ -30,15 +30,19 @@ global.addEventListener('activate', function (event) {
log.debug('inside:open') log.debug('inside:open')
// state persistence
// // state persistence
const dbController = new DbController({ const dbController = new DbController({
key: STORAGE_KEY, key: STORAGE_KEY,
}) })
loadStateFromPersistence()
.then((initState) => setupController(initState)) start().catch(log.error)
.then(() => log.debug('MetaMask initialization complete.'))
.catch((err) => console.error('WHILE SETTING UP:', err)) async function start() {
log.debug('MetaMask initializing...')
const initState = await loadStateFromPersistence()
await setupController(initState)
log.debug('MetaMask initialization complete.')
}
// //
// State and Persistence // State and Persistence

0
mascara/src/mascara.js → mascara/src/metamascara.js
View File

14
mascara/src/proxy.js
View File

@ -1,13 +1,13 @@
const createParentStream = require('iframe-stream').ParentStream 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 SwStream = require('sw-stream/lib/sw-stream.js')
const intervalDelay = Math.floor(Math.random() * (30000 - 1000)) + 1000 const keepAliveDelay = Math.floor(Math.random() * (30000 - 1000)) + 1000
const background = new SWcontroller({ const background = new SwController({
fileName: '/background.js', fileName: './scripts/background.js',
letBeIdle: false, keepAlive: true,
wakeUpInterval: 30000, keepAliveInterval: 30000,
intervalDelay, keepAliveDelay,
}) })
const pageStream = createParentStream() const pageStream = createParentStream()

54
mascara/src/ui.js
View File

@ -1,6 +1,6 @@
const injectCss = require('inject-css') const injectCss = require('inject-css')
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 SwStream = require('sw-stream')
const MetaMaskUiCss = require('../../ui/css') const MetaMaskUiCss = require('../../ui/css')
const MetamascaraPlatform = require('../../app/scripts/platforms/window') const MetamascaraPlatform = require('../../app/scripts/platforms/window')
const startPopup = require('../../app/scripts/popup-core') const startPopup = require('../../app/scripts/popup-core')
@ -8,27 +8,44 @@ const startPopup = require('../../app/scripts/popup-core')
// create platform global // create platform global
global.platform = new MetamascaraPlatform() global.platform = new MetamascaraPlatform()
var css = MetaMaskUiCss() var css = MetaMaskUiCss()
injectCss(css) injectCss(css)
const container = document.getElementById('app-content') const container = document.getElementById('app-content')
var name = 'popup' const name = 'popup'
window.METAMASK_UI_TYPE = name window.METAMASK_UI_TYPE = name
window.METAMASK_PLATFORM_TYPE = 'mascara' 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({ const swController = new SwController({
fileName: '/background.js', fileName: './background.js',
letBeIdle: false, keepAlive: true,
intervalDelay, keepAliveDelay,
wakeUpInterval: 20000, 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 // Setup listener for when the service worker is read
const connectApp = function (readSw) { function connectApp() {
const connectionStream = SwStream({ const connectionStream = SwStream({
serviceWorker: background.controller, serviceWorker: swController.getWorker(),
context: name, context: name,
}) })
return new Promise((resolve, reject) => { 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 () { function windowReload () {
if (window.METAMASK_SKIP_RELOAD) return if (window.METAMASK_SKIP_RELOAD) return

2
mascara/ui/index.html
View File

@ -7,6 +7,6 @@
</head> </head>
<body> <body>
<div id="app-content"></div> <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> </body>
</html> </html>

2
old-ui/app/app.js
View File

@ -171,7 +171,7 @@ App.prototype.renderAppBar = function () {
h('img', { h('img', {
height: 24, height: 24,
width: 24, width: 24,
src: '/images/icon-128.png', src: './images/icon-128.png',
}), }),
h(NetworkIndicator, { h(NetworkIndicator, {

1070
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

19
package.json
View File

@ -4,14 +4,9 @@
"public": false, "public": false,
"private": true, "private": true,
"scripts": { "scripts": {
"start": "npm run dev", "start": "gulp dev:extension",
"dev": "gulp dev --debug", "mascara": "gulp dev:mascara & cross-env METAMASK_DEBUG=true node ./mascara/example/server",
"ui": "npm run test:flat:build:states && beefy development/ui-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./", "dist": "gulp dist",
"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",
"test": "npm run test:unit && npm run test:integration && npm run lint", "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: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", "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", "sentry:upload:maps": "sentry-cli releases --org 'metamask' --project 'metamask' files $RELEASE upload-sourcemaps ./dist/sourcemaps/ --url-prefix 'sourcemaps' --rewrite",
"lint": "gulp lint", "lint": "gulp lint",
"lint:fix": "gulp lint:fix", "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", "disc": "gulp disc --debug",
"announce": "node development/announcer.js", "announce": "node development/announcer.js",
"version:bump": "node development/run-version-bump.js", "version:bump": "node development/run-version-bump.js",
@ -82,7 +80,6 @@
"browserify-derequire": "^0.9.4", "browserify-derequire": "^0.9.4",
"browserify-unibabel": "^3.0.0", "browserify-unibabel": "^3.0.0",
"classnames": "^2.2.5", "classnames": "^2.2.5",
"client-sw-ready-event": "^3.3.0",
"clone": "^2.1.1", "clone": "^2.1.1",
"copy-to-clipboard": "^3.0.8", "copy-to-clipboard": "^3.0.8",
"debounce": "^1.0.0", "debounce": "^1.0.0",
@ -122,6 +119,7 @@
"fuse.js": "^3.2.0", "fuse.js": "^3.2.0",
"gulp": "github:gulpjs/gulp#4.0", "gulp": "github:gulpjs/gulp#4.0",
"gulp-autoprefixer": "^5.0.0", "gulp-autoprefixer": "^5.0.0",
"gulp-debug": "^3.2.0",
"gulp-eslint": "^4.0.0", "gulp-eslint": "^4.0.0",
"gulp-sass": "^3.1.0", "gulp-sass": "^3.1.0",
"hat": "0.0.3", "hat": "0.0.3",
@ -183,7 +181,8 @@
"semaphore": "^1.0.5", "semaphore": "^1.0.5",
"semver": "^5.4.1", "semver": "^5.4.1",
"shallow-copy": "0.0.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", "textarea-caret": "^3.0.1",
"through2": "^2.0.3", "through2": "^2.0.3",
"valid-url": "^1.0.9", "valid-url": "^1.0.9",

2
test/e2e/metamask.spec.js
View File

@ -44,7 +44,7 @@ describe('Metamask popup page', function () {
it('should match title', async () => { it('should match title', async () => {
const title = await driver.getTitle() 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 () => { it('should show privacy notice', async () => {

2
ui/app/app.js
View File

@ -294,7 +294,7 @@ App.prototype.renderAppBar = function () {
h('img.metafox-icon', { h('img.metafox-icon', {
height: 42, height: 42,
width: 42, width: 42,
src: '/images/metamask-fox.svg', src: './images/metamask-fox.svg',
}), }),
// metamask name // metamask name

2
ui/app/components/identicon.js
View File

@ -47,7 +47,7 @@ IdenticonComponent.prototype.render = function () {
) )
: ( : (
h('img.balance-icon', { h('img.balance-icon', {
src: '../images/eth_logo.svg', src: './images/eth_logo.svg',
style: { style: {
height: diameter, height: diameter,
width: diameter, width: diameter,

6
ui/app/components/modals/deposit-ether-modal.js
View File

@ -150,7 +150,7 @@ DepositEtherModal.prototype.render = function () {
this.renderRow({ this.renderRow({
logo: h('img.deposit-ether-modal__logo', { logo: h('img.deposit-ether-modal__logo', {
src: '../../../images/deposit-eth.svg', src: './images/deposit-eth.svg',
}), }),
title: DIRECT_DEPOSIT_ROW_TITLE, title: DIRECT_DEPOSIT_ROW_TITLE,
text: DIRECT_DEPOSIT_ROW_TEXT, text: DIRECT_DEPOSIT_ROW_TEXT,
@ -171,7 +171,7 @@ DepositEtherModal.prototype.render = function () {
this.renderRow({ this.renderRow({
logo: h('div.deposit-ether-modal__logo', { logo: h('div.deposit-ether-modal__logo', {
style: { style: {
backgroundImage: 'url(\'../../../images/coinbase logo.png\')', backgroundImage: 'url(\'./images/coinbase logo.png\')',
height: '40px', height: '40px',
}, },
}), }),
@ -185,7 +185,7 @@ DepositEtherModal.prototype.render = function () {
this.renderRow({ this.renderRow({
logo: h('div.deposit-ether-modal__logo', { logo: h('div.deposit-ether-modal__logo', {
style: { style: {
backgroundImage: 'url(\'../../../images/shapeshift logo.png\')', backgroundImage: 'url(\'./images/shapeshift logo.png\')',
}, },
}), }),
title: SHAPESHIFT_ROW_TITLE, title: SHAPESHIFT_ROW_TITLE,

2
ui/app/components/sender-to-recipient.js
View File

@ -46,7 +46,7 @@ class SenderToRecipient extends Component {
h('img', { h('img', {
height: 15, height: 15,
width: 15, width: 15,
src: '/images/arrow-right.svg', src: './images/arrow-right.svg',
}), }),
]), ]),
]), ]),

28
ui/app/css/itcss/settings/typography.scss
View File

@ -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-face {
font-family: 'Roboto'; font-family: 'Roboto';
@ -338,8 +338,8 @@
@font-face { @font-face {
font-family: 'Montserrat Regular'; font-family: 'Montserrat Regular';
src: url('/fonts/Montserrat/Montserrat-Regular.woff') format('woff'); src: url('./fonts/Montserrat/Montserrat-Regular.woff') format('woff');
src: url('/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype'); src: url('./fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-size: 'small'; font-size: 'small';
@ -347,59 +347,59 @@
@font-face { @font-face {
font-family: 'Montserrat Bold'; font-family: 'Montserrat Bold';
src: url('/fonts/Montserrat/Montserrat-Bold.woff') format('woff'); src: url('./fonts/Montserrat/Montserrat-Bold.woff') format('woff');
src: url('/fonts/Montserrat/Montserrat-Bold.ttf') format('truetype'); src: url('./fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Montserrat Light'; font-family: 'Montserrat Light';
src: url('/fonts/Montserrat/Montserrat-Light.woff') format('woff'); src: url('./fonts/Montserrat/Montserrat-Light.woff') format('woff');
src: url('/fonts/Montserrat/Montserrat-Light.ttf') format('truetype'); src: url('./fonts/Montserrat/Montserrat-Light.ttf') format('truetype');
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Montserrat UltraLight'; font-family: 'Montserrat UltraLight';
src: url('/fonts/Montserrat/Montserrat-UltraLight.woff') format('woff'); src: url('./fonts/Montserrat/Montserrat-UltraLight.woff') format('woff');
src: url('/fonts/Montserrat/Montserrat-UltraLight.ttf') format('truetype'); src: url('./fonts/Montserrat/Montserrat-UltraLight.ttf') format('truetype');
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'DIN OT'; 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-weight: 400;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'DIN OT Light'; 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-weight: 200;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'DIN NEXT'; 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-weight: 400;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'DIN NEXT Light'; 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-weight: 400;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Lato'; 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-weight: 400;
font-style: normal; font-style: normal;
} }

3
ui/app/settings.js
View File

@ -108,11 +108,12 @@ class Settings extends Component {
renderCurrentLocale () { renderCurrentLocale () {
const { updateCurrentLocale, currentLocale } = this.props const { updateCurrentLocale, currentLocale } = this.props
const currentLocaleMeta = locales.find(locale => locale.code === currentLocale) const currentLocaleMeta = locales.find(locale => locale.code === currentLocale)
const currentLocaleName = currentLocaleMeta ? currentLocaleMeta.name : ''
return h('div.settings__content-row', [ return h('div.settings__content-row', [
h('div.settings__content-item', [ h('div.settings__content-item', [
h('span', 'Current Language'), 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', [
h('div.settings__content-item-col', [ h('div.settings__content-item-col', [

2
ui/i18n-helper.js
View File

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