Generalize the message hover effect

We now set a CSS class on the hovered message, which is used to
control email address visibility.

(imported from commit 787e24f71f20aa3a6452e57b94f5ca1a4c8bc32f)

zephyr/jstemplates/message.html

@@ -57,7 +57,7 @@
         <span class="message_sender actions_hover">
             <img class="inline_profile_picture message_body_gravatar img-rounded" src="https://secure.gravatar.com/avatar/{{gravatar_hash}}?d=identicon&s=30?stamp={{stamp}}"/>
             <span class="sender_name">{{sender_full_name}}</span>
-            <span class="sender_email invisible">{{sender_email}}</span>
+            <span class="sender_email">{{sender_email}}</span>
         </span>
     {{/include_sender}}
         <span class="message_time actions_hover">{{{timestr}}}</span>

zephyr/static/js/ui.js

@@ -158,22 +158,21 @@ $(document).bind('copy', function (e) {
    because we want to reserve space for the email address.  This avoids
    things jumping around slightly when the email address is shown. */
 
-var current_email_elem;
-function hide_email() {
-    if (current_email_elem !== undefined) {
-        current_email_elem.addClass('invisible');
-        current_email_elem = undefined;
-    }
+var current_message_hover;
+function message_unhover() {
+    if (current_message_hover === undefined)
+        return;
+    current_message_hover.removeClass('message_hovered');
+    current_message_hover = undefined;
 }
 
-function show_email(message_row) {
-    hide_email();
+function message_hover(message_row) {
+    message_unhover();
     while (!message_row.hasClass('include-sender')) {
         message_row = message_row.prev();
     }
-    var elem = message_row.find('.sender_email');
-    elem.removeClass('invisible');
-    current_email_elem = elem;
+    message_row.addClass('message_hovered');
+    current_message_hover = message_row;
 }
 
 exports.report_message = function (response, status_box, cls) {
@@ -775,22 +774,22 @@ $(function () {
     $("#main_div").on("mousemove", ".messagebox", mousemove);
     $("#main_div").on("mouseover", ".messagebox", function (e) {
         var row = $(this).closest(".message_row");
-        show_email(row);
+        message_hover(row);
     });
 
     $("#main_div").on("mouseout", ".messagebox", function (e) {
-        hide_email();
+        message_unhover();
     });
 
     $("#main_div").on("mouseover", ".actions_hover", function (e) {
         var row = $(this).closest(".message_row");
-        show_email(row);
+        message_hover(row);
         row.find(".sender_name").addClass("sender_hovered");
     });
 
     $("#main_div").on("mouseout", ".actions_hover", function (e) {
         var row = $(this).closest(".message_row");
-        hide_email();
+        message_unhover();
         row.find(".sender_name").removeClass("sender_hovered");
     });
 

zephyr/static/styles/zephyr.css

@@ -239,6 +239,7 @@ td.pointer {
 .sender_email {
     font-size: 80%;
     color: gray;
+    visibility: hidden;
 
     /* Use padding, not margin, so that there's a continuous
        region of 'hover-ability' between fullname and email. */
@@ -250,6 +251,10 @@ td.pointer {
     }
 }
 
+.message_hovered .sender_email {
+    visibility: visible;
+}
+
 .message_label_clickable:hover {
     cursor: pointer;
     color:  #08C;