Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
[fix bug 1109132] Implement Firefox Hello FTUE
  • Loading branch information
alexgibson committed Jan 12, 2015
1 parent 023ddcb commit 75e0337
Show file tree
Hide file tree
Showing 10 changed files with 682 additions and 3 deletions.
83 changes: 83 additions & 0 deletions 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 %}
27 changes: 27 additions & 0 deletions bedrock/firefox/tests/test_base.py
Expand Up @@ -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)
2 changes: 2 additions & 0 deletions bedrock/firefox/urls.py
Expand Up @@ -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')
Expand Down Expand Up @@ -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'),

Expand Down
11 changes: 11 additions & 0 deletions bedrock/firefox/views.py
Expand Up @@ -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
8 changes: 8 additions & 0 deletions bedrock/settings/base.py
Expand Up @@ -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',
Expand Down Expand Up @@ -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',
Expand Down
5 changes: 2 additions & 3 deletions etc/httpd/global.conf
Expand Up @@ -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]
185 changes: 185 additions & 0 deletions 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);
}
}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added media/img/firefox/hello/firefox-hello-logo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 75e0337

Please sign in to comment.