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
test/frontend/bundle.js
firefox
firefox

3
.gitignore vendored
View File

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

4
circle.yml
View File

@ -16,7 +16,7 @@ deployment:
latest:
branch: master
commands:
- npm run predocker
- npm run build
- docker login -e $DOCKER_EMAIL -u $DOCKER_USER -p $DOCKER_PASS
- docker build -t mozilla/send:latest .
- docker push mozilla/send:latest
@ -24,7 +24,7 @@ deployment:
tag: /.*/
owner: mozilla
commands:
- npm run predocker
- npm run build
- docker login -e $DOCKER_EMAIL -u $DOCKER_USER -p $DOCKER_PASS
- docker build -t 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',
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 { notify, findMetric, sendEvent } = require('./utils');
const bytes = require('bytes');
@ -13,35 +14,32 @@ $(document).ready(function() {
//link back to homepage
$('.send-new').attr('href', window.location.origin);
if (location.pathname.toString().includes('download')) {
$('.send-new').click(function(target) {
target.preventDefault();
sendEvent('recipient', 'restarted', {
cd2: 'completed'
})
.then(() => {
location.href = target.currentTarget.href;
});
$('.send-new').click(function(target) {
target.preventDefault();
sendEvent('recipient', 'restarted', {
cd2: 'completed'
})
.then(() => {
location.href = target.currentTarget.href;
});
})
$('.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('recipient', 'exited', {
cd3: metric
})
.then(() => {
location.href = target.currentTarget.href;
});
$('.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('recipient', 'exited', {
cd3: metric
})
.then(() => {
location.href = target.currentTarget.href;
});
})
$('#expired-send-new').click(function() {
storage.referrer = 'errored-download';
})
}
$('#expired-send-new').click(function() {
storage.referrer = 'errored-download';
})
const filename = $('#dl-filename').html();
const bytelength = Number($('#dl-bytelength').text());
@ -58,10 +56,10 @@ $(document).ready(function() {
$('#download-btn').click(download);
function download() {
storage.totalDownloads += 1;
const fileReceiver = new FileReceiver();
const unexpiredFiles = storage.numFiles;
fileReceiver.on('progress', progress => {

198
frontend/src/upload.js
View File

@ -1,4 +1,5 @@
/* global MAXFILESIZE */
require('./common');
const FileSender = require('./fileSender');
const { notify, gcmCompliant, findMetric, sendEvent, ONE_DAY_IN_MS } = require('./utils');
const bytes = require('bytes');
@ -18,114 +19,113 @@ if (storage.has('referrer')) {
}
$(document).ready(function() {
if (!location.pathname.toString().includes('download')) {
gcmCompliant()
.catch(err => {
$('#page-one').attr('hidden', true);
$('#unsupported-browser').removeAttr('hidden');
// record unsupported event
sendEvent('sender', 'unsupported', {
cd6: err
});
gcmCompliant()
.catch(err => {
$('#page-one').attr('hidden', true);
$('#unsupported-browser').removeAttr('hidden');
// record unsupported event
sendEvent('sender', 'unsupported', {
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);
$('.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;
});
$('#send-new-completed').click(function(target) {
target.preventDefault();
// record restarted event
sendEvent('sender', 'restarted', {
cd2: 'completed'
})
.then(() => {
storage.referrer = 'completed-upload';
location.href = target.currentTarget.href;
});
})
$('#send-new-completed').click(function(target) {
target.preventDefault();
// record restarted event
sendEvent('sender', 'restarted', {
cd2: 'completed'
})
.then(() => {
storage.referrer = 'completed-upload';
location.href = target.currentTarget.href;
});
$('#send-new-error').click(function(target) {
target.preventDefault();
// record restarted event
sendEvent('sender', 'restarted', {
cd2: 'errored'
})
.then(() => {
storage.referrer = 'errored-upload';
location.href = target.currentTarget.href;
});
})
$('#send-new-error').click(function(target) {
target.preventDefault();
// record restarted event
sendEvent('sender', 'restarted', {
cd2: 'errored'
})
.then(() => {
storage.referrer = 'errored-upload';
location.href = target.currentTarget.href;
});
})
$('body').on('dragover', allowDrop).on('drop', onUpload);
// reset copy button
const $copyBtn = $('#copy-btn');
$copyBtn.attr('disabled', false);
$('#link').attr('disabled', false);
$copyBtn.attr('data-l10n-id', 'copyUrlFormButton');
$('body').on('dragover', allowDrop).on('drop', onUpload);
// reset copy button
const $copyBtn = $('#copy-btn');
$copyBtn.attr('disabled', false);
$('#link').attr('disabled', false);
$copyBtn.attr('data-l10n-id', 'copyUrlFormButton');
const files = storage.files;
console.log(files);
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);
}
const files = storage.files;
console.log(files);
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
$('.send-new').attr('href', window.location);
@ -170,7 +170,7 @@ $(document).ready(function() {
notify(str);
});
storage.referrer = 'cancelled-upload';
// record upload-stopped (cancelled) by sender
sendEvent('sender', 'upload-stopped', {
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",
"author": "Mozilla (https://mozilla.org)",
"dependencies": {
"aws-sdk": "^2.87.0",
"aws-sdk": "^2.88.0",
"body-parser": "^1.17.2",
"bytes": "^2.5.0",
"connect-busboy": "0.0.2",
@ -12,7 +12,7 @@
"cross-env": "^5.0.1",
"express": "^4.15.3",
"express-handlebars": "^3.0.0",
"helmet": "^3.6.1",
"helmet": "^3.8.0",
"jquery": "^3.2.1",
"jquery-circle-progress": "^1.2.2",
"l20n": "^5.0.0",
@ -20,14 +20,11 @@
"raven": "^2.1.0",
"raven-js": "^3.17.0",
"redis": "^2.7.1",
"selenium-webdriver": "^3.4.0",
"supertest": "^3.0.0",
"testpilot-ga": "^0.3.0",
"uglify-es": "3.0.19"
"testpilot-ga": "^0.3.0"
},
"devDependencies": {
"browserify": "^14.4.0",
"eslint": "^4.2.0",
"eslint": "^4.3.0",
"eslint-plugin-mocha": "^4.11.0",
"eslint-plugin-node": "^5.1.1",
"eslint-plugin-security": "^1.4.0",
@ -36,10 +33,12 @@
"npm-run-all": "^4.0.2",
"prettier": "^1.5.3",
"proxyquire": "^1.8.0",
"selenium-webdriver": "^3.4.0",
"sinon": "^2.3.8",
"stylelint": "^7.13.0",
"stylelint-config-standard": "^16.0.0",
"watchify": "^3.9.0"
"supertest": "^3.0.0",
"uglifyify": "^4.0.3"
},
"engines": {
"node": ">=8.0.0"
@ -48,15 +47,19 @@
"license": "MPL-2.0",
"repository": "mozilla/send",
"scripts": {
"predocker": "browserify frontend/src/main.js | uglifyjs > public/bundle.js && npm run version",
"dev": "npm run version && watchify frontend/src/main.js -o public/bundle.js -d | node server/server",
"build": "npm-run-all build:*",
"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",
"lint": "npm-run-all lint:*",
"lint:css": "stylelint 'public/*.css'",
"lint:js": "eslint .",
"start": "node server/server",
"test": "mocha test/unit && mocha test/server && npm run test-browser && node test/frontend/driver.js",
"test-browser": "browserify test/frontend/frontend.bundle.js -o test/frontend/bundle.js -d",
"version": "node scripts/version"
"test": "npm-run-all test:*",
"test:unit": "mocha test/unit",
"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(() => {
res.render('download');
res.status(404).render('notfound');
});
});
});

11
views/download.handlebars
View File

@ -1,5 +1,5 @@
<div id="download">
{{#if filename}}
<script src="/download.js"></script>
<div id="download-page-one">
<div class="title">
<span id="dl-filename"
@ -36,13 +36,4 @@
</div>
<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>

1
views/index.handlebars
View File

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

1
views/layouts/main.handlebars
View File

@ -3,7 +3,6 @@
<head>
<title>Firefox Send</title>
<script src="/jsconfig.js"></script>
<script src="/bundle.js"></script>
<link rel="stylesheet" type="text/css" href="/main.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>