message view: Allow revealing hidden message from muted sender.

* We show a "Click here to reveal." hyperlink in the hidden
message dialog for user to click on and read a hidden message.

* The "reveal" action is temporary, in the sense that a revealed
message will again be hidden once the broswer tab reloads or
if the user renarrows.

* When a message is revealed, we make sure to show the sender
of that message, even if it isn't the first message of it's group.
This is because the first message of that message group (which
would have otherwise shown the sender) can still be hidden.

* Reactions and background color after revealing a message are
the same as if the message hadn'e been hidden at all in the
first place.

frontend_tests/node_tests/message_list_view.js

@@ -146,10 +146,10 @@ run_test("muted_message_vars", () => {
         return list;
     }
 
-    function calculate_variables(list, messages) {
-        list.set_calculated_message_container_variables(messages[0]);
-        list.set_calculated_message_container_variables(messages[1]);
-        list.set_calculated_message_container_variables(messages[2]);
+    function calculate_variables(list, messages, is_revealed) {
+        list.set_calculated_message_container_variables(messages[0], is_revealed);
+        list.set_calculated_message_container_variables(messages[1], is_revealed);
+        list.set_calculated_message_container_variables(messages[2], is_revealed);
         return list._message_groups[0].message_containers;
     }
 
@@ -194,6 +194,22 @@ run_test("muted_message_vars", () => {
 
         // Additionally test that, `contains_mention` is false even on that message which has a mention.
         assert.equal(result[1].contains_mention, false);
+
+        // Now, reveal the hidden messages.
+        const is_revealed = true;
+        result = calculate_variables(list, messages, is_revealed);
+
+        // Check that `is_hidden` is false and `include_sender` is true on all messages.
+        assert.equal(result[0].is_hidden, false);
+        assert.equal(result[1].is_hidden, false);
+        assert.equal(result[2].is_hidden, false);
+
+        assert.equal(result[0].include_sender, true);
+        assert.equal(result[1].include_sender, true);
+        assert.equal(result[2].include_sender, true);
+
+        // Additionally test that, `contains_mention` is true on that message which has a mention.
+        assert.equal(result[1].contains_mention, true);
     })();
 });
 

static/js/click_handlers.js

@@ -243,6 +243,13 @@ export function initialize() {
         e.preventDefault();
     });
 
+    $("body").on("click", ".reveal_hidden_message", (e) => {
+        const message_id = rows.id($(e.currentTarget).closest(".message_row"));
+        message_lists.current.view.reveal_hidden_message(message_id);
+        e.stopPropagation();
+        e.preventDefault();
+    });
+
     $("#main_div").on("click", "a.stream", function (e) {
         e.preventDefault();
         // Note that we may have an href here, but we trust the stream id more,

static/js/message_list_view.js

@@ -238,7 +238,7 @@ export class MessageListView {
         }
     }
 
-    set_calculated_message_container_variables(message_container) {
+    set_calculated_message_container_variables(message_container, is_revealed) {
         set_timestr(message_container);
 
         /*
@@ -248,14 +248,24 @@ export class MessageListView {
             2. Hide reactions on that message.
             3. Do not give a background color to that message even if it mentions the
                current user.
+
+            Further, is a hidden message was just revealed, we make sure to show
+            the sender.
         */
 
-        const is_hidden = muting.is_user_muted(message_container.msg.sender_id);
+        const is_hidden = muting.is_user_muted(message_container.msg.sender_id) && !is_revealed;
 
         message_container.is_hidden = is_hidden;
         // Make sure the right thing happens if the message was edited to mention us.
         message_container.contains_mention = message_container.msg.mentioned && !is_hidden;
+
         message_container.include_sender = message_container.include_sender && !is_hidden;
+        if (is_revealed) {
+            // If the message is to be revealed, we show the sender anyways, because the
+            // the first message in the group (which would hold the sender) can still be
+            // hidden.
+            message_container.include_sender = true;
+        }
 
         this._maybe_format_me_message(message_container);
         // Once all other variables are updated
@@ -1153,11 +1163,11 @@ export class MessageListView {
         header.replaceWith(rendered_recipient_row);
     }
 
-    _rerender_message(message_container, message_content_edited) {
+    _rerender_message(message_container, message_content_edited, is_revealed) {
         const row = this.get_row(message_container.msg.id);
         const was_selected = this.list.selected_message() === message_container.msg;
 
-        this.set_calculated_message_container_variables(message_container);
+        this.set_calculated_message_container_variables(message_container, is_revealed);
 
         const rendered_msg = $(this._get_message_template(message_container));
         if (message_content_edited) {
@@ -1171,6 +1181,11 @@ export class MessageListView {
         }
     }
 
+    reveal_hidden_message(message_id) {
+        const message_container = this.message_containers.get(message_id);
+        this._rerender_message(message_container, false, true);
+    }
+
     rerender_messages(messages, message_content_edited) {
         // Convert messages to list messages
         let message_containers = messages.map((message) => this.message_containers.get(message.id));

static/templates/message_hidden_dialog.hbs

@@ -1,3 +1,4 @@
 <em>
-    {{#tr}}This message was hidden because you have muted the sender.{{/tr}}
+    {{#tr}}This message was hidden because you have muted the sender. {{/tr}}
+    <a class="reveal_hidden_message">{{#tr}}Click here to reveal.{{/tr}}</a>
 </em>