condense: Dynamically render content for message length toggle.

This moves the content inside `message_length_controller` to a new
handlerbars template `message_length_toggle.hbs`, and dynamically
renders the content based on the message length.

Since the majority of the messages aren't collapsed/condensed, this
change should improve the initial rendering of the message list.

Fixes #31133.

web/src/condense.ts

@@ -1,6 +1,8 @@
 import $ from "jquery";
 import assert from "minimalistic-assert";
 
+import render_message_length_toggle from "../templates/message_length_toggle.hbs";
+
 import * as message_flags from "./message_flags";
 import * as message_lists from "./message_lists";
 import type {Message} from "./message_store";
@@ -20,26 +22,32 @@ This library implements two related, similar concepts:
 
 */
 
-function show_more_link($row: JQuery): void {
+export function show_message_expander($row: JQuery): void {
-    $row.find(".message_condenser").hide();
+    $row.find(".message_length_controller").html(
-    $row.find(".message_expander").show();
+        render_message_length_toggle({toggle_type: "expander"}),
+    );
 }
 
-function show_condense_link($row: JQuery): void {
+export function show_message_condenser($row: JQuery): void {
-    $row.find(".message_expander").hide();
+    $row.find(".message_length_controller").html(
-    $row.find(".message_condenser").show();
+        render_message_length_toggle({toggle_type: "condenser"}),
+    );
+}
+
+export function hide_message_length_toggle($row: JQuery): void {
+    $row.find(".message_length_controller").empty();
 }
 
 function condense_row($row: JQuery): void {
     const $content = $row.find(".message_content");
     $content.addClass("condensed");
-    show_more_link($row);
+    show_message_expander($row);
 }
 
 function uncondense_row($row: JQuery): void {
     const $content = $row.find(".message_content");
     $content.removeClass("condensed");
-    show_condense_link($row);
+    show_message_condenser($row);
 }
 
 export function uncollapse(message: Message): void {
@@ -65,7 +73,7 @@ export function uncollapse(message: Message): void {
             condense_row($row);
         } else {
             // This was a short message, no more need for a [More] link.
-            $row.find(".message_expander").hide();
+            hide_message_length_toggle($row);
         }
     };
 
@@ -92,7 +100,7 @@ export function collapse(message: Message): void {
 
     const process_row = function process_row($row: JQuery): void {
         $row.find(".message_content").addClass("collapsed");
-        show_more_link($row);
+        show_message_expander($row);
     };
 
     for (const list of message_lists.all_rendered_message_lists()) {
@@ -133,15 +141,13 @@ export function toggle_collapse(message: Message): void {
             message.condensed = true;
             $content.addClass("condensed");
             show_message_expander($row);
-            $row.find(".message_condenser").hide();
         }
         uncollapse(message);
     } else {
         if (is_condensed) {
             message.condensed = false;
             $content.removeClass("condensed");
-            hide_message_expander($row);
+            show_message_condenser($row);
-            $row.find(".message_condenser").show();
         } else {
             collapse(message);
         }
@@ -155,30 +161,6 @@ function get_message_height(elem: HTMLElement): number {
     return util.the($(elem).find(".message_content")).scrollHeight;
 }
 
-export function hide_message_expander($row: JQuery): void {
-    if ($row.find(".could-be-condensed").length !== 0) {
-        $row.find(".message_expander").hide();
-    }
-}
-
-export function hide_message_condenser($row: JQuery): void {
-    if ($row.find(".could-be-condensed").length !== 0) {
-        $row.find(".message_condenser").hide();
-    }
-}
-
-export function show_message_expander($row: JQuery): void {
-    if ($row.find(".could-be-condensed").length !== 0) {
-        $row.find(".message_expander").show();
-    }
-}
-
-export function show_message_condenser($row: JQuery): void {
-    if ($row.find(".could-be-condensed").length !== 0) {
-        $row.find(".message_condenser").show();
-    }
-}
-
 export function condense_and_collapse(elems: JQuery): void {
     if (message_lists.current === undefined) {
         return;
@@ -247,14 +229,14 @@ export function condense_and_collapse(elems: JQuery): void {
             condense_row($(elem));
         } else {
             $content.removeClass("condensed");
-            $(elem).find(".message_expander").hide();
+            hide_message_length_toggle($(elem));
         }
 
         // Completely hide the message and replace it with a "Show more"
         // button if the user has collapsed it.
         if (message.collapsed) {
             $content.addClass("collapsed");
-            $(elem).find(".message_expander").show();
+            show_message_expander($(elem));
         }
     }
 }
@@ -277,9 +259,7 @@ export function initialize(): void {
         } else if ($content.hasClass("condensed")) {
             // Uncondense (show the full long message).
             message.condensed = false;
-            $content.removeClass("condensed");
+            uncondense_row($row);
-            $(this).hide();
-            $row.find(".message_condenser").show();
         }
         e.stopPropagation();
         e.preventDefault();

web/src/message_edit.ts

@@ -469,8 +469,7 @@ function edit_message($row: JQuery, raw_content: string): void {
     const message = message_lists.current.get(rows.id($row));
     assert(message !== undefined);
     $row.find(".message_reactions").hide();
-    condense.hide_message_expander($row);
+    condense.hide_message_length_toggle($row);
-    condense.hide_message_condenser($row);
 
     // We potentially got to this function by clicking a button that implied the
     // user would be able to edit their message.  Give a little bit of buffer in
@@ -854,11 +853,13 @@ export function end_message_row_edit($row: JQuery): void {
         message_lists.current.hide_edit_message($row);
         compose_call.abort_video_callbacks(message.id.toString());
     }
+    if ($row.find(".could-be-condensed").length !== 0) {
         if ($row.find(".condensed").length !== 0) {
             condense.show_message_expander($row);
         } else {
             condense.show_message_condenser($row);
         }
+    }
     $row.find(".message_reactions").show();
 
     // We have to blur out text fields, or else hotkeys.js

web/styles/zulip.css

@@ -987,7 +987,6 @@ div.focused-message-list {
 
 .message_length_controller {
     .message_length_toggle {
-        display: none;
         width: 100%;
         height: 24px;
         margin-bottom: var(--message-box-markdown-aligned-vertical-space);

web/templates/message_body.hbs

@@ -59,10 +59,7 @@
 {{> edited_notice}}
 {{/if}}
 
-<div class="message_length_controller">
+<div class="message_length_controller"></div>
-    <button type="button" class="message_expander message_length_toggle tippy-zulip-delayed-tooltip" data-tooltip-template-id="message-expander-tooltip-template">{{t "Show more" }}</button>
-    <button type="button" class="message_condenser message_length_toggle tippy-zulip-delayed-tooltip" data-tooltip-template-id="message-condenser-tooltip-template">{{t "Show less" }}</button>
-</div>
 
 {{#unless is_hidden}}
 <div class="message_reactions">{{> message_reactions }}</div>

web/templates/message_length_toggle.hbs

@@ -0,0 +1,5 @@
+{{#if (eq toggle_type "expander")}}
+    <button type="button" class="message_expander message_length_toggle tippy-zulip-delayed-tooltip" data-tooltip-template-id="message-expander-tooltip-template">{{t "Show more" }}</button>
+{{else if (eq toggle_type "condenser")}}
+    <button type="button" class="message_condenser message_length_toggle tippy-zulip-delayed-tooltip" data-tooltip-template-id="message-condenser-tooltip-template">{{t "Show less" }}</button>
+{{/if}}