[fix bug 1109132] Implement Firefox Hello FTUE

Author: alexgibson

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

@@ -0,0 +1,83 @@
+{# 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" %}
+
+{% set_lang_files "firefox/hello" %}
+
+{% block extra_meta %}<meta name="robots" content="noindex">{% endblock %}
+
+{% block site_css %}
+  {{ css('firefox_hello_start') }}
+{% endblock %}
+
+{% block page_title_prefix %}{% endblock %}
+{% block page_title %}{{ _('Firefox Hello') }}{% endblock %}
+{% block page_title_suffix %}{% endblock %}
+{% block body_id %}firefox-hello-start{% endblock %}
+{% block body_class %}sky{% endblock %}
+
+{% block string_data %}
+data-get-started-title="{{ _('Welcome to Hello') }}"
+data-get-started-text="{{ _('Open a video conversation with a single click, then invite a friend to join.') }}"
+data-invite-title="{{ _('Share your link with a friend') }}"
+data-invite-text="{{ _('They don’t even need Firefox to join. They just need to click the link.') }}"
+data-shared-title="{{ _('No need to wait around') }}"
+data-shared-text="{{ _('Once your friend clicks the link, the Hello icon will change to blue, letting you know they’re there.') }}"
+data-room-list-title="{{ _('You have a conversation waiting') }}"
+data-room-list-text="{{ _('Click now to join and say hello.') }}"
+{% endblock %}
+
+{% block site_header %}{% endblock %}
+
+{% block content %}
+  <div class="spacer"></div>
+  <main role="main" data-incoming-conversation="{{ incoming_conversation }}">
+    <h1>{{ high_res_img('img/firefox/hello/firefox-hello-logo.png?01-2015', {'alt': _('Firefox Hello'), 'width': '535', 'height': '88'}) }}</h1>
+    <section class="default">
+      <h2>{{ _('The easiest way to have a free video conversation with anyone, anywhere') }}</h2>
+      <ol>
+        <li>{{ _('Start a conversation right from Firefox') }}</li>
+        <li>{{ _('Invite a friend by sending them a link') }}</li>
+        <li>{{ _('The Hello icon will change to blue once they’ve joined') }}</li>
+      </ol>
+      <aside>
+        <ul>
+          <li><a rel="external" href="https://support.mozilla.org/kb/firefox-hello-video-and-voice-conversations-online" class="more">{{ _('Need help? Get support here') }}</a></li>
+          <li><a href="{{ url('firefox.hello') }}" class="more">{{ _('Learn all about Hello') }}</a></li>
+        </ul>
+        <ul>
+          <li><a rel="external" href="https://support.mozilla.org/kb/create-and-manage-your-contacts-list-firefox-hello" class="more">{{ _('Do more with a Firefox Account') }}</a></li>
+          {# Removing link for now, as per Bug 1109132#c14
+          <li><a href="#" class="more">{{ _('Tell a friend about Hello') }}</a></li>
+          #}
+        </ul>
+      </aside>
+    </section>
+    <section class="start">
+      <h2>{{ _('The easiest way to connect for free over video') }}</h2>
+      <p>{{ _('Start right from Firefox and invite anyone, anywhere to have a conversation. All they have to do is click a link to join. There’s no account or sign-in required.') }}</p>
+    </section>
+    <section class="end">
+      <h2>{{ _('You’ve started your first conversation. Wasn’t that easy?') }}</h2>
+      <ul>
+        {# Removing link for now, as per Bug 1109132#c14
+        <li><a href="#" class="more">{{ _('Tell a friend about Hello') }}</a></li>
+        #}
+        <li><a rel="external" href="https://support.mozilla.org/kb/firefox-hello-video-and-voice-conversations-online" class="more">{{ _('Need help? Get support here') }}</a></li>
+        <li><a href="{{ url('firefox.hello') }}" class="more">{{ _('Learn all about Hello') }}</a></li>
+        <li><a rel="external" href="https://support.mozilla.org/kb/create-and-manage-your-contacts-list-firefox-hello" class="more">{{ _('Do more with a Firefox Account') }}</a></li>
+      </ul>
+    </section>
+  </main>
+
+{% endblock %}
+
+{% block email_form %}{% endblock %}
+
+{% block site_footer %}{% endblock %}
+
+{% block js %}
+  {{ js('firefox_hello_start') }}
+{% endblock %}

bedrock/firefox/tests/test_base.py

@@ -1065,3 +1065,30 @@ def test_whatsnew_search_tour_oldversion(self):
         # if there's no oldversion parameter, show no tour
         response = self.client.get(self.url, HTTP_USER_AGENT=self.user_agent)
         self.assertNotIn(self.expected, response.content)
+
+
+class TestHelloStartView(TestCase):
+    def setUp(self):
+        self.user_agent = ('Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:35.0) '
+                      'Gecko/20100101 Firefox/35.0')
+        self.url = reverse('firefox.hello.start', args=['35.0'])
+
+    def test_fx_hello_no_conversation(self):
+        """Should identify when there is no conversation"""
+
+        response = self.client.get(self.url, HTTP_USER_AGENT=self.user_agent)
+        self.assertIn('data-incoming-conversation="none"', response.content)
+
+    def test_fx_hello_conversation_open(self):
+        """Should identify when a conversation is open"""
+
+        response = self.client.get(self.url + '?incomingConversation=open',
+            HTTP_USER_AGENT=self.user_agent)
+        self.assertIn('data-incoming-conversation="open"', response.content)
+
+    def test_fx_hello_conversation_waiting(self):
+        """Should identify when a conversation is waiting"""
+
+        response = self.client.get(self.url + '?incomingConversation=waiting',
+            HTTP_USER_AGENT=self.user_agent)
+        self.assertIn('data-incoming-conversation="waiting"', response.content)

bedrock/firefox/urls.py

@@ -18,6 +18,7 @@
 firstrun_re = latest_re % (version_re, 'firstrun')
 whatsnew_re = latest_re % (version_re, 'whatsnew')
 tour_re = latest_re % (version_re, 'tour')
+hello_start_re = latest_re % (version_re, 'hello/start')
 product_re = '(?P<product>firefox|mobile)'
 channel_re = '(?P<channel>beta|aurora|developer|organizations)'
 releasenotes_re = latest_re % (version_re, r'(aurora|release)notes')
@@ -65,6 +66,7 @@
     url(firstrun_re, views.FirstrunView.as_view(), name='firefox.firstrun'),
     url(whatsnew_re, views.WhatsnewView.as_view(), name='firefox.whatsnew'),
     url(tour_re, views.TourView.as_view(), name='firefox.tour'),
+    url(hello_start_re, views.HelloStartView.as_view(), name='firefox.hello.start'),
     url(r'^firefox/partners/$', views.firefox_partners,
         name='firefox.partners.index'),
 

bedrock/firefox/views.py

@@ -495,3 +495,14 @@ def hello(request):
     }
 
     return l10n_utils.render(request, 'firefox/hello.html', {'video_url': videos.get(request.locale, '')})
+
+
+class HelloStartView(LatestFxView):
+
+    template_name = 'firefox/hello/start.html'
+
+    def get_context_data(self, **kwargs):
+        ctx = super(HelloStartView, self).get_context_data(**kwargs)
+        incoming = self.request.GET.get('incomingConversation') or 'none'
+        ctx['incoming_conversation'] = incoming
+        return ctx

bedrock/settings/base.py

@@ -304,6 +304,10 @@ def JINJA_CONFIG():
             'css/firefox/menu-resp.less',
             'css/firefox/developer.less',
         ),
+        'firefox_hello_start': (
+            'css/sandstone/sandstone-resp.less',
+            'css/firefox/hello/start.less',
+        ),
         'firefox_new': (
             'css/sandstone/sandstone-resp.less',
             'css/firefox/template-resp.less',
@@ -742,6 +746,10 @@ def JINJA_CONFIG():
             'js/base/mozilla-modal.js',
             'js/firefox/dev-firstrun.js',
         ),
+        'firefox_hello_start': (
+            'js/firefox/australis/australis-uitour.js',
+            'js/firefox/hello/start.js',
+        ),
         'firefox_new': (
             'js/libs/socialshare.min.js',
             'js/libs/modernizr.custom.csstransitions.js',

etc/httpd/global.conf

@@ -871,9 +871,8 @@ RewriteRule ^/hacking/notification/acceptance-email.txt$ https://static.mozilla.
 # bug 1071959
 RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?firefox/independent(/?.*)$ /b/$1firefox/independent$2 [PT]
 
-# bug 1093985, 1105664, remove this once the Firefox Hello product page is ready
-RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?firefox/hello(/?.*)$ https://support.mozilla.org/kb/respond-firefox-hello-invitation-guest-mode [L,R=temp]
-RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?firefox/([3-9]\d\.\d(?:a1|a2|beta|\.\d)?)/hello/start/?$ https://support.mozilla.org/kb/firefox-hello-make-and-receive-calls-guest-mode [L,R=temp]
+# bug 1109132
+RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?firefox(/(?:\d+\.\d+\.?(?:\d+)?\.?(?:\d+)?(?:[a|b]?)(?:\d*)(?:pre)?(?:\d)?))?/hello/start(/?)$ /b/$1firefox$2/hello/start$3 [PT]
 
 # bug 1088752
 RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?shapeoftheweb(/?.*)$ /b/$1shapeoftheweb$2 [PT]

media/css/firefox/hello/start.less

@@ -0,0 +1,185 @@
+// 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%;
+}
+
+h1 {
+    margin: (@baseLine * 14) @baseLine @baseLine;
+
+    img {
+        max-width: 100%;
+        height: auto;
+    }
+}
+
+h2 {
+    margin: @baseLine;
+    .font-size(48px);
+}
+
+p {
+    margin: @baseLine;
+    .open-sans-light;
+    .font-size(20px);
+}
+
+ol {
+    list-style-type: none;
+    margin: @baseLine;
+    padding: 0;
+    .open-sans-light;
+    .font-size(24px);
+    font-style: italic;
+    counter-reset: steps-counter;
+
+    li {
+        position: relative;
+        margin: (@baseLine / 2) 0;
+        line-height: 1.5;
+        padding-left: 2em;
+
+        &:before {
+            position: absolute;
+            top: 0;
+            left: 0;
+            content: counter(steps-counter);
+            counter-increment: steps-counter;
+            float: left;
+            width: 1.5em;
+            height: 1.5em;
+            color: #fff;
+            background: #00A9DC;
+            border-radius: 100%;
+            text-align: center;
+            font-style: normal;
+            .open-sans;
+        }
+    }
+}
+
+ul {
+    list-style-type: none;
+    margin: @baseLine;
+    padding: 0;
+    .font-size(@largeFontSize);
+
+    li {
+        margin: (@baseLine / 2) 0;
+        padding: 0;
+    }
+}
+
+main {
+    width: 70%;
+    margin-bottom: @baseLine * 4;
+}
+
+.js main {
+    visibility: hidden;
+}
+
+.spacer {
+    width: 30%;
+    height: 700px;
+    float: right;
+}
+
+aside {
+    position: relative;
+    padding: @baseLine;
+    .clearfix();
+    ul {
+        float: left;
+        width: 50%;
+        margin: 0;
+    }
+}
+
+#outer-wrapper {
+    min-height: 100%;
+    border: none;
+    padding: 0;
+    margin: 0;
+}
+
+#wrapper {
+    height: 100%;
+    overflow: hidden;
+    padding: 0;
+}
+
+.start,
+.end {
+    display: none;
+}
+
+.html-rtl {
+    .spacer {
+        float: left;
+    }
+
+    ol li {
+        padding-left: 0;
+        padding-right: 2em;
+
+        &:before {
+            left: auto;
+            right: 0;
+        }
+    }
+
+    aside ul {
+        float: right;
+    }
+}
+
+@media only screen and (min-width: @breakTablet) and (max-width: @breakDesktop) {
+    main {
+        width: 65%;
+    }
+
+    .spacer {
+        width: 35%;
+    }
+}
+
+@media only screen and (max-width: @breakTablet) {
+
+    main {
+        width: 100%;
+    }
+
+    .spacer {
+        display: none;
+        float: none;
+    }
+
+    h2 {
+        .font-size(32px);
+    }
+
+    p {
+        .font-size(16px);
+    }
+
+    aside ul {
+        float: none;
+        width: 100%;
+    }
+
+}
+
+@media only screen and (max-height: 600px) {
+    h2 {
+        .font-size(32px);
+    }
+    p {
+        .font-size(18px);
+    }
+}