From 62eb1fb166e9cdbf420549326db4937bc99a796d Mon Sep 17 00:00:00 2001
From: Alex Gibson <alexgibson@users.noreply.github.com>
Date: Wed, 5 Jul 2023 10:16:16 +0100
Subject: [PATCH] Direct Win 8.1 / macOs 10.14 users to ESR for FF release
 channel (Fixes #13317)

---
 .../firefox/browsers/windows-64-bit.html      |   2 +-
 .../firefox/features/safebrowser.html         |   2 +-
 .../templates/firefox/home/index-master.html  |   2 +-
 .../includes/download-button-thanks.html      |  19 +-
 .../firefox/includes/download-button.html     |  41 +---
 .../includes/download-unsupported.html        |  49 ++++
 .../firefox/new/basic/base_download.html      |   6 -
 .../firefox/new/desktop/download.html         |   6 -
 l10n/en/download_button.ftl                   |   1 +
 media/css/firefox/browsers-products.scss      |  10 +
 .../firefox/challenge-the-default/_hero.scss  |   7 +-
 .../css/firefox/developer/includes/intro.scss |   4 -
 media/css/firefox/home/master.scss            |   5 +
 media/css/firefox/new/basic/ie.scss           |   7 +
 .../firefox/new/common/thanks-messaging.scss  |  24 ++
 media/css/firefox/new/desktop/download.scss   |  13 +-
 media/css/firefox/new/desktop/ie8.scss        |   1 +
 media/css/firefox/new/desktop/ie9.scss        |   1 +
 media/css/firefox/releasenotes.scss           |   6 -
 media/css/mozorg/home/home-eu.scss            |  15 +-
 .../css/mozorg/home/includes/_home-base.scss  |  15 +-
 .../components/_download-button-ie.scss       |  28 +--
 .../protocol/components/_download-button.scss | 129 ++++++++--
 .../components/_fx-unsupported-ie.scss        |  73 ++++++
 media/js/base/site.js                         | 129 +++++-----
 media/js/firefox/new/common/thanks-direct.js  |   5 +-
 media/js/firefox/new/common/thanks-init.js    |   5 +-
 media/js/firefox/new/common/thanks.js         |   5 +-
 tests/unit/spec/base/site.js                  | 220 +++++++++++++++---
 tests/unit/spec/firefox/new/common/thanks.js  |  24 +-
 30 files changed, 609 insertions(+), 245 deletions(-)
 create mode 100644 bedrock/firefox/templates/firefox/includes/download-unsupported.html
 create mode 100644 media/css/protocol/components/_fx-unsupported-ie.scss

diff --git a/bedrock/firefox/templates/firefox/browsers/windows-64-bit.html b/bedrock/firefox/templates/firefox/browsers/windows-64-bit.html
index d23c696a48b..58fb2109c44 100644
--- a/bedrock/firefox/templates/firefox/browsers/windows-64-bit.html
+++ b/bedrock/firefox/templates/firefox/browsers/windows-64-bit.html
@@ -25,7 +25,7 @@
 {% endblock %}
 
 {% block content %}
-  <div class="c-hero">
+  <div class="c-hero mzp-t-dark">
     <div class="hero-content">
       <div class="mzp-c-logo mzp-t-logo-md mzp-t-product-firefox"></div>
       <p>{{ ftl('windows-64-bit-64-bit') }}</p>
diff --git a/bedrock/firefox/templates/firefox/features/safebrowser.html b/bedrock/firefox/templates/firefox/features/safebrowser.html
index 02ff9f41b1e..9ccd0d2c72c 100644
--- a/bedrock/firefox/templates/firefox/features/safebrowser.html
+++ b/bedrock/firefox/templates/firefox/features/safebrowser.html
@@ -25,7 +25,7 @@
 {% endblock %}
 
 {% block content %}
-<div class="c-hero">
+<div class="c-hero mzp-t-dark">
   <div class="hero-content">
     <div class="mzp-c-logo mzp-t-logo-md mzp-t-product-firefox"></div>
     <p>Internet Security</p>
diff --git a/bedrock/firefox/templates/firefox/home/index-master.html b/bedrock/firefox/templates/firefox/home/index-master.html
index 91a143d23c0..adc50c6817b 100644
--- a/bedrock/firefox/templates/firefox/home/index-master.html
+++ b/bedrock/firefox/templates/firefox/home/index-master.html
@@ -134,7 +134,7 @@ <h4>{{ ftl('firefox-home-get-trackers-off') }}</h4>
       <div id="test-menu-browsers-wrapper" class="mzp-c-menu-list mzp-t-cta mzp-t-download">
         <h5 class="mzp-c-menu-list-title">{{ ftl('firefox-home-download-the-browser') }}</h5>
         <ul class="mzp-c-menu-list-list" id="menu-browsers">
-          {# Old IE users need to click a download button, the JS on the thank you page doesn't get them the right download if we send them there directly #}
+          {# Direct legacy IE users to the /new/ page where they can read EOL messaging see issue 13317 #}
           <!--[if IE]>
             <li class="mzp-c-menu-list-item menu-desktop"><a href="{{ url('firefox.new') }}" data-cta-type="link" data-cta-text="Firefox Desktop">{{ ftl('firefox-home-desktop') }}</a></li>
           <![endif]-->
diff --git a/bedrock/firefox/templates/firefox/includes/download-button-thanks.html b/bedrock/firefox/templates/firefox/includes/download-button-thanks.html
index 9ea07e260e1..e2058716240 100644
--- a/bedrock/firefox/templates/firefox/includes/download-button-thanks.html
+++ b/bedrock/firefox/templates/firefox/includes/download-button-thanks.html
@@ -5,9 +5,8 @@
 #}
 
 <div id="{{ id }}" class="mzp-c-button-download-container c-button-download-thanks">
-  <!--[if !IE]><!-->
   <a href="{{ transition_url }}"
-     class="download-link mzp-c-button mzp-t-product {% if button_class %}{{ button_class }}{% else %}mzp-t-xl{% endif %}"
+     class="download-link c-button-download-thanks-link mzp-c-button mzp-t-product {% if button_class %}{{ button_class }}{% else %}mzp-t-xl{% endif %}"
      data-direct-link="{{ download_link_direct }}"
      data-link-type="download"
      {% if download_location %}data-download-location="{{ download_location }}"{% endif %}>
@@ -17,21 +16,9 @@
       {{ ftl('download-button-download-firefox') }}
     {% endif %}
   </a>
-  <!--<![endif]-->
 
-  {# legacy IE visitors get a direct download link instead of going to /thanks. #}
-  <!--[if IE]>
-    <a href="{{ download_link_direct|safe }}"
-      class="download-link mzp-c-button mzp-t-product {% if button_class %}{{ button_class }}{% else %}mzp-t-xl{% endif %}"
-      data-link-type="download" data-download-os="Desktop" data-display-name="Windows 32-bit" data-download-version="win"
-      {% if download_location %}data-download-location="{{ download_location }}"{% endif %}>
-      {% if alt_copy %}
-        {{ alt_copy }}
-      {% else %}
-        {{ ftl('download-button-download-firefox') }}
-      {% endif %}
-    </a>
-  <![endif]-->
+  {# ESR download buttons to display on unsupported systems: issue 13317 #}
+  {% include 'firefox/includes/download-unsupported.html' %}
 
   <small class="mzp-c-button-download-privacy-link">
     <a href="{{ url('privacy.notices.firefox') }}">
diff --git a/bedrock/firefox/templates/firefox/includes/download-button.html b/bedrock/firefox/templates/firefox/includes/download-button.html
index 0921b6b7ff4..b2be214b10e 100644
--- a/bedrock/firefox/templates/firefox/includes/download-button.html
+++ b/bedrock/firefox/templates/firefox/includes/download-button.html
@@ -51,45 +51,8 @@
       {{ 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-windows-7-8-and-81-moving-extended-support', os_version='Windows 8.1') }}</strong></p>
-      <p>{{ ftl('download-button-please-download-esr') }}</p>
-      <ul class="download-platform-list">
-        <li>
-          <a class="mzp-c-button mzp-t-product download-link" href="https://download.mozilla.org/?product=firefox-esr-next-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">
-            {{ ftl('download-firefox-esr-64') }}
-          </a>
-        </li>
-        <li>
-          <a class="mzp-c-button mzp-t-product download-link" href="https://download.mozilla.org/?product=firefox-esr-next-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">
-            {{ ftl('download-firefox-esr-32') }}
-          </a>
-        </li>
-      </ul>
-    </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-macos-1012-1013-1014-moving-to-extended-support', os_version='macOS 10.14') }}</strong></p>
-      <p>{{ ftl('download-button-please-download-esr') }}</p>
-
-      <ul class="download-platform-list">
-        <li>
-          <a class="mzp-c-button mzp-t-product download-link" href="https://download.mozilla.org/?product=firefox-esr-next-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">
-            {{ ftl('download-firefox-esr') }}
-          </a>
-        </li>
-      </ul>
-    </div>
+    {# ESR download buttons to display on unsupported systems: issue 13317 #}
+    {% include 'firefox/includes/download-unsupported.html' %}
   {% endif %}
   <ul class="download-list">
     {% for plat in builds %}
diff --git a/bedrock/firefox/templates/firefox/includes/download-unsupported.html b/bedrock/firefox/templates/firefox/includes/download-unsupported.html
new file mode 100644
index 00000000000..ad3ac7f4d78
--- /dev/null
+++ b/bedrock/firefox/templates/firefox/includes/download-unsupported.html
@@ -0,0 +1,49 @@
+{#
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at https://mozilla.org/MPL/2.0/.
+#}
+
+{% 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-windows-7-8-and-81-moving-extended-support', os_version='Windows 8.1') }}</strong></p>
+  <p>{{ ftl('download-button-please-download-esr') }}</p>
+  <div class="download-platform-list">
+    <p>
+      <a class="mzp-c-button mzp-t-product download-link os_win64" href="https://download.mozilla.org/?product=firefox-esr-next-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">
+        {{ ftl('download-firefox-esr-64') }}
+      </a>
+    </p>
+    <p>
+      <a class="mzp-c-button mzp-t-product download-link os_win" href="https://download.mozilla.org/?product=firefox-esr-next-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">
+        {{ ftl('download-firefox-esr-32') }}
+      </a>
+    </p>
+
+    <small class="fx-unsupported-message-all-link">
+      <a href="{{ url('firefox.all') }}#product-desktop-esr">
+        {{ ftl('download-a-different-build') }}
+      </a>
+    </small>
+  </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-macos-1012-1013-1014-moving-to-extended-support', os_version='macOS 10.14') }}</strong></p>
+  <p>{{ ftl('download-button-please-download-esr') }}</p>
+
+  <div class="download-platform-list">
+    <a class="mzp-c-button mzp-t-product download-link" href="https://download.mozilla.org/?product=firefox-esr-next-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">
+      {{ ftl('download-firefox-esr') }}
+    </a>
+  </div>
+</div>
diff --git a/bedrock/firefox/templates/firefox/new/basic/base_download.html b/bedrock/firefox/templates/firefox/new/basic/base_download.html
index c7ca1155deb..37862485409 100644
--- a/bedrock/firefox/templates/firefox/new/basic/base_download.html
+++ b/bedrock/firefox/templates/firefox/new/basic/base_download.html
@@ -54,12 +54,6 @@
 
 {% block content %}
 <main class="main-download" {% if v %}data-variant="{{ v }}"{% endif %}>
-
-  {# Show unsupported notification to IE 6/7 visitors on Windows XP/Vista #}
-  <!--[if lt IE 8]>
-  <div class="mzp-c-notification-bar mzp-t-warning" data-nosnippet="true">{{ ftl('firefox-new-mozilla-no-longer-provides', fallback='firefox-new-youre-using-an-insecure-outdated', url='https://support.mozilla.org/kb/end-support-windows-xp-and-vista') }}</div>
-  <![endif]-->
-
   {% call split(
     block_class='mzp-l-split-center-on-sm-md t-split-hero',
     media_class='mzp-l-split-media-overflow',
diff --git a/bedrock/firefox/templates/firefox/new/desktop/download.html b/bedrock/firefox/templates/firefox/new/desktop/download.html
index 563e3a70d18..15c7164e3a0 100644
--- a/bedrock/firefox/templates/firefox/new/desktop/download.html
+++ b/bedrock/firefox/templates/firefox/new/desktop/download.html
@@ -61,12 +61,6 @@
 {% set show_mr106_browser_promo = switch('download-firefox-mr106-promo', ['en-US', 'en-CA', 'en-GB', 'fr', 'de']) %}
 
 <main class="main-download" {% if v %}data-variant="{{ v }}"{% endif %}>
-
-  {# Show unsupported notification to IE 6/7 visitors on Windows XP/Vista #}
-  <!--[if lt IE 8]>
-  <div class="mzp-c-notification-bar mzp-t-warning" data-nosnippet="true">{{ ftl('firefox-desktop-download-mozilla-no-longer-provides', fallback='firefox-desktop-download-youre-using-an-insecure-outdated', url='https://support.mozilla.org/kb/end-support-windows-xp-and-vista') }}</div>
-  <![endif]-->
-
   <section id="desktop-banner" class="c-block t-intro show-else mzp-has-media-hide-on-sm">
     <div class="c-block-container">
       <div class="c-block-body">
diff --git a/l10n/en/download_button.ftl b/l10n/en/download_button.ftl
index c885c85aba0..b0cf508debf 100644
--- a/l10n/en/download_button.ftl
+++ b/l10n/en/download_button.ftl
@@ -54,3 +54,4 @@ download-button-please-download-esr = Please download { -brand-name-firefox-esr
 download-firefox-esr = Download { -brand-name-firefox-esr }
 download-firefox-esr-32 = Download { -brand-name-firefox-esr } 32-bit
 download-firefox-esr-64 = Download { -brand-name-firefox-esr } 64-bit
+download-a-different-build = Download a different build
diff --git a/media/css/firefox/browsers-products.scss b/media/css/firefox/browsers-products.scss
index 1f77e9f0aba..7fdb92ecedd 100644
--- a/media/css/firefox/browsers-products.scss
+++ b/media/css/firefox/browsers-products.scss
@@ -296,6 +296,16 @@ $url-download-link-hover: svg-url($download-link-hover);
     }
 }
 
+// issue 13317
+.fx-unsupported .cta-download[data-download-os="Desktop"]{
+    display: none;
+}
+
+// issue 13317
+.fx-unsupported .menu-desktop {
+    display: none;
+}
+
 // * -------------------------------------------------------------------------- */
 // Mobile download links, show app store links when user is on mobile
 
diff --git a/media/css/firefox/challenge-the-default/_hero.scss b/media/css/firefox/challenge-the-default/_hero.scss
index 551eef10eab..067a32e57a3 100644
--- a/media/css/firefox/challenge-the-default/_hero.scss
+++ b/media/css/firefox/challenge-the-default/_hero.scss
@@ -194,8 +194,6 @@ $campaign-red: #ff6a75;
             max-width: 80%;
         }
 
-
-
         h1 {
             @include font-firefox;
             @include font-size(36px);
@@ -231,4 +229,9 @@ $campaign-red: #ff6a75;
             }
         }
     }
+
+    // issue 13317
+    .fx-unsupported-message {
+        @include bidi(((text-align, left, right),));
+    }
 }
diff --git a/media/css/firefox/developer/includes/intro.scss b/media/css/firefox/developer/includes/intro.scss
index d7ca8698341..b72c90f5923 100644
--- a/media/css/firefox/developer/includes/intro.scss
+++ b/media/css/firefox/developer/includes/intro.scss
@@ -19,10 +19,6 @@
         margin-left: auto;
         margin-right: auto;
     }
-
-    .fx-unsupported-message {
-        text-align: center;
-    }
 }
 
 .intro-title {
diff --git a/media/css/firefox/home/master.scss b/media/css/firefox/home/master.scss
index 8dad5d7675e..d18df008654 100644
--- a/media/css/firefox/home/master.scss
+++ b/media/css/firefox/home/master.scss
@@ -36,6 +36,11 @@ $brand-theme: 'firefox';
             color: $color-marketing-gray-50;
         }
     }
+
+    // issue 13317
+    .fx-unsupported & .menu-desktop {
+        display: none;
+    }
 }
 
 // ------------------------------------------------------------------------------
diff --git a/media/css/firefox/new/basic/ie.scss b/media/css/firefox/new/basic/ie.scss
index 36b95b619d9..edab0912405 100644
--- a/media/css/firefox/new/basic/ie.scss
+++ b/media/css/firefox/new/basic/ie.scss
@@ -7,3 +7,10 @@ $image-path: '/media/protocol/img';
 
 @import '~@mozilla-protocol/core/protocol/css/includes/lib';
 @import '../../../protocol/components/navigation-ie';
+@import '../../../protocol/components/fx-unsupported-ie';
+
+@media #{$mq-md} {
+    .fx-unsupported-message {
+        @include bidi(((text-align, left, right),));
+    }
+}
diff --git a/media/css/firefox/new/common/thanks-messaging.scss b/media/css/firefox/new/common/thanks-messaging.scss
index dee736ce27f..a255037dc81 100644
--- a/media/css/firefox/new/common/thanks-messaging.scss
+++ b/media/css/firefox/new/common/thanks-messaging.scss
@@ -31,6 +31,18 @@ $image-path: '/media/protocol/img';
         .show-auto-download-notification {
             display: block !important;
         }
+
+        // issue 13317
+        &.fx-unsupported {
+            .show-mac,
+            .show-auto-download-notification {
+                display: none !important;
+            }
+
+            .show-unknown {
+                display: block !important;
+            }
+        }
     }
 
     &.windows {
@@ -44,6 +56,18 @@ $image-path: '/media/protocol/img';
                 display: block !important;
             }
         }
+
+        // issue 13317
+        &.fx-unsupported {
+            .show-windows,
+            .show-auto-download-notification {
+                display: none !important;
+            }
+
+            .show-unknown {
+                display: block !important;
+            }
+        }
     }
 
     &.linux {
diff --git a/media/css/firefox/new/desktop/download.scss b/media/css/firefox/new/desktop/download.scss
index 271e06c4ecb..29219eb3800 100644
--- a/media/css/firefox/new/desktop/download.scss
+++ b/media/css/firefox/new/desktop/download.scss
@@ -619,6 +619,10 @@ button.mzp-c-cta-link {
         max-width: $content-xl + $layout-xl * 2;
     }
 
+    .c-block-body > p {
+        margin-bottom: $v-grid-md;
+    }
+
     [lang='ar'] & h2 {
         @include font-size(40px);
     }
@@ -627,8 +631,9 @@ button.mzp-c-cta-link {
         margin-bottom: $v-grid-md;
     }
 
-    p {
-        margin-bottom: $v-grid-md;
+    // issue 13317
+    .fx-unsupported-message {
+        @include bidi(((text-align, left, right),));
     }
 }
 
@@ -1194,10 +1199,6 @@ button.mzp-c-cta-link {
             text-align: left;
         }
     }
-
-    p {
-        margin-bottom: 0;
-    }
 }
 
 // --------------------------------------------------------------------------
diff --git a/media/css/firefox/new/desktop/ie8.scss b/media/css/firefox/new/desktop/ie8.scss
index 7ef9a77e86a..c30dc4ca794 100644
--- a/media/css/firefox/new/desktop/ie8.scss
+++ b/media/css/firefox/new/desktop/ie8.scss
@@ -7,6 +7,7 @@ $image-path: '/media/protocol/img';
 
 @import '~@mozilla-protocol/core/protocol/css/includes/lib';
 @import '../../../protocol/components/navigation-ie';
+@import '../../../protocol/components/fx-unsupported-ie';
 
 $h-grid-lg: 80px;
 
diff --git a/media/css/firefox/new/desktop/ie9.scss b/media/css/firefox/new/desktop/ie9.scss
index 1af52cce962..2871f335a86 100644
--- a/media/css/firefox/new/desktop/ie9.scss
+++ b/media/css/firefox/new/desktop/ie9.scss
@@ -6,6 +6,7 @@ $font-path: '/media/protocol/fonts';
 $image-path: '/media/protocol/img';
 
 @import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '../../../protocol/components/fx-unsupported-ie';
 
 .c-menu-item .c-menu-item-desc {
     display: none;
diff --git a/media/css/firefox/releasenotes.scss b/media/css/firefox/releasenotes.scss
index ba7a02fb24a..36776f8b8d5 100644
--- a/media/css/firefox/releasenotes.scss
+++ b/media/css/firefox/releasenotes.scss
@@ -14,12 +14,6 @@ $image-path: '/media/protocol/img';
 // * -------------------------------------------------------------------------- */
 // Call out / page header
 
-
-// Fx unsupported message issue #13317
-.mzp-c-call-out .fx-unsupported-message {
-    text-align: center;
-}
-
 .mzp-c-call-out.mzp-t-product-firefox,
 .mzp-c-call-out.mzp-t-product-beta {
     background: $color-marketing-gray-20;
diff --git a/media/css/mozorg/home/home-eu.scss b/media/css/mozorg/home/home-eu.scss
index bba17dd73fd..87dae3198a2 100644
--- a/media/css/mozorg/home/home-eu.scss
+++ b/media/css/mozorg/home/home-eu.scss
@@ -193,10 +193,6 @@ h4 {
     position: relative;
     text-align: center;
     z-index: 2;
-
-    p {
-        margin-bottom: 0;
-    }
 }
 
 .c-secondary-cta-title {
@@ -230,6 +226,17 @@ h4 {
     .c-secondary-cta-title {
         background-position: left 35px;
     }
+
+    .fx-unsupported .c-secondary-cta {
+        .fx-unsupported-message {
+            @include bidi(((text-align, left, right),));
+        }
+
+        .fx-privacy-link,
+        .mzp-c-button-download-privacy-link {
+            @include bidi(((text-align, left, right),));
+        }
+    }
 }
 
 @media #{$mq-xl} {
diff --git a/media/css/mozorg/home/includes/_home-base.scss b/media/css/mozorg/home/includes/_home-base.scss
index 426ac229242..d4810df819e 100644
--- a/media/css/mozorg/home/includes/_home-base.scss
+++ b/media/css/mozorg/home/includes/_home-base.scss
@@ -92,10 +92,6 @@
     position: relative;
     text-align: center;
     z-index: 2;
-
-    p {
-        margin-bottom: 0;
-    }
 }
 
 .c-secondary-cta-title {
@@ -130,6 +126,17 @@
         @include font-firefox;
         background-position: left 35px;
     }
+
+    .fx-unsupported .c-secondary-cta {
+        .fx-unsupported-message {
+            @include bidi(((text-align, left, right),));
+        }
+
+        .fx-privacy-link,
+        .mzp-c-button-download-privacy-link {
+            @include bidi(((text-align, left, right),));
+        }
+    }
 }
 
 @media #{$mq-xl} {
diff --git a/media/css/protocol/components/_download-button-ie.scss b/media/css/protocol/components/_download-button-ie.scss
index 18b3648068e..e3a8445f9d5 100644
--- a/media/css/protocol/components/_download-button-ie.scss
+++ b/media/css/protocol/components/_download-button-ie.scss
@@ -3,6 +3,7 @@
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
 @import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import 'fx-unsupported-ie';
 
 // download button and related containers
 ul.download-list {
@@ -42,31 +43,4 @@ ul.download-list {
     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;
-
-    .download-platform-list {
-        text-align: center;
-
-        li {
-            margin-bottom: $spacing-lg;
-        }
-    }
-}
-
-.download-button-beta .fx-unsupported-message.win,
-.download-button-alpha .fx-unsupported-message.win,
-.download-button-nightly .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
index bb0253b1925..4726836ac7f 100644
--- a/media/css/protocol/components/_download-button.scss
+++ b/media/css/protocol/components/_download-button.scss
@@ -109,37 +109,126 @@ ul.download-list {
     display: block !important;
 }
 
-// Hide pre-release Firefox download buttons on unsupported
+// Conditional 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 {
+.fx-unsupported-message {
     display: none !important;
+    text-align: center;
+
+    .fx-unsupported-message-all-link {
+        @include text-body-xs;
+        display: block;
+        margin-top: $spacing-md;
+
+        a:link,
+        a:visited {
+            color: inherit;
+            text-decoration: none;
+        }
+
+        a:hover,
+        a:active,
+        a:focus {
+            text-decoration: underline;
+        }
+    }
+
+    .download-link {
+        text-align: center;
+    }
 }
 
-.fx-unsupported-message {
-    @include bidi(((text-align, left, right),));
-    display: none !important;
+// Split component styling
+.fx-unsupported .mzp-c-split {
+    .fx-unsupported-message,
+    .fx-privacy-link,
+    .mzp-c-button-download-privacy-link {
+        @include bidi(((text-align, left, right),));
+    }
+}
 
-    .download-platform-list {
+.fx-unsupported .mzp-c-split.mzp-l-split-center-on-sm-md {
+    .fx-unsupported-message,
+    .fx-privacy-link,
+    .mzp-c-button-download-privacy-link {
         text-align: center;
+    }
 
-        li {
-            margin-bottom: $spacing-lg;
+    @media #{$mq-md} {
+        .fx-unsupported-message,
+        .fx-privacy-link,
+        .mzp-c-button-download-privacy-link {
+            @include bidi(((text-align, left, right),));
         }
     }
 }
 
-.windows.fx-unsupported .download-button-beta .fx-unsupported-message.win,
-.windows.fx-unsupported .download-button-alpha .fx-unsupported-message.win,
-.windows.fx-unsupported .download-button-nightly .fx-unsupported-message.win,
-.osx.fx-unsupported .download-button-beta .fx-unsupported-message.mac,
-.osx.fx-unsupported .download-button-alpha .fx-unsupported-message.mac,
-.osx.fx-unsupported .download-button-nightly .fx-unsupported-message.mac {
-    display: block !important;
+// Callout styling
+.fx-unsupported .mzp-c-call-out-compact {
+    .fx-unsupported-message,
+    .fx-privacy-link,
+    .mzp-c-button-download-privacy-link {
+        @include bidi(((text-align, left, right),));
+    }
+}
+
+.windows.fx-unsupported,
+.osx.fx-unsupported {
+    // Hide Firefox desktop download buttons
+    .c-button-download-thanks-link,
+    .download-button .download-list {
+        display: none !important;
+    }
+
+    // Keep showing Firefox mobile download buttons
+    .download-button-android .download-list,
+    .download-button-ios .download-list {
+        display: block !important;
+    }
+
+    // Hide Firefox download button in the navigation as there's
+    // too little space to display messaging.
+    .c-navigation .c-navigation-shoulder .c-button-download-thanks {
+        display: none !important;
+    }
+
+    // Hide Firefox Win64 ESR download button by default.
+    .fx-unsupported-message.win .download-link.os_win64 {
+        display: none !important;
+    }
+}
+
+.windows.fx-unsupported {
+    // Show unsupported message with Firefox ESR download button.
+    .download-button .fx-unsupported-message.win,
+    .c-button-download-thanks .fx-unsupported-message.win {
+        display: block !important;
+    }
+
+    // Show Firefox Win32 ESR download buttons for 64-bit CPUs.
+    .fx-unsupported-message.win .download-link.os_win {
+        display: inline-block !important;
+    }
+
+    &.x64 {
+        // Show Firefox Win64 ESR download buttons for 64-bit CPUs.
+        .fx-unsupported-message.win .download-link.os_win64 {
+            display: inline-block !important;
+        }
+
+        // Hide Firefox Win32 ESR download buttons for 64-bit CPUs.
+        .fx-unsupported-message.win .download-link.os_win {
+            display: none !important;
+        }
+    }
+}
+
+.osx.fx-unsupported {
+    // Show unsupported message with Firefox ESR download button.
+    .download-button .fx-unsupported-message.mac,
+    .c-button-download-thanks .fx-unsupported-message.mac {
+        display: block !important;
+    }
 }
 
 .android .download-button-desktop,
diff --git a/media/css/protocol/components/_fx-unsupported-ie.scss b/media/css/protocol/components/_fx-unsupported-ie.scss
new file mode 100644
index 00000000000..bce69afa59c
--- /dev/null
+++ b/media/css/protocol/components/_fx-unsupported-ie.scss
@@ -0,0 +1,73 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+
+/* !important used for strict download link enforcement */
+/* stylelint-disable declaration-no-important, selector-class-pattern  */
+
+// Conditional Firefox download buttons on unsupported
+// operating system versions (issue #13317)
+.fx-unsupported-message {
+    display: none !important;
+    text-align: center;
+
+    .fx-unsupported-message-all-link {
+        @include text-body-xs;
+        display: block;
+        margin-top: $spacing-md;
+
+        a:link,
+        a:visited {
+            color: inherit;
+            text-decoration: none;
+        }
+
+        a:hover,
+        a:active,
+        a:focus {
+            text-decoration: underline;
+        }
+    }
+
+    .download-link {
+        text-align: center;
+    }
+}
+
+// Hide Firefox desktop download buttons
+.c-button-download-thanks-link,
+.download-button .download-list {
+    display: none !important;
+}
+
+// Keep showing Firefox mobile download buttons
+.download-button-android .download-list,
+.download-button-ios .download-list {
+    display: block !important;
+}
+
+// Hide Firefox download button in the navigation as there's
+// too little space to display messaging.
+.c-navigation .c-navigation-shoulder .c-button-download-thanks {
+    display: none !important;
+}
+
+// Hide Firefox Win64 ESR download button by default.
+.fx-unsupported-message.win .download-link.os_win64 {
+    display: none !important;
+}
+
+// Show unsupported message with Firefox ESR download button.
+.download-button .fx-unsupported-message.win,
+.c-button-download-thanks .fx-unsupported-message.win {
+    display: block !important;
+}
+
+// Show Firefox Win32 ESR download buttons for 64-bit CPUs.
+.fx-unsupported-message.win .download-link.os_win {
+    display: inline-block !important;
+}
+
+/* stylelint-enable */
diff --git a/media/js/base/site.js b/media/js/base/site.js
index 33942b7a562..0836fdd7f02 100644
--- a/media/js/base/site.js
+++ b/media/js/base/site.js
@@ -32,10 +32,7 @@
                 // iPadOS
                 return 'ios';
             }
-            if (
-                ua.indexOf('Mac OS X') !== -1 &&
-                !/Mac OS X 10.(1[0-1]|[1-9])\D/.test(ua)
-            ) {
+            if (ua.indexOf('Mac OS X') !== -1) {
                 return 'osx';
             }
 
@@ -145,75 +142,91 @@
             );
         },
 
-        platform: 'other',
-        platformVersion: undefined,
-        archType: 'x64',
-        archSize: 32
-    };
+        // Add class to reflect if user agent is Firefox. Cherry-picked from mozilla-client.js.
+        isFirefox: function () {
+            return (
+                /\s(Firefox|FxiOS)/.test(navigator.userAgent) &&
+                !/Iceweasel|IceCat|SeaMonkey|Camino|like Firefox/i.test(
+                    navigator.userAgent
+                )
+            );
+        },
 
-    function updateHTML() {
-        var h = document.documentElement;
-        var _version = window.site.platformVersion
-            ? parseFloat(window.site.platformVersion)
-            : 0;
+        getPlatformClass: function (platform, platformVersion, archSize) {
+            var classString = document.documentElement.className;
+            var _version = platformVersion ? parseFloat(platformVersion) : 0;
+
+            if (platform === 'windows') {
+                // Detect Windows 10 "and up" to display installation
+                // messaging on the /firefox/download/thanks/ page.
 
-        if (window.site.platform === 'windows') {
-            // Detect Windows 10 "and up" to display installation
-            // messaging on the /firefox/download/thanks/ page.
+                if (_version >= 10.0) {
+                    classString += ' windows-10-plus';
+                }
 
-            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) {
+                    classString += ' fx-unsupported';
+                    window.site.fxSupported = false;
+                }
+            } else {
+                classString = classString.replace('windows', platform);
             }
 
-            // 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';
+            if (platform === 'osx') {
+                // Add fx-unsupported class name for macOS 10.14 and below
+                // https://github.com/mozilla/bedrock/issues/13317
+                if (_version <= 10.14) {
+                    classString += ' fx-unsupported';
+                    window.site.fxSupported = false;
+                }
             }
-        } 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()) {
+                classString += ' arm';
             }
-        }
 
-        // Used to display a custom installation message and
-        // SUMO link on the /firefox/download/thanks/ page.
-        if (window.site.isARM()) {
-            h.className += ' arm';
-        }
+            // Used for 64bit download link on Linux and Firefox Beta on Windows.
+            if (archSize === 64) {
+                classString += ' x64';
+            }
 
-        // Used for 64bit download link on Linux and Firefox Beta on Windows.
-        if (window.site.archSize === 64) {
-            h.className += ' x64';
-        }
+            if (window.site.isFirefox()) {
+                classString += ' is-firefox';
+            }
 
-        // Add class to reflect if user agent is Firefox. Cherry-picked from mozilla-client.js.
-        var isFirefox =
-            /\s(Firefox|FxiOS)/.test(navigator.userAgent) &&
-            !/Iceweasel|IceCat|SeaMonkey|Camino|like Firefox/i.test(
-                navigator.userAgent
-            );
+            // Add class to reflect browsers that get 1st class JS & CSS support.
+            var isModernBrowser = (window.site.isModernBrowser =
+                window.site.cutsTheMustard());
 
-        if (isFirefox) {
-            h.className += ' is-firefox';
-        }
+            if (isModernBrowser) {
+                classString += ' is-modern-browser';
+            }
 
-        // Add class to reflect browsers that get 1st class JS & CSS support.
-        var isModernBrowser = (window.site.isModernBrowser =
-            window.site.cutsTheMustard());
+            // Add class to reflect javascript availability for CSS
+            classString = classString.replace(/\bno-js\b/, 'js');
 
-        if (isModernBrowser) {
-            h.className += ' is-modern-browser';
-        }
+            return classString;
+        },
 
-        // Add class to reflect javascript availability for CSS
-        h.className = h.className.replace(/\bno-js\b/, 'js');
+        platform: 'other',
+        platformVersion: undefined,
+        archType: 'x64',
+        archSize: 32,
+        fxSupported: true
+    };
+
+    function updateHTML() {
+        var html = document.documentElement;
+        var classString = window.site.getPlatformClass(
+            window.site.platform,
+            window.site.platformVersion,
+            window.site.archSize
+        );
+        html.className = classString;
     }
 
     function getHighEntropyFromUAString() {
diff --git a/media/js/firefox/new/common/thanks-direct.js b/media/js/firefox/new/common/thanks-direct.js
index 73e3a388a4b..4577b74b19a 100644
--- a/media/js/firefox/new/common/thanks-direct.js
+++ b/media/js/firefox/new/common/thanks-direct.js
@@ -18,7 +18,10 @@
 
         // Only auto-start the download if a supported platform is detected.
         if (
-            Mozilla.DownloadThanks.shouldAutoDownload(window.site.platform) &&
+            Mozilla.DownloadThanks.shouldAutoDownload(
+                window.site.platform,
+                window.site.fxSupported
+            ) &&
             typeof Mozilla.Utils !== 'undefined'
         ) {
             downloadURL = Mozilla.DownloadThanks.getDownloadURL(window.site);
diff --git a/media/js/firefox/new/common/thanks-init.js b/media/js/firefox/new/common/thanks-init.js
index ad935dd39de..f27f2ad905a 100644
--- a/media/js/firefox/new/common/thanks-init.js
+++ b/media/js/firefox/new/common/thanks-init.js
@@ -12,7 +12,10 @@
 
     // Only auto-start the download if a supported platform is detected.
     if (
-        Mozilla.DownloadThanks.shouldAutoDownload(window.site.platform) &&
+        Mozilla.DownloadThanks.shouldAutoDownload(
+            window.site.platform,
+            window.site.fxSupported
+        ) &&
         typeof Mozilla.Utils !== 'undefined'
     ) {
         downloadURL = Mozilla.DownloadThanks.getDownloadURL(window.site);
diff --git a/media/js/firefox/new/common/thanks.js b/media/js/firefox/new/common/thanks.js
index 10577f18f25..4bb68e5243d 100644
--- a/media/js/firefox/new/common/thanks.js
+++ b/media/js/firefox/new/common/thanks.js
@@ -17,12 +17,13 @@ if (typeof window.Mozilla === 'undefined') {
     /**
      * Determine if browser should attempt to download Firefox on page load.
      * @param {String} platform
+     * @param {Boolean} fxSupported
      * @returns {Boolean}
      */
-    DownloadThanks.shouldAutoDownload = function (platform) {
+    DownloadThanks.shouldAutoDownload = function (platform, fxSupported) {
         var supportedPlatforms = ['windows', 'osx', 'linux', 'android', 'ios'];
 
-        if (supportedPlatforms.indexOf(platform) !== -1) {
+        if (fxSupported && supportedPlatforms.indexOf(platform) !== -1) {
             return true;
         }
 
diff --git a/tests/unit/spec/base/site.js b/tests/unit/spec/base/site.js
index bbd09517185..702e18bd972 100644
--- a/tests/unit/spec/base/site.js
+++ b/tests/unit/spec/base/site.js
@@ -66,84 +66,84 @@ describe('site.js', function () {
         it('should identify old-Mac', function () {
             expect(
                 window.site.getPlatform(
-                    'Mozilla/5.0 (Macintosh; U; PPC Mac OS X 10_5_8; ja-jp) AppleWebKit/533.20.25 (KHTML, like Gecko) Version/5.0.4 Safari/533.20.27',
+                    'Mozilla/4.0 (compatible; MSIE 5.23; Mac_PowerPC)',
                     'foo'
                 )
             ).toBe('other');
             expect(
                 window.site.getPlatform(
-                    'Mozilla/5.0 (Macintosh; U; PPC Mac OS X 10_4_11; nl-nl) AppleWebKit/533.16 (KHTML, like Gecko) Version/4.1 Safari/533.16',
+                    'Mozilla/4.0 (compatible; MSIE 5.23; Mac_PowerPC)',
                     'foo'
                 )
             ).toBe('other');
+        });
+
+        it('should identify iOS', function () {
+            expect(window.site.getPlatform('foo', 'iPhone')).toBe('ios');
+            expect(window.site.getPlatform('foo', 'iPad')).toBe('ios');
+            expect(window.site.getPlatform('foo', 'iPod')).toBe('ios');
+            expect(window.site.getPlatform('foo', 'iPhone Simulator')).toBe(
+                'ios'
+            );
+        });
+
+        it('should identify iPadOS', function () {
+            window.ontouchstart = sinon.stub();
+            expect(window.site.getPlatform('foo', 'MacIntel')).toBe('ios');
+        });
+
+        it('should identify OSX', function () {
             expect(
                 window.site.getPlatform(
-                    'Mozilla/4.0 (compatible; MSIE 5.23; Mac_PowerPC)',
+                    'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:53.0) Gecko/20100101 Firefox/53.0',
                     'foo'
                 )
-            ).toBe('other');
+            ).toBe('osx');
             expect(
                 window.site.getPlatform(
-                    'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/534.55.3 (KHTML, like Gecko) Version/5.1.3 Safari/534.53.10',
+                    'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36',
                     'foo'
                 )
-            ).toBe('other');
+            ).toBe('osx');
             expect(
                 window.site.getPlatform(
-                    'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:21.0) Gecko/20100101 Firefox/21.0',
+                    'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36',
                     'foo'
                 )
-            ).toBe('other');
+            ).toBe('osx');
             expect(
                 window.site.getPlatform(
-                    'Mozilla/4.0 (compatible; MSIE 5.23; Mac_PowerPC)',
+                    'Mozilla/5.0 (Macintosh; U; PPC Mac OS X 10_5_8; ja-jp) AppleWebKit/533.20.25 (KHTML, like Gecko) Version/5.0.4 Safari/533.20.27',
                     'foo'
                 )
-            ).toBe('other');
+            ).toBe('osx');
             expect(
                 window.site.getPlatform(
-                    'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10) AppleWebKit/538.10.3 (KHTML, like Gecko) Chrome/21.0.1180.89 Safari/537.1',
+                    'Mozilla/5.0 (Macintosh; U; PPC Mac OS X 10_4_11; nl-nl) AppleWebKit/533.16 (KHTML, like Gecko) Version/4.1 Safari/533.16',
                     'foo'
                 )
-            ).toBe('other');
+            ).toBe('osx');
             expect(
                 window.site.getPlatform(
-                    'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36',
+                    'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/534.55.3 (KHTML, like Gecko) Version/5.1.3 Safari/534.53.10',
                     'foo'
                 )
-            ).toBe('other');
-        });
-
-        it('should identify iOS', function () {
-            expect(window.site.getPlatform('foo', 'iPhone')).toBe('ios');
-            expect(window.site.getPlatform('foo', 'iPad')).toBe('ios');
-            expect(window.site.getPlatform('foo', 'iPod')).toBe('ios');
-            expect(window.site.getPlatform('foo', 'iPhone Simulator')).toBe(
-                'ios'
-            );
-        });
-
-        it('should identify iPadOS', function () {
-            window.ontouchstart = sinon.stub();
-            expect(window.site.getPlatform('foo', 'MacIntel')).toBe('ios');
-        });
-
-        it('should identify OSX', function () {
+            ).toBe('osx');
             expect(
                 window.site.getPlatform(
-                    'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:53.0) Gecko/20100101 Firefox/53.0',
+                    'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:21.0) Gecko/20100101 Firefox/21.0',
                     'foo'
                 )
             ).toBe('osx');
             expect(
                 window.site.getPlatform(
-                    'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36',
+                    'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10) AppleWebKit/538.10.3 (KHTML, like Gecko) Chrome/21.0.1180.89 Safari/537.1',
                     'foo'
                 )
             ).toBe('osx');
             expect(
                 window.site.getPlatform(
-                    'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36',
+                    'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36',
                     'foo'
                 )
             ).toBe('osx');
@@ -488,4 +488,156 @@ describe('site.js', function () {
             expect(window.site.isARM(undefined)).toBeFalse();
         });
     });
+
+    describe('getPlatformClass', function () {
+        beforeEach(function () {
+            document.documentElement.className = 'windows no-js';
+            window.site.fxSupported = true;
+        });
+
+        afterEach(function () {
+            document.documentElement.className = '';
+            window.site.fxSupported = true;
+        });
+
+        it('should return the appropriate HTML class for Windows 10', function () {
+            spyOn(window.site, 'cutsTheMustard').and.returnValue(true);
+            spyOn(window.site, 'isARM').and.returnValue(false);
+            spyOn(window.site, 'isFirefox').and.returnValue(false);
+            const classString = window.site.getPlatformClass(
+                'windows',
+                10.0,
+                32
+            );
+            expect(classString).toEqual(
+                'windows js windows-10-plus is-modern-browser'
+            );
+            expect(window.site.fxSupported).toBeTrue;
+        });
+
+        it('should return the appropriate HTML class for macOS 10.15', function () {
+            spyOn(window.site, 'cutsTheMustard').and.returnValue(true);
+            spyOn(window.site, 'isARM').and.returnValue(false);
+            spyOn(window.site, 'isFirefox').and.returnValue(false);
+            const classString = window.site.getPlatformClass('osx', 10.15, 32);
+            expect(classString).toEqual('osx js is-modern-browser');
+        });
+
+        it('should return the appropriate HTML class for Linux', function () {
+            spyOn(window.site, 'cutsTheMustard').and.returnValue(true);
+            spyOn(window.site, 'isARM').and.returnValue(false);
+            spyOn(window.site, 'isFirefox').and.returnValue(false);
+            const classString = window.site.getPlatformClass(
+                'linux',
+                undefined,
+                32
+            );
+            expect(classString).toEqual('linux js is-modern-browser');
+            expect(window.site.fxSupported).toBeTrue;
+        });
+
+        it('should return the appropriate HTML class for Android', function () {
+            spyOn(window.site, 'cutsTheMustard').and.returnValue(true);
+            spyOn(window.site, 'isARM').and.returnValue(false);
+            spyOn(window.site, 'isFirefox').and.returnValue(false);
+            const classString = window.site.getPlatformClass(
+                'android',
+                '4.1',
+                64
+            );
+            expect(classString).toEqual('android js x64 is-modern-browser');
+            expect(window.site.fxSupported).toBeTrue;
+        });
+
+        it('should return the appropriate HTML class for iOS', function () {
+            spyOn(window.site, 'cutsTheMustard').and.returnValue(true);
+            spyOn(window.site, 'isARM').and.returnValue(false);
+            spyOn(window.site, 'isFirefox').and.returnValue(false);
+            const classString = window.site.getPlatformClass(
+                'ios',
+                undefined,
+                64
+            );
+            expect(classString).toEqual('ios js x64 is-modern-browser');
+            expect(window.site.fxSupported).toBeTrue;
+        });
+
+        it('should return the appropriate HTML class for unknown platforms', function () {
+            spyOn(window.site, 'cutsTheMustard').and.returnValue(true);
+            spyOn(window.site, 'isARM').and.returnValue(false);
+            spyOn(window.site, 'isFirefox').and.returnValue(false);
+            const classString = window.site.getPlatformClass(
+                'other',
+                undefined,
+                32
+            );
+            expect(classString).toEqual('other js is-modern-browser');
+            expect(window.site.fxSupported).toBeTrue; // we don't know for sure here to say false.
+        });
+
+        it('should return the appropriate HTML class for outdated browsers', function () {
+            spyOn(window.site, 'cutsTheMustard').and.returnValue(false);
+            spyOn(window.site, 'isARM').and.returnValue(false);
+            spyOn(window.site, 'isFirefox').and.returnValue(false);
+            const classString = window.site.getPlatformClass(
+                'windows',
+                10.0,
+                32
+            );
+            expect(classString).toEqual('windows js windows-10-plus');
+            expect(window.site.fxSupported).toBeTrue;
+        });
+
+        it('should return the appropriate HTML class for Firefox browsers', function () {
+            spyOn(window.site, 'cutsTheMustard').and.returnValue(true);
+            spyOn(window.site, 'isARM').and.returnValue(false);
+            spyOn(window.site, 'isFirefox').and.returnValue(true);
+            const classString = window.site.getPlatformClass(
+                'windows',
+                10.0,
+                64
+            );
+            expect(classString).toEqual(
+                'windows js windows-10-plus x64 is-firefox is-modern-browser'
+            );
+            expect(window.site.fxSupported).toBeTrue;
+        });
+
+        it('should return the appropriate HTML class for ARM based CPUs', function () {
+            spyOn(window.site, 'cutsTheMustard').and.returnValue(true);
+            spyOn(window.site, 'isARM').and.returnValue(true);
+            spyOn(window.site, 'isFirefox').and.returnValue(false);
+            const classString = window.site.getPlatformClass(
+                'windows',
+                10.0,
+                32
+            );
+            expect(classString).toEqual(
+                'windows js windows-10-plus arm is-modern-browser'
+            );
+            expect(window.site.fxSupported).toBeTrue;
+        });
+
+        it('should return the appropriate HTML class for outdated Windows operating systems', function () {
+            spyOn(window.site, 'cutsTheMustard').and.returnValue(false);
+            spyOn(window.site, 'isARM').and.returnValue(false);
+            spyOn(window.site, 'isFirefox').and.returnValue(false);
+            const classString = window.site.getPlatformClass(
+                'windows',
+                6.3,
+                32
+            );
+            expect(classString).toEqual('windows js fx-unsupported');
+            expect(window.site.fxSupported).toBeFalse;
+        });
+
+        it('should return the appropriate HTML class for outdated macOS operating systems', function () {
+            spyOn(window.site, 'cutsTheMustard').and.returnValue(false);
+            spyOn(window.site, 'isARM').and.returnValue(false);
+            spyOn(window.site, 'isFirefox').and.returnValue(false);
+            const classString = window.site.getPlatformClass('osx', 10.14, 64);
+            expect(classString).toEqual('osx js fx-unsupported x64');
+            expect(window.site.fxSupported).toBeFalse;
+        });
+    });
 });
diff --git a/tests/unit/spec/firefox/new/common/thanks.js b/tests/unit/spec/firefox/new/common/thanks.js
index 03b82a77c5d..cfe691b39e2 100644
--- a/tests/unit/spec/firefox/new/common/thanks.js
+++ b/tests/unit/spec/firefox/new/common/thanks.js
@@ -13,25 +13,37 @@ describe('thanks.js', function () {
     describe('shouldAutoDownload', function () {
         it('should return true for supported platforms', function () {
             expect(
-                Mozilla.DownloadThanks.shouldAutoDownload('windows')
+                Mozilla.DownloadThanks.shouldAutoDownload('windows', true)
             ).toBeTruthy();
             expect(
-                Mozilla.DownloadThanks.shouldAutoDownload('osx')
+                Mozilla.DownloadThanks.shouldAutoDownload('osx', true)
             ).toBeTruthy();
             expect(
-                Mozilla.DownloadThanks.shouldAutoDownload('linux')
+                Mozilla.DownloadThanks.shouldAutoDownload('linux', true)
             ).toBeTruthy();
             expect(
-                Mozilla.DownloadThanks.shouldAutoDownload('android')
+                Mozilla.DownloadThanks.shouldAutoDownload('android', true)
             ).toBeTruthy();
             expect(
-                Mozilla.DownloadThanks.shouldAutoDownload('ios')
+                Mozilla.DownloadThanks.shouldAutoDownload('ios', true)
             ).toBeTruthy();
         });
 
         it('should return false for unknown platforms', function () {
             expect(
-                Mozilla.DownloadThanks.shouldAutoDownload('other')
+                Mozilla.DownloadThanks.shouldAutoDownload('other', true)
+            ).toBeFalsy();
+        });
+
+        it('should return false for non-supported Windows versions', function () {
+            expect(
+                Mozilla.DownloadThanks.shouldAutoDownload('windows', false)
+            ).toBeFalsy();
+        });
+
+        it('should return false for non-supported macOS versions', function () {
+            expect(
+                Mozilla.DownloadThanks.shouldAutoDownload('osx', false)
             ).toBeFalsy();
         });
     });