navbar: Increase the click area of to initiate search.

This commit:
- Switches margin for padding on the search closed icon, to ensure we
  cover the region to the right of icon as clickable area.
- Applies the click handler that initiates the search to the second
  last element of the navbar:
  - This will most commonly be the narrow_description element, but may
    also be the entire navbar eg in the case of "ALL" or "starred".
    Applying this change to user names in "group-pm-with: ..." based
    narrows is a little questionable, but there are no other triggers
    on these names so this change makes sense for now.
  - The narrow_description may also contain links, which need to be
    handled correctly so that the behave like links should. We work
    around the onClick on the narrow_description, by applying a
    handler to <a> tags and invoking stopPropagation.
- We also add CSS to change the cursor to a pointer to make the
  search icon change color on hover over the clickable area to
  indicate that the search box can be opened with a single click.
- However, since <a> tags are handled differently, we add a hover
  listener which makes sure it behaves appropriately. We also increase
  the vertical padding of the <a> tags so they cover the entire
  vertical navbar region.

frontend_tests/node_tests/ui_init.js

@@ -190,6 +190,8 @@ $("#tab_list .stream").length = 0;
 compose.compute_show_video_chat_button = () => {};
 $("#below-compose-content .video_link").toggle = () => {};
 
+$(".narrow_description > a").hover = () => {};
+
 run_test('initialize_everything', () => {
     ui_init.initialize_everything();
 });

static/js/tab_bar.js

@@ -69,12 +69,44 @@ function build_tab_bar(filter) {
     } else {
         const tab_bar_data = make_tab_data(filter);
         display_tab_bar(tab_bar_data);
+
         $(".search_closed").on("click", function (e) {
             exports.open_search_bar_and_close_narrow_description();
             search.initiate_search();
             e.preventDefault();
             e.stopPropagation();
         });
+
+        $("#tab_list span:nth-last-child(2)").on("click", function (e) {
+            exports.open_search_bar_and_close_narrow_description();
+            search.initiate_search();
+            e.preventDefault();
+            e.stopPropagation();
+        });
+
+        // Hacky way of protecting the behaviour of links via preventDefault
+        // and stopPropagation
+        $(".narrow_description > a").on("click", function (e) {
+            window.location.href = e.target.href;
+            e.preventDefault();
+            e.stopPropagation();
+        });
+
+        const color = $(".search_closed").css("color");
+        const night_mode_color = $(".nightmode .closed_icon").css("color");
+
+        // make sure that hover plays nicely with whether search is being
+        // opened or not.
+        $(".narrow_description > a").hover(function () {
+            if (night_mode_color) {
+                $(".search_closed").css("color", night_mode_color);
+            } else {
+                $(".search_closed").css("color", color);
+            }
+        }, function () {
+            $(".search_closed").css("color", "");
+        });
+
         exports.close_search_bar_and_open_narrow_description();
     }
 }

static/styles/night_mode.scss

@@ -232,6 +232,10 @@ on a dark background, and don't change the dark labels dark either. */
         background: hsla(0, 0%, 100%, 0.5);
     }
 
+    #tab_bar #tab_list span:nth-last-child(2):hover + .search_closed {
+        color: hsl(0, 0%, 100%);
+    }
+
     #searchbox_legacy {
         #tab_bar #tab_list .sub_count,
         #tab_bar #tab_list .narrow_description {

static/styles/zulip.scss

@@ -1439,6 +1439,17 @@ div.focused_table {
             &:nth-last-child(2) {
                 flex-grow: 1;
             }
+
+            // We extend the clickable area for the search_closed icon over the
+            // 2nd last navbar element for better design (user convenience) this
+            // selector makes it so mousing over that element also gives the user
+            // a visual cue about the results of clicking the element
+            &:nth-last-child(2) {
+                cursor: pointer;
+                &:hover + .search_closed {
+                    color: hsl(0, 0%, 0%);
+                }
+            }
             i {
                 margin-right: 3px;
             }
@@ -1529,18 +1540,21 @@ div.focused_table {
                 padding: 7px 0;
                 padding-left: 2px;
             }
+
+            & > a {
+                padding: 12px 0px;
+            }
         }
 
         .search_closed {
             flex: 0; // makes sure search icon is always visible
-            margin-right: 15px;
 
             cursor: pointer;
             font-size: 20px;
 
-            padding: 10px 0px 0px 0px;
+            padding: 10px 15px 0px 0px;
             @media (max-width: 500px) {
-                padding: 5px 0px 0px 0px;
+                padding: 5px 15px 0px 0px;
             }
         }
     }