Permalink
Browse files

Add refresh button UI to /firefox/new/. Bug 1027318.

- Add minor JS optimizations.
- Remove GA experiment snippet (no longer used).
  • Loading branch information...
1 parent be91594 commit e22a12dcee78005464e8b55bfc5cbeab43abb9c9 @jpetto jpetto committed Dec 11, 2014
Showing with 112 additions and 29 deletions.
  1. +12 −24 bedrock/firefox/templates/firefox/new.html
  2. +6 −0 bedrock/settings/base.py
  3. +39 −0 media/css/firefox/new.less
  4. +55 −5 media/js/firefox/new.js
@@ -21,29 +21,9 @@
{% block extrahead %}
{{ css('firefox_new') }}
-
- {% if request.locale == 'en-US' %}
- <!-- Google Analytics Content Experiment code -->
- <script>function utmx_section(){}function utmx(){}(function(){
- if (! /[?&]f=[0-9]+/.test(window.location.search)){
- var k='71153379-28',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 -->
- {% endif %}
{% endblock %}
{% block js_pretrack %}
- {{ js('firefox-resp') }}
{{ js('firefox_new') }}
{% endblock %}
@@ -68,6 +48,14 @@
</div>
<div id="version-message-desktop-latest" class="version-message">
{{_('Congrats! You’re using the latest version of Firefox.')}}
+
+ {% if l10n_has_tag('firefox_new_refresh_button') %}
+ <div id="refresh-firefox-wrapper">
+ <p>{{ _('Give Firefox a tune up') }}</p>
+ <button type="button" id="refresh-firefox" class="button">{{ _('Refresh Firefox') }}</button>
+ <a href="https://support.mozilla.org/kb/reset-firefox-easily-fix-most-problems" rel="external">{{ _('Learn more') }}</a>
+ </div>
+ {% endif %}
</div>
<div id="version-message-desktop-old" class="version-message">
{{_('Looks like you’re using an older version of Firefox.')}}
@@ -79,7 +67,7 @@
{{ _('Please follow <a href="%(url)s">these instructions</a> to install Firefox.')|format(url='https://support.mozilla.org/kb/install-firefox-linux') }}
</div>
</div>
- <div id="main-feature">
+ <div id="main-feature" class="hide-for-refresh">
<div class="row">
<img src="{{ media('img/firefox/new/firefox-logo.png?2013-06') }}" alt="Firefox" />
<h1 class="large">
@@ -113,11 +101,11 @@ <h1 class="large">
</div>
<div class="desktop-latest-links-wrapper latest-links-wrapper">
<ul>
- <li><a href="{{ url('firefox.desktop.index') }}">{{_('Learn more about Firefox for desktop')}}</a></li>
+ <li class="hide-for-refresh"><a href="{{ url('firefox.desktop.index') }}">{{_('Learn more about Firefox for desktop')}}</a></li>
<li><a href="https://support.mozilla.org/products/firefox">{{_('Need help?')}}</a></li>
{% if l10n_has_tag('mobile_links') %}
- <li><a href="{{settings.GOOGLE_PLAY_FIREFOX_LINK }}">{{_('Get Firefox on your Android device')}}</a></li>
- <li><a href="{{ url('firefox.os.index') }}">{{_('Learn about Firefox OS')}}</a></li>
+ <li class="hide-for-refresh"><a href="{{settings.GOOGLE_PLAY_FIREFOX_LINK }}">{{_('Get Firefox on your Android device')}}</a></li>
+ <li class="hide-for-refresh"><a href="{{ url('firefox.os.index') }}">{{_('Learn about Firefox OS')}}</a></li>
{% endif %}
<li><a href="{{ url('firefox.all') }}">{{_('Download a fresh copy')}}</a></li>
</ul>
@@ -751,6 +751,12 @@ def JINJA_CONFIG():
'js/firefox/hello/start.js',
),
'firefox_new': (
+ 'js/libs/jquery-1.11.0.min.js',
+ 'js/libs/spin.min.js',
+ 'js/base/global.js',
+ 'js/newsletter/form.js',
+ 'js/base/mozilla-input-placeholder.js',
+ 'js/base/mozilla-image-helper.js',
'js/libs/socialshare.min.js',
'js/libs/modernizr.custom.csstransitions.js',
'js/firefox/new.js',
@@ -178,6 +178,45 @@ html.firefox-latest {
}
}
+// desktop user with version exactly matching latest release version
+#refresh-firefox-wrapper {
+ display: none;
+}
+
+html.show-refresh {
+ #refresh-firefox-wrapper {
+ display: block;
+ margin: (@baseLine * 2) 0 @baseLine;
+
+ p {
+ font-style: normal;
+ margin-bottom: @baseLine / 2;
+ }
+
+ a {
+ color: @textColorTertiary;
+ font-style: normal;
+ .font-size(12px);
+ .trailing-arrow();
+ }
+ }
+
+ #refresh-firefox {
+ display: block;
+ width: 260px;
+ margin: 0 auto;
+ border-radius: 8px;
+ padding: 15px;
+ font-weight: normal;
+ .font-size(22px);
+ }
+
+ #main-feature,
+ .hide-for-refresh {
+ display: none;
+ }
+}
+
html.firefox-old {
.version-message-container {
display: block;
@@ -5,6 +5,41 @@
;(function($, Modernizr, _gaq, site) {
'use strict';
+ var $window = $(window);
+ var $document = $(document);
+
+ var uiTourSendEvent = function(action, data) {
+ var event = new CustomEvent('mozUITour', {
+ bubbles: true,
+ detail: {
+ action: action,
+ data: data || {}
+ }
+ });
+
+ document.dispatchEvent(event);
+ };
+
+ var uiTourGetConfiguration = function(configName, callback) {
+ uiTourSendEvent('getConfiguration', {
+ configuration: configName,
+ callbackID: function() {
+ var id = Math.random().toString(36).replace(/[^a-z]+/g, '');
+
+ function listener(event) {
+ if (typeof event.detail === 'object' && event.detail.callbackID === id) {
+ document.removeEventListener('mozUITourResponse', listener);
+ callback(event.detail.data);
+ }
+ }
+
+ document.addEventListener('mozUITourResponse', listener);
+
+ return id;
+ }.call()
+ });
+ };
+
var isIELT9 = (site.platform === 'windows' && /MSIE\s[1-8]\./.test(navigator.userAgent));
var path_parts = window.location.pathname.split('/');
var query_str = window.location.search ? window.location.search + '&' : '?';
@@ -16,8 +51,11 @@
var $html = $(document.documentElement);
if (isFirefox()) {
- var latestFirefoxVersion = $html.attr('data-latest-firefox');
- latestFirefoxVersion = parseInt(latestFirefoxVersion.split('.')[0], 10);
+ // data-latest-firefox includes point release information
+ var latestFirefoxVersionFull = $html.attr('data-latest-firefox');
+
+ // get latest full version (no point release info) for initial check
+ var latestFirefoxVersion = parseInt(latestFirefoxVersionFull.split('.')[0], 10);
if (isFirefoxUpToDate(latestFirefoxVersion + '')) {
if (window.location.hash !== '#download-fx' && window.location.search !== '?scene=2') {
@@ -27,6 +65,18 @@
// (from a download button) then we want them to see the same scene 2
// as non-firefox users and initiate a download
$html.addClass('firefox-latest');
+
+ // if user is on release channel and has latest version, offer refresh button
+ uiTourGetConfiguration('appinfo', function(config) {
+ if (config.defaultUpdateChannel === 'release' && config.version === latestFirefoxVersionFull) {
+ $html.addClass('show-refresh');
+
+ // DOM may not be ready yet, so bind filtered click handler to document
+ $document.on('click', '#refresh-firefox', function() {
+ uiTourSendEvent('resetFirefox');
+ });
+ }
+ });
}
} else {
$html.addClass('firefox-old');
@@ -71,7 +121,7 @@
|| site.platform === 'android' // download goes to Play Store
);
- $(document).ready(function() {
+ $document.ready(function() {
var $scene1 = $('#scene1');
var $stage = $('#stage-firefox');
var $thankYou = $('.thankyou');
@@ -208,7 +258,7 @@
});
if (hash_change && !no_scene2) {
- $(window).on('hashchange', function() {
+ $window.on('hashchange', function() {
if (window.location.hash === '#download-fx') {
show_scene_anim(2);
}
@@ -218,7 +268,7 @@
});
}
- $(window).on('load', function() {
+ $window.on('load', function() {
// Add CSS class that allows scene2 images to load. Done on ready()
// so as not to block the loading of other images.
$('body').addClass('ready-for-scene2');

0 comments on commit e22a12d

Please sign in to comment.