Always show the searchbar 'x'.

This simplifies a bunch of fragile resizing logic in our code,
and also addresses the Chrome Canary bug where clicking in the
searchbox causes the navbar to get huge.

This fixes Trac #764 and Trac #1039

(imported from commit fc8c3995109de384b71dfba2b986a8500ff7f08d)

templates/zephyr/navbar.html

@@ -13,10 +13,11 @@
           </a>
           <div id="searchbox">
             <form id="searchbox_form" class="form-search navbar-search">
-              <div id="search_arrows">
-                <input class="search-query" id="search_query" type="text" placeholder="Search…"
+              <div id="search_arrows" class="input-append">
+                <input class="search-query input-block-level" id="search_query" type="text" placeholder="Search…"
                        autocomplete="off">
-                <button class="btn search_button" type="button" id="search_exit"><i class="icon-remove"></i></button>
+                {# Start the button off disabled since there is no active search #}
+                <button class="btn search_button" type="button" id="search_exit" disabled="disabled"><i class="icon-remove"></i></button>
               </div>
             </form>
           </div>{# /searchbox #}

zephyr/static/js/search.js

@@ -149,23 +149,9 @@ function update_buttons_with_focus(focused) {
     if (focused
         || search_query.val()
         || narrow.active()) {
-
-        if ($('.search_button').is(':visible')) {
-            // Already visible, and the width manipulation below
-            // will break if we do it again.
-            return;
-        }
-        // Shrink the searchbox to make room for the buttons.
-        var new_width = search_query.width() -
-            $('.search_button').outerWidth(true);
-        search_query.width(new_width-1);
-        $("#search_arrows").addClass("input-append");
-        $('.search_button').show();
+        $('.search_button').removeAttr('disabled');
     } else {
-        // Hide buttons.
-        $('#search_query').width('');
-        $("#search_arrows").removeClass("input-append");
-        $('.search_button').blur().hide();
+        $('.search_button').attr('disabled', 'disabled');
     }
 }
 

zephyr/static/styles/zephyr.css

@@ -615,7 +615,12 @@ input.recipient_box {
     cursor: pointer;
 }
 
+#navbar-middle {
+    display: table-row;
+}
+
 .brand.skinny-user-gravatar {
+    display: table-cell;
     padding-top: 5px;
     padding-bottom: 0px;
     margin-bottom: 5px;
@@ -671,6 +676,7 @@ input.recipient_box {
 }
 
 #search_arrows {
+    width: 99%;
     margin-bottom: 5px;
 
     /* Bootstrap wants font-size: 0 to eliminate space between
@@ -681,19 +687,10 @@ input.recipient_box {
 }
 
 #searchbox .search_button {
-    display: none;
     text-align: center;
     padding: 4px 10px 4px 10px;
 }
 
-/* A cheat, because input-prepend and input-append aren't
-   smart enough to do the right thing with search-query */
-#searchbox .search_button_middle {
-    border-radius: 0;
-    -webkit-border-radius: 0;
-    -moz-border-radius: 0;
-}
-
 #floating_recipient_bar {
     position: fixed;
     /* .message_list max-width */