create separate js bundles for upload/download pages

.eslintignore

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

.gitignore

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

circle.yml

@@ -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

frontend/src/common.js

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

frontend/src/download.js

@@ -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) {
-    $('.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 bytelength = Number($('#dl-bytelength').text());

frontend/src/upload.js

@@ -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()
+  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
   $('.send-new').attr('href', window.location);
 

package.json

@@ -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",
+    "testpilot-ga": "^0.3.0"
-    "supertest": "^3.0.0",
-    "testpilot-ga": "^0.3.0",
-    "uglify-es": "3.0.19"
   },
   "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",
+    "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",
     "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": "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"
   }
 }

server/server.js

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

views/download.handlebars

@@ -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>

views/index.handlebars

@@ -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>

views/layouts/main.handlebars

@@ -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">
 

views/notfound.handlebars

@@ -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>