help_menu: Extract help items from gear menu into a separate popover.

Fixes #27202

help/keyboard-shortcuts.md

@@ -203,6 +203,8 @@ Keyboard navigation (e.g. arrow keys) works as expected.
 
 * **Open personal menu**: <kbd>G</kbd> + <kbd class="arrow-key">→</kbd>
 
+* **Open help menu**: <kbd>G</kbd> + <kbd class="arrow-key">←</kbd>
+
 ### For a selected message (outlined in blue)
 
 * **Toggle emoji reactions menu**: <kbd>:</kbd>

tools/test-js-with-node

@@ -152,6 +152,7 @@ EXEMPT_FILES = make_set(
         "web/src/narrow_history.js",
         "web/src/narrow_title.js",
         "web/src/navbar_alerts.js",
+        "web/src/navbar_help_menu.js",
         "web/src/navbar_menus.js",
         "web/src/navigate.js",
         "web/src/overlay_util.ts",

web/src/navbar_help_menu.js

@@ -0,0 +1,52 @@
+import $ from "jquery";
+
+import render_navbar_help_menu from "../templates/navbar_help_menu.hbs";
+
+import {page_params} from "./page_params";
+import * as popover_menus from "./popover_menus";
+import {parse_html} from "./ui_util";
+
+export function initialize() {
+    popover_menus.register_popover_menu("#help-menu", {
+        theme: "navbar-dropdown-menu",
+        placement: "bottom",
+        offset: [-50, 0],
+        // The strategy: "fixed"; and eventlisteners modifier option
+        // ensure that the personal menu does not modify its position
+        // or disappear when user zooms the page.
+        popperOptions: {
+            strategy: "fixed",
+            modifiers: [
+                {
+                    name: "eventListeners",
+                    options: {
+                        scroll: false,
+                    },
+                },
+            ],
+        },
+        onMount(instance) {
+            popover_menus.popover_instances.help_menu = instance;
+        },
+        onShow(instance) {
+            instance.setContent(
+                parse_html(
+                    render_navbar_help_menu({
+                        corporate_enabled: page_params.corporate_enabled,
+                    }),
+                ),
+            );
+        },
+        onHidden(instance) {
+            instance.destroy();
+            popover_menus.popover_instances.help_menu = undefined;
+        },
+    });
+}
+
+export function toggle() {
+    // NOTE: Since to open help menu, you need to click on help navbar icon (which calls
+    // tippyjs.hideAll()), or go via gear menu if using hotkeys, we don't need to
+    // call tippyjs.hideAll() for it.
+    $("#help-menu").trigger("click");
+}

web/src/navbar_menus.js

@@ -1,4 +1,5 @@
 import * as gear_menu from "./gear_menu";
+import * as navbar_help_menu from "./navbar_help_menu";
 import {page_params} from "./page_params";
 import * as personal_menu_popover from "./personal_menu_popover";
 import * as popover_menus from "./popover_menus";
@@ -6,7 +7,8 @@ import * as popover_menus from "./popover_menus";
 export function is_navbar_menus_displayed() {
     return (
         popover_menus.is_personal_menu_popover_displayed() ||
-        popover_menus.is_gear_menu_popover_displayed()
+        popover_menus.is_gear_menu_popover_displayed() ||
+        popover_menus.is_help_menu_popover_displayed()
     );
 }
 
@@ -24,6 +26,16 @@ export function handle_keyboard_events(event_name) {
         return true;
     }
 
+    if (
+        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();
+        return true;
+    }
+
     if (popover_menus.is_gear_menu_popover_displayed()) {
         if (event_name === "gear_menu") {
             gear_menu.toggle();
@@ -33,6 +45,11 @@ export function handle_keyboard_events(event_name) {
             gear_menu.toggle();
             personal_menu_popover.toggle();
             return true;
+        } else if (event_name === "left_arrow") {
+            // Open help menu popover on g + left arrow.
+            gear_menu.toggle();
+            navbar_help_menu.toggle();
+            return true;
         }
     }
 

web/src/popover_menus.js

@@ -37,6 +37,7 @@ export const popover_instances = {
     change_visibility_policy: null,
     personal_menu: null,
     gear_menu: null,
+    help_menu: null,
 };
 
 /* Keyboard UI functions */
@@ -111,6 +112,10 @@ export function get_gear_menu_instance() {
     return popover_instances.gear_menu;
 }
 
+export function is_help_menu_popover_displayed() {
+    return popover_instances.help_menu?.state.isVisible;
+}
+
 export function is_message_actions_popover_displayed() {
     return popover_instances.message_actions?.state.isVisible;
 }

web/src/popover_menus_data.js

@@ -202,7 +202,6 @@ export function get_gear_menu_content_context() {
         apps_page_url: page_params.apps_page_url,
         can_create_multiuse_invite: settings_data.user_can_create_multiuse_invite(),
         can_invite_users_by_email: settings_data.user_can_invite_users_by_email(),
-        corporate_enabled: page_params.corporate_enabled,
         is_guest: page_params.is_guest,
         login_link: page_params.development_environment ? "/devlogin/" : "/login/",
         promote_sponsoring_zulip: page_params.promote_sponsoring_zulip,

web/src/ui_init.js

@@ -75,6 +75,7 @@ import * as narrow_history from "./narrow_history";
 import * as narrow_state from "./narrow_state";
 import * as narrow_title from "./narrow_title";
 import * as navbar_alerts from "./navbar_alerts";
+import * as navbar_help_menu from "./navbar_help_menu";
 import * as navigate from "./navigate";
 import * as overlays from "./overlays";
 import {page_params} from "./page_params";
@@ -696,6 +697,7 @@ export function initialize_everything() {
     });
     unread_ops.initialize();
     gear_menu.initialize();
+    navbar_help_menu.initialize();
     giphy.initialize();
     presence.initialize(presence_params);
     settings_display.initialize();

web/styles/popovers.css

@@ -1310,6 +1310,10 @@ ul {
     }
 }
 
+#help-menu-dropdown {
+    padding-bottom: 5px;
+}
+
 ul.navbar-dropdown-menu-outer-list {
     list-style: none;
     margin: 0;

web/styles/search.css

@@ -185,14 +185,6 @@
         height: var(--search-box-height);
     }
 
-    @media ($md_min <= width < $xl_min) {
-        /* Add some space between the search input and the userlist toggle
-           in this width range so that hover state of userlist-toggle looks good. */
-        .navbar-search:not(.expanded) {
-            right: 2px;
-        }
-    }
-
     @media (width >= $md_min) {
         .navbar-search {
             background: var(--color-background-search);

web/styles/zulip.css

@@ -837,10 +837,11 @@ body.has-overlay-scrollbar {
         display: flex;
         justify-content: space-evenly;
         position: absolute;
-        top: 10px;
+        top: 8px;
-        right: 40px;
+        /* gear menu + help menu width (40px * 2) */
-        /* width of right column - width of gear icon - right margin of column-right (250px - 40px -7px) */
+        right: 80px;
-        width: 203px;
+        /* width of right column - width of gear icon - right margin of column-right (250px - 40px - 40px -7px) */
+        width: 163px;
 
         & a {
             font-size: calc(16em / 14);
@@ -2990,9 +2991,11 @@ select.invite-as {
 
     .spectator-view {
         #navbar-middle {
-            margin-right: 85px;
+            /* = 40px (width of button) * 3 (number of buttons) + 10px extra margin. */
+            margin-right: 130px;
         }
 
+        #help-menu,
         #gear-menu {
             position: relative;
             right: 40px;
@@ -3039,7 +3042,8 @@ select.invite-as {
     }
 
     #navbar-middle {
-        margin-right: 127px;
+        /* = 40px (width of button) * 4 (number of buttons) + 10px extra margin. */
+        margin-right: 170px;
     }
 }
 
@@ -3143,16 +3147,19 @@ select.invite-as {
 
     .spectator-view {
         #navbar-middle {
-            margin-right: 65px;
+            /* = 30px (width of button) * 3 (number of buttons) + 10px extra margin. */
+            margin-right: 100px;
         }
 
+        #help-menu,
         #gear-menu {
-            right: 35px;
+            right: 30px;
         }
     }
 
     #navbar-middle {
-        margin-right: 97px;
+        /* = 30px (width of button) * 4 (number of buttons) + 10px extra margin. */
+        margin-right: 130px;
     }
 
     .nav .dropdown-menu {
@@ -3412,9 +3419,6 @@ select.invite-as {
     display: flex;
     justify-content: center;
     align-items: center;
-    position: relative;
-    top: 0;
-    right: 0;
 
     &:hover,
     &:focus {
@@ -3442,9 +3446,16 @@ select.invite-as {
         font-size: 18px;
     }
 
+    .zulip-icon-help,
     .zulip-icon-triple-users {
         font-size: 20px;
     }
+
+    .zulip-icon-help {
+        position: relative;
+        top: 0.5px;
+        right: -0.5px;
+    }
 }
 
 #personal-menu {

web/templates/gear_menu_popover.hbs

@@ -85,43 +85,6 @@
                 </li>
             </ul>
         </li>
-        <li class="navbar-dropdown-menu-outer-list-item">
-            <ul class="navbar-dropdown-menu-inner-list">
-                <li class="link-item navbar-dropdown-menu-inner-list-item">
-                    <a href="/help/" target="_blank" rel="noopener noreferrer" class="navigate-link-on-enter navbar-dropdown-menu-link">
-                        <i class="navbar-dropdown-icon zulip-icon zulip-icon-help" aria-hidden="true"></i> {{t 'Help center' }}
-                    </a>
-                </li>
-                <li class="link-item navbar-dropdown-menu-inner-list-item">
-                    <a tabindex="0" class="navigate-link-on-enter navbar-dropdown-menu-link" data-overlay-trigger="keyboard-shortcuts">
-                        <i class="navbar-dropdown-icon zulip-icon zulip-icon-keyboard" aria-hidden="true"></i> {{t 'Keyboard shortcuts' }} <span class="hotkey-hint">(?)</span>
-                    </a>
-                </li>
-                <li class="link-item navbar-dropdown-menu-inner-list-item hidden-for-spectators">
-                    <a tabindex="0" class="navigate-link-on-enter navbar-dropdown-menu-link" data-overlay-trigger="message-formatting">
-                        <i class="navbar-dropdown-icon zulip-icon zulip-icon-edit" aria-hidden="true"></i> {{t 'Message formatting' }}
-                    </a>
-                </li>
-                <li class="link-item navbar-dropdown-menu-inner-list-item">
-                    <a tabindex="0" class="navigate-link-on-enter navbar-dropdown-menu-link" data-overlay-trigger="search-operators">
-                        <i class="navbar-dropdown-icon zulip-icon zulip-icon-manage-search" aria-hidden="true"></i> {{t 'Search filters' }}
-                    </a>
-                </li>
-                <li class="link-item navbar-dropdown-menu-inner-list-item" id="gear_menu_about_zulip">
-                    <a href="#about-zulip" class="navigate-link-on-enter navbar-dropdown-menu-link">
-                        <i class="navbar-dropdown-icon zulip-icon zulip-icon-info"></i>
-                        {{t "About Zulip" }}
-                    </a>
-                </li>
-                {{#if corporate_enabled}}
-                <li class="link-item navbar-dropdown-menu-inner-list-item">
-                    <a href="/help/contact-support" target="_blank" rel="noopener noreferrer" class="navigate-link-on-enter navbar-dropdown-menu-link">
-                        <i class="navbar-dropdown-icon zulip-icon zulip-icon-life-buoy" aria-hidden="true"></i> {{t 'Contact support' }}
-                    </a>
-                </li>
-                {{/if}}
-            </ul>
-        </li>
         <li class="hidden-for-spectators navbar-dropdown-menu-outer-list-item">
             <ul class="navbar-dropdown-menu-inner-list">
                 <li class="link-item navbar-dropdown-menu-inner-list-item">

web/templates/keyboard_shortcuts.hbs

@@ -317,6 +317,10 @@
                     <td class="definition">{{t 'Open personal menu' }}</td>
                     <td><span class="hotkey"><kbd>G</kbd><kbd class="arrow-key">→</kbd></span></td>
                 </tr>
+                <tr>
+                    <td class="definition">{{t 'Open help menu' }}</td>
+                    <td><span class="hotkey"><kbd>G</kbd><kbd class="arrow-key">←</kbd></span></td>
+                </tr>
                 <tr>
                     <td class="definition">{{t 'Open message menu' }}</td>
                     <td><span class="hotkey"><kbd>I</kbd></span></td>

web/templates/navbar.hbs

@@ -51,6 +51,12 @@
                     <span id="userlist-toggle-unreadcount">0</span>
                 </a>
             </div>
+            <div id="help-menu">
+                <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" aria-hidden="true"></i>
+                </a>
+                <span tabindex="0" class="focus-dropdown"></span>
+            </div>
             <div id="gear-menu" class="{{#if embedded}}hide-navbar-buttons-visibility{{/if}}">
                 <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>

web/templates/navbar_help_menu.hbs

@@ -0,0 +1,41 @@
+<div class="navbar-dropdown-menu" id="help-menu-dropdown" aria-labelledby="help-menu" data-simplebar>
+    <ul class="navbar-dropdown-menu-outer-list">
+        <li class="navbar-dropdown-menu-outer-list-item">
+            <ul class="navbar-dropdown-menu-inner-list">
+                <li class="link-item navbar-dropdown-menu-inner-list-item">
+                    <a href="/help/" target="_blank" rel="noopener noreferrer" class="navigate-link-on-enter navbar-dropdown-menu-link">
+                        <i class="navbar-dropdown-icon zulip-icon zulip-icon-help" aria-hidden="true"></i> {{t 'Help center' }}
+                    </a>
+                </li>
+                <li class="link-item navbar-dropdown-menu-inner-list-item">
+                    <a tabindex="0" class="navigate-link-on-enter navbar-dropdown-menu-link" data-overlay-trigger="keyboard-shortcuts">
+                        <i class="navbar-dropdown-icon zulip-icon zulip-icon-keyboard" aria-hidden="true"></i> {{t 'Keyboard shortcuts' }} <span class="hotkey-hint">(?)</span>
+                    </a>
+                </li>
+                <li class="link-item navbar-dropdown-menu-inner-list-item hidden-for-spectators">
+                    <a tabindex="0" class="navigate-link-on-enter navbar-dropdown-menu-link" data-overlay-trigger="message-formatting">
+                        <i class="navbar-dropdown-icon zulip-icon zulip-icon-edit" aria-hidden="true"></i> {{t 'Message formatting' }}
+                    </a>
+                </li>
+                <li class="link-item navbar-dropdown-menu-inner-list-item">
+                    <a tabindex="0" class="navigate-link-on-enter navbar-dropdown-menu-link" data-overlay-trigger="search-operators">
+                        <i class="navbar-dropdown-icon zulip-icon zulip-icon-manage-search" aria-hidden="true"></i> {{t 'Search filters' }}
+                    </a>
+                </li>
+                <li class="link-item navbar-dropdown-menu-inner-list-item" id="gear_menu_about_zulip">
+                    <a href="#about-zulip" class="navigate-link-on-enter navbar-dropdown-menu-link">
+                        <i class="navbar-dropdown-icon zulip-icon zulip-icon-info"></i>
+                        {{t "About Zulip" }}
+                    </a>
+                </li>
+                {{#if corporate_enabled}}
+                <li class="link-item navbar-dropdown-menu-inner-list-item">
+                    <a href="/help/contact-support" target="_blank" rel="noopener noreferrer" class="navigate-link-on-enter navbar-dropdown-menu-link">
+                        <i class="navbar-dropdown-icon zulip-icon zulip-icon-life-buoy" aria-hidden="true"></i> {{t 'Contact support' }}
+                    </a>
+                </li>
+                {{/if}}
+            </ul>
+        </li>
+    </ul>
+</div>

web/templates/tooltip_templates.hbs

@@ -75,6 +75,10 @@
     {{t 'Personal menu' }}
     {{tooltip_hotkey_hints "G" "→"}}
 </template>
+<template id="help-menu-tooltip-template">
+    {{t 'Help menu' }}
+    {{tooltip_hotkey_hints "G" "←"}}
+</template>
 <template id="all-message-tooltip-template">
     {{t 'All messages' }}
     {{tooltip_hotkey_hints "A"}}