Merge pull request #339 from mozilla/v49

Show error page on firefox v49 and below

frontend/src/common.js

@@ -3,8 +3,28 @@ window.Raven.config(window.dsn).install();
 window.dsn = undefined;
 
 const testPilotGA = require('testpilot-ga');
+const {gcmCompliant, sendEvent} = require('./utils');
 window.analytics = new testPilotGA({
   an: 'Firefox Send',
   ds: 'web',
   tid: window.trackerId
 });
+
+const isSender = !location.pathname.includes('/download');
+
+gcmCompliant().catch(err => {
+  sendEvent(isSender ? 'sender' : 'recipient', 'unsupported', {
+    cd6: err
+  }).then(() => {
+    location.replace('/unsupported/gcm');
+  });
+});
+
+if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1 &&
+    parseInt(navigator.userAgent.toLowerCase().match(/firefox\/*([^\n\r]*)\./)[1]) <= 49) {
+    sendEvent(isSender ? 'sender' : 'recipient', 'unsupported', {
+      cd6: new Error('Firefox is outdated.')
+    }).then(() => {
+      location.replace('/unsupported/outdated');
+    });
+}

frontend/src/download.js

@@ -1,6 +1,6 @@
 require('./common');
 const FileReceiver = require('./fileReceiver');
-const { notify, findMetric, gcmCompliant, sendEvent } = require('./utils');
+const { notify, findMetric, sendEvent } = require('./utils');
 const bytes = require('bytes');
 const Storage = require('./storage');
 const storage = new Storage(localStorage);
@@ -11,14 +11,6 @@ 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);
 

frontend/src/upload.js

@@ -3,7 +3,6 @@ require('./common');
 const FileSender = require('./fileSender');
 const {
   notify,
-  gcmCompliant,
   findMetric,
   sendEvent,
   ONE_DAY_IN_MS
@@ -25,15 +24,6 @@ if (storage.has('referrer')) {
 }
 
 $(document).ready(function() {
-  gcmCompliant().catch(err => {
-    $('#page-one').attr('hidden', true);
-    sendEvent('sender', 'unsupported', {
-      cd6: err
-    }).then(() => {
-      location.replace('/unsupported');
-    });
-  });
-
   $('#file-upload').change(onUpload);
 
   $('.legal-links a, .social-links a, #dl-firefox').click(function(target) {

public/locales/en-US/send.ftl

@@ -67,6 +67,8 @@ 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.
 notSupportedDetail = Unfortunately this browser does not support the web technology that powers Firefox Send. You’ll need to try another browser. We recommend Firefox!
+notSupportedOutdatedDetail = Unfortunately this version of Firefox does not support the web technology that powers Firefox Send. You’ll need to update your browser.
+updateFirefox = Update Firefox
 downloadFirefoxButtonSub = Free Download
 uploadedFile = File
 copyFileList = Copy URL

public/main.css

@@ -568,13 +568,13 @@ tbody {
   margin: 0 auto 23px;
 }
 
-#firefox-logo {
+.firefox-logo {
   width: 70px;
 }
 
-#dl-firefox {
+#dl-firefox,
+#update-firefox {
   margin-bottom: 181px;
-  width: 260px;
   height: 80px;
   background: #12bc00;
   border-radius: 3px;
@@ -589,14 +589,15 @@ tbody {
   justify-content: center;
   align-items: center;
   line-height: 1;
+  padding: 0 25px;
 }
 
-#dl-firefox-text {
+.unsupported-button-text {
   text-align: left;
   margin-left: 20.4px;
 }
 
-#dl-firefox-text > span {
+.unsupported-button-text > span {
   font-family: 'Fira Sans';
   font-weight: 300;
   font-size: 18px;

server/server.js

@@ -96,8 +96,11 @@ app.get('/', (req, res) => {
   res.render('index');
 });
 
-app.get('/unsupported', (req, res) => {
-  res.render('unsupported');
+app.get('/unsupported/:reason', (req, res) => {
+  const outdated = req.params.reason === 'outdated';
+  res.render('unsupported', {
+    outdated: outdated
+  });
 });
 
 app.get('/legal', (req, res) => {

views/unsupported.handlebars

@@ -1,11 +1,19 @@
 <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>
+  {{#if outdated}}
+    <div class="description" data-l10n-id="notSupportedOutdatedDetail"></div>
+    <a id="update-firefox" href="https://support.mozilla.org/kb/update-firefox-latest-version">
+      <img src="/resources/firefox_logo-only.svg" class="firefox-logo" alt="Firefox"/>
+      <div class="unsupported-button-text" data-l10n-id="updateFirefox"></div>
+    </a>
+  {{else}}
+    <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" class="firefox-logo" alt="Firefox"/>
+      <div class="unsupported-button-text">Firefox<br>
+        <span data-l10n-id="downloadFirefoxButtonSub"></span>
+      </div>
+    </a>
+  {{/if}}
   <div class="unsupported-description" data-l10n-id="uploadPageExplainer"></div>
 </div>