add file size limit message

frontend/src/download.js

@@ -5,7 +5,6 @@ require('jquery-circle-progress');
 
 const Raven = window.Raven;
 $(document).ready(function() {
-  $('#download-progress').hide();
   //link back to homepage
   $('.send-new').attr('href', window.location.origin);
 
@@ -23,8 +22,8 @@ $(document).ready(function() {
     const fileReceiver = new FileReceiver();
 
     fileReceiver.on('progress', progress => {
-      $('#download-page-one').hide();
-      $('#download-progress').show();
+      $('#download-page-one').attr('hidden', true);
+      $('#download-progress').removeAttr('hidden');
       const percent = progress[0] / progress[1];
       // update progress bar
       $('#dl-progress').circleProgress('value', percent);
@@ -50,7 +49,7 @@ $(document).ready(function() {
                      .then(translated => {
                        notify(translated[0]);
                        $('.title').html(translated[1]);
-                     })
+                     });
       }
     });
 
@@ -78,9 +77,9 @@ $(document).ready(function() {
         document.l10n.formatValue('expiredPageHeader')
                      .then(translated => {
                        $('.title').text(translated);
-                     })
-        $('#download-btn').hide();
-        $('#expired-img').show();
+                     });
+        $('#download-btn').attr('hidden', true);
+        $('#expired-img').removeAttr('hidden');
         console.log('The file has expired, or has already been deleted.');
         return;
       })

frontend/src/upload.js

@@ -7,8 +7,8 @@ const Raven = window.Raven;
 
 $(document).ready(function() {
   gcmCompliant().catch(err => {
-    $('#page-one').hide();
-    $('#unsupported-browser').show();
+    $('#page-one').attr('hidden', true);
+    $('#unsupported-browser').removeAttr('hidden');
   });
 
   $('#file-upload').change(onUpload);
@@ -19,12 +19,6 @@ $(document).ready(function() {
   $('#link').attr('disabled', false);
   $copyBtn.attr('data-l10n-id', 'copyUrlFormButton');
 
-  $('#upload-progress').hide();
-  $('#share-link').hide();
-  $('#upload-error').hide();
-  $('#unsupported-browser').hide();
-  $('#compliance-error').hide();
-  $('#page-one').show();
 
   if (localStorage.length === 0) {
     toggleHeader();
@@ -75,6 +69,12 @@ $(document).ready(function() {
   // on file upload by browse or drag & drop
   function onUpload(event) {
     event.preventDefault();
+    $('#page-one').attr('hidden', true);
+    $('#upload-error').attr('hidden', true);
+    $('#upload-progress').removeAttr('hidden');
+    //don't allow drag and drop when not on page-one
+    $('body').off('drop', onUpload);
+
     let file = '';
     if (event.type === 'drop') {
       file = event.originalEvent.dataTransfer.files[0];
@@ -89,17 +89,11 @@ $(document).ready(function() {
       location.reload();
       document.l10n.formatValue('uploadCancelNotification')
                    .then(str => {
-                     console.log('here')
                      notify(str);
-                   })
+                   });
     });
 
     fileSender.on('progress', progress => {
-      $('#page-one').hide();
-      $('#upload-error').hide();
-      $('#upload-progress').show();
-      //don't allow drag and drop when not on page-one
-      $('body').off('drop', onUpload);
       const percent = progress[0] / progress[1];
       // update progress bar
       $('#ul-progress').circleProgress('value', percent);
@@ -163,23 +157,24 @@ $(document).ready(function() {
         localStorage.setItem(info.fileId, JSON.stringify(fileData));
         $('#upload-filename').attr('data-l10n-id', 'uploadSuccessConfirmHeader');
         t = window.setTimeout(() => {
-          $('#page-one').hide();
-          $('#upload-progress').hide();
-          $('#upload-error').hide();
-          $('#share-link').show();
+          $('#page-one').attr('hidden', true);
+          $('#upload-progress').attr('hidden', true);
+          $('#upload-error').attr('hidden', true);
+          $('#share-link').removeAttr('hidden');
         }, 2000);
 
         populateFileList(JSON.stringify(fileData));
-        document.l10n.formatValue('notifyUploadDone').then(str => {
-          notify(str);
-        });
+        document.l10n.formatValue('notifyUploadDone')
+                     .then(str => {
+                       notify(str);
+                     });
       })
       .catch(err => {
         Raven.captureException(err);
         console.log(err);
-        $('#page-one').hide();
-        $('#upload-progress').hide();
-        $('#upload-error').show();
+        $('#page-one').attr('hidden', true);
+        $('#upload-progress').attr('hidden', true);
+        $('#upload-error').removeAttr('hidden');
         window.clearTimeout(t);
       });
   }
@@ -263,8 +258,8 @@ $(document).ready(function() {
       document.body.removeChild(aux);
       document.l10n.formatValue('copiedUrl')
                    .then(translated => {
-        link.innerHTML = translated;
-      })
+                     link.innerHTML = translated;
+                   });
       window.setTimeout(() => {
         const linkImg = document.createElement('img');
         $(linkImg).addClass('icon-copy');
@@ -381,9 +376,9 @@ $(document).ready(function() {
   function toggleHeader() {
     //hide table header if empty list
     if (document.querySelector('tbody').childNodes.length === 1) {
-      $('#file-list').hide();
+      $('#file-list').attr('hidden', true);
     } else {
-      $('#file-list').show();
+      $('#file-list').removeAttr('hidden');
     }
   }
 });

public/locales/send.en-US.ftl

@@ -5,6 +5,7 @@ uploadPageExplainer = Send files through a safe, private, and encrypted link tha
 
 uploadPageLearnMore = Learn more
 uploadPageDropMessage = Drop your files here to start uploading
+uploadPageSizeMessage = For the most reliable operation, it’s best to keep your file under 1GB
 uploadPageBrowseButton = Select a file on your computer
   .title = {uploadPageBrowseButtonTitle}
 
@@ -82,4 +83,4 @@ footerLinkLegal = Legal
 footerLinkAbout = About Test Pilot
 footerLinkPrivacy = Privacy
 footerLinkTerms = Terms
-footerLinkCookies = Cookies
+footerLinkCookies = Cookies

public/main.css

@@ -87,7 +87,7 @@ a {
 #upload-text {
   font-size: 22px;
   color: #737373;
-  margin: 20px 0 30px;
+  margin: 20px 0 10px;
   font-family: 'SF Pro Display', sans-serif;
 }
 
@@ -108,6 +108,12 @@ input[type="file"] {
   display: none;
 }
 
+#file-size-msg {
+  font-size: 12px;
+  color: #737373;
+  margin-bottom: 22px;
+}
+
 /**   file-list   **/
 th {
   font-size: 16px;
@@ -330,6 +336,10 @@ tbody {
   text-align: center;
 }
 
+#upload-error[hidden], #unsupported-browser[hidden] {
+  display: none;
+}
+
 #upload-error-img {
   margin-bottom: 90px;
   margin-top: 5px;
@@ -439,6 +449,10 @@ tbody {
   text-align: center;
 }
 
+#download-progress[hidden] {
+  display: none;
+}
+
 #download-img {
   width: 283px;
   height: 196px;

views/download.handlebars

@@ -2,7 +2,7 @@
   {{#if filename}}
   <div id="download-page-one">
     <div class="title">
-      <span id="dl-filename" 
+      <span id="dl-filename"
             data-l10n-id="downloadFileName"
             data-l10n-args='{"filename": "{{filename}}"}'></span>
       <span data-l10n-id="downloadFileSize"
@@ -15,7 +15,7 @@
     </div>
   </div>
 
-  <div id="download-progress">
+  <div id="download-progress" hidden="true">
     <div class="title"
           data-l10n-id="downloadingPageProgress"
           data-l10n-args='{"filename": "{{filename}}", "size": "{{filesize}}"}'>

views/index.handlebars

@@ -7,9 +7,9 @@
   <div class="upload-window" >
     <div id="upload-img"><img data-l10n-id="uploadSvgAlt" src="/resources/upload.svg"/></div>
     <div id="upload-text" data-l10n-id="uploadPageDropMessage"></div>
-
+    <span id="file-size-msg"><em data-l10n-id="uploadPageSizeMessage"></em></span>
     <form method="post" action="upload" enctype="multipart/form-data">
-      <label for="file-upload" id="browse" 
+      <label for="file-upload" id="browse"
               data-l10n-id="uploadPageBrowseButton"></label>
       <input id="file-upload" type="file" name="fileUploaded" />
     </form>
@@ -33,7 +33,7 @@
   </div>
 </div>
 
-<div id="upload-progress">
+<div id="upload-progress" hidden="true">
   <div class="title" id="upload-filename" data-l10n-id="uploadingPageHeader"></div>
   <div class="description"></div>
   <!-- progress bar here -->
@@ -45,13 +45,13 @@
   </div>
   <div class="upload">
     <div class="progress-text"></div>
-    <div id="cancel-upload" 
+    <div id="cancel-upload"
           data-l10n-id="uploadingPageCancel"></div>
   </div>
-  
+
 </div>
 
-<div id="share-link">
+<div id="share-link" hidden="true">
   <div class="title" data-l10n-id="uploadSuccessTimingHeader"></div>
   <div id="share-window">
     <div id="copy-text" data-l10n-id="copyUrlFormLabel"></div>
@@ -64,14 +64,14 @@
   </div>
 </div>
 
-<div id="upload-error">
+<div id="upload-error" hidden="true">
   <div class="title" data-l10n-id="errorPageHeader"></div>
   <div class="expired-description" data-l10n-id="errorPageMessage"></div>
   <img id="upload-error-img" data-l10n-id="errorAltText" src="/resources/illustration_error.svg"/>
   <a class="send-new" data-l10n-id="sendAnotherFileLink"></a>
 </div>
 
-<div id="unsupported-browser">
+<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">