timestamp_tooltip: Reformat tooltip content.

Reformats to a format like: 5/19/17, 2:42:53 AM IST (UTC+5.5).

frontend_tests/node_tests/timerender.js

@@ -221,33 +221,21 @@ run_test("absolute_time_24_hour", () => {
 
 run_test("get_full_datetime", () => {
     const time = new Date(1495141973000); // 2017/5/18 9:12:53 PM (UTC+0)
-    let expected_date = "Thursday, May 18, 2017";
+    let expected = "translated: 5/18/2017 at 9:12:53 PM UTC";
-    let expected_time = "9:12:53 PM Coordinated Universal Time";
+    assert.equal(timerender.get_full_datetime(time), expected);
-    assert.deepEqual(timerender.get_full_datetime(time), {
-        date: expected_date,
-        time: expected_time,
-    });
 
     // test 24 hour time setting.
     page_params.twenty_four_hour_time = true;
-    expected_time = "21:12:53 Coordinated Universal Time";
+    expected = "translated: 5/18/2017 at 21:12:53 UTC";
-    assert.deepEqual(timerender.get_full_datetime(time), {
+    assert.equal(timerender.get_full_datetime(time), expected);
-        date: expected_date,
-        time: expected_time,
-    });
 
-    // Test year not shown if current.
+    page_params.twenty_four_hour_time = false;
-    const current_year = new Date().getFullYear();
+
-    time.setFullYear(current_year);
+    // Test the GMT[+-]x:y logic.
-    expected_date = time.toLocaleDateString(undefined, {
+    process.env.TZ = "Asia/Kolkata";
-        weekday: "long",
+    expected = "translated: 5/19/2017 at 2:42:53 AM (UTC+5.5)";
-        month: "long",
+    assert.equal(timerender.get_full_datetime(time), expected);
-        day: "numeric",
+    delete process.env.TZ;
-    });
-    assert.deepEqual(timerender.get_full_datetime(time), {
-        date: expected_date,
-        time: expected_time,
-    });
 });
 
 run_test("last_seen_status_from_date", () => {

static/js/timerender.js

@@ -307,21 +307,29 @@ export const absolute_time = (function () {
 })();
 
 export function get_full_datetime(time) {
-    const date_string_options = {weekday: "long", month: "long", day: "numeric"};
+    // Convert to number of hours ahead/behind UTC.
-    const time_string_options = {timeStyle: "full"};
+    // The sign of getTimezoneOffset() is reversed wrt
+    // the conventional meaning of UTC+n / UTC-n
+    const tz_offset = -time.getTimezoneOffset() / 60;
+
+    const time_options = {timeStyle: "long"};
 
     if (page_params.twenty_four_hour_time) {
-        time_string_options.hourCycle = "h24";
+        time_options.hourCycle = "h24";
     }
 
-    const current_date = new Date();
+    const date_string = time.toLocaleDateString();
-    if (time.getFullYear() !== current_date.getFullYear()) {
+    let time_string = time.toLocaleTimeString(undefined, time_options);
-        // Show year only if not current year.
-        date_string_options.year = "numeric";
-    }
 
-    return {
+    // In some rare cases where user's locale and timeZone doesn't suit,
-        date: time.toLocaleDateString(page_params.request_language, date_string_options),
+    // for eg. en-US with Indian timeZone gives GMT+5:30. We want to
-        time: time.toLocaleTimeString(page_params.request_language, time_string_options),
+    // avoid showing something like: 27/6/21 at 12:00 GMT+x:y (UTC+N).
-    };
+    time_string = time_string.replace(/ GMT[+-][\d:]*/, "");
+
+    const tz_offset_sign = tz_offset > 0 ? "+" : "-";
+    const tz_offset_str = time_string.includes("UTC") ? "" : ` (UTC${tz_offset_sign}${tz_offset})`;
+
+    time_string = time_string + tz_offset_str;
+
+    return $t({defaultMessage: "{date} at {time}"}, {date: date_string, time: time_string});
 }

static/js/tippyjs.js

@@ -154,7 +154,6 @@ export function initialize() {
 
     delegate("body", {
         target: ".message_time",
-        allowHTML: true,
         placement: "top",
         appendTo: () => document.body,
         onShow(instance) {
@@ -162,8 +161,7 @@ export function initialize() {
             const row = time_elem.closest(".message_row");
             const message = message_lists.current.get(rows.id(row));
             const time = new Date(message.timestamp * 1000);
-            const full_datetime = timerender.get_full_datetime(time);
+            instance.setContent(timerender.get_full_datetime(time));
-            instance.setContent(full_datetime.date + "<br/>" + full_datetime.time);
         },
         onHidden(instance) {
             instance.destroy();