natty
/
fox-send
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #279 from mozilla/split 

create separate js bundles for upload/download pages
This commit is contained in:
Danny Coates 2017-07-21 16:55:50 -07:00 committed by GitHub
parent 7243a10340 31b810eb7d
commit 5ed4db9689
13 changed files with 252 additions and 1058 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.eslintignore
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

4
circle.yml
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

3
frontend/src/main.js → frontend/src/common.js
View File

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

50
frontend/src/download.js
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 => {

198
frontend/src/upload.js
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
View File

File diff suppressed because it is too large Load Diff

29
package.json
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"
} }
} }

2
server/server.js
View File

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

11
views/download.handlebars
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>

1
views/index.handlebars
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>

1
views/layouts/main.handlebars
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">

8
views/notfound.handlebars Normal file
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>