From b9fc5da350b0c5f37f211b5325ddc769dd3f30e9 Mon Sep 17 00:00:00 2001
From: Tim Abbott <tabbott@zulip.com>
Date: Wed, 8 Feb 2023 12:40:48 -0800
Subject: [PATCH] tooltips: Fix hotkey-hint CSS class reuse.

The "hotkey-hint" class name used internally in
d66f2d900f62bf619b5c94ce17e4471c80550524 conflicted with the
preexisting class name for hotkey hints into popovers, introduced in
80ff3d8da50d57e27e70520d75ed952da338afd6.

Given that the new class is for a styling of hotkey hints designed for
use in tooltips, it was a bad name anyway, so just rename it to
tooltip-hotkey-hint. We rename the related cluster of variable names
to match this.
---
 frontend_tests/node_tests/templates.js             |  6 +++---
 .../node_tests/templates/hotkey_hints.hbs          |  1 -
 .../node_tests/templates/tooltip_hotkey_hints.hbs  |  1 +
 static/js/templates.js                             |  6 +++---
 static/styles/tooltips.css                         |  4 ++--
 static/templates/compose.hbs                       |  6 +++---
 static/templates/compose_control_buttons.hbs       |  2 +-
 static/templates/left_sidebar.hbs                  |  2 +-
 static/templates/message_controls.hbs              | 14 +++++++-------
 .../narrow_to_compose_recipients_tooltip.hbs       |  2 +-
 static/templates/recipient_row.hbs                 |  4 ++--
 static/templates/right_sidebar.hbs                 |  4 ++--
 webpack.config.ts                                  |  2 +-
 13 files changed, 27 insertions(+), 27 deletions(-)
 delete mode 100644 frontend_tests/node_tests/templates/hotkey_hints.hbs
 create mode 100644 frontend_tests/node_tests/templates/tooltip_hotkey_hints.hbs

diff --git a/frontend_tests/node_tests/templates.js b/frontend_tests/node_tests/templates.js
index 029f45fe23..bcf015a936 100644
--- a/frontend_tests/node_tests/templates.js
+++ b/frontend_tests/node_tests/templates.js
@@ -43,13 +43,13 @@ run_test("numberFormat", () => {
     assert.equal(html, "1,000,000\n");
 });
 
-run_test("hotkey_hints", () => {
+run_test("tooltip_hotkey_hints", () => {
     const args = {
         hotkey_one: "Ctrl",
         hotkey_two: "C",
     };
 
-    const html = require("./templates/hotkey_hints.hbs")(args);
-    const expected_html = `<span class="hotkey-hints"><span class="hotkey-hint">${args.hotkey_one}</span><span class="hotkey-hint">${args.hotkey_two}</span></span>\n`;
+    const html = require("./templates/tooltip_hotkey_hints.hbs")(args);
+    const expected_html = `<span class="tooltip-hotkey-hints"><span class="tooltip-hotkey-hint">${args.hotkey_one}</span><span class="tooltip-hotkey-hint">${args.hotkey_two}</span></span>\n`;
     assert.equal(html, expected_html);
 });
diff --git a/frontend_tests/node_tests/templates/hotkey_hints.hbs b/frontend_tests/node_tests/templates/hotkey_hints.hbs
deleted file mode 100644
index a105961226..0000000000
--- a/frontend_tests/node_tests/templates/hotkey_hints.hbs
+++ /dev/null
@@ -1 +0,0 @@
-{{hotkey_hints hotkey_one hotkey_two}}
diff --git a/frontend_tests/node_tests/templates/tooltip_hotkey_hints.hbs b/frontend_tests/node_tests/templates/tooltip_hotkey_hints.hbs
new file mode 100644
index 0000000000..2842582e58
--- /dev/null
+++ b/frontend_tests/node_tests/templates/tooltip_hotkey_hints.hbs
@@ -0,0 +1 @@
+{{tooltip_hotkey_hints hotkey_one hotkey_two}}
diff --git a/static/js/templates.js b/static/js/templates.js
index c59a62997a..11fd72100c 100644
--- a/static/js/templates.js
+++ b/static/js/templates.js
@@ -106,13 +106,13 @@ Handlebars.registerHelper(
 
 Handlebars.registerHelper("numberFormat", (number) => number.toLocaleString());
 
-Handlebars.registerHelper("hotkey_hints", (...hotkeys) => {
+Handlebars.registerHelper("tooltip_hotkey_hints", (...hotkeys) => {
     hotkeys.pop(); // Handlebars options
     let hotkey_hints = "";
     common.adjust_mac_tooltip_keys(hotkeys);
     for (const hotkey of hotkeys) {
-        hotkey_hints += `<span class="hotkey-hint">${hotkey}</span>`;
+        hotkey_hints += `<span class="tooltip-hotkey-hint">${hotkey}</span>`;
     }
-    const result = `<span class="hotkey-hints">${hotkey_hints}</span>`;
+    const result = `<span class="tooltip-hotkey-hints">${hotkey_hints}</span>`;
     return new Handlebars.SafeString(result);
 });
diff --git a/static/styles/tooltips.css b/static/styles/tooltips.css
index 821cb5cdbf..5a10a8d5d3 100644
--- a/static/styles/tooltips.css
+++ b/static/styles/tooltips.css
@@ -66,7 +66,7 @@
      */
     text-align: left;
 
-    .hotkey-hints {
+    .tooltip-hotkey-hints {
         box-sizing: inherit;
         display: flex;
         align-self: flex-start;
@@ -74,7 +74,7 @@
         gap: 4px;
     }
 
-    .hotkey-hint {
+    .tooltip-hotkey-hint {
         box-sizing: inherit;
         border: 1px solid hsla(225, 100%, 84%, 1);
         border-radius: 3px;
diff --git a/static/templates/compose.hbs b/static/templates/compose.hbs
index ebf0f7edf5..c680d1b9aa 100644
--- a/static/templates/compose.hbs
+++ b/static/templates/compose.hbs
@@ -11,7 +11,7 @@
         </div>
         <template id="scroll-to-bottom-button-tooltip-template">
             {{t 'Scroll to bottom' }}
-            {{hotkey_hints "End"}}
+            {{tooltip_hotkey_hints "End"}}
         </template>
     </div>
     <div id="compose_controls" class="new-style">
@@ -61,11 +61,11 @@
                             <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_template">
                                 {{t 'Cancel compose' }}
-                                {{hotkey_hints "Esc"}}
+                                {{tooltip_hotkey_hints "Esc"}}
                             </template>
                             <template id="compose_close_and_save_tooltip_template">
                                 {{t 'Cancel compose and save draft' }}
-                                {{hotkey_hints "Esc"}}
+                                {{tooltip_hotkey_hints "Esc"}}
                             </template>
                         </div>
                         <div id="stream-message" class="order-1">
diff --git a/static/templates/compose_control_buttons.hbs b/static/templates/compose_control_buttons.hbs
index bdc5111c81..f3829ee1db 100644
--- a/static/templates/compose_control_buttons.hbs
+++ b/static/templates/compose_control_buttons.hbs
@@ -18,7 +18,7 @@
     </a>
     <template id="compose_draft_tooltip_template">
         {{t 'Drafts' }}
-        {{hotkey_hints "D"}}
+        {{tooltip_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>
diff --git a/static/templates/left_sidebar.hbs b/static/templates/left_sidebar.hbs
index 1ad70e8c8d..a9f450bf89 100644
--- a/static/templates/left_sidebar.hbs
+++ b/static/templates/left_sidebar.hbs
@@ -94,7 +94,7 @@
                 </div>
                 <template id="filter-streams-tooltip-template">
                     {{t 'Filter streams' }}
-                    {{hotkey_hints "Q"}}
+                    {{tooltip_hotkey_hints "Q"}}
                 </template>
             </div>
             <div id="topics_header">
diff --git a/static/templates/message_controls.hbs b/static/templates/message_controls.hbs
index 0b85125b9f..211c53adc7 100644
--- a/static/templates/message_controls.hbs
+++ b/static/templates/message_controls.hbs
@@ -3,15 +3,15 @@
     <div class="edit_content message_control_button" data-tooltip-template-id="view-source-tooltip-template"></div>
     <template id="edit-content-tooltip-template">
         {{#tr}}Edit message{{/tr}}
-        {{hotkey_hints "E"}}
+        {{tooltip_hotkey_hints "E"}}
     </template>
     <template id="move-message-tooltip-template">
         {{#tr}}Move message{{/tr}}
-        {{hotkey_hints "M"}}
+        {{tooltip_hotkey_hints "M"}}
     </template>
     <template id="view-source-tooltip-template">
         {{#tr}}View message source{{/tr}}
-        {{hotkey_hints "E"}}
+        {{tooltip_hotkey_hints "E"}}
     </template>
     {{/if}}
 
@@ -21,7 +21,7 @@
     </div>
     <template id="add-emoji-tooltip-template">
         {{#tr}}Add emoji reaction{{/tr}}
-        {{hotkey_hints ":"}}
+        {{tooltip_hotkey_hints ":"}}
     </template>
     {{/unless}}
 
@@ -31,7 +31,7 @@
     </div>
     <template id="message-actions-tooltip-template">
         {{#tr}}Message actions{{/tr}}
-        {{hotkey_hints "I"}}
+        {{tooltip_hotkey_hints "I"}}
     </template>
     {{/unless}}
 
@@ -51,11 +51,11 @@
     </div>
     <template id="star-message-tooltip-template">
         <span class="starred-status">{{#tr}}Star this message{{/tr}}</span>
-        {{hotkey_hints "Ctrl" "S"}}
+        {{tooltip_hotkey_hints "Ctrl" "S"}}
     </template>
     <template id="unstar-message-tooltip-template">
         <span class="starred-status">{{#tr}}Unstar this message{{/tr}}</span>
-        {{hotkey_hints "Ctrl" "S"}}
+        {{tooltip_hotkey_hints "Ctrl" "S"}}
     </template>
     {{/unless}}
 
diff --git a/static/templates/narrow_to_compose_recipients_tooltip.hbs b/static/templates/narrow_to_compose_recipients_tooltip.hbs
index f48d90ea8c..94685a6f67 100644
--- a/static/templates/narrow_to_compose_recipients_tooltip.hbs
+++ b/static/templates/narrow_to_compose_recipients_tooltip.hbs
@@ -4,4 +4,4 @@
     <p class="narrow_to_compose_recipient_current_view_help tooltip-inner-content italic">{{display_current_view}}</p>
     {{/if}}
 </div>
-{{hotkey_hints "Ctrl" "."}}
+{{tooltip_hotkey_hints "Ctrl" "."}}
diff --git a/static/templates/recipient_row.hbs b/static/templates/recipient_row.hbs
index c433be41c5..79f0ae49ac 100644
--- a/static/templates/recipient_row.hbs
+++ b/static/templates/recipient_row.hbs
@@ -67,13 +67,13 @@
                     <i class="zulip-icon zulip-icon-mute on_hover_topic_unmute recipient_bar_icon" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" data-tooltip-template-id="topic-unmute-tooltip-template" role="button" tabindex="0" aria-label="{{t 'Unmute topic' }}"></i>
                     <template id="topic-unmute-tooltip-template">
                         {{#tr}}Unmute topic{{/tr}}
-                        {{hotkey_hints "M"}}
+                        {{tooltip_hotkey_hints "M"}}
                     </template>
                 {{else}}
                     <i class="zulip-icon zulip-icon-mute on_hover_topic_mute recipient_bar_icon hidden-for-spectators" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" data-tooltip-template-id="topic-mute-tooltip-template" role="button" tabindex="0" aria-label="{{t 'Mute topic' }}"></i>
                     <template id="topic-mute-tooltip-template">
                         {{#tr}}Mute topic{{/tr}}
-                        {{hotkey_hints "M"}}
+                        {{tooltip_hotkey_hints "M"}}
                     </template>
                 {{/if}}
             </span>
diff --git a/static/templates/right_sidebar.hbs b/static/templates/right_sidebar.hbs
index 831fe3621f..6302926b69 100644
--- a/static/templates/right_sidebar.hbs
+++ b/static/templates/right_sidebar.hbs
@@ -13,7 +13,7 @@
             </div>
             <template id="search-people-tooltip-template">
                 {{t 'Search people' }}
-                {{hotkey_hints "W"}}
+                {{tooltip_hotkey_hints "W"}}
             </template>
             <div class="input-append notdisplayed" id="user_search_section">
                 <input class="user-list-filter home-page-input" type="text" autocomplete="off" placeholder="{{t 'Search people' }}" />
@@ -34,7 +34,7 @@
                 <i class="fa fa-keyboard-o fa-2x tippy-zulip-tooltip" id="keyboard-icon" data-tooltip-template-id="keyboard-icon-tooltip-template"></i>
                 <template id="keyboard-icon-tooltip-template">
                     {{t 'Keyboard shortcuts' }}
-                    {{hotkey_hints "?"}}
+                    {{tooltip_hotkey_hints "?"}}
                 </template>
             </a>
             <div class="only-visible-for-spectators">
diff --git a/webpack.config.ts b/webpack.config.ts
index 005f0e4ac0..2df8a264d5 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -143,7 +143,7 @@ export default (env: {minimize?: boolean} = {}, argv: {mode?: string}): webpack.
                             "t",
                             "tr",
                             "rendered_markdown",
-                            "hotkey_hints",
+                            "tooltip_hotkey_hints",
                         ],
                         preventIndent: true,
                     },