Add frontend to show message edit history.

Fixes #268.

Modified significantly by tabbott to:
* improve code cleanliness / repetition
* add missing translation tags
* move code into message_edit.js
* correspond with the new backend.
* not display the option for messages only topic-edited

frontend_tests/node_tests/templates.js

@@ -556,6 +556,27 @@ function render(template_name, args) {
     global.write_handlebars_output("message_group", html);
 }());
 
+(function message_edit_history() {
+    var message = {
+        content: "Let's go to lunch!",
+        edit_history: [
+            {
+                body_to_render: "<p>Let's go to <span class='highlight_text_replaced'>dinner</span>!</p>",
+                timestamp: 1468132659,
+                edited_by: 'Alice',
+                posted_or_edited: "Edited by",
+            },
+        ],
+    };
+    var html = render('message_edit_history', {
+            edited_messages: message.edit_history,
+        });
+    global.write_test_output("message_edit_history.handlebars", html);
+    var edited_message = $(html).find("div.messagebox-content");
+    assert.equal(edited_message.text().trim(),
+                "1468132659\n        Let's go to dinner!\n        Edited by Alice");
+}());
+
 (function message_info_popover_content() {
     var args = {
         message: {

static/js/message_edit.js

@@ -377,6 +377,49 @@ exports.edit_last_sent_message = function () {
     }
 };
 
+exports.show_history = function (message) {
+    $('#message-history').html('');
+    $('#message-edit-history').modal("show");
+    channel.get({
+        url: "/json/messages/" + message.id + "/history",
+        data: {message_id: JSON.stringify(message.id)},
+        success: function (data) {
+            // For now, we ignore topic edits
+            var content_edit_history = [];
+            _.each(data.message_history, function (msg, index) {
+                if (index !== 0 && !msg.prev_content) {
+                    // Skip topic edits
+                    return;
+                }
+
+                // Format timestamp nicely for display
+                var item = {timestamp: timerender.get_full_time(msg.timestamp)};
+                if (index === 0) {
+                    item.posted_or_edited = "Posted by";
+                    item.body_to_render = msg.rendered_content;
+                } else {
+                    item.posted_or_edited = "Edited by";
+                    item.body_to_render = msg.content_html_diff;
+                }
+                if (msg.user_id) {
+                    var person = people.get_person_from_user_id(msg.user_id);
+                    item.edited_by = person.full_name;
+                }
+
+                content_edit_history.push(item);
+            });
+
+            $('#message-history').html(templates.render('message_edit_history', {
+                edited_messages: content_edit_history,
+            }));
+        },
+        error: function (xhr) {
+            ui.report_error(i18n.t("Error fetching message edit history"), xhr,
+                            $("#message-history-error"));
+        },
+    });
+};
+
 $(document).on('narrow_deactivated.zulip', function () {
     _.each(currently_editing_messages, function (elem, idx) {
         if (current_msg_list.get(idx) !== undefined) {

static/js/popovers.js

@@ -192,6 +192,10 @@ exports.toggle_actions_popover = function (element, id) {
                 message.subject &&
                 muting.is_topic_muted(message.stream, message.subject);
 
+        var should_display_edit_history_option = _.any(message.edit_history, function (entry) {
+            return entry.prev_content !== undefined;
+        });
+
         var args = {
             message: message,
             use_edit_icon: use_edit_icon,
@@ -199,6 +203,7 @@ exports.toggle_actions_popover = function (element, id) {
             can_mute_topic: can_mute_topic,
             can_unmute_topic: can_unmute_topic,
             should_display_add_reaction_option: message.sent_by_me,
+            should_display_edit_history_option: should_display_edit_history_option,
             conversation_time_uri: narrow.by_conversation_and_time_uri(message),
             narrowed: narrow.active(),
         };
@@ -825,6 +830,16 @@ exports.register_click_handlers = function () {
         e.stopPropagation();
         e.preventDefault();
     });
+    $('body').on('click', '.view_edit_history', function (e) {
+        var msgid = $(e.currentTarget).data('msgid');
+        var row = current_msg_list.get_row(msgid);
+        var message = current_msg_list.get(rows.id(row));
+
+        popovers.hide_actions_popover();
+        message_edit.show_history(message);
+        e.stopPropagation();
+        e.preventDefault();
+    });
 
     $('body').on('click', '.popover_mute_topic', function (e) {
         var stream = $(e.currentTarget).data('msg-stream');

static/styles/zulip.css

@@ -1215,6 +1215,22 @@ div.focused_table {
     max-width: 100%;
 }
 
+#message-edit-history .message_author {
+    position: relative;
+}
+
+#message-edit-history .author_details {
+    display: block;
+    font-size: 12px;
+    vertical-align: middle;
+    padding: 1px;
+    font-weight: 300;
+    position: absolute;
+    right: -80px;
+    line-height: 20px;
+    text-align: right;
+}
+
 .message_content.condensed {
     max-height: 8.5em;
     overflow: hidden;

static/templates/actions_popover_content.handlebars

@@ -20,6 +20,15 @@
     </a>
   </li>
 
+  {{#if should_display_edit_history_option}}
+  <li>
+    <a href="#" class="view_edit_history" data-msgid="{{message.id}}">
+      <i class="icon-vector-time"></i>
+        {{t "View edit history" }}
+    </a>
+  </li>
+  {{/if}}
+
   {{#if can_mute_topic}}
   <li>
     <a href="#" class="popover_mute_topic" data-msg-stream="{{message.stream}}" data-msg-topic="{{message.subject}}">

static/templates/message_edit_history.handlebars

@@ -0,0 +1,15 @@
+{{! Client-side Mustache template for viewing message edit history.}}
+
+<div class="date_row"><span id="timerender2">{{t 'Earliest' }}</span></div>
+{{#each edited_messages}}
+<div class="">
+    <div class="messagebox-border">
+      <div class="messagebox-content">
+        <div class="message_top_line"><span class="message_time">{{ timestamp }}</span></div>
+        <div class="message_edit_content">{{{ body_to_render }}}</div>
+        <div class="message_author"><div class="author_details">{{ posted_or_edited }} {{ edited_by }}</div></div>
+      </div>
+    </div>
+</div>
+<hr/>
+{{/each}}

templates/zerver/home.html

@@ -88,6 +88,7 @@
     </div>
 
 
+{% include "zerver/message_history.html" %}
 {% include "zerver/compose.html" %}
 <div id="notifications-area">
 </div>

templates/zerver/message_history.html

@@ -0,0 +1,14 @@
+<div class="modal hide" id="message-edit-history" tabindex="-1" role="dialog"
+     aria-labelledby="message-history-label" aria-hidden="true">
+  <div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+    <h3 id="message-history-label">{{ _('Message edit history') }}</h3>
+  </div>
+  <div class="modal-body">
+    <div id="message-history-error"></div>
+    <div class="controls" id="message-history"></div>
+  </div>
+  <div class="modal-footer">
+      <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">{{ _("Cancel") }}</button>
+  </div>
+</div>

zerver/tests/test_templates.py

@@ -76,6 +76,7 @@ class TemplateTestCase(ZulipTestCase):
             'zerver/stream_creation_prompt.html',
             'zerver/subscriptions.html',
             'zerver/tutorial_finale.html',
+            'zerver/message_history.html',
         ]
         unusual = [
             'confirmation/mituser_confirmation_email_body.txt',