Global FxA CTA experiment for Firefox users (Fixes #6629)

mozilla · Jan 10, 2019 · e5421e6 · e5421e6
1 parent aedbcf6
commit e5421e6
Show file tree

Hide file tree

Showing 7 changed files with 192 additions and 1 deletion.
diff --git a/bedrock/base/templates/includes/protocol/navigation/index.html b/bedrock/base/templates/includes/protocol/navigation/index.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/. -#}
 
-<div class="mzp-c-navigation">
+<div class="mzp-c-navigation {% if switch('global-fxa-cta-experiment') %}global-fxa-cta-enabled{% endif %}">
   <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>
@@ -21,6 +21,12 @@
       <div class="mzp-c-navigation-items" id="mzp-c-navigation-items">
         <div class="mzp-c-navigation-download">
           {{ download_firefox(alt_copy=_('Download Firefox'), dom_id='protocol-nav-download-firefox', button_color='mzp-t-secondary mzp-t-small', download_location='nav') }}
+          <div class="c-navigation-fxa-cta-container">
+            <a class="c-navigation-fxa-cta mzp-c-button mzp-t-secondary mzp-t-small mzp-t-download" href="https://accounts.firefox.com/signup?service=sync&context=fx_desktop_v3&entrypoint=mozorg-nav&utm_source=mozorg-nav&utm_content=mozorg-nav&utm_medium=referral&utm_campaign=mozorg-fxa-nav-experiment" data-button-name="Create a Firefox Account" data-link-type="button" data-cta-position="secondary cta">
+              Create a Firefox Account
+            </a>
+            <p class="c-navigation-fxa-cta-small-link"><a href="{{ url('firefox.accounts') }}">Learn More</a></p>
+          </div>
         </div>
         <div class="mzp-c-navigation-menu">
           <nav class="mzp-c-menu">

diff --git a/media/css/hubs/_nav-download-button-remove.scss b/media/css/hubs/_nav-download-button-remove.scss
@@ -15,6 +15,11 @@
     display: none;
 }
 
+// Global FxA CTA experiment: issue #6629
+.c-navigation-fxa-cta-container {
+    display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .moz-global-nav .nav-primary-links {
     @media #{$mq-tablet} {
         width: calc(100% - 160px);

diff --git a/media/css/pebbles/components/_protocol-nav.scss b/media/css/pebbles/components/_protocol-nav.scss
@@ -80,3 +80,67 @@ $image-path: '/media/protocol/img';
         @include font-size(12px);
     }
 }
+
+// Global FxA CTA experiment: issue #6629
+.mzp-c-navigation {
+    .c-navigation-fxa-cta-container {
+        display: none;
+    }
+}
+
+.mzp-c-navigation {
+    .c-navigation-fxa-cta {
+        @include font-size(14px);
+        background-color: transparent;
+        background-image: none;
+        border-radius: 2px;
+        border: 2px solid $color-green-60;
+        box-shadow: none;
+        color: $color-green-60;
+        display: inline-block;
+        font-weight: bold;
+        line-height: 1.125;
+        padding: $padding-sm $padding-md;
+        text-decoration: none;
+
+        &:hover,
+        &:focus {
+            background-color: $color-green-60;
+            border-color: $color-green-60;
+            color: $color-white;
+        }
+    }
+
+    .c-navigation-fxa-cta-small-link {
+        margin-bottom: 2px;
+
+        a:link,
+        a:visited {
+            @include font-size(12px);
+            color: #000;
+            text-decoration: none;
+        }
+
+        a:hover,
+        a:active,
+        a:focus {
+            color: inherit;
+            text-decoration: underline;
+        }
+
+    }
+}
+
+.mzp-c-navigation.global-fxa-cta-enabled {
+    .windows.is-firefox &,
+    .osx.is-firefox &,
+    .linux.is-firefox & {
+        .mzp-c-button-download-container {
+            display: none;
+        }
+
+        .c-navigation-fxa-cta-container {
+            display: block;
+        }
+    }
+}
diff --git a/media/css/protocol/components/_navigation.scss b/media/css/protocol/components/_navigation.scss
@@ -21,3 +21,43 @@
     }
 }
 
+// Global FxA CTA experiment: issue #6629
+.mzp-c-navigation {
+    .c-navigation-fxa-cta-container {
+        display: none;
+    }
+
+    .c-navigation-fxa-cta-small-link {
+        margin-bottom: 0;
+
+        a:link,
+        a:visited {
+            @include text-body-sm;
+            color: $color-black;
+            text-decoration: none;
+        }
+
+        a:hover,
+        a:active,
+        a:focus {
+            color: inherit;
+            text-decoration: underline;
+        }
+
+    }
+}
+
+.mzp-c-navigation.global-fxa-cta-enabled {
+    .windows.is-firefox &,
+    .osx.is-firefox &,
+    .linux.is-firefox & {
+        .mzp-c-button-download-container {
+            display: none;
+        }
+
+        .c-navigation-fxa-cta-container {
+            display: block;
+        }
+    }
+}
+
diff --git a/media/css/protocol/includes/_navigation-hide-download-button.scss b/media/css/protocol/includes/_navigation-hide-download-button.scss
@@ -14,6 +14,11 @@
     display: none;
 }
 
+// Global FxA CTA experiment: issue #6629
+.c-navigation-fxa-cta-container {
+    display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .moz-global-nav .nav-primary-links {
     @media #{$mq-md} {
         width: calc(100% - 160px);

diff --git a/media/css/sandstone/protocol-nav.scss b/media/css/sandstone/protocol-nav.scss
@@ -61,3 +61,67 @@ $image-path: '/media/protocol/img';
     text-shadow: none;
     letter-spacing: normal;
 }
+
+// Global FxA CTA experiment: issue #6629
+.mzp-c-navigation {
+    .c-navigation-fxa-cta-container {
+        display: none;
+    }
+}
+
+.mzp-c-navigation {
+    .c-navigation-fxa-cta {
+        font-size: 16px;
+        background-color: transparent;
+        background-image: none;
+        border-radius: 2px;
+        color: $color-green-60;
+        display: inline-block;
+        border: 2px solid $color-green-60;
+        box-shadow: none;
+        font-weight: bold;
+        line-height: 1.125;
+        padding: $padding-sm $padding-md;
+        text-decoration: none;
+
+        &:hover,
+        &:focus {
+            background-color: $color-green-60;
+            border-color: $color-green-60;
+            color: $color-white;
+        }
+    }
+
+    .c-navigation-fxa-cta-small-link {
+        margin-top: 2px;
+
+        a:link,
+        a:visited {
+            font-size: 14px;
+            color: #000;
+            text-decoration: none;
+        }
+
+        a:hover,
+        a:active,
+        a:focus {
+            color: inherit;
+            text-decoration: underline;
+        }
+
+    }
+}
+
+.mzp-c-navigation.global-fxa-cta-enabled {
+    .windows.is-firefox &,
+    .osx.is-firefox &,
+    .linux.is-firefox & {
+        .mzp-c-button-download-container {
+            display: none;
+        }
+
+        .c-navigation-fxa-cta-container {
+            display: block;
+        }
+    }
+}
diff --git a/media/js/base/site.js b/media/js/base/site.js
@@ -184,6 +184,13 @@
             h.className += ' x64';
         }
 
+        // 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);
+
+        if (isFirefox) {
+            h.className += ' is-firefox';
+        }
+
         // Add class to reflect javascript availability for CSS
         h.className = h.className.replace(/\bno-js\b/, 'js');
     })();