message_edit_notice: Change edited notice computation logic location.

This commit extracts the edited notice computation logic of
edited_in_left_col, edited_alongside_sender and edited_status_message
to a new function - set_edited_notice_locations and calls it right
after the method merge_message_groups.

This is a preparatory commit, and is done since theses three variables
were previously wrongly initialized in the beginning for live messages
received.

We also introduce a modified flag to decide whether to display the
edited notice or not. This is useful since now we are computing
the edited notice values even when messages are not edited, and
hence we show the notices only when the modified flag is true.

web/src/message_list_view.js

@@ -355,9 +355,6 @@ export class MessageListView {
         //   * `edited_alongside_sender` -- when label appears alongside sender info.
         //   * `edited_status_msg`       -- when label appears for a "/me" message.
         const last_edit_timestr = this._get_msg_timestring(message_container);
-        const include_sender = message_container.include_sender;
-        const is_hidden = message_container.is_hidden;
-        const status_message = Boolean(message_container.status_message);
         const edit_history_details = analyze_edit_history(message_container.msg, last_edit_timestr);
 
         if (
@@ -377,10 +374,8 @@ export class MessageListView {
         }
 
         message_container.last_edit_timestr = last_edit_timestr;
-        message_container.edited_in_left_col = !include_sender && !is_hidden;
-        message_container.edited_alongside_sender = include_sender && !status_message;
-        message_container.edited_status_msg = include_sender && status_message;
         message_container.moved = edit_history_details.moved && !edit_history_details.edited;
+        message_container.modified = true;
     }
 
     set_calculated_message_container_variables(message_container, is_revealed) {
@@ -803,6 +798,18 @@ export class MessageListView {
         );
     }
 
+    set_edited_notice_locations(message_container) {
+        // Based on the variables that define the overall message's HTML layout, set
+        // variables defining where the message-edited notices should be placed.
+        const include_sender = message_container.include_sender;
+        const is_hidden = message_container.is_hidden;
+        const status_message = Boolean(message_container.status_message);
+        message_container.message_edit_notices_in_left_col = !include_sender && !is_hidden;
+        message_container.message_edit_notices_alongside_sender = include_sender && !status_message;
+        message_container.message_edit_notices_for_status_message =
+            include_sender && status_message;
+    }
+
     render(messages, where, messages_are_new) {
         // This function processes messages into chunks with separators between them,
         // and templates them to be inserted as table rows into the DOM.
@@ -866,6 +873,7 @@ export class MessageListView {
         let $last_group_row;
 
         for (const message_container of message_containers) {
+            this.set_edited_notice_locations(message_container);
             this.message_containers.set(message_container.msg.id, message_container);
         }
 

web/templates/edited_notice.hbs

@@ -1,13 +1,15 @@
-{{#if msg/local_edit_timestamp}}
+{{#if modified}}
-<div class="message_edit_notice" data-tippy-content="{{t 'Last edited {last_edit_timestr}.' }}">
+    {{#if msg/local_edit_timestamp}}
-    {{t "SAVING" }}
+        <div class="message_edit_notice" data-tippy-content="{{t 'Last edited {last_edit_timestr}.'}}">
-</div>
+            {{t "SAVING"}}
-{{else if moved}}
+        </div>
-<div class="message_edit_notice" data-tippy-content="{{t 'Last moved {last_edit_timestr}.' }}">
+    {{else if moved}}
-    {{t "MOVED" }}
+        <div class="message_edit_notice" data-tippy-content="{{t 'Last moved {last_edit_timestr}.'}}">
-</div>
+            {{t "MOVED"}}
-{{else}}
+        </div>
-<div class="message_edit_notice" data-tippy-content="{{t 'Last edited {last_edit_timestr}.' }}">
+    {{else}}
-    {{t "EDITED" }}
+        <div class="message_edit_notice" data-tippy-content="{{t 'Last edited {last_edit_timestr}.'}}">
-</div>
+            {{t "EDITED"}}
+        </div>
+    {{/if}}
 {{/if}}

web/templates/message_body.hbs

@@ -16,11 +16,11 @@
         {{/if}}
         {{#if status_message}}
             <span class="rendered_markdown status-message">{{rendered_markdown status_message}}</span>
-            {{#if edited_status_msg}}
+            {{#if message_edit_notices_for_status_message}}
                 {{> edited_notice}}
             {{/if}}
         {{/if}}
-        {{#if edited_alongside_sender}}
+        {{#if message_edit_notices_alongside_sender}}
             {{> edited_notice}}
         {{/if}}
     {{/if}}
@@ -55,7 +55,7 @@
     {{/unless}}
 {{/unless}}
 
-{{#if edited_in_left_col}}
+{{#if message_edit_notices_in_left_col}}
 {{> edited_notice}}
 {{/if}}
 

web/tests/message_list_view.test.js

@@ -199,8 +199,9 @@ test("msg_moved_var", () => {
 
 test("msg_edited_vars", () => {
     // This is a test to verify that only one of the three bools,
-    // `edited_in_left_col`, `edited_alongside_sender`, `edited_status_msg`
+    // `message_edit_notices_in_left_col`, `message_edit_notices_alongside_sender`,
-    // is not false; Tests for three different kinds of messages:
+    // `message_edit_notices_for_status_message` is not false; Tests for three
+    // different kinds of messages:
     //   * "/me" message
     //   * message that includes sender
     //   * message without sender
@@ -236,21 +237,34 @@ test("msg_edited_vars", () => {
     }
 
     function assert_left_col(message_container) {
-        assert.equal(message_container.edited_in_left_col, true);
+        assert.equal(message_container.modified, true);
-        assert.equal(message_container.edited_alongside_sender, false);
+        assert.equal(message_container.message_edit_notices_in_left_col, true);
-        assert.equal(message_container.edited_status_msg, false);
+        assert.equal(message_container.message_edit_notices_alongside_sender, false);
+        assert.equal(message_container.message_edit_notices_for_status_message, false);
     }
 
     function assert_alongside_sender(message_container) {
-        assert.equal(message_container.edited_in_left_col, false);
+        assert.equal(message_container.modified, true);
-        assert.equal(message_container.edited_alongside_sender, true);
+        assert.equal(message_container.message_edit_notices_in_left_col, false);
-        assert.equal(message_container.edited_status_msg, false);
+        assert.equal(message_container.message_edit_notices_alongside_sender, true);
+        assert.equal(message_container.message_edit_notices_for_status_message, false);
     }
 
     function assert_status_msg(message_container) {
-        assert.equal(message_container.edited_in_left_col, false);
+        assert.equal(message_container.modified, true);
-        assert.equal(message_container.edited_alongside_sender, false);
+        assert.equal(message_container.message_edit_notices_in_left_col, false);
-        assert.equal(message_container.edited_status_msg, true);
+        assert.equal(message_container.message_edit_notices_alongside_sender, false);
+        assert.equal(message_container.message_edit_notices_for_status_message, true);
+    }
+
+    function set_edited_notice_locations(message_container) {
+        const include_sender = message_container.include_sender;
+        const is_hidden = message_container.is_hidden;
+        const status_message = Boolean(message_container.status_message);
+        message_container.message_edit_notices_in_left_col = !include_sender && !is_hidden;
+        message_container.message_edit_notices_alongside_sender = include_sender && !status_message;
+        message_container.message_edit_notices_for_status_message =
+            include_sender && status_message;
     }
 
     (function test_msg_edited_vars() {
@@ -269,8 +283,13 @@ test("msg_edited_vars", () => {
 
         const result = list._message_groups[0].message_containers;
 
+        set_edited_notice_locations(result[0]);
         assert_alongside_sender(result[0]);
+
+        set_edited_notice_locations(result[1]);
         assert_left_col(result[1]);
+
+        set_edited_notice_locations(result[2]);
         assert_status_msg(result[2]);
     })();
 });