Add convert.com experimentation sandbox (Fixes #7508)

bedrock/exp/templates/exp/base/base-firefox.html

@@ -0,0 +1,18 @@
+{# 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/. -#}
+
+ {% extends "exp/base/base.html" %}
+
+ {% block page_title_prefix %}{% endblock %}
+ {% block page_title_suffix %}{% endblock %}
+
+ {% block page_image %}{{ static('img/firefox/template/page-image-firefox.jpg') }}{% endblock %}
+ {% block page_favicon %}{{ static('img/firefox/favicon.ico') }}{% endblock %}
+ {% block page_favicon_large %}{{ static('img/firefox/favicon-196.png') }}{% endblock %}
+ {% block page_ios_icon %}{{ static('img/firefox/ios-icon-180.png') }}{% endblock %}
+
+ {% block facebook_id %}14696440021{# facebook.com/Firefox #}{% endblock %}
+ {% block twitter_id %}firefox{% endblock %}
+
+ {% block body_class %}{{ super() }} mzp-t-firefox{% endblock %}

bedrock/exp/templates/exp/base/base.html

@@ -0,0 +1,24 @@
+{# 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/. -#}
+
+{% extends "base-protocol.html" %}
+
+{% block experiments %}
+  {% if switch('convert-experiment-script') %}
+    <!--[if !lte IE 8]><!-->
+      {{ js_bundle('jquery') }}
+      <script type="text/javascript" src="{{ settings.CONVERT_EXPERIMENT_SCRIPT_SRC }}" async></script>
+    <!--<![endif]-->
+  {% endif %}
+{% endblock %}
+
+{% block site_js %}
+<!--[if !lte IE 8]><!-->
+  {{ js_bundle('common-protocol-no-jquery') }}
+<!--<![endif]-->
+
+<!--[if lte IE 8]>
+  {{ js_bundle('common-ie8') }}
+<![endif]-->
+{% endblock %}

bedrock/exp/templates/exp/firefox/new/download.de.html

@@ -0,0 +1,66 @@
+{# 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/. -#}
+
+{% from "macros.html" import google_play_button with context %}
+{% from "macros-protocol.html" import hero, picto_card with context %}
+
+{% extends "exp/base/base-firefox.html" %}
+
+{% block page_title_prefix %}Download Firefox — {% endblock %}
+
+{% block page_title %}kostenloser Browser{% endblock %}
+
+{# Bug 1438302 Avoid duplicate content for en-CA and en-GB pages. #}
+{% block page_title_suffix %} — Mozilla{% endblock %}
+
+{% block page_desc %}Download Mozilla Firefox, den kostenlosen Browser für Windows, Mac, Linux, Android und iOS. Firefox wird von Mozilla entwickelt – der Non-Profit-Organisation, die sich für deine Online-Rechte stark macht.{% endblock %}
+
+{#- This will appear as <meta property="og:title"> which can be used for social share -#}
+{% block page_og_title %}Jetzt den schnellsten Firefox aller Zeiten herunterladen{% endblock %}
+
+{#- This will appear as <meta property="og:description"> which can be used for social share -#}
+{% block page_og_desc %}Der neue Firefox: schnellere Seitenladezeiten, weniger Speicherverbrauch und vollgepackt mit neuen Funktionen.{% endblock %}
+
+{% block canonical_urls %}
+  {# the SEM campaign page should set canonical to the /firefox/new/ page. #}
+  <link rel="canonical" href="{{ settings.CANONICAL_URL }}/{{ LANG }}/firefox/new/">
+{% endblock %}
+
+{# All stylesheets are loaded in extrahead to serve legacy IE basic styles #}
+{% block extrahead %}
+  {{ css_bundle('protocol-core') }}
+  {{ css_bundle('exp_firefox_new') }}
+{% endblock %}
+
+{% block old_ie_styles %}{% endblock %}
+{% block site_css %}{% endblock %}
+{% block page_css %}{% endblock %}
+
+{% block site_header %}{% endblock %}
+
+{% block content %}
+<main role="main" class="main-download" {% if v %}data-variant="{{ v }}"{% endif %}>
+  {% call hero(
+    title='Hol dir den neuesten Firefox Browser.',
+    desc='Und damit eines der Firefox Produkte, für die deine Privatsphäre an erster Stelle steht.',
+    class='mzp-has-image mzp-t-dark',
+    include_cta=True,
+    image_url='firefox/new/trailhead/browser-window.svg',
+    heading_level=1
+  ) %}
+    {{ download_firefox(alt_copy='Jetzt herunterladen', download_location='primary cta') }}
+  {% endcall %}
+
+  <section class="features">
+    <ul class="mzp-l-card-third mzp-l-content">
+      {{ picto_card(title='Komm zu Firefox', desc='Verbinde alle deine Firefox Produkte miteinander und bleib in Sachen Online-Sicherheit immer auf dem neuesten Stand.', class='join') }}
+      {{ picto_card(title='Passwörter immer dabei', desc='<strong>Firefox Lockwise</strong> hat deine gespeicherten Passwörter immer und auf allen deinen Geräten für dich parat.'|safe, class='lockwise') }}
+      {{ picto_card(title='Schütze deine Privatsphäre', desc='Im <strong>Privaten Modus</strong> wird dein Browserverlauf automatisch gelöscht, sodass andere Benutzer deines Computers ihn nicht sehen können.'|safe, class='private') }}
+    </ul>
+  </section>
+</main>
+{% endblock %}
+
+{# Bug 1381776 #}
+{% block update_notification %}{% endblock %}

bedrock/exp/templates/exp/firefox/new/download.html

@@ -0,0 +1,74 @@
+{# 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/. -#}
+
+{% from "macros.html" import google_play_button with context %}
+{% from "macros-protocol.html" import hero, picto_card with context %}
+
+{% extends "exp/base/base-firefox.html" %}
+
+{% block page_title_prefix %}Download Firefox — {% endblock %}
+
+{% block page_title %}Free Web Browser{% endblock %}
+
+{# Bug 1438302 Avoid duplicate content for en-CA and en-GB pages. #}
+{%- block page_title_suffix -%}
+  {% if LANG == 'en-CA' %}
+    — Mozilla (CA)
+  {% elif LANG == 'en-GB' %}
+    — Mozilla (UK)
+  {% else %}
+    — Mozilla
+  {% endif %}
+{%- endblock -%}
+
+{% block page_desc %}Download Mozilla Firefox, a free web browser. Firefox is created by a global non-profit dedicated to putting individuals in control online. Get Firefox for Windows, macOS, Linux, Android and iOS today!{% endblock %}
+
+{#- This will appear as <meta property="og:title"> which can be used for social share -#}
+{% block page_og_title %}Download the fastest Firefox ever{% endblock %}
+
+{#- This will appear as <meta property="og:description"> which can be used for social share -#}
+{% block page_og_desc %}Faster page loading, less memory usage and packed with features, the new Firefox is here.{% endblock %}
+
+{% block canonical_urls %}
+  {# the SEM campaign page should set canonical to the /firefox/new/ page. #}
+  <link rel="canonical" href="{{ settings.CANONICAL_URL }}/{{ LANG }}/firefox/new/">
+{% endblock %}
+
+{# All stylesheets are loaded in extrahead to serve legacy IE basic styles #}
+{% block extrahead %}
+  {{ css_bundle('protocol-core') }}
+  {{ css_bundle('exp_firefox_new') }}
+{% endblock %}
+
+{% block old_ie_styles %}{% endblock %}
+{% block site_css %}{% endblock %}
+{% block page_css %}{% endblock %}
+
+{% block site_header %}{% endblock %}
+
+{% block content %}
+<main role="main" class="main-download" {% if v %}data-variant="{{ v }}"{% endif %}>
+  {% call hero(
+    title='Get the latest Firefox browser.',
+    desc='And start getting the respect you deserve with our family of privacy-first products.',
+    class='mzp-has-image mzp-t-dark',
+    include_cta=True,
+    image_url='firefox/new/trailhead/browser-window.svg',
+    heading_level=1
+  ) %}
+    {{ download_firefox(alt_copy='Download Now', download_location='primary cta') }}
+  {% endcall %}
+
+  <section class="features">
+    <ul class="mzp-l-card-third mzp-l-content">
+      {{ picto_card(title='Join Firefox', desc='Connect to a whole family of respectful products, plus all the knowledge you need to protect yourself online.', class='join') }}
+      {{ picto_card(title='Passwords made portable', desc='<strong>Firefox Lockwise</strong> makes the passwords you save in Firefox available on all your devices.'|safe, class='lockwise') }}
+      {{ picto_card(title='Protect your privacy', desc='<strong>Private Browsing</strong> clears your history to keep it secret from anyone who uses your computer.'|safe, class='private') }}
+    </ul>
+  </section>
+</main>
+{% endblock %}
+
+{# Bug 1381776 #}
+{% block update_notification %}{% endblock %}

bedrock/exp/urls.py

@@ -0,0 +1,10 @@
+# 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/.
+
+from bedrock.mozorg.util import page
+
+
+urlpatterns = (
+    page('firefox/new', 'exp/firefox/new/download.html', active_locales=['en-US', 'en-GB', 'en-CA', 'de']),
+)

bedrock/settings/base.py

@@ -466,6 +466,7 @@ def get_app_name(hostname):
     'bedrock.sitemaps',
     'bedrock.etc',
     'bedrock.pocketfeed',
+    'bedrock.exp',
     # last so that redirects here will be last
     'bedrock.redirects',
 
@@ -1395,6 +1396,7 @@ def get_app_name(hostname):
     'adservice.google.de',
     'adservice.google.dk',
     'creativecommons.org',
+    'cdn-3.convertexperiments.com',  # convert issue 7508
 ]
 CSP_SCRIPT_SRC = CSP_DEFAULT_SRC + [
     # TODO fix things so that we don't need this
@@ -1407,10 +1409,14 @@ def get_app_name(hostname):
     'tagmanager.google.com',
     'www.youtube.com',
     's.ytimg.com',
+    'cdn-3.convertexperiments.com',  # convert issue 7508
+    'app.convert.com', # convert issue 7508
+    '100317.track.convertexperiments.com', # # convert issue 7508
 ]
 CSP_STYLE_SRC = CSP_DEFAULT_SRC + [
     # TODO fix things so that we don't need this
     "'unsafe-inline'",
+    'app.convert.com', # # convert issue 7508
 ]
 CSP_CHILD_SRC = [
     'www.googletagmanager.com',
@@ -1459,3 +1465,7 @@ def get_app_name(hostname):
 # FUNNELCAKE_103_LOCALES=de,fr,en-US
 #
 # where "103" in the variable name is the funnelcake ID.
+
+# Issue 7508 - Convert.com experiment sandbox
+CONVERT_EXPERIMENT_SCRIPT_SRC = ('https://cdn-3.convertexperiments.com/js/10039-1003350.js' if DEV else
+                                 'https://cdn-3.convertexperiments.com/js/10039-1003343.js')

bedrock/urls.py

@@ -29,6 +29,7 @@
     url(r'', include('bedrock.mozorg.urls')),
     url(r'', include('bedrock.newsletter.urls')),
     url(r'^etc/', include('bedrock.etc.urls')),
+    url(r'^exp/', include('bedrock.exp.urls')),
 
     url(r'^healthz/$', watchman_views.ping, name="watchman.ping"),
     url(r'^readiness/$', watchman_views.status, name="watchman.status"),

media/css/exp/firefox/new/download.scss

@@ -0,0 +1,100 @@
+// 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/components/hero';
+@import '../../../../protocol/css/components/modal';
+@import '../../../../protocol/css/components/picto-card';
+@import '../../../../protocol/css/includes/lib';
+@import '../../../../protocol/css/templates/card-layout';
+
+
+.mzp-c-hero.mzp-t-dark {
+    @include background-size(auto 100%);
+    background-color: $color-off-black;
+
+    .mzp-c-hero-title {
+        @include at2x('/media/img/logos/firefox/logo-quantum-wordmark-white.png', 147px, 48px);
+        background-position: top center;
+        background-repeat: no-repeat;
+        padding-top: $layout-xl;
+    }
+
+    .mzp-c-hero-image img {
+        top: 48px;
+        bottom: auto;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .5);
+    }
+
+    @media #{$mq-md} {
+        @include bidi((
+            (background-image, url('/media/img/exp/firefox/new/hero-bg.svg'), url('/media/img/exp/firefox/new/hero-bg-rtl.svg')),
+            (background-position, top right -600px, top left -600px),
+        ));
+        background-repeat: no-repeat;
+
+        .mzp-c-hero-title {
+            @include bidi(((background-position, top left, top right),));
+            max-width: 9em;
+        }
+
+        .mzp-c-hero-desc {
+            max-width: 21em;
+        }
+    }
+
+    @media #{$mq-lg} {
+        @include bidi(((background-position, top right -480px, top left -480px),));
+    }
+
+    @media #{$mq-xl} {
+        @include bidi(((background-position, top right -260px, top left -260px),));
+    }
+}
+
+
+/**
+ * Picto card custom icon sizes.
+ * These should be standardized into a `large` icon size.
+ * https://github.com/mozilla/protocol/issues/382
+ */
+.mzp-c-card-picto .mzp-c-card-picto-content {
+    padding-top: 140px;
+
+    &:before {
+        background-color: transparent;
+        background-position: top left;
+        background-repeat: no-repeat;
+    }
+
+    @media #{$mq-lg} {
+        .mzp-c-card-picto-title {
+            @include text-display-sm;
+            margin-bottom: $spacing-xl;
+        }
+    }
+}
+
+.join .mzp-c-card-picto-content::before {
+    height: 104px;
+    width: 104px;
+    margin-left: -52px;
+    background-image: url('/media/img/exp/firefox/new/icon-join.svg');
+}
+
+.lockwise .mzp-c-card-picto-content::before {
+    height: 96px;
+    width: 152px;
+    margin-left: -76px;
+    background-image: url('/media/img/exp/firefox/new/icon-lockwise.svg');
+}
+
+.private .mzp-c-card-picto-content::before {
+    height: 83px;
+    width: 113px;
+    margin-left: -56px;
+    background-image: url('/media/img/exp/firefox/new/icon-private.svg');
+}