Merge pull request #3918 from mozilla/bug-1251283-update-hello-ftu-firefox-45

[fix bug 1251283] Update Hello FTU for Firefox 45

bedrock/firefox/templates/firefox/hello/start-45.html

@@ -0,0 +1,42 @@
+{# 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/base-resp.html" %}
+
+{% add_lang_files "firefox/hello-start-45" %}
+
+{% block extra_meta %}<meta name="robots" content="noindex">{% endblock %}
+{% block page_og_url %}{{ url('firefox.hello') }}{% endblock %}
+
+{% block page_css %}
+  {% stylesheet 'firefox_hello_start_45' %}
+{% endblock %}
+
+{% block page_title_prefix %}{{ _('Firefox Hello') }} — {% endblock %}
+{% block page_title %}{{ _('Made for sharing the Web.') }}{% endblock %}
+{% block page_title_suffix %}{% endblock %}
+{% block body_id %}firefox-hello-start-45{% endblock %}
+{% block body_class %}{% endblock %}
+
+{% block site_header %}{% endblock %}
+
+{% block content %}
+<main role="main">
+  <h1><img src="{{ static('img/firefox/hello/firefox-hello-logo.svg') }}" alt="{{ _('Firefox Hello') }}" width="535"></h1>
+  <section>
+    <h2>{{ _('Made for sharing the Web.') }}</h2>
+    <p>{{ _('Welcome to the all new Firefox Hello. Now when you invite a friend to a session, Firefox Hello will automatically share any Web page you’re viewing.') }} {{ _('Plan. Shop. Decide. Together.') }}</p>
+    {{ high_res_img('firefox/hello/2016/quick.png', {'alt': '', 'width': '45%', 'height': 'auto', 'class': 'screenshot'}) }}
+    {{ high_res_img('firefox/hello/2016/sharing.png', {'alt': '', 'width': '45%', 'height': 'auto', 'class': 'screenshot'}) }}
+  </section>
+</main>
+{% endblock %}
+
+{% block email_form %}{% endblock %}
+
+{% block site_footer %}{% endblock %}
+
+{% block js %}
+  {% javascript 'firefox_hello_start_45' %}
+{% endblock %}

bedrock/firefox/tests/test_base.py

@@ -479,3 +479,27 @@ class TestHelloStartRedirect(TestCase):
         response = self.client.get(self.url, HTTP_USER_AGENT=self.user_agent)
         eq_(response.status_code, 200)
         eq_(response['Cache-Control'], 'max-age=0')
+
+
+@patch.object(fx_views.HelloStartView, 'redirect_to', none_mock)
+@patch('bedrock.firefox.views.l10n_utils.render', return_value=HttpResponse())
+class TestHelloStartView(TestCase):
+    def setUp(self):
+        self.view = fx_views.HelloStartView.as_view()
+        self.rf = RequestFactory(HTTP_USER_AGENT='Firefox')
+
+    @override_settings(DEV=True)
+    def test_old_hello_start_template(self, render_mock):
+        """Should use old Hello FTU template for Firefox 44"""
+        req = self.rf.get('/en-US/firefox/hello/start/')
+        self.view(req, version='44.0')
+        template = render_mock.call_args[0][1]
+        eq_(template, ['firefox/hello/start.html'])
+
+    @override_settings(DEV=True)
+    def test_45_hello_start_template(self, render_mock):
+        """Should use new Hello FTU template for Firefox 45"""
+        req = self.rf.get('/en-US/firefox/hello/start/')
+        self.view(req, version='45.0')
+        template = render_mock.call_args[0][1]
+        eq_(template, ['firefox/hello/start-45.html'])

bedrock/firefox/views.py

@@ -263,6 +263,15 @@ def show_40_firstrun(version):
     return version >= Version('40.0')
 
 
+def show_old_hello_ftu(version):
+    try:
+        version = Version(version)
+    except ValueError:
+        return False
+
+    return version < Version('45.0')
+
+
 class LatestFxView(TemplateView):
 
     """
@@ -439,7 +448,16 @@ def hello(request):
 
 class HelloStartView(LatestFxView):
     non_fx_redirect = 'firefox.hello'
-    template_name = 'firefox/hello/start.html'
+
+    def get_template_names(self):
+        version = self.kwargs.get('version') or ''
+
+        if (show_old_hello_ftu(version)):
+            template = 'firefox/hello/start.html'
+        else:
+            template = 'firefox/hello/start-45.html'
+
+        return [template]
 
 
 class FeedbackView(TemplateView):

bedrock/settings/static_media.py

@@ -350,6 +350,12 @@ PIPELINE_CSS = {
         ),
         'output_filename': 'css/firefox_hello_start-bundle.css',
     },
+    'firefox_hello_start_45': {
+        'source_filenames': (
+            'css/firefox/hello/start-45.less',
+        ),
+        'output_filename': 'css/firefox_hello_start_45-bundle.css',
+    },
     'firefox_hello': {
         'source_filenames': (
             'css/firefox/family-nav.less',
@@ -1253,13 +1259,13 @@ PIPELINE_JS = {
         ),
         'output_filename': 'js/firefox_hello_start-bundle.js',
     },
-    'firefox_hello_start_minimal': {
+    'firefox_hello_start_45': {
         'source_filenames': (
+            'js/base/search-params.js',
             'js/firefox/australis/australis-uitour.js',
-            'js/firefox/hello/hello-ftu-minimal.js',
-            'js/firefox/hello/start-minimal.js',
+            'js/firefox/hello/start-45.js',
         ),
-        'output_filename': 'js/firefox_hello_start_minimal-bundle.js',
+        'output_filename': 'js/firefox_hello_start_45-bundle.js',
     },
     'firefox_hello': {
         'source_filenames': (

media/css/firefox/hello/index-2016.less

@@ -5,6 +5,8 @@
 @import "../../sandstone/lib.less";
 @import "../newsletter-test.less";
 
+/*! updated 2016-03-02 */
+
 #outer-wrapper {
     background: @mozIDBlue;
 }

media/css/firefox/hello/start-45.less

@@ -0,0 +1,96 @@
+// 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";
+
+html,
+body {
+    height: 100%;
+}
+
+#outer-wrapper {
+    .aurora-bars(#c3dcf2, lighten(#c3dcf2, 3%));
+    min-height: 100%;
+    border: none;
+    padding: 0;
+    margin: 0;
+}
+
+#wrapper {
+    height: 100%;
+    overflow: hidden;
+    padding: 0;
+}
+
+h1 {
+    margin: (@baseLine * 4) @baseLine @baseLine;
+
+    img {
+        max-width: 100%;
+        height: auto;
+    }
+}
+
+h2 {
+    margin: @baseLine;
+    .font-size(48px);
+    color: #4b4c51;
+    text-shadow: none;
+}
+
+p {
+    margin: @baseLine;
+    .open-sans-light;
+    .font-size(20px);
+    color: #4b4c51;
+}
+
+main {
+    width: 65%;
+    margin-bottom: @baseLine * 4;
+
+    section img {
+        margin-left: @baseLine;
+    }
+}
+
+.html-rtl {
+    main section img {
+        margin-left: 0;
+        margin-right: @baseLine;
+    }
+}
+
+@media only screen and (min-width: @breakTablet) and (max-width: @breakDesktop) {
+    main {
+        width: 65%;
+    }
+}
+
+@media only screen and (max-width: @breakTablet) {
+
+    main {
+        width: 100%;
+        text-align: center;
+
+        section img {
+            width: 70%;
+            margin: 0 0 @baseLine;
+        }
+    }
+
+    .html-rtl {
+        main section img {
+            margin: 0 0 @baseLine;
+        }
+    }
+
+    h2 {
+        .font-size(32px);
+    }
+
+    p {
+        .font-size(16px);
+    }
+}

media/js/firefox/hello/start-45.js

@@ -0,0 +1,108 @@
+/* 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/. */
+
+ /* globals Promise */
+
+;(function($, Mozilla) {
+    'use strict';
+
+    var $window = $(window);
+    var $document = $(document);
+    var client = Mozilla.Client;
+    var params = new window._SearchParams();
+    // if URL query param noopenpanel=1 exists then don't open the Hello menu.
+    var shouldOpenPanel = params.get('noopenpanel') === 1 ? false : true;
+    var chatWindowOpened = false;
+
+    /**
+     * Queries the icon targets available to UITour.
+     * @returns Promise (resolve) Array of available targets.
+     */
+    function getAvailableTargets() {
+        return new Promise(function(resolve, reject) {
+            Mozilla.UITour.getConfiguration('availableTargets', function(config) {
+                if (config && config.targets) {
+                    resolve(config.targets);
+                } else {
+                    reject('UITour: targets property not found.');
+                }
+            });
+        });
+    }
+
+    function openHelloMenu() {
+        Mozilla.UITour.showMenu('loop', function() {
+            $document.one('click.hello', closeHelloMenu);
+            $window.one('resize.hello', closeHelloMenu);
+            $document.on('visibilitychange.hello', handleVisibilityChange);
+        });
+    }
+
+    function closeHelloMenu() {
+        Mozilla.UITour.hideMenu('loop');
+        $document.off('click.hello');
+        $document.off('visibilitychange.hello');
+        $window.off('resize.hello');
+    }
+
+    function trackInteraction(action) {
+        window.dataLayer.push({
+            'event': 'hello-interactions',
+            'category': '/hello/start interactions',
+            'location': 'tour',
+            'browserAction': action
+        });
+    }
+
+    function handleHelloEvents(event) {
+        switch(event) {
+        case 'Loop:ChatWindowOpened':
+            // track in GA the first time the chat window is opened.
+            if (!chatWindowOpened) {
+                trackInteraction('StartConversation-Tour');
+                chatWindowOpened = true;
+            }
+            break;
+        case 'Loop:RoomURLCopied':
+            trackInteraction('URLCopied-Tour');
+            break;
+        case 'Loop:RoomURLEmailed':
+            trackInteraction('URLEmailed-Tour');
+            break;
+        case 'Loop:RoomURLShared':
+            trackInteraction('URLShared-Tour');
+            break;
+        }
+    }
+
+    function bindHelloEvents() {
+        Mozilla.UITour.observe(handleHelloEvents);
+    }
+
+    function unbindHelloEvents() {
+        Mozilla.UITour.observe(null);
+    }
+
+    function handleVisibilityChange() {
+        if (document.hidden) {
+            closeHelloMenu();
+            unbindHelloEvents();
+        } else {
+            bindHelloEvents();
+        }
+    }
+
+
+    if (client.isFirefoxDesktop && shouldOpenPanel) {
+        getAvailableTargets().then(function(targets) {
+            // Only open the Hello menu if target is in the user pallet.
+            if (targets && targets.indexOf('loop') > -1) {
+                openHelloMenu();
+                bindHelloEvents();
+                trackInteraction('GetStarted');
+            }
+        });
+    }
+
+})(window.jQuery, window.Mozilla);