Add home nav search box for GA experiment. Bug 945053.

bedrock/mozorg/templates/mozorg/home.html

@@ -28,6 +28,26 @@
 <!--[if lt IE 8]>
   {{ css('home-ie') }}
 <![endif]-->
+
+  {% if request.locale == 'en-US' %}
+    <!-- Google Analytics Content Experiment code -->
+    <script>function utmx_section(){}function utmx(){}(function(){
+      if (! /[?&]s=1+/.test(window.location.search)){
+        var k='71153379-33',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 string_data %}
@@ -44,6 +64,18 @@
 <!-- <![endif]-->
 {% endblock %}
 
+{% block site_header_nav %}
+  {% if request.locale == 'en-US' and show_search == '1' %}
+    <form title="{{ _('Search Mozilla sites') }}" role="search" method="get" action="https://www.google.com/cse" id="nav-search-form">
+      <input type="hidden" value="002443141534113389537:ysdmevkkknw" name="cx">
+      <input type="hidden" value="FORID:0" name="cof">
+      <input type="search" placeholder="{{ _('Search') }}" id="q-homenav" name="q" class="site-search">
+      <button type="submit" name="submit-search">{{ _('Search') }}</button>
+    </form>
+  {% endif %}
+  {{ super() }}
+{% endblock %}
+
 {% block site_header_logo %}{% endblock %}
 
 {% block content %}

bedrock/mozorg/views.py

@@ -243,6 +243,9 @@ class HomeTestView(TemplateView):
         locale = l10n_utils.get_locale(self.request)
         locale = locale if locale in settings.MOBILIZER_LOCALE_LINK else 'en-US'
         ctx['mobilizer_link'] = settings.MOBILIZER_LOCALE_LINK[locale]
+
+        ctx['show_search'] = self.request.GET.get('s', 0)
+
         return ctx
 
     def render_to_response(self, context, **response_kwargs):

media/css/mozorg/home-ie.less

@@ -5,6 +5,13 @@
 // Special styling for older versions of IE
 // They get no JavaScript, just accessible content.
 
+#nav-search-form {
+    input.site-search {
+        background: #fff;
+        border: 1px solid darken(#d7d3c8, 10%);
+    }
+}
+
 // I can hasLayout
 .mission,
 .extra,

media/css/mozorg/home-ie8.less

@@ -4,6 +4,12 @@
 
 // Special styling for IE8
 
+#nav-search-form {
+    input.site-search {
+        background: #fff;
+        border: 1px solid darken(#d7d3c8, 10%);
+    }
+}
 
 // Newer browsers hang these styles from a '.wide' class applied by JS (else
 // we assume no JS and it gets plain content without interaction).

media/css/mozorg/home.less

@@ -59,7 +59,44 @@
     margin-top: 0;
 }
 
+#nav-search-form {
+    float: right;
+    margin: 6px 14px 0 0;
 
+    .site-search {
+        // force content-box - webkit UA stylesheet gives search boxes border-box
+        -moz-box-sizing: content-box;
+        -webkit-box-sizing: content-box;
+        box-sizing: content-box;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        float: left;
+        .border-radius(0);
+        border: none;
+        @shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.4);
+        .box-shadow(@shadow);
+        margin: 0;
+        padding: 6px 10px;
+        background: #f0efec;
+        .transition;
+        &:focus {
+            background: #fff;
+            outline: none;
+            @shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3);
+            .box-shadow(@shadow);
+        }
+    }
+
+    button {
+        .image-replaced;
+        background: #c13832 url(/media/img/home/bg-search-magnifier.png) center center no-repeat;
+        padding: 0;
+        margin-left: 1px;
+        width: 28px;
+        height: 28px;
+        border: none;
+    }
+}
 
 // @Header, @mission statement
 .mission {
@@ -595,6 +632,18 @@
     background-image: url(/media/img/home/control-arrows-lt.png);
 }
 
+/****************************************************************************/
+// @High resolution images for @retina-type displays
+// Desktop
+@media (-webkit-min-device-pixel-ratio: 1.5),
+       (                min-resolution: 1.5dppx),
+       (                min-resolution: 144dpi) {
+
+        #nav-search-form button {
+            background-image: url(/media/img/home/bg-search-magnifier-hires.png);
+            background-size: 17px 17px;
+        }
+}
 
 
 /****************************************************************************/
@@ -609,6 +658,12 @@
         width: (@widthTablet - (@gridGutterWidth * 2));
     }
 
+    #nav-search-form {
+        .site-search {
+            width: 120px;
+        }
+    }
+
     .mission .tagline {
         font-size: 42px;
     }
@@ -702,6 +757,13 @@
         width: (@widthMobile - @gridGutterWidth);
     }
 
+    #nav-search-form {
+        margin: @baseLine 0 0;
+        .site-search {
+            width: 247px;
+        }
+    }
+
     .mission {
         width: 260px;
         margin: 20px auto;
@@ -894,6 +956,13 @@
 // @Wide @mobile layout: 480px
 @media only screen and (min-width: @breakMobileLandscape) and (max-width: @breakTablet) {
 
+    #nav-search-form {
+        margin: 6px 14px 0 0;
+        .site-search {
+            width: 136px;
+        }
+    }
+
     .pillars {
         background-image: url(/media/img/home/box-shadow-440.png);
         padding-bottom: 18px;

media/js/mozorg/home.js

@@ -10,6 +10,21 @@
     var wideMode = false;
     var hasMediaQueries = (typeof matchMedia !== 'undefined');
 
+    // Track home page search
+    $('#nav-search-form').on('submit', function(e) {
+        e.preventDefault();
+
+        var $form = $(this);
+        var keyword = $form.find('#q-homenav').val();
+
+        $form.unbind('submit');
+
+        gaTrack(
+            ['_trackEvent', 'Homepage Interactions', 'outside tabz search', keyword],
+            function (){ $form.submit(); }
+        );
+    });
+
     // If the browser supports media queries, check the width onload and onresize.
     // If not, just lock it in permanent wideMode.
     if (hasMediaQueries) {
@@ -177,8 +192,8 @@
         var panel = $(this).parents('.panel');
 
         gaTrack(
-          ['_trackEvent', 'Homepage Interactions', 'submit', (panel.index() + 1) + ':donate'],
-          function (){ $form.submit(); }
+            ['_trackEvent', 'Homepage Interactions', 'submit', (panel.index() + 1) + ':donate'],
+            function (){ $form.submit(); }
         );
     });