tooltips: Add hotkey hints support to compose related buttons.

This commit adds the hotkey hints support to "Cancel compose",
"Cancel compose and save draft", "Scroll to bottom" and "Drafts"
button.

static/js/compose.js

@@ -443,9 +443,12 @@ export function initialize() {
         // Change compose close button tooltip as per condition.
         // We save compose text in draft only if its length is > 2.
         if (compose_text_length > 2) {
-            $("#compose_close").attr("data-tooltip-template-id", "compose_close_and_save_tooltip");
+            $("#compose_close").attr("data-tooltip-template-id", "compose_close_tooltip_template");
         } else {
-            $("#compose_close").attr("data-tooltip-template-id", "compose_close_tooltip");
+            $("#compose_close").attr(
+                "data-tooltip-template-id",
+                "compose_close_and_save_tooltip_template",
+            );
         }
     });
 

static/js/ui_init.js

@@ -224,9 +224,6 @@ function initialize_compose_box() {
             embedded: $("#compose").attr("data-embedded") === "",
             file_upload_enabled: page_params.max_file_upload_size_mib > 0,
             giphy_enabled: giphy.is_giphy_enabled(),
-            scroll_to_bottom_key_html: common.has_mac_keyboard()
-                ? "Fn + <span class='tooltip_right_arrow'>→</span>"
-                : "End",
             max_stream_name_length: page_params.max_stream_name_length,
             max_topic_length: page_params.max_topic_length,
         }),

static/templates/compose.hbs

@@ -4,12 +4,15 @@
     minimal css and no JS. We keep it `position: absolute` to prevent
     it changing compose box layout in any way. --}}
     <div id="scroll-to-bottom-button-container" aria-hidden="true">
-        <div id="scroll-to-bottom-button-clickable-area" data-tooltip-template-id="scroll-to-bottom-button-tooltip">
+        <div id="scroll-to-bottom-button-clickable-area" data-tooltip-template-id="scroll-to-bottom-button-tooltip-template">
             <div id="scroll-to-bottom-button">
                 <i class="fa fa-chevron-down"></i>
             </div>
         </div>
-        <template id="scroll-to-bottom-button-tooltip">{{t 'Scroll to bottom' }} <span class="hotkey-hint">({{{scroll_to_bottom_key_html}}})</span></template>
+        <template id="scroll-to-bottom-button-tooltip-template">
+            {{t 'Scroll to bottom' }}
+            {{hotkey_hints "End"}}
+        </template>
     </div>
     <div id="compose_controls" class="new-style">
         <div id="compose_buttons">
@@ -55,9 +58,15 @@
                         <div id="compose_top_right" class="order-2">
                             <button type="button" class="expand_composebox_button fa fa-chevron-up" aria-label="{{t 'Expand compose' }}" data-tippy-content="{{t 'Expand compose' }}"></button>
                             <button type="button" class="collapse_composebox_button fa fa-chevron-down" aria-label="{{t 'Collapse compose' }}" data-tippy-content="{{t 'Collapse compose' }}"></button>
-                            <button type="button" class="close fa fa-times" id='compose_close' data-tooltip-template-id="compose_close_tooltip"></button>
+                            <button type="button" class="close fa fa-times" id='compose_close' data-tooltip-template-id="compose_close_tooltip_template"></button>
-                            <template id="compose_close_tooltip">{{t 'Cancel compose' }} <span class="hotkey-hint">(Esc)</span></template>
+                            <template id="compose_close_tooltip_template">
-                            <template id="compose_close_and_save_tooltip">{{t 'Cancel compose and save draft' }} <span class="hotkey-hint">(Esc)</span></template>
+                                {{t 'Cancel compose' }}
+                                {{hotkey_hints "Esc"}}
+                            </template>
+                            <template id="compose_close_and_save_tooltip_template">
+                                {{t 'Cancel compose and save draft' }}
+                                {{hotkey_hints "Esc"}}
+                            </template>
                         </div>
                         <div id="stream-message" class="order-1">
                             <div class="stream-selection-header-colorblock message_header_stream left_part" tab-index="-1"></div>

static/templates/compose_control_buttons.hbs

@@ -13,10 +13,13 @@
     <div class="{{#if message_id}}hide-lg{{else}}hide-sm{{/if}}">
         {{> compose_control_buttons_in_popover}}
     </div>
-    <a role="button" class="compose_control_button compose_draft_button hide-sm" tabindex=0 href="#drafts" data-tooltip-template-id="compose_draft_tooltip">
+    <a role="button" class="compose_control_button compose_draft_button hide-sm" tabindex=0 href="#drafts" data-tooltip-template-id="compose_draft_tooltip_template">
         {{t 'Drafts' }}
     </a>
-    <template id="compose_draft_tooltip">{{t 'Drafts' }} <span class="hotkey-hint">(d)</span></template>
+    <template id="compose_draft_tooltip_template">
+        {{t 'Drafts' }}
+        {{hotkey_hints "D"}}
+    </template>
     <div class="compose_control_menu_wrapper" role="button" tabindex=0>
         <a class="compose_control_button zulip-icon zulip-icon-ellipsis-v-solid hide {{#if message_id}}show-lg{{else}}show-sm{{/if}} compose_control_menu" tabindex="-1" data-tippy-content="Compose actions"></a>
     </div>