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...
jpetto committed Dec 11, 2014
1 parent be91594 commit e22a12dcee78005464e8b55bfc5cbeab43abb9c9
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 @@ <h2><img src="{{ MEDIA_URL }}img/firefox/new/header-firefox.png?2013-06" alt="{{
{% 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 @@ <h2><img src="{{ MEDIA_URL }}img/firefox/new/header-firefox.png?2013-06" alt="{{
</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 @@ <h2><img src="{{ MEDIA_URL }}img/firefox/new/header-firefox.png?2013-06" alt="{{
{{ _('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.