message_edit: Create recipient_bar_controls span.

This refactor will facilitate making it possible to set CSS properties
on this controls span; in particular, we're hoping to disable user
selection of the whitespace in this region.

The main side effect of this refactor is that we need to add JS code
to also hide the icon-vector-pencil element, since it's now in a new
span.

static/js/message_list.js

@@ -508,12 +508,14 @@ exports.MessageList.prototype = {
 
     show_edit_topic: function MessageList_show_edit_topic(recipient_row, form) {
         recipient_row.find(".topic_edit_form").empty().append(form);
+        recipient_row.find('.icon-vector-pencil').hide();
         recipient_row.find(".stream_topic").hide();
         recipient_row.find(".topic_edit").show();
     },
 
     hide_edit_topic: function MessageList_hide_edit_topic(recipient_row) {
         recipient_row.find(".stream_topic").show();
+        recipient_row.find('.icon-vector-pencil').show();
         recipient_row.find(".topic_edit").hide();
     },
 

static/styles/zulip.css

@@ -759,7 +759,7 @@ td.pointer {
 
 .stream_topic {
     display: inline-block;
-    padding: 3px 6px 2px 12px;
+    padding: 3px 3px 2px 12px;
     margin-left: -5px;
     height: 17px;
     line-height: 17px;
@@ -1183,6 +1183,7 @@ a.message_label_clickable:hover {
 }
 
 .on_hover_topic_mute {
+    padding-left: 3px;
     opacity: .1;
 }
 

static/templates/recipient_row.handlebars

@@ -29,7 +29,9 @@
                     {{subject}}
                     {{/if}}
                 </a>
+            </span>
 
+            <span class="recipient_bar_controls">
                 {{! edit subject pencil icon }}
                 {{#if always_visible_topic_edit}}
                     <i class="icon-vector-pencil always_visible_topic_edit"></i>
@@ -47,7 +49,6 @@
                     <i class="icon-vector-external-link-sign"></i>
                 </a>
                 {{/each}}
-            </span>
 
                 <span class="topic_edit">
                     <span class="topic_edit_form" id="{{id}}"></span>
@@ -55,6 +56,7 @@
 
                 <i class="icon-vector-eye-close on_hover_topic_mute" data-stream-id="{{stream_id}}" data-topic-name="{{subject}}" title="{{t 'Mute topic' }} (M)"></i>
                 <span class="recipient_row_date {{#if show_date}}{{else}}hide-date{{/if}}">{{{date}}}</span>
+            </span>
         </div>
     </div>
 </div>