Direct Beta/Dev/Nightly downloads on old OS versions to ESR (Issue mo…

…zilla#13317)
alexgibson · Jun 30, 2023 · 5236de8 · 5236de8
1 parent a014c6f
commit 5236de8
Show file tree

Hide file tree

Showing 8 changed files with 136 additions and 13 deletions.
diff --git a/bedrock/firefox/templates/firefox/includes/download-button.html b/bedrock/firefox/templates/firefox/includes/download-button.html
@@ -50,6 +50,46 @@
       <p>{{ ftl('download-button-your-system-may') }}</p>
       {{ alt_buttons(builds) }}
     </div>
+
+    {% if channel == 'beta' %}
+      {% set channel_name = 'Firefox Beta' %}
+    {% elif channel == 'alpha' %}
+      {% set channel_name = 'Firefox Developer Edition' %}
+    {% elif channel == 'nightly' %}
+      {% set channel_name = 'Firefox Nightly' %}
+    {% else %}
+      {% set channel_name = 'Firefox' %}
+    {% endif %}
+
+    <div class="fx-unsupported-message win" data-nosnippet="true">
+      <p><strong>{{ ftl('download-button-unsupported-platform', channel_name=channel_name, help_url='https://support.mozilla.org/kb/firefox-users-macos-1012-1013-1014-moving-to-extended-support', os_version='Windows 8.1') }}</strong></p>
+      <p>{{ ftl('download-button-please-download-esr') }}</p>
+      <div class="unsupported-download-options">
+        <p>
+          <a class="mzp-c-button mzp-t-product download-link" href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang={{ LANG }}" data-link-type="download" data-download-os="Desktop" data-download-version="win64" data-display-name="Firefox Extended Support Release">
+            Download Firefox ESR 64-bit
+          </a>
+        </p>
+        <p>
+          <a class="mzp-c-button mzp-t-product download-link" href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win&lang={{ LANG }}" data-link-type="download" data-download-os="Desktop" data-download-version="win" data-display-name="Firefox Extended Support Release">
+            Download Firefox ESR 32-bit
+          </a>
+        </p>
+      </div>
+    </div>
+
+    <div class="fx-unsupported-message mac" data-nosnippet="true">
+      <p><strong>{{ ftl('download-button-unsupported-platform', channel_name=channel_name, help_url='https://support.mozilla.org/kb/firefox-users-windows-7-8-and-81-moving-extended-support', os_version='macOS 10.14') }}</strong></p>
+      <p>{{ ftl('download-button-please-download-esr') }}</p>
+
+      <div class="unsupported-download-options">
+        <p>
+          <a class="mzp-c-button mzp-t-product download-link" href="https://download.mozilla.org/?product=firefox-latest-ssl&os=osx&lang={{ LANG }}" data-link-type="download" data-download-os="Desktop" data-download-version="osx" data-display-name="Firefox Extended Support Release">
+          Download Firefox ESR
+          </a>
+        </p>
+      </div>
+    </div>
   {% endif %}
   <ul class="download-list">
     {% for plat in builds %}

diff --git a/l10n/en/download_button.ftl b/l10n/en/download_button.ftl
@@ -43,3 +43,11 @@ download-button-firefox-ios = <span>{ -brand-name-firefox }</span> for { -brand-
 download-button-firefox-privacy = { -brand-name-firefox } Privacy
 download-button-firefox-privacy-notice = { -brand-name-firefox } Privacy Notice
 download-button-download = Download
+
+# Variables:
+#   $channel_name (string) - e.g. Firefox Beta, Firefox Nightly
+#   $help_url (url) - link to https://support.mozilla.org/
+#   $os_version (string) - e.g. Windows 8.1, macOS 10.14
+download-button-unsupported-platform = { $channel_name } is <a href="{ $help_url }">no longer supported</a> on { $os_version } and below.
+
+download-button-please-download-esr = Please download { -brand-name-firefox-esr } (Extended Support Release) to use { -brand-name-firefox }.
diff --git a/media/css/firefox/developer/includes/engage.scss b/media/css/firefox/developer/includes/engage.scss
@@ -36,6 +36,10 @@ $brand-theme: 'firefox';
         @include text-title-md;
     }
 
+    .fx-unsupported-message {
+        text-align: left;
+    }
+
     @media #{$mq-md} {
         padding-top: $layout-lg;
         padding-bottom: $layout-lg;

diff --git a/media/css/firefox/developer/includes/intro.scss b/media/css/firefox/developer/includes/intro.scss
@@ -19,6 +19,10 @@
         margin-left: auto;
         margin-right: auto;
     }
+
+    .fx-unsupported-message {
+        text-align: center;
+    }
 }
 
 .intro-title {

diff --git a/media/css/protocol/components/_download-button-ie.scss b/media/css/protocol/components/_download-button-ie.scss
@@ -31,7 +31,36 @@ ul.download-list {
     }
 }
 
+// Show Firefox Windows download buttons
 .download-button .download-list .os_win {
     display: block !important;
 }
+
+// Show Firefox Android / iOS download buttons
+.download-button-android .download-list .os_android,
+.download-button-ios .download-list .os_ios {
+    display: block !important;
+}
+
+// Hide pre-release Firefox download buttons on unsupported
+// operating system versions (issue #13317)
+.download-button-beta.download-button-desktop .download-list,
+.download-button-alpha.download-button-desktop .download-list,
+.download-button-nightly.download-button-desktop .download-list {
+    display: none !important;
+}
+
+.fx-unsupported-message {
+    @include bidi(((text-align, left, right),));
+    display: none !important;
+
+    .unsupported-download-options {
+        text-align: center;
+    }
+}
+
+.fx-unsupported-message.win {
+    display: block !important;
+}
+
 /* stylelint-enable */
diff --git a/media/css/protocol/components/_download-button.scss b/media/css/protocol/components/_download-button.scss
@@ -109,6 +109,31 @@ ul.download-list {
     display: block !important;
 }
 
+// Hide pre-release Firefox download buttons on unsupported
+// operating system versions (issue #13317)
+.windows.fx-unsupported .download-button-beta.download-button-desktop .download-list,
+.windows.fx-unsupported .download-button-alpha.download-button-desktop .download-list,
+.windows.fx-unsupported .download-button-nightly.download-button-desktop .download-list,
+.osx.fx-unsupported .download-button-beta.download-button-desktop .download-list,
+.osx.fx-unsupported .download-button-alpha.download-button-desktop .download-list,
+.osx.fx-unsupported .download-button-nightly.download-button-desktop .download-list {
+    display: none !important;
+}
+
+.fx-unsupported-message {
+    @include bidi(((text-align, left, right),));
+    display: none !important;
+
+    .unsupported-download-options {
+        text-align: center;
+    }
+}
+
+.windows.fx-unsupported .fx-unsupported-message.win,
+.osx.fx-unsupported .fx-unsupported-message.mac {
+    display: block !important;
+}
+
 .android .download-button-desktop,
 .ios .download-button-desktop,
 .no-js .download-button {

diff --git a/media/js/base/site.js b/media/js/base/site.js
@@ -69,7 +69,8 @@
                 return '10.0.0';
             } else {
                 // Might be any Windows version less than 10, who knows.
-                return undefined;
+                // Rather than return undefined here, fallback to UA string.
+                return site.getPlatformVersion();
             }
         },
 
@@ -145,21 +146,35 @@
 
     function updateHTML() {
         var h = document.documentElement;
+        var _version = window.site.platformVersion
+            ? parseFloat(window.site.platformVersion)
+            : 0;
 
         if (window.site.platform === 'windows') {
             // Detect Windows 10 "and up" to display installation
             // messaging on the /firefox/download/thanks/ page.
-            var _version = window.site.platformVersion
-                ? parseFloat(window.site.platformVersion)
-                : 0;
 
             if (_version >= 10.0) {
                 h.className += ' windows-10-plus';
             }
+
+            // Add fx-unsupported class name for Windows 8.1 and below
+            // https://github.com/mozilla/bedrock/issues/13317
+            if (_version <= 6.3) {
+                h.className += ' fx-unsupported';
+            }
         } else {
             h.className = h.className.replace('windows', window.site.platform);
         }
 
+        if (window.site.platform === 'osx') {
+            // Add fx-unsupported class name for macOS 10.14 and below
+            // https://github.com/mozilla/bedrock/issues/13317
+            if (_version <= 10.14) {
+                h.className += ' fx-unsupported';
+            }
+        }
+
         // Used to display a custom installation message and
         // SUMO link on the /firefox/download/thanks/ page.
         if (window.site.isARM()) {

diff --git a/tests/unit/spec/base/site.js b/tests/unit/spec/base/site.js
@@ -400,17 +400,15 @@ describe('site.js', function () {
             expect(window.site.getWindowsVersionClientHint(12)).toBe('10.0.0');
         });
 
-        it('should return undefined for unknown Windows versions', function () {
+        it('should return fallback to using UA string for unknown Windows versions', function () {
+            spyOn(window.site, 'getPlatformVersion').and.returnValue('8.1');
+
             expect(window.site.getWindowsVersionClientHint('0.0.0')).toBe(
-                undefined
-            );
-            expect(window.site.getWindowsVersionClientHint(0.0)).toBe(
-                undefined
-            );
-            expect(window.site.getWindowsVersionClientHint('0')).toBe(
-                undefined
+                '8.1'
             );
-            expect(window.site.getWindowsVersionClientHint('')).toBe(undefined);
+            expect(window.site.getWindowsVersionClientHint(0.0)).toBe('8.1');
+            expect(window.site.getWindowsVersionClientHint('0')).toBe('8.1');
+            expect(window.site.getWindowsVersionClientHint('')).toBe('8.1');
         });
     });