Merge pull request #285 from mozilla/phases

added messages for processing phases

frontend/src/download.js

@@ -46,7 +46,7 @@ $(document).ready(function() {
     storage.referrer = 'errored-download';
   });
 
-  const filename = $('#dl-filename').html();
+  const filename = $('#dl-filename').text();
   const bytelength = Number($('#dl-bytelength').text());
   const timeToExpiry = Number($('#dl-ttl').text());
 
@@ -83,31 +83,24 @@ $(document).ready(function() {
       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)}`);
       $('.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]);
-          });
-        window.onunload = null;
-      }
     });
 
     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();
@@ -117,9 +110,17 @@ $(document).ready(function() {
     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]);
+          });
       }
     });
 

frontend/src/upload.js

@@ -77,7 +77,6 @@ $(document).ready(function() {
   $copyBtn.attr('data-l10n-id', 'copyUrlFormButton');
 
   const files = storage.files;
-  console.log(files);
   if (files.length === 0) {
     toggleHeader();
   } else {
@@ -134,7 +133,6 @@ $(document).ready(function() {
   // on file upload by browse or drag & drop
   function onUpload(event) {
     event.preventDefault();
-
     storage.totalUploads += 1;
 
     let file = '';
@@ -163,9 +161,11 @@ $(document).ready(function() {
     $('#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(() => {
@@ -192,7 +192,7 @@ $(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)}`);
       });
       $('.progress-text').text(
         `${file.name} (${bytes(progress[0], {
@@ -202,19 +202,12 @@ $(document).ready(function() {
       );
     });
 
-    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');
       }
@@ -224,7 +217,9 @@ $(document).ready(function() {
     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();
@@ -245,76 +240,81 @@ $(document).ready(function() {
       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);
+    // 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 = 24 * 60 * 60 * 1000; //will eventually come from a field
 
-        // 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'
-        });
+          // 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,
-          totalTime: totalTime,
-          typeOfUpload: event.type === 'drop' ? 'drop' : 'click',
-          uploadSpeed: uploadSpeed
-        };
+          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,
+            totalTime: totalTime,
+            typeOfUpload: event.type === 'drop' ? 'drop' : 'click',
+            uploadSpeed: uploadSpeed
+          };
 
-        storage.addFile(info.fileId, fileData);
-        $('#upload-filename').attr(
-          'data-l10n-id',
-          'uploadSuccessConfirmHeader'
-        );
-        t = window.setTimeout(() => {
+          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);
+            $('#upload-error').attr('hidden', true);
+            $('#share-link').removeAttr('hidden');
+          }, 1000);
+
+          populateFileList(fileData);
+          document.l10n.formatValue('notifyUploadDone').then(str => {
+            notify(str);
+          });
+        })
+        .catch(err => {
+          Raven.captureException(err);
+          console.log(err);
           $('#page-one').attr('hidden', true);
           $('#upload-progress').attr('hidden', true);
-          $('#upload-error').attr('hidden', true);
-          $('#share-link').removeAttr('hidden');
-        }, 1000);
+          $('#upload-error').removeAttr('hidden');
+          window.clearTimeout(t);
 
-        populateFileList(fileData);
-        document.l10n.formatValue('notifyUploadDone').then(str => {
-          notify(str);
+          // 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
+          });
         });
-      })
-      .catch(err => {
-        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) {

public/locales/send.en-US.ftl

@@ -15,6 +15,10 @@ uploadPageMultipleFilesAlert = Uploading multiple files or a folder is currently
 uploadPageBrowseButtonTitle = Upload file
 
 uploadingPageHeader = Uploading Your File
+importingFile = Importing...
+verifyingFile = Verifying...
+encryptingFile = Encrypting...
+decryptingFile = Decrypting...
 
 notifyUploadDone = Your upload has finished.