Animate "Private messages" when new private messages come in.

Set the background behind "Private messages" to green whenever
a user's unread count goes up for private messages.  Remove
the background after 3s.  Advanced browsers will fade the
green in and out over 6s (3s up, 3s down).

(imported from commit 80ed9661d9eec1d697f3259854037d7e145615cd)

zephyr/static/js/stream_list.js

@@ -2,7 +2,9 @@ var stream_list = (function () {
 
 var exports = {};
 
+var last_private_message_count = 0;
 var previous_sort_order;
+
 exports.sort_narrow_list = function () {
     var streams = subs.subscribed_streams();
     if (streams.length === 0) {
@@ -196,6 +198,27 @@ exports.update_streams_sidebar = function () {
     }
 };
 
+function do_new_private_messages_animation() {
+    var li = get_filter_li("global", "private-message");
+    li.addClass("new_private_messages");
+    function mid_animation() {
+        li.removeClass("new_private_messages");
+        li.addClass("new_private_messages_fadeout");
+    }
+    function end_animation() {
+        li.removeClass("new_private_messages_fadeout");
+    }
+    setTimeout(mid_animation, 3000);
+    setTimeout(end_animation, 6000);
+}
+
+function animate_private_message_changes(new_private_message_count) {
+    if (new_private_message_count > last_private_message_count) {
+        do_new_private_messages_animation();
+    }
+    last_private_message_count = new_private_message_count;
+}
+
 exports.update_dom_with_unread_counts = function (counts) {
     // counts is just a data object that gets calculated elsewhere
     // Our job is to update some DOM elements.
@@ -215,6 +238,12 @@ exports.update_dom_with_unread_counts = function (counts) {
     // integer counts
     exports.set_count("global", "private-message", counts.private_message_count);
     exports.set_count("global", "home", counts.home_unread_messages);
+
+    // For now increases in private messages get special treatment in terms of 
+    // animating the left pane.  It is unlikely that we will generalize this,
+    // since Starred messages are user-initiated and Home messages would be too
+    // spammy.
+    animate_private_message_changes(counts.private_message_count);
 };
 
 $(function () {

zephyr/static/styles/zephyr.css

@@ -321,10 +321,18 @@ td.pointer {
     background-color: #FAFFC7;
 }
 
-.selected_message.private-message .message_data, .selected_message .messagebox.private-message {
+.selected_message.private-message .message_data, .selected_message .messagebox.private-message,
+.new_private_messages {
     background-color: #e1ffb2;
 }
 
+.new_private_messages, .new_private_messages_fadeout {
+    -webkit-transition: all 3s ease-in-out;
+    -moz-transition: all 3s ease-in-out;
+    -o-transition: all 3s ease-in-out;
+    transition: all 3s ease-in-out;
+}
+
 .selected_message .messagebox.mention {
     background-color: #FFE0DC;
 }