Combine the actions popover with the timeinfo popover

The message timestamp is now always clickable, and the popover contains the
full long-form date and time.  This addresses one problem from usability
testing (see #470).

(imported from commit ad502dff128ad1c934fc0d3faaf5e2931c91c37e)

templates/zephyr/index.html

@@ -30,9 +30,6 @@
 <script id="template_actions_popover_content" type="text/x-handlebars-template">
 {% rawjstemplate "actions_popover_content" %}
 </script>
-<script id="template_timeinfo_popover_content" type="text/x-handlebars-template">
-{% rawjstemplate "timeinfo_popover_content" %}
-</script>
 
 {% compressed_css 'app' %}
 <link rel="stylesheet" href="/static/third/spectrum/spectrum.css" />

zephyr/jstemplates/actions_popover_content.html

@@ -1,14 +1,28 @@
 {{! Contents of the "message actions" popup }}
 <ul class="nav nav-list actions_popover">
+  <div class="popover_info">
+    <li>{{message.full_date_str}}</li>
+    <li>{{message.full_time_str}}</li>
+    <hr />
+  </div>
+
+  {{#if narrowed}}
   <li>
-    <a onclick="respond_to_message();">
-      <i class="icon-share-alt"></i> Reply to this {{#if is_stream}}stream{{else}}private message{{/if}}
+    <a onclick="ui.hide_actions_popover(); narrow.target({{message.id}}); narrow.activate([]);">
+      <i class="icon-time"></i> Narrow to messages around this time
     </a>
   </li>
-  {{#unless is_private}}
+  {{/if}}
+  <li>
+    <a onclick="respond_to_message();">
+      <i class="icon-share-alt"></i>
+      Reply to this {{#if message.is_stream}}stream{{else}}private message{{/if}}
+    </a>
+  </li>
+  {{#unless message.is_private}}
   <li>
     <a onclick="respond_to_message('personal');">
-      <i class="icon-user"></i> Reply to {{sender_full_name}} only
+      <i class="icon-user"></i> Reply to {{message.sender_full_name}} only
     </a>
   </li>
   {{/unless}}

zephyr/jstemplates/actions_popover_title.html

@@ -1,3 +1,8 @@
 {{! Title of the "message actions" popup }}
-<span title="{{sender_full_name}}"><b>{{sender_full_name}}</b></span><br />
-<span class='my_email' title="{{sender_email}}">{{sender_email}}</span>
+<span title="{{message.sender_full_name}}">
+  <b>{{message.sender_full_name}}</b>
+</span><br />
+
+<span class='my_email' title="{{message.sender_email}}">
+  {{message.sender_email}}
+</span>

zephyr/jstemplates/message.html

@@ -60,8 +60,7 @@
             <span class="sender_email invisible">{{sender_email}}</span>
         </span>
     {{/include_sender}}
-        <span class="message_time actions_hover"
-              title="{{full_date_str}}">{{{timestr}}}</span>
+        <span class="message_time actions_hover">{{{timestr}}}</span>
         <div class="message_content">{{{content}}}</div>
     </td>
 </tr>

zephyr/jstemplates/timeinfo_popover_content.html

@@ -1,8 +0,0 @@
-{{! Client-side Mustache template for the contents of the little "timeinfo" popup that shows up when you click on a time }}
-<ul class="nav nav-list actions_popover">
-  <li>
-    <a onclick="ui.hide_actions_popover(); narrow.target({{id}}); narrow.activate([]);">
-      <i class="icon-time"></i> Narrow to messages around this time
-    </a>
-  </li>
-</ul>

zephyr/static/js/setup.js

@@ -13,7 +13,7 @@ $(function () {
     // Compile Handlebars templates.
     $.each(['message', 'subscription',
             'actions_popover_title', 'actions_popover_content',
-            'timeinfo_popover_content', 'invite_subscription', 'new_stream_users'],
+            'invite_subscription', 'new_stream_users'],
         function (index, name) {
             templates[name] = Handlebars.compile($('#template_'+name).html());
         }

zephyr/static/js/ui.js

@@ -387,24 +387,16 @@ function show_actions_popover(element, id) {
     select_message_by_id(id);
     var elt = $(element);
     if (elt.data('popover') === undefined) {
-        var content, message = message_dict[id];
-        if (elt.hasClass("message_sender") || elt.hasClass("profile_picture")) {
-            elt.popover({placement: "bottom",
-                         title: templates.actions_popover_title(message),
-                         content: templates.actions_popover_content(message),
+        var args = {
+            message:  message_dict[id],
+            narrowed: narrow.active()
+        };
+        elt.popover({
+            placement: "bottom",
+            title:     templates.actions_popover_title(args),
+            content:   templates.actions_popover_content(args),
             trigger:   "manual"
         });
-        } else if (elt.hasClass("message_time")) {
-            if (!narrow.active()) {
-                // Only show the time-travel popover when narrowed
-                return;
-            }
-            // Bootstrap takes the title from the 'title' attribute of elt
-            elt.popover({placement: "bottom",
-                         content: templates.timeinfo_popover_content(message),
-                         trigger: "manual"
-                        });
-        }
         elt.popover("show");
         current_actions_popover_elem = elt;
     }

zephyr/static/js/zephyr.js

@@ -272,9 +272,15 @@ function add_display_time(message, prev) {
     } else {
         message.timestr = time.toString("HH:mm");
     }
-    // Rather than using time.toLocaleString(), which varies by
-    // browser, just do our own hardcoded formatting.
-    message.full_date_str = time.toDateString() + " " + time.toTimeString();
+
+    // Convert to number of hours ahead/behind UTC.
+    // The sign of getTimezoneOffset() is reversed wrt
+    // the conventional meaning of UTC+n / UTC-n
+    var tz_offset = -time.getTimezoneOffset() / 60;
+
+    message.full_date_str = time.toLocaleDateString();
+    message.full_time_str = time.toLocaleTimeString() +
+        ' (UTC' + ((tz_offset < 0) ? '' : '+') + tz_offset + ')';
 }
 
 function add_to_table(messages, table_name, filter_function, where, allow_collapse) {

zephyr/static/styles/zephyr.css

@@ -648,6 +648,15 @@ table.floating_recipient {
     text-overflow: ellipsis;
 }
 
+.popover_info {
+    text-align: center;
+}
+
+.popover hr {
+    margin-top:    5px;
+    margin-bottom: 5px;
+}
+
 .hotkeys_table {
     float: left;
     width: 250px;