Restore the time-travel functionality with Waseem's UI.

This restores the time-travel functionality and fixes Waseem's laundry
list of problems with its original UI.

(imported from commit e30e02c25af994435adb815d26284b3669c945a4)

templates/zephyr/index.html

@@ -21,6 +21,9 @@
 <script id="template_userinfo_popover_content" type="text/x-handlebars-template">
 {% rawjstemplate "userinfo_popover_content" %}
 </script>
+<script id="template_timeinfo_popover_content" type="text/x-handlebars-template">
+{% rawjstemplate "timeinfo_popover_content" %}
+</script>
 
 <script id="template_narrowbar" type="text/x-handlebars-template">
 {% rawjstemplate "narrowbar" %}

tools/jslint/check-all.js

@@ -50,7 +50,8 @@ var globals =
 
     // zephyr.js
     + ' message_array message_dict get_updates_params'
-    + ' clear_table add_to_table subject_dict same_stream_and_subject'
+    + ' clear_table add_to_table add_messages'
+    + ' subject_dict same_stream_and_subject'
     + ' keep_pointer_in_view move_pointer_at_page_top_and_bottom'
     + ' respond_to_message'
     + ' select_message select_message_by_id'

zephyr/jstemplates/message.html

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

zephyr/jstemplates/timeinfo_popover_content.html

@@ -0,0 +1,8 @@
+{{! 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 userinfo_popover">
+  <li>
+    <a onclick="ui.hide_userinfo_popover(); narrow.target({{id}}); narrow.time_travel();">
+      <i class="icon-time"></i> Jump to this time and view all messages
+    </a>
+  </li>
+</ul>

zephyr/static/js/narrow.js

@@ -59,10 +59,19 @@ function do_narrow(new_narrow, bar, time_travel, new_filter) {
     var highlighted = search.something_is_highlighted();
 
     // Empty the filtered table right before we fill it again
-    clear_table('zfilt');
     if (time_travel) {
-        add_to_table([message_dict[target_id]], 'zfilt', filter_function, 'bottom', exports.allow_collapse());
+        load_old_messages(target_id, 200, 200, function (messages) {
+            // We do this work inside the load_old_messages
+            // continuation, to shorten the window with just 1 visible message
+            clear_table('zfilt');
+            add_to_table([message_dict[target_id]], 'zfilt', filter_function, 'bottom', exports.allow_collapse());
+            // Select target_id so that we will correctly arrange messages
+            // surrounding the target message.
+            select_message_by_id(target_id, {then_scroll: false});
+            add_messages(messages, false);
+        }, true, true);
     } else {
+        clear_table('zfilt');
         add_to_table(message_array, 'zfilt', filter_function, 'bottom', exports.allow_collapse());
     }
 
@@ -78,13 +87,6 @@ function do_narrow(new_narrow, bar, time_travel, new_filter) {
     $("#currently_narrowed_to").remove();
     $("#narrowlabel").append(templates.narrowbar(bar));
 
-    if (time_travel) {
-        // Select target_id so that we will correctly arrange messages
-        // surrounding the target message.
-        select_message_by_id(target_id, {then_scroll: false});
-        load_old_messages(target_id, 200, 200, undefined, true);
-    }
-
     $("#zhome").removeClass("focused_table");
     // Indicate both which message is persistently selected and which
     // is temporarily selected

zephyr/static/js/setup.js

@@ -15,7 +15,8 @@ $(function () {
 
     // Compile Handlebars templates.
     $.each(['message', 'subscription', 'narrowbar',
-            'userinfo_popover_title', 'userinfo_popover_content'],
+            'userinfo_popover_title', 'userinfo_popover_content',
+            'timeinfo_popover_content'],
         function (index, name) {
             templates[name] = Handlebars.compile($('#template_'+name).html());
         }

zephyr/static/js/ui.js

@@ -235,12 +235,24 @@ function show_userinfo_popover(element, id) {
     select_message_by_id(id);
     var elt = $(element);
     if (elt.data('popover') === undefined) {
-        var message = message_dict[id];
-        elt.popover({placement: "bottom",
-                     title: templates.userinfo_popover_title(message),
-                     content: templates.userinfo_popover_content(message),
-                     trigger: "manual"
-                    });
+        var content, message = message_dict[id];
+        if (elt.hasClass("message_sender") || elt.hasClass("profile_picture")) {
+            elt.popover({placement: "bottom",
+                         title: templates.userinfo_popover_title(message),
+                         content: templates.userinfo_popover_content(message),
+                         trigger: "manual"
+                        });
+        } else if (elt.hasClass("message_time")) {
+            if (!narrow.active()) {
+                // Only show the time-travel popover when narrowed
+                return;
+            }
+            elt.popover({placement: "bottom",
+                         title: templates.userinfo_popover_title(message),
+                         content: templates.timeinfo_popover_content(message),
+                         trigger: "manual"
+                        });
+        }
         elt.popover("show");
         current_userinfo_popover_elem = elt;
     }

zephyr/static/js/zephyr.js

@@ -638,11 +638,15 @@ function get_updates(options) {
     });
 }
 
-function load_old_messages(anchor, num_before, num_after, cont, because_button) {
+function load_old_messages(anchor, num_before, num_after, cont, because_button,
+                           cont_will_add_messages) {
     var narrow_str;
     if (because_button === undefined) {
         because_button = false;
     }
+    if (cont_will_add_messages === undefined) {
+        cont_will_add_messages = false;
+    }
     if (because_button && narrow.active()) {
         narrow_str = JSON.stringify(narrow.data());
     } else {
@@ -667,7 +671,7 @@ function load_old_messages(anchor, num_before, num_after, cont, because_button)
 
             $('#connection-error').hide();
 
-            if (data.messages.length !== 0) {
+            if (data.messages.length !== 0 && !cont_will_add_messages) {
                 var add_to_home = !narrow.active() || !because_button;
                 add_messages(data.messages, add_to_home);
             }