message_list_hover: Optimize code for show edit message icon.

Doing a lot of DOM manipulation on message hover leads to
tooltips being not hidden / displayed when they should be.

This commit is an attempt to optimize that code to do minimal updates.

web/src/message_list_hover.ts

@@ -1,8 +1,6 @@
 import $ from "jquery";
 import assert from "minimalistic-assert";
 
-import render_edit_content_button from "../templates/edit_content_button.hbs";
-
 import * as message_edit from "./message_edit.ts";
 import * as message_lists from "./message_lists.ts";
 import * as rows from "./rows.ts";
@@ -14,11 +12,13 @@ export function message_unhover(): void {
     if ($current_message_hover === undefined) {
         return;
     }
-    $current_message_hover.find(".edit_content").empty();
+    $current_message_hover.removeClass("can-edit-content can-move-message");
     $current_message_hover = undefined;
 }
 
 export function message_hover($message_row: JQuery): void {
+    // This code is performance-sensitive, so we must perform any DOM updates
+    // together. We don't want to trigger reflows multiple times.
     const id = rows.id($message_row);
     assert(message_lists.current !== undefined);
     const message = message_lists.current.get(id);
@@ -26,14 +26,11 @@ export function message_hover($message_row: JQuery): void {
 
     if ($current_message_hover && rows.id($current_message_hover) === id) {
         return;
-    } else if (message.locally_echoed) {
-        return;
     }
 
-    message_unhover();
     $current_message_hover = $message_row;
 
-    if (!message.sent_by_me) {
+    if (!message.sent_by_me || message.locally_echoed) {
         // The actions and reactions icon hover logic is handled entirely by CSS
         return;
     }
@@ -46,12 +43,20 @@ export function message_hover($message_row: JQuery): void {
         can_move_message,
     };
     const $edit_content = $message_row.find(".edit_content");
-    $edit_content.html(render_edit_content_button(args));
+    if (args.is_content_editable && !$edit_content.hasClass("can-edit-content")) {
-
+        $edit_content.addClass("can-edit-content");
-    if (args.is_content_editable) {
+        $edit_content.removeClass("can-move-message");
         $edit_content.attr("data-tooltip-template-id", "edit-content-tooltip-template");
-    } else if (args.can_move_message) {
+    } else if (
+        !args.is_content_editable &&
+        args.can_move_message &&
+        !$edit_content.hasClass("can-move-message")
+    ) {
+        $edit_content.addClass("can-move-message");
+        $edit_content.removeClass("can-edit-content");
         $edit_content.attr("data-tooltip-template-id", "move-message-tooltip-template");
+    } else if (!args.is_content_editable && !args.can_move_message) {
+        $edit_content.removeClass("can-edit-content can-move-message");
     }
 }
 

web/styles/message_row.css

@@ -571,16 +571,28 @@
     }
 
     .edit_content {
-        /* Icons for editing content are determined on message hover;
+        width: var(--message-box-icon-width);
-           we set an empty `.edit_content` to take the eventual width
-           of whatever icon is displayed, so as to avoid a grid shift. */
-        &:empty {
-            width: var(--message-box-icon-width);
-        }
 
         &:hover {
             cursor: pointer;
         }
+
+        .move_message_button,
+        .edit_content_button {
+            display: none;
+        }
+
+        &.can-edit-content {
+            .edit_content_button {
+                display: inline;
+            }
+        }
+
+        &.can-move-message {
+            .move_message_button {
+                display: inline;
+            }
+        }
     }
 
     .failed_message_action {

web/templates/edit_content_button.hbs

@@ -1,5 +0,0 @@
-{{#if is_content_editable}}
-<i class="message-controls-icon zulip-icon zulip-icon-edit edit_content_button edit_message_button" role="button" tabindex="0" aria-label="{{t 'Edit message' }} (e)"></i>
-{{else if can_move_message}}
-<i class="message-controls-icon zulip-icon zulip-icon-move-alt move_message_button edit_message_button" role="button" tabindex="0" aria-label="{{t 'Move message' }} (m)"></i>
-{{/if}}

web/templates/message_controls.hbs

@@ -1,6 +1,9 @@
 {{#unless is_archived}}
     {{#if msg/sent_by_me}}
-        <div class="edit_content message_control_button"></div>
+        <div class="edit_content message_control_button">
+            <i class="message-controls-icon zulip-icon zulip-icon-edit edit_content_button edit_message_button" role="button" tabindex="0" aria-label="{{t 'Edit message' }} (e)"></i>
+            <i class="message-controls-icon zulip-icon zulip-icon-move-alt move_message_button edit_message_button" role="button" tabindex="0" aria-label="{{t 'Move message' }} (m)"></i>
+        </div>
     {{/if}}
 
     {{#unless msg/sent_by_me}}