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,6 +240,9 @@ $(document).ready(function() {
       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 => {
@@ -252,6 +250,7 @@ $(document).ready(function() {
           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', {
@@ -315,6 +314,7 @@ $(document).ready(function() {
             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.