navbar_menu: Refactor `change_active_navbar_menu` to use target menu.

This commit introduces `navbar-item` class for each navbar menus and
`active-navbar-menu` class to indicate active navbar menu. Also
introduces new function `get_target_navbar_menu` to return target
navbar menu from keyboard event. `change_active_navbar_menu` uses target
menu to switch between navbar items.

web/src/gear_menu.js

@@ -89,6 +89,7 @@ function render(instance) {
         popover_menus_data.get_gear_menu_content_context(),
     );
     instance.setContent(parse_html(rendered_gear_menu));
+    $("#gear-menu").addClass("active-navbar-menu");
 }
 
 export function initialize() {
@@ -165,6 +166,7 @@ export function initialize() {
         },
         onShow: render,
         onHidden(instance) {
+            $("#gear-menu").removeClass("active-navbar-menu");
             instance.destroy();
             popover_menus.popover_instances.gear_menu = undefined;
         },

web/src/navbar_help_menu.ts

@@ -36,10 +36,12 @@ export function initialize(): void {
                     }),
                 ),
             );
+            $("#help-menu").addClass("active-navbar-menu");
         },
         onHidden(instance) {
             instance.destroy();
             popover_menus.popover_instances.help_menu = null;
+            $("#help-menu").removeClass("active-navbar-menu");
         },
     });
 }

web/src/navbar_menus.js

@@ -1,3 +1,5 @@
+import $ from "jquery";
+
 import * as gear_menu from "./gear_menu.js";
 import * as navbar_help_menu from "./navbar_help_menu.ts";
 import {page_params} from "./page_params.ts";
@@ -17,15 +19,26 @@ export function handle_keyboard_events(event_name) {
     if (!allowed_events.has(event_name)) {
         return false;
     }
-    return change_active_navbar_menu(event_name);
+
+    if (event_name === "gear_menu") {
+        gear_menu.toggle();
+        return true;
+    }
+    const $current_navbar_menu = $(".navbar-item:visible").filter(".active-navbar-menu");
+    const target_menu = get_target_navbar_menu(event_name, $current_navbar_menu);
+
+    if (!target_menu) {
+        return false;
+    }
+    return change_active_navbar_menu(target_menu);
 }
 
-function change_active_navbar_menu(event_name) {
+function change_active_navbar_menu(target_menu) {
     // We don't need to process arrow keys in navbar menus for spectators
     // since they only have gear menu present.
     if (
         popover_menus.is_personal_menu_popover_displayed() &&
-        (event_name === "left_arrow" || event_name === "gear_menu") &&
+        target_menu === "gear-menu" &&
         !page_params.is_spectator
     ) {
         // Open gear menu popover on left arrow.
@@ -34,10 +47,7 @@ function change_active_navbar_menu(event_name) {
         return true;
     }
 
-    if (
+    if (popover_menus.is_help_menu_popover_displayed() && target_menu === "gear-menu") {
-        popover_menus.is_help_menu_popover_displayed() &&
-        (event_name === "right_arrow" || event_name === "gear_menu")
-    ) {
         // Open gear menu popover on right arrow.
         navbar_help_menu.toggle();
         gear_menu.toggle();
@@ -45,15 +55,15 @@ function change_active_navbar_menu(event_name) {
     }
 
     if (popover_menus.is_gear_menu_popover_displayed()) {
-        if (event_name === "gear_menu") {
+        if (target_menu === "gear-menu") {
             gear_menu.toggle();
             return true;
-        } else if (event_name === "right_arrow" && !page_params.is_spectator) {
+        } else if (target_menu === "personal-menu" && !page_params.is_spectator) {
             // Open personal menu popover on g + right arrow.
             gear_menu.toggle();
             personal_menu_popover.toggle();
             return true;
-        } else if (event_name === "left_arrow") {
+        } else if (target_menu === "help-menu") {
             // Open help menu popover on g + left arrow.
             gear_menu.toggle();
             navbar_help_menu.toggle();
@@ -63,3 +73,24 @@ function change_active_navbar_menu(event_name) {
 
     return false;
 }
+
+function get_target_navbar_menu(event_name, $current_navbar_menu) {
+    const $visible_navbar_menus = $(".navbar-item:visible");
+    const index = $visible_navbar_menus.index($current_navbar_menu);
+    let $target_navbar_menu;
+
+    if (event_name === "left_arrow" && index === 0) {
+        return undefined;
+    } else if (event_name === "right_arrow" && index === $visible_navbar_menus.length - 1) {
+        return undefined;
+    }
+
+    if (event_name === "left_arrow") {
+        $target_navbar_menu = $visible_navbar_menus.eq(index - 1);
+        return $target_navbar_menu.attr("id");
+    } else if (event_name === "right_arrow") {
+        $target_navbar_menu = $visible_navbar_menus.eq(index + 1);
+        return $target_navbar_menu.attr("id");
+    }
+    return undefined;
+}

web/src/personal_menu_popover.ts

@@ -110,10 +110,12 @@ export function initialize(): void {
         onShow(instance) {
             const args = popover_menus_data.get_personal_menu_content_context();
             instance.setContent(parse_html(render_navbar_personal_menu_popover(args)));
+            $("#personal-menu").addClass("active-navbar-menu");
         },
         onHidden(instance) {
             instance.destroy();
             popover_menus.popover_instances.personal_menu = null;
+            $("#personal-menu").removeClass("active-navbar-menu");
         },
     });
 }

web/templates/navbar.hbs

@@ -46,17 +46,17 @@
                     <i class="zulip-icon zulip-icon-user-list"></i>
                 </a>
             </div>
-            <div id="help-menu">
+            <div id="help-menu" class="navbar-item">
                 <a class="header-button tippy-zulip-delayed-tooltip" tabindex="0" role="button" data-tooltip-template-id="help-menu-tooltip-template">
                     <i class="zulip-icon zulip-icon-help-bigger" aria-hidden="true"></i>
                 </a>
             </div>
-            <div id="gear-menu" class="{{#if embedded}}hide-navbar-buttons-visibility{{/if}}">
+            <div id="gear-menu" class="{{#if embedded}}hide-navbar-buttons-visibility{{/if}} navbar-item">
                 <a id="settings-dropdown" tabindex="0" role="button" class="header-button tippy-zulip-delayed-tooltip" data-tooltip-template-id="gear-menu-tooltip-template">
                     <i class="zulip-icon zulip-icon-gear" aria-hidden="true"></i>
                 </a>
             </div>
-            <div id="personal-menu" class="hidden-for-spectators">
+            <div id="personal-menu" class="hidden-for-spectators navbar-item">
                 <a class="header-button tippy-zulip-delayed-tooltip" tabindex="0" role="button" data-tooltip-template-id="personal-menu-tooltip-template">
                     <img class="header-button-avatar" src="{{user_avatar}}"/>
                 </a>