Skip to content

Commit 75e0337

Browse files
committed
[fix bug 1109132] Implement Firefox Hello FTUE
1 parent 023ddcb commit 75e0337

File tree

10 files changed

+682
-3
lines changed

10 files changed

+682
-3
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
{# This Source Code Form is subject to the terms of the Mozilla Public
2+
# License, v. 2.0. If a copy of the MPL was not distributed with this
3+
# file, You can obtain one at http://mozilla.org/MPL/2.0/. -#}
4+
5+
{% extends "/firefox/base-resp.html" %}
6+
7+
{% set_lang_files "firefox/hello" %}
8+
9+
{% block extra_meta %}<meta name="robots" content="noindex">{% endblock %}
10+
11+
{% block site_css %}
12+
{{ css('firefox_hello_start') }}
13+
{% endblock %}
14+
15+
{% block page_title_prefix %}{% endblock %}
16+
{% block page_title %}{{ _('Firefox Hello') }}{% endblock %}
17+
{% block page_title_suffix %}{% endblock %}
18+
{% block body_id %}firefox-hello-start{% endblock %}
19+
{% block body_class %}sky{% endblock %}
20+
21+
{% block string_data %}
22+
data-get-started-title="{{ _('Welcome to Hello') }}"
23+
data-get-started-text="{{ _('Open a video conversation with a single click, then invite a friend to join.') }}"
24+
data-invite-title="{{ _('Share your link with a friend') }}"
25+
data-invite-text="{{ _('They don’t even need Firefox to join. They just need to click the link.') }}"
26+
data-shared-title="{{ _('No need to wait around') }}"
27+
data-shared-text="{{ _('Once your friend clicks the link, the Hello icon will change to blue, letting you know they’re there.') }}"
28+
data-room-list-title="{{ _('You have a conversation waiting') }}"
29+
data-room-list-text="{{ _('Click now to join and say hello.') }}"
30+
{% endblock %}
31+
32+
{% block site_header %}{% endblock %}
33+
34+
{% block content %}
35+
<div class="spacer"></div>
36+
<main role="main" data-incoming-conversation="{{ incoming_conversation }}">
37+
<h1>{{ high_res_img('img/firefox/hello/firefox-hello-logo.png?01-2015', {'alt': _('Firefox Hello'), 'width': '535', 'height': '88'}) }}</h1>
38+
<section class="default">
39+
<h2>{{ _('The easiest way to have a free video conversation with anyone, anywhere') }}</h2>
40+
<ol>
41+
<li>{{ _('Start a conversation right from Firefox') }}</li>
42+
<li>{{ _('Invite a friend by sending them a link') }}</li>
43+
<li>{{ _('The Hello icon will change to blue once they’ve joined') }}</li>
44+
</ol>
45+
<aside>
46+
<ul>
47+
<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>
48+
<li><a href="{{ url('firefox.hello') }}" class="more">{{ _('Learn all about Hello') }}</a></li>
49+
</ul>
50+
<ul>
51+
<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>
52+
{# Removing link for now, as per Bug 1109132#c14
53+
<li><a href="#" class="more">{{ _('Tell a friend about Hello') }}</a></li>
54+
#}
55+
</ul>
56+
</aside>
57+
</section>
58+
<section class="start">
59+
<h2>{{ _('The easiest way to connect for free over video') }}</h2>
60+
<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>
61+
</section>
62+
<section class="end">
63+
<h2>{{ _('You’ve started your first conversation. Wasn’t that easy?') }}</h2>
64+
<ul>
65+
{# Removing link for now, as per Bug 1109132#c14
66+
<li><a href="#" class="more">{{ _('Tell a friend about Hello') }}</a></li>
67+
#}
68+
<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>
69+
<li><a href="{{ url('firefox.hello') }}" class="more">{{ _('Learn all about Hello') }}</a></li>
70+
<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>
71+
</ul>
72+
</section>
73+
</main>
74+
75+
{% endblock %}
76+
77+
{% block email_form %}{% endblock %}
78+
79+
{% block site_footer %}{% endblock %}
80+
81+
{% block js %}
82+
{{ js('firefox_hello_start') }}
83+
{% endblock %}

bedrock/firefox/tests/test_base.py

+27
Original file line numberDiff line numberDiff line change
@@ -1065,3 +1065,30 @@ def test_whatsnew_search_tour_oldversion(self):
10651065
# if there's no oldversion parameter, show no tour
10661066
response = self.client.get(self.url, HTTP_USER_AGENT=self.user_agent)
10671067
self.assertNotIn(self.expected, response.content)
1068+
1069+
1070+
class TestHelloStartView(TestCase):
1071+
def setUp(self):
1072+
self.user_agent = ('Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:35.0) '
1073+
'Gecko/20100101 Firefox/35.0')
1074+
self.url = reverse('firefox.hello.start', args=['35.0'])
1075+
1076+
def test_fx_hello_no_conversation(self):
1077+
"""Should identify when there is no conversation"""
1078+
1079+
response = self.client.get(self.url, HTTP_USER_AGENT=self.user_agent)
1080+
self.assertIn('data-incoming-conversation="none"', response.content)
1081+
1082+
def test_fx_hello_conversation_open(self):
1083+
"""Should identify when a conversation is open"""
1084+
1085+
response = self.client.get(self.url + '?incomingConversation=open',
1086+
HTTP_USER_AGENT=self.user_agent)
1087+
self.assertIn('data-incoming-conversation="open"', response.content)
1088+
1089+
def test_fx_hello_conversation_waiting(self):
1090+
"""Should identify when a conversation is waiting"""
1091+
1092+
response = self.client.get(self.url + '?incomingConversation=waiting',
1093+
HTTP_USER_AGENT=self.user_agent)
1094+
self.assertIn('data-incoming-conversation="waiting"', response.content)

bedrock/firefox/urls.py

+2
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
firstrun_re = latest_re % (version_re, 'firstrun')
1919
whatsnew_re = latest_re % (version_re, 'whatsnew')
2020
tour_re = latest_re % (version_re, 'tour')
21+
hello_start_re = latest_re % (version_re, 'hello/start')
2122
product_re = '(?P<product>firefox|mobile)'
2223
channel_re = '(?P<channel>beta|aurora|developer|organizations)'
2324
releasenotes_re = latest_re % (version_re, r'(aurora|release)notes')
@@ -65,6 +66,7 @@
6566
url(firstrun_re, views.FirstrunView.as_view(), name='firefox.firstrun'),
6667
url(whatsnew_re, views.WhatsnewView.as_view(), name='firefox.whatsnew'),
6768
url(tour_re, views.TourView.as_view(), name='firefox.tour'),
69+
url(hello_start_re, views.HelloStartView.as_view(), name='firefox.hello.start'),
6870
url(r'^firefox/partners/$', views.firefox_partners,
6971
name='firefox.partners.index'),
7072

bedrock/firefox/views.py

+11
Original file line numberDiff line numberDiff line change
@@ -495,3 +495,14 @@ def hello(request):
495495
}
496496

497497
return l10n_utils.render(request, 'firefox/hello.html', {'video_url': videos.get(request.locale, '')})
498+
499+
500+
class HelloStartView(LatestFxView):
501+
502+
template_name = 'firefox/hello/start.html'
503+
504+
def get_context_data(self, **kwargs):
505+
ctx = super(HelloStartView, self).get_context_data(**kwargs)
506+
incoming = self.request.GET.get('incomingConversation') or 'none'
507+
ctx['incoming_conversation'] = incoming
508+
return ctx

bedrock/settings/base.py

+8
Original file line numberDiff line numberDiff line change
@@ -304,6 +304,10 @@ def JINJA_CONFIG():
304304
'css/firefox/menu-resp.less',
305305
'css/firefox/developer.less',
306306
),
307+
'firefox_hello_start': (
308+
'css/sandstone/sandstone-resp.less',
309+
'css/firefox/hello/start.less',
310+
),
307311
'firefox_new': (
308312
'css/sandstone/sandstone-resp.less',
309313
'css/firefox/template-resp.less',
@@ -742,6 +746,10 @@ def JINJA_CONFIG():
742746
'js/base/mozilla-modal.js',
743747
'js/firefox/dev-firstrun.js',
744748
),
749+
'firefox_hello_start': (
750+
'js/firefox/australis/australis-uitour.js',
751+
'js/firefox/hello/start.js',
752+
),
745753
'firefox_new': (
746754
'js/libs/socialshare.min.js',
747755
'js/libs/modernizr.custom.csstransitions.js',

etc/httpd/global.conf

+2-3
Original file line numberDiff line numberDiff line change
@@ -871,9 +871,8 @@ RewriteRule ^/hacking/notification/acceptance-email.txt$ https://static.mozilla.
871871
# bug 1071959
872872
RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?firefox/independent(/?.*)$ /b/$1firefox/independent$2 [PT]
873873

874-
# bug 1093985, 1105664, remove this once the Firefox Hello product page is ready
875-
RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?firefox/hello(/?.*)$ https://support.mozilla.org/kb/respond-firefox-hello-invitation-guest-mode [L,R=temp]
876-
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]
874+
# bug 1109132
875+
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]
877876

878877
# bug 1088752
879878
RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?shapeoftheweb(/?.*)$ /b/$1shapeoftheweb$2 [PT]

media/css/firefox/hello/start.less

+185
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
// This Source Code Form is subject to the terms of the Mozilla Public
2+
// License, v. 2.0. If a copy of the MPL was not distributed with this
3+
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
4+
5+
@import "../../sandstone/lib.less";
6+
7+
html,
8+
body {
9+
height: 100%;
10+
}
11+
12+
h1 {
13+
margin: (@baseLine * 14) @baseLine @baseLine;
14+
15+
img {
16+
max-width: 100%;
17+
height: auto;
18+
}
19+
}
20+
21+
h2 {
22+
margin: @baseLine;
23+
.font-size(48px);
24+
}
25+
26+
p {
27+
margin: @baseLine;
28+
.open-sans-light;
29+
.font-size(20px);
30+
}
31+
32+
ol {
33+
list-style-type: none;
34+
margin: @baseLine;
35+
padding: 0;
36+
.open-sans-light;
37+
.font-size(24px);
38+
font-style: italic;
39+
counter-reset: steps-counter;
40+
41+
li {
42+
position: relative;
43+
margin: (@baseLine / 2) 0;
44+
line-height: 1.5;
45+
padding-left: 2em;
46+
47+
&:before {
48+
position: absolute;
49+
top: 0;
50+
left: 0;
51+
content: counter(steps-counter);
52+
counter-increment: steps-counter;
53+
float: left;
54+
width: 1.5em;
55+
height: 1.5em;
56+
color: #fff;
57+
background: #00A9DC;
58+
border-radius: 100%;
59+
text-align: center;
60+
font-style: normal;
61+
.open-sans;
62+
}
63+
}
64+
}
65+
66+
ul {
67+
list-style-type: none;
68+
margin: @baseLine;
69+
padding: 0;
70+
.font-size(@largeFontSize);
71+
72+
li {
73+
margin: (@baseLine / 2) 0;
74+
padding: 0;
75+
}
76+
}
77+
78+
main {
79+
width: 70%;
80+
margin-bottom: @baseLine * 4;
81+
}
82+
83+
.js main {
84+
visibility: hidden;
85+
}
86+
87+
.spacer {
88+
width: 30%;
89+
height: 700px;
90+
float: right;
91+
}
92+
93+
aside {
94+
position: relative;
95+
padding: @baseLine;
96+
.clearfix();
97+
ul {
98+
float: left;
99+
width: 50%;
100+
margin: 0;
101+
}
102+
}
103+
104+
#outer-wrapper {
105+
min-height: 100%;
106+
border: none;
107+
padding: 0;
108+
margin: 0;
109+
}
110+
111+
#wrapper {
112+
height: 100%;
113+
overflow: hidden;
114+
padding: 0;
115+
}
116+
117+
.start,
118+
.end {
119+
display: none;
120+
}
121+
122+
.html-rtl {
123+
.spacer {
124+
float: left;
125+
}
126+
127+
ol li {
128+
padding-left: 0;
129+
padding-right: 2em;
130+
131+
&:before {
132+
left: auto;
133+
right: 0;
134+
}
135+
}
136+
137+
aside ul {
138+
float: right;
139+
}
140+
}
141+
142+
@media only screen and (min-width: @breakTablet) and (max-width: @breakDesktop) {
143+
main {
144+
width: 65%;
145+
}
146+
147+
.spacer {
148+
width: 35%;
149+
}
150+
}
151+
152+
@media only screen and (max-width: @breakTablet) {
153+
154+
main {
155+
width: 100%;
156+
}
157+
158+
.spacer {
159+
display: none;
160+
float: none;
161+
}
162+
163+
h2 {
164+
.font-size(32px);
165+
}
166+
167+
p {
168+
.font-size(16px);
169+
}
170+
171+
aside ul {
172+
float: none;
173+
width: 100%;
174+
}
175+
176+
}
177+
178+
@media only screen and (max-height: 600px) {
179+
h2 {
180+
.font-size(32px);
181+
}
182+
p {
183+
.font-size(18px);
184+
}
185+
}
Loading
8.65 KB
Loading

0 commit comments

Comments
 (0)