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

- Add minor JS optimizations.
- Remove GA experiment snippet (no longer used).

bedrock/firefox/templates/firefox/new.html

@@ -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>

bedrock/settings/base.py

@@ -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',

media/css/firefox/new.less

@@ -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;

media/js/firefox/new.js

@@ -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');