From 8ff380920ce7ce14fa55bc587158a7752e7b62e1 Mon Sep 17 00:00:00 2001
From: Alex Gibson <alexgibson@users.noreply.github.com>
Date: Mon, 19 Aug 2019 10:33:20 +0100
Subject: [PATCH] Drop 1st class support for IE9 (Fixes #7559)

---
 bedrock/base/templates/base-article.html      |   2 +-
 bedrock/base/templates/base-pebbles.html      |  46 ++++----
 bedrock/base/templates/base-protocol.html     |   6 +-
 bedrock/base/templates/base-resp.html         |  28 +++--
 .../templates/firefox/election/index.html     |  11 --
 .../templates/firefox/fights-for-you.de.html  |  12 --
 .../templates/firefox/fights-for-you.fr.html  |  12 --
 .../templates/firefox/fights-for-you.html     |  12 --
 .../templates/firefox/home/index-quantum.html |  14 ++-
 .../mozorg/contribute/contribute-embed.html   |   4 +-
 .../mozorg/home/includes/fundraiser.html      |   2 +-
 docs/browser-support.rst                      |  14 ++-
 docs/stub-attribution.rst                     |   2 +-
 gulpfile.js                                   |   8 +-
 media/css/firefox/home/ie9.scss               |   7 ++
 media/css/firefox/home/includes/_header.scss  | 104 ++++++++++++++++++
 media/css/firefox/home/quantum.scss           |  99 +----------------
 media/js/firefox/new/scene2.js                |  18 ++-
 .../base-page-init-ie.js}                     |   4 +-
 .../mozilla-utils-ie.js}                      |  19 ++--
 media/js/libs/matchMedia.addListener.js       |  47 --------
 media/js/libs/matchMedia.js                   |  34 ------
 media/static-bundles.json                     |  19 ++--
 .../firefox/features/test_landing.py          |   1 -
 tests/functional/firefox/test_developer.py    |   1 -
 tests/unit/karma.conf.js                      |   4 +-
 tests/unit/spec/ie/mozilla-utils-ie.js        |  42 +++++++
 tests/unit/spec/ie8/mozilla-utils-ie8.js      |  66 -----------
 28 files changed, 251 insertions(+), 387 deletions(-)
 create mode 100644 media/css/firefox/home/ie9.scss
 create mode 100644 media/css/firefox/home/includes/_header.scss
 rename media/js/{ie8/base-page-init-ie8.js => ie/base-page-init-ie.js} (85%)
 rename media/js/{ie8/mozilla-utils-ie8.js => ie/mozilla-utils-ie.js} (67%)
 delete mode 100644 media/js/libs/matchMedia.addListener.js
 delete mode 100644 media/js/libs/matchMedia.js
 create mode 100644 tests/unit/spec/ie/mozilla-utils-ie.js
 delete mode 100644 tests/unit/spec/ie8/mozilla-utils-ie8.js

diff --git a/bedrock/base/templates/base-article.html b/bedrock/base/templates/base-article.html
index f0d838b9672..5b86ef21a5a 100644
--- a/bedrock/base/templates/base-article.html
+++ b/bedrock/base/templates/base-article.html
@@ -40,7 +40,7 @@
 
 {% block site_js %}
   {{ super() }}
-  <!--[if !lte IE 8]><!-->
+  <!--[if !IE]><!-->
     {{ js_bundle('basic-article') }}
   <!--<![endif]-->
 {% endblock %}
diff --git a/bedrock/base/templates/base-pebbles.html b/bedrock/base/templates/base-pebbles.html
index b636ede6ebe..1bb05d76416 100644
--- a/bedrock/base/templates/base-pebbles.html
+++ b/bedrock/base/templates/base-pebbles.html
@@ -9,7 +9,7 @@
 
     {{ js_bundle('site') }}
 
-    <!--[if !lte IE 8]><!-->
+    <!--[if !IE]><!-->
     {% block experiments %}{% endblock %}
     <!--<![endif]-->
 
@@ -50,28 +50,30 @@
 
     {{ l10n_css() }}
 
-    <!--[if lte IE 8]>
+    <!--[if lt IE 9]>
       {# Only needed for IE before v9 #}
       <script src="{{ static('js/libs/html5shiv.js') }}"></script>
+    <![endif]-->
 
-      {# Basic styles, only for IE8 and lower #}
+    <!--[if IE]>
+      {# Basic styles, only for IE9 and lower #}
       {% block old_ie_styles %}
       {{ css_bundle('oldIE-pebbles') }}
       {% endblock %}
     <![endif]-->
 
-    <!--[if !lte IE 8]><!-->
-    {# Global styles, hidden from IE8 and lower #}
+    <!--[if !IE]><!-->
+    {# Global styles, hidden from IE9 and lower #}
     {% block site_css %}
       {{ css_bundle('pebbles') }}
     {% endblock %}
 
-    {# Page-specific styles, hidden from IE8 and lower #}
+    {# Page-specific styles, hidden from IE9 and lower #}
     {% block page_css %}{% endblock %}
     <!--<![endif]-->
 
     {% block extrahead %}
-      {# Extra header stuff (scripts, styles, metadata, etc) seen by all browsers. Use the 'page_css' block for CSS you want to hide from IE7 and lower. #}
+      {# Extra header stuff (scripts, styles, metadata, etc) seen by all browsers. Use the 'page_css' block for CSS you want to hide from IE9 and lower. #}
     {% endblock %}
 
     {% block js_pretrack %}{# include JavaScript that must be run pre GA tracking here #}{% endblock %}
@@ -91,29 +93,25 @@
       data-global-fx-out-of-date-banner-confirm="{{ _('Update Firefox') }}"
       {% block string_data %}{% endblock %}></div>
 
-  {% block site_header %}
-    {% include 'includes/protocol/navigation/menu-mozilla/index.html' %}
-  {% endblock %}
-
-  <div id="outer-wrapper">
-    {% block content %}{% endblock %}
-
-    {% block site_footer %}
-      {% include 'includes/site-footer.html' %}
+    {% block site_header %}
+      {% include 'includes/protocol/navigation/menu-mozilla/index.html' %}
     {% endblock %}
-  </div>
 
-  <!--[if IE 9]>
-    {{ js_bundle('matchmedia') }}
-  <![endif]-->
+    <div id="outer-wrapper">
+      {% block content %}{% endblock %}
+
+      {% block site_footer %}
+        {% include 'includes/site-footer.html' %}
+      {% endblock %}
+    </div>
 
     {% block site_js %}
-      <!--[if !lte IE 8]><!-->
+      <!--[if !IE]><!-->
         {{ js_bundle('common') }}
       <!--<![endif]-->
 
-      <!--[if lte IE 8]>
-        {{ js_bundle('common-ie8') }}
+      <!--[if IE]>
+        {{ js_bundle('common-ie') }}
       <![endif]-->
     {% endblock %}
 
@@ -124,7 +122,7 @@
       {% endif %}
     {% endblock %}
 
-    <!--[if !lte IE 8]><!-->
+    <!--[if !IE]><!-->
     {% block js %}{% endblock %}
 
     {% if self.structured_data()|trim|length %}
diff --git a/bedrock/base/templates/base-protocol.html b/bedrock/base/templates/base-protocol.html
index 432c88f51bb..20c73f8fe11 100644
--- a/bedrock/base/templates/base-protocol.html
+++ b/bedrock/base/templates/base-protocol.html
@@ -13,12 +13,12 @@
 {% endblock %}
 
 {% block site_js %}
-<!--[if !lte IE 8]><!-->
+<!--[if !IE]><!-->
   {{ js_bundle('common-protocol') }}
 <!--<![endif]-->
 
-<!--[if lte IE 8]>
-  {{ js_bundle('common-ie8') }}
+<!--[if IE]>
+  {{ js_bundle('common-ie') }}
 <![endif]-->
 {% endblock %}
 
diff --git a/bedrock/base/templates/base-resp.html b/bedrock/base/templates/base-resp.html
index 95ada5a9515..68f1de0ff98 100644
--- a/bedrock/base/templates/base-resp.html
+++ b/bedrock/base/templates/base-resp.html
@@ -9,7 +9,7 @@
 
     {{ js_bundle('site') }}
 
-    <!--[if !lte IE 8]><!-->
+    <!--[if !IE]><!-->
     {% block experiments %}{% endblock %}
     <!--<![endif]-->
 
@@ -50,26 +50,28 @@
 
     {{ l10n_css() }}
 
-    <!--[if lte IE 8]>
+    <!--[if lt IE 9]>
       {# Only needed for IE before v9 #}
       <script src="{{ static('js/libs/html5shiv.js') }}"></script>
+    <![endif]-->
 
-      {# Basic styles, only for IE8 and lower #}
+    <!--[if IE]>
+      {# Basic styles, only for IE9 and lower #}
       {{ css_bundle('oldIE') }}
     <![endif]-->
 
-    <!--[if !lte IE 8]><!-->
-    {# Global styles, hidden from IE8 and lower #}
+    <!--[if !IE]><!-->
+    {# Global styles, hidden from IE9 and lower #}
     {% block site_css %}
       {{ css_bundle('responsive') }}
     {% endblock %}
 
-    {# Page-specific styles, hidden from IE8 and lower #}
+    {# Page-specific styles, hidden from IE9 and lower #}
     {% block page_css %}{% endblock %}
     <!--<![endif]-->
 
     {% block extrahead %}
-      {# Extra header stuff (scripts, styles, metadata, etc) seen by all browsers. Use the 'page_css' block for CSS you want to hide from IE8 and lower. #}
+      {# Extra header stuff (scripts, styles, metadata, etc) seen by all browsers. Use the 'page_css' block for CSS you want to hide from IE9 and lower. #}
     {% endblock %}
 
     {% block js_pretrack %}{# include JavaScript that must be run pre GA tracking here #}{% endblock %}
@@ -127,17 +129,13 @@
 
     </div><!-- close #outer-wrapper -->
 
-    <!--[if IE 9]>
-      {{ js_bundle('matchmedia') }}
-    <![endif]-->
-
     {% block site_js %}
-      <!--[if !lte IE 8]><!-->
+      <!--[if !IE]><!-->
         {{ js_bundle('common') }}
       <!--<![endif]-->
 
-      <!--[if lte IE 8]>
-        {{ js_bundle('common-ie8') }}
+      <!--[if IE]>
+        {{ js_bundle('common-ie') }}
       <![endif]-->
     {% endblock %}
 
@@ -148,7 +146,7 @@
       {% endif %}
     {% endblock %}
 
-    <!--[if !lte IE 8]><!-->
+    <!--[if !IE]><!-->
     {% block js %}{% endblock %}
 
     {% if self.structured_data()|trim|length %}
diff --git a/bedrock/firefox/templates/firefox/election/index.html b/bedrock/firefox/templates/firefox/election/index.html
index 76908c93c3e..fb548891dc0 100644
--- a/bedrock/firefox/templates/firefox/election/index.html
+++ b/bedrock/firefox/templates/firefox/election/index.html
@@ -18,17 +18,6 @@
 
 {% block body_class %}election{% endblock %}
 
-{% block extrahead %}
-<!--[if lt IE 10]>
-  <style>
-    /* avoid IE9 background calc() bug */
-    .mzp-c-hero.mzp-has-image {
-      background: none !important;
-    }
-  </style>
-<![endif]-->
-{% endblock %}
-
 {% block site_header %}
   {% include 'includes/protocol/navigation/menu-mozilla/index.html' %}
 {% endblock %}
diff --git a/bedrock/firefox/templates/firefox/fights-for-you.de.html b/bedrock/firefox/templates/firefox/fights-for-you.de.html
index d5dda065a5f..3cf336ae7a2 100644
--- a/bedrock/firefox/templates/firefox/fights-for-you.de.html
+++ b/bedrock/firefox/templates/firefox/fights-for-you.de.html
@@ -16,18 +16,6 @@
   {{ css_bundle('fights-for-you') }}
 {% endblock %}
 
-{% block extrahead %}
-<!--[if lt IE 10]>
-  <style>
-    /* avoid IE9 background calc() bug */
-    .fffy-c-hero,
-    .mzp-c-call-out-compact.fffy-c-footer-callout {
-    background: #2A0140 !important;
-  }
-  </style>
-<![endif]-->
-{% endblock %}
-
 {% block body_id %}fights-for-you{% endblock %}
 
 {% block content %}
diff --git a/bedrock/firefox/templates/firefox/fights-for-you.fr.html b/bedrock/firefox/templates/firefox/fights-for-you.fr.html
index a7d929f5df3..fcec3584751 100644
--- a/bedrock/firefox/templates/firefox/fights-for-you.fr.html
+++ b/bedrock/firefox/templates/firefox/fights-for-you.fr.html
@@ -16,18 +16,6 @@
   {{ css_bundle('fights-for-you') }}
 {% endblock %}
 
-{% block extrahead %}
-<!--[if lt IE 10]>
-  <style>
-    /* avoid IE9 background calc() bug */
-    .fffy-c-hero,
-    .mzp-c-call-out-compact.fffy-c-footer-callout {
-    background: #2A0140 !important;
-  }
-  </style>
-<![endif]-->
-{% endblock %}
-
 {% block body_id %}fights-for-you{% endblock %}
 
 {% block content %}
diff --git a/bedrock/firefox/templates/firefox/fights-for-you.html b/bedrock/firefox/templates/firefox/fights-for-you.html
index 3cbceb022d4..06f6597bddc 100644
--- a/bedrock/firefox/templates/firefox/fights-for-you.html
+++ b/bedrock/firefox/templates/firefox/fights-for-you.html
@@ -17,18 +17,6 @@
   {{ css_bundle('fights-for-you') }}
 {% endblock %}
 
-{% block extrahead %}
-<!--[if lt IE 10]>
-  <style>
-    /* avoid IE9 background calc() bug */
-    .fffy-c-hero,
-    .mzp-c-call-out-compact.fffy-c-footer-callout {
-    background: #2A0140 !important;
-  }
-  </style>
-<![endif]-->
-{% endblock %}
-
 {% block body_id %}fights-for-you{% endblock %}
 
 {% block content %}
diff --git a/bedrock/firefox/templates/firefox/home/index-quantum.html b/bedrock/firefox/templates/firefox/home/index-quantum.html
index 283a3338142..f52d2aba8cc 100644
--- a/bedrock/firefox/templates/firefox/home/index-quantum.html
+++ b/bedrock/firefox/templates/firefox/home/index-quantum.html
@@ -21,6 +21,12 @@
   {{ css_bundle('firefox-quantum') }}
 {% endblock %}
 
+{% block extrahead %}
+  <!--[if IE 9]><!-->
+    {{ css_bundle('firefox-home-ie9') }}
+  <!--<![endif]-->
+{% endblock %}
+
 {% block body_id %}firefox-home{% endblock %}
 
 {% block content %}
@@ -84,7 +90,7 @@ <h3>{{ _('Faster Page Loading') }}</h3>
         </li>
       </ul>
 
-      <div class="privacy-section-media">
+      <div class="privacy-section-media is-js-dependent">
         {{ lazy_img(image_url='firefox/home/quantum/private-browsing.png', placeholder_url='firefox/home/quantum/spacer.gif', include_highres_image=True, optional_attributes={'alt': '', 'width': '502', 'height': '325'}) }}
         {{ lazy_img(image_url='firefox/home/quantum/tracking-protection.png', placeholder_url='firefox/home/quantum/spacer.gif', include_highres_image=True, optional_attributes={'alt': '', 'width': '503', 'height': '305'}) }}
       </div>
@@ -111,7 +117,7 @@ <h2 class="section-title"><a href="{{ url('firefox.accounts') }}">{{ _('Sync you
         {% endif %}
       </div>
 
-      <div class="sync-section-image">
+      <div class="sync-section-image is-js-dependent">
         {{ lazy_img(image_url='firefox/home/quantum/sync.png', placeholder_url='firefox/home/quantum/spacer.gif', include_highres_image=True, optional_attributes={'alt': _('Image of Gif shared from desktop to mobile using the Send Tab feature.'), 'width': '788', 'height': '571'}) }}
       </div>
     </div>
@@ -203,7 +209,7 @@ <h2 class="section-title">{{ _('30% lighter than Chrome') }}</h2>
             {% endtrans %}
             </p>
           </div>
-          <div class="key-feature-media image">
+          <div class="key-feature-media image is-js-dependent">
             {{ lazy_img(image_url='firefox/home/quantum/less-memory.png', placeholder_url='firefox/home/quantum/spacer.gif', include_highres_image=True, optional_attributes={'alt': '', 'width': '645', 'height': '400'}) }}
           </div>
         </div>
@@ -225,7 +231,7 @@ <h2 class="section-title"><a href="{{ url('firefox.switch') }}">{{ _('Moving bro
           <a href="{{ url('firefox.switch') }}">{{ _('Learn more') }}</a>
         </div>
       </div>
-      <div class="section-media">
+      <div class="section-media is-js-dependent">
         <a href="{{ url('firefox.switch') }}">
           {{ lazy_img(image_url='firefox/home/quantum/switch-to-firefox.png', placeholder_url='firefox/home/quantum/spacer.gif', include_highres_image=True, optional_attributes={'width': '643', 'height': '377'}) }}
         </a>
diff --git a/bedrock/mozorg/templates/mozorg/contribute/contribute-embed.html b/bedrock/mozorg/templates/mozorg/contribute/contribute-embed.html
index 253d76af45e..58eedb15fb6 100644
--- a/bedrock/mozorg/templates/mozorg/contribute/contribute-embed.html
+++ b/bedrock/mozorg/templates/mozorg/contribute/contribute-embed.html
@@ -12,8 +12,8 @@
 
     <title>Mozilla — {{_('Get Involved: Volunteer Opportunities at Mozilla')}} — mozilla.org</title>
 
-    <!--[if lte IE 8]>
-    <script src="{{ static('js/libs/html5shiv.js') }}"></script>
+    <!--[if lt IE 9]>
+      <script src="{{ static('js/libs/html5shiv.js') }}"></script>
     <![endif]-->
 
     {{ css_bundle('responsive') }}
diff --git a/bedrock/mozorg/templates/mozorg/home/includes/fundraiser.html b/bedrock/mozorg/templates/mozorg/home/includes/fundraiser.html
index da51d6b62d6..464a382c86e 100644
--- a/bedrock/mozorg/templates/mozorg/home/includes/fundraiser.html
+++ b/bedrock/mozorg/templates/mozorg/home/includes/fundraiser.html
@@ -2,7 +2,7 @@
  # License, v. 2.0. If a copy of the MPL was not distributed with this
  # file, You can obtain one at http://mozilla.org/MPL/2.0/. -#}
 
-<aside class="c-fundraiser" id="fundraiser">
+<aside class="c-fundraiser is-js-dependent" id="fundraiser">
   <button type="button" class="c-fundraiser-close" id="fundraiser-close"><span>{{ _('Close') }}</span></button>
   <div class="content mzp-l-content">
     <h2 class="c-fundraiser-title">
diff --git a/docs/browser-support.rst b/docs/browser-support.rst
index c575c0260a6..3460358eadf 100644
--- a/docs/browser-support.rst
+++ b/docs/browser-support.rst
@@ -26,19 +26,19 @@ We deliver enhanced CSS & JS to browsers in our browser support matrix (below).
 
 Basic support consists of no page-specific CSS or JS. Instead, we deliver basic semantic HTML, a universal CSS stylesheet that gets applied to all pages, and a universal JS bundle that only handles downloading Firefox (click a button, get a file), and Google Analytics.
 
-Browser Support Matrix (Updated 20190809)
+Browser Support Matrix (Updated 20190409)
 -----------------------------------------
 
 **The following browsers have enhanced support:**
 
   * All evergreen browsers (Firefox, Chrome, Safari, Edge, Opera, etc.)
-  * IE9 and above.
+  * IE10 and above.
 
 **The following browsers have basic support:**
 
   * All other IE browsers.
 
-Exceptions (Updated 20190809)
+Exceptions (Updated 20190409)
 -----------------------------
 
 Some pages of the website provide critical functionality to older browsers. In particular, the Firefox desktop download funnel enables users on older browsers to get a modern browser. To the extent possible, we try to deliver enhanced experiences to all user agents on these pages.
@@ -48,7 +48,11 @@ Some pages of the website provide critical functionality to older browsers. In p
   * www.mozilla.org/firefox/new/
   * www.mozilla.org/firefox/download/thanks/
 
-Future Support (Updated 20190809)
+.. Note::
+
+    An enhanced experience can be defined as a step above basic support. This can be achieved by delivering extra page-specific CSS or JS to legacy browsers. It does not mean continuing to deliver 1st class support.
+
+Future Support (Updated 20190409)
 ---------------------------------
 
-The audience visiting in IE9 and IE10 is small and growing smaller. In late 2019 these browsers will be moved to the basic support list.
+Since IE10 does not support conditional comments (the mechanism currently used to deliver basic support to old IE browsers), in the future bedrock will adopt a universal JS feature detection snippet. This snippet will be used to limit the execution of JS on older browsers, delivering a better degraded experience.
diff --git a/docs/stub-attribution.rst b/docs/stub-attribution.rst
index 89188a891be..63261ab9cba 100644
--- a/docs/stub-attribution.rst
+++ b/docs/stub-attribution.rst
@@ -82,7 +82,7 @@ the page template where an experiment exists:
 
     {% block stub_attribution %}
       {% if settings.STUB_ATTRIBUTION_RATE %}
-        <!--[if !lte IE 8]><!-->
+        <!--[if !IE]><!-->
         {{ js_bundle('stub-attribution-custom') }}
         {{ js_bundle('my-page-experiment-script') }}
         <!--<![endif]-->
diff --git a/gulpfile.js b/gulpfile.js
index 693f7206d87..1baf3b3fa5e 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -295,7 +295,13 @@ function jsWatch(cb) {
  */
 function cssMinify() {
     return gulp.src(finalDir + '/css/**/*.css', {base: buildDir})
-        .pipe(cleanCSS().on('error', handleError('CLEANCSS')))
+        .pipe(cleanCSS({
+            compatibility: {
+                properties: {
+                    iePrefixHack: true, // controls keeping IE prefix hack used in oldIE.scss
+                },
+            }
+        }).on('error', handleError('CLEANCSS')))
         .pipe(gulp.dest(finalDir));
 }
 
diff --git a/media/css/firefox/home/ie9.scss b/media/css/firefox/home/ie9.scss
new file mode 100644
index 00000000000..29a4a1c795f
--- /dev/null
+++ b/media/css/firefox/home/ie9.scss
@@ -0,0 +1,7 @@
+// 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 http://mozilla.org/MPL/2.0/.
+
+@import '../../pebbles/includes/lib';
+@import 'includes/header';
+
diff --git a/media/css/firefox/home/includes/_header.scss b/media/css/firefox/home/includes/_header.scss
new file mode 100644
index 00000000000..414a03642d5
--- /dev/null
+++ b/media/css/firefox/home/includes/_header.scss
@@ -0,0 +1,104 @@
+// 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 http://mozilla.org/MPL/2.0/.
+
+@import '../../../pebbles/includes/lib';
+
+/* -------------------------------------------------------------------------- */
+// Main page header
+
+.main-header-section {
+
+    h1 {
+        @include at2x('/media/img/logos/firefox/logo-quantum.png', 90px, 90px);
+        @include font-size-level2;
+        background-position: top center;
+        background-repeat: no-repeat;
+        color: #000;
+        margin: 0 auto 10px;
+        padding-top: 110px;
+    }
+
+    h2 {
+        @include font-size-level3;
+        margin-top: 20px;
+    }
+
+    h3 {
+        @include font-size-level3;
+    }
+
+    .download-button {
+        margin: 40px 0;
+    }
+
+    .fx-privacy-link a {
+        color: #000;
+    }
+
+    @media #{$mq-tablet} {
+        position: relative;
+        min-height: 550px;
+        text-align: left;
+        padding-top: 40px;
+
+        h1 {
+            background-position: left center;
+            margin: -40px 0 10px;
+            padding: 40px 0 40px 110px;
+        }
+
+        .header-content {
+            float: left;
+            width: 55%;
+        }
+
+        .header-image {
+            margin-bottom: 0;
+            position: absolute;
+            right: 0;
+            top: 20px;
+            width: 45%;
+
+            img {
+                display: block;
+                height: auto;
+                max-width: none;
+                width: 903px;
+            }
+        }
+    }
+
+    @media #{$mq-desktop-wide} {
+        padding-top: 80px;
+
+        .header-content {
+            width: 43%;
+        }
+
+        .header-image {
+            width: 57%;
+        }
+    }
+}
+
+html[dir="rtl"] .main-header-section {
+
+    @media #{$mq-tablet} {
+
+        h1 {
+            background-position: right center;
+            padding: 40px 110px 40px 0;
+        }
+
+        .header-content {
+            float: right;
+            text-align: right;
+        }
+
+        .header-image {
+            left: 0;
+            right: auto;
+        }
+    }
+}
diff --git a/media/css/firefox/home/quantum.scss b/media/css/firefox/home/quantum.scss
index ddc0bf37be3..6086c0a9420 100644
--- a/media/css/firefox/home/quantum.scss
+++ b/media/css/firefox/home/quantum.scss
@@ -3,6 +3,7 @@
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 @import '../../pebbles/includes/lib';
+@import 'includes/header';
 @import '../../pebbles/components/video-poster';
 @import '../../hubs/sections';
 @import '../../hubs/sub-nav';
@@ -75,104 +76,6 @@ body {
     }
 }
 
-/* -------------------------------------------------------------------------- */
-// Main page header
-
-.main-header-section {
-
-    h1 {
-        @include at2x('/media/img/logos/firefox/logo-quantum.png', 90px, 90px);
-        @include font-size-level2;
-        background-position: top center;
-        background-repeat: no-repeat;
-        color: #000;
-        margin: 0 auto 10px;
-        padding-top: 110px;
-    }
-
-    h2 {
-        @include font-size-level3;
-        margin-top: 20px;
-    }
-
-    h3 {
-        @include font-size-level3;
-    }
-
-    .download-button {
-        margin: 40px 0;
-    }
-
-    .fx-privacy-link a {
-        color: #000;
-    }
-
-    @media #{$mq-tablet} {
-        min-height: 550px;
-        text-align: left;
-        padding-top: 40px;
-
-        h1 {
-            background-position: left center;
-            margin: -40px 0 10px;
-            padding: 40px 0 40px 110px;
-        }
-
-        .header-content {
-            float: left;
-            width: 55%;
-        }
-
-        .header-image {
-            margin-bottom: 0;
-            position: absolute;
-            right: 0;
-            top: 20px;
-            width: 45%;
-
-            img {
-                display: block;
-                height: auto;
-                max-width: none;
-                width: 903px;
-            }
-        }
-    }
-
-    @media #{$mq-desktop-wide} {
-        padding-top: 80px;
-
-        .header-content {
-            width: 43%;
-        }
-
-        .header-image {
-            width: 57%;
-        }
-    }
-}
-
-html[dir="rtl"] .main-header-section {
-
-    @media #{$mq-tablet} {
-
-        h1 {
-            background-position: right center;
-            padding: 40px 110px 40px 0;
-        }
-
-        .header-content {
-            float: right;
-            text-align: right;
-        }
-
-        .header-image {
-            left: 0;
-            right: auto;
-        }
-    }
-}
-
 /* -------------------------------------------------------------------------- */
 // Key features section
 
diff --git a/media/js/firefox/new/scene2.js b/media/js/firefox/new/scene2.js
index d53409824d2..71fbadcf94e 100644
--- a/media/js/firefox/new/scene2.js
+++ b/media/js/firefox/new/scene2.js
@@ -5,7 +5,6 @@
 (function($) {
     'use strict';
 
-    var isIELT9 = window.Mozilla.Client.platform === 'windows' && /MSIE\s[1-8]\./.test(navigator.userAgent);
     var $directDownloadLink = $('#direct-download-link');
     var $platformLink = $('#download-button-wrapper-desktop .download-list li:visible .download-link');
     var downloadURL;
@@ -21,16 +20,13 @@
         // TODO: Remove and generate link in bedrock.
         $directDownloadLink.attr('href', downloadURL);
 
-        // If user is not on an IE that blocks JS triggered downloads, start the
-        // platform-detected download a second after DOM ready event. We don't rely on
-        // the window load event as we have third-party tracking pixels.
-        if (!isIELT9) {
-            $(function() {
-                setTimeout(function() {
-                    window.location.href = downloadURL;
-                }, 1000);
-            });
-        }
+        // Start the platform-detected download a second after DOM ready event.
+        // We don't rely on the window load event as we have third-party tracking pixels.
+        $(function() {
+            setTimeout(function() {
+                window.location.href = downloadURL;
+            }, 1000);
+        });
     }
 
 })(window.jQuery);
diff --git a/media/js/ie8/base-page-init-ie8.js b/media/js/ie/base-page-init-ie.js
similarity index 85%
rename from media/js/ie8/base-page-init-ie8.js
rename to media/js/ie/base-page-init-ie.js
index 587d9cf5139..f414d93abdc 100644
--- a/media/js/ie8/base-page-init-ie8.js
+++ b/media/js/ie/base-page-init-ie.js
@@ -9,10 +9,10 @@ $(document).ready(function() {
     'use strict';
 
     // Initialize download buttons.
-    Mozilla.UtilsIE8.initDownloadLinks();
+    Mozilla.UtilsIE.initDownloadLinks();
 
     // Initialize navigation.
-    Mozilla.UtilsIE8.initNavigation();
+    Mozilla.UtilsIE.initNavigation();
 
     $(window).on('load', function() {
         $('html').addClass('loaded');
diff --git a/media/js/ie8/mozilla-utils-ie8.js b/media/js/ie/mozilla-utils-ie.js
similarity index 67%
rename from media/js/ie8/mozilla-utils-ie8.js
rename to media/js/ie/mozilla-utils-ie.js
index cea47e5be1f..22060734bae 100644
--- a/media/js/ie8/mozilla-utils-ie8.js
+++ b/media/js/ie/mozilla-utils-ie.js
@@ -10,18 +10,15 @@ if (typeof window.Mozilla === 'undefined') {
 (function() {
     'use strict';
 
-    var UtilsIE8 = {};
+    var UtilsIE = {};
 
     /**
-     * Bug 393263 A special function for IE < 9.
+     * Bug 393263 A special function for legacy IE.
      * Without this hack there is no prompt to download after they click. sigh.
      * @param {link} direct link to download URL
-     * @param {userAgent} optional UA string for testing purposes.
      */
-    UtilsIE8.triggerIEDownload = function(link, userAgent) {
-        var ua = userAgent !== undefined ? userAgent : navigator.userAgent;
-        // Only open if we got a link and this is IE < 9.
-        if (link && window.site.platform === 'windows' && /MSIE\s[1-8]\./.test(ua)) {
+    UtilsIE.triggerIEDownload = function(link) {
+        if (link) {
             window.open(link, 'download_window', 'toolbar=0,location=no,directories=0,status=0,scrollbars=0,resizeable=0,width=1,height=1,top=0,left=0');
             window.focus();
         }
@@ -29,17 +26,17 @@ if (typeof window.Mozilla === 'undefined') {
 
     // attach an event to all the download buttons to trigger the special
     // ie functionality if on ie
-    UtilsIE8.initDownloadLinks = function() {
+    UtilsIE.initDownloadLinks = function() {
         $('.download-link').each(function() {
             var $el = $(this);
             $el.click(function() {
-                UtilsIE8.triggerIEDownload($el.data('direct-link'));
+                UtilsIE.triggerIEDownload($el.data('direct-link'));
             });
         });
         $('.download-list').attr('role', 'presentation');
     };
 
-    UtilsIE8.initNavigation = function() {
+    UtilsIE.initNavigation = function() {
         $('.mzp-c-navigation-menu-button').on('click', function(e) {
             e.preventDefault();
             var $menuButton = $(e.target);
@@ -48,6 +45,6 @@ if (typeof window.Mozilla === 'undefined') {
         });
     };
 
-    window.Mozilla.UtilsIE8 = UtilsIE8;
+    window.Mozilla.UtilsIE = UtilsIE;
 
 })();
diff --git a/media/js/libs/matchMedia.addListener.js b/media/js/libs/matchMedia.addListener.js
deleted file mode 100644
index 11a7f89e738..00000000000
--- a/media/js/libs/matchMedia.addListener.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/*! matchMedia() polyfill addListener/removeListener extension. Author & copyright (c) 2012: Scott Jehl. Dual MIT/BSD license */
-(function(){
-	// monkeypatch unsupported addListener/removeListener with polling
-	if( !window.matchMedia( "all" ).addListener ){
-		var oldMM = window.matchMedia;
-		
-		window.matchMedia = function( q ){
-			var ret = oldMM( q ),
-				listeners = [],
-				last = ret.matches,
-				timer,
-				check = function(){
-					var list = oldMM( q ),
-						unmatchToMatch = list.matches && !last,
-						matchToUnmatch = !list.matches && last;
-                                                
-                                        //fire callbacks only if transitioning to or from matched state
-					if( unmatchToMatch || matchToUnmatch ){
-						for( var i =0, il = listeners.length; i< il; i++ ){
-							listeners[ i ].call( ret, list );
-						}
-					}
-					last = list.matches;
-				};
-			
-			ret.addListener = function( cb ){
-				listeners.push( cb );
-				if( !timer ){
-					timer = setInterval( check, 1000 );
-				}
-			};
-
-			ret.removeListener = function( cb ){
-				for( var i =0, il = listeners.length; i< il; i++ ){
-					if( listeners[ i ] === cb ){
-						listeners.splice( i, 1 );
-					}
-				}
-				if( !listeners.length && timer ){
-					clearInterval( timer );
-				}
-			};
-			
-			return ret;
-		};
-	}
-}());
diff --git a/media/js/libs/matchMedia.js b/media/js/libs/matchMedia.js
deleted file mode 100644
index 70c0acfb835..00000000000
--- a/media/js/libs/matchMedia.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */
-
-window.matchMedia = window.matchMedia || (function( doc, undefined ) {
-
-  "use strict";
-
-  var bool,
-      docElem = doc.documentElement,
-      refNode = docElem.firstElementChild || docElem.firstChild,
-      // fakeBody required for <FF4 when executed in <head>
-      fakeBody = doc.createElement( "body" ),
-      div = doc.createElement( "div" );
-
-  div.id = "mq-test-1";
-  div.style.cssText = "position:absolute;top:-100em";
-  fakeBody.style.background = "none";
-  fakeBody.appendChild(div);
-
-  return function(q){
-
-    div.innerHTML = "&shy;<style media=\"" + q + "\"> #mq-test-1 { width: 42px; }</style>";
-
-    docElem.insertBefore( fakeBody, refNode );
-    bool = div.offsetWidth === 42;
-    docElem.removeChild( fakeBody );
-
-    return {
-      matches: bool,
-      media: q
-    };
-
-  };
-
-}( document ));
diff --git a/media/static-bundles.json b/media/static-bundles.json
index 9e8df4c1d97..55d3b5513cc 100644
--- a/media/static-bundles.json
+++ b/media/static-bundles.json
@@ -667,6 +667,12 @@
       ],
       "name": "firefox-quantum"
     },
+    {
+      "files": [
+        "css/firefox/home/ie9.scss"
+      ],
+      "name": "firefox-home-ie9"
+    },
     {
       "files": [
         "css/mozorg/book.scss"
@@ -1358,14 +1364,14 @@
     {
       "files": [
         "js/libs/jquery-1.11.3.min.js",
-        "js/ie8/mozilla-utils-ie8.js",
+        "js/ie/mozilla-utils-ie.js",
         "js/base/mozilla-client.js",
-        "js/ie8/base-page-init-ie8.js",
+        "js/ie/base-page-init-ie.js",
         "js/base/core-datalayer.js",
         "js/base/core-datalayer-init.js",
         "js/base/search-params.js"
       ],
-      "name": "common-ie8"
+      "name": "common-ie"
     },
     {
       "files": [
@@ -1552,13 +1558,6 @@
       ],
       "name": "basic-article"
     },
-    {
-      "files": [
-        "js/libs/matchMedia.js",
-        "js/libs/matchMedia.addListener.js"
-      ],
-      "name": "matchmedia"
-    },
     {
       "files": [
         "js/libs/modernizr.custom.inputtypes.js",
diff --git a/tests/functional/firefox/features/test_landing.py b/tests/functional/firefox/features/test_landing.py
index 22dd6990c2b..aec48337e74 100644
--- a/tests/functional/firefox/features/test_landing.py
+++ b/tests/functional/firefox/features/test_landing.py
@@ -7,7 +7,6 @@
 from pages.firefox.features.landing import FeaturesLandingPage
 
 
-@pytest.mark.sanity
 @pytest.mark.nondestructive
 def test_download_button_is_displayed(base_url, selenium):
     page = FeaturesLandingPage(selenium, base_url).open()
diff --git a/tests/functional/firefox/test_developer.py b/tests/functional/firefox/test_developer.py
index 0e423f0e131..84bfdc7fc64 100644
--- a/tests/functional/firefox/test_developer.py
+++ b/tests/functional/firefox/test_developer.py
@@ -7,7 +7,6 @@
 from pages.firefox.developer import DeveloperPage
 
 
-@pytest.mark.sanity
 @pytest.mark.nondestructive
 def test_download_buttons_are_displayed(base_url, selenium):
     page = DeveloperPage(selenium, base_url).open()
diff --git a/tests/unit/karma.conf.js b/tests/unit/karma.conf.js
index 2d6911878c9..c46806d3bf1 100644
--- a/tests/unit/karma.conf.js
+++ b/tests/unit/karma.conf.js
@@ -37,7 +37,7 @@ module.exports = function(config) {
             'media/js/firefox/all/all-downloads-unified.js',
             'media/js/firefox/new/yandex/scene1.js',
             'media/js/firefox/tracking-protection-tour.js',
-            'media/js/ie8/mozilla-utils-ie8.js',
+            'media/js/ie/mozilla-utils-ie.js',
             'tests/unit/spec/base/core-datalayer-page-id.js',
             'tests/unit/spec/base/core-datalayer.js',
             'tests/unit/spec/base/dnt-helper.js',
@@ -61,7 +61,7 @@ module.exports = function(config) {
             'tests/unit/spec/firefox/all/all-downloads-unified.js',
             'tests/unit/spec/firefox/new/yandex/scene1.js',
             'tests/unit/spec/firefox/tracking-protection-tour.js',
-            'tests/unit/spec/ie8/mozilla-utils-ie8.js',
+            'tests/unit/spec/ie/mozilla-utils-ie.js',
             {
                 pattern: 'node_modules/sinon/pkg/sinon.js',
                 watched: false,
diff --git a/tests/unit/spec/ie/mozilla-utils-ie.js b/tests/unit/spec/ie/mozilla-utils-ie.js
new file mode 100644
index 00000000000..a0cbafad2b0
--- /dev/null
+++ b/tests/unit/spec/ie/mozilla-utils-ie.js
@@ -0,0 +1,42 @@
+/* For reference read the Jasmine and Sinon docs
+ * Jasmine docs: http://pivotal.github.io/jasmine/
+ * Sinon docs: http://sinonjs.org/docs/
+ */
+
+/* global sinon */
+
+describe('mozilla-utils-ie.js', function() {
+
+    'use strict';
+
+    describe('triggerIEDownload', function () {
+
+        it('should open a popup to start the download', function () {
+            window.open = sinon.stub();
+            Mozilla.UtilsIE.triggerIEDownload('foo');
+            expect(window.open.called).toBeTruthy();
+        });
+    });
+
+    describe('initDownloadLinks', function () {
+
+        /* Append an HTML fixture to the document body
+         * for each test in the scope of this suite */
+        beforeEach(function () {
+            $('<a class="download-link" data-direct-link="bar">foo</a>').appendTo('body');
+        });
+
+        /* Then after each test remove the fixture */
+        afterEach(function() {
+            $('.download-link').remove();
+        });
+
+        it('should call triggerIEDownload when clicked', function () {
+            spyOn(Mozilla.UtilsIE, 'triggerIEDownload');
+            Mozilla.UtilsIE.initDownloadLinks();
+            $('.download-link').trigger('click');
+            expect(Mozilla.UtilsIE.triggerIEDownload).toHaveBeenCalled();
+        });
+
+    });
+});
diff --git a/tests/unit/spec/ie8/mozilla-utils-ie8.js b/tests/unit/spec/ie8/mozilla-utils-ie8.js
deleted file mode 100644
index 7a3824d06f9..00000000000
--- a/tests/unit/spec/ie8/mozilla-utils-ie8.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/* For reference read the Jasmine and Sinon docs
- * Jasmine docs: http://pivotal.github.io/jasmine/
- * Sinon docs: http://sinonjs.org/docs/
- */
-
-/* global sinon */
-
-describe('mozilla-utils.js', function() {
-
-    'use strict';
-
-    describe('triggerIEDownload', function () {
-
-        beforeEach(function() {
-            window.site.platform = 'windows';
-        });
-
-        afterEach(function() {
-            window.site.platform = 'other';
-        });
-
-        it('should open a popup for IE < 9', function () {
-            var userAgent = 'Mozilla/5.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; GTB7.4; InfoPath.2; SV1; .NET CLR 3.3.69573; WOW64; en-US)';
-            window.open = sinon.stub();
-            Mozilla.UtilsIE8.triggerIEDownload('foo', userAgent);
-            expect(window.open.called).toBeTruthy();
-        });
-
-        it('should not open a popup for IE 9', function () {
-            var userAgent = 'Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 7.1; Trident/5.0)';
-            window.open = sinon.stub();
-            Mozilla.UtilsIE8.triggerIEDownload('foo', userAgent);
-            expect(window.open.called).not.toBeTruthy();
-        });
-
-        it('should not open a popup for other browsers', function () {
-            var userAgent = 'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2228.0 Safari/537.36';
-            window.open = sinon.stub();
-            Mozilla.UtilsIE8.triggerIEDownload('foo', userAgent);
-            expect(window.open.called).not.toBeTruthy();
-        });
-
-    });
-
-    describe('initDownloadLinks', function () {
-
-        /* Append an HTML fixture to the document body
-         * for each test in the scope of this suite */
-        beforeEach(function () {
-            $('<a class="download-link" data-direct-link="bar">foo</a>').appendTo('body');
-        });
-
-        /* Then after each test remove the fixture */
-        afterEach(function() {
-            $('.download-link').remove();
-        });
-
-        it('should call triggerIEDownload when clicked', function () {
-            spyOn(Mozilla.UtilsIE8, 'triggerIEDownload');
-            Mozilla.UtilsIE8.initDownloadLinks();
-            $('.download-link').trigger('click');
-            expect(Mozilla.UtilsIE8.triggerIEDownload).toHaveBeenCalled();
-        });
-
-    });
-});