message view: Render formal date string as tooltip on recipient row

A formal date string will be assigned to the title attribute of the
recipient_row_date and date_row elements.
e.g. Wednesday, April 5, 2017.

Fixes #4663.

static/js/timerender.js

@@ -8,13 +8,18 @@ var set_to_start_of_day = function (time) {
     return time.setMilliseconds(0).setSeconds(0).setMinutes(0).setHours(0);
 };
 
-// Given an XDate object 'time', return a two-element list containing
+// Given an XDate object 'time', return a three-element list containing
 //   - a string for the current human-formatted version
+//   - a string for the current formally formatted version
+//         e.g. "Monday, April 15, 2017"
 //   - a boolean for if it will need to be updated when the day changes
 exports.render_now = function (time) {
     var start_of_today = set_to_start_of_day(new XDate());
     var start_of_other_day = set_to_start_of_day(time.clone());
 
+    // render formal time to be used as title attr tooltip
+    var formal_time_str = time.toString('dddd,\xa0MMMM\xa0d,\xa0yyyy');
+
     // How many days old is 'time'? 0 = today, 1 = yesterday, 7 = a
     // week ago, -1 = tomorrow, etc.
 
@@ -24,20 +29,20 @@ exports.render_now = function (time) {
     var days_old = Math.round(start_of_other_day.diffDays(start_of_today));
 
     if (days_old === 0) {
-        return [i18n.t("Today"), true];
+        return [i18n.t("Today"), formal_time_str, true];
     } else if (days_old === 1) {
-        return [i18n.t("Yesterday"), true];
+        return [i18n.t("Yesterday"), formal_time_str, true];
     } else if (days_old >= 365) {
         // For long running servers, searching backlog can get ambiguous
         // without a year stamp. Only show year if message is over a year old.
-        return [time.toString("MMM\xa0dd,\xa0yyyy"), false];
+        return [time.toString("MMM\xa0dd,\xa0yyyy"), formal_time_str, false];
     }
     // For now, if we get a message from tomorrow, we don't bother
     // rewriting the timestamp when it gets to be tomorrow.
 
     // "\xa0" is U+00A0 NO-BREAK SPACE.
     // Can't use   as that represents the literal string " ".
-    return [time.toString("MMM\xa0dd"), false];
+    return [time.toString("MMM\xa0dd"), formal_time_str, false];
 };
 
 // List of the dates that need to be updated when the day changes.
@@ -64,14 +69,14 @@ function maybe_add_update_list_entry(needs_update, id, time, time_above) {
     }
 }
 
-function render_date_span(elem, time_str, time_above_str) {
+function render_date_span(elem, time_str, time_above_str, time_formal_str) {
     elem.text("");
     if (time_above_str !== undefined) {
         return elem.append('<i class="date-direction icon-vector-caret-up"></i>' +
                            time_above_str).append($('<hr class="date-line">')).append('<i class="date-direction icon-vector-caret-down"></i>'
                            + time_str);
     }
-    return elem.append(time_str);
+    return elem.append(time_str).attr('title', time_formal_str);
 }
 
 // Given an XDate object 'time', return a DOM node that initially
@@ -90,11 +95,11 @@ exports.render_date = function (time, time_above) {
     var node = $("<span />").attr('id', id);
     if (time_above !== undefined) {
         var rendered_time_above = exports.render_now(time_above);
-        node = render_date_span(node, rendered_time[0], rendered_time_above[0]);
+        node = render_date_span(node, rendered_time[0], rendered_time_above[0], rendered_time[1]);
     } else {
-        node = render_date_span(node, rendered_time[0]);
+        node = render_date_span(node, rendered_time[0], undefined, rendered_time[1]);
     }
-    maybe_add_update_list_entry(rendered_time[1], id, time, time_above);
+    maybe_add_update_list_entry(rendered_time[2], id, time, time_above);
     return node;
 };
 
@@ -119,11 +124,12 @@ exports.update_timestamps = function () {
                 if (elem.length === 3) {
                     time_above = elem[2];
                     var rendered_time_above = exports.render_now(time_above);
-                    render_date_span($(element), rendered_time[0], rendered_time_above[0]);
+                    render_date_span($(element), rendered_time[0], rendered_time_above[0],
+                        rendered_time[1]);
                 } else {
-                    render_date_span($(element), rendered_time[0]);
+                    render_date_span($(element), rendered_time[0], undefined, rendered_time[1]);
                 }
-                maybe_add_update_list_entry(rendered_time[1], id, time, time_above);
+                maybe_add_update_list_entry(rendered_time[2], id, time, time_above);
             }
         });