Merge pull request #4829 from alexgibson/bug-1363543-firefox-new-variationa-part-deux

[fix bug 1363543] /new variations to support ad campaigns - private, general, competitor

bedrock/firefox/templates/firefox/new/fx-lifestyle/more-protection/scene1.html

@@ -0,0 +1,47 @@
+{# 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 "firefox/new/fx-lifestyle/base.html" %}
+
+{% block page_css %}
+  {% stylesheet 'firefox_new_more_protection' %}
+{% endblock %}
+
+{% block head_content %}
+  <h2 id="head_content_title" data-experience="moreprotection">
+    More protection. <br>Less worry.
+  </h2>
+
+  <p>
+    We’re obsessed with protecting your privacy. That’s why we’ve made Firefox’s private browsing more powerful than the others.
+  </p>
+{% endblock %}
+
+{% block content_1 %}
+  <h3>Block Ads</h3>
+
+  <p>
+    Not only do trackers collect info, they can weigh down your browsing speeds. Only Firefox Private Browsing blocks ads with hidden trackers, so you can drop the baggage and browse freely.
+  </p>
+{% endblock %}
+
+{% block content_2 %}
+  <h3>Block Tracking</h3>
+
+  <p>
+    Some websites and ads attach hidden trackers that collect your browsing info long after you’ve left. Only Firefox Private Browsing has tracking protection to block them automatically, so you can browse with peace of mind.
+  </p>
+{% endblock %}
+
+{% block content_3 %}
+  <h3>Block Snoops</h3>
+
+  <p>
+    Sharing is caring, but that should be your call. Firefox Private Browsing automatically erases your online info like passwords, cookies, and history from your computer. So that when you close out, you leave no trace.
+  </p>
+{% endblock %}
+
+{% block footer_cta %}
+  Be different. Try Firefox today.
+{% endblock %}

bedrock/firefox/templates/firefox/new/fx-lifestyle/more-protection/scene2.html

@@ -0,0 +1,31 @@
+{# 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 "firefox/new/fx-lifestyle/base.html" %}
+
+{% block body_class %}fx-lifestyle-scene2{% endblock %}
+
+{% block page_css %}
+  {% stylesheet 'firefox_new_more_protection' %}
+{% endblock %}
+
+{% block head_content %}
+  <h2>
+    Thanks for choosing Firefox
+  </h2>
+
+  <p>
+    Your download should begin automatically. <br>If not, <a id="direct-download-link" href="{{ url('firefox.all') }}">click here</a>.
+  </p>
+{% endblock %}
+
+{% block details_contain %}{% endblock %}
+{% block today %}{% endblock %}
+
+{% block js %}
+  {% if switch('tracking-pixel') %}
+    {% javascript 'firefox_new_pixel' %}
+  {% endif %}
+  {% javascript 'firefox_new_scene2' %}
+{% endblock %}

bedrock/firefox/templates/firefox/new/fx-lifestyle/working-out/scene1.html

@@ -0,0 +1,47 @@
+{# 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 "firefox/new/fx-lifestyle/base.html" %}
+
+{% block page_css %}
+  {% stylesheet 'firefox_new_working_out' %}
+{% endblock %}
+
+{% block head_content %}
+  <h2 id="head_content_title" data-experience="workingout">
+    We’ve been working out
+  </h2>
+
+  <p>
+    Get more done — faster with firefox.
+  </p>
+{% endblock %}
+
+{% block content_1 %}
+  <h3>More Browser Speed</h3>
+
+  <p>
+    Bring it, Internet! We’ve spent the last year supercharging Firefox’s performance. Now start up faster, tab hop quicker, and scroll like a speed demon.
+  </p>
+{% endblock %}
+
+{% block content_2 %}
+  <h3>More Browser Privacy</h3>
+
+  <p>
+    Firefox doesn’t sell access to your personal information like other companies. From privacy tools to tracking protection, you’re in charge of who sees what.
+  </p>
+{% endblock %}
+
+{% block content_3 %}
+  <h3>More Browser Freedom</h3>
+
+  <p>
+    Following the pack isn’t our style. As part of the non-profit Mozilla, Firefox leads the fight to protect your online rights, and champion an Internet that benefits everyone—not just a few.
+  </p>
+{% endblock %}
+
+{% block footer_cta %}
+  Browse freely with Firefox today.
+{% endblock %}

bedrock/firefox/templates/firefox/new/fx-lifestyle/working-out/scene2.html

@@ -0,0 +1,31 @@
+{# 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 "firefox/new/fx-lifestyle/base.html" %}
+
+{% block body_class %}fx-lifestyle-scene2{% endblock %}
+
+{% block page_css %}
+  {% stylesheet 'firefox_new_working_out' %}
+{% endblock %}
+
+{% block head_content %}
+  <h2>
+    Thanks for choosing Firefox
+  </h2>
+
+  <p>
+    Your download should begin automatically. <br>If not, <a id="direct-download-link" href="{{ url('firefox.all') }}">click here</a>.
+  </p>
+{% endblock %}
+
+{% block details_contain %}{% endblock %}
+{% block today %}{% endblock %}
+
+{% block js %}
+  {% if switch('tracking-pixel') %}
+    {% javascript 'firefox_new_pixel' %}
+  {% endif %}
+  {% javascript 'firefox_new_scene2' %}
+{% endblock %}

bedrock/firefox/templates/firefox/new/fx-lifestyle/you-do-you/scene1.html

@@ -0,0 +1,47 @@
+{# 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 "firefox/new/fx-lifestyle/base.html" %}
+
+{% block page_css %}
+  {% stylesheet 'firefox_new_conformity_not_default' %}
+{% endblock %}
+
+{% block head_content %}
+  <h2 id="head_content_title" data-experience="youdoyou">
+    You do you.
+  </h2>
+
+  <p>
+    We get what it’s like to be different. We’re the only non-profit, non-conformist browser. We celebrate everybody’s right to break the mold, buck the trends, and demand better than the default.
+  </p>
+{% endblock %}
+
+{% block content_1 %}
+  <h3>Bang for your bytes</h3>
+
+  <p>
+    No one likes a computer hog! Firefox is a lean, mean (actually we’re pretty nice) browsing machine. We also use less memory than Chrome, so it’s easier for your computer to keep running other programs without being weighed down.
+  </p>
+{% endblock %}
+
+{% block content_2 %}
+  <h3>More privacy</h3>
+
+  <p>
+    We’re obsessed with protecting your privacy. That’s why we’ve made firefox private browsing more powerful than the others. Plus, Firefox doesn’t sell access to your personal information like other companies.
+  </p>
+{% endblock %}
+
+{% block content_3 %}
+  <h3>No strings attached</h3>
+
+  <p>
+    Firefox is built by a non-profit. That means we can do things that others can’t, like build new products and features without a hidden agenda. We champion your right to privacy with tools like Private Browsing with Tracking Protection, which go beyond what Google Chrome and Microsoft Edge offer.
+  </p>
+{% endblock %}
+
+{% block footer_cta %}
+  Be different. Try Firefox today.
+{% endblock %}

bedrock/firefox/templates/firefox/new/fx-lifestyle/you-do-you/scene2.html

@@ -0,0 +1,31 @@
+{# 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 "firefox/new/fx-lifestyle/base.html" %}
+
+{% block body_class %}fx-lifestyle-scene2{% endblock %}
+
+{% block page_css %}
+  {% stylesheet 'firefox_new_conformity_not_default' %}
+{% endblock %}
+
+{% block head_content %}
+  <h2>
+    Thanks for choosing Firefox
+  </h2>
+
+  <p>
+    Your download should begin automatically. <br>If not, <a id="direct-download-link" href="{{ url('firefox.all') }}">click here</a>.
+  </p>
+{% endblock %}
+
+{% block details_contain %}{% endblock %}
+{% block today %}{% endblock %}
+
+{% block js %}
+  {% if switch('tracking-pixel') %}
+    {% javascript 'firefox_new_pixel' %}
+  {% endif %}
+  {% javascript 'firefox_new_scene2' %}
+{% endblock %}

bedrock/firefox/tests/test_views.py

@@ -367,12 +367,88 @@ class TestFirefoxNew(TestCase):
         views.new(req)
         render_mock.assert_called_once_with(req, 'firefox/new/scene2.html')
 
+    # moar ad campaign pages bug 1363543
+
+    def test_private_not_option_scene_1(self, render_mock):
+        req = RequestFactory().get('/firefox/new/?xv=privatenotoption')
+        req.locale = 'en-US'
+        views.new(req)
+        render_mock.assert_called_once_with(req, 'firefox/new/fx-lifestyle/private-not-option/scene1.html')
+
+    def test_private_not_option_scene_2(self, render_mock):
+        req = RequestFactory().get('/firefox/new/?scene=2&xv=privatenotoption')
+        req.locale = 'en-US'
+        views.new(req)
+        render_mock.assert_called_once_with(req, 'firefox/new/fx-lifestyle/private-not-option/scene2.html')
+
+    def test_conformity_not_default_scene_1(self, render_mock):
+        req = RequestFactory().get('/firefox/new/?xv=conformitynotdefault')
+        req.locale = 'en-US'
+        views.new(req)
+        render_mock.assert_called_once_with(req, 'firefox/new/fx-lifestyle/conformity-not-default/scene1.html')
+
+    def test_conformity_not_default_scene_2(self, render_mock):
+        req = RequestFactory().get('/firefox/new/?scene=2&xv=conformitynotdefault')
+        req.locale = 'en-US'
+        views.new(req)
+        render_mock.assert_called_once_with(req, 'firefox/new/fx-lifestyle/conformity-not-default/scene2.html')
+
+    def test_browse_up_to_you_scene_1(self, render_mock):
+        req = RequestFactory().get('/firefox/new/?xv=browseuptoyou')
+        req.locale = 'en-US'
+        views.new(req)
+        render_mock.assert_called_once_with(req, 'firefox/new/fx-lifestyle/browse-up-to-you/scene1.html')
+
+    def test_browse_up_to_you_scene_2(self, render_mock):
+        req = RequestFactory().get('/firefox/new/?scene=2&xv=browseuptoyou')
+        req.locale = 'en-US'
+        views.new(req)
+        render_mock.assert_called_once_with(req, 'firefox/new/fx-lifestyle/browse-up-to-you/scene2.html')
+
+    def test_more_protection_scene_1(self, render_mock):
+        req = RequestFactory().get('/firefox/new/?xv=moreprotection')
+        req.locale = 'en-US'
+        views.new(req)
+        render_mock.assert_called_once_with(req, 'firefox/new/fx-lifestyle/more-protection/scene1.html')
+
+    def test_more_protection_scene_2(self, render_mock):
+        req = RequestFactory().get('/firefox/new/?scene=2&xv=moreprotection')
+        req.locale = 'en-US'
+        views.new(req)
+        render_mock.assert_called_once_with(req, 'firefox/new/fx-lifestyle/more-protection/scene2.html')
+
+    def test_working_out_scene_1(self, render_mock):
+        req = RequestFactory().get('/firefox/new/?xv=workingout')
+        req.locale = 'en-US'
+        views.new(req)
+        render_mock.assert_called_once_with(req, 'firefox/new/fx-lifestyle/working-out/scene1.html')
+
+    def test_working_out_scene_2(self, render_mock):
+        req = RequestFactory().get('/firefox/new/?scene=2&xv=workingout')
+        req.locale = 'en-US'
+        views.new(req)
+        render_mock.assert_called_once_with(req, 'firefox/new/fx-lifestyle/working-out/scene2.html')
+
+    def test_you_do_you_scene_1(self, render_mock):
+        req = RequestFactory().get('/firefox/new/?xv=youdoyou')
+        req.locale = 'en-US'
+        views.new(req)
+        render_mock.assert_called_once_with(req, 'firefox/new/fx-lifestyle/you-do-you/scene1.html')
+
+    def test_you_do_you_scene_2(self, render_mock):
+        req = RequestFactory().get('/firefox/new/?scene=2&xv=youdoyou')
+        req.locale = 'en-US'
+        views.new(req)
+        render_mock.assert_called_once_with(req, 'firefox/new/fx-lifestyle/you-do-you/scene2.html')
+
     def test_onboarding_f_98_scene_1_template(self, render_mock):
         req = RequestFactory().get('/firefox/new/?f=98')
         req.locale = 'en-US'
         views.new(req)
         render_mock.assert_called_once_with(req, 'firefox/new/scene1.html')
 
+    # onboarding experiment bug 1333435
+
     def test_onboarding_f_99_scene_1_template(self, render_mock):
         req = RequestFactory().get('/firefox/new/?f=99')
         req.locale = 'en-US'

bedrock/firefox/views.py

@@ -507,6 +507,12 @@ def new(request):
                 template = 'firefox/new/fx-lifestyle/conformity-not-default/scene2.html'
             elif experience == 'browseuptoyou':
                 template = 'firefox/new/fx-lifestyle/browse-up-to-you/scene2.html'
+            elif experience == 'moreprotection':
+                template = 'firefox/new/fx-lifestyle/more-protection/scene2.html'
+            elif experience == 'workingout':
+                template = 'firefox/new/fx-lifestyle/working-out/scene2.html'
+            elif experience == 'youdoyou':
+                template = 'firefox/new/fx-lifestyle/you-do-you/scene2.html'
             else:
                 template = 'firefox/new/scene2.html'
         else:
@@ -526,6 +532,12 @@ def new(request):
                 template = 'firefox/new/fx-lifestyle/conformity-not-default/scene1.html'
             elif experience == 'browseuptoyou':
                 template = 'firefox/new/fx-lifestyle/browse-up-to-you/scene1.html'
+            elif experience == 'moreprotection':
+                template = 'firefox/new/fx-lifestyle/more-protection/scene1.html'
+            elif experience == 'workingout':
+                template = 'firefox/new/fx-lifestyle/working-out/scene1.html'
+            elif experience == 'youdoyou':
+                template = 'firefox/new/fx-lifestyle/you-do-you/scene1.html'
             else:
                 template = 'firefox/new/scene1.html'
         else:

bedrock/settings/static_media.py

@@ -563,6 +563,22 @@ PIPELINE_CSS = {
         ),
         'output_filename': 'css/firefox_new_browse_up_to_you_bundle.css',
     },
+    'firefox_new_more_protection': {
+        'source_filenames': (
+            'css/firefox/new/fx-lifestyle/base.less',
+            'css/firefox/new/fx-lifestyle/conformity-not-default.less',
+            'css/firefox/new/fx-lifestyle/more-protection.less',
+        ),
+        'output_filename': 'css/firefox_new_more_protection_bundle.css',
+    },
+    'firefox_new_working_out': {
+        'source_filenames': (
+            'css/firefox/new/fx-lifestyle/base.less',
+            'css/firefox/new/fx-lifestyle/browse-up-to-you.less',
+            'css/firefox/new/fx-lifestyle/working-out.less',
+        ),
+        'output_filename': 'css/firefox_new_working_out_bundle.css',
+    },
     'firefox_new_onboarding_common': {
         'source_filenames': (
             'css/sandstone/sandstone-resp.less',

media/css/firefox/new/fx-lifestyle/base.less

@@ -91,8 +91,11 @@
     color: #484848;
     padding: 50px 0;
 
+    @media only screen and (max-width: @breakDesktop) {
+        padding: 40px 0;
+    }
+
     @media only screen and (max-width: @breakTablet) {
-        padding: 50px 0;
         text-align: center;
     }
 }

media/css/firefox/new/fx-lifestyle/browse-up-to-you.less

@@ -5,6 +5,7 @@
 @import '../../../sandstone/lib.less';
 
 #intro {
+    background-color: #868b8f;
     background-image: url('/media/img/firefox/new/fx-lifestyle/browse-up-to-you/intro-high-res.jpg');
     background-position: center top;
     background-repeat: no-repeat;

media/css/firefox/new/fx-lifestyle/conformity-not-default.less

@@ -5,6 +5,7 @@
 @import '../../../sandstone/lib.less';
 
 #intro {
+    background-color: #784e66;
     background-image: url('/media/img/firefox/new/fx-lifestyle/conformity-not-default/intro-high-res.jpg');
     background-position: center top;
     background-repeat: no-repeat;
@@ -12,13 +13,12 @@
     @media only screen and (max-width: @breakDesktop) {
         background-image: url('/media/img/firefox/new/fx-lifestyle/conformity-not-default/intro.jpg');
         p {
-            .font-size(22px);
+            .font-size(18px);
         }
     }
 
     @media only screen and (max-width: @breakTablet) {
         p {
-            .font-size(18px);
             line-height: 1.6;
             margin-bottom: 40px;
 

media/css/firefox/new/fx-lifestyle/more-protection.less

@@ -0,0 +1,23 @@
+// 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 '../../../sandstone/lib.less';
+
+#intro {
+    .copy {
+        width: 700px;
+    }
+
+    @media only screen and (max-width: @breakDesktop) {
+        .copy {
+            width: 600px;
+        }
+    }
+
+    @media only screen and (max-width: @breakTablet) {
+        .copy {
+            width: auto;
+        }
+    }
+}

media/css/firefox/new/fx-lifestyle/private-not-option.less

@@ -5,6 +5,7 @@
 @import '../../../sandstone/lib.less';
 
 #intro {
+    background-color: #949494;
     background-image: url('/media/img/firefox/new/fx-lifestyle/private-not-option/intro-high-res.jpg');
     background-position: right top;
     background-repeat: no-repeat;

media/css/firefox/new/fx-lifestyle/working-out.less

@@ -0,0 +1,15 @@
+// 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 '../../../sandstone/lib.less';
+
+@media only screen and (max-width: @breakDesktop) {
+    #intro .copy {
+        width: auto;
+    }
+}
+
+#details h3 {
+    .font-size(28px);
+}