mute_ui: Add UI for mute on recipient bar.

Like the topic edit pencil icon, the new UI is mostly invisible, but
appears when you hover over the recipient bar.

* Added a tag to hold the mute button in recipient_row.handlebars with
corresponding styling in zulip.css.
* Added an event handler for the mute button in click_handlers.js.

Fixes: #2235.

static/js/click_handlers.js

@@ -163,6 +163,16 @@ $(function () {
         meta.focusing = true;
     });
 
+    // MUTING
+
+    $('body').on('click', '.on_hover_topic_mute', function (e) {
+        e.stopPropagation();
+        var stream_id = $(e.currentTarget).attr('data-stream-id');
+        var topic = $(e.currentTarget).attr('data-topic-name');
+        var stream = stream_data.get_sub_by_id(stream_id);
+        popovers.topic_ops.mute(stream.name, topic);
+    });
+
     // RECIPIENT BARS
 
     function get_row_id_for_narrowing(narrow_link_elem) {

static/js/message_list_view.js

@@ -93,6 +93,16 @@ function populate_group_from_message_container(group, message_container) {
         group.match_subject = message_container.msg.match_subject;
         group.stream_url = message_container.stream_url;
         group.topic_url = message_container.topic_url;
+        var sub = stream_data.get_sub(message_container.msg.stream);
+        if (sub === undefined) {
+            // Hack to handle unusual cases like the tutorial where
+            // the streams used don't actually exist in the subs
+            // module.  Ideally, we'd clean this up by making the
+            // tutorial populate subs.js "properly".
+            group.stream_id = -1;
+        } else {
+            group.stream_id = sub.stream_id;
+        }
     } else if (group.is_private) {
         group.pm_with_url = message_container.pm_with_url;
         group.display_reply_to = message_store.get_pm_full_names(message_container.msg);

static/styles/zulip.css

@@ -997,6 +997,15 @@ a.message_label_clickable:hover {
     opacity: 1.0;
 }
 
+.on_hover_topic_mute {
+    opacity: .1;
+}
+
+.on_hover_topic_mute:hover {
+    cursor: pointer;
+    opacity: 1.0;
+}
+
 .edit_content {
     display: inline-block;
     position: relative;

static/templates/recipient_row.handlebars

@@ -51,6 +51,7 @@
           <span class="topic_edit_form" id="{{id}}"></span>
         </span>
 
+        <i class="icon-vector-eye-close on_hover_topic_mute" data-stream-id="{{stream_id}}" data-topic-name="{{subject}}"></i>
         <span class="recipient_row_date {{#if show_date}}{{else}}hide-date{{/if}}">{{{date}}}</span>
       </div>
     </div>