reactions: Clean up popovers and hover logic.

Previously, the emoji reactions popovers were keyed off the
edit_content area, which is problematic because that area was
created/deleted on hover, resulting in orphaned popovers (which
wouldn't close properly normally).  That had been hackishly addressed
in the original PR with the overbroad `$('.popover').remove();`.  To
remove that, we fix the actions popover to always be based on an
element that exists in the page.

There probably more to do here, but this is good enough to merge emoji
reactions and iterate from here.

static/js/popovers.js

@@ -257,7 +257,6 @@ exports.hide_message_info_popover = function () {
 
 exports.hide_reactions_popover = function () {
     if (reaction_popped()) {
-        $('.popover').remove();
         current_message_reactions_popover_elem.popover("destroy");
         current_message_reactions_popover_elem = undefined;
     }
@@ -373,10 +372,15 @@ exports.register_click_handlers = function () {
     });
 
 
-    $("body").on("click", ".reaction_button", function (e) {
+    $("body").on("click", ".actions_popover .reaction_button", function (e) {
         var msgid = $(e.currentTarget).data('msgid');
         e.stopPropagation();
-        popovers.toggle_reactions_popover(this, msgid);
+        // HACK: Because we need the popover to be based off an
+        // element that definitely exists in the page even if the
+        // message wasn't sent by us and thus the .reaction_hover
+        // element is not present, we use the message's .message_star
+        // element as the base for the popover.
+        popovers.toggle_reactions_popover($(".selected_message .message_star")[0], msgid);
     });
 
     $("#main_div").on("click", ".sender_info_hover", function (e) {

static/js/reactions.js

@@ -61,7 +61,7 @@ function reaction_popover_reaction_on_click() {
         operation = 'remove';
     }
     send_reaction_ajax(message_id, emoji_name, operation);
-    popovers.hide_all();
+    popovers.hide_reactions_popover();
 }
 
 function filter_emojis() {

static/js/ui.js

@@ -120,13 +120,20 @@ function message_hover(message_row) {
     message = current_msg_list.get(rows.id(message_row));
     message_unhover();
     message_row.addClass('message_hovered');
+    current_message_hover = message_row;
+
+    if (!message.sent_by_me) {
+        // The actions and reactions icon hover logic is handled entirely by CSS
+        return;
+    }
+
+    // But the message edit hover icon is determined by whether the message is still editablex
     if ((message_edit.get_editability(message) === message_edit.editability_types.FULL) &&
         !message.status_message) {
         message_row.find(".edit_content").html('<i class="icon-vector-pencil edit_content_button"></i>');
     } else {
-        message_row.find(".edit_content").html('<i class="icon-vector-smile reaction_button" data-msgid="' + id + '"></i>');
+        message_row.find(".edit_content").html('<i class="icon-vector-file-text-alt edit_content_button" data-msgid="' + id + '"></i>');
     }
-    current_message_hover = message_row;
 }
 
 /* Arguments used in the report_* functions are,

static/styles/zulip.css

@@ -1164,6 +1164,30 @@ a.message_label_clickable:hover {
     opacity: 1.0;
 }
 
+.reactions_hover {
+    display: inline-block;
+    position: relative;
+    left: 22px;
+    width: 0px;
+    height: 0px;
+    color: #bbb;
+    opacity: 0;
+}
+
+.reactions_hover i {
+    position: absolute;
+    display: block;
+    top: -0.9em;
+    left: 0.4em;
+    border-radius: 1px;
+    padding: 1px 2px;
+}
+
+.message_hovered .reactions_hover {
+    cursor: pointer;
+    opacity: 1.0;
+}
+
 /* Brighten text because of the dark background */
 .dark_background a,
 .dark_background a:hover,

static/templates/single_message.handlebars

@@ -38,7 +38,13 @@
               <span class="message_star {{#if msg/starred}}icon-vector-star{{else}}icon-vector-star-empty empty-star{{/if}}"
                     title="{{#tr this}}{{#if msg/starred}}Unstar{{else}}Star{{/if}} this message{{/tr}}"></span>
             </div>
+            {{#if msg/sent_by_me}}
             <span class="edit_content"></span>
+            {{else}}
+            <div class="reactions_hover">
+            <i class="icon-vector-smile reaction_button" data-msgid="{{msg/id}}"></i>
+            </div>
+            {{/if}}
             <div class="info actions_hover">
               <i class="icon-vector-chevron-down"></i>
             </div>