зеркало из https://github.com/mozilla/bedrock.git
Merge pull request #1778 from mozilla/australis-tour-updates
[fix bug 975099] Australis /firstrun and /whatsnew onboarding tour for beta
This commit is contained in:
Paul McLanahan
Коммит
9d5b044ff8
|
|
@ -4,9 +4,9 @@
|
|||
assets default to windows #}
|
||||
<html class="windows x86 no-js" lang="{{ LANG }}" dir="{{ DIR }}"{% block html_attrs %}{% endblock %}>
|
||||
<head>
|
||||
{% block ga_experiments %}{% endblock %}
|
||||
<meta charset="utf-8">
|
||||
<meta charset="utf-8">{# Note: Must be within first 512 bytes of page #}
|
||||
|
||||
{% block ga_experiments %}{% endblock %}
|
||||
{% block extra_meta %}{% endblock %}
|
||||
|
||||
{% block shared_meta %}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,131 @@
|
|||
{# 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/australis/tour-base.html" %}
|
||||
|
||||
{% block body_id %}firstrun{% endblock %}
|
||||
|
||||
{% block string_data %}
|
||||
{# L10n: This is the label for a button that opens the tour modal dialog #}
|
||||
data-open="{{ _('Open tour') }}"
|
||||
{# L10n: This is the label for a button that closes the tour modal dialog #}
|
||||
data-close="{{ _('Close tour') }}"
|
||||
{# L10n: This is the label for a button that proceeds to the next step of the tour #}
|
||||
data-next="{{ _('Next') }}"
|
||||
{# L10n: This is the text for a call to action that appears in the web page #}
|
||||
data-later-cta="{{ _('Take the tour to explore the latest design and features') }}"
|
||||
{# L10n: This is the label that represents tour step one of four #}
|
||||
data-step1="{{ _('1/4') }}"
|
||||
{# L10n: This is the label that represents tour step two of four #}
|
||||
data-step2="{{ _('2/4') }}"
|
||||
{# L10n: This is the label that represents tour step three of four #}
|
||||
data-step3="{{ _('3/4') }}"
|
||||
{# L10n: This is the label that represents tour step four of four #}
|
||||
data-step4="{{ _('4/4') }}"
|
||||
{% endblock %}
|
||||
|
||||
{% block tour_content %}
|
||||
<div id="ui-tour" tabindex="-1" aria-expanded="false">
|
||||
<div class="tour-inner">
|
||||
<div id="tour-progress" class="progress-step">
|
||||
<div class="logo"></div>
|
||||
<span class="step"></span>
|
||||
<div class="progress" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="4">
|
||||
<span class="indicator"></span>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="ui-tour-list">
|
||||
<li class="tour-step current app-menu visible" data-step="1" data-tip-next="{{ _('<span>Next:</span> Customize') }}">
|
||||
<div class="tour-item">
|
||||
{# L10n: <br> tag below used for formatting only. #}
|
||||
<h2 class="tour-highlight step-target" data-target="appMenu" data-effect="wobble">
|
||||
{{ _('It starts with our new,<br> intuitive menu') }}
|
||||
</h2>
|
||||
<ul>
|
||||
<li>{{ _('The features you use most, all in one place') }}</li>
|
||||
<li>{{ _('Grouped together for quick, easy access') }}</li>
|
||||
<li><a href="#" role="button" class="more">{{ _('Learn how to customize your Firefox') }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{{ high_res_img('img/firefox/australis/diag-menu-bar.jpg?03-2014', {'alt': _('Get your favorite features in one place'), 'width': '300', 'height': '188'}) }}
|
||||
</li>
|
||||
<li class="tour-step app-menu" data-step="2" data-tip-prev="{{ _('<span>Previous:</span> Menu') }}" data-tip-next="{{ _('<span>Next:</span> Addons') }}">
|
||||
<div class="tour-item">
|
||||
{# L10n: <br> tag below used for formatting only. #}
|
||||
<h2 class="tour-highlight step-target" data-target="customize" data-effect="wobble">
|
||||
{{ _('Designed so you can<br> make it your own') }}
|
||||
</h2>
|
||||
<ul>
|
||||
<li>{{ _('How you use the Web is unique') }}</li>
|
||||
<li>{{ _('Move or remove any button to match') }}</li>
|
||||
<li><a href="#" role="button" class="more">{{ _('Add features and styles with add-ons') }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{{ high_res_img('img/firefox/australis/diag-customize.jpg?03-2014', {'alt': _('Add, move or remove features to customize Firefox to meet your needs'), 'width': '300', 'height': '188'}) }}
|
||||
</li>
|
||||
<li class="tour-step app-menu" data-step="3" data-tip-prev="{{ _('<span>Previous:</span> Customize') }}" data-tip-next="{{ _('<span>Next:</span> Bookmarks') }}">
|
||||
<div class="tour-item">
|
||||
{# L10n: <br> tag below used for formatting only. #}
|
||||
<h2 class="tour-highlight step-target" data-target="addons" data-effect="wobble">
|
||||
{{ _('Thousands of ways to<br> make Firefox do more') }}
|
||||
</h2>
|
||||
<ul>
|
||||
<li>{{ _('Get help with just about anything online') }}</li>
|
||||
<li>{{ _('Easy to find, use and manage') }}</li>
|
||||
<li><a href="#" role="button" class="more">{{ _('Use the star to create bookmarks') }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{{ high_res_img('img/firefox/australis/diag-addons.jpg?03-2014', {'alt': _('Get your favorite features in one place'), 'width': '300', 'height': '188'}) }}
|
||||
</li>
|
||||
<li class="tour-step" data-step="4" data-tip-prev="{{ _('<span>Previous:</span> Addons') }}">
|
||||
<div class="tour-item">
|
||||
{# L10n: <br> tag below used for formatting only. #}
|
||||
<h2 class="tour-highlight step-target" data-target="bookmarks" data-effect="wobble">
|
||||
{{ _('Your favorite sites<br> are closer than ever') }}
|
||||
</h2>
|
||||
<ul>
|
||||
<li>{{ _('Add and view bookmarks from the same spot') }}</li>
|
||||
<li>{{ _('It only takes a single click to save a site') }}</li>
|
||||
<li><a href="#" role="button" class="more">{{ _('Enjoy seamless browsing between devices with Sync') }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{{ high_res_img('img/firefox/australis/diag-bookmarks.jpg?03-2014', {'alt': _('Get your favorite features in one place'), 'width': '300', 'height': '188'}) }}
|
||||
</li>
|
||||
</ul>
|
||||
<div class="compact-title"></div>
|
||||
<div class="cta">
|
||||
<button type="button" aria-controls="ui-tour">{{ _('Start browsing') }}</button>
|
||||
</div>
|
||||
<div class="tour-tip"></div>
|
||||
<div class="ui-tour-controls" aria-controls="ui-tour tour-content tour-progress">
|
||||
<button class="step prev">{{ _('Previous') }}</button>
|
||||
<button class="step next">{{ _('Next') }}</button>
|
||||
<button class="close">{{ _('Close') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block tour_mask %}
|
||||
<div id="ui-tour-mask" tabindex="-1">
|
||||
<div class="mask-inner">
|
||||
<div class="logo"></div>
|
||||
<div class="stage">
|
||||
<h1>
|
||||
<span class="lead">{{ _('Welcome to the') }}</span>
|
||||
<span class="main">{{ _('new Firefox') }}</span>
|
||||
</h1>
|
||||
<p>{{ _('The fast, flexible browser you can trust.') }}</p>
|
||||
<div class="menu">
|
||||
<button id="start-tour-btn" class="button-green">{{ _('Take a tour') }}</button>
|
||||
<button id="postpone-tour-btn">{{ _('Not now') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
{{ js('firefox_australis_tour_firstrun') }}
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
{# 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.html" %}
|
||||
|
||||
{% block extra_meta %}<meta name="robots" content="noindex">{% endblock %}
|
||||
|
||||
{% block page_title_prefix %}{% endblock %}
|
||||
{% block page_title %}{{ _('Welcome to the new Firefox') }}{% endblock %}
|
||||
{% block page_title_suffix %}{% endblock %}
|
||||
{% block body_class %}sky{% endblock %}
|
||||
|
||||
{% block site_css %}
|
||||
{{ css('firefox_australis_tour') }}
|
||||
{% endblock %}
|
||||
|
||||
{% block string_data %}{% endblock %}
|
||||
|
||||
{% block site_header %}
|
||||
<header id="masthead">
|
||||
<a href="{{ url('mozorg.home') }}" id="tabzilla">Mozilla</a>
|
||||
{% block site_header_nav %}{% endblock %}
|
||||
{% block site_header_logo %}{% endblock %}
|
||||
{% block breadcrumbs %}{% endblock %}
|
||||
</header>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{# begin page content #}
|
||||
<main role="main">
|
||||
<header>
|
||||
<h1>
|
||||
<span class="lead">{{ _('Welcome to the') }}</span>
|
||||
<span class="main">{{ _('new Firefox') }}</span>
|
||||
</h1>
|
||||
<p>{{ _('The fast, flexible browser you can trust.') }}</p>
|
||||
</header>
|
||||
<div class="sync">
|
||||
<section>
|
||||
<h2>{{ _('Keep your Firefox in Sync') }}</h2>
|
||||
<p>{{ _('Instantly make Firefox your own wherever you use it. Access your bookmarks, history, passwords and more from any device.')}}
|
||||
<div class="sync-cta">
|
||||
<button class="button">{{ _('Get started with Sync') }}</button>
|
||||
<small>{{ _('Create an account from the menu') }}</small>
|
||||
</div>
|
||||
<a id="survey-link" href="https://www.surveygizmo.com/s3/1578454/Firefox-29-Beta-Survey" target="_blank" title="{{ _('Opens new window') }}">
|
||||
{{ _('Take a quick survey about the new Firefox') }}
|
||||
</a>
|
||||
</section>
|
||||
<div class="sync-anim">
|
||||
<div class="cloud">
|
||||
<div class="sync-arrows"></div>
|
||||
<div class="checkmark"></div>
|
||||
</div>
|
||||
<div class="device laptop">
|
||||
<div class="inner">
|
||||
<div class="icon logo"></div>
|
||||
<div class="icon history"></div>
|
||||
<div class="icon bookmarks"></div>
|
||||
<div class="icon passwords"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device tablet">
|
||||
<div class="inner">
|
||||
<div class="icon logo"></div>
|
||||
<div class="icon history"></div>
|
||||
<div class="icon bookmarks"></div>
|
||||
<div class="icon passwords"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device phone">
|
||||
<div class="inner">
|
||||
<div class="icon logo"></div>
|
||||
<div class="icon history"></div>
|
||||
<div class="icon bookmarks"></div>
|
||||
<div class="icon passwords"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="learn-more billboard">
|
||||
<h3>{{ _('Learn more about the new Firefox') }}</h3>
|
||||
<ul>
|
||||
<li><a href="https://support.mozilla.org/products/firefox" target="_blank" title="{{ _('Opens new window') }}">{{ _('Need help?') }}</a></li>
|
||||
<li><a href="http://www.mozilla.org/privacy/you/">{{ _('Putting your privacy first') }}</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="https://support.mozilla.org/kb/learn-more-about-the-design-of-new-firefox" target="_blank" title="{{ _('Opens new window') }}">{{ _('Learn about the new design') }}</a></li>
|
||||
<li><a href="https://support.mozilla.org/kb/common-questions-after-updating-to-new-firefox" target="_blank" title="{{ _('Opens new window') }}">{{ _('Frequently asked questions') }}</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="https://support.mozilla.org/kb/what-happened-to-the-add-on-bar" target="_blank" title="{{ _('Opens new window') }}">{{ _('Where did my add-on bar go?') }}</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
{# end page content #}
|
||||
|
||||
{% block tour_content %}{% endblock %}
|
||||
|
||||
{% block tour_mask %}{% endblock %}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block email_form %}{% endblock %}
|
||||
{% block js %}{% endblock %}
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
{# 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/australis/tour-base.html" %}
|
||||
|
||||
{% block ga_experiments %}
|
||||
<!-- Google Analytics Content Experiment code -->
|
||||
<script>function utmx_section(){}function utmx(){}(function(){var
|
||||
k='71153379-35',d=document,l=d.location,c=d.cookie;
|
||||
if(l.search.indexOf('utm_expid='+k)>0)return;
|
||||
function f(n){if(c){var i=c.indexOf(n+'=');if(i>-1){var j=c.
|
||||
indexOf(';',i);return escape(c.substring(i+n.length+1,j<0?c.
|
||||
length:j))}}}var x=f('__utmx'),xx=f('__utmxx'),h=l.hash;d.write(
|
||||
'<sc'+'ript src="'+'http'+(l.protocol=='https:'?'s://ssl':
|
||||
'://www')+'.google-analytics.com/ga_exp.js?'+'utmxkey='+k+
|
||||
'&utmx='+(x?x:'')+'&utmxx='+(xx?xx:'')+'&utmxtime='+new Date().
|
||||
valueOf()+(h?'&utmxhash='+escape(h.substr(1)):'')+
|
||||
'" type="text/javascript" charset="utf-8"><\/sc'+'ript>')})();
|
||||
</script><script>utmx('url','A/B');</script>
|
||||
<!-- End of Google Analytics Content Experiment code -->
|
||||
{% endblock %}
|
||||
|
||||
{% block body_id %}whatsnew{% endblock %}
|
||||
|
||||
{% block string_data %}
|
||||
{# L10n: This is the label for a button that opens the tour modal dialog #}
|
||||
data-open="{{ _('Open tour') }}"
|
||||
{# L10n: This is the label for a button that closes the tour modal dialog #}
|
||||
data-close="{{ _('Close tour') }}"
|
||||
{# L10n: This is the label for a button that proceeds to the next step of the tour #}
|
||||
data-next="{{ _('Next') }}"
|
||||
{# L10n: This is the label for a button that starts the tour #}
|
||||
data-start="{{ _('Let’s go') }}"
|
||||
{# L10n: This is the label for a button that delays starting the tour #}
|
||||
data-later="{{ _('Not now') }}"
|
||||
{# L10n: This is the title for a door-hanger menu that shows in the browser chrome #}
|
||||
data-title="{{ _('See what’s changed') }}"
|
||||
{# L10n: This is the text for a door-hanger menu that shows in the browser chrome #}
|
||||
data-text="{{ _('It starts with the completely redesigned menu.') }}"
|
||||
{# L10n: This is the text for a call to action that appears in the web page #}
|
||||
data-later-cta="{{ _('Take the tour to explore the latest design and features') }}"
|
||||
{# L10n: This is the label that represents tour step one of four #}
|
||||
data-step1="{{ _('1/4') }}"
|
||||
{# L10n: This is the label that represents tour step two of four #}
|
||||
data-step2="{{ _('2/4') }}"
|
||||
{# L10n: This is the label that represents tour step three of four #}
|
||||
data-step3="{{ _('3/4') }}"
|
||||
{# L10n: This is the label that represents tour step four of four #}
|
||||
data-step4="{{ _('4/4') }}"
|
||||
{% endblock %}
|
||||
|
||||
{% block tour_content %}
|
||||
<div id="ui-tour" tabindex="-1" aria-expanded="false">
|
||||
<div class="tour-inner">
|
||||
<div id="tour-progress" class="progress-step">
|
||||
<div class="logo"></div>
|
||||
<span class="step"></span>
|
||||
<div class="progress" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="4">
|
||||
<span class="indicator"></span>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="ui-tour-list">
|
||||
<li class="tour-step current app-menu visible" data-step="1" data-tip-next="{{ _('<span>Next:</span> Customize') }}">
|
||||
<div class="tour-item">
|
||||
{# L10n: <br> tag below used for formatting only. #}
|
||||
<h2 class="tour-highlight step-target" data-target="appMenu" data-effect="wobble">
|
||||
{{ _('Find your favorite features<br> in the menu') }}
|
||||
</h2>
|
||||
<ul>
|
||||
<li>{{ _('Conveniently located in one place') }}</li>
|
||||
<li>{{ _('Includes what you use most') }}</li>
|
||||
<li>{{ _('Easy for you to make it your own') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
{{ high_res_img('img/firefox/australis/diag-menu-bar.jpg?03-2014', {'alt': _('Get your favorite features in one place'), 'width': '300', 'height': '188'}) }}
|
||||
</li>
|
||||
<li class="tour-step app-menu" data-step="2" data-tip-prev="{{ _('<span>Previous:</span> Menu') }}" data-tip-next="{{ _('<span>Next:</span> Add-ons') }}">
|
||||
<div class="tour-item">
|
||||
{# L10n: <br> tag below used for formatting only. #}
|
||||
<h2 class="tour-highlight step-target" data-target="customize" data-effect="wobble">
|
||||
{{ _('Customize it to match<br> how you browse') }}
|
||||
</h2>
|
||||
<ul>
|
||||
<li>{{ _('Rearrange buttons to suit your needs') }}</li>
|
||||
<li>{{ _('Drag and drop them where you want') }}</li>
|
||||
<li>{{ _('Get one-click access to your add-ons') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
{{ high_res_img('img/firefox/australis/diag-customize.jpg?03-2014', {'alt': _('Add, move or remove features to customize Firefox to meet your needs'), 'width': '300', 'height': '188'}) }}
|
||||
</li>
|
||||
<li class="tour-step app-menu" data-step="3" data-tip-prev="{{ _('<span>Previous:</span> Customize') }}" data-tip-next="{{ _('<span>Next:</span> Bookmarks') }}">
|
||||
<div class="tour-item">
|
||||
{# L10n: <br> tag below used for formatting only. #}
|
||||
<h2 class="tour-highlight step-target" data-target="addons" data-effect="wobble">
|
||||
{{ _('Add features and styles<br> with add-ons') }}
|
||||
</h2>
|
||||
<ul>
|
||||
<li>{{ _('Change how your browser looks and works') }}</li>
|
||||
<li>{{ _('Thousands to choose from') }}</li>
|
||||
<li>{{ _('Can now live in your menu or toolbar') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
{{ high_res_img('img/firefox/australis/diag-addons.jpg?03-2014', {'alt': _('Get your favorite features in one place'), 'width': '300', 'height': '188'}) }}
|
||||
</li>
|
||||
<li class="tour-step" data-step="4" data-tip-prev="{{ _('<span>Previous:</span> Add-ons') }}">
|
||||
<div class="tour-item">
|
||||
{# L10n: <br> tag below used for formatting only. #}
|
||||
<h2 class="tour-highlight step-target" data-target="bookmarks" data-effect="wobble">
|
||||
{{ _('Use the star for quick,<br> easy bookmarking') }}
|
||||
</h2>
|
||||
<ul>
|
||||
<li>{{ _('Now located outside the address bar') }}</li>
|
||||
<li>{{ _('Add bookmarks with a single click') }}</li>
|
||||
<li>{{ _('Manage them from the same location') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
{{ high_res_img('img/firefox/australis/diag-bookmarks.jpg?03-2014', {'alt': _('Get your favorite features in one place'), 'width': '300', 'height': '188'}) }}
|
||||
</li>
|
||||
</ul>
|
||||
<div class="compact-title"></div>
|
||||
<div class="tour-init" data-target="appMenu" data-icon="{{ MEDIA_URL }}img/firefox/australis/logo.png?2014-03" data-icon-high-res="{{ MEDIA_URL }}img/firefox/australis/logo-high-res.png?2014-03"></div>
|
||||
<div class="cta">
|
||||
<button type="button" aria-controls="ui-tour">{{ _('Start browsing') }}</button>
|
||||
</div>
|
||||
<div class="tour-tip"></div>
|
||||
<div class="ui-tour-controls" aria-controls="ui-tour tour-content tour-progress">
|
||||
<button class="step prev">{{ _('Previous') }}</button>
|
||||
<button class="step next">{{ _('Next') }}</button>
|
||||
<button class="close">{{ _('Close') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block tour_mask %}
|
||||
<div id="ui-tour-mask" tabindex="-1">
|
||||
<div class="mask-inner">
|
||||
<div class="logo"></div>
|
||||
<div class="stage">
|
||||
<h1>
|
||||
<span class="lead">{{ _('Welcome to the') }}</span>
|
||||
<span class="main">{{ _('new Firefox') }}</span>
|
||||
</h1>
|
||||
<p>{{ _('The fast, flexible browser you can trust.') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
{{ js('firefox_australis_tour_whatsnew') }}
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
{# 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/australis/tour-base.html" %}
|
||||
|
||||
{% block body_id %}whatsnew{% endblock %}
|
||||
|
||||
{% block string_data %}
|
||||
{# L10n: This is the label for a button that opens the tour modal dialog #}
|
||||
data-open="{{ _('Open tour') }}"
|
||||
{# L10n: This is the label for a button that closes the tour modal dialog #}
|
||||
data-close="{{ _('Close tour') }}"
|
||||
{# L10n: This is the label for a button that proceeds to the next step of the tour #}
|
||||
data-next="{{ _('Next') }}"
|
||||
{# L10n: This is the label for a button that starts the tour #}
|
||||
data-start="{{ _('Let’s go') }}"
|
||||
{# L10n: This is the label for a button that delays starting the tour #}
|
||||
data-later="{{ _('Not now') }}"
|
||||
{# L10n: This is the title for a door-hanger menu that shows in the browser chrome #}
|
||||
data-title="{{ _('See what’s changed') }}"
|
||||
{# L10n: This is the text for a door-hanger menu that shows in the browser chrome #}
|
||||
data-text="{{ _('It’s the fastest, most flexible Firefox ever.') }}"
|
||||
{# L10n: This is the text for a call to action that appears in the web page #}
|
||||
data-later-cta="{{ _('Take the tour to explore the latest design and features') }}"
|
||||
{# L10n: This is the label that represents tour step one of four #}
|
||||
data-step1="{{ _('1/4') }}"
|
||||
{# L10n: This is the label that represents tour step two of four #}
|
||||
data-step2="{{ _('2/4') }}"
|
||||
{# L10n: This is the label that represents tour step three of four #}
|
||||
data-step3="{{ _('3/4') }}"
|
||||
{# L10n: This is the label that represents tour step four of four #}
|
||||
data-step4="{{ _('4/4') }}"
|
||||
{% endblock %}
|
||||
|
||||
{% block tour_content %}
|
||||
<div id="ui-tour" tabindex="-1" aria-expanded="false">
|
||||
<div class="tour-inner">
|
||||
<div id="tour-progress" class="progress-step">
|
||||
<div class="logo"></div>
|
||||
<span class="step"></span>
|
||||
<div class="progress" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="4">
|
||||
<span class="indicator"></span>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="ui-tour-list">
|
||||
<li class="tour-step current app-menu visible" data-step="1" data-tip-next="{{ _('<span>Next:</span> Customize') }}">
|
||||
<div class="tour-item">
|
||||
{# L10n: <br> tag below used for formatting only. #}
|
||||
<h2 class="tour-highlight step-target" data-target="appMenu" data-effect="wobble">
|
||||
{{ _('A redesigned,<br> intuitive menu') }}
|
||||
</h2>
|
||||
<ul>
|
||||
<li>{{ _('Your favorite features, all in one place') }}</li>
|
||||
<li>{{ _('Grouped together for quick, easy access') }}</li>
|
||||
<li><a href="#" role="button" class="more">{{ _('Learn how to customize your Firefox') }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{{ high_res_img('img/firefox/australis/diag-menu-bar.jpg?03-2014', {'alt': _('Get your favorite features in one place'), 'width': '300', 'height': '188'}) }}
|
||||
</li>
|
||||
<li class="tour-step app-menu" data-step="2" data-tip-prev="{{ _('<span>Previous:</span> Menu') }}" data-tip-next="{{ _('<span>Next:</span> Add-ons') }}">
|
||||
<div class="tour-item">
|
||||
{# L10n: <br> tag below used for formatting only. #}
|
||||
<h2 class="tour-highlight step-target" data-target="customize" data-effect="wobble">
|
||||
{{ _('Designed so you can<br> make it your own') }}
|
||||
</h2>
|
||||
<ul>
|
||||
<li>{{ _('How you use Firefox is unique') }}</li>
|
||||
<li>{{ _('Move any button to match') }}</li>
|
||||
<li><a href="#" role="button" class="more">{{ _('Add features and styles with add-ons') }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{{ high_res_img('img/firefox/australis/diag-customize.jpg?03-2014', {'alt': _('Add, move or remove features to customize Firefox to meet your needs'), 'width': '300', 'height': '188'}) }}
|
||||
</li>
|
||||
<li class="tour-step app-menu" data-step="3" data-tip-prev="{{ _('<span>Previous:</span> Customize') }}" data-tip-next="{{ _('<span>Next:</span> Bookmarks') }}">
|
||||
<div class="tour-item">
|
||||
{# L10n: <br> tag below used for formatting only. #}
|
||||
<h2 class="tour-highlight step-target" data-target="addons" data-effect="wobble">
|
||||
{{ _('Thousands of ways to<br> make Firefox do more') }}
|
||||
</h2>
|
||||
<ul>
|
||||
<li>{{ _('Get help with just about anything you do online') }}</li>
|
||||
<li>{{ _('Now easier to find, use and manage') }}</li>
|
||||
<li><a href="#" role="button" class="more">{{ _('Use the star to create bookmarks') }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{{ high_res_img('img/firefox/australis/diag-addons.jpg?03-2014', {'alt': _('Get your favorite features in one place'), 'width': '300', 'height': '188'}) }}
|
||||
</li>
|
||||
<li class="tour-step" data-step="4" data-tip-prev="{{ _('<span>Previous:</span> Add-ons') }}">
|
||||
<div class="tour-item">
|
||||
{# L10n: <br> tag below used for formatting only. #}
|
||||
<h2 class="tour-highlight step-target" data-target="bookmarks" data-effect="wobble">
|
||||
{{ _('Your favorite sites<br> are closer than ever') }}
|
||||
</h2>
|
||||
<ul>
|
||||
<li>{{ _('Add and view bookmarks from a new location') }}</li>
|
||||
<li>{{ _('It only takes a single click to save a site') }}</li>
|
||||
<li><a href="#" role="button" class="more">{{ _('Enjoy seamless browsing between devices with Sync') }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{{ high_res_img('img/firefox/australis/diag-bookmarks.jpg?03-2014', {'alt': _('Get your favorite features in one place'), 'width': '300', 'height': '188'}) }}
|
||||
</li>
|
||||
</ul>
|
||||
<div class="compact-title"></div>
|
||||
<div class="tour-init" data-target="appMenu" data-icon="{{ MEDIA_URL }}img/firefox/australis/logo.png?2014-03" data-icon-high-res="{{ MEDIA_URL }}img/firefox/australis/logo-high-res.png?2014-03"></div>
|
||||
<div class="cta">
|
||||
<button type="button" aria-controls="ui-tour">{{ _('Start browsing') }}</button>
|
||||
</div>
|
||||
<div class="tour-tip"></div>
|
||||
<div class="ui-tour-controls" aria-controls="ui-tour tour-content tour-progress">
|
||||
<button class="step prev">{{ _('Previous') }}</button>
|
||||
<button class="step next">{{ _('Next') }}</button>
|
||||
<button class="close">{{ _('Close') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block tour_mask %}
|
||||
<div id="ui-tour-mask" tabindex="-1">
|
||||
<div class="mask-inner">
|
||||
<div class="logo"></div>
|
||||
<div class="stage">
|
||||
<h1>
|
||||
<span class="lead">{{ _('Welcome to the') }}</span>
|
||||
<span class="main">{{ _('new Firefox') }}</span>
|
||||
</h1>
|
||||
<p>{{ _('The fast, flexible browser you can trust.') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
{{ js('firefox_australis_tour_whatsnew_b') }}
|
||||
{% endblock %}
|
||||
|
|
@ -1,187 +0,0 @@
|
|||
{# 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.html" %}
|
||||
|
||||
{% block extra_meta %}<meta name="robots" content="noindex">{% endblock %}
|
||||
|
||||
{% block page_title_prefix %}{% endblock %}
|
||||
{% block page_title %}{{ _('Welcome to the new Firefox') }}{% endblock %}
|
||||
{% block page_title_suffix %}{% endblock %}
|
||||
{% block body_id %}firefox-29-whatsnew{% endblock %}
|
||||
{% block body_class %}{% endblock %}
|
||||
|
||||
{% block site_css %}
|
||||
{{ css('firefox_whatsnew_aurora_29') }}
|
||||
{% endblock %}
|
||||
|
||||
{% block string_data %}
|
||||
{# L10n: This is the label for a button that opens the tour modal dialog #}
|
||||
data-open="{{ _('Open tour') }}"
|
||||
{# L10n: This is the label for a button that closes the tour modal dialog #}
|
||||
data-close="{{ _('Close tour') }}"
|
||||
{# L10n: This is the label for a button that proceeds to the next step of the tour #}
|
||||
data-next="{{ _('Next') }}"
|
||||
{# L10n: This is the label for a button that starts the tour #}
|
||||
data-start="{{ _('Let’s go') }}"
|
||||
{# L10n: This is the label for a button that delays starting the tour #}
|
||||
data-later="{{ _('Not now') }}"
|
||||
{# L10n: This is the title for a door-hanger menu that shows in the browser chrome #}
|
||||
data-title="{{ _('See what’s changed') }}"
|
||||
{# L10n: This is the text for a door-hanger menu that shows in the browser chrome #}
|
||||
data-text="{{ _('It starts with the completely redesigned menu.') }}"
|
||||
{# L10n: This is the text for a call to action that appears in the web page #}
|
||||
data-later-cta="{{ _('Take the tour to explore the latest design and features') }}"
|
||||
{# L10n: This is the label that represents tour step one of four #}
|
||||
data-step1="{{ _('1/4') }}"
|
||||
{# L10n: This is the label that represents tour step two of four #}
|
||||
data-step2="{{ _('2/4') }}"
|
||||
{# L10n: This is the label that represents tour step three of four #}
|
||||
data-step3="{{ _('3/4') }}"
|
||||
{# L10n: This is the label that represents tour step four of four #}
|
||||
data-step4="{{ _('4/4') }}"
|
||||
{% endblock %}
|
||||
|
||||
{% block site_header %}
|
||||
<header id="masthead">
|
||||
<a href="{{ url('mozorg.home') }}" id="tabzilla">Mozilla</a>
|
||||
{% block site_header_nav %}{% endblock %}
|
||||
{% block site_header_logo %}{% endblock %}
|
||||
{% block breadcrumbs %}{% endblock %}
|
||||
</header>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{# begin page content #}
|
||||
<main role="main">
|
||||
<header>
|
||||
{# L10n: The active words should be wrapped in <span></span> tags, but it may appear at a different position in the translated title. #}
|
||||
<h1>{{ _('Welcome to <span>the new Firefox</span>') }}</h1>
|
||||
</header>
|
||||
<div class="cta-wrapper">
|
||||
<section>
|
||||
<h2>
|
||||
{{ _('It’s faster at what you do most, easier to use than ever and made for you to make it your own.') }}
|
||||
</h2>
|
||||
<p>
|
||||
{% trans %}
|
||||
Sleek, streamlined and beautifully redesigned, our latest version is faster in ways
|
||||
you'll actually notice. The new menu button gives you one-click access to your
|
||||
favorite features, then gets out of your way. You can even add, move or remove
|
||||
any feature you want. It's the most customizable browser ever made.
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<a id="learn-more" class="button" href="https://blog.mozilla.org/futurereleases/2013/11/18/evolution/">
|
||||
{{ _('Learn more') }}
|
||||
</a>
|
||||
<button id="give-it-a-try" class="button">{{ _('Give it a try') }}</button>
|
||||
<img class="dropdown" src="{{ MEDIA_URL }}/img/firefox/australis/dropdown.png" width="278" height="370" alt="{{ _('Get your favorite features in one place') }}">
|
||||
</section>
|
||||
</div>
|
||||
<div class="features-wrapper">
|
||||
<ul>
|
||||
<li class="addons">
|
||||
<h3>{{ _('Add-ons') }}</h3>
|
||||
<p>{{ _('Access them all from one place.') }}</p>
|
||||
</li>
|
||||
<li class="customize">
|
||||
<h3>{{ _('Customize') }}</h3>
|
||||
<p>{{ _('Add, move or remove any feature.') }}</p>
|
||||
</li>
|
||||
<li class="bookmarks">
|
||||
<h3>{{ _('Bookmarks') }}</h3>
|
||||
<p>{{ _('Save any site with one click.') }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
{# end page content #}
|
||||
|
||||
{# begin tour content #}
|
||||
<div id="ui-tour" tabindex="-1" aria-expanded="false">
|
||||
<div class="tour-inner">
|
||||
<div id="tour-progress" class="progress-step">
|
||||
<div class="logo"></div>
|
||||
<span class="step"></span>
|
||||
<div class="progress" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="4">
|
||||
<span class="indicator"></span>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="ui-tour-list">
|
||||
<li class="tour-step current app-menu visible" data-step="1">
|
||||
<div class="tour-item">
|
||||
<h2 class="tour-highlight step-target" data-target="appMenu">
|
||||
{{ _('Find your favorite features in the menu') }}
|
||||
</h2>
|
||||
<div class="tour-menu step-target" data-target="appMenu"></div>
|
||||
<ul>
|
||||
<li>{{ _('Conveniently located in one place') }}</li>
|
||||
<li>{{ _('Includes everything you use most') }}</li>
|
||||
<li>{{ _('Easy to customize and make it your own') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
{{ high_res_img('img/firefox/australis/diag-menu-bar.jpg', {'alt': _('Get your favorite features in one place'), 'width': '300', 'height': '188'}) }}
|
||||
</li>
|
||||
<li class="tour-step app-menu" data-step="2">
|
||||
<div class="tour-item">
|
||||
<h2 class="tour-menu step-target" data-target="appMenu">
|
||||
{{ _('Customize Firefox to match how you browse') }}
|
||||
</h2>
|
||||
<div class="tour-highlight step-target" data-target="customize"></div>
|
||||
<ul>
|
||||
<li>{{ _('Rearrange or remove items to suit your needs') }}</li>
|
||||
<li>{{ _('Drag any icon and drop it anywhere you want') }}</li>
|
||||
<li>{{ _('Get one-click access to all your add-ons') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
{{ high_res_img('img/firefox/australis/diag-customize.jpg', {'alt': _('Add, move or remove features to customize Firefox to meet your needs'), 'width': '300', 'height': '188'}) }}
|
||||
</li>
|
||||
<li class="tour-step app-menu" data-step="3">
|
||||
<div class="tour-item">
|
||||
<h2 class="tour-menu step-target" data-target="appMenu">
|
||||
{{ _('Make Firefox even better with add-ons') }}
|
||||
</h2>
|
||||
<div class="tour-highlight step-target" data-target="addons"></div>
|
||||
<ul>
|
||||
<li>{{ _('Change how your browser looks and works') }}</li>
|
||||
<li>{{ _('Thousands to choose from') }}</li>
|
||||
<li>{{ _('Can now live in your menu or toolbar') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
{{ high_res_img('img/firefox/australis/diag-menu-bar.jpg', {'alt': _('Get your favorite features in one place'), 'width': '300', 'height': '188'}) }}
|
||||
</li>
|
||||
<li class="tour-step" data-step="4">
|
||||
<div class="tour-item">
|
||||
<h2 class="tour-highlight step-target" data-target="bookmarks">
|
||||
{{ _('Use the star for quick, easy bookmarking') }}
|
||||
</h2>
|
||||
<ul>
|
||||
<li>{{ _('Now located outside the address bar') }}</li>
|
||||
<li>{{ _('Add bookmarks with a single click') }}</li>
|
||||
<li>{{ _('Manage them from the same location') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<button type="button" aria-controls="ui-tour">{{ _('Enjoy the web') }}</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="compact-title"></div>
|
||||
<div class="tour-init" data-target="appMenu" data-icon="{{ MEDIA_URL }}img/firefox/australis/logo.png" data-icon-high-res="{{ MEDIA_URL }}img/firefox/australis/logo-high-res.png?2014-01"></div>
|
||||
|
||||
<div class="ui-tour-controls" aria-controls="ui-tour tour-content tour-progress">
|
||||
<button class="step prev">{{ _('Previous') }}</button>
|
||||
<button class="step next">{{ _('Next') }}</button>
|
||||
<button class="close">{{ _('Close') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{# end tour content #}
|
||||
{% endblock %}
|
||||
|
||||
{% block email_form %}{% endblock%}
|
||||
|
||||
{% block js %}
|
||||
{{ js('firefox_whatsnew_aurora_29') }}
|
||||
{% endblock %}
|
||||
|
|
@ -441,20 +441,20 @@ class TestWhatsNew(TestCase):
|
|||
eq_(template, ['firefox/whatsnew-nightly-29.html'])
|
||||
|
||||
@override_settings(DEV=True)
|
||||
def test_fx_nightly_29_australis(self, render_mock):
|
||||
"""Should use australis template for 29.0a2."""
|
||||
def test_fx_australis_29(self, render_mock):
|
||||
"""Should use australis template for 29.0."""
|
||||
req = self.rf.get('/en-US/firefox/whatsnew/')
|
||||
self.view(req, fx_version='29.0a2')
|
||||
self.view(req, fx_version='29.0')
|
||||
template = render_mock.call_args[0][1]
|
||||
eq_(template, ['firefox/whatsnew-aurora-29.html'])
|
||||
eq_(template, ['firefox/australis/whatsnew-tour-a.html'])
|
||||
|
||||
@override_settings(DEV=False)
|
||||
def test_fx_australis_secure_redirect(self, render_mock):
|
||||
"""Should redirect to https: for 29.0a2."""
|
||||
"""Should redirect to https: for 29.0."""
|
||||
url = '/en-US/firefox/whatsnew/'
|
||||
req = self.rf.get(url)
|
||||
with patch.object(req, 'is_secure', return_value=False):
|
||||
resp = self.view(req, fx_version='29.0a2')
|
||||
resp = self.view(req, fx_version='29.0')
|
||||
eq_(resp['location'], 'https://testserver' + url)
|
||||
|
||||
@override_settings(DEV=True)
|
||||
|
|
@ -463,7 +463,7 @@ class TestWhatsNew(TestCase):
|
|||
url = '/en-US/firefox/whatsnew/'
|
||||
req = self.rf.get(url)
|
||||
with patch.object(req, 'is_secure', return_value=False):
|
||||
resp = self.view(req, fx_version='29.0a2')
|
||||
resp = self.view(req, fx_version='29.0')
|
||||
eq_(resp.status_code, 200)
|
||||
|
||||
@override_settings(DEV=True)
|
||||
|
|
@ -472,7 +472,42 @@ class TestWhatsNew(TestCase):
|
|||
url = '/en-US/firefox/whatsnew/'
|
||||
req = self.rf.get(url)
|
||||
with patch.object(req, 'is_secure', return_value=True):
|
||||
resp = self.view(req, fx_version='29.0a2')
|
||||
resp = self.view(req, fx_version='29.0')
|
||||
eq_(resp.status_code, 200)
|
||||
|
||||
|
||||
@patch.object(fx_views.WhatsnewViewGATest, 'redirect_to', none_mock)
|
||||
@patch('bedrock.firefox.views.l10n_utils.render', return_value=HttpResponse())
|
||||
class WhatsnewViewGATest(TestCase):
|
||||
def setUp(self):
|
||||
self.view = fx_views.WhatsnewViewGATest.as_view()
|
||||
self.rf = RequestFactory(HTTP_USER_AGENT='Firefox')
|
||||
|
||||
@override_settings(DEV=False)
|
||||
def test_fx_australis_secure_redirect(self, render_mock):
|
||||
"""Should redirect to https"""
|
||||
url = '/en-US/firefox/whatsnew/b/'
|
||||
req = self.rf.get(url)
|
||||
with patch.object(req, 'is_secure', return_value=False):
|
||||
resp = self.view(req, fx_version='29.0')
|
||||
eq_(resp['location'], 'https://testserver' + url)
|
||||
|
||||
@override_settings(DEV=True)
|
||||
def test_fx_australis_secure_redirect_not_dev(self, render_mock):
|
||||
"""Should not redirect to https: in DEV mode."""
|
||||
url = '/en-US/firefox/whatsnew/b/'
|
||||
req = self.rf.get(url)
|
||||
with patch.object(req, 'is_secure', return_value=False):
|
||||
resp = self.view(req, fx_version='29.0')
|
||||
eq_(resp.status_code, 200)
|
||||
|
||||
@override_settings(DEV=True)
|
||||
def test_fx_australis_secure_redirect_secure(self, render_mock):
|
||||
"""Should not redirect to https: when already secure."""
|
||||
url = '/en-US/firefox/whatsnew/b/'
|
||||
req = self.rf.get(url)
|
||||
with patch.object(req, 'is_secure', return_value=True):
|
||||
resp = self.view(req, fx_version='29.0')
|
||||
eq_(resp.status_code, 200)
|
||||
|
||||
|
||||
|
|
@ -489,7 +524,7 @@ class TestTourView(TestCase):
|
|||
url = '/en-US/firefox/tour/'
|
||||
req = self.rf.get(url)
|
||||
with patch.object(req, 'is_secure', return_value=False):
|
||||
resp = self.view(req, fx_version='29.0a2')
|
||||
resp = self.view(req, fx_version='29.0')
|
||||
eq_(resp['location'], 'https://testserver' + url)
|
||||
|
||||
@override_settings(DEV=True)
|
||||
|
|
@ -498,7 +533,7 @@ class TestTourView(TestCase):
|
|||
url = '/en-US/firefox/tour/'
|
||||
req = self.rf.get(url)
|
||||
with patch.object(req, 'is_secure', return_value=False):
|
||||
resp = self.view(req, fx_version='29.0a2')
|
||||
resp = self.view(req, fx_version='29.0')
|
||||
eq_(resp.status_code, 200)
|
||||
|
||||
@override_settings(DEV=True)
|
||||
|
|
@ -507,7 +542,7 @@ class TestTourView(TestCase):
|
|||
url = '/en-US/firefox/tour/'
|
||||
req = self.rf.get(url)
|
||||
with patch.object(req, 'is_secure', return_value=True):
|
||||
resp = self.view(req, fx_version='29.0a2')
|
||||
resp = self.view(req, fx_version='29.0')
|
||||
eq_(resp.status_code, 200)
|
||||
|
||||
|
||||
|
|
@ -525,6 +560,50 @@ class TestFirstRun(TestCase):
|
|||
# would return 405 before calling render otherwise
|
||||
render_mock.assert_called_once_with(req, ['firefox/firstrun.html'], ANY)
|
||||
|
||||
@override_settings(DEV=True)
|
||||
def test_fx_australis_29(self, render_mock):
|
||||
"""Should use australis template for 29.0 en-US only."""
|
||||
req = self.rf.get('/en-US/firefox/firstrun/')
|
||||
self.view(req, fx_version='29.0')
|
||||
template = render_mock.call_args[0][1]
|
||||
eq_(template, ['firefox/australis/firstrun-tour.html'])
|
||||
|
||||
@override_settings(DEV=True)
|
||||
def test_fx_australis_29_other_locales(self, render_mock):
|
||||
"""Should use a different template for other locales"""
|
||||
req = self.rf.get('/fr/firefox/firstrun/')
|
||||
req.locale = 'fr'
|
||||
self.view(req, fx_version='29.0')
|
||||
template = render_mock.call_args[0][1]
|
||||
eq_(template, ['firefox/firstrun.html'])
|
||||
|
||||
@override_settings(DEV=False)
|
||||
def test_fx_australis_secure_redirect(self, render_mock):
|
||||
"""Should redirect to https: for 29.0."""
|
||||
url = '/en-US/firefox/firstrun/'
|
||||
req = self.rf.get(url)
|
||||
with patch.object(req, 'is_secure', return_value=False):
|
||||
resp = self.view(req, fx_version='29.0')
|
||||
eq_(resp['location'], 'https://testserver' + url)
|
||||
|
||||
@override_settings(DEV=True)
|
||||
def test_fx_australis_secure_redirect_not_dev(self, render_mock):
|
||||
"""Should not redirect to https: in DEV mode."""
|
||||
url = '/en-US/firefox/firstrun/'
|
||||
req = self.rf.get(url)
|
||||
with patch.object(req, 'is_secure', return_value=False):
|
||||
resp = self.view(req, fx_version='29.0')
|
||||
eq_(resp.status_code, 200)
|
||||
|
||||
@override_settings(DEV=True)
|
||||
def test_fx_australis_secure_redirect_secure(self, render_mock):
|
||||
"""Should not redirect to https: when already secure."""
|
||||
url = '/en-US/firefox/firstrun/'
|
||||
req = self.rf.get(url)
|
||||
with patch.object(req, 'is_secure', return_value=True):
|
||||
resp = self.view(req, fx_version='29.0')
|
||||
eq_(resp.status_code, 200)
|
||||
|
||||
|
||||
@patch.object(fx_views, 'firefox_details', firefox_details)
|
||||
class FxVersionRedirectsMixin(object):
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import views
|
|||
latest_re = r'^firefox(?:/(?P<fx_version>%s))?/%s/$'
|
||||
firstrun_re = latest_re % (version_re, 'firstrun')
|
||||
whatsnew_re = latest_re % (version_re, 'whatsnew')
|
||||
whatsnew_re_b = latest_re % (version_re, 'whatsnew/b')
|
||||
tour_re = latest_re % (version_re, 'tour')
|
||||
product_re = '(?P<product>firefox|mobile)'
|
||||
channel_re = '(?P<channel>beta|aurora|organizations)'
|
||||
|
|
@ -65,6 +66,7 @@ urlpatterns = patterns('',
|
|||
url('^dnt/$', views.dnt, name='firefox.dnt'),
|
||||
url(firstrun_re, views.FirstrunView.as_view(), name='firefox.firstrun'),
|
||||
url(whatsnew_re, views.WhatsnewView.as_view(), name='firefox.whatsnew'),
|
||||
url(whatsnew_re_b, views.WhatsnewViewGATest.as_view(), name='firefox.whatsnew.b'),
|
||||
url(tour_re, views.TourView.as_view(), name='firefox.tour'),
|
||||
url(r'^firefox/partners/$', views.firefox_partners,
|
||||
name='firefox.partners.index'),
|
||||
|
|
|
|||
|
|
@ -343,7 +343,28 @@ class LatestFxView(TemplateView):
|
|||
|
||||
|
||||
class FirstrunView(LatestFxView):
|
||||
template_name = 'firefox/firstrun.html'
|
||||
|
||||
def get(self, request, *args, **kwargs):
|
||||
version = kwargs.get('fx_version')
|
||||
if version == '29.0' and not settings.DEV and not request.is_secure():
|
||||
uri = 'https://{host}{path}'.format(
|
||||
host=request.get_host(),
|
||||
path=request.get_full_path(),
|
||||
)
|
||||
return HttpResponsePermanentRedirect(uri)
|
||||
return super(FirstrunView, self).get(request, *args, **kwargs)
|
||||
|
||||
def get_template_names(self):
|
||||
version = self.kwargs.get('fx_version')
|
||||
locale = l10n_utils.get_locale(self.request)
|
||||
|
||||
if version == '29.0' and locale == 'en-US':
|
||||
template = 'firefox/australis/firstrun-tour.html'
|
||||
else:
|
||||
template = 'firefox/firstrun.html'
|
||||
|
||||
# return a list to conform with original intention
|
||||
return [template]
|
||||
|
||||
|
||||
class WhatsnewView(LatestFxView):
|
||||
|
|
@ -364,7 +385,7 @@ class WhatsnewView(LatestFxView):
|
|||
|
||||
def get(self, request, *args, **kwargs):
|
||||
version = kwargs.get('fx_version')
|
||||
if version == '29.0a2' and not settings.DEV and not request.is_secure():
|
||||
if version == '29.0' and not settings.DEV and not request.is_secure():
|
||||
uri = 'https://{host}{path}'.format(
|
||||
host=request.get_host(),
|
||||
path=request.get_full_path(),
|
||||
|
|
@ -388,8 +409,8 @@ class WhatsnewView(LatestFxView):
|
|||
|
||||
if version == '29.0a1':
|
||||
template = 'firefox/whatsnew-nightly-29.html'
|
||||
elif version == '29.0a2':
|
||||
template = 'firefox/whatsnew-aurora-29.html'
|
||||
elif version == '29.0':
|
||||
template = 'firefox/australis/whatsnew-tour-a.html'
|
||||
elif locale in self.fxos_locales:
|
||||
template = 'firefox/whatsnew-fxos.html'
|
||||
else:
|
||||
|
|
@ -399,8 +420,22 @@ class WhatsnewView(LatestFxView):
|
|||
return [template]
|
||||
|
||||
|
||||
class WhatsnewViewGATest(LatestFxView):
|
||||
|
||||
template_name = 'firefox/australis/whatsnew-tour-b.html'
|
||||
|
||||
def get(self, request, *args, **kwargs):
|
||||
if not settings.DEV and not request.is_secure():
|
||||
uri = 'https://{host}{path}'.format(
|
||||
host=request.get_host(),
|
||||
path=request.get_full_path(),
|
||||
)
|
||||
return HttpResponsePermanentRedirect(uri)
|
||||
return super(WhatsnewViewGATest, self).get(request, *args, **kwargs)
|
||||
|
||||
|
||||
class TourView(LatestFxView):
|
||||
template_name = 'firefox/whatsnew-aurora-29.html'
|
||||
template_name = 'firefox/australis/firstrun-tour.html'
|
||||
|
||||
def get(self, request, *args, **kwargs):
|
||||
if not settings.DEV and not request.is_secure():
|
||||
|
|
|
|||
|
|
@ -163,6 +163,10 @@ MINIFY_BUNDLES = {
|
|||
'firefox_all': (
|
||||
'css/firefox/all.less',
|
||||
),
|
||||
'firefox_australis_tour': (
|
||||
'css/firefox/australis/australis-ui-tour.less',
|
||||
'css/firefox/australis/australis-tour-page.less',
|
||||
),
|
||||
'firefox_unsupported': (
|
||||
'css/firefox/unsupported.less',
|
||||
),
|
||||
|
|
@ -269,10 +273,6 @@ MINIFY_BUNDLES = {
|
|||
'css/firefox/whatsnew.less',
|
||||
'css/firefox/whatsnew-android.less',
|
||||
),
|
||||
'firefox_whatsnew_aurora_29': (
|
||||
'css/firefox/australis/australis-ui-tour.less',
|
||||
'css/firefox/australis/aurora-whatsnew.less',
|
||||
),
|
||||
'firefox_whatsnew_fxos': (
|
||||
'css/firefox/whatsnew-fxos.less',
|
||||
),
|
||||
|
|
@ -466,6 +466,27 @@ MINIFY_BUNDLES = {
|
|||
'firefox_all': (
|
||||
'js/firefox/firefox-language-search.js',
|
||||
),
|
||||
'firefox_australis_tour_whatsnew': (
|
||||
'js/libs/jquery.waypoints.min.js',
|
||||
'js/firefox/australis/australis-uitour.js',
|
||||
'js/firefox/australis/browser-tour.js',
|
||||
'js/firefox/australis/common.js',
|
||||
'js/firefox/australis/whatsnew.js',
|
||||
),
|
||||
'firefox_australis_tour_whatsnew_b': (
|
||||
'js/libs/jquery.waypoints.min.js',
|
||||
'js/firefox/australis/australis-uitour.js',
|
||||
'js/firefox/australis/browser-tour.js',
|
||||
'js/firefox/australis/common.js',
|
||||
'js/firefox/australis/whatsnew-b.js',
|
||||
),
|
||||
'firefox_australis_tour_firstrun': (
|
||||
'js/libs/jquery.waypoints.min.js',
|
||||
'js/firefox/australis/australis-uitour.js',
|
||||
'js/firefox/australis/browser-tour.js',
|
||||
'js/firefox/australis/common.js',
|
||||
'js/firefox/australis/firstrun.js',
|
||||
),
|
||||
'firefox-resp': (
|
||||
'js/libs/jquery-1.7.1.min.js',
|
||||
'js/base/global.js',
|
||||
|
|
@ -553,11 +574,6 @@ MINIFY_BUNDLES = {
|
|||
'js/firefox/sms.js',
|
||||
'js/libs/socialshare.min.js',
|
||||
),
|
||||
'firefox_whatsnew_aurora_29': (
|
||||
'js/firefox/australis/australis-uitour.js',
|
||||
'js/firefox/australis/browser-tour.js',
|
||||
'js/firefox/australis/aurora-whatsnew.js',
|
||||
),
|
||||
'firefox_whatsnew_fxos': (
|
||||
'js/firefox/whatsnew-fxos.js',
|
||||
),
|
||||
|
|
|
|||
|
|
@ -693,3 +693,6 @@ RewriteRule ^/firefox/its-an-attack.html$ http://www.itisatrap.org/firefox/its-a
|
|||
|
||||
# bug 979217
|
||||
RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?firefox(/(?:\d+\.\d+\.?(?:\d+)?\.?(?:\d+)?(?:[a|b]?)(?:\d*)(?:pre)?(?:\d)?))?/tour(/?)$ /b/$1firefox$2/tour$3 [PT]
|
||||
|
||||
# bug 979496
|
||||
RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?firefox(/(?:\d+\.\d+\.?(?:\d+)?\.?(?:\d+)?(?:[a|b]?)(?:\d*)(?:pre)?(?:\d)?))?/whatsnew/b(/?)$ /b/$1firefox$2/whatsnew/b$3 [PT]
|
||||
|
|
|
|||
|
|
@ -1,183 +0,0 @@
|
|||
// 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 "../template.less";
|
||||
|
||||
#outer-wrapper {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #099cd5;
|
||||
}
|
||||
|
||||
#masthead {
|
||||
width: 966px;
|
||||
padding: 0 55px;
|
||||
}
|
||||
|
||||
main {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
|
||||
header {
|
||||
width: 966px;
|
||||
min-height: 351px;
|
||||
margin: 0 auto;
|
||||
padding: 0 55px;
|
||||
background: url(/media/img/firefox/australis/logo-large.png) 0 40px no-repeat;
|
||||
background: url(/media/img/firefox/australis/browser.png) bottom center no-repeat,
|
||||
url(/media/img/firefox/australis/logo-large.png) 0 40px no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
main header,
|
||||
#ui-tour-mask .mask-inner {
|
||||
h1 {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 100px 0 100px 250px;
|
||||
font-size: 48px;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -2px;
|
||||
color: #fff;
|
||||
text-shadow: none;
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
font-size: 80px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
#ui-tour-mask {
|
||||
.mask-inner {
|
||||
width: 966px;
|
||||
min-height: 351px;
|
||||
margin: 45px auto 0 auto;
|
||||
padding: 0 55px;
|
||||
background: url(/media/img/firefox/australis/logo-large.png) 0 40px no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.cta-wrapper {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
|
||||
section {
|
||||
position: relative;
|
||||
width: 946px;
|
||||
min-height: 305px;
|
||||
margin: 0 auto;
|
||||
padding: 60px 65px;
|
||||
|
||||
img.dropdown {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: 50px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #2aa4c6;
|
||||
font-size: 22px;
|
||||
line-height: 1.5;
|
||||
font-weight: bold;
|
||||
margin: 0 360px 32px 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-right: 350px;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
a.button,
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#learn-more,
|
||||
#give-it-a-try {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.features-wrapper {
|
||||
width: 100%;
|
||||
background: #f0f0f0;
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
width: 946px;
|
||||
margin: 0 auto;
|
||||
padding: 65px;
|
||||
overflow: hidden;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 240px;
|
||||
margin: 0 10px 0 0;
|
||||
padding: 0 0 0 60px;
|
||||
|
||||
h3 {
|
||||
margin-bottom: 10px;
|
||||
color: #626e7a;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.addons {
|
||||
background: url(/media/img/firefox/australis/icon-addons.png) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
&.customize {
|
||||
background: url(/media/img/firefox/australis/icon-customize.png) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
&.bookmarks {
|
||||
background: url(/media/img/firefox/australis/icon-bookmarks.png) 0 0 no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#colophon {
|
||||
width: 946px;
|
||||
padding: 48px 65px;
|
||||
}
|
||||
|
||||
html[dir="rtl"] {
|
||||
#tabzilla {
|
||||
float: left;
|
||||
}
|
||||
|
||||
main, header,
|
||||
#ui-tour-mask .mask-inner {
|
||||
h1 {
|
||||
margin: 0;
|
||||
padding: 100px 15px 80px 250px;
|
||||
}
|
||||
}
|
||||
|
||||
.cta-wrapper {
|
||||
a.button,
|
||||
button {
|
||||
display: inline-block;
|
||||
margin: 0 350px 0 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Двоичные данные
media/img/firefox/australis/blueprint-high-res.jpg
Двоичные данные
media/img/firefox/australis/blueprint-high-res.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 28 KiB |
Двоичные данные
media/img/firefox/australis/blueprint.jpg
Двоичные данные
media/img/firefox/australis/blueprint.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 11 KiB |
Двоичные данные
media/img/firefox/australis/browser.png
Двоичные данные
media/img/firefox/australis/browser.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 40 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 27 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 12 KiB |
Двоичные данные
media/img/firefox/australis/diag-bookmarks-high-res.jpg
Двоичные данные
media/img/firefox/australis/diag-bookmarks-high-res.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 15 KiB После Ширина: | Высота: | Размер: 18 KiB |
Двоичные данные
media/img/firefox/australis/diag-bookmarks.jpg
Двоичные данные
media/img/firefox/australis/diag-bookmarks.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 6.6 KiB После Ширина: | Высота: | Размер: 7.7 KiB |
Двоичные данные
media/img/firefox/australis/diag-customize-high-res.jpg
Двоичные данные
media/img/firefox/australis/diag-customize-high-res.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 36 KiB После Ширина: | Высота: | Размер: 37 KiB |
Двоичные данные
media/img/firefox/australis/diag-customize.jpg
Двоичные данные
media/img/firefox/australis/diag-customize.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 16 KiB После Ширина: | Высота: | Размер: 17 KiB |
Двоичные данные
media/img/firefox/australis/diag-menu-bar-high-res.jpg
Двоичные данные
media/img/firefox/australis/diag-menu-bar-high-res.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 24 KiB После Ширина: | Высота: | Размер: 27 KiB |
Двоичные данные
media/img/firefox/australis/diag-menu-bar.jpg
Двоичные данные
media/img/firefox/australis/diag-menu-bar.jpg
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 11 KiB После Ширина: | Высота: | Размер: 12 KiB |
Двоичные данные
media/img/firefox/australis/dropdown.png
Двоичные данные
media/img/firefox/australis/dropdown.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 37 KiB |
Двоичные данные
media/img/firefox/australis/icon-addons.png
Двоичные данные
media/img/firefox/australis/icon-addons.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 3.3 KiB |
Двоичные данные
media/img/firefox/australis/icon-bookmarks.png
Двоичные данные
media/img/firefox/australis/icon-bookmarks.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 2.8 KiB |
Двоичные данные
media/img/firefox/australis/icon-customize.png
Двоичные данные
media/img/firefox/australis/icon-customize.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 2.2 KiB |
Двоичные данные
media/img/firefox/australis/logo-high-res.png
Двоичные данные
media/img/firefox/australis/logo-high-res.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 13 KiB После Ширина: | Высота: | Размер: 14 KiB |
Двоичные данные
media/img/firefox/australis/logo-large.png
Двоичные данные
media/img/firefox/australis/logo-large.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 65 KiB После Ширина: | Высота: | Размер: 58 KiB |
Двоичные данные
media/img/firefox/australis/logo.png
Двоичные данные
media/img/firefox/australis/logo.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 4.3 KiB После Ширина: | Высота: | Размер: 4.8 KiB |
Двоичные данные
media/img/firefox/australis/menu-next-high-res.png
Двоичные данные
media/img/firefox/australis/menu-next-high-res.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 807 B После Ширина: | Высота: | Размер: 553 B |
Двоичные данные
media/img/firefox/australis/menu-next.png
Двоичные данные
media/img/firefox/australis/menu-next.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 421 B После Ширина: | Высота: | Размер: 315 B |
Двоичные данные
media/img/firefox/australis/menu-prev-high-res.png
Двоичные данные
media/img/firefox/australis/menu-prev-high-res.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 886 B После Ширина: | Высота: | Размер: 558 B |
Двоичные данные
media/img/firefox/australis/menu-prev.png
Двоичные данные
media/img/firefox/australis/menu-prev.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 1.2 KiB После Ширина: | Высота: | Размер: 337 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 5.5 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.3 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.4 KiB |
Двоичные данные
media/img/firefox/australis/signpost.png
Двоичные данные
media/img/firefox/australis/signpost.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 1.7 KiB После Ширина: | Высота: | Размер: 1.8 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.5 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 40 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 8.5 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 9.0 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 8.2 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.3 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.5 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 924 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 11 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.6 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 623 B |
Двоичные данные
media/img/firefox/australis/tour-close-high-res.png
Двоичные данные
media/img/firefox/australis/tour-close-high-res.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 907 B После Ширина: | Высота: | Размер: 491 B |
Двоичные данные
media/img/firefox/australis/tour-close.png
Двоичные данные
media/img/firefox/australis/tour-close.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 531 B После Ширина: | Высота: | Размер: 356 B |
|
|
@ -1,51 +0,0 @@
|
|||
;(function($, Mozilla) {
|
||||
'use strict';
|
||||
|
||||
var isMobile = (/Android|Mobile|Tablet|Fennec/i).test(navigator.userAgent);
|
||||
var $giveTry = $('#give-it-a-try');
|
||||
var $learnMore = $('#learn-more');
|
||||
var $window = $(window);
|
||||
|
||||
// Users who reach the last step of the tour get a different cta.
|
||||
function updateCTALinks () {
|
||||
$giveTry.hide();
|
||||
$learnMore.css('display', 'inline-block');
|
||||
}
|
||||
|
||||
// Only run the tour if user is on Firefox 29 for desktop.
|
||||
if (window.isFirefox() && !isMobile && window.getFirefoxMasterVersion() >= 29) {
|
||||
|
||||
// add a callback when user finishes tour to update the cta
|
||||
// id is used for Telemetry
|
||||
var tour = new Mozilla.BrowserTour({
|
||||
id: 'australis-tour-aurora-29.0a2',
|
||||
onTourComplete: updateCTALinks
|
||||
});
|
||||
|
||||
// scroll to top of window for mask overlay
|
||||
if ($window.scrollTop() > 0) {
|
||||
$window.scrollTop(0);
|
||||
}
|
||||
|
||||
// start the by showing the doorhanger.
|
||||
tour.init();
|
||||
|
||||
// show in-page cta to restart the tour
|
||||
$giveTry.show().on('click', function (e) {
|
||||
e.preventDefault();
|
||||
tour.restartTour();
|
||||
gaTrack(['_trackEvent', 'whatsnew Page Interactions - New Firefox Tour', 'click', 'Give it a try']);
|
||||
});
|
||||
|
||||
// track blue post-tour cta button
|
||||
$learnMore.on('click', function (e) {
|
||||
e.preventDefault();
|
||||
var href = this.href;
|
||||
var callback = function() {
|
||||
window.location = href;
|
||||
};
|
||||
gaTrack(['_trackEvent', 'whatsnew Page Interactions - New Firefox Tour', 'click', 'Learn More CTA'], callback);
|
||||
});
|
||||
}
|
||||
|
||||
})(window.jQuery, window.Mozilla);
|
||||
|
|
@ -163,21 +163,21 @@ if (typeof Mozilla == 'undefined') {
|
|||
});
|
||||
};
|
||||
|
||||
Mozilla.UITour.startUrlbarCapture = function(text, url) {
|
||||
_sendEvent('startUrlbarCapture', {
|
||||
text: text,
|
||||
url: url
|
||||
});
|
||||
};
|
||||
Mozilla.UITour.startUrlbarCapture = function(text, url) {
|
||||
_sendEvent('startUrlbarCapture', {
|
||||
text: text,
|
||||
url: url
|
||||
});
|
||||
};
|
||||
|
||||
Mozilla.UITour.endUrlbarCapture = function() {
|
||||
_sendEvent('endUrlbarCapture');
|
||||
};
|
||||
Mozilla.UITour.endUrlbarCapture = function() {
|
||||
_sendEvent('endUrlbarCapture');
|
||||
};
|
||||
|
||||
Mozilla.UITour.getSyncConfiguration = function(callback) {
|
||||
_sendEvent('getConfiguration', {
|
||||
callbackID: _waitForCallback(callback),
|
||||
configuration: "sync",
|
||||
});
|
||||
};
|
||||
Mozilla.UITour.getConfiguration = function(configName, callback) {
|
||||
_sendEvent('getConfiguration', {
|
||||
callbackID: _waitForCallback(callback),
|
||||
configuration: configName
|
||||
});
|
||||
};
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -39,18 +39,25 @@ if (typeof Mozilla == 'undefined') {
|
|||
this.$body = $('body');
|
||||
this.$doc = $(document);
|
||||
this.$tour = $('#ui-tour').detach().show();
|
||||
this.$mask = $('<div id="ui-tour-mask"><div class="mask-inner"></div></div>');
|
||||
this.$mask = $('#ui-tour-mask').detach().show();
|
||||
this.$maskInner = this.$mask.find('.mask-inner');
|
||||
|
||||
// clone the page header and show the mask
|
||||
this.$mask.find('.mask-inner').html($('header h1').clone());
|
||||
this.$body.append(this.$mask).append(this.$tour).addClass('noscroll');
|
||||
|
||||
this.$mask.focus();
|
||||
|
||||
this.$tourList = $('.ui-tour-list');
|
||||
this.$prevButton = $('button.prev');
|
||||
this.$nextButton = $('button.next');
|
||||
this.$closeButton = $('button.close');
|
||||
this.$progress = $('.progress-step');
|
||||
this.$progressStep = this.$progress.find('.step');
|
||||
this.$progressMeter = this.$progress.find('.progress');
|
||||
this.$compactTitle = $('.compact-title');
|
||||
this.$tourTip = $('.tour-tip');
|
||||
this.$tourControls = $('.ui-tour-controls');
|
||||
this.$cta = $('.cta');
|
||||
this.$inTourLinks = this.$tourList.find('a.more');
|
||||
|
||||
// bind UITour event listeners
|
||||
this.bindEvents();
|
||||
|
|
@ -58,14 +65,71 @@ if (typeof Mozilla == 'undefined') {
|
|||
|
||||
/*
|
||||
* Show the initial door-hanger menu that begins the tour
|
||||
* and display the 'splash screen' animation.
|
||||
*/
|
||||
BrowserTour.prototype.init = function () {
|
||||
// show the door hanger if the tab is visible
|
||||
if (!document.hidden) {
|
||||
$('.tour-init').trigger('tour-step');
|
||||
// Register page id for Telemetry
|
||||
Mozilla.UITour.registerPageID(this.options.id);
|
||||
}
|
||||
var that = this;
|
||||
var $p = this.$maskInner.find('p');
|
||||
var $main = this.$maskInner.find('.main');
|
||||
var $menu = this.$maskInner.find('.menu');
|
||||
var words = $p.text().split(' ');
|
||||
var delay = $('body').hasClass('html-ltr') ? 110 : 0;
|
||||
var $tempEl = $('<div>');
|
||||
|
||||
// wrap each word in a <span> with an incremental
|
||||
// transition-delay value.
|
||||
$p.empty().show();
|
||||
$.each(words, function(i, word) {
|
||||
var $span = $('<span>').text(word + ' ');
|
||||
$span.css({
|
||||
'transition-delay': (i * delay) + 'ms'
|
||||
});
|
||||
$tempEl.append($span);
|
||||
});
|
||||
$p.html($tempEl.html());
|
||||
|
||||
// show the menu buttons for /firstrun once the main
|
||||
// title animates in.
|
||||
$main.one('animationend', function () {
|
||||
$p.addClass('in');
|
||||
$menu.delay(words.length * delay).fadeIn('slow');
|
||||
});
|
||||
|
||||
setTimeout(function () {
|
||||
// animate the mask welcome message
|
||||
that.$maskInner.addClass('in');
|
||||
|
||||
// show the door hanger if the tab is visible
|
||||
if (!document.hidden) {
|
||||
// trigger the door hanger for whatsnew
|
||||
$('.tour-init').trigger('tour-step');
|
||||
}
|
||||
|
||||
}, 1000);
|
||||
|
||||
// Register page id for Telemetry
|
||||
Mozilla.UITour.registerPageID(this.options.id);
|
||||
|
||||
// if for some reason animationend didn't fire
|
||||
// make sure the menu is visible
|
||||
setTimeout(function () {
|
||||
if (!$menu.is(':visible') && !that.tourHasStarted) {
|
||||
$menu.stop().fadeIn();
|
||||
}
|
||||
}, 7000);
|
||||
|
||||
// firstrun tour uses in-page buttons insterad of door-hanger
|
||||
$('#start-tour-btn').one('click', $.proxy(function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.startTour();
|
||||
}, this));
|
||||
|
||||
$('#postpone-tour-btn').one('click', $.proxy(function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.postponeTour();
|
||||
}, this));
|
||||
};
|
||||
|
||||
/*
|
||||
|
|
@ -82,6 +146,7 @@ if (typeof Mozilla == 'undefined') {
|
|||
},
|
||||
{
|
||||
label: window.trans('start'),
|
||||
style: 'primary',
|
||||
callback: this.startTour.bind(this)
|
||||
}
|
||||
];
|
||||
|
|
@ -107,7 +172,7 @@ if (typeof Mozilla == 'undefined') {
|
|||
|
||||
// show a hightlighted target feature in the browser UI
|
||||
$('.tour-highlight').on('tour-step', function () {
|
||||
Mozilla.UITour.showHighlight(this.dataset.target);
|
||||
Mozilla.UITour.showHighlight(this.dataset.target, this.dataset.effect);
|
||||
});
|
||||
|
||||
// show a targeted menu panel in the browser UI
|
||||
|
|
@ -119,12 +184,19 @@ if (typeof Mozilla == 'undefined') {
|
|||
this.$doc.on('visibilitychange', this.handleVisibilityChange.bind(this));
|
||||
|
||||
// carousel event handlers
|
||||
this.$doc.on('transitionend', '.ui-tour-list li.current', this.onTourStep.bind(this));
|
||||
this.$tour.on('transitionend', '.ui-tour-list li.current', this.onTourStep.bind(this));
|
||||
this.$closeButton.on('click', this.closeTour.bind(this));
|
||||
this.$mask.on('click', this.closeTour.bind(this));
|
||||
$('.cta button').on('click', this.closeTour.bind(this));
|
||||
$('button.step').on('click', this.onStepClick.bind(this));
|
||||
|
||||
// show tooltips on prev/next buttons
|
||||
this.$tourControls.on('mouseenter focus', 'button.step', this.onStepHover.bind(this));
|
||||
this.$tourControls.on('mouseleave blur', 'button.step', this.offStepHover.bind(this));
|
||||
|
||||
// alternate tour has in-step links to advance section
|
||||
this.$inTourLinks.on('click', this.onTourLinkClick.bind(this));
|
||||
|
||||
// prevent focusing out of mask while initially visible
|
||||
this.$doc.on('focus.ui-tour', 'body', $.proxy(function(e) {
|
||||
if (!this.tourHasStarted && !this.$mask[0].contains(e.target)) {
|
||||
|
|
@ -142,6 +214,58 @@ if (typeof Mozilla == 'undefined') {
|
|||
}, this));
|
||||
};
|
||||
|
||||
/*
|
||||
*Alternate version of the tour has in-step links to advance sections
|
||||
*/
|
||||
BrowserTour.prototype.onTourLinkClick = function (e) {
|
||||
var $current = this.$tourList.find('li.current');
|
||||
var step = $current.data('step');
|
||||
e.preventDefault();
|
||||
|
||||
if (this.tourIsAnimating || !this.tourIsVisible) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$tour.focus();
|
||||
|
||||
if ($current.is(':last-child')) {
|
||||
this.doCloseTour();
|
||||
} else {
|
||||
this.goToTourStep('next');
|
||||
step += 1;
|
||||
gaTrack(['_trackEvent', 'Tour Interaction', 'link click to', 'Step ' + step]);
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
* Shows tooltips for next/prev steps when mouseenter or focus is applied to button
|
||||
*/
|
||||
BrowserTour.prototype.onStepHover = function (e) {
|
||||
e.preventDefault();
|
||||
var $button = $(e.target);
|
||||
var $current = this.$tourList.find('li.current');
|
||||
var tipText;
|
||||
|
||||
// if the tour is compact do nothing
|
||||
if ($button.hasClass('up')) {
|
||||
return;
|
||||
}
|
||||
|
||||
tipText = $button.hasClass('prev') ? $current.data('tipPrev') : $current.data('tipNext');
|
||||
|
||||
if (tipText) {
|
||||
this.$tourTip.html(tipText).addClass('show-tip');
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
* Hide tooltips on mouseleave or blur
|
||||
*/
|
||||
BrowserTour.prototype.offStepHover = function (e) {
|
||||
e.preventDefault();
|
||||
this.$tourTip.removeClass('show-tip');
|
||||
};
|
||||
|
||||
/*
|
||||
* Postpone the tour until later.
|
||||
* Close the tour and display sign-post cta top right corner.
|
||||
|
|
@ -154,6 +278,7 @@ if (typeof Mozilla == 'undefined') {
|
|||
$('.floating-cta').one('click', $.proxy(function (e) {
|
||||
e.preventDefault();
|
||||
this.restartTour();
|
||||
this.setCustomGAVariable();
|
||||
gaTrack(['_trackEvent', 'Tour Interaction', 'click', 'Signpost CTA']);
|
||||
}, this));
|
||||
|
||||
|
|
@ -177,7 +302,6 @@ if (typeof Mozilla == 'undefined') {
|
|||
that.$mask.removeClass('out');
|
||||
that.startTour();
|
||||
}, 50);
|
||||
|
||||
} else {
|
||||
this.expandTour();
|
||||
}
|
||||
|
|
@ -218,6 +342,21 @@ if (typeof Mozilla == 'undefined') {
|
|||
}
|
||||
};
|
||||
|
||||
/*
|
||||
* Shows current tour step highlight item
|
||||
*/
|
||||
BrowserTour.prototype.showHighlight = function () {
|
||||
var $current = this.$tourList.find('li.current');
|
||||
var $stepTarget = $current.find('.step-target');
|
||||
|
||||
if ($current.hasClass('app-menu')) {
|
||||
Mozilla.UITour.showMenu('appMenu');
|
||||
} else {
|
||||
Mozilla.UITour.hideMenu('appMenu');
|
||||
}
|
||||
$stepTarget.delay(100).trigger('tour-step');
|
||||
};
|
||||
|
||||
/*
|
||||
* Triggers the current step tour highlight / interaction
|
||||
* Called on `transitionend` event after carousel item animates
|
||||
|
|
@ -226,18 +365,17 @@ if (typeof Mozilla == 'undefined') {
|
|||
if (e.originalEvent.propertyName === 'transform') {
|
||||
var $current = this.$tourList.find('li.current');
|
||||
var step = $current.data('step');
|
||||
var tipText;
|
||||
|
||||
this.tourIsAnimating = false;
|
||||
Mozilla.UITour.hideInfo();
|
||||
Mozilla.UITour.hideHighlight();
|
||||
$current.find('.step-target').delay(100).trigger('tour-step');
|
||||
this.$progress.find('.step').text(window.trans('step' + step));
|
||||
this.$progress.find('.progress').attr('aria-valuenow', step);
|
||||
this.$tourList.find('.tour-step').not('.current').removeClass('visible');
|
||||
|
||||
// hide menu panel when not needed as it has super-sticky special powers
|
||||
if (!$current.hasClass('app-menu')) {
|
||||
Mozilla.UITour.hideMenu('appMenu');
|
||||
}
|
||||
this.showHighlight();
|
||||
|
||||
this.$progressStep.html(window.trans('step' + step));
|
||||
this.$progressMeter.attr('aria-valuenow', step);
|
||||
this.$tourList.find('.tour-step').not('.current').removeClass('visible');
|
||||
|
||||
// update the button states
|
||||
this.updateControls();
|
||||
|
|
@ -245,12 +383,27 @@ if (typeof Mozilla == 'undefined') {
|
|||
// set focus on the header of current slide
|
||||
$current.find('h2').focus();
|
||||
|
||||
// fire callback when reaching the last tour step.
|
||||
if ($current.is(':last-child')) {
|
||||
// fire callback when reaching the last tour step.
|
||||
this.onTourComplete();
|
||||
// show green cta for the last step
|
||||
this.$cta.removeAttr('disabled').fadeIn();
|
||||
}
|
||||
|
||||
gaTrack(['_trackEvent', 'Tour Interaction', 'click', 'Step ' + step]);
|
||||
// if user still has hover/focus over a button show the tooltip
|
||||
if ($('button.next:hover').length) {
|
||||
tipText = $current.data('tipNext');
|
||||
if (tipText) {
|
||||
this.$tourTip.html(tipText);
|
||||
this.$tourTip.addClass('show-tip');
|
||||
}
|
||||
} else if ($('button.prev:hover').length) {
|
||||
tipText = $current.data('tipPrev');
|
||||
if (tipText) {
|
||||
this.$tourTip.html(tipText);
|
||||
this.$tourTip.addClass('show-tip');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -260,6 +413,8 @@ if (typeof Mozilla == 'undefined') {
|
|||
BrowserTour.prototype.onStepClick = function (e) {
|
||||
e.preventDefault();
|
||||
var $button = $(e.target);
|
||||
var $current = this.$tourList.find('li.current');
|
||||
var step = $current.data('step');
|
||||
|
||||
// if the tour is compact do nothing
|
||||
// as uses it's own handler
|
||||
|
|
@ -269,6 +424,14 @@ if (typeof Mozilla == 'undefined') {
|
|||
|
||||
var trans = $button.hasClass('prev') ? 'prev' : 'next';
|
||||
this.goToTourStep(trans);
|
||||
|
||||
if (trans === 'prev') {
|
||||
step -= 1;
|
||||
} else {
|
||||
step += 1;
|
||||
}
|
||||
|
||||
gaTrack(['_trackEvent', 'Tour Interaction', 'arrow click to', 'Step ' + step]);
|
||||
};
|
||||
|
||||
/*
|
||||
|
|
@ -285,9 +448,16 @@ if (typeof Mozilla == 'undefined') {
|
|||
|
||||
this.tourIsAnimating = true;
|
||||
|
||||
this.$tourTip.removeClass('show-tip');
|
||||
|
||||
// disable tour control buttons while animating
|
||||
$('.ui-tour-controls button').attr('disabled', 'disabled');
|
||||
|
||||
// if we're moving back from the last step, hide green cta
|
||||
if ($current.is(':last-child')) {
|
||||
this.$cta.attr('disabled', 'disabled').fadeOut();
|
||||
}
|
||||
|
||||
// animate in/out the correct tour panel
|
||||
if (trans === 'prev') {
|
||||
$current.removeClass('current next-out').addClass('prev-out');
|
||||
|
|
@ -297,6 +467,7 @@ if (typeof Mozilla == 'undefined') {
|
|||
setTimeout(function () {
|
||||
$prev.addClass('current');
|
||||
}, 50);
|
||||
|
||||
} else if (trans === 'next') {
|
||||
$current.removeClass('current prev-out').addClass('next-out');
|
||||
$next = $current.next().addClass('visible');
|
||||
|
|
@ -318,8 +489,8 @@ if (typeof Mozilla == 'undefined') {
|
|||
$current.addClass('current visible');
|
||||
$('.ui-tour-list .tour-step:gt(' + step + ')').addClass('prev-out');
|
||||
$('.ui-tour-list .tour-step:lt(' + step + ')').addClass('next-out');
|
||||
this.$progress.find('.step').text(window.trans('step' + step));
|
||||
this.$progress.find('.progress').attr('aria-valuenow', step);
|
||||
this.$progressStep.html(window.trans('step' + step));
|
||||
this.$progressMeter.attr('aria-valuenow', step);
|
||||
|
||||
this.updateControls();
|
||||
};
|
||||
|
|
@ -357,13 +528,16 @@ if (typeof Mozilla == 'undefined') {
|
|||
this.tourHasStarted = false;
|
||||
this.tourHasFinished = true;
|
||||
|
||||
this.$tour.removeClass('in');
|
||||
this.$mask.find('.mask-inner').addClass('out');
|
||||
this.$mask.addClass('out');
|
||||
this.$mask.one('transitionend', this.onCloseTour.bind(this));
|
||||
|
||||
this.$cta.fadeOut('fast', $.proxy(function () {
|
||||
this.$tour.removeClass('in');
|
||||
this.$mask.addClass('out');
|
||||
}, this));
|
||||
};
|
||||
|
||||
BrowserTour.prototype.onCloseTour = function () {
|
||||
this.$mask.find('.mask-inner').addClass('out');
|
||||
this.$mask.hide();
|
||||
this.$body.removeClass('noscroll');
|
||||
// unbind ui-tour focus and keyboard event listeners
|
||||
|
|
@ -395,24 +569,23 @@ if (typeof Mozilla == 'undefined') {
|
|||
|
||||
// fade out the mask so user can interact with the page
|
||||
this.$mask.addClass('out');
|
||||
this.$mask.one('transitionend', this.onCompactTour.bind(this));
|
||||
|
||||
setTimeout(this.onCompactTour.bind(this), 600);
|
||||
|
||||
gaTrack(['_trackEvent', 'Tour Interaction', 'click', 'Compact tour']);
|
||||
};
|
||||
|
||||
BrowserTour.prototype.onCompactTour = function (e) {
|
||||
BrowserTour.prototype.onCompactTour = function () {
|
||||
var title;
|
||||
if (e.originalEvent.propertyName === 'opacity') {
|
||||
title = this.$tourList.find('li.current h2').text();
|
||||
this.$mask.hide();
|
||||
this.$body.removeClass('noscroll');
|
||||
title = this.$tourList.find('li.current h2').text();
|
||||
this.$mask.hide();
|
||||
this.$body.removeClass('noscroll');
|
||||
|
||||
// fade in the compact modal content
|
||||
this.$compactTitle.html('<h2>' + title + '</h2>').fadeIn();
|
||||
this.$progress.addClass('compact').fadeIn($.proxy(function () {
|
||||
this.tourIsAnimating = false;
|
||||
}, this));
|
||||
}
|
||||
// fade in the compact modal content
|
||||
this.$compactTitle.html('<h2>' + title + '</h2>').fadeIn();
|
||||
this.$progress.addClass('compact').fadeIn($.proxy(function () {
|
||||
this.tourIsAnimating = false;
|
||||
}, this));
|
||||
};
|
||||
|
||||
/*
|
||||
|
|
@ -426,6 +599,9 @@ if (typeof Mozilla == 'undefined') {
|
|||
return;
|
||||
}
|
||||
|
||||
Mozilla.UITour.hideHighlight();
|
||||
Mozilla.UITour.hideMenu('appMenu');
|
||||
|
||||
this.tourIsVisible = true;
|
||||
this.tourIsAnimating = true;
|
||||
this.$tour.removeClass('compact').addClass('in').focus();
|
||||
|
|
@ -438,25 +614,24 @@ if (typeof Mozilla == 'undefined') {
|
|||
this.$closeButton.fadeIn('fast');
|
||||
|
||||
this.$mask.show();
|
||||
|
||||
setTimeout(this.onTourExpand.bind(this), 600);
|
||||
|
||||
setTimeout(function () {
|
||||
that.$mask.removeClass('out');
|
||||
}, 50);
|
||||
|
||||
this.$mask.one('transitionend', this.onTourExpand.bind(this));
|
||||
|
||||
gaTrack(['_trackEvent', 'Tour Interaction', 'click', 'Expand tour']);
|
||||
};
|
||||
|
||||
BrowserTour.prototype.onTourExpand = function (e) {
|
||||
if (e.originalEvent.propertyName === 'opacity') {
|
||||
this.$body.addClass('noscroll');
|
||||
this.$tourList.find('li.current .step-target').trigger('tour-step');
|
||||
this.$progress.removeClass('compact').fadeIn('slow');
|
||||
this.$tourList.find('li.current').find('h2').focus();
|
||||
this.$tourList.fadeIn('slow', $.proxy(function () {
|
||||
this.tourIsAnimating = false;
|
||||
}, this));
|
||||
}
|
||||
BrowserTour.prototype.onTourExpand = function () {
|
||||
this.$body.addClass('noscroll');
|
||||
this.showHighlight();
|
||||
this.$progress.removeClass('compact').fadeIn('slow');
|
||||
this.$tourList.find('li.current').find('h2').focus();
|
||||
this.$tourList.fadeIn('slow', $.proxy(function () {
|
||||
this.tourIsAnimating = false;
|
||||
}, this));
|
||||
};
|
||||
|
||||
/*
|
||||
|
|
@ -468,7 +643,7 @@ if (typeof Mozilla == 'undefined') {
|
|||
|
||||
if (this.tourIsVisible && !this.tourIsAnimating) {
|
||||
|
||||
switch (e.keyCode) {
|
||||
switch (e.which) {
|
||||
// esc minimizes the tour
|
||||
case 27:
|
||||
this.closeTour();
|
||||
|
|
@ -489,6 +664,22 @@ if (typeof Mozilla == 'undefined') {
|
|||
}
|
||||
};
|
||||
|
||||
/*
|
||||
* Set custom GA variable so we know if the tour is taken for the first time
|
||||
* The custom var should only be set if cookies are enabled.
|
||||
*/
|
||||
BrowserTour.prototype.setCustomGAVariable = function () {
|
||||
var firstTime = 'True';
|
||||
try {
|
||||
if (localStorage.getItem(this.options.id) === 'taken') {
|
||||
firstTime = 'False';
|
||||
} else {
|
||||
localStorage.setItem(this.options.id, 'taken');
|
||||
}
|
||||
gaTrack(['_setCustomVar', 5, 'First Time Taking Firefox Tour', firstTime, 2]);
|
||||
} catch (e) {}
|
||||
};
|
||||
|
||||
/*
|
||||
* Starts the tour and animates the carousel up from bottom of viewport
|
||||
*/
|
||||
|
|
@ -499,39 +690,33 @@ if (typeof Mozilla == 'undefined') {
|
|||
var $current = this.$tourList.find('li.current');
|
||||
var step = $current.data('step');
|
||||
|
||||
this.$progress.find('.step').text(window.trans('step' + step));
|
||||
this.$progressStep.html(window.trans('step' + step));
|
||||
|
||||
// fade out the inner mask messaging that's shown the the page loads
|
||||
this.$maskInner.addClass('out');
|
||||
|
||||
this.$tour.addClass('in').focus();
|
||||
this.$tour.attr('aria-expanded', true);
|
||||
this.tourIsVisible = true;
|
||||
this.tourHasStarted = true;
|
||||
|
||||
// fade out the inner mask messaging that's shown the the page loads
|
||||
this.$mask.find('.mask-inner').addClass('out');
|
||||
|
||||
Mozilla.UITour.hideInfo();
|
||||
|
||||
// toggle/close with escape key
|
||||
this.$tour.on('keyup.ui-tour', this.onKeyUp.bind(this));
|
||||
|
||||
// prevent focusing out of modal while open
|
||||
this.$doc.off('focus.ui-tour').on('focus.ui-tour', 'body', function(e) {
|
||||
this.$doc.off('focus.ui-tour', 'body').on('focus.ui-tour', 'body', function(e) {
|
||||
if (that.tourIsVisible && !that.$tour[0].contains(e.target)) {
|
||||
e.stopPropagation();
|
||||
that.$tour.focus();
|
||||
}
|
||||
});
|
||||
|
||||
// show the first tour step
|
||||
setTimeout(function () {
|
||||
that.$tourList.find('li.current .step-target').trigger('tour-step');
|
||||
$current.find('h2').focus();
|
||||
|
||||
// temp workaround if bug 968039 does not make it into Aurora 29
|
||||
// fixes highlight position first time browser is opened.
|
||||
Mozilla.UITour.showHighlight('appMenu');
|
||||
}, 500);
|
||||
setTimeout(this.onStartTour.bind(this), 600);
|
||||
|
||||
if (!this.tourIsPostponed) {
|
||||
this.setCustomGAVariable();
|
||||
gaTrack(['_trackEvent', 'Tour Interaction', 'click', 'Lets go']);
|
||||
} else {
|
||||
this.tourIsPostponed = false;
|
||||
|
|
@ -539,6 +724,21 @@ if (typeof Mozilla == 'undefined') {
|
|||
|
||||
};
|
||||
|
||||
/*
|
||||
* When the tour finishes animating in from bottom, trigger the tour step
|
||||
*/
|
||||
BrowserTour.prototype.onStartTour = function () {
|
||||
var $current = this.$tourList.find('li.current');
|
||||
var that = this;
|
||||
$current.find('h2').focus();
|
||||
setTimeout(function () {
|
||||
// temp workaround if bug 968039 does not make it into Aurora 29
|
||||
// fixes highlight position first time browser is opened.
|
||||
Mozilla.UITour.showHighlight('appMenu', 'wobble');
|
||||
that.showHighlight();
|
||||
}, 100);
|
||||
};
|
||||
|
||||
/*
|
||||
* Fire an optional callback when the user reaches last step in the tour
|
||||
*/
|
||||
|
|
@ -573,9 +773,11 @@ if (typeof Mozilla == 'undefined') {
|
|||
// if tab is visible and tour is open, show the current step.
|
||||
if (this.tourIsVisible) {
|
||||
this.highlightTimer = setTimeout(function () {
|
||||
$current.find('.step-target').trigger('tour-step');
|
||||
that.$progress.find('.step').text(window.trans('step' + step));
|
||||
that.$progress.find('.progress').attr('aria-valuenow', step);
|
||||
if (that.tourIsVisible) {
|
||||
that.showHighlight();
|
||||
that.$progress.find('.step').html(window.trans('step' + step));
|
||||
that.$progress.find('.progress').attr('aria-valuenow', step);
|
||||
}
|
||||
}, 900);
|
||||
gaTrack(['_trackEvent', 'Tour Interaction', 'visibility', 'Return to tour']);
|
||||
// Update page id for Telemetry when returning to tab
|
||||
|
|
|
|||
|
|
@ -0,0 +1,125 @@
|
|||
;(function($, Mozilla) {
|
||||
'use strict';
|
||||
|
||||
var $window = $(window);
|
||||
var $survey = $('#survey-link');
|
||||
var pageId = $('body').prop('id');
|
||||
var firstTime = 'True';
|
||||
|
||||
// scroll to top of window for mask overlay
|
||||
if ($window.scrollTop() > 0) {
|
||||
$window.scrollTop(0);
|
||||
}
|
||||
|
||||
// Update surver link for visitors who complete the tour
|
||||
window.updateTourSurveyLink = function () {
|
||||
$survey.attr('href', 'https://www.surveygizmo.com/s3/1578504/Firefox-Beta-29-Tour-Survey');
|
||||
};
|
||||
|
||||
// Highlight sync in the app menu and track cta click
|
||||
function showSyncInMenu (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
Mozilla.UITour.showHighlight('accountStatus', 'wobble');
|
||||
|
||||
// hide app menu when user clicks anywhere on the page
|
||||
$(document.body).one('click', function () {
|
||||
Mozilla.UITour.hideHighlight();
|
||||
});
|
||||
|
||||
gaTrack(['_trackEvent', pageId + ' Page Interactions - New Firefox Tour', 'button click', 'Get Started with Sync']);
|
||||
}
|
||||
|
||||
// Open survey link in new window and track click
|
||||
function openSurvey (e) {
|
||||
e.preventDefault();
|
||||
window.open(this.href, '_blank');
|
||||
gaTrack(['_trackEvent', pageId + ' Page Interactions - New Firefox Tour', 'survey link', this.href]);
|
||||
}
|
||||
|
||||
// Open learn more links in new window and track
|
||||
function trackLearnMoreLinks (e) {
|
||||
e.preventDefault();
|
||||
var url = this.href;
|
||||
window.open(url, '_blank');
|
||||
gaTrack(['_trackEvent', pageId + ' Page Interactions - New Firefox Tour', 'link click', url]);
|
||||
}
|
||||
|
||||
// show sync animation when user scrolls down past header
|
||||
$('main > header h1').waypoint(function(direction) {
|
||||
if (direction === 'down') {
|
||||
syncAnimation();
|
||||
}
|
||||
}, {
|
||||
triggerOnce: true,
|
||||
offset: -150
|
||||
});
|
||||
|
||||
function syncAnimation () {
|
||||
var $syncAnim = $('.sync-anim');
|
||||
var $laptop = $syncAnim.find('.laptop');
|
||||
var $tablet = $syncAnim.find('.tablet');
|
||||
var $cloud = $syncAnim.find('.cloud');
|
||||
var $phone = $syncAnim.find('.phone');
|
||||
var $arrows = $cloud.find('.sync-arrows');
|
||||
var $checkmark = $cloud.find('.checkmark');
|
||||
|
||||
$laptop.addClass('on');
|
||||
|
||||
$laptop.one('animationend', '.passwords', function () {
|
||||
$syncAnim.addClass('devices-in');
|
||||
});
|
||||
|
||||
$phone.one('animationend', function () {
|
||||
$cloud.addClass('up');
|
||||
});
|
||||
|
||||
$arrows.one('animationend', function () {
|
||||
$tablet.addClass('on');
|
||||
});
|
||||
|
||||
$tablet.one('animationend', '.passwords', function () {
|
||||
$phone.addClass('on');
|
||||
});
|
||||
|
||||
$phone.one('animationend', '.passwords', function () {
|
||||
$cloud.addClass('complete');
|
||||
});
|
||||
|
||||
$checkmark.one('animationend', function () {
|
||||
$syncAnim.addClass('complete');
|
||||
});
|
||||
}
|
||||
|
||||
//Only highlight sync for Firefox Desktop 29 or greater.
|
||||
if (window.isFirefox() && !window.isFirefoxMobile() && window.getFirefoxMasterVersion() >= 29) {
|
||||
// Highlight sync if the user does not already have it setup
|
||||
Mozilla.UITour.getConfiguration('sync', function (config) {
|
||||
var $cta = $('.sync-cta');
|
||||
|
||||
if (config.setup === false) {
|
||||
// show the sync cta button
|
||||
$cta.show();
|
||||
// highlight sync in the menu when user clicks cta
|
||||
$cta.find('button').on('click', showSyncInMenu);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// track learn more links on click
|
||||
$('.learn-more a').on('click', trackLearnMoreLinks);
|
||||
|
||||
// track survey link on click
|
||||
$survey.on('click', openSurvey);
|
||||
|
||||
//track if this is the first time a user has seen any tour (firstrun or whatsnew)
|
||||
try {
|
||||
if (localStorage.getItem('mozUITourGlobalFlag') === 'taken') {
|
||||
firstTime = 'False';
|
||||
} else {
|
||||
localStorage.setItem('mozUITourGlobalFlag', 'taken');
|
||||
}
|
||||
gaTrack(['_trackEvent', 'Tour Interaction', 'First Time Seeing Tour', firstTime, 0, true]);
|
||||
} catch (e) {}
|
||||
|
||||
})(window.jQuery, window.Mozilla);
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
;(function($, Mozilla) {
|
||||
'use strict';
|
||||
|
||||
//Only run the tour if user is on Firefox 29 for desktop.
|
||||
if (window.isFirefox() && !window.isFirefoxMobile() && window.getFirefoxMasterVersion() >= 29) {
|
||||
|
||||
// add a callback when user finishes tour to update the cta
|
||||
// id is used for Telemetry
|
||||
var tour = new Mozilla.BrowserTour({
|
||||
id: 'australis-tour-firstrun-29.0',
|
||||
onTourComplete: window.updateTourSurveyLink
|
||||
});
|
||||
|
||||
tour.init();
|
||||
}
|
||||
|
||||
})(window.jQuery, window.Mozilla);
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
;(function($, Mozilla) {
|
||||
'use strict';
|
||||
|
||||
//Only run the tour if user is on Firefox 29 for desktop.
|
||||
if (window.isFirefox() && !window.isFirefoxMobile() && window.getFirefoxMasterVersion() >= 29) {
|
||||
|
||||
// add a callback when user finishes tour to update the cta
|
||||
// id is used for Telemetry
|
||||
var tour = new Mozilla.BrowserTour({
|
||||
id: 'australis-tour-whatsnew-b-29.0',
|
||||
onTourComplete: window.updateTourSurveyLink
|
||||
});
|
||||
|
||||
tour.init();
|
||||
}
|
||||
|
||||
})(window.jQuery, window.Mozilla);
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
;(function($, Mozilla) {
|
||||
'use strict';
|
||||
|
||||
//Only run the tour if user is on Firefox 29 for desktop.
|
||||
if (window.isFirefox() && !window.isFirefoxMobile() && window.getFirefoxMasterVersion() >= 29) {
|
||||
|
||||
// add a callback when user finishes tour to update the cta
|
||||
// id is used for Telemetry
|
||||
var tour = new Mozilla.BrowserTour({
|
||||
id: 'australis-tour-whatsnew-29.0',
|
||||
onTourComplete: window.updateTourSurveyLink
|
||||
});
|
||||
|
||||
tour.init();
|
||||
}
|
||||
|
||||
})(window.jQuery, window.Mozilla);
|
||||
Загрузка…
Ссылка в новой задаче