merging master

.dockerignore

@@ -5,3 +5,4 @@ static
 test
 scripts
 docs
+firefox

.eslintignore

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

.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

.stylelintrc

@@ -1,6 +1,6 @@
 extends: stylelint-config-standard
 
 rules:
-  color-hex-case: upper
+  color-hex-case: lower
   declaration-colon-newline-after: null
   selector-list-comma-newline-after: null

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

docker-compose.yml

@@ -7,6 +7,6 @@ services:
     ports:
       - "1443:1443"
     environment:
-      - P2P_REDIS_HOST=redis
+      - REDIS_HOST=redis
   redis:
     image: redis:alpine

docs/docker.md

@@ -3,12 +3,22 @@
 | Name             | Description
 |------------------|-------------|
 | `PORT`           | Port the server will listen on (defaults to 1443).
-| `P2P_S3_BUCKET`  | The S3 bucket name.
+| `S3_BUCKET`  | The S3 bucket name.
-| `P2P_REDIS_HOST` | Host name of the Redis server.
+| `REDIS_HOST` | Host name of the Redis server.
+| `GOOGLE_ANALYTICS_ID` | Google Analytics ID
+| `SENTRY_CLIENT` | Sentry Client ID
+| `SENTRY_DSN` | Sentry DSN
+| `MAX_FILE_SIZE` | in bytes (defaults to 2147483648)
 | `NODE_ENV`       | "production"
 
 ## Example:
 
 ```sh
-$ docker run --net=host -e 'NODE_ENV=production' -e 'P2P_S3_BUCKET=testpilot-p2p-dev' -e 'P2P_REDIS_HOST=dyf9s2r4vo3.bolxr4.0001.usw2.cache.amazonaws.com' mozilla/send:latest
+$ docker run --net=host -e 'NODE_ENV=production' \
+  -e 'S3_BUCKET=testpilot-p2p-dev' \
+  -e 'REDIS_HOST=dyf9s2r4vo3.bolxr4.0001.usw2.cache.amazonaws.com' \
+  -e 'GOOGLE_ANALYTICS_ID=UA-35433268-78' \
+  -e 'SENTRY_CLIENT=https://51e23d7263e348a7a3b90a5357c61cb2@sentry.prod.mozaws.net/168' \
+  -e 'SENTRY_DSN=https://51e23d7263e348a7a3b90a5357c61cb2:65e23d7263e348a7a3b90a5357c61c44@sentry.prod.mozaws.net/168' \
+  mozilla/send:latest
 ```

docs/metrics.md

@@ -112,6 +112,7 @@ 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.

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
+});

frontend/src/download.js

@@ -1,82 +1,150 @@
+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);
 
-  const filename = $('#dl-filename').html();
+  $('.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;
+    });
+  });
+
+  const filename = $('#dl-filename').text();
+  const bytelength = Number($('#dl-bytelength').text());
+  const timeToExpiry = Number($('#dl-ttl').text());
 
   //initiate progress bar
   $('#dl-progress').circleProgress({
     value: 0.0,
     startAngle: -Math.PI / 2,
-    fill: '#00C8D7',
+    fill: '#3B9DFF',
     size: 158,
     animation: { duration: 300 }
   });
   $('#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)}`);
+      $('.percent-number').text(`${Math.floor(percent * 100)}`);
-      if (progress[1] < 1000000) {
+      $('.progress-text').text(
-        $('.progress-text').html(
+        `${filename} (${bytes(progress[0], {
-          `${filename} (${(progress[0] / 1000).toFixed(1)}KB of
+          decimalPlaces: 1,
-           ${(progress[1] / 1000).toFixed(1)}KB)`
+          fixedDecimals: true
+        })} of ${bytes(progress[1], { decimalPlaces: 1 })})`
       );
-      } 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)`
-        );
-      }
-      //on complete
-      if (percent === 1) {
-        fileReceiver.removeAllListeners('progress');
-        document.l10n.formatValues('downloadNotification', 'downloadFinish')
-                     .then(translated => {
-                       notify(translated[0]);
-                       $('.title').html(translated[1]);
-                     });
-      }
     });
 
+    let downloadEnd;
     fileReceiver.on('decrypting', isStillDecrypting => {
       // The file is being decrypted
       if (isStillDecrypting) {
-        console.log('Decrypting');
+        fileReceiver.removeAllListeners('progress');
+        window.onunload = null;
+        document.l10n.formatValue('decryptingFile').then(decryptingFile => {
+          $('.progress-text').text(decryptingFile);
+        });
       } else {
         console.log('Done decrypting');
+        downloadEnd = Date.now();
       }
     });
 
     fileReceiver.on('hashing', isStillHashing => {
       // The file is being hashed to make sure a malicious user hasn't tampered with it
       if (isStillHashing) {
-        console.log('Checking file integrity');
+        document.l10n.formatValue('verifyingFile').then(verifyingFile => {
+          $('.progress-text').text(verifyingFile);
+        });
       } else {
-        console.log('Integrity check done');
+        $('.progress-text').text(' ');
+        document.l10n
+          .formatValues('downloadNotification', 'downloadFinish')
+          .then(translated => {
+            notify(translated[0]);
+            $('.title').text(translated[1]);
+          });
       }
     });
 
+    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(() => {
+      .catch(err => {
-        document.l10n.formatValue('expiredPageHeader')
+        // record download-stopped (errored) by recipient
-                     .then(translated => {
+        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);
@@ -85,6 +153,23 @@ $(document).ready(function() {
         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);

frontend/src/fileReceiver.js

@@ -58,41 +58,47 @@ class FileReceiver extends EventEmitter {
         true,
         ['encrypt', 'decrypt']
       )
-    ]).then(([fdata, key]) => {
+    ])
+      .then(([fdata, key]) => {
         this.emit('decrypting', true);
         return Promise.all([
-        window.crypto.subtle.decrypt(
+          window.crypto.subtle
+            .decrypt(
               {
                 name: 'AES-GCM',
                 iv: hexToArray(fdata.iv),
-            additionalData: hexToArray(fdata.aad)
+                additionalData: hexToArray(fdata.aad),
+                tagLength: 128
               },
               key,
               fdata.data
-        ).then(decrypted => {
+            )
+            .then(decrypted => {
               this.emit('decrypting', false);
-          return Promise.resolve(decrypted)
+              return Promise.resolve(decrypted);
             }),
           fdata.filename,
           hexToArray(fdata.aad)
         ]);
-    }).then(([decrypted, fname, proposedHash]) => {
+      })
+      .then(([decrypted, fname, proposedHash]) => {
         this.emit('hashing', true);
-      return window.crypto.subtle.digest('SHA-256', decrypted).then(calculatedHash => {
+        return window.crypto.subtle
+          .digest('SHA-256', decrypted)
+          .then(calculatedHash => {
             this.emit('hashing', false);
-        const integrity = new Uint8Array(calculatedHash).toString() === proposedHash.toString();
+            const integrity =
+              new Uint8Array(calculatedHash).toString() ===
+              proposedHash.toString();
             if (!integrity) {
-          this.emit('unsafe', true)
+              this.emit('unsafe', true);
               return Promise.reject();
             } else {
               this.emit('safe', true);
-          return Promise.all([
+              return Promise.all([decrypted, decodeURIComponent(fname)]);
-            decrypted,
-            decodeURIComponent(fname)
-          ]);
             }
-      })
+          });
-    })
+      });
   }
 }
 

frontend/src/fileSender.js

@@ -118,15 +118,17 @@ class FileSender extends EventEmitter {
 
           xhr.onreadystatechange = () => {
             if (xhr.readyState === XMLHttpRequest.DONE) {
-              // uuid field and url field
+              if (xhr.status === 200) {
                 const responseObj = JSON.parse(xhr.responseText);
-              resolve({
+                return resolve({
                   url: responseObj.url,
                   fileId: responseObj.id,
                   secretKey: keydata.k,
                   deleteToken: responseObj.delete
                 });
               }
+              reject(xhr.status);
+            }
           };
 
           xhr.open('post', '/upload', true);

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');

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;

frontend/src/upload.js

@@ -1,17 +1,74 @@
+/* global MAXFILESIZE EXPIRE_SECONDS */
+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,23 @@ $(document).ready(function() {
   $('#link').attr('disabled', false);
   $copyBtn.attr('data-l10n-id', 'copyUrlFormButton');
 
-  if (localStorage.length === 0) {
+  const files = storage.files;
+  if (files.length === 0) {
     toggleHeader();
   } else {
-    for (let i = 0; i < localStorage.length; i++) {
+    for (const index in files) {
-      const id = localStorage.key(i);
+      const id = files[index].fileId;
-      //check if file exists before adding to list
+      //check if file still exists before adding to list
-      checkExistence(id, true);
+      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);
@@ -40,7 +102,9 @@ $(document).ready(function() {
     //disable button for 3s
     $copyBtn.attr('disabled', true);
     $('#link').attr('disabled', true);
-    $copyBtn.html('<img src="/resources/check-16.svg" class="icon-check"></img>');
+    $copyBtn.html(
+      '<img src="/resources/check-16.svg" class="icon-check"></img>'
+    );
     window.setTimeout(() => {
       $copyBtn.attr('disabled', false);
       $('#link').attr('disabled', false);
@@ -69,12 +133,26 @@ $(document).ready(function() {
   // on file upload by browse or drag & drop
   function onUpload(event) {
     event.preventDefault();
+
+    // don't allow upload if not on upload page
+    if ($('#page-one').attr('hidden')){
+      return;
+    }
+
+    storage.totalUploads += 1;
+
     let file = '';
     if (event.type === 'drop') {
-      if (event.originalEvent.dataTransfer.files.length > 1 || event.originalEvent.dataTransfer.files[0].size === 0){
+      if (!event.originalEvent.dataTransfer.files[0]) {
         $('.upload-window').removeClass('ondrag');
-        document.l10n.formatValue('uploadPageMultipleFilesAlert')
+        return;
-                     .then(str => {
+      }
+      if (
+        event.originalEvent.dataTransfer.files.length > 1 ||
+        event.originalEvent.dataTransfer.files[0].size === 0
+      ) {
+        $('.upload-window').removeClass('ondrag');
+        document.l10n.formatValue('uploadPageMultipleFilesAlert').then(str => {
           alert(str);
         });
         return;
@@ -84,21 +162,39 @@ $(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');
+    document.l10n.formatValue('importingFile').then(importingFile => {
+      $('.progress-text').text(importingFile);
+    });
     //don't allow drag and drop when not on page-one
     $('body').off('drop', onUpload);
-    const expiration = 24 * 60 * 60 * 1000; //will eventually come from a field
 
     const fileSender = new FileSender(file);
     $('#cancel-upload').click(() => {
       fileSender.cancel();
       location.reload();
-      document.l10n.formatValue('uploadCancelNotification')
+      document.l10n.formatValue('uploadCancelNotification').then(str => {
-                   .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 => {
@@ -106,64 +202,97 @@ $(document).ready(function() {
       // update progress bar
       $('#ul-progress').circleProgress('value', percent);
       $('#ul-progress').circleProgress().on('circle-animation-end', function() {
-        $('.percent-number').html(`${Math.floor(percent * 100)}`);
+        $('.percent-number').text(`${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)`
+        `${file.name} (${bytes(progress[0], {
+          decimalPlaces: 1,
+          fixedDecimals: true
+        })} of ${bytes(progress[1], { decimalPlaces: 1 })})`
       );
-      } 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)`
-        );
-      }
-    });
-
-    fileSender.on('loading', isStillLoading => {
-      // The file is loading into Firefox at this stage
-      if (isStillLoading) {
-        console.log('Processing');
-      } else {
-        console.log('Finished processing');
-      }
     });
 
     fileSender.on('hashing', isStillHashing => {
       // The file is being hashed
       if (isStillHashing) {
-        console.log('Hashing');
+        document.l10n.formatValue('verifyingFile').then(verifyingFile => {
+          $('.progress-text').text(verifyingFile);
+        });
       } else {
         console.log('Finished hashing');
       }
     });
 
+    let uploadStart;
     fileSender.on('encrypting', isStillEncrypting => {
       // The file is being encrypted
       if (isStillEncrypting) {
-        console.log('Encrypting');
+        document.l10n.formatValue('encryptingFile').then(encryptingFile => {
+          $('.progress-text').text(encryptingFile);
+        });
       } 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
+    });
+
+    // For large files we need to give the ui a tick to breathe and update
+    // before we kick off the FileSender
+    setTimeout(() => {
       fileSender
         .upload()
         .then(info => {
+          const endTime = Date.now();
+          const totalTime = endTime - startTime;
+          const uploadTime = endTime - uploadStart;
+          const uploadSpeed = file.size / (uploadTime / 1000);
+          const expiration = EXPIRE_SECONDS * 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));
+
-        $('#upload-filename').attr('data-l10n-id', 'uploadSuccessConfirmHeader');
+          storage.addFile(info.fileId, fileData);
+          $('#upload-filename').attr(
+            'data-l10n-id',
+            'uploadSuccessConfirmHeader'
+          );
           t = window.setTimeout(() => {
             $('#page-one').attr('hidden', true);
             $('#upload-progress').attr('hidden', true);
@@ -171,36 +300,54 @@ $(document).ready(function() {
             $('#share-link').removeAttr('hidden');
           }, 1000);
 
-        populateFileList(JSON.stringify(fileData));
+          populateFileList(fileData);
-        document.l10n.formatValue('notifyUploadDone')
+          document.l10n.formatValue('notifyUploadDone').then(str => {
-                     .then(str => {
             notify(str);
           });
         })
         .catch(err => {
+          // err is 0 when coming from a cancel upload event
+          if (err === 0) {
+            return;
+          }
+          // only show error page when the error is anything other than user cancelling the upload
           Raven.captureException(err);
-        console.log(err);
           $('#page-one').attr('hidden', true);
           $('#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
           });
+        });
+    }, 10);
   }
 
   function allowDrop(ev) {
     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();
+          }
         }
       }
     };
@@ -208,21 +355,23 @@ $(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');
-    const $copyIcon = $('<img>', { src: '/resources/copy-16.svg', class: 'icon-copy', 'data-l10n-id': 'copyUrlHover'});
+    const $copyIcon = $('<img>', {
+      src: '/resources/copy-16.svg',
+      class: 'icon-copy',
+      'data-l10n-id': 'copyUrlHover'
+    });
     const expiry = document.createElement('td');
     const del = document.createElement('td');
-    const $delIcon = $('<img>', { src: '/resources/close-16.svg', class: 'icon-delete', 'data-l10n-id': 'deleteButtonHover' });
+    const $delIcon = $('<img>', {
+      src: '/resources/close-16.svg',
+      class: 'icon-delete',
+      'data-l10n-id': 'deleteButtonHover'
+    });
     const popupDiv = document.createElement('div');
     const $popupText = $('<div>', { class: 'popuptext' });
     const cellText = document.createTextNode(file.name);
@@ -230,14 +379,8 @@ $(document).ready(function() {
     const url = file.url.trim() + `#${file.secretKey}`.trim();
 
     $('#link').attr('value', url);
-    $('#copy-text').attr(
+    $('#copy-text').attr('data-l10n-args', '{"filename": "' + file.name + '"}');
-      'data-l10n-args',
+    $('#copy-text').attr('data-l10n-id', 'copyUrlFormLabelWithName');
-      '{"filename": "' + file.name + '"}'
-    );
-    $('#copy-text').attr(
-      'data-l10n-id',
-      'copyUrlFormLabelWithName'
-    );
     $popupText.attr('tabindex', '-1');
 
     name.appendChild(cellText);
@@ -258,14 +401,17 @@ $(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);
       aux.select();
       document.execCommand('copy');
       document.body.removeChild(aux);
-      document.l10n.formatValue('copiedUrl')
+      document.l10n.formatValue('copiedUrl').then(translated => {
-                   .then(translated => {
         link.innerHTML = translated;
       });
       window.setTimeout(() => {
@@ -283,7 +429,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);
@@ -291,7 +437,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);
@@ -310,7 +456,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();
@@ -319,20 +465,14 @@ $(document).ready(function() {
 
     // create popup
     popupDiv.classList.add('popup');
-    const popupDelSpan = document.createElement('span');
+    const $popupMessage = $('<div>', { class: 'popup-message' });
-    $(popupDelSpan).addClass('del-file');
+    $popupMessage.attr('data-l10n-id', 'deletePopupText');
-    $(popupDelSpan).attr('data-l10n-id', 'deleteFileList');
+    const $popupDelSpan = $('<span>', { class: 'popup-yes' });
-
+    $popupDelSpan.attr('data-l10n-id', 'deletePopupYes');
-    const popupNvmSpan = document.createElement('span');
+    const $popupNvmSpan = $('<span>', { class: 'popup-no' });
-    $(popupNvmSpan).addClass('nvm');
+    $popupNvmSpan.attr('data-l10n-id', 'deletePopupCancel');
-    $(popupNvmSpan).attr('data-l10n-id', 'nevermindButton');
-
-    $popupText.html([
-      popupDelSpan,
-      '<br/>',
-      popupNvmSpan
-    ]);
 
+    $popupText.html([$popupMessage, $popupDelSpan,  $popupNvmSpan]);
 
     // add data cells to table row
     row.appendChild(name);
@@ -345,19 +485,52 @@ $(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 => {
+    $popupText.find('.popup-yes').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);
+        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
     $delIcon.click(function() {
@@ -365,7 +538,7 @@ $(document).ready(function() {
       $popupText.focus();
     });
     // hide popup
-    $popupText.find('.nvm').click(function(e) {
+    $popupText.find('.popup-no').click(function(e) {
       e.stopPropagation();
       $popupText.removeClass('show');
     });
@@ -377,7 +550,6 @@ $(document).ready(function() {
       $popupText.removeClass('show');
     });
 
-
     toggleHeader();
   }
   function toggleHeader() {

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
 };

package.json

@@ -1,44 +1,43 @@
 {
   "name": "firefox-send",
   "description": "File Sharing Experiment",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "author": "Mozilla (https://mozilla.org)",
   "dependencies": {
-    "aws-sdk": "^2.62.0",
+    "aws-sdk": "^2.89.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",
+    "helmet": "^3.8.0",
-    "jquery": "^3.2.1",
-    "jquery-circle-progress": "^1.2.2",
-    "l20n": "^5.0.0",
     "mozlog": "^2.1.1",
     "raven": "^2.1.0",
-    "raven-js": "^3.16.0",
+    "redis": "^2.7.1"
-    "redis": "^2.7.1",
-    "selenium-webdriver": "^3.4.0",
-    "supertest": "^3.0.0",
-    "uglify-es": "3.0.19"
   },
   "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",
+    "raven-js": "^3.17.0",
-    "stylelint": "^7.11.0",
+    "selenium-webdriver": "^3.5.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",
+    "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",
-    "format": "prettier '{frontend/src/,scripts/,server/,test/}*.js' 'public/*.css' --single-quote --write",
+    "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": "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"
   }
 }

public/download.js

@@ -2,10 +2,10 @@
 window.Raven=require("raven-js"),window.Raven.config(window.dsn).install(),window.dsn=void 0;const testPilotGA=require("testpilot-ga");window.analytics=new testPilotGA({an:"Firefox Send",ds:"web",tid:window.trackerId});
 
 },{"raven-js":13,"testpilot-ga":17}],2:[function(require,module,exports){
-require("./common");const FileReceiver=require("./fileReceiver"),{notify:notify,findMetric:findMetric,sendEvent:sendEvent}=require("./utils"),bytes=require("bytes"),Storage=require("./storage"),storage=new Storage(localStorage),$=require("jquery");require("jquery-circle-progress");const Raven=window.Raven;$(document).ready(function(){$(".send-new").attr("href",window.location.origin),$(".send-new").click(function(e){e.preventDefault(),sendEvent("recipient","restarted",{cd2:"completed"}).then(()=>{location.href=e.currentTarget.href})}),$(".legal-links a, .social-links a, #dl-firefox").click(function(e){e.preventDefault();const t=findMetric(e.currentTarget.href);sendEvent("recipient","exited",{cd3:t}).then(()=>{location.href=e.currentTarget.href})}),$("#expired-send-new").click(function(){storage.referrer="errored-download"});const e=$("#dl-filename").html(),t=Number($("#dl-bytelength").text()),o=Number($("#dl-ttl").text());$("#dl-progress").circleProgress({value:0,startAngle:-Math.PI/2,fill:"#00C8D7",size:158,animation:{duration:300}}),$("#download-btn").click(function(){storage.totalDownloads+=1;const n=new FileReceiver,r=storage.numFiles;n.on("progress",o=>{window.onunload=function(){storage.referrer="cancelled-download",sendEvent("recipient","download-stopped",{cm1:t,cm5:storage.totalUploads,cm6:r,cm7:storage.totalDownloads,cd2:"cancelled"})},$("#download-page-one").attr("hidden",!0),$("#download-progress").removeAttr("hidden");const a=o[0]/o[1];$("#dl-progress").circleProgress("value",a),$(".percent-number").html(`${Math.floor(100*a)}`),$(".progress-text").text(`${e} (${bytes(o[0],{decimalPlaces:1,fixedDecimals:!0})} of ${bytes(o[1],{decimalPlaces:1})})`),1===a&&(n.removeAllListeners("progress"),document.l10n.formatValues("downloadNotification","downloadFinish").then(e=>{notify(e[0]),$(".title").html(e[1])}),window.onunload=null)});let a;n.on("decrypting",e=>{e?console.log("Decrypting"):(console.log("Done decrypting"),a=Date.now())}),n.on("hashing",e=>{e?console.log("Checking file integrity"):console.log("Integrity check done")});const l=Date.now();sendEvent("recipient","download-started",{cm1:t,cm4:o,cm5:storage.totalUploads,cm6:r,cm7:storage.totalDownloads}),n.download().catch(e=>{sendEvent("recipient","download-stopped",{cm1:t,cm5:storage.totalUploads,cm6:r,cm7:storage.totalDownloads,cd2:"errored",cd6:e}),document.l10n.formatValue("expiredPageHeader").then(e=>{$(".title").text(e)}),$("#download-btn").attr("hidden",!0),$("#expired-img").removeAttr("hidden"),console.log("The file has expired, or has already been deleted.")}).then(([e,o])=>{const n=Date.now(),d=n-l,c=t/((n-a)/1e3);storage.referrer="completed-download",sendEvent("recipient","download-stopped",{cm1:t,cm2:d,cm3:c,cm5:storage.totalUploads,cm6:r,cm7:storage.totalDownloads,cd2:"completed"});const i=new DataView(e),s=new Blob([i]),g=URL.createObjectURL(s),m=document.createElement("a");m.href=g,window.navigator.msSaveBlob?window.navigator.msSaveBlob(s,o):(m.download=o,document.body.appendChild(m),m.click())}).catch(e=>(Raven.captureException(e),Promise.reject(e)))})});
+require("./common");const FileReceiver=require("./fileReceiver"),{notify:notify,findMetric:findMetric,gcmCompliant:gcmCompliant,sendEvent:sendEvent}=require("./utils"),bytes=require("bytes"),Storage=require("./storage"),storage=new Storage(localStorage),$=require("jquery");require("jquery-circle-progress");const Raven=window.Raven;$(document).ready(function(){gcmCompliant().catch(e=>{$("#download").attr("hidden",!0),sendEvent("recipient","unsupported",{cd6:e}).then(()=>{location.replace("/unsupported")})}),$(".send-new").attr("href",window.location.origin),$(".send-new").click(function(e){e.preventDefault(),sendEvent("recipient","restarted",{cd2:"completed"}).then(()=>{location.href=e.currentTarget.href})}),$(".legal-links a, .social-links a, #dl-firefox").click(function(e){e.preventDefault();const t=findMetric(e.currentTarget.href);sendEvent("recipient","exited",{cd3:t}).then(()=>{location.href=e.currentTarget.href})});const e=$("#dl-filename").text(),t=Number($("#dl-bytelength").text()),o=Number($("#dl-ttl").text());$("#dl-progress").circleProgress({value:0,startAngle:-Math.PI/2,fill:"#3B9DFF",size:158,animation:{duration:300}}),$("#download-btn").click(function(){storage.totalDownloads+=1;const n=new FileReceiver,r=storage.numFiles;n.on("progress",o=>{window.onunload=function(){storage.referrer="cancelled-download",sendEvent("recipient","download-stopped",{cm1:t,cm5:storage.totalUploads,cm6:r,cm7:storage.totalDownloads,cd2:"cancelled"})},$("#download-page-one").attr("hidden",!0),$("#download-progress").removeAttr("hidden");const n=o[0]/o[1];$("#dl-progress").circleProgress("value",n),$(".percent-number").text(`${Math.floor(100*n)}`),$(".progress-text").text(`${e} (${bytes(o[0],{decimalPlaces:1,fixedDecimals:!0})} of ${bytes(o[1],{decimalPlaces:1})})`)});let a;n.on("decrypting",e=>{e?(n.removeAllListeners("progress"),window.onunload=null,document.l10n.formatValue("decryptingFile").then(e=>{$(".progress-text").text(e)})):(console.log("Done decrypting"),a=Date.now())}),n.on("hashing",e=>{e?document.l10n.formatValue("verifyingFile").then(e=>{$(".progress-text").text(e)}):($(".progress-text").text(" "),document.l10n.formatValues("downloadNotification","downloadFinish").then(e=>{notify(e[0]),$(".title").text(e[1])}))});const d=Date.now();sendEvent("recipient","download-started",{cm1:t,cm4:o,cm5:storage.totalUploads,cm6:r,cm7:storage.totalDownloads}),n.download().catch(e=>{sendEvent("recipient","download-stopped",{cm1:t,cm5:storage.totalUploads,cm6:r,cm7:storage.totalDownloads,cd2:"errored",cd6:e}),document.l10n.formatValue("expiredPageHeader").then(e=>{$(".title").text(e)}),$("#download-btn").attr("hidden",!0),$("#expired-img").removeAttr("hidden"),console.log("The file has expired, or has already been deleted.")}).then(([e,o])=>{const n=Date.now(),l=n-d,c=t/((n-a)/1e3);storage.referrer="completed-download",sendEvent("recipient","download-stopped",{cm1:t,cm2:l,cm3:c,cm5:storage.totalUploads,cm6:r,cm7:storage.totalDownloads,cd2:"completed"});const i=new DataView(e),s=new Blob([i]),m=URL.createObjectURL(s),p=document.createElement("a");p.href=m,window.navigator.msSaveBlob?window.navigator.msSaveBlob(s,o):(p.download=o,document.body.appendChild(p),p.click())}).catch(e=>(Raven.captureException(e),Promise.reject(e)))})});
 
 },{"./common":1,"./fileReceiver":3,"./storage":4,"./utils":5,"bytes":6,"jquery":9,"jquery-circle-progress":8}],3:[function(require,module,exports){
-const EventEmitter=require("events"),{hexToArray:hexToArray}=require("./utils");class FileReceiver extends EventEmitter{constructor(){super()}download(){return Promise.all([new Promise((e,t)=>{const r=new XMLHttpRequest;r.onprogress=(e=>{e.lengthComputable&&404!==e.target.status&&this.emit("progress",[e.loaded,e.total])}),r.onload=function(i){if(404===r.status)return void t(new Error("The file has expired, or has already been deleted."));const a=new Blob([this.response]),s=new FileReader;s.onload=function(){const t=JSON.parse(r.getResponseHeader("X-File-Metadata"));e({data:this.result,aad:t.aad,filename:t.filename,iv:t.id})},s.readAsArrayBuffer(a)},r.open("get","/assets"+location.pathname.slice(0,-1),!0),r.responseType="blob",r.send()}),window.crypto.subtle.importKey("jwk",{kty:"oct",k:location.hash.slice(1),alg:"A128GCM",ext:!0},{name:"AES-GCM"},!0,["encrypt","decrypt"])]).then(([e,t])=>(this.emit("decrypting",!0),Promise.all([window.crypto.subtle.decrypt({name:"AES-GCM",iv:hexToArray(e.iv),additionalData:hexToArray(e.aad)},t,e.data).then(e=>(this.emit("decrypting",!1),Promise.resolve(e))),e.filename,hexToArray(e.aad)]))).then(([e,t,r])=>(this.emit("hashing",!0),window.crypto.subtle.digest("SHA-256",e).then(i=>(this.emit("hashing",!1),new Uint8Array(i).toString()===r.toString()?(this.emit("safe",!0),Promise.all([e,decodeURIComponent(t)])):(this.emit("unsafe",!0),Promise.reject())))))}}module.exports=FileReceiver;
+const EventEmitter=require("events"),{hexToArray:hexToArray}=require("./utils");class FileReceiver extends EventEmitter{constructor(){super()}download(){return Promise.all([new Promise((e,t)=>{const r=new XMLHttpRequest;r.onprogress=(e=>{e.lengthComputable&&404!==e.target.status&&this.emit("progress",[e.loaded,e.total])}),r.onload=function(a){if(404===r.status)return void t(new Error("The file has expired, or has already been deleted."));const i=new Blob([this.response]),s=new FileReader;s.onload=function(){const t=JSON.parse(r.getResponseHeader("X-File-Metadata"));e({data:this.result,aad:t.aad,filename:t.filename,iv:t.id})},s.readAsArrayBuffer(i)},r.open("get","/assets"+location.pathname.slice(0,-1),!0),r.responseType="blob",r.send()}),window.crypto.subtle.importKey("jwk",{kty:"oct",k:location.hash.slice(1),alg:"A128GCM",ext:!0},{name:"AES-GCM"},!0,["encrypt","decrypt"])]).then(([e,t])=>(this.emit("decrypting",!0),Promise.all([window.crypto.subtle.decrypt({name:"AES-GCM",iv:hexToArray(e.iv),additionalData:hexToArray(e.aad),tagLength:128},t,e.data).then(e=>(this.emit("decrypting",!1),Promise.resolve(e))),e.filename,hexToArray(e.aad)]))).then(([e,t,r])=>(this.emit("hashing",!0),window.crypto.subtle.digest("SHA-256",e).then(a=>(this.emit("hashing",!1),new Uint8Array(a).toString()===r.toString()?(this.emit("safe",!0),Promise.all([e,decodeURIComponent(t)])):(this.emit("unsafe",!0),Promise.reject())))))}}module.exports=FileReceiver;
 
 },{"./utils":5,"events":7}],4:[function(require,module,exports){
 const{isFile:isFile}=require("./utils");class Storage{constructor(e){this.engine=e}get totalDownloads(){return Number(this.engine.getItem("totalDownloads"))}set totalDownloads(e){this.engine.setItem("totalDownloads",e)}get totalUploads(){return Number(this.engine.getItem("totalUploads"))}set totalUploads(e){this.engine.setItem("totalUploads",e)}get referrer(){return this.engine.getItem("referrer")}set referrer(e){this.engine.setItem("referrer",e)}get files(){const e=[];for(let t=0;t<this.engine.length;t++){const n=this.engine.key(t);isFile(n)&&e.push(JSON.parse(this.engine.getItem(n)))}return e}get numFiles(){let e=0;for(let t=0;t<this.engine.length;t++){const n=this.engine.key(t);isFile(n)&&(e+=1)}return e}getFileById(e){return this.engine.getItem(e)}has(e){return this.engine.hasOwnProperty(e)}remove(e){this.engine.removeItem(e)}addFile(e,t){this.engine.setItem(e,JSON.stringify(t))}}module.exports=Storage;

public/locales/en-US/send.ftl

@@ -1,5 +1,7 @@
 // Firefox Send is a brand name and should not be localized.
 title = Firefox Send
+siteSubtitle = web experiment
+siteFeedback = Feedback
 uploadPageHeader = Private, Encrypted File Sharing
 uploadPageExplainer = Send files through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.
 uploadPageLearnMore = Learn more
@@ -10,6 +12,10 @@ uploadPageBrowseButton = Select a file on your computer
 uploadPageMultipleFilesAlert = Uploading multiple files or a folder is currently not supported.
 uploadPageBrowseButtonTitle = Upload file
 uploadingPageHeader = Uploading Your File
+importingFile = Importing...
+verifyingFile = Verifying...
+encryptingFile = Encrypting...
+decryptingFile = Decrypting...
 notifyUploadDone = Your upload has finished.
 uploadingPageMessage = Once your file uploads you will be able to set expiry options.
 uploadingPageCancel = Cancel upload
@@ -54,8 +60,8 @@ errorAltText
 errorPageHeader = Something went wrong!
 errorPageMessage = There has been an error uploading the file.
 errorPageLink = Send another file
-linkExpiredAlt
+fileTooBig = That file is too big to upload. It should be less than { $size }.
-    .alt = Link expired
+linkExpiredAlt.alt = Link expired
 expiredPageHeader = This link has expired or never existed in the first place!
 notSupportedHeader = Your browser is not supported.
 // Firefox Send is a brand name and should not be localized.
@@ -67,6 +73,16 @@ copyFileList = Copy URL
 expiryFileList = Expires In
 deleteFileList = Delete
 nevermindButton = Never mind
+deleteButtonHover
+    .title = Delete
+copyUrlHover
+    .title = Copy URL
+legalHeader = Terms & Privacy
+legalNoticeTestPilot = Firefox Send is currently a Test Pilot experiment, and subject to the Test Pilot <a>Terms of Service</a> and <a>Privacy Notice</a>. You can learn more about this experiment and its data collection <a>here</a>.
+legalNoticeMozilla = Use of the Firefox Send website is also subject to Mozilla’s <a>Websites Privacy Notice</a> and <a>Websites Terms of Use</a>.
+deletePopupText = Delete this file?
+deletePopupYes = Yes
+deletePopupCancel = Cancel
 deleteButtonHover
     .title = Delete
 copyUrlHover

public/main.css

@@ -1,7 +1,12 @@
 /***     index.html     ***/
 html {
   background: url('resources/send_bg.svg');
-  font-family: 'SF Pro Text', sans-serif;
+  font-family: -apple-system,
+    BlinkMacSystemFont,
+    'SF Pro Text',
+    Helvetica,
+    Arial,
+    sans-serif;
   font-weight: 200;
   background-size: 100%;
   background-repeat: no-repeat;
@@ -10,24 +15,95 @@ html {
 }
 
 body {
-  min-height: 100%;
+  display: flex;
-  position: relative;
+  flex-direction: column;
   margin: 0;
+  min-height: 100vh;
+  position: relative;
+}
+
+.header {
+  align-items: flex-start;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  padding: 31px;
+  width: 100%;
 }
 
 .send-logo {
+  display: flex;
   position: relative;
-  top: 31px;
+  align-items: center;
-  left: 31px;
+}
-  display: inline-block;
+
+.site-title {
+  color: #3e3d40;
+  font-size: 32px;
+  font-weight: 500;
+  margin: 0;
+  position: relative;
+  top: -1px;
+}
+
+.site-subtitle {
+  color: #3e3d40;
+  font-size: 12px;
+  margin: 0 8px;
+}
+
+.site-subtitle a {
+  font-weight: bold;
+  color: #3e3d40;
+  transition: color 50ms;
+}
+
+.send-logo:hover a {
+  color: #0297f8;
+}
+
+.feedback {
+  background-color: #0297f8;
+  background-image: url('resources/feedback.svg');
+  background-position: 4px 6px;
+  background-repeat: no-repeat;
+  background-size: 14px;
+  border-radius: 3px;
+  border: 1px solid #0297f8;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  color: #fff;
+  cursor: pointer;
+  display: block;
+  float: right;
+  font-size: 12px;
+  line-height: 12px;
+  opacity: 0.9;
+  padding: 6px 6px 5px 20px;
+}
+
+.feedback:hover,
+.feedback:focus {
+  background-color: #0287e8;
+}
+
+.feedback:active {
+  background-color: #0277d8;
 }
 
 .all {
-  padding-top: 10%;
+  flex: 1;
-  padding-bottom: 51px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  max-width: 630px;
+  margin: 0 auto;
+  width: 96%;
 }
 
-input, select, textarea, button {
+input,
+select,
+textarea,
+button {
   font-family: inherit;
 }
 
@@ -38,24 +114,26 @@ a {
 /**   page-one    **/
 .title {
   font-size: 33px;
+  line-height: 40px;
   margin: 20px auto;
   text-align: center;
+  max-width: 520px;
   font-family: 'SF Pro Display', sans-serif;
 }
 
 .description {
   font-size: 15px;
   line-height: 23px;
-  width: 630px;
+  max-width: 630px;
   text-align: center;
   margin: 0 auto 60px;
-  color: #0C0C0D;
+  color: #0c0c0d;
+  width: 92%;
 }
 
 .upload-window {
   border: 1px dashed rgba(0, 148, 251, 0.5);
   margin: 0 auto;
-  width: 640px;
   height: 255px;
   border-radius: 4px;
   display: flex;
@@ -63,14 +141,15 @@ a {
   align-items: center;
   flex-direction: column;
   text-align: center;
+  transition: transform 150ms;
+  padding: 15px;
 }
 
 .upload-window.ondrag {
   border: 3px dashed rgba(0, 148, 251, 0.5);
   margin: 0 auto;
-  width: 636px;
   height: 251px;
-  transform: scale(1.05);
+  transform: scale(1.04);
   border-radius: 4.2px;
   display: flex;
   justify-content: center;
@@ -80,7 +159,7 @@ a {
 }
 
 .link {
-  color: #0094FB;
+  color: #0094fb;
   text-decoration: none;
 }
 
@@ -92,10 +171,10 @@ a {
 }
 
 #browse {
-  background: #0297F8;
+  background: #0297f8;
   border-radius: 5px;
   font-size: 15px;
-  color: #FFF;
+  color: #fff;
   width: 240px;
   height: 44px;
   display: flex;
@@ -104,12 +183,17 @@ a {
   cursor: pointer;
 }
 
+#browse:hover {
+  background-color: #0287e8;
+}
+
 input[type="file"] {
   display: none;
 }
 
 #file-size-msg {
   font-size: 12px;
+  line-height: 16px;
   color: #737373;
   margin-bottom: 22px;
 }
@@ -129,9 +213,10 @@ th {
 td {
   font-size: 15px;
   vertical-align: top;
-  color: #4A4A4A;
+  color: #4a4a4a;
   padding: 17px 19px 0;
   line-height: 23px;
+  position: relative;
 }
 
 table {
@@ -141,42 +226,44 @@ table {
 
 tbody {
   word-wrap: break-word;
+  word-break: break-all;
 }
 
 #uploaded-files {
-  width: 640px;
   margin: 45.3px auto;
   table-layout: fixed;
 }
 
-.icon-delete, .icon-copy, .icon-check {
+.icon-delete,
+.icon-copy,
+.icon-check {
   cursor: pointer;
 }
 
 /* Popup container */
 .popup {
-  position: relative;
+  position: absolute;
   display: inline-block;
-  cursor: pointer;
 }
 
 /* The actual popup (appears on top) */
 .popup .popuptext {
   visibility: hidden;
-  width: 160px;
+  min-width: 115px;
-  background-color: #555;
+  background-color: #fff;
-  color: #FFF;
+  color: #000;
+  border: 1px solid #0297f8;
   text-align: center;
-  border-radius: 6px;
+  border-radius: 5px;
-  padding: 8px 0;
+  padding: 7px 8px;
   position: absolute;
   z-index: 1;
-  bottom: 20px;
+  bottom: 8px;
-  left: 50%;
+  right: -28px;
-  margin-left: -88px;
   transition: opacity 0.5s;
   opacity: 0;
   outline: 0;
+  box-shadow: 3px 3px 7px #888;
 }
 
 /* Popup arrow */
@@ -184,11 +271,11 @@ tbody {
   content: "";
   position: absolute;
   top: 100%;
-  left: 50%;
+  right: 30px;
   margin-left: -5px;
   border-width: 5px;
   border-style: solid;
-  border-color: #555 transparent transparent;
+  border-color: #0297f8 transparent transparent;
 }
 
 .popup .show {
@@ -196,6 +283,29 @@ tbody {
   opacity: 1;
 }
 
+.popup-message {
+  margin-bottom: 4px;
+}
+
+.popup-yes {
+  color: #fff;
+  background-color: #0297f8;
+  border-radius: 5px;
+  padding: 2px 11px;
+  cursor: pointer;
+}
+
+.popup-yes:hover {
+  background-color: #0287e8;
+}
+
+.popup-no {
+  color: #4a4a4a;
+  border-radius: 6px;
+  padding: 3px 5px;
+  cursor: pointer;
+}
+
 /**   upload-progress   **/
 .progress-bar {
   margin-top: 3px;
@@ -239,14 +349,13 @@ tbody {
 }
 
 #cancel-upload {
-  color: #D70022;
+  color: #d70022;
   cursor: pointer;
   text-decoration: underline;
 }
 
 /**   share-link    **/
 #share-window {
-  width: 645px;
   margin: 0 auto;
   display: flex;
   justify-content: center;
@@ -262,53 +371,59 @@ tbody {
 #copy {
   display: flex;
   flex-wrap: nowrap;
+  width: 640px;
 }
 
 #copy-text {
   align-self: flex-start;
   margin-top: 60px;
   margin-bottom: 10px;
-  color: #0C0C0D;
+  color: #0c0c0d;
 }
 
 #link {
-  width: 480px;
+  flex: 1;
   height: 56px;
-  border: 1px solid #0297F8;
+  border: 1px solid #0297f8;
   border-radius: 6px 0 0 6px;
   font-size: 24px;
   color: #737373;
   font-family: 'SF Pro Display', sans-serif;
   letter-spacing: 0;
   line-height: 23px;
+  padding-left: 5px;
+  padding-right: 5px;
 }
 
 #link:disabled {
-  border: 1px solid #05A700;
+  border: 1px solid #05a700;
-  background: #FFF;
+  background: #fff;
 }
 
 #copy-btn {
-  width: 165px;
+  flex: 0 1 165px;
-  height: 60px;
+  background: #0297f8;
-  background: #0297F8;
-  border: 1px solid #0297F8;
   border-radius: 0 6px 6px 0;
+  border: 1px solid #0297f8;
   color: white;
   cursor: pointer;
   font-size: 15px;
+  height: 60px;
+  padding-left: 10px;
+  padding-right: 10px;
+  white-space: nowrap;
 }
 
 #copy-btn:disabled {
-  background: #05A700;
+  background: #05a700;
-  border: 1px solid #05A700;
+  border: 1px solid #05a700;
   cursor: auto;
 }
 
 #delete-file {
   width: 176px;
   height: 44px;
-  background: #FFF;
+  background: #fff;
   border: 1px solid rgba(12, 12, 13, 0.3);
   border-radius: 5px;
   font-size: 15px;
@@ -322,7 +437,7 @@ tbody {
   font-size: 15px;
   margin: auto;
   text-align: center;
-  color: #0094FB;
+  color: #0094fb;
   cursor: pointer;
   text-decoration: underline;
 }
@@ -336,7 +451,8 @@ tbody {
   text-align: center;
 }
 
-#upload-error[hidden], #unsupported-browser[hidden] {
+#upload-error[hidden],
+#unsupported-browser[hidden] {
   display: none;
 }
 
@@ -356,9 +472,8 @@ tbody {
 .unsupported-description {
   font-size: 13px;
   line-height: 23px;
-  width: 630px;
   text-align: center;
-  color: #7D7D7D;
+  color: #7d7d7d;
   margin: 0 auto 23px;
 }
 
@@ -370,14 +485,14 @@ tbody {
   margin-bottom: 181px;
   width: 260px;
   height: 80px;
-  background: #12BC00;
+  background: #12bc00;
   border-radius: 3px;
   cursor: pointer;
   border: 0;
   box-shadow: 0 5px 3px rgb(234, 234, 234);
   font-family: 'Fira Sans';
   font-weight: 500;
-  color: #FFF;
+  color: #fff;
   font-size: 26px;
   display: flex;
   justify-content: center;
@@ -406,15 +521,15 @@ tbody {
   margin-top: 20px;
   margin-bottom: 30px;
   text-align: center;
-  background: #0297F8;
+  background: #0297f8;
-  border: 1px solid #0297F8;
+  border: 1px solid #0297f8;
   border-radius: 5px;
   font-weight: 300;
   cursor: pointer;
 }
 
 #download-btn:disabled {
-  background: #47B04B;
+  background: #47b04b;
   cursor: auto;
 }
 
@@ -434,9 +549,8 @@ tbody {
 .expired-description {
   font-size: 15px;
   line-height: 23px;
-  width: 630px;
   text-align: center;
-  color: #7D7D7D;
+  color: #7d7d7d;
   margin: 0 auto 23px;
 }
 
@@ -460,14 +574,13 @@ tbody {
 
 /*    footer    */
 .footer {
-  position: absolute;
   right: 0;
   bottom: 0;
   left: 0;
   font-size: 15px;
   display: flex;
   align-items: flex-end;
-  padding: 10px;
+  padding: 50px 10px 10px;
 }
 
 .mozilla-logo {
@@ -495,8 +608,69 @@ tbody {
   margin-left: 30px;
 }
 
-.github, .twitter {
+.github,
+.twitter {
   width: 32px;
   height: 32px;
   margin-bottom: -5px;
 }
+
+@media (max-device-width: 768px) {
+  .description {
+    margin: 0 auto 25px;
+  }
+
+  #copy {
+    width: 100%;
+  }
+
+  #link {
+    font-size: 18px;
+  }
+
+  .mozilla-logo {
+    margin-left: -7px;
+  }
+
+  .legal-links > * {
+    display: block;
+    padding: 10px 0;
+  }
+}
+
+@media (max-device-width: 520px) {
+  .header {
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+
+  .feedback {
+    margin-top: 10px;
+  }
+
+  #copy {
+    width: 100%;
+    flex-direction: column;
+  }
+
+  #link {
+    font-size: 22px;
+    padding: 15px 10px;
+    border-radius: 6px 6px 0 0;
+  }
+
+  #copy-btn {
+    border-radius: 0 0 6px 6px;
+    flex: 0 1 65px;
+  }
+
+  th {
+    font-size: 14px;
+    padding: 0 5px;
+  }
+
+  td {
+    font-size: 13px;
+    padding: 17px 5px 0;
+  }
+}

public/resources/feedback.svg

@@ -0,0 +1 @@
+<svg width="15" height="13" viewBox="0 0 15 13" xmlns="http://www.w3.org/2000/svg"><title>Combined Shape</title><path d="M10.274 9.193a5.957 5.957 0 0 1-2.98.778C4.37 9.97 2 7.963 2 5.485 2 3.008 4.37 1 7.294 1c2.924 0 5.294 2.008 5.294 4.485 0 .843-.274 1.632-.751 2.305l.577 2.21-2.14-.807zm-5.983-2.96a.756.756 0 0 0 .763-.748.756.756 0 0 0-.763-.747.756.756 0 0 0-.764.747c0 .413.342.748.764.748zm3.054 0a.756.756 0 0 0 .764-.748.756.756 0 0 0-.764-.747.756.756 0 0 0-.764.747c0 .413.342.748.764.748zm3.054 0a.756.756 0 0 0 .764-.748.756.756 0 0 0-.764-.747.756.756 0 0 0-.763.747c0 .413.342.748.763.748z" fill="#FFF" fill-rule="evenodd"/></svg>

scripts/version.js

@@ -14,7 +14,7 @@ const filename = path.join(__dirname, '..', 'public', 'version.json');
 const filedata = {
   commit,
   source: pkg.homepage,
-  version: pkg.version
+  version: process.env.CIRCLE_TAG || pkg.version
 };
 
 fs.writeFileSync(filename, JSON.stringify(filedata, null, 2) + '\n');

server/config.js

@@ -4,12 +4,12 @@ const conf = convict({
   s3_bucket: {
     format: String,
     default: '',
-    env: 'P2P_S3_BUCKET'
+    env: 'S3_BUCKET'
   },
   redis_host: {
     format: String,
     default: 'localhost',
-    env: 'P2P_REDIS_HOST'
+    env: 'REDIS_HOST'
   },
   listen_port: {
     format: 'port',
@@ -25,17 +25,27 @@ const conf = convict({
   sentry_id: {
     format: String,
     default: '',
-    env: 'P2P_SENTRY_CLIENT'
+    env: 'SENTRY_CLIENT'
   },
   sentry_dsn: {
     format: String,
     default: '',
-    env: 'P2P_SENTRY_DSN'
+    env: 'SENTRY_DSN'
   },
   env: {
     format: ['production', 'development', 'test'],
     default: 'development',
     env: 'NODE_ENV'
+  },
+  max_file_size: {
+    format: Number,
+    default: 1024 * 1024 * 1024 * 2,
+    env: 'MAX_FILE_SIZE'
+  },
+  expire_seconds: {
+    format: Number,
+    default: 86400,
+    env: 'EXPIRE_SECONDS'
   }
 });
 

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();
 
@@ -34,10 +32,12 @@ app.engine(
 app.set('view engine', 'handlebars');
 
 app.use(helmet());
-app.use(helmet.hsts({
+app.use(
+  helmet.hsts({
     maxAge: 31536000,
     force: conf.env === 'production'
-}));
+  })
+);
 app.use(
   helmet.contentSecurityPolicy({
     directives: {
@@ -45,38 +45,51 @@ app.use(
       connectSrc: [
         "'self'",
         'https://sentry.prod.mozaws.net',
-        'https://www.google-analytics.com',
+        'https://www.google-analytics.com'
-        'https://ssl.google-analytics.com'
       ],
       imgSrc: [
         "'self'",
-        'https://www.google-analytics.com',
+        'https://www.google-analytics.com'
-        'https://ssl.google-analytics.com'
       ],
-      scriptSrc: ["'self'", 'https://ssl.google-analytics.com'],
+      scriptSrc: ["'self'"],
       styleSrc: ["'self'", 'https://code.cdn.mozilla.net'],
       fontSrc: ["'self'", 'https://code.cdn.mozilla.net'],
       formAction: ["'none'"],
       frameAncestors: ["'none'"],
-      objectSrc: ["'none'"]
+      objectSrc: ["'none'"],
+      reportUri: '/__cspreport__'
+    }
+  })
+);
+app.use(
+  busboy({
+    limits: {
+      fileSize: conf.max_file_size
     }
   })
 );
-app.use(busboy());
 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('/legal', (req, res) => {
+  res.render('legal');
+});
+
 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,
+    expireSeconds: conf.expire_seconds,
     layout: false
   });
 });
@@ -107,15 +120,17 @@ app.get('/download/:id', (req, res) => {
     storage
       .length(id)
       .then(contentLength => {
+        storage.ttl(id).then(timeToExpiry => {
           res.render('download', {
             filename: decodeURIComponent(filename),
             filesize: bytes(contentLength),
-          trackerId: conf.analytics_id,
+            sizeInBytes: contentLength,
-          dsn: conf.sentry_id
+            timeToExpiry: timeToExpiry
+          });
         });
       })
       .catch(() => {
-        res.render('download');
+        res.status(404).render('notfound');
       });
   });
 });
@@ -219,7 +234,8 @@ app.post('/upload', (req, res, next) => {
   req.busboy.on('file', (fieldname, file, filename) => {
     log.info('Uploading:', newId);
 
-    storage.set(newId, file, filename, meta).then(() => {
+    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({
@@ -227,7 +243,14 @@ app.post('/upload', (req, res, next) => {
           delete: meta.delete,
           id: newId
         });
-    });
+      },
+      err => {
+        if (err.message === 'limit') {
+          return res.sendStatus(413);
+        }
+        res.sendStatus(500);
+      }
+    );
   });
 
   req.on('close', err => {
@@ -241,7 +264,7 @@ app.post('/upload', (req, res, next) => {
       .catch(err => {
         log.info('DeleteError:', newId);
       });
-  })
+  });
 });
 
 app.get('/__lbheartbeat__', (req, res) => {

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(
+    const filepath = path.join(__dirname, '../static', newId);
-      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);
+      redis_client.expire(newId, conf.expire_seconds);
       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
   };
-
+  let hitLimit = false;
-  return new Promise((resolve, reject) => {
+  const upload = s3.upload(params);
-    s3.upload(params, function(err, _data) {
+  file.on('limit', () => {
-      if (err) {
+    hitLimit = true;
-        log.info('awsUploadError:', err.stack); // an error occurred
+    upload.abort();
-        reject();
+  });
-      } else {
+  return upload.promise().then(
+    () => {
       redis_client.hmset(newId, meta);
-
+      redis_client.expire(newId, conf.expire_seconds);
-        redis_client.expire(newId, 86400000);
       log.info('awsUploadFinish', 'Upload Finished of ' + filename);
-        resolve(meta.delete);
+    },
+    err => {
+      if (hitLimit) {
+        throw new Error('limit');
+      } else {
+        throw err;
       }
-    });
+    }
-  });
+  );
 }
 
 function awsDelete(id, delete_token) {

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 # ¯\_(ツ)_/¯

test/unit/aws.storage.test.js

@@ -110,20 +110,20 @@ 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));
+        assert(expire.calledWith('123', 86400));
       })
       .catch(err => assert.fail());
   });
 
   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));
   });

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);
       })

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>

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>
+  <a class="send-new" id="send-new-error" 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>
 </div>

views/jsconfig.handlebars

@@ -4,3 +4,5 @@ window.dsn = '{{{dsn}}}';
 {{#if trackerId}}
 window.trackerId = '{{{trackerId}}}';
 {{/if}}
+const MAXFILESIZE = {{{maxFileSize}}};
+const EXPIRE_SECONDS = {{{expireSeconds}}};

views/layouts/main.handlebars

@@ -3,30 +3,37 @@
 <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/{locale}/send.ftl">
-  <script defer src="/l20n/dist/web/l20n.js"></script>
+  <script defer src="/l20n.min.js"></script>
 </head>
 <body>
+  <header class="header">
     <div class="send-logo">
-    <img src="/resources/send_logo.svg"/>
+      <img src="/resources/send_logo.svg" alt="Send"/>
-    <img src="/resources/send_logo_type.svg"/>
+      <h1 class="site-title">Send</h1>
+      <div class="site-subtitle">
+        <a href="https://testpilot.firefox.com" target="_blank">Firefox Test Pilot</a>
+        <div data-l10n-id="siteSubtitle">web experiment</div>
       </div>
+    </div>
+    <a href="https://qsurvey.mozilla.com/s3/txp-firefox-send" rel="noreferrer noopener" class="feedback" target="_blank" data-l10n-id="siteFeedback">Feedback</a>
+  </header>
   <div class="all">
     {{{body}}}
   </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/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="/legal" data-l10n-id="footerLinkPrivacy"></a>
-      <a href="https://testpilot.firefox.com/terms" data-l10n-id="footerLinkTerms"></a>
+      <a href="/legal" data-l10n-id="footerLinkTerms"></a>
       <a href="https://www.mozilla.org/en-US/privacy/websites/#cookies" data-l10n-id="footerLinkCookies"></a>
     </div>
     <div class="social-links">

views/legal.handlebars

@@ -0,0 +1,12 @@
+<div id="legal">
+  <div class="title" data-l10n-id="legalHeader"></div>
+  <div class="description" data-l10n-id="legalNoticeTestPilot">
+    <a href="https://testpilot.firefox.com/terms"></a>
+    <a href="https://testpilot.firefox.com/privacy"></a>
+    <a href="https://testpilot.firefox.com/experiments/send"></a>
+  </div>
+  <div class="description" data-l10n-id="legalNoticeMozilla">
+    <a href="https://www.mozilla.org/privacy/websites/"></a>
+    <a href="https://www.mozilla.org/about/legal/terms/mozilla/"></a>
+  </div>
+</div>

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" href="/" id="expired-send-new" data-l10n-id="sendYourFilesLink"></a>
+</div>

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>