Merge branch 'master' of https://github.com/mozilla/send into responsive-and-feedback

2017-07-24 17:59:51 +02:00 · 2017-07-24 17:59:51 +02:00 · dde2c4d5a9
commit dde2c4d5a9
parent 463393552b d6823f492d
28 changed files with 1304 additions and 3659 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -5,3 +5,4 @@ static
 test
 scripts
 docs
+firefox
--- a/.eslintignore
+++ b/.eslintignore
@ -1,4 +1,3 @@
-public/bundle.js
-public/webcrypto-shim.js
+public
 test/frontend/bundle.js
-firefox
+firefox
--- a/.gitignore
+++ b/.gitignore
@ -1,7 +1,9 @@
 .DS_Store
 node_modules
-public/bundle.js
+public/upload.js
+public/download.js
 public/version.json
+public/l20n.min.js
 static/*
 !static/info.txt
 test/frontend/bundle.js
--- a/circle.yml
+++ b/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
--- a/docs/metrics.md
+++ b/docs/metrics.md
@ -32,10 +32,9 @@ Data will be collected with Google Analytics and follow [Test Pilot standards](h
 - `cd1` - the method by which the user initiated an upload. One of `drag`, `click`.
 - `cd2` - the reason that the file transfer stopped. One of `completed`, `errored`, `cancelled`.
 - `cd3` - the destination of a link click. One of `experiment-page`, `download-firefox`, `twitter`, `github`, `cookies`, `terms`, `privacy`, `about`, `legal`, `mozilla`.
- `cd4` - from where the URL for a file was copied. One of `finished-screen`, `file-list`.
+- `cd4` - the location from which the user copied the URL to an upload file. One of `success-screen`, `upload-list`.
 - `cd5` - the referring location. One of `completed-download`, `errored-download`, `cancelled-download`, `completed-upload`, `errored-upload`, `cancelled-upload`, `testpilot`, `external`.
- `cd6` - the location from which the user copied the URL to an upload file. One of `success-screen`, `upload-list`.
- `cd7` - identifying information about an error. Exclude if there is no error involved. **TODO:** enumerate a list of possibilities.
+- `cd6` - identifying information about an error. Exclude if there is no error involved. **TODO:** enumerate a list of possibilities.

 ### Events

@ -66,7 +65,7 @@ Triggered whenever a user stops uploading a file. Includes:
 - `cm7`
 - `cd1`
 - `cd2`
- `cd7`
+- `cd6`

 #### `download-started`
 Triggered whenever a user begins downloading a file. Includes:
@ -91,7 +90,7 @@ Triggered whenever a user stops downloading a file.
 - `cm6`
 - `cm7`
 - `cd2`
- `cd7`
+- `cd6`

 #### `exited`
 Fired whenever a user follows a link external to Send.
@ -113,13 +112,14 @@ Fired whenever a user deletes a file they’ve uploaded.
 - `cm6`
 - `cm7`
 - `cd1`
+- `cd4`

 #### `copied`
 Fired whenever a user copies the URL of an upload file.

 - `ec` - `sender`
 - `ea` - `copied`
- `cd6`
+- `cd4`

 #### `restarted`
 Fired whenever the user interrupts any part of funnel to return to the start of it (e.g. with a “send another file” or “send your own files” link).
@ -133,4 +133,4 @@ Fired whenever a user is presented a message saying that their browser is unsupp

 - `ec` - `sender`
 - `ea` - `unsupported`
- `cd7`
+- `cd6`
--- a/frontend/src/common.js
+++ b/frontend/src/common.js
@ -0,0 +1,10 @@
+window.Raven = require('raven-js');
+window.Raven.config(window.dsn).install();
+window.dsn = undefined;
+
+const testPilotGA = require('testpilot-ga');
+window.analytics = new testPilotGA({
+  an: 'Firefox Send',
+  ds: 'web',
+  tid: window.trackerId
+});
--- a/frontend/src/download.js
+++ b/frontend/src/download.js
@ -1,14 +1,54 @@
+require('./common');
 const FileReceiver = require('./fileReceiver');
-const { notify } = require('./utils');
+const { notify, findMetric, gcmCompliant, sendEvent } = require('./utils');
+const bytes = require('bytes');
+const Storage = require('./storage');
+const storage = new Storage(localStorage);
+
 const $ = require('jquery');
 require('jquery-circle-progress');

 const Raven = window.Raven;
+
 $(document).ready(function() {
+  gcmCompliant().catch(err => {
+    $('#download').attr('hidden', true);
+    sendEvent('recipient', 'unsupported', {
+      cd6: err
+    }).then(() => {
+      location.replace('/unsupported');
+    });
+  });
  //link back to homepage
  $('.send-new').attr('href', window.location.origin);

+  $('.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;
+    });
+  });
+
+  $('#expired-send-new').click(function() {
+    storage.referrer = 'errored-download';
+  });
+
  const filename = $('#dl-filename').html();
+  const bytelength = Number($('#dl-bytelength').text());
+  const timeToExpiry = Number($('#dl-ttl').text());

  //initiate progress bar
  $('#dl-progress').circleProgress({
@ -20,46 +60,57 @@ $(document).ready(function() {
  });
  $('#download-btn').click(download);
  function download() {
+    storage.totalDownloads += 1;
+
    const fileReceiver = new FileReceiver();
+    const unexpiredFiles = storage.numFiles;

    fileReceiver.on('progress', progress => {
+      window.onunload = function() {
+        storage.referrer = 'cancelled-download';
+        // record download-stopped (cancelled by tab close or reload)
+        sendEvent('recipient', 'download-stopped', {
+          cm1: bytelength,
+          cm5: storage.totalUploads,
+          cm6: unexpiredFiles,
+          cm7: storage.totalDownloads,
+          cd2: 'cancelled'
+        });
+      };
+
      $('#download-page-one').attr('hidden', true);
      $('#download-progress').removeAttr('hidden');
      const percent = progress[0] / progress[1];
      // update progress bar
      $('#dl-progress').circleProgress('value', percent);
      $('.percent-number').html(`${Math.floor(percent * 100)}`);
-      if (progress[1] < 1000000) {
-        $('.progress-text').html(
-          `${filename} (${(progress[0] / 1000).toFixed(1)}KB of
-           ${(progress[1] / 1000).toFixed(1)}KB)`
-        );
-      } else if (progress[1] < 1000000000) {
-        $('.progress-text').html(
-          `${filename} (${(progress[0] / 1000000).toFixed(1)}MB of ${(progress[1] / 1000000).toFixed(1)}MB)`
-        );
-      } else {
-        $('.progress-text').html(
-          `${filename} (${(progress[0] / 1000000).toFixed(1)}MB of ${(progress[1] / 1000000000).toFixed(1)}GB)`
-        );
-      }
+      $('.progress-text').text(
+        `${filename} (${bytes(progress[0], {
+          decimalPlaces: 1,
+          fixedDecimals: true
+        })} of ${bytes(progress[1], { decimalPlaces: 1 })})`
+      );
      //on complete
      if (percent === 1) {
        fileReceiver.removeAllListeners('progress');
-        document.l10n.formatValues('downloadNotification', 'downloadFinish')
-                     .then(translated => {
-                       notify(translated[0]);
-                       $('.title').html(translated[1]);
-                     });
+        document.l10n
+          .formatValues('downloadNotification', 'downloadFinish')
+          .then(translated => {
+            notify(translated[0]);
+            $('.title').html(translated[1]);
+          });
+        window.onunload = null;
      }
    });

+    let downloadEnd;
    fileReceiver.on('decrypting', isStillDecrypting => {
      // The file is being decrypted
      if (isStillDecrypting) {
        console.log('Decrypting');
      } else {
        console.log('Done decrypting');
+        downloadEnd = Date.now();
      }
    });

@ -72,19 +123,56 @@ $(document).ready(function() {
      }
    });

+    const startTime = Date.now();
+
+    // record download-started by recipient
+    sendEvent('recipient', 'download-started', {
+      cm1: bytelength,
+      cm4: timeToExpiry,
+      cm5: storage.totalUploads,
+      cm6: unexpiredFiles,
+      cm7: storage.totalDownloads
+    });
+
    fileReceiver
      .download()
-      .catch(() => {
-        document.l10n.formatValue('expiredPageHeader')
-                     .then(translated => {
-                       $('.title').text(translated);
-                     });
+      .catch(err => {
+        // record download-stopped (errored) by recipient
+        sendEvent('recipient', 'download-stopped', {
+          cm1: bytelength,
+          cm5: storage.totalUploads,
+          cm6: unexpiredFiles,
+          cm7: storage.totalDownloads,
+          cd2: 'errored',
+          cd6: err
+        });
+
+        document.l10n.formatValue('expiredPageHeader').then(translated => {
+          $('.title').text(translated);
+        });
        $('#download-btn').attr('hidden', true);
        $('#expired-img').removeAttr('hidden');
        console.log('The file has expired, or has already been deleted.');
        return;
      })
      .then(([decrypted, fname]) => {
+        const endTime = Date.now();
+        const totalTime = endTime - startTime;
+        const downloadTime = endTime - downloadEnd;
+        const downloadSpeed = bytelength / (downloadTime / 1000);
+
+        storage.referrer = 'completed-download';
+        // record download-stopped (completed) by recipient
+        sendEvent('recipient', 'download-stopped', {
+          cm1: bytelength,
+          cm2: totalTime,
+          cm3: downloadSpeed,
+          cm5: storage.totalUploads,
+          cm6: unexpiredFiles,
+          cm7: storage.totalDownloads,
+          cd2: 'completed'
+        });
+
        const dataView = new DataView(decrypted);
        const blob = new Blob([dataView]);
        const downloadUrl = URL.createObjectURL(blob);
--- a/frontend/src/fileSender.js
+++ b/frontend/src/fileSender.js
@ -118,14 +118,16 @@ class FileSender extends EventEmitter {

          xhr.onreadystatechange = () => {
            if (xhr.readyState === XMLHttpRequest.DONE) {
-              // uuid field and url field
-              const responseObj = JSON.parse(xhr.responseText);
-              resolve({
-                url: responseObj.url,
-                fileId: responseObj.id,
-                secretKey: keydata.k,
-                deleteToken: responseObj.delete
-              });
+              if (xhr.status === 200) {
+                const responseObj = JSON.parse(xhr.responseText);
+                return resolve({
+                  url: responseObj.url,
+                  fileId: responseObj.id,
+                  secretKey: keydata.k,
+                  deleteToken: responseObj.delete
+                });
+              }
+              reject(xhr.status);
            }
          };

--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@ -1,5 +0,0 @@
-window.Raven = require('raven-js');
-window.Raven.config(window.dsn).install();
-window.dsn = undefined;
-require('./upload');
-require('./download');
--- a/frontend/src/storage.js
+++ b/frontend/src/storage.js
@ -0,0 +1,66 @@
+const { isFile } = require('./utils');
+
+class Storage {
+  constructor(engine) {
+    this.engine = engine;
+  }
+
+  get totalDownloads() {
+    return Number(this.engine.getItem('totalDownloads'));
+  }
+  set totalDownloads(n) {
+    this.engine.setItem('totalDownloads', n);
+  }
+  get totalUploads() {
+    return Number(this.engine.getItem('totalUploads'));
+  }
+  set totalUploads(n) {
+    this.engine.setItem('totalUploads', n);
+  }
+  get referrer() {
+    return this.engine.getItem('referrer');
+  }
+  set referrer(str) {
+    this.engine.setItem('referrer', str);
+  }
+
+  get files() {
+    const fs = [];
+    for (let i = 0; i < this.engine.length; i++) {
+      const k = this.engine.key(i);
+      if (isFile(k)) {
+        fs.push(JSON.parse(this.engine.getItem(k))); // parse or whatever else
+      }
+    }
+    return fs;
+  }
+
+  get numFiles() {
+    let length = 0;
+    for (let i = 0; i < this.engine.length; i++) {
+      const k = this.engine.key(i);
+      if (isFile(k)) {
+        length += 1;
+      }
+    }
+    return length;
+  }
+
+  getFileById(id) {
+    return this.engine.getItem(id);
+  }
+
+  has(property) {
+    return this.engine.hasOwnProperty(property);
+  }
+
+  remove(property) {
+    this.engine.removeItem(property);
+  }
+
+  addFile(id, file) {
+    this.engine.setItem(id, JSON.stringify(file));
+  }
+}
+
+module.exports = Storage;
--- a/frontend/src/upload.js
+++ b/frontend/src/upload.js
@ -1,17 +1,74 @@
+/* global MAXFILESIZE */
+require('./common');
 const FileSender = require('./fileSender');
-const { notify, gcmCompliant } = require('./utils');
+const {
+  notify,
+  gcmCompliant,
+  findMetric,
+  sendEvent,
+  ONE_DAY_IN_MS
+} = require('./utils');
+const bytes = require('bytes');
+const Storage = require('./storage');
+const storage = new Storage(localStorage);
+
 const $ = require('jquery');
 require('jquery-circle-progress');

 const Raven = window.Raven;

+if (storage.has('referrer')) {
+  window.referrer = storage.referrer;
+  storage.remove('referrer');
+} else {
+  window.referrer = 'external';
+}
+
 $(document).ready(function() {
  gcmCompliant().catch(err => {
    $('#page-one').attr('hidden', true);
-    $('#unsupported-browser').removeAttr('hidden');
+    sendEvent('sender', 'unsupported', {
+      cd6: err
+    }).then(() => {
+      location.replace('/unsupported');
+    });
  });

  $('#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-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');
@ -19,18 +76,24 @@ $(document).ready(function() {
  $('#link').attr('disabled', false);
  $copyBtn.attr('data-l10n-id', 'copyUrlFormButton');

-  if (localStorage.length === 0) {
+  const files = storage.files;
+  console.log(files);
+  if (files.length === 0) {
    toggleHeader();
  } else {
-    for (let i = 0; i < localStorage.length; i++) {
-      const id = localStorage.key(i);
-      //check if file exists before adding to list
-      checkExistence(id, true);
+    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);
@ -71,6 +134,9 @@ $(document).ready(function() {
  // on file upload by browse or drag & drop
  function onUpload(event) {
    event.preventDefault();
+
+    storage.totalUploads += 1;
+
    let file = '';
    if (event.type === 'drop') {
      if (
@ -88,6 +154,12 @@ $(document).ready(function() {
      file = event.target.files[0];
    }

+    if (file.size > MAXFILESIZE) {
+      return document.l10n
+        .formatValue('fileTooBig', { size: bytes(MAXFILESIZE) })
+        .then(alert);
+    }
+
    $('#page-one').attr('hidden', true);
    $('#upload-error').attr('hidden', true);
    $('#upload-progress').removeAttr('hidden');
@ -102,6 +174,17 @@ $(document).ready(function() {
      document.l10n.formatValue('uploadCancelNotification').then(str => {
        notify(str);
      });
+      storage.referrer = 'cancelled-upload';
+
+      // record upload-stopped (cancelled) by sender
+      sendEvent('sender', 'upload-stopped', {
+        cm1: file.size,
+        cm5: storage.totalUploads,
+        cm6: unexpiredFiles,
+        cm7: storage.totalDownloads,
+        cd1: event.type === 'drop' ? 'drop' : 'click',
+        cd2: 'cancelled'
+      });
    });

    fileSender.on('progress', progress => {
@ -111,25 +194,12 @@ $(document).ready(function() {
      $('#ul-progress').circleProgress().on('circle-animation-end', function() {
        $('.percent-number').html(`${Math.floor(percent * 100)}`);
      });
-      if (progress[1] < 1000000) {
-        $('.progress-text').text(
-          `${file.name} (${(progress[0] / 1000).toFixed(
-            1
-          )}KB of ${(progress[1] / 1000).toFixed(1)}KB)`
-        );
-      } else if (progress[1] < 1000000000) {
-        $('.progress-text').text(
-          `${file.name} (${(progress[0] / 1000000).toFixed(
-            1
-          )}MB of ${(progress[1] / 1000000).toFixed(1)}MB)`
-        );
-      } else {
-        $('.progress-text').text(
-          `${file.name} (${(progress[0] / 1000000).toFixed(
-            1
-          )}MB of ${(progress[1] / 1000000000).toFixed(1)}GB)`
-        );
-      }
+      $('.progress-text').text(
+        `${file.name} (${bytes(progress[0], {
+          decimalPlaces: 1,
+          fixedDecimals: true
+        })} of ${bytes(progress[1], { decimalPlaces: 1 })})`
+      );
    });

    fileSender.on('loading', isStillLoading => {
@ -150,28 +220,66 @@ $(document).ready(function() {
      }
    });

+    let uploadStart;
    fileSender.on('encrypting', isStillEncrypting => {
      // The file is being encrypted
      if (isStillEncrypting) {
        console.log('Encrypting');
      } else {
        console.log('Finished encrypting');
+        uploadStart = Date.now();
      }
    });
-    let t = '';
+
+    let t;
+    const startTime = Date.now();
+    const unexpiredFiles = storage.numFiles + 1;
+
+    // record upload-started event by sender
+    sendEvent('sender', 'upload-started', {
+      cm1: file.size,
+      cm5: storage.totalUploads,
+      cm6: unexpiredFiles,
+      cm7: storage.totalDownloads,
+      cd1: event.type === 'drop' ? 'drop' : 'click',
+      cd5: window.referrer
+    });
+
    fileSender
      .upload()
      .then(info => {
+        const endTime = Date.now();
+        const totalTime = endTime - startTime;
+        const uploadTime = endTime - uploadStart;
+        const uploadSpeed = file.size / (uploadTime / 1000);
+
+        // record upload-stopped (completed) by sender
+        sendEvent('sender', 'upload-stopped', {
+          cm1: file.size,
+          cm2: totalTime,
+          cm3: uploadSpeed,
+          cm5: storage.totalUploads,
+          cm6: unexpiredFiles,
+          cm7: storage.totalDownloads,
+          cd1: event.type === 'drop' ? 'drop' : 'click',
+          cd2: 'completed'
+        });
+
        const fileData = {
          name: file.name,
+          size: file.size,
          fileId: info.fileId,
          url: info.url,
          secretKey: info.secretKey,
          deleteToken: info.deleteToken,
          creationDate: new Date(),
-          expiry: expiration
+          expiry: expiration,
+          totalTime: totalTime,
+          typeOfUpload: event.type === 'drop' ? 'drop' : 'click',
+          uploadSpeed: uploadSpeed
        };
-        localStorage.setItem(info.fileId, JSON.stringify(fileData));
+
+        storage.addFile(info.fileId, fileData);
        $('#upload-filename').attr(
          'data-l10n-id',
          'uploadSuccessConfirmHeader'
@ -183,7 +291,7 @@ $(document).ready(function() {
          $('#share-link').removeAttr('hidden');
        }, 1000);

-        populateFileList(JSON.stringify(fileData));
+        populateFileList(fileData);
        document.l10n.formatValue('notifyUploadDone').then(str => {
          notify(str);
        });
@ -195,6 +303,17 @@ $(document).ready(function() {
        $('#upload-progress').attr('hidden', true);
        $('#upload-error').removeAttr('hidden');
        window.clearTimeout(t);
+
+        // record upload-stopped (errored) by sender
+        sendEvent('sender', 'upload-stopped', {
+          cm1: file.size,
+          cm5: storage.totalUploads,
+          cm6: unexpiredFiles,
+          cm7: storage.totalDownloads,
+          cd1: event.type === 'drop' ? 'drop' : 'click',
+          cd2: 'errored',
+          cd6: err
+        });
      });
  }

@ -202,16 +321,19 @@ $(document).ready(function() {
    ev.preventDefault();
  }

-  function checkExistence(id, populate) {
+  function checkExistence(id, file, populate) {
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = () => {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
          if (populate) {
-            populateFileList(localStorage.getItem(id));
+            populateFileList(file);
          }
        } else if (xhr.status === 404) {
-          localStorage.removeItem(id);
+          storage.remove(id);
+          if (storage.numFiles === 0) {
+            toggleHeader();
+          }
        }
      }
    };
@ -219,14 +341,8 @@ $(document).ready(function() {
    xhr.send();
  }

-  //update file table with current files in localStorage
+  //update file table with current files in storage
  function populateFileList(file) {
-    try {
-      file = JSON.parse(file);
-    } catch (e) {
-      return;
-    }
-
    const row = document.createElement('tr');
    const name = document.createElement('td');
    const link = document.createElement('td');
@ -271,6 +387,10 @@ $(document).ready(function() {

    //copy link to clipboard when icon clicked
    $copyIcon.click(function() {
+      // record copied event from upload list
+      sendEvent('sender', 'copied', {
+        cd4: 'upload-list'
+      });
      const aux = document.createElement('input');
      aux.setAttribute('value', url);
      document.body.appendChild(aux);
@ -295,7 +415,7 @@ $(document).ready(function() {
    future.setTime(file.creationDate.getTime() + file.expiry);

    let countdown = 0;
-    countdown = future.getTime() - new Date().getTime();
+    countdown = future.getTime() - Date.now();
    let minutes = Math.floor(countdown / 1000 / 60);
    let hours = Math.floor(minutes / 60);
    let seconds = Math.floor(countdown / 1000 % 60);
@ -303,7 +423,7 @@ $(document).ready(function() {
    poll();

    function poll() {
-      countdown = future.getTime() - new Date().getTime();
+      countdown = future.getTime() - Date.now();
      minutes = Math.floor(countdown / 1000 / 60);
      hours = Math.floor(minutes / 60);
      seconds = Math.floor(countdown / 1000 % 60);
@ -322,7 +442,7 @@ $(document).ready(function() {
      }
      //remove from list when expired
      if (countdown <= 0) {
-        localStorage.removeItem(file.fileId);
+        storage.remove(file.fileId);
        $(expiry).parents('tr').remove();
        window.clearTimeout(t);
        toggleHeader();
@ -352,18 +472,51 @@ $(document).ready(function() {
    row.appendChild(del);
    $('tbody').append(row); //add row to table

+    const unexpiredFiles = storage.numFiles;
+
    // delete file
    $popupText.find('.del-file').click(e => {
      FileSender.delete(file.fileId, file.deleteToken).then(() => {
        $(e.target).parents('tr').remove();
-        localStorage.removeItem(file.fileId);
+        const timeToExpiry =
+          ONE_DAY_IN_MS - (Date.now() - file.creationDate.getTime());
+        // record upload-deleted from file list
+        sendEvent('sender', 'upload-deleted', {
+          cm1: file.size,
+          cm2: file.totalTime,
+          cm3: file.uploadSpeed,
+          cm4: timeToExpiry,
+          cm5: storage.totalUploads,
+          cm6: unexpiredFiles,
+          cm7: storage.totalDownloads,
+          cd1: file.typeOfUpload,
+          cd4: 'upload-list'
+        }).then(() => {
+          storage.remove(file.fileId);
+        });
        toggleHeader();
      });
    });
+
    document.getElementById('delete-file').onclick = () => {
      FileSender.delete(file.fileId, file.deleteToken).then(() => {
-        localStorage.removeItem(file.fileId);
-        location.reload();
+        const timeToExpiry =
+          ONE_DAY_IN_MS - (Date.now() - file.creationDate.getTime());
+        // record upload-deleted from success screen
+        sendEvent('sender', 'upload-deleted', {
+          cm1: file.size,
+          cm2: file.totalTime,
+          cm3: file.uploadSpeed,
+          cm4: timeToExpiry,
+          cm5: storage.totalUploads,
+          cm6: unexpiredFiles,
+          cm7: storage.totalDownloads,
+          cd1: file.typeOfUpload,
+          cd4: 'success-screen'
+        }).then(() => {
+          storage.remove(file.fileId);
+          location.reload();
+        });
      });
    };
    // show popup
--- a/frontend/src/utils.js
+++ b/frontend/src/utils.js
@ -69,9 +69,55 @@ function gcmCompliant() {
  }
 }

+function findMetric(href) {
+  switch (href) {
+    case 'https://www.mozilla.org/':
+      return 'mozilla';
+    case 'https://www.mozilla.org/about/legal':
+      return 'legal';
+    case 'https://testpilot.firefox.com/about':
+      return 'about';
+    case 'https://testpilot.firefox.com/privacy':
+      return 'privacy';
+    case 'https://testpilot.firefox.com/terms':
+      return 'terms';
+    case 'https://www.mozilla.org/en-US/privacy/websites/#cookies':
+      return 'cookies';
+    case 'https://github.com/mozilla/send':
+      return 'github';
+    case 'https://twitter.com/FxTestPilot':
+      return 'twitter';
+    case 'https://www.mozilla.org/firefox/new/?scene=2':
+      return 'download-firefox';
+    default:
+      return 'other';
+  }
+}
+
+function isFile(id) {
+  return ![
+    'referrer',
+    'totalDownloads',
+    'totalUploads',
+    'testpilot_ga__cid'
+  ].includes(id);
+}
+
+function sendEvent() {
+  return window.analytics.sendEvent
+    .apply(window.analytics, arguments)
+    .catch(() => 0);
+}
+
+const ONE_DAY_IN_MS = 86400000;
+
 module.exports = {
  arrayToHex,
  hexToArray,
  notify,
-  gcmCompliant
+  gcmCompliant,
+  findMetric,
+  isFile,
+  sendEvent,
+  ONE_DAY_IN_MS
 };
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,44 +1,43 @@
 {
  "name": "firefox-send",
  "description": "File Sharing Experiment",
-  "version": "0.1.2",
+  "version": "0.2.0",
  "author": "Mozilla (https://mozilla.org)",
  "dependencies": {
-    "aws-sdk": "^2.62.0",
+    "aws-sdk": "^2.88.0",
    "body-parser": "^1.17.2",
    "bytes": "^2.5.0",
    "connect-busboy": "0.0.2",
    "convict": "^3.0.0",
-    "cross-env": "^5.0.1",
    "express": "^4.15.3",
    "express-handlebars": "^3.0.0",
-    "helmet": "^3.6.1",
-    "jquery": "^3.2.1",
-    "jquery-circle-progress": "^1.2.2",
-    "l20n": "^5.0.0",
+    "helmet": "^3.8.0",
    "mozlog": "^2.1.1",
    "raven": "^2.1.0",
-    "raven-js": "^3.16.0",
-    "redis": "^2.7.1",
-    "selenium-webdriver": "^3.4.0",
-    "supertest": "^3.0.0",
-    "uglify-es": "3.0.19"
+    "redis": "^2.7.1"
  },
  "devDependencies": {
    "browserify": "^14.4.0",
-    "eslint": "^4.0.0",
+    "eslint": "^4.3.0",
    "eslint-plugin-mocha": "^4.11.0",
-    "eslint-plugin-node": "^5.0.0",
+    "eslint-plugin-node": "^5.1.1",
    "eslint-plugin-security": "^1.4.0",
    "git-rev-sync": "^1.9.1",
+    "jquery": "^3.2.1",
+    "jquery-circle-progress": "^1.2.2",
+    "l20n": "^5.0.0",
    "mocha": "^3.4.2",
    "npm-run-all": "^4.0.2",
-    "prettier": "^1.4.4",
+    "prettier": "^1.5.3",
    "proxyquire": "^1.8.0",
-    "sinon": "^2.3.5",
-    "stylelint": "^7.11.0",
+    "raven-js": "^3.17.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",
+    "testpilot-ga": "^0.3.0",
+    "uglifyify": "^4.0.3"
  },
  "engines": {
    "node": ">=8.0.0"
@ -47,15 +46,20 @@
  "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",
-    "format": "prettier '{frontend/src/,scripts/,server/,test/}*.js' 'public/*.css' --single-quote --write",
+    "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",
+    "build:l10n": "cp node_modules/l20n/dist/web/l20n.min.js public",
+    "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"
  }
 }
--- a/public/locales/send.en-US.ftl
+++ b/public/locales/send.en-US.ftl
@ -65,6 +65,7 @@ errorPageHeader = Something went wrong!
 errorPageMessage = There has been an error uploading the file.
 errorPageLink = Send another file

+fileTooBig = That file is too big to upload. It should be less than { $size }.

 linkExpiredAlt.alt = Link expired
 expiredPageHeader = This link has expired or never existed in the first place!
--- a/public/main.css
+++ b/public/main.css
@ -38,7 +38,8 @@ body {
 }

 .site-title {
-  font-size: 34px;
+  color: #3e3d40;
+  font-size: 32px;
  font-weight: 500;
  margin: 0;
  position: relative;
@ -46,14 +47,14 @@ body {
 }

 .site-subtitle {
+  color: #3e3d40;
  font-size: 12px;
  margin: 0 8px;
-  color: #0c0c0d;
 }

 .site-subtitle a {
  font-weight: bold;
-  color: #0c0c0d;
+  color: #3e3d40;
  transition: color 50ms;
 }

@ -585,7 +586,7 @@ tbody {
  margin-bottom: -5px;
 }

-@media (max-width: 768px) {
+@media (max-device-width: 768px) {
  .description {
    margin: 0 auto 25px;
  }
@ -608,7 +609,16 @@ tbody {
  }
 }

-@media (max-width: 520px) {
+@media (max-device-width: 520px) {
+  .header {
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+
+  .feedback {
+    margin-top: 10px;
+  }
+
  #copy {
    width: 100%;
    flex-direction: column;
--- a/server/config.js
+++ b/server/config.js
@ -36,6 +36,11 @@ const conf = convict({
    format: ['production', 'development', 'test'],
    default: 'development',
    env: 'NODE_ENV'
+  },
+  max_file_size: {
+    format: Number,
+    default: 1024 * 1024 * 1024 * 2,
+    env: 'P2P_MAX_FILE_SIZE'
  }
 });

--- a/server/server.js
+++ b/server/server.js
@ -19,8 +19,6 @@ const mozlog = require('./log.js');
 const log = mozlog('send.server');

 const STATIC_PATH = path.join(__dirname, '../public');
-const L20N = path.join(__dirname, '../node_modules/l20n');
-const LOCALES = path.join(__dirname, '../public/locales');

 const app = express();

@ -64,21 +62,30 @@ app.use(
    }
  })
 );
-app.use(busboy());
+app.use(
+  busboy({
+    limits: {
+      fileSize: conf.max_file_size
+    }
+  })
+);
 app.use(bodyParser.json());
 app.use(express.static(STATIC_PATH));
-app.use('/l20n', express.static(L20N));
-app.use('/locales', express.static(LOCALES));

 app.get('/', (req, res) => {
  res.render('index');
 });

+app.get('/unsupported', (req, res) => {
+  res.render('unsupported');
+});
+
 app.get('/jsconfig.js', (req, res) => {
  res.set('Content-Type', 'application/javascript');
  res.render('jsconfig', {
    trackerId: conf.analytics_id,
    dsn: conf.sentry_id,
+    maxFileSize: conf.max_file_size,
    layout: false
  });
 });
@ -109,15 +116,17 @@ app.get('/download/:id', (req, res) => {
    storage
      .length(id)
      .then(contentLength => {
-        res.render('download', {
-          filename: decodeURIComponent(filename),
-          filesize: bytes(contentLength),
-          trackerId: conf.analytics_id,
-          dsn: conf.sentry_id
+        storage.ttl(id).then(timeToExpiry => {
+          res.render('download', {
+            filename: decodeURIComponent(filename),
+            filesize: bytes(contentLength),
+            sizeInBytes: contentLength,
+            timeToExpiry: timeToExpiry
+          });
        });
      })
      .catch(() => {
-        res.render('download');
+        res.status(404).render('notfound');
      });
  });
 });
@ -221,15 +230,23 @@ app.post('/upload', (req, res, next) => {
  req.busboy.on('file', (fieldname, file, filename) => {
    log.info('Uploading:', newId);

-    storage.set(newId, file, filename, meta).then(() => {
-      const protocol = conf.env === 'production' ? 'https' : req.protocol;
-      const url = `${protocol}://${req.get('host')}/download/${newId}/`;
-      res.json({
-        url,
-        delete: meta.delete,
-        id: newId
-      });
-    });
+    storage.set(newId, file, filename, meta).then(
+      () => {
+        const protocol = conf.env === 'production' ? 'https' : req.protocol;
+        const url = `${protocol}://${req.get('host')}/download/${newId}/`;
+        res.json({
+          url,
+          delete: meta.delete,
+          id: newId
+        });
+      },
+      err => {
+        if (err.message === 'limit') {
+          return res.sendStatus(413);
+        }
+        res.sendStatus(500);
+      }
+    );
  });

  req.on('close', err => {
--- a/server/storage.js
+++ b/server/storage.js
@ -23,6 +23,7 @@ if (conf.s3_bucket) {
  module.exports = {
    filename: filename,
    exists: exists,
+    ttl: ttl,
    length: awsLength,
    get: awsGet,
    set: awsSet,
@ -39,6 +40,7 @@ if (conf.s3_bucket) {
  module.exports = {
    filename: filename,
    exists: exists,
+    ttl: ttl,
    length: localLength,
    get: localGet,
    set: localSet,
@ -73,6 +75,18 @@ function metadata(id) {
  });
 }

+function ttl(id) {
+  return new Promise((resolve, reject) => {
+    redis_client.ttl(id, (err, reply) => {
+      if (!err) {
+        resolve(reply * 1000);
+      } else {
+        reject(err);
+      }
+    });
+  });
+}
+
 function filename(id) {
  return new Promise((resolve, reject) => {
    redis_client.hget(id, 'filename', (err, reply) => {
@ -129,20 +143,24 @@ function localGet(id) {

 function localSet(newId, file, filename, meta) {
  return new Promise((resolve, reject) => {
-    const fstream = fs.createWriteStream(
-      path.join(__dirname, '../static', newId)
-    );
+    const filepath = path.join(__dirname, '../static', newId);
+    const fstream = fs.createWriteStream(filepath);
    file.pipe(fstream);
-    fstream.on('close', () => {
+    file.on('limit', () => {
+      file.unpipe(fstream);
+      fstream.destroy(new Error('limit'));
+    });
+    fstream.on('finish', () => {
      redis_client.hmset(newId, meta);
      redis_client.expire(newId, 86400000);
      log.info('localSet:', 'Upload Finished of ' + newId);
      resolve(meta.delete);
    });

-    fstream.on('error', () => {
+    fstream.on('error', err => {
      log.error('localSet:', 'Failed upload of ' + newId);
-      reject();
+      fs.unlinkSync(filepath);
+      reject(err);
    });
  });
 }
@ -211,21 +229,26 @@ function awsSet(newId, file, filename, meta) {
    Key: newId,
    Body: file
  };
-
-  return new Promise((resolve, reject) => {
-    s3.upload(params, function(err, _data) {
-      if (err) {
-        log.info('awsUploadError:', err.stack); // an error occurred
-        reject();
-      } else {
-        redis_client.hmset(newId, meta);
-
-        redis_client.expire(newId, 86400000);
-        log.info('awsUploadFinish', 'Upload Finished of ' + filename);
-        resolve(meta.delete);
-      }
-    });
+  let hitLimit = false;
+  const upload = s3.upload(params);
+  file.on('limit', () => {
+    hitLimit = true;
+    upload.abort();
  });
+  return upload.promise().then(
+    () => {
+      redis_client.hmset(newId, meta);
+      redis_client.expire(newId, 86400000);
+      log.info('awsUploadFinish', 'Upload Finished of ' + filename);
+    },
+    err => {
+      if (hitLimit) {
+        throw new Error('limit');
+      } else {
+        throw err;
+      }
+    }
+  );
 }

 function awsDelete(id, delete_token) {
--- a/test/.eslintrc.yml
+++ b/test/.eslintrc.yml
@ -19,3 +19,5 @@ rules:
  mocha/no-pending-tests: error
  mocha/no-return-and-callback: warn
  mocha/no-skipped-tests: error
+
+  no-console: off # ¯\_(ツ)_/¯
--- a/test/unit/aws.storage.test.js
+++ b/test/unit/aws.storage.test.js
@ -110,9 +110,9 @@ describe('Testing Set using aws', function() {
  it('Should pass when the file is successfully uploaded', function() {
    const buf = Buffer.alloc(10);
    sinon.stub(crypto, 'randomBytes').returns(buf);
-    s3Stub.upload.callsArgWith(1, null, {});
+    s3Stub.upload.returns({promise: () => Promise.resolve()});
    return storage
-      .set('123', {}, 'Filename.moz', {})
+      .set('123', {on: sinon.stub()}, 'Filename.moz', {})
      .then(() => {
        assert(expire.calledOnce);
        assert(expire.calledWith('123', 86400000));
@ -121,9 +121,9 @@ describe('Testing Set using aws', function() {
  });

  it('Should fail if there was an error during uploading', function() {
-    s3Stub.upload.callsArgWith(1, new Error(), null);
+    s3Stub.upload.returns({promise: () => Promise.reject()});
    return storage
-      .set('123', {}, 'Filename.moz', 'url.com')
+      .set('123', {on: sinon.stub()}, 'Filename.moz', 'url.com')
      .then(_reply => assert.fail())
      .catch(err => assert(1));
  });
--- a/test/unit/local.storage.test.js
+++ b/test/unit/local.storage.test.js
@ -117,12 +117,12 @@ describe('Testing Get from local filesystem', function() {
 describe('Testing Set to local filesystem', function() {
  it('Successfully writes the file to the local filesystem', function() {
    const stub = sinon.stub();
-    stub.withArgs('close', sinon.match.any).callsArgWithAsync(1);
+    stub.withArgs('finish', sinon.match.any).callsArgWithAsync(1);
    stub.withArgs('error', sinon.match.any).returns(1);
    fsStub.createWriteStream.returns({ on: stub });

    return storage
-      .set('test', { pipe: sinon.stub() }, 'Filename.moz', {})
+      .set('test', { pipe: sinon.stub(), on: sinon.stub() }, 'Filename.moz', {})
      .then(() => {
        assert(1);
      })
--- a/views/download.handlebars
+++ b/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"
@ -7,6 +7,8 @@
            data-l10n-args='{"filename": "{{filename}}"}'></span>
      <span data-l10n-id="downloadFileSize"
            data-l10n-args='{"size": "{{filesize}}"}'></span>
+      <span id="dl-bytelength" hidden="true">{{sizeInBytes}}</span>
+      <span id="dl-ttl" hidden="true">{{timeToExpiry}}</span>
    </div>
    <div class="description" data-l10n-id="downloadMessage"></div>
    <img src="/resources/illustration_download.svg" id="download-img" data-l10n-id="downloadAltText"/>
@ -34,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" data-l10n-id="sendYourFilesLink"></a>
-  {{/if}}
 </div>
--- a/views/index.handlebars
+++ b/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>
@ -60,7 +61,7 @@
      <button id="copy-btn" data-l10n-id="copyUrlFormButton"></button>
    </div>
    <button id="delete-file" data-l10n-id="deleteFileButton"></button>
-    <a class="send-new" data-l10n-id="sendAnotherFileLink"></a>
+    <a class="send-new" id="send-new-completed" data-l10n-id="sendAnotherFileLink"></a>
  </div>
 </div>

@ -68,17 +69,5 @@
  <div class="title" data-l10n-id="errorPageHeader"></div>
  <div class="expired-description" data-l10n-id="errorPageMessage"></div>
  <img id="upload-error-img" data-l10n-id="errorAltText" src="/resources/illustration_error.svg"/>
-  <a class="send-new" data-l10n-id="sendAnotherFileLink"></a>
-</div>
-
-<div id="unsupported-browser" hidden="true">
-  <div class="title" data-l10n-id="notSupportedHeader"></div>
-  <div class="description" data-l10n-id="notSupportedDetail"></div>
-  <a id="dl-firefox" href="https://www.mozilla.org/firefox/new/?scene=2" target="_blank">
-    <img src="/resources/firefox_logo-only.svg" id="firefox-logo" alt="Firefox"/>
-    <div id="dl-firefox-text">Firefox<br>
-      <span data-l10n-id="downloadFirefoxButtonSub"></span>
-    </div>
-  </a>
-  <div class="unsupported-description" data-l10n-id="uploadPageExplainer"></div>
+  <a class="send-new" id="send-new-error" data-l10n-id="sendAnotherFileLink"></a>
 </div>
--- a/views/jsconfig.handlebars
+++ b/views/jsconfig.handlebars
@ -4,3 +4,4 @@ window.dsn = '{{{dsn}}}';
 {{#if trackerId}}
 window.trackerId = '{{{trackerId}}}';
 {{/if}}
+const MAXFILESIZE = {{{maxFileSize}}};
--- a/views/layouts/main.handlebars
+++ b/views/layouts/main.handlebars
@ -3,14 +3,14 @@
 <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">
+  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta name="defaultLanguage" content="en-US">
  <meta name="availableLanguages" content="en-US">
  <link rel="localization" href="/locales/send.{locale}.ftl">
-  <script defer src="/l20n/dist/web/l20n.js"></script>
+  <script defer src="/l20n.min.js"></script>
 </head>
 <body>
  <header class="header"> 
@ -29,8 +29,8 @@
  </div>
  <div class="footer">
    <div class="legal-links">
-      <a  href="https://www.mozilla.org"><img class="mozilla-logo" src="/resources/mozilla-logo.svg"/></a>
-      <a href="https://www.mozilla.org/about/legal/" data-l10n-id="footerLinkLegal"></a>
+      <a href="https://www.mozilla.org"><img class="mozilla-logo" src="/resources/mozilla-logo.svg"/></a>
+      <a href="https://www.mozilla.org/about/legal" data-l10n-id="footerLinkLegal"></a>
      <a href="https://testpilot.firefox.com/about" data-l10n-id="footerLinkAbout"></a>
      <a href="https://testpilot.firefox.com/privacy" data-l10n-id="footerLinkPrivacy"></a>
      <a href="https://testpilot.firefox.com/terms" data-l10n-id="footerLinkTerms"></a>
--- a/views/notfound.handlebars
+++ b/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>
--- a/views/unsupported.handlebars
+++ b/views/unsupported.handlebars
@ -0,0 +1,11 @@
+<div id="unsupported-browser">
+  <div class="title" data-l10n-id="notSupportedHeader"></div>
+  <div class="description" data-l10n-id="notSupportedDetail"></div>
+  <a id="dl-firefox" href="https://www.mozilla.org/firefox/new/?scene=2" target="_blank">
+    <img src="/resources/firefox_logo-only.svg" id="firefox-logo" alt="Firefox"/>
+    <div id="dl-firefox-text">Firefox<br>
+      <span data-l10n-id="downloadFirefoxButtonSub"></span>
+    </div>
+  </a>
+  <div class="unsupported-description" data-l10n-id="uploadPageExplainer"></div>
+</div>