From 15aaf0013b0a4f21ab8a70672df72f0dbd548a85 Mon Sep 17 00:00:00 2001
From: Alex Gibson <alexgibson@users.noreply.github.com>
Date: Mon, 29 Jul 2019 11:07:39 +0100
Subject: [PATCH 1/2] Update universal CSS for legacy IE browsers (Fixes #7390)

---
 .../includes/protocol/navigation/index.html   |   2 +-
 bedrock/base/templates/includes/sub-nav.html  |   2 +-
 .../templates/firefox/accounts-2019.html      |   2 +-
 .../mozorg/templates/mozorg/home/home-en.html |   4 +-
 .../mozorg/home/includes/macros.html          |   6 +-
 media/css/pebbles/base/oldIE.scss             |  53 +++++-
 .../protocol/components/_navigation-ie.scss   | 154 ++++++++++++++++++
 media/css/protocol/oldIE.scss                 |  30 ++--
 media/css/sandstone/old-ie.scss               |  43 +++++
 media/img/nav/logo-black.png                  | Bin 0 -> 991 bytes
 media/img/nav/menu.png                        | Bin 0 -> 118 bytes
 media/js/ie8/base-page-init-ie8.js            |   6 +-
 media/js/ie8/mozilla-utils-ie8.js             |   9 +
 media/static-bundles.json                     |   3 +-
 14 files changed, 282 insertions(+), 32 deletions(-)
 create mode 100644 media/css/protocol/components/_navigation-ie.scss
 create mode 100644 media/css/sandstone/old-ie.scss
 create mode 100755 media/img/nav/logo-black.png
 create mode 100755 media/img/nav/menu.png

diff --git a/bedrock/base/templates/includes/protocol/navigation/index.html b/bedrock/base/templates/includes/protocol/navigation/index.html
index a2cdacbf419..75c20b6d64c 100644
--- a/bedrock/base/templates/includes/protocol/navigation/index.html
+++ b/bedrock/base/templates/includes/protocol/navigation/index.html
@@ -4,7 +4,7 @@
 
 {% from "macros.html" import fxa_link_fragment with context %}
 
-<div class="mzp-c-navigation">
+<div class="mzp-c-navigation top-header-navigation">
   <div class="mzp-c-navigation-l-content">
     <div class="mzp-c-navigation-container">
       <button class="mzp-c-navigation-menu-button" type="button" aria-controls="mzp-c-navigation-items">{{ _('Menu') }}</button>
diff --git a/bedrock/base/templates/includes/sub-nav.html b/bedrock/base/templates/includes/sub-nav.html
index 205530002d7..26cb1615b76 100644
--- a/bedrock/base/templates/includes/sub-nav.html
+++ b/bedrock/base/templates/includes/sub-nav.html
@@ -3,7 +3,7 @@
  # file, You can obtain one at http://mozilla.org/MPL/2.0/. -#}
 
 {# hidden for screens smaller than 880px wide #}
-<nav class="moz-sub-nav {% block sub_nav_class %}{% endblock %}" role="navigation">
+<nav class="moz-sub-nav {% block sub_nav_class %}{% endblock %} is-js-dependent" role="navigation">
   <div class="nav-horizontal-menu-container">
     <div class="nav-horizontal-menu">
       <div class="sub-nav-primary-links-container">
diff --git a/bedrock/firefox/templates/firefox/accounts-2019.html b/bedrock/firefox/templates/firefox/accounts-2019.html
index e43093ea3fa..b9940609b35 100644
--- a/bedrock/firefox/templates/firefox/accounts-2019.html
+++ b/bedrock/firefox/templates/firefox/accounts-2019.html
@@ -56,7 +56,7 @@ <h1 class="c-accounts-hero-title">{{ _('There is a way to protect your privacy.
     </div>
 
     {% if has_signed_in_copy %}
-    <div class="c-accounts-hero-body c-accounts-hero-body-signed-in">
+    <div class="c-accounts-hero-body c-accounts-hero-body-signed-in is-js-dependent">
       {# L10n: the span here is to display the phrase "Now try Firefox Monitor." in a different color. Line breaks are for visual formatting. #}
       <h2 class="c-accounts-hero-title">{{ _('You’re signed <br>in to Firefox. <br><span>Now try Firefox Monitor.</span>') }}</h2>
 
diff --git a/bedrock/mozorg/templates/mozorg/home/home-en.html b/bedrock/mozorg/templates/mozorg/home/home-en.html
index 2e8f48e9e56..5e217dff87e 100644
--- a/bedrock/mozorg/templates/mozorg/home/home-en.html
+++ b/bedrock/mozorg/templates/mozorg/home/home-en.html
@@ -48,7 +48,7 @@
 {% block content %}
 {% block main %}
 <main>
-  <header class="main-page-heading">
+  <header class="main-page-heading visually-hidden">
     {# Main page h1 is hidden from view and exists mainly for SEO purposes #}
     <h1>{{ self.page_title() }}</h1>
   </header>
@@ -197,7 +197,7 @@ <h3 class="section-heading">{{ _('What we’re reading:') }}</h3>
   {% call call_out_compact(
     title=_('The account that protects you rather than profits off you.'),
     desc=None,
-    class='fxaccount-secondary-cta mzp-t-product-firefox mzp-t-firefox mzp-t-dark',
+    class='fxaccount-secondary-cta mzp-t-product-firefox mzp-t-firefox mzp-t-dark is-js-dependent',
     heading_level=2
   ) %}
     <a href="{{ url('firefox.accounts') }}" class="mzp-c-button mzp-t-secondary mzp-t-dark" id="fxa-learn-secondary">{{ _('Learn More') }}</a>
diff --git a/bedrock/mozorg/templates/mozorg/home/includes/macros.html b/bedrock/mozorg/templates/mozorg/home/includes/macros.html
index 4424df20e93..81c7f57389a 100644
--- a/bedrock/mozorg/templates/mozorg/home/includes/macros.html
+++ b/bedrock/mozorg/templates/mozorg/home/includes/macros.html
@@ -19,7 +19,7 @@ <h3 class="c-primary-cta-title-sub">{{ sub_title }}</h3>
 {%- endmacro %}
 
 {% macro download_banner_sticky(title, sub_title, desc) -%}
-<section id="download-firefox-sticky-cta" class="c-sticky-cta download-firefox-sticky-cta mzp-t-firefox">
+<section id="download-firefox-sticky-cta" class="c-sticky-cta download-firefox-sticky-cta mzp-t-firefox is-js-dependent">
   <div class="mzp-l-content">
     <div class="c-sticky-cta-wrapper">
       <h2 class="c-sticky-cta-title">{{ title }}</h2>
@@ -50,7 +50,7 @@ <h2 class="c-secondary-cta-title">{{ title }}</h2>
 {%- endmacro %}
 
 {% macro fxa_banner(logo_title, title, sub_title, link_cta) -%}
-<section id="fxaccount-primary-cta" class="c-primary-cta fxaccount-primary-cta mzp-t-firefox">
+<section id="fxaccount-primary-cta" class="c-primary-cta fxaccount-primary-cta mzp-t-firefox is-js-dependent">
   <div class="mzp-l-content">
     <div class="c-primary-cta-wrapper">
       <h2 class="c-primary-cta-logo">{{ logo_title }}</h2>
@@ -67,7 +67,7 @@ <h4 class="c-primary-cta-title-sub">{{ sub_title }}</h4>
 {%- endmacro %}
 
 {% macro fxa_banner_sticky(title, sub_title, link_cta) -%}
-<section id="fxaccount-sticky-cta" class="c-sticky-cta fxaccount-sticky-cta mzp-t-firefox">
+<section id="fxaccount-sticky-cta" class="c-sticky-cta fxaccount-sticky-cta mzp-t-firefox is-js-dependent">
   <div class="mzp-l-content">
     <div class="c-sticky-cta-wrapper">
       <h2 class="c-sticky-cta-title">{{ title }}</h2>
diff --git a/media/css/pebbles/base/oldIE.scss b/media/css/pebbles/base/oldIE.scss
index 7eb451343b1..4fc95e90dfd 100644
--- a/media/css/pebbles/base/oldIE.scss
+++ b/media/css/pebbles/base/oldIE.scss
@@ -5,11 +5,21 @@
 // This style sheet is served exclusively to Internet Explorer 8 and older.
 // Old versions get this minimal style while IE9 and up recieve more advanced styling.
 
-@import
-    '../includes/lib',
-    'elements',
-    '../components/buttons',
-    '../components/buttons-download';
+@import '../includes/lib';
+@import 'elements';
+@import '../components/buttons';
+@import '../components/buttons-download';
+@import '../../protocol/components/navigation-ie';
+@import '../../protocol/components/navigation';
+@import '../../../protocol/css/base/elements/sections';
+
+.content {
+    @include border-box;
+    margin: 0 auto;
+    padding: 20px 0;
+    min-width: $width-phone;
+    width: $width-desktop-wide;
+}
 
 // An arbitrary container for translatable strings to use in scripts
 #strings {
@@ -54,3 +64,36 @@ label {
 .hidden {
     @include hidden;
 }
+
+.is-js-dependent {
+    display: none;
+}
+
+/**
+ * Pebbles specific overrides for download button in main navigation.
+ */
+ .mzp-c-navigation-download {
+    .download-button {
+        .download-link {
+            background-color: transparent;
+            background-image: none;
+            border-radius: 2px;
+            color: #12bc00;
+            border: 2px solid #12bc00;
+            box-shadow: none;
+            line-height: 1.125;
+            padding: $spacing-sm $spacing-md;
+
+            &:hover,
+            &:focus {
+                background-color: #12bc00;
+                border-color: #12bc00;
+                color: $color-white;
+            }
+        }
+
+        .fx-privacy-link {
+            display: none;
+        }
+    }
+}
diff --git a/media/css/protocol/components/_navigation-ie.scss b/media/css/protocol/components/_navigation-ie.scss
new file mode 100644
index 00000000000..a1362cd0cc2
--- /dev/null
+++ b/media/css/protocol/components/_navigation-ie.scss
@@ -0,0 +1,154 @@
+// 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/.
+
+$font-path: '/media/fonts';
+$image-path: '/media/protocol/img';
+
+@import '../../../protocol/css/includes/lib';
+
+/* -------------------------------------------------------------------------- */
+// Navigation styles
+
+.top-header-navigation {
+    background: $color-white;
+    color: $color-black;
+    margin-bottom: $layout-lg;
+
+    .mzp-c-navigation-l-content {
+        padding: $layout-xs;
+    }
+
+    .mzp-c-navigation-container {
+        @include clearfix;
+        margin: 0 auto;
+        max-width: $content-max;
+        position: relative;
+    }
+
+    // Mozilla Logo
+    .mzp-c-navigation-logo {
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 112px;
+
+        a {
+            @include image-replaced;
+            background-image: url('/media/img/nav/logo-black.png');
+            background-repeat: no-repeat;
+            display: block;
+            height: 32px;
+            margin: 0 auto;
+            width: 112px;
+        }
+    }
+
+    // Download button
+    .mzp-c-navigation-download {
+        display: inline-block;
+        *display: inline;
+        margin: 0;
+        position: absolute;
+        right: 0;
+        text-align: center;
+        top: 0;
+        zoom: 1;
+
+        .mzp-c-button-download-container {
+            display: inline-block;
+            *display: inline;
+            margin-bottom: 0;
+            zoom: 1;
+
+            // hide privacy link
+            .mzp-c-button-download-privacy-link {
+                display: none;
+            }
+        }
+
+        // hide FxA button
+        .c-navigation-fxa-cta-container {
+            display: none;
+        }
+    }
+
+    // Nav buttom
+    .mzp-c-navigation-menu-button {
+        @include image-replaced;
+        background-color: transparent;
+        background-image: url('/media/img/nav/menu.png');
+        background-position-x: center;
+        background-position-y: center;
+        background-repeat: no-repeat;
+        border-radius: 4px;
+        border: none;
+        display: none;
+        height: 32px;
+        left: 120px;
+        padding: 1px 2px;
+        position: absolute;
+        top: 0;
+        width: 28px;
+
+        &:hover,
+        &:active,
+        &:focus,
+        &.mzp-is-active  {
+            background-color: $color-gray-20;
+        }
+    }
+
+    .mzp-c-navigation-items {
+        margin-top: $layout-xs;
+    }
+
+    // hide panel close buttons
+    .mzp-c-menu-button-close {
+        display: none;
+    }
+
+    .mzp-c-menu-title {
+        display: inline-block;
+        *display: inline;
+        font-weight: bold;
+        margin-bottom: $spacing-xl;
+        zoom: 1;
+    }
+
+    .mzp-c-menu-category {
+        margin-bottom: $spacing-2xl;
+    }
+
+    // hide cards
+    .mzp-c-menu-panel-card {
+        display: none;
+    }
+
+    .mzp-c-navigation-menu {
+        display: none;
+        position: relative;
+        top: $layout-lg;
+
+        ul {
+            list-style-type: none;
+            margin: 0 0 $spacing-lg;
+            padding: 0;
+
+            li {
+                margin: 0;
+                padding: 0;
+            }
+        }
+
+        .mzp-c-menu-panel {
+            padding-left: $spacing-xl;
+        }
+    }
+}
+
+.js .top-header-navigation {
+    .mzp-c-navigation-menu-button {
+        display: block;
+    }
+}
diff --git a/media/css/protocol/oldIE.scss b/media/css/protocol/oldIE.scss
index 45a17918769..7d3cdb02a34 100644
--- a/media/css/protocol/oldIE.scss
+++ b/media/css/protocol/oldIE.scss
@@ -5,10 +5,15 @@
 // This style sheet is served exclusively to Internet Explorer 8 and older.
 // Old versions get this minimal style while IE9 and up recieve more advanced styling.
 
+$font-path: '/media/fonts';
+$image-path: '/media/protocol/img';
+
 @import '../../protocol/css/includes/lib';
 @import '../../protocol/css/base/elements';
 @import '../../protocol/css/components/button';
 
+@import 'components/navigation-ie';
+@import 'components/navigation';
 @import 'components/download-button';
 
 // An arbitrary container for translatable strings to use in scripts
@@ -32,21 +37,6 @@ label {
     display: block;
 }
 
-.masthead .toggle {
-    display: none; /* oldIE never gets a mobile menu. */
-}
-
-/* oldIE never gets slide out drawer */
-.moz-global-nav {
-    .nav-button-menu {
-        display: none;
-    }
-}
-
-.moz-global-nav-drawer {
-    display: none;
-}
-
 .visually-hidden {
     @include visually-hidden;
 }
@@ -55,8 +45,16 @@ label {
     @include hidden;
 }
 
-// Make sure form details are visible
+.is-js-dependent {
+    display: none;
+}
+
+/* Make sure form details are visible */
 /* stylelint-disable declaration-no-important  */
 .js .mzp-c-newsletter-details {
     display: block !important;
 }
+
+.mzp-c-newsletter-thanks {
+    display: none;
+}
diff --git a/media/css/sandstone/old-ie.scss b/media/css/sandstone/old-ie.scss
new file mode 100644
index 00000000000..9876e48013b
--- /dev/null
+++ b/media/css/sandstone/old-ie.scss
@@ -0,0 +1,43 @@
+// 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/.
+
+$font-path: '/media/fonts';
+$image-path: '/media/protocol/img';
+
+@import '../protocol/components/navigation-ie';
+@import '../protocol/components/navigation';
+@import '../../protocol/css/base/elements/sections';
+
+/**
+ * Sandstone specific overrides for download button in main navigation.
+ */
+.mzp-c-navigation-download {
+    .download-button {
+        .download-link {
+            background-color: transparent;
+            background-image: none;
+            border-radius: 2px;
+            color: #12bc00;
+            border: 2px solid #12bc00;
+            box-shadow: none;
+            line-height: 1.125;
+            padding: $spacing-sm $spacing-md;
+
+            &:hover,
+            &:focus {
+                background-color: #12bc00;
+                border-color: #12bc00;
+                color: $color-white;
+            }
+        }
+
+        .fx-privacy-link {
+            display: none;
+        }
+    }
+}
+
+.is-js-dependent {
+    display: none;
+}
diff --git a/media/img/nav/logo-black.png b/media/img/nav/logo-black.png
new file mode 100755
index 0000000000000000000000000000000000000000..4a188859b517eafe5a82bad9a5c8a528fac1eaef
GIT binary patch
literal 991
zcmV<510ei~P)<h;3K|Lk000e1NJLTq003|R001Be0{{R3{jdy<0002kP)t-s00030
z|NpPAuZM?+0|Nt6Qd0Z-`xh4%_4W1K+}zXC(|~}0TU%Sh!^5Yir$t3Y3JMAb2M7NC
z{_XAUx3{;ds;VR;Bn}P^`1tta<Kt{>Y-eX@y}iAfnwpiBm6DQ@jg5_ceSLLxbvQUU
zGcz+FARrtZ9N*vH$;rv1qoa?Hk9vA~aBy%fEiDof67liz=jZ3l%*@8d#)5)^WMpJk
zR#s0>PeDOJJv}`qCnvJ9vRz$WOG`^CDk|#g>e<=Zot>SEii%-jVejwn)z#IYprBY-
zSZQf#M<)r_0008QNkl<ZNXPAz=~CiA6ov1FB%mP@AQ_ghuc8c$s4N2RI`98Rb8g!v
zL7l1bhg4a`_vhSBCw;p6bei_;c}tg>tI$-Q`G$7DDGb}t475Qzz=6?E=n%T5ucv4+
zm!-I7F1hsen9O_|M!5rOFuDw*+yMjT{5XvAA0&k~_3o-pts|$}_MF-x>`qmDXPRjD
zNO7KwkWt&v4GBy5Oyg1h7!92>ufCwSuyC-RD7C3ufJEoIm1c$2G|+N6#t07%pe6|;
z`5HQViLyUs%~kFr!@`5^UJn?A!_+w>A+zQf=Uavzs!kN8$ssk`=H!V%$u`d|QR~h;
zl~s8JI(czgtr84oL<{6}0?KHfxpBiBz9|?{lsGzRv$shynnjAEr~Qn=W>7&<f&L<J
zjH0QsLoqPu89r#;ODjcj!z>D4M|mt!l&!1R5#}ElrVafEvCO;208diVQ&bDMR%fr<
z^nVl0E#}F~L9`o<hN_zAzt?lMNibXjw`gbH8S2ZnFJVgIYQqJ~iWF59jbd3~wz9O%
zA^Q7KltO=gnVDVv#qdyy)ay<f+Ax5~#^?+3R8?cy#tYh}FJnYeg3K8!K4o|zfkZ1D
zsm*mzCFu?FW;2XZ-#6ukT_1ePFdJs*7Eoqim+IreNqdE!Or=thJHgl8O}+YF9xENA
zn10I8Eves4AK*z&7gH2#XfZscMgcR+#iBIz-Yl*6hCxeK9|T=xI0<IjaD?|74C?c2
zO|*rVSI~Sb2m%k^M88D`;)PLyISOk-okxCum9wS=L&4F8^5yu3L#kLouf!2vWN7Oj
z_+CdTH!3Kxl@O`^w;`o`)(l-ap&TO_86HEHQIufBLjGbS&S{F1&|FecX%dD<0t%4z
z%caR<y-SLxM1+i7hjz#q9v#(4n)poL)u!`s?JaPbAEpoPXwRPS!5?K9H<8LHuoD0P
N002ovPDHLkV1m6_)=>Ze

literal 0
HcmV?d00001

diff --git a/media/img/nav/menu.png b/media/img/nav/menu.png
new file mode 100755
index 0000000000000000000000000000000000000000..08fc5e5f6038b2f77658528ef4dd368d620bef43
GIT binary patch
literal 118
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaP3?%1DUd;wlJOMr-u0R?NOkbK$19F&4g8YIR
z4(-!Vem@h)74vj)4B@z*tiZJ4KYJ6mz$?bsP$dS2<^ow|CsBuqAl;s>elF{r5}E+(
CVHq?4

literal 0
HcmV?d00001

diff --git a/media/js/ie8/base-page-init-ie8.js b/media/js/ie8/base-page-init-ie8.js
index 9d12512a638..587d9cf5139 100644
--- a/media/js/ie8/base-page-init-ie8.js
+++ b/media/js/ie8/base-page-init-ie8.js
@@ -8,9 +8,11 @@
 $(document).ready(function() {
     'use strict';
 
-    var utilsie8 = Mozilla.UtilsIE8;
+    // Initialize download buttons.
+    Mozilla.UtilsIE8.initDownloadLinks();
 
-    utilsie8.initDownloadLinks();
+    // Initialize navigation.
+    Mozilla.UtilsIE8.initNavigation();
 
     $(window).on('load', function() {
         $('html').addClass('loaded');
diff --git a/media/js/ie8/mozilla-utils-ie8.js b/media/js/ie8/mozilla-utils-ie8.js
index e967fdc39ce..cea47e5be1f 100644
--- a/media/js/ie8/mozilla-utils-ie8.js
+++ b/media/js/ie8/mozilla-utils-ie8.js
@@ -39,6 +39,15 @@ if (typeof window.Mozilla === 'undefined') {
         $('.download-list').attr('role', 'presentation');
     };
 
+    UtilsIE8.initNavigation = function() {
+        $('.mzp-c-navigation-menu-button').on('click', function(e) {
+            e.preventDefault();
+            var $menuButton = $(e.target);
+            var $menu = $('#' + $menuButton.attr('aria-controls'));
+            $menu.find('.mzp-c-navigation-menu').toggle();
+        });
+    };
+
     window.Mozilla.UtilsIE8 = UtilsIE8;
 
 })();
diff --git a/media/static-bundles.json b/media/static-bundles.json
index 2b55c5de78e..4d950f88a6f 100644
--- a/media/static-bundles.json
+++ b/media/static-bundles.json
@@ -38,7 +38,8 @@
     },
     {
       "files": [
-        "css/sandstone/oldIE.less"
+        "css/sandstone/oldIE.less",
+        "css/sandstone/old-ie.scss"
       ],
       "name": "oldIE"
     },

From a74965a5024c904d9cd06f66f7efb12e9b0c6dcc Mon Sep 17 00:00:00 2001
From: Alex Gibson <alexgibson@users.noreply.github.com>
Date: Thu, 1 Aug 2019 18:02:46 +0100
Subject: [PATCH 2/2] Change width to max-width

---
 media/css/pebbles/base/oldIE.scss | 17 +----------------
 1 file changed, 1 insertion(+), 16 deletions(-)

diff --git a/media/css/pebbles/base/oldIE.scss b/media/css/pebbles/base/oldIE.scss
index 4fc95e90dfd..d2613d20c7c 100644
--- a/media/css/pebbles/base/oldIE.scss
+++ b/media/css/pebbles/base/oldIE.scss
@@ -18,7 +18,7 @@
     margin: 0 auto;
     padding: 20px 0;
     min-width: $width-phone;
-    width: $width-desktop-wide;
+    max-width: $width-desktop-wide;
 }
 
 // An arbitrary container for translatable strings to use in scripts
@@ -42,21 +42,6 @@ label {
     display: block;
 }
 
-.masthead .toggle {
-    display: none; /* oldIE never gets a mobile menu. */
-}
-
-/* oldIE never gets slide out drawer */
-.moz-global-nav {
-    .nav-button-menu {
-        display: none;
-    }
-}
-
-.moz-global-nav-drawer {
-    display: none;
-}
-
 .visually-hidden {
     @include visually-hidden;
 }