frontend: Allow users to see the source of messages they can't edit.

Previously we showed an "Edit" item in the actions popover menu when a user
could edit the content or topic of a message, and nothing otherwise. We now
show "Edit", "Edit Topic", or "View Source" in the popover menu for every
message, depending on the editability of the message, and present an
appropriate version of message_edit_form when the menu item is clicked.

Finishes #1604 and #1761.

frontend_tests/casper_tests/10-admin.js

@@ -351,7 +351,7 @@ casper.then(function () {
 //     casper.test.assertSelectorHasText(".last_message .message_content", "test edited");
 // });
 
-// Check that edit link no longer appears in the popover menu
+// Check that edit link has changed to "View Source" in the popover menu
 // TODO: also check that the edit icon no longer appears next to the message
 casper.then(function () {
     casper.waitForSelector('.message_row');
@@ -361,7 +361,9 @@ casper.then(function () {
         var msg = $('#zhome .message_row:last');
         msg.find('.info').click();
     });
-    casper.test.assertDoesntExist('.popover_edit_message');
+    casper.waitUntilVisible('.popover_edit_message', function () {
+        casper.test.assertSelectorHasText('.popover_edit_message', 'View Source');
+    });
     casper.evaluate(function () {
         var msg = $('#zhome .message_row:last');
         msg.find('.info').click();

static/js/click_handlers.js

@@ -125,6 +125,12 @@ $(function () {
         e.stopPropagation();
         popovers.hide_all();
     });
+    $("body").on("click", ".message_edit_close", function (e) {
+        var row = $(this).closest(".message_row");
+        message_edit.end(row);
+        e.stopPropagation();
+        popovers.hide_all();
+    });
 
     // RECIPIENT BARS
 

static/js/message_edit.js

@@ -149,10 +149,14 @@ function edit_message (row, raw_content) {
     // zerver.views.messages.update_message_backend
     var seconds_left_buffer = 5;
     var editability = get_editability(message, seconds_left_buffer);
+    var is_editable = (editability === message_edit.editability_types.TOPIC_ONLY ||
+                       editability === message_edit.editability_types.FULL);
 
     var form = $(templates.render(
         'message_edit_form',
         {is_stream: (message.type === 'stream'),
+         is_editable: is_editable,
+         has_been_editable: (editability !== editability_types.NO),
          topic: message.subject,
          content: raw_content,
          minutes_to_edit: Math.floor(page_params.realm_message_content_edit_limit_seconds / 60)}));
@@ -163,8 +167,18 @@ function edit_message (row, raw_content) {
 
     form.keydown(_.partial(handle_edit_keydown, false));
 
-    if (editability === editability_types.TOPIC_ONLY) {
-        row.find('textarea.message_edit_content').attr("disabled","disabled");
+    if (editability === editability_types.NO) {
+        row.find('textarea.message_edit_content').attr("disabled", "disabled");
+        row.find('input.message_edit_topic').attr("disabled", "disabled");
+    } else if (editability === editability_types.NO_LONGER) {
+        // You can currently only reach this state in non-streams. If that
+        // changes (e.g. if we stop allowing topics to be modified forever
+        // in streams), then we'll need to disable
+        // row.find('input.message_edit_topic') as well.
+        row.find('textarea.message_edit_content').attr("disabled", "disabled");
+        row.find('.message_edit_countdown_timer').text(i18n.t("View source"));
+    } else if (editability === editability_types.TOPIC_ONLY) {
+        row.find('textarea.message_edit_content').attr("disabled", "disabled");
         // Hint why you can edit the topic but not the message content
         row.find('.message_edit_countdown_timer').text(i18n.t("Topic editing only"));
     } else if (editability === editability_types.FULL) {
@@ -172,7 +186,8 @@ function edit_message (row, raw_content) {
     }
 
     // Add tooltip
-    if (page_params.realm_message_content_edit_limit_seconds > 0) {
+    if (editability !== editability_types.NO &&
+        page_params.realm_message_content_edit_limit_seconds > 0) {
         row.find('.message-edit-timer-control-group').show();
         row.find('#message_edit_tooltip').tooltip({
             animation: false,
@@ -229,7 +244,9 @@ function edit_message (row, raw_content) {
     }
 
     var edit_row = row.find(".message_edit");
-    if ((message.type === 'stream' && message.subject === compose.empty_topic_placeholder()) ||
+    if (!is_editable) {
+        edit_row.find(".message_edit_close").focus();
+    } else if ((message.type === 'stream' && message.subject === compose.empty_topic_placeholder()) ||
         editability === editability_types.TOPIC_ONLY) {
         edit_row.find(".message_edit_topic").focus();
     } else {

static/js/popovers.js

@@ -60,6 +60,14 @@ exports.toggle_actions_popover = function (element, id) {
         var editability = message_edit.get_editability(message);
         var is_editable = (editability === message_edit.editability_types.TOPIC_ONLY ||
                            editability === message_edit.editability_types.FULL);
+        var editability_menu_item;
+        if (editability === message_edit.editability_types.FULL) {
+            editability_menu_item = i18n.t("Edit");
+        } else if (editability === message_edit.editability_types.TOPIC_ONLY) {
+            editability_menu_item = i18n.t("Edit Topic");
+        } else {
+            editability_menu_item = i18n.t("View Source");
+        }
         var can_mute_topic =
                 message.stream &&
                 message.subject &&
@@ -72,6 +80,7 @@ exports.toggle_actions_popover = function (element, id) {
         var args = {
             message: message,
             is_editable: is_editable,
+            editability_menu_item: editability_menu_item,
             can_mute_topic: can_mute_topic,
             can_unmute_topic: can_unmute_topic,
             conversation_time_uri: narrow.by_conversation_and_time_uri(message),

static/templates/actions_popover_content.handlebars

@@ -1,12 +1,11 @@
 {{! Contents of the "message actions" popup }}
 <ul class="nav nav-list actions_popover pull-right">
-  {{#if is_editable}}
   <li>
     <a href="#" class="popover_edit_message" data-msgid="{{message.id}}">
-      <i class="icon-vector-pencil"></i> {{t "Edit" }}
+      {{! Can consider http://fontawesome.io/icon/file-code-o/ when we upgrade to font awesome 4.}}
+      <i class="{{#if is_editable}}icon-vector-pencil{{else}}icon-vector-file-text-alt{{/if}}"></i> {{editability_menu_item}}
     </a>
   </li>
-  {{/if}}
 
   <li>
     <a href="#" class="respond_button">

static/templates/message_edit_form.handlebars

@@ -22,14 +22,20 @@
     </div>
     <div class="control-group">
         <div class="controls edit-controls">
+            {{#if is_editable}}
             <button type="button" class="message_edit_save btn btn-primary btn-small">{{t "Save" }}</button>
             <button type="button" class="message_edit_cancel btn btn-default btn-small">{{t "Cancel" }}</button>
+            {{else}}
+            <button type="button" class="message_edit_close btn btn-primary btn-small">{{t "Close" }}</button>
+            {{/if}}
+            {{#if has_been_editable}}
             <div class="message-edit-timer-control-group">
                 <span class="message_edit_countdown_timer"></span>
                 <span><i id="message_edit_tooltip" class="message_edit_tooltip icon-vector-question-sign" data-toggle="tooltip"
                          title="This organization is configured to restrict editing of message content to {{minutes_to_edit}} minutes after it is sent."></i>
                 </span>
             </div>
+            {{/if}}
         </div>
     </div>
     <div class="alert alert-error edit_error hide"></div>