Permalink
Browse files

[fix bug 1109132] Implement Firefox Hello FTUE

  • Loading branch information...
1 parent 023ddcb commit 75e0337dc5eccd2f29bfa2b512624fd31ad11116 @alexgibson alexgibson committed Nov 20, 2014
@@ -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 %}
@@ -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)
@@ -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'),
@@ -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
@@ -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',
@@ -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]
@@ -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);
+ }
+}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.

0 comments on commit 75e0337

Please sign in to comment.