new search suggestions (bug 790066)

media/css/mkt/search.less

@@ -5,7 +5,6 @@
     width: 235px;
     max-width: 235px;
     margin: 0 12px 0 0;
-    top: 10px;
     float: right;
 }
 
@@ -34,6 +33,7 @@
     padding: 0 5px 0 30px;
     z-index: 2;
     width: 235px;
+    margin-top: 10px;
     &:focus {
         .box-shadow(0 1px 1px rgba(0, 0, 0, 0.06) inset,
                     0 0 8px rgba(80, 160, 220, 0.6));

media/css/mkt/suggestions.less

@@ -4,57 +4,44 @@
     .transition-property(~'bottom, opacity, visibility');
     .transition-duration(.3s);
     font: 13px/26px @open-stack;
-    height: 0;
+    height: 100%;
     opacity: 0;
-    position: absolute;
+    position: fixed;
     right: -10px;
     bottom: 0px;
     left: 0;
     visibility: hidden;
     z-index: 4;
-    .width(3);
+    width: 100%;
     &.visible {
         opacity: 1;
-        bottom: -6px;
+        bottom: 5px;
         visibility: visible;
     }
     .wrap {
-        .border-radius(4px);
-        .box-shadow(0 0 4px rgba(0,0,0,.2),
-                    0 -2px 0 @faint-gray inset);
-        background: @white;
+        background: @bg @grain-src;
         position: absolute;
-        top: 0;
+        top: 55px;
         right: 0;
         left: 0;
-        &:before {
-            .box-shadow(1px 1px 0 rgba(255,255,255,.1) inset,
-                        -1px -1px 0 @faint-gray);
-            .transform(~'rotate(45deg)');
-            content: "";
-            height: 12px;
-            position: absolute;
-            top: -5px;
-            left: 9px;
-            z-index: 5;
-            width: 12px;
-        }
-    }
-    .wrap:before, p a {
-        background: @faint-gray;
+        height: 100%;
     }
     ul {
         list-style: none;
         margin: 0 0 1px;
         padding: 0;
     }
     a {
-        border-top: 1px solid @faint-gray;
-        border-bottom: 1px solid transparent;
+        border-top: 1px solid @white;
+        border-bottom: 1px solid #cbd0d3;
         display: block;
         position: relative;
         text-decoration: none;
         z-index: 6;
+        color: @text;
+        font-size: 19px;
+        background: @bg @grain-src;
+        line-height: 44px;
         &:after {
             clear: both;
             content: ".";
@@ -63,24 +50,12 @@
             visibility: hidden;
         }
         span {
-            .max-width(3);
-            background: no-repeat 5px 50%;
-            .background-size(20px auto);
             display: block;
             float: left;
             overflow: hidden;
-            padding: 0 5px 0 32px;
+            padding: 0 15px;
             text-overflow: ellipsis;
             white-space: nowrap;
-            &.cat {
-                background-image: url(../../img/icons/search-cat.png);
-            }
-        }
-        .subtitle {
-            color: @note-gray;
-            float: left;
-            font-size: 12px;
-            font-style: normal;
         }
     }
     li a:hover,
@@ -95,27 +70,19 @@
         border-color: @faint-gray transparent transparent transparent;
         color: @link;
     }
-    p {
-        font-size: 11px;
-        margin: 0;
-        a {
-            .border-radius(3px 3px 0 0);
-            border-top-width: 0;
-            background: @faint-gray;
-            border-bottom: 0;
+}
+
+// Market header suggestions mode. (Searchatron Terrorize!)
+#site-header.suggestions {
+    nav {
+        .home, .expand, .filter {
+            display: none;
         }
-    }
-    &.sel p a {
-        color: @note-gray;
-    }
-    p a,
-    p a.sel,
-    &.sel p a:hover {
-        color: @dark-gray;
-    }
-    li {
-        &:last-child a {
-            .border-radius(0 0 3px 3px);
+        .cancel {
+            display: block;
         }
     }
+    #search, #search-q {
+        width: 235px;
+    }
 }

media/js/impala/site_suggestions.js

@@ -1,7 +1,8 @@
 // Init site search suggestions and populate the suggestions container.
 (function() {
+    // AMO search init.
     $('#search #search-q').searchSuggestions($('#site-search-suggestions'),
-                                             processResults, true);
+                                             processResults, 'AMO');
 
     function processResults(settings) {
         if (!settings || !settings.category) {
@@ -28,7 +29,7 @@
                             url: escape_(item.url) || '#',
                             icon: '',
                             cls: '',
-                            subtitle: '',
+                            subtitle: ''
                         };
                         if (item.icon) {
                             d.icon = format(

media/js/impala/suggestions.js

@@ -20,21 +20,21 @@ $.fn.highlightTerm = function(val) {
  * processCallback - callback function that deals with the XHR call & populates
                    - the $results element.
  * Optional:
- * siteSearch - boolean of whether this is a site-search suggestions box which
-              - deals with multiple types of search results (apps/personas/etc)
+ * searchType - possible values are 'AMO', 'MKT'
 */
-$.fn.searchSuggestions = function($results, processCallback, siteSearch) {
+$.fn.searchSuggestions = function($results, processCallback, searchType) {
     var $self = this,
         $form = $self.closest('form');
 
     if (!$results.length) {
         return;
     }
 
-    if (siteSearch) {
+    var cat = $results.attr('data-cat');
+
+    if (searchType == 'AMO') {
         // Some base elements that we don't want to keep creating on the fly.
-        var cat = $results.attr('data-cat'),
-            msg;
+        var msg;
         if (cat == 'personas') {
             msg = gettext('Search personas for <b>{0}</b>');
         } else if (cat == 'apps') {
@@ -46,6 +46,8 @@ $.fn.searchSuggestions = function($results, processCallback, siteSearch) {
                             '<p><a class="sel" href="#"><span>{msg}</span></a></p><ul></ul>' +
                             '</div>');
         $results.html(base({'msg': msg}));
+    } else if (searchType == 'MKT') {
+        $results.html('<div class="wrap"><ul></ul></div>');
     }
 
     // Control keys that shouldn't trigger new requests.
@@ -56,7 +58,7 @@ $.fn.searchSuggestions = function($results, processCallback, siteSearch) {
         z.keys.LEFT, z.keys.UP, z.keys.RIGHT, z.keys.DOWN,
         z.keys.HOME, z.keys.END,
         z.keys.COMMAND, z.keys.WINDOWS_RIGHT, z.keys.COMMAND_RIGHT,
-        z.keys.WINDOWS_LEFT_OPERA, z.keys.WINDOWS_RIGHT_OPERA, z.keys.APPLE,
+        z.keys.WINDOWS_LEFT_OPERA, z.keys.WINDOWS_RIGHT_OPERA, z.keys.APPLE
     ];
 
     var gestureKeys = [z.keys.ESCAPE, z.keys.UP, z.keys.DOWN];
@@ -80,6 +82,10 @@ $.fn.searchSuggestions = function($results, processCallback, siteSearch) {
         }
         $results.removeClass('visible sel');
         $results.find('.sel').removeClass('sel');
+        if (searchType == 'MKT') {
+            $('#site-header').removeClass('suggestions');
+            $('#search-q').val('');
+        }
     }
 
     function gestureHandler(e) {
@@ -128,11 +134,11 @@ $.fn.searchSuggestions = function($results, processCallback, siteSearch) {
         var settings = {
             '$results': $results,
             '$form': $form,
-            'searchTerm': val,
+            'searchTerm': val
         };
 
         // Optional data for callback.
-        if (siteSearch) {
+        if (searchType == 'AMO' || searchType == 'MKT') {
             settings['category'] = cat;
         }
 
@@ -182,6 +188,8 @@ $.fn.searchSuggestions = function($results, processCallback, siteSearch) {
         }
     });
 
+    $results.bind('dismiss', dismissHandler);
+
     $form.submit(function(e) {
         var $sel = $results.find('.sel');
         if ($sel.length && $sel.eq(0).attr('href') != '#') {

media/js/mkt/mkt_suggestions.js

@@ -0,0 +1,41 @@
+// Init site search suggestions and populate the suggestions container.
+(function() {
+    // MKT search init.
+    $('#search #search-q').searchSuggestions($('#site-search-suggestions'),
+                                             processResults, 'MKT');
+
+    function processResults(settings) {
+        if (!settings) {
+            return;
+        }
+
+        var li_item = template(
+            '<li><a href="{url}"><span>{name}</span></a></li>'
+        );
+
+        $.ajaxCache({
+            url: settings['$results'].attr('data-src'),
+            data: settings['$form'].serialize() + '&cat=' + settings.category,
+            newItems: function(formdata, items) {
+                var eventName;
+                if (items !== undefined) {
+                    var ul = '';
+                    $.each(items, function(i, item) {
+                        var d = {
+                            url: escape_(item.url) || '#'
+                        };
+                        if (item.name) {
+                            d.name = escape_(item.name);
+                            // Append the item only if it has a name.
+                            ul += li_item(d);
+                        }
+                    });
+                    settings['$results'].find('ul').html(ul);
+                }
+                settings['$results'].addClass('visible')
+                                    .trigger('resultsUpdated', [items]);
+                $('#site-header').addClass('suggestions');
+            }
+        });
+    }
+})();

media/js/mkt/search.js

@@ -21,6 +21,10 @@
         return false;
     });
 
+    // Clear search field on 'cancel' search suggestions.
+    $('#site-header').on('click', '.header-button.cancel', _pd(function() {
+        $('#site-search-suggestions').trigger('dismiss');
+    }));
 
     function selectMe($elm) {
         var $myUL = $elm.closest('ul'),

mkt/asset_bundles.py

@@ -244,7 +244,7 @@
         # Search suggestions.
         'js/impala/ajaxcache.js',
         'js/impala/suggestions.js',
-        'js/impala/site_suggestions.js',
+        'js/mkt/mkt_suggestions.js',
 
         # Account settings.
         'js/mkt/account.js',

mkt/templates/mkt/header.html

@@ -21,12 +21,12 @@ <h1><a href="{{ url('home') }}">{{ _('Firefox Marketplace') }}</a></h1>
           {% if search_form.cat.value() %}
             {{ search_form.cat }}
           {% endif %}
-          <div id="site-search-suggestions"
-               data-cat="apps" data-src="{{ url('search.suggestions') }}"></div>
         </form>
       {% endblock %}
     </nav>
     {% endif %}
   </section>
 </header>
+<div id="site-search-suggestions"
+               data-cat="apps" data-src="{{ url('search.suggestions') }}"></div>
 <div class="overlay nav-overlay"></div>