Merge pull request #245 from mozilla/localization

Localization

frontend/src/download.js

@@ -46,8 +46,11 @@ $(document).ready(function() {
       //on complete
       if (percent === 1) {
         fileReceiver.removeAllListeners('progress');
-        notify('Your download has finished.');
+        document.l10n.formatValues('downloadNotification', 'downloadFinish')
-        $('.title').html('Download Complete');
+                     .then(translated => {
+                       notify(translated[0]);
+                       $('.title').html(translated[1]);
+                     })
       }
     });
 
@@ -72,9 +75,10 @@ $(document).ready(function() {
     fileReceiver
       .download()
       .catch(() => {
-        $('.title').text(
+        document.l10n.formatValue('expiredPageHeader')
-          'This link has expired or never existed in the first place.'
+                     .then(translated => {
-        );
+                       $('.title').text(translated);
+                     })
         $('#download-btn').hide();
         $('#expired-img').show();
         console.log('The file has expired, or has already been deleted.');

frontend/src/upload.js

@@ -17,7 +17,7 @@ $(document).ready(function() {
   const $copyBtn = $('#copy-btn');
   $copyBtn.attr('disabled', false);
   $('#link').attr('disabled', false);
-  $copyBtn.html('Copy to Clipboard');
+  $copyBtn.attr('data-l10n-id', 'copyUrlFormButton');
 
   $('#upload-progress').hide();
   $('#share-link').hide();
@@ -51,7 +51,7 @@ $(document).ready(function() {
     window.setTimeout(() => {
       $copyBtn.attr('disabled', false);
       $('#link').attr('disabled', false);
-      $copyBtn.html('Copy to Clipboard');
+      $copyBtn.attr('data-l10n-id', 'copyUrlFormButton');
     }, 3000);
   });
 
@@ -68,6 +68,7 @@ $(document).ready(function() {
     fill: '#3B9DFF',
     size: 158
   });
+
   //link back to homepage
   $('.send-new').attr('href', window.location);
 
@@ -86,7 +87,11 @@ $(document).ready(function() {
     $('#cancel-upload').click(() => {
       fileSender.cancel();
       location.reload();
-      notify('Your upload was cancelled.');
+      document.l10n.formatValue('uploadCancelNotification')
+                   .then(str => {
+                     console.log('here')
+                     notify(str);
+                   })
     });
 
     fileSender.on('progress', progress => {
@@ -156,7 +161,7 @@ $(document).ready(function() {
           expiry: expiration
         };
         localStorage.setItem(info.fileId, JSON.stringify(fileData));
-        $('#upload-filename').html('Ready to Send');
+        $('#upload-filename').attr('data-l10n-id', 'uploadSuccessConfirmHeader');
         t = window.setTimeout(() => {
           $('#page-one').hide();
           $('#upload-progress').hide();
@@ -165,7 +170,9 @@ $(document).ready(function() {
         }, 2000);
 
         populateFileList(JSON.stringify(fileData));
-        notify('Your upload has finished.');
+        document.l10n.formatValue('notifyUploadDone').then(str => {
+          notify(str);
+        });
       })
       .catch(err => {
         Raven.captureException(err);
@@ -209,24 +216,42 @@ $(document).ready(function() {
     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', title: 'Copy URL' });
+    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', title: 'Delete' });
+    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);
 
     const url = file.url.trim() + `#${file.secretKey}`.trim();
+
     $('#link').attr('value', url);
-    $('#copy-text').text(
+    $('#copy-text').attr(
-      'Copy and share the link to send your file: ' + file.name
+      'data-l10n-args',
+      '{"filename": "' + file.name + '"}'
+    );
+    $('#copy-text').attr(
+      'data-l10n-id',
+      'copyUrlFormLabelWithName'
     );
     $popupText.attr('tabindex', '-1');
 
     name.appendChild(cellText);
 
-    link.style.color = '#0A8DFF'; //font colour
+    // create delete button
+
+    const delSpan = document.createElement('span');
+    $(delSpan).addClass('icon-cancel-1');
+    $(delSpan).attr('data-l10n-id', 'deleteButtonHover');
+    del.appendChild(delSpan);
+
+    const linkSpan = document.createElement('span');
+    $(linkSpan).addClass('icon-docs');
+    $(linkSpan).attr('data-l10n-id', 'copyUrlHover');
+    link.appendChild(linkSpan);
+
+    link.style.color = '#0A8DFF';
 
     //copy link to clipboard when icon clicked
     $copyIcon.click(function() {
@@ -236,9 +261,16 @@ $(document).ready(function() {
       aux.select();
       document.execCommand('copy');
       document.body.removeChild(aux);
-      link.innerHTML = 'Copied!';
+      document.l10n.formatValue('copiedUrl')
+                   .then(translated => {
+        link.innerHTML = translated;
+      })
       window.setTimeout(() => {
-        link.innerHTML = '<img src="/resources/copy-16.svg" class="icon-copy" title="Copy URL" />';
+        const linkImg = document.createElement('img');
+        $(linkImg).addClass('icon-copy');
+        $(linkImg).attr('data-l10n-id', 'copyUrlHover');
+        $(linkImg).attr('src', '/resources/copy-16.svg');
+        $(link).html(linkImg);
       }, 500);
     });
 
@@ -284,9 +316,21 @@ $(document).ready(function() {
 
     // create popup
     popupDiv.classList.add('popup');
-    $popupText.html(
+    const popupDelSpan = document.createElement('span');
-      '<span class="del-file">Delete </span><span class="nvm" > Nevermind</span>'
+    $(popupDelSpan).addClass('del-file');
-    );
+    $(popupDelSpan).attr('data-l10n-id', 'sentFilesTitle4');
+
+    const popupNvmSpan = document.createElement('span');
+    $(popupNvmSpan).addClass('nvm');
+    $(popupNvmSpan).attr('data-l10n-id', 'nevermindButton');
+
+    $popupText.html([
+      popupDelSpan,
+      '&nbsp;',
+      '&nbsp;',
+      popupNvmSpan
+    ]);
+
 
     // add data cells to table row
     row.appendChild(name);

package.json

@@ -15,6 +15,7 @@
     "helmet": "^3.6.1",
     "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",

public/locales/send.en-US.ftl

@@ -0,0 +1,85 @@
+title = Firefox Send
+
+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
+uploadPageDropMessage = Drop your files here to start uploading
+uploadPageBrowseButton = Select a file on your computer
+  .title = {uploadPageBrowseButtonTitle}
+
+uploadPageBrowseButtonTitle = Upload file
+
+uploadingPageHeader = Uploading Your File
+
+notifyUploadDone = Your upload has finished.
+
+
+uploadingPageMessage = Once your file uploads you will be able to set expiry options.
+uploadingPageCancel = Cancel upload
+  .title = {uploadingPageCancel}
+uploadCancelNotification = Your upload was cancelled.
+
+uploadingPageLargeFileMessage = This file is large and may take awhile to upload. Sit tight!
+uploadingFileNotification = Notify me when the upload is complete.
+uploadSuccessConfirmHeader = Ready to Send
+
+uploadSvgAlt.alt = Upload
+
+
+//Note the spec suggests that this string is editable. That feature will not appear at Launch
+uploadSuccessTimingHeader = The link to your file will expire after 1 download or in 24 hours.
+copyUrlFormLabel = Copy and share the link to send your file:
+copyUrlFormLabelWithName = Copy and share the link to send your file: { $filename }
+// Note: Title text for button should be the same
+copyUrlFormButton = Copy to clipboard
+  .title = {copyUrlFormButton}
+
+copiedUrl = Copied!
+
+deleteFileButton = Delete file
+  .title = {deleteFileButton}
+sendAnotherFileLink = Send another file
+  .title = {sendAnotherFileLink}
+
+downloadAltText.alt = Download
+downloadFileName  = Download { $filename }
+downloadFileSize = ({ $size })
+downloadMessage = Your friend is sending you a file with Firefox Send, a service that allows you to share files with a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.
+downloadButtonLabel = Download
+  .title = {downloadButtonLabel}
+downloadNotification = Your download has completed.
+downloadFinish = Download Complete
+
+sendYourFilesLink = Try Firefox Send
+  .title = {sendYourFilesLink}
+downloadingPageProgress = Downloading { $filename } ({ $size })
+downloadingPageMessage = Please leave this tab open while we fetch your file and decrypt it.
+
+errorAltText.alt = Upload error
+errorPageHeader = Something went wrong!
+errorPageMessage = There has been an error uploading the file.
+errorPageLink = Send another file
+
+
+linkExpiredAlt.alt = Link expired
+expiredPageHeader = This link has expired or never existed in the first place!
+notSupportedHeader = Your browser is not supported.
+notSupportedDetail = Unfortunately this browser does not support the web technology that powers Firefox Send. You'll need to try another browser. We recommend Firefox!
+downloadFirefoxButtonSub = Free Download
+
+
+sentFilesTitle1 = File
+sentFilesTitle2 = Copy URL
+sentFilesTitle3 = Expires In
+sentFilesTitle4 = Delete
+
+nevermindButton = Nevermind
+deleteButtonHover.title = {sentFilesTitle4}
+copyUrlHover.title = {sentFilesTitle2}
+
+footerLinkLegal = Legal
+footerLinkAbout = About Test Pilot
+footerLinkPrivacy = Privacy
+footerLinkTerms = Terms
+footerLinkCookies = Cookies

server/server.js

@@ -19,6 +19,8 @@ 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();
 
@@ -63,6 +65,9 @@ app.use(
 app.use(busboy());
 app.use(bodyParser.json());
 app.use(express.static(STATIC_PATH));
+app.use('/l20n', express.static(L20N));
+// app.use('/download/*/l20n', express.static(L20N));
+app.use('/locales', express.static(LOCALES));
 
 app.get('/', (req, res) => {
   res.render('index', {

views/download.handlebars

@@ -2,24 +2,25 @@
   {{#if filename}}
   <div id="download-page-one">
     <div class="title">
-      Download <span id="dl-filename">{{filename}}</span> ({{filesize}})
+      <span id="dl-filename" 
+            data-l10n-id="downloadFileName"
+            data-l10n-args='{"filename": "{{filename}}"}'></span>
+      <span data-l10n-id="downloadFileSize"
+            data-l10n-args='{"size": "{{filesize}}"}'></span>
     </div>
-    <div class="description">
+    <div class="description" data-l10n-id="downloadMessage"></div>
-      Your friend is sending you a file with Firefox Send, a service that allows you to share files with a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.
+    <img src="/resources/illustration_download.svg" id="download-img" data-l10n-id="downloadAltText"/>
-    </div>
-    <img src="/resources/illustration_download.svg" id="download-img" alt="Download"/>
     <div>
-      <button id="download-btn" title="Download">Download</button>
+      <button id="download-btn" data-l10n-id="downloadButtonLabel"></button>
     </div>
   </div>
 
   <div id="download-progress">
-    <div class="title">
+    <div class="title"
-      Downloading {{filename}} ({{filesize}})
+          data-l10n-id="downloadingPageProgress"
-    </div>
+          data-l10n-args='{"filename": "{{filename}}", "size": "{{filesize}}"}'>
-    <div class="description">
-      Please leave this tab open while we fetch your file and decrypt it.
     </div>
+    <div class="description" data-l10n-id="downloadingPageMessage"></div>
     <!-- progress bar here -->
     <div class="progress-bar" id="dl-progress">
       <div class="percentage">
@@ -32,22 +33,14 @@
     </div>
   </div>
 
-  <a class="send-new" title="Try Firefox Send">
+  <a class="send-new" data-l10n-id="sendYourFilesLink"></a>
-    Try Firefox Send
-  </a>
   {{else}}
-  <div class="title">
+  <div class="title" data-l10n-id="expiredPageHeader"></div>
-    This link has expired or never existed in the first place.
-  </div>
 
   <div class="share-window">
-    <img src="/resources/illustration_expired.svg" id="expired-img" alt="Link expired" />
+    <img src="/resources/illustration_expired.svg" id="expired-img" data-l10n-id="linkExpiredAlt"/>
   </div>
-  <div class="expired-description">
+  <div class="expired-description" data-l10n-id="uploadPageExplainer"></div>
-    Send files through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.
+  <a class="send-new" data-l10n-id="sendYourFilesLink"></a>
-  </div>
-  <a class="send-new" title="Try Firefox Send">
-    Try Firefox Send
-  </a>
   {{/if}}
 </div>

views/index.handlebars

@@ -1,18 +1,16 @@
 <div id="page-one">
-  <div class="title">
+  <div class="title" data-l10n-id="uploadPageHeader"></div>
-    Private, Encrypted File Sharing
-  </div>
   <div class="description">
-    Send files through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.<br> <a href="https://testpilot.firefox.com/experiments/send" class="link">Learn more</a>
+    <div data-l10n-id="uploadPageExplainer"></div>
+    <a href="https://testpilot.firefox.com/experiments/send" class="link" data-l10n-id="uploadPageLearnMore"></a>
   </div>
   <div class="upload-window" >
-    <div id="upload-img"><img src="/resources/upload.svg" alt="Upload"/></div>
+    <div id="upload-img"><img data-l10n-id="uploadSvgAlt" src="/resources/upload.svg"/></div>
-    <div id="upload-text">
+    <div id="upload-text" data-l10n-id="uploadPageDropMessage"></div>
-      Drop your files here to start uploading
-    </div>
 
     <form method="post" action="upload" enctype="multipart/form-data">
-      <label for="file-upload" id="browse" title="Upload file">Select a file on your computer</label>
+      <label for="file-upload" id="browse" 
+              data-l10n-id="uploadPageBrowseButton"></label>
       <input id="file-upload" type="file" name="fileUploaded" />
     </form>
   </div>
@@ -22,27 +20,22 @@
       <thead>
         <tr>
           <!-- htmllint attr-bans="false" -->
-          <th width="35%">File</th>
+          <th width="35%" data-l10n-id="sentFilesTitle1"></th>
-          <th width="25%">Copy URL</th>
+          <th width="25%" data-l10n-id="sentFilesTitle2"></th>
-          <th width="21%">Expires in</th>
+          <th width="21%" data-l10n-id="sentFilesTitle3"></th>
-          <th width="12%">Delete</th>
+          <th width="12%" data-l10n-id="sentFilesTitle4"></th>
           <!-- htmllint tag-bans="$previous" -->
         </tr>
       </thead>
       <tbody>
-
       </tbody>
     </table>
   </div>
 </div>
 
 <div id="upload-progress">
-  <div class="title" id="upload-filename">
+  <div class="title" id="upload-filename" data-l10n-id="uploadingPageHeader"></div>
-    Uploading Your File
+  <div class="description"></div>
-  </div>
-  <div class="description">
-
-  </div>
   <!-- progress bar here -->
   <div class="progress-bar" id="ul-progress">
     <div class="percentage">
@@ -52,54 +45,40 @@
   </div>
   <div class="upload">
     <div class="progress-text"></div>
-    <div id="cancel-upload" title="Cancel Upload">Cancel Upload</div>
+    <div id="cancel-upload" 
+          data-l10n-id="uploadingPageCancel"></div>
   </div>
+  
 </div>
 
 <div id="share-link">
-  <div class="title">
+  <div class="title" data-l10n-id="uploadSuccessTimingHeader"></div>
-    This encrypted link will expire after 1 download or in 24 hours
-  </div>
   <div id="share-window">
-    <div id="copy-text">
+    <div id="copy-text" data-l10n-id="copyUrlFormLabel"></div>
-      Copy and share the link to send your file:
-    </div>
     <div id="copy">
       <input id="link" type="url" value="" readonly/>
-      <button id="copy-btn" title="Copy to Clipboard">Copy to Clipboard</button>
+      <button id="copy-btn" data-l10n-id="copyUrlFormButton"></button>
     </div>
-    <button id="delete-file" title="Delete file">Delete file</button>
+    <button id="delete-file" data-l10n-id="deleteFileButton"></button>
-    <a class="send-new" title="Send another file">
+    <a class="send-new" data-l10n-id="sendAnotherFileLink"></a>
-      Send another file
-    </a>
   </div>
 </div>
 
 <div id="upload-error">
-  <div class="title">
+  <div class="title" data-l10n-id="errorPageHeader"></div>
-    Something went wrong!
+  <div class="expired-description" data-l10n-id="errorPageMessage"></div>
-  </div>
+  <img id="upload-error-img" data-l10n-id="errorAltText" src="/resources/illustration_error.svg"/>
-  <div class="expired-description">
+  <a class="send-new" data-l10n-id="sendAnotherFileLink"></a>
-    There has been an error uploading the file.
-  </div>
-  <img id="upload-error-img" src="/resources/illustration_error.svg" alt="Upload error" />
-  <a class="send-new" title="Send another file">
-    Send another file
-  </a>
 </div>
 
 <div id="unsupported-browser">
-  <div class="title">
+  <div class="title" data-l10n-id="notSupportedHeader"></div>
-    Your browser is not supported.
+  <div class="description" data-l10n-id="notSupportedDetail"></div>
-  </div>
-  <div class="description">
-    Unfortunately this browser does not support the web technology that powers Firefox Send. You'll need to try another browser. We recommend Firefox!
-  </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>Free Download</span></div>
+    <div id="dl-firefox-text">Firefox<br>
-  </a>
+      <span data-l10n-id="downloadFirefoxButtonSub"></span>
-  <div class="unsupported-description">
-    Send files through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.
     </div>
+  </a>
+  <div class="unsupported-description" data-l10n-id="uploadPageExplainer"></div>
 </div>

views/layouts/main.handlebars

@@ -11,6 +11,11 @@
   {{#if trackerId}}
   {{> analytics trackerId=trackerId}}
   {{/if}}
+
+  <meta name="defaultLanguage" content="en-US">
+  <meta name="availableLanguages" content="en-US">
+  <link rel="localization" href="/locales/send.{locale}.ftl">
+  <script defer src="/l20n/dist/web/l20n.js"></script>
 </head>
 <body>
   <div class="send-logo">
@@ -23,11 +28,11 @@
   <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/">Legal</a>
+      <a href="https://www.mozilla.org/about/legal/" data-l10n-id="footerLinkLegal"></a>
-      <a href="https://testpilot.firefox.com/about">About Test Pilot</a>
+      <a href="https://testpilot.firefox.com/about" data-l10n-id="footerLinkAbout"></a>
-      <a href="https://testpilot.firefox.com/privacy">Privacy</a>
+      <a href="https://testpilot.firefox.com/privacy" data-l10n-id="footerLinkPrivacy"></a>
-      <a href="https://testpilot.firefox.com/terms">Terms</a>
+      <a href="https://testpilot.firefox.com/terms" data-l10n-id="footerLinkTerms"></a>
-      <a href="https://www.mozilla.org/en-US/privacy/websites/#cookies">Cookies</a>
+      <a href="https://www.mozilla.org/en-US/privacy/websites/#cookies" data-l10n-id="footerLinkCookies"></a>
     </div>
     <div class="social-links">
       <a href="https://github.com/mozilla/send" target="_blank"><img class="github" src="/resources/github-icon.svg"/></a>