create separate js bundles for upload/download pages

This commit is contained in:
Danny Coates 2017-07-21 15:38:35 -07:00
parent 7243a10340
commit 31b810eb7d
No known key found for this signature in database
GPG Key ID: 4C442633C62E00CB
13 changed files with 252 additions and 1058 deletions

View File

@ -1,4 +1,5 @@
public/bundle.js public/upload.js
public/download.js
public/webcrypto-shim.js public/webcrypto-shim.js
test/frontend/bundle.js test/frontend/bundle.js
firefox firefox

3
.gitignore vendored
View File

@ -1,6 +1,7 @@
.DS_Store .DS_Store
node_modules node_modules
public/bundle.js public/upload.js
public/download.js
public/version.json public/version.json
static/* static/*
!static/info.txt !static/info.txt

View File

@ -16,7 +16,7 @@ deployment:
latest: latest:
branch: master branch: master
commands: commands:
- npm run predocker - npm run build
- docker login -e $DOCKER_EMAIL -u $DOCKER_USER -p $DOCKER_PASS - docker login -e $DOCKER_EMAIL -u $DOCKER_USER -p $DOCKER_PASS
- docker build -t mozilla/send:latest . - docker build -t mozilla/send:latest .
- docker push mozilla/send:latest - docker push mozilla/send:latest
@ -24,7 +24,7 @@ deployment:
tag: /.*/ tag: /.*/
owner: mozilla owner: mozilla
commands: commands:
- npm run predocker - npm run build
- docker login -e $DOCKER_EMAIL -u $DOCKER_USER -p $DOCKER_PASS - docker login -e $DOCKER_EMAIL -u $DOCKER_USER -p $DOCKER_PASS
- docker build -t mozilla/send:$CIRCLE_TAG . - docker build -t mozilla/send:$CIRCLE_TAG .
- docker push mozilla/send:$CIRCLE_TAG - docker push mozilla/send:$CIRCLE_TAG

View File

@ -8,6 +8,3 @@ window.analytics = new testPilotGA({
ds: 'web', ds: 'web',
tid: window.trackerId tid: window.trackerId
}) })
require('./upload');
require('./download');

View File

@ -1,3 +1,4 @@
require('./common');
const FileReceiver = require('./fileReceiver'); const FileReceiver = require('./fileReceiver');
const { notify, findMetric, sendEvent } = require('./utils'); const { notify, findMetric, sendEvent } = require('./utils');
const bytes = require('bytes'); const bytes = require('bytes');
@ -13,35 +14,32 @@ $(document).ready(function() {
//link back to homepage //link back to homepage
$('.send-new').attr('href', window.location.origin); $('.send-new').attr('href', window.location.origin);
if (location.pathname.toString().includes('download')) { $('.send-new').click(function(target) {
$('.send-new').click(function(target) { target.preventDefault();
target.preventDefault(); sendEvent('recipient', 'restarted', {
sendEvent('recipient', 'restarted', { cd2: 'completed'
cd2: 'completed'
})
.then(() => {
location.href = target.currentTarget.href;
});
}) })
.then(() => {
location.href = target.currentTarget.href;
});
})
$('.legal-links a, .social-links a, #dl-firefox').click(function(target) { $('.legal-links a, .social-links a, #dl-firefox').click(function(target) {
target.preventDefault(); target.preventDefault();
const metric = findMetric(target.currentTarget.href); const metric = findMetric(target.currentTarget.href);
// record exited event by recipient // record exited event by recipient
sendEvent('recipient', 'exited', { sendEvent('recipient', 'exited', {
cd3: metric cd3: metric
})
.then(() => {
location.href = target.currentTarget.href;
});
}) })
.then(() => {
location.href = target.currentTarget.href;
});
})
$('#expired-send-new').click(function() { $('#expired-send-new').click(function() {
storage.referrer = 'errored-download'; storage.referrer = 'errored-download';
}) })
}
const filename = $('#dl-filename').html(); const filename = $('#dl-filename').html();
const bytelength = Number($('#dl-bytelength').text()); const bytelength = Number($('#dl-bytelength').text());
@ -58,10 +56,10 @@ $(document).ready(function() {
$('#download-btn').click(download); $('#download-btn').click(download);
function download() { function download() {
storage.totalDownloads += 1; storage.totalDownloads += 1;
const fileReceiver = new FileReceiver(); const fileReceiver = new FileReceiver();
const unexpiredFiles = storage.numFiles; const unexpiredFiles = storage.numFiles;
fileReceiver.on('progress', progress => { fileReceiver.on('progress', progress => {

View File

@ -1,4 +1,5 @@
/* global MAXFILESIZE */ /* global MAXFILESIZE */
require('./common');
const FileSender = require('./fileSender'); const FileSender = require('./fileSender');
const { notify, gcmCompliant, findMetric, sendEvent, ONE_DAY_IN_MS } = require('./utils'); const { notify, gcmCompliant, findMetric, sendEvent, ONE_DAY_IN_MS } = require('./utils');
const bytes = require('bytes'); const bytes = require('bytes');
@ -18,114 +19,113 @@ if (storage.has('referrer')) {
} }
$(document).ready(function() { $(document).ready(function() {
if (!location.pathname.toString().includes('download')) {
gcmCompliant() gcmCompliant()
.catch(err => { .catch(err => {
$('#page-one').attr('hidden', true); $('#page-one').attr('hidden', true);
$('#unsupported-browser').removeAttr('hidden'); $('#unsupported-browser').removeAttr('hidden');
// record unsupported event // record unsupported event
sendEvent('sender', 'unsupported', { sendEvent('sender', 'unsupported', {
cd6: err cd6: err
}); });
});
$('#file-upload').change(onUpload);
$('.legal-links a, .social-links a, #dl-firefox').click(function(target) {
target.preventDefault();
const metric = findMetric(target.currentTarget.href);
// record exited event by recipient
sendEvent('sender', 'exited', {
cd3: metric
})
.then(() => {
location.href = target.currentTarget.href;
}); });
})
$('#file-upload').change(onUpload); $('#send-new-completed').click(function(target) {
target.preventDefault();
$('.legal-links a, .social-links a, #dl-firefox').click(function(target) { // record restarted event
target.preventDefault(); sendEvent('sender', 'restarted', {
const metric = findMetric(target.currentTarget.href); cd2: 'completed'
// record exited event by recipient
sendEvent('sender', 'exited', {
cd3: metric
})
.then(() => {
location.href = target.currentTarget.href;
});
}) })
.then(() => {
storage.referrer = 'completed-upload';
location.href = target.currentTarget.href;
});
})
$('#send-new-completed').click(function(target) { $('#send-new-error').click(function(target) {
target.preventDefault(); target.preventDefault();
// record restarted event // record restarted event
sendEvent('sender', 'restarted', { sendEvent('sender', 'restarted', {
cd2: 'completed' cd2: 'errored'
})
.then(() => {
storage.referrer = 'completed-upload';
location.href = target.currentTarget.href;
});
}) })
.then(() => {
storage.referrer = 'errored-upload';
location.href = target.currentTarget.href;
});
})
$('#send-new-error').click(function(target) { $('body').on('dragover', allowDrop).on('drop', onUpload);
target.preventDefault(); // reset copy button
// record restarted event const $copyBtn = $('#copy-btn');
sendEvent('sender', 'restarted', { $copyBtn.attr('disabled', false);
cd2: 'errored' $('#link').attr('disabled', false);
}) $copyBtn.attr('data-l10n-id', 'copyUrlFormButton');
.then(() => {
storage.referrer = 'errored-upload';
location.href = target.currentTarget.href;
});
})
$('body').on('dragover', allowDrop).on('drop', onUpload); const files = storage.files;
// reset copy button console.log(files);
const $copyBtn = $('#copy-btn'); if (files.length === 0) {
$copyBtn.attr('disabled', false); toggleHeader();
$('#link').attr('disabled', false); } else {
$copyBtn.attr('data-l10n-id', 'copyUrlFormButton'); for (const index in files) {
const id = files[index].fileId;
const files = storage.files; //check if file still exists before adding to list
console.log(files); checkExistence(id, files[index], true);
if (files.length === 0) {
toggleHeader();
} else {
for (const index in files) {
const id = files[index].fileId;
//check if file still exists before adding to list
checkExistence(id, files[index], true);
}
} }
// copy link to clipboard
$copyBtn.click(() => {
// record copied event from success screen
sendEvent('sender', 'copied', {
cd4: 'success-screen'
});
const aux = document.createElement('input');
aux.setAttribute('value', $('#link').attr('value'));
document.body.appendChild(aux);
aux.select();
document.execCommand('copy');
document.body.removeChild(aux);
//disable button for 3s
$copyBtn.attr('disabled', true);
$('#link').attr('disabled', true);
$copyBtn.html('<img src="/resources/check-16.svg" class="icon-check"></img>');
window.setTimeout(() => {
$copyBtn.attr('disabled', false);
$('#link').attr('disabled', false);
$copyBtn.attr('data-l10n-id', 'copyUrlFormButton');
}, 3000);
});
$('.upload-window').on('dragover', () => {
$('.upload-window').addClass('ondrag');
});
$('.upload-window').on('dragleave', () => {
$('.upload-window').removeClass('ondrag');
});
//initiate progress bar
$('#ul-progress').circleProgress({
value: 0.0,
startAngle: -Math.PI / 2,
fill: '#3B9DFF',
size: 158,
animation: { duration: 300 }
});
} }
// copy link to clipboard
$copyBtn.click(() => {
// record copied event from success screen
sendEvent('sender', 'copied', {
cd4: 'success-screen'
});
const aux = document.createElement('input');
aux.setAttribute('value', $('#link').attr('value'));
document.body.appendChild(aux);
aux.select();
document.execCommand('copy');
document.body.removeChild(aux);
//disable button for 3s
$copyBtn.attr('disabled', true);
$('#link').attr('disabled', true);
$copyBtn.html('<img src="/resources/check-16.svg" class="icon-check"></img>');
window.setTimeout(() => {
$copyBtn.attr('disabled', false);
$('#link').attr('disabled', false);
$copyBtn.attr('data-l10n-id', 'copyUrlFormButton');
}, 3000);
});
$('.upload-window').on('dragover', () => {
$('.upload-window').addClass('ondrag');
});
$('.upload-window').on('dragleave', () => {
$('.upload-window').removeClass('ondrag');
});
//initiate progress bar
$('#ul-progress').circleProgress({
value: 0.0,
startAngle: -Math.PI / 2,
fill: '#3B9DFF',
size: 158,
animation: { duration: 300 }
});
//link back to homepage //link back to homepage
$('.send-new').attr('href', window.location); $('.send-new').attr('href', window.location);
@ -170,7 +170,7 @@ $(document).ready(function() {
notify(str); notify(str);
}); });
storage.referrer = 'cancelled-upload'; storage.referrer = 'cancelled-upload';
// record upload-stopped (cancelled) by sender // record upload-stopped (cancelled) by sender
sendEvent('sender', 'upload-stopped', { sendEvent('sender', 'upload-stopped', {
cm1: file.size, cm1: file.size,

995
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -4,7 +4,7 @@
"version": "0.2.0", "version": "0.2.0",
"author": "Mozilla (https://mozilla.org)", "author": "Mozilla (https://mozilla.org)",
"dependencies": { "dependencies": {
"aws-sdk": "^2.87.0", "aws-sdk": "^2.88.0",
"body-parser": "^1.17.2", "body-parser": "^1.17.2",
"bytes": "^2.5.0", "bytes": "^2.5.0",
"connect-busboy": "0.0.2", "connect-busboy": "0.0.2",
@ -12,7 +12,7 @@
"cross-env": "^5.0.1", "cross-env": "^5.0.1",
"express": "^4.15.3", "express": "^4.15.3",
"express-handlebars": "^3.0.0", "express-handlebars": "^3.0.0",
"helmet": "^3.6.1", "helmet": "^3.8.0",
"jquery": "^3.2.1", "jquery": "^3.2.1",
"jquery-circle-progress": "^1.2.2", "jquery-circle-progress": "^1.2.2",
"l20n": "^5.0.0", "l20n": "^5.0.0",
@ -20,14 +20,11 @@
"raven": "^2.1.0", "raven": "^2.1.0",
"raven-js": "^3.17.0", "raven-js": "^3.17.0",
"redis": "^2.7.1", "redis": "^2.7.1",
"selenium-webdriver": "^3.4.0", "testpilot-ga": "^0.3.0"
"supertest": "^3.0.0",
"testpilot-ga": "^0.3.0",
"uglify-es": "3.0.19"
}, },
"devDependencies": { "devDependencies": {
"browserify": "^14.4.0", "browserify": "^14.4.0",
"eslint": "^4.2.0", "eslint": "^4.3.0",
"eslint-plugin-mocha": "^4.11.0", "eslint-plugin-mocha": "^4.11.0",
"eslint-plugin-node": "^5.1.1", "eslint-plugin-node": "^5.1.1",
"eslint-plugin-security": "^1.4.0", "eslint-plugin-security": "^1.4.0",
@ -36,10 +33,12 @@
"npm-run-all": "^4.0.2", "npm-run-all": "^4.0.2",
"prettier": "^1.5.3", "prettier": "^1.5.3",
"proxyquire": "^1.8.0", "proxyquire": "^1.8.0",
"selenium-webdriver": "^3.4.0",
"sinon": "^2.3.8", "sinon": "^2.3.8",
"stylelint": "^7.13.0", "stylelint": "^7.13.0",
"stylelint-config-standard": "^16.0.0", "stylelint-config-standard": "^16.0.0",
"watchify": "^3.9.0" "supertest": "^3.0.0",
"uglifyify": "^4.0.3"
}, },
"engines": { "engines": {
"node": ">=8.0.0" "node": ">=8.0.0"
@ -48,15 +47,19 @@
"license": "MPL-2.0", "license": "MPL-2.0",
"repository": "mozilla/send", "repository": "mozilla/send",
"scripts": { "scripts": {
"predocker": "browserify frontend/src/main.js | uglifyjs > public/bundle.js && npm run version", "build": "npm-run-all build:*",
"dev": "npm run version && watchify frontend/src/main.js -o public/bundle.js -d | node server/server", "build:upload": "browserify frontend/src/upload.js -g uglifyify -o public/upload.js",
"build:download": "browserify frontend/src/download.js -g uglifyify -o public/download.js",
"build:version": "node scripts/version",
"dev": "npm run build && npm start",
"format": "prettier '{frontend/src/,scripts/,server/,test/}*.js' 'public/*.css' --single-quote --write", "format": "prettier '{frontend/src/,scripts/,server/,test/}*.js' 'public/*.css' --single-quote --write",
"lint": "npm-run-all lint:*", "lint": "npm-run-all lint:*",
"lint:css": "stylelint 'public/*.css'", "lint:css": "stylelint 'public/*.css'",
"lint:js": "eslint .", "lint:js": "eslint .",
"start": "node server/server", "start": "node server/server",
"test": "mocha test/unit && mocha test/server && npm run test-browser && node test/frontend/driver.js", "test": "npm-run-all test:*",
"test-browser": "browserify test/frontend/frontend.bundle.js -o test/frontend/bundle.js -d", "test:unit": "mocha test/unit",
"version": "node scripts/version" "test:server": "mocha test/server",
"test:browser": "browserify test/frontend/frontend.bundle.js -o test/frontend/bundle.js -d && node test/frontend/driver.js"
} }
} }

View File

@ -124,7 +124,7 @@ app.get('/download/:id', (req, res) => {
}) })
}) })
.catch(() => { .catch(() => {
res.render('download'); res.status(404).render('notfound');
}); });
}); });
}); });

View File

@ -1,5 +1,5 @@
<div id="download"> <div id="download">
{{#if filename}} <script src="/download.js"></script>
<div id="download-page-one"> <div id="download-page-one">
<div class="title"> <div class="title">
<span id="dl-filename" <span id="dl-filename"
@ -36,13 +36,4 @@
</div> </div>
<a class="send-new" data-l10n-id="sendYourFilesLink"></a> <a class="send-new" data-l10n-id="sendYourFilesLink"></a>
{{else}}
<div class="title" data-l10n-id="expiredPageHeader"></div>
<div class="share-window">
<img src="/resources/illustration_expired.svg" id="expired-img" data-l10n-id="linkExpiredAlt"/>
</div>
<div class="expired-description" data-l10n-id="uploadPageExplainer"></div>
<a class="send-new" id="expired-send-new" data-l10n-id="sendYourFilesLink"></a>
{{/if}}
</div> </div>

View File

@ -1,4 +1,5 @@
<div id="page-one"> <div id="page-one">
<script src="/upload.js"></script>
<div class="title" data-l10n-id="uploadPageHeader"></div> <div class="title" data-l10n-id="uploadPageHeader"></div>
<div class="description"> <div class="description">
<div data-l10n-id="uploadPageExplainer"></div> <div data-l10n-id="uploadPageExplainer"></div>

View File

@ -3,7 +3,6 @@
<head> <head>
<title>Firefox Send</title> <title>Firefox Send</title>
<script src="/jsconfig.js"></script> <script src="/jsconfig.js"></script>
<script src="/bundle.js"></script>
<link rel="stylesheet" type="text/css" href="/main.css" /> <link rel="stylesheet" type="text/css" href="/main.css" />
<link rel="stylesheet" href="https://code.cdn.mozilla.net/fonts/fira.css"> <link rel="stylesheet" href="https://code.cdn.mozilla.net/fonts/fira.css">

View File

@ -0,0 +1,8 @@
<div id="download">
<div class="title" data-l10n-id="expiredPageHeader"></div>
<div class="share-window">
<img src="/resources/illustration_expired.svg" id="expired-img" data-l10n-id="linkExpiredAlt"/>
</div>
<div class="expired-description" data-l10n-id="uploadPageExplainer"></div>
<a class="send-new" id="expired-send-new" data-l10n-id="sendYourFilesLink"></a>
</div>