Annotate favicon for message count

assets/javascripts/mailcatcher.js.coffee

@@ -1,6 +1,7 @@
 #= require modernizr
 #= require jquery
 #= require date
+#= require favcount
 #= require flexie
 #= require keymaster
 #= require xslt
@@ -68,6 +69,8 @@ class MailCatcher
           error: ->
             alert "Error while quitting."
 
+    @favcount = new Favcount($("""link[rel="icon"]""").attr("href"))
+
     key "up", =>
       if @selectedMessage()
         @loadMessage $("#messages tr.selected").prev().data("message-id")
@@ -143,8 +146,7 @@ class MailCatcher
     $("#messages tr").length - 1
 
   updateMessagesCount: ->
-    title = $("head title")
-    title.text(title.text().replace(/^\(\d*\)/, "(#{@messagesCount()})"))
+    @favcount.set(@messagesCount())
 
   tabs: ->
     $("#message ul").children(".tab")

vendor/assets/javascripts/favcount.js

@@ -0,0 +1,102 @@
+/*
+ * favcount.js v1.5.0
+ * http://chrishunt.co/favcount
+ * Dynamically updates the favicon with a number.
+ *
+ * Copyright 2013, Chris Hunt
+ * Released under the MIT license
+ */
+
+(function(){
+  function Favcount(icon) {
+    this.icon = icon;
+    this.opacity = 0.4;
+    this.canvas = document.createElement('canvas');
+    this.font = "Helvetica, Arial, sans-serif";
+  }
+
+  Favcount.prototype.set = function(count) {
+    var self = this,
+        img  = document.createElement('img');
+
+    if (self.canvas.getContext) {
+      img.crossOrigin = "anonymous";
+
+      img.onload = function() {
+        drawCanvas(self.canvas, self.opacity, self.font, img, normalize(count));
+      };
+
+      img.src = this.icon;
+    }
+  };
+
+  function normalize(count) {
+    count = Math.round(count);
+
+    if (isNaN(count) || count < 1) {
+      return '';
+    } else if (count < 10) {
+      return ' ' + count;
+    } else if (count > 99) {
+      return '99';
+    } else {
+      return count;
+    }
+  }
+
+  function drawCanvas(canvas, opacity, font, img, count) {
+    var head = document.getElementsByTagName('head')[0],
+        favicon = document.createElement('link'),
+        multiplier, fontSize, context, xOffset, yOffset, border, shadow;
+
+    favicon.rel = 'icon';
+
+    // Scale canvas elements based on favicon size
+    multiplier = img.width / 16;
+    fontSize   = multiplier * 11;
+    xOffset    = multiplier;
+    yOffset    = multiplier * 11;
+    border     = multiplier;
+    shadow     = multiplier * 2;
+
+    canvas.height = canvas.width = img.width;
+    context = canvas.getContext('2d');
+    context.font = 'bold ' + fontSize + 'px ' + font;
+
+    // Draw faded favicon background
+    if (count) { context.globalAlpha = opacity; }
+    context.drawImage(img, 0, 0);
+    context.globalAlpha = 1.0;
+
+    // Draw white drop shadow
+    context.shadowColor = '#FFF';
+    context.shadowBlur = shadow;
+    context.shadowOffsetX = 0;
+    context.shadowOffsetY = 0;
+
+    // Draw white border
+    context.fillStyle = '#FFF';
+    context.fillText(count, xOffset, yOffset);
+    context.fillText(count, xOffset + border, yOffset);
+    context.fillText(count, xOffset, yOffset + border);
+    context.fillText(count, xOffset + border, yOffset + border);
+
+    // Draw black count
+    context.fillStyle = '#000';
+    context.fillText(count,
+      xOffset + (border / 2.0),
+      yOffset + (border / 2.0)
+    );
+
+    // Replace favicon with new favicon
+    favicon.href = canvas.toDataURL('image/png');
+    head.removeChild(document.querySelector('link[rel=icon]'));
+    head.appendChild(favicon);
+  }
+
+  this.Favcount = Favcount;
+}).call(this);
+
+(function(){
+  Favcount.VERSION = '1.5.0';
+}).call(this);

views/index.haml

@@ -1,8 +1,8 @@
 !!!
 %html.mailcatcher
   %head
-    %title (0) MailCatcher
-    %link{:href => "/favicon.ico", :rel => "shortcut icon"}
+    %title MailCatcher
+    %link{:href => "/favicon.ico", :rel => "icon"}
     = stylesheet_tag "mailcatcher"
     = javascript_tag "mailcatcher"
   %body