From aba2192ec269e793cb994a77d8c64adf55bc8ba4 Mon Sep 17 00:00:00 2001
From: Tim Abbott <tabbott@humbughq.com>
Date: Tue, 27 Nov 2012 16:30:47 -0500
Subject: [PATCH] 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                   |  3 +++
 tools/jslint/check-all.js                     |  3 ++-
 zephyr/jstemplates/message.html               |  2 +-
 .../jstemplates/timeinfo_popover_content.html |  8 +++++++
 zephyr/static/js/narrow.js                    | 20 +++++++++-------
 zephyr/static/js/setup.js                     |  3 ++-
 zephyr/static/js/ui.js                        | 24 ++++++++++++++-----
 zephyr/static/js/zephyr.js                    |  8 +++++--
 8 files changed, 51 insertions(+), 20 deletions(-)
 create mode 100644 zephyr/jstemplates/timeinfo_popover_content.html

diff --git a/templates/zephyr/index.html b/templates/zephyr/index.html
index c14d8109ff..d3461e8ab0 100644
--- a/templates/zephyr/index.html
+++ b/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" %}
diff --git a/tools/jslint/check-all.js b/tools/jslint/check-all.js
index 3d02cf6a44..2251b8eb90 100644
--- a/tools/jslint/check-all.js
+++ b/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'
diff --git a/zephyr/jstemplates/message.html b/zephyr/jstemplates/message.html
index 24bf2991ac..4e4e26601c 100644
--- a/zephyr/jstemplates/message.html
+++ b/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>
diff --git a/zephyr/jstemplates/timeinfo_popover_content.html b/zephyr/jstemplates/timeinfo_popover_content.html
new file mode 100644
index 0000000000..18de907ded
--- /dev/null
+++ b/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>
diff --git a/zephyr/static/js/narrow.js b/zephyr/static/js/narrow.js
index 38ff077997..0529909c38 100644
--- a/zephyr/static/js/narrow.js
+++ b/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
diff --git a/zephyr/static/js/setup.js b/zephyr/static/js/setup.js
index f7eff1d42d..33a7d0f209 100644
--- a/zephyr/static/js/setup.js
+++ b/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());
         }
diff --git a/zephyr/static/js/ui.js b/zephyr/static/js/ui.js
index 052e3180b8..0976330246 100644
--- a/zephyr/static/js/ui.js
+++ b/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;
     }
diff --git a/zephyr/static/js/zephyr.js b/zephyr/static/js/zephyr.js
index 2110025e58..df7732d014 100644
--- a/zephyr/static/js/zephyr.js
+++ b/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);
             }