Set favicon from our generated images rather than using Notificon

We've been noticing a long delay between switching to a window with unread
messages and the time that those messages actually appear.  This got much worse
around the time we added Notificon.

Our hypothesis (supported by some testing) is that the work done by Notificon
in creating a <canvas>, drawing into it, serializing it to PNG, etc. is using
up some quota of background operations that would be better spent rendering
messages.

Switching to precomputed images should mitigate this problem.

Resolves #896.

May resolve #882 to our satisfaction.

(imported from commit a2d98a163486bdd35fdfb5351f96c5529ba5c7e9)

zephyr/static/js/notifications.js

@@ -20,6 +20,7 @@ function update_title_count(new_count) {
     // Update window title and favicon to reflect new_message_count.
     //
     // If new_count is given, set new_message_count to that first.
+    var n;
 
     if (new_count !== undefined) {
         if (new_message_count === new_count)
@@ -29,7 +30,23 @@ function update_title_count(new_count) {
 
     document.title = (new_message_count ? ("(" + new_message_count + ") ") : "")
         + domain + " - Humbug";
-    Notificon(new_message_count || "");
+
+    // IE doesn't support PNG favicons, *shrug*
+    if (! $.browser.msie) {
+        // Indicate the message count in the favicon
+        if (new_message_count) {
+            // Make sure we're working with a number, as a defensive programming
+            // measure.  And we don't have images above 99, so display those as
+            // 'infinite'.
+            n = (+new_message_count);
+            if (n > 99)
+                n = 'infinite';
+
+            util.set_favicon('/static/images/favicon/favicon-'+n+'.png');
+        } else {
+            util.set_favicon('/static/favicon.ico?v=2');
+        }
+    }
 }
 
 exports.initialize = function () {

zephyr/static/js/util.js

@@ -7,11 +7,22 @@ exports.random_int = function random_int(min, max) {
     return Math.floor(Math.random() * (max - min + 1)) + min;
 };
 
+var favicon_selector = 'link[rel="shortcut icon"]';
+
 // We need to reset the favicon after changing the
 // window.location.hash or Firefox will drop the favicon.  See
 // https://bugzilla.mozilla.org/show_bug.cgi?id=519028
 exports.reset_favicon = function () {
-    $('link[rel="shortcut icon"]').detach().appendTo('head');
+    $(favicon_selector).detach().appendTo('head');
+};
+
+exports.set_favicon = function (url) {
+    // I'm not sure whether setting the href attr on the existing
+    // node would be sufficient.  Notificon recreates the node.
+    $(favicon_selector).remove();
+    $('head').append($('<link>')
+        .attr('rel',  'shortcut icon')
+        .attr('href', url));
 };
 
 exports.make_loading_indicator = function (container, text) {