navbar: Update searchbox event listeners behaviour.

These are some UI and UX changes mainly related for when to
display the search pills and when to dispay the narrow description
in the search bar.

frontend_tests/node_tests/search.js

@@ -12,7 +12,7 @@ const return_true = () => true;
 const return_false = () => false;
 
 set_global('$', global.make_zjquery());
-set_global('narrow_state', {});
+set_global('narrow_state', {filter: return_false});
 set_global('search_suggestion', {});
 set_global('ui_util', {
     change_tab_to: noop,
@@ -283,7 +283,7 @@ run_test('initizalize', () => {
 
 run_test('initiate_search', () => {
     let is_searchbox_focused = false;
-    $('#search_query').focus = () => {
+    $('#search_arrows').focus = () => {
         is_searchbox_focused = true;
     };
     search.initiate_search();

static/js/search.js

@@ -177,9 +177,11 @@ exports.initialize = function () {
         // while we want to add box-shadow to `#searchbox`. This could have been done
         // with `:focus-within` CSS selector, but it is not supported in IE or Opera.
         searchbox.on('focusin', function () {
+            tab_bar.open_search_bar_and_close_narrow_description();
             searchbox.css({"box-shadow": "inset 0px 0px 0px 2px hsl(204, 20%, 74%)"});
         });
         searchbox.on('focusout', function () {
+            tab_bar.close_search_bar_and_open_narrow_description();
             searchbox.css({"box-shadow": "unset"});
         });
     }

static/js/tab_bar.js

@@ -172,8 +172,11 @@ exports.open_search_bar_and_close_narrow_description = function () {
 };
 
 exports.close_search_bar_and_open_narrow_description = function () {
-    $(".navbar-search").removeClass("expanded");
-    $("#tab_list").removeClass("hidden");
+    const filter = narrow_state.filter();
+    if (!(filter && !filter.is_common_narrow())) {
+        $(".navbar-search").removeClass("expanded");
+        $("#tab_list").removeClass("hidden");
+    }
 };
 
 window.tab_bar = exports;