Added high resolution icons for Retina displays

chrome/ext/background.js

Index: chrome/ext/background.js
===================================================================
--- a/chrome/ext/background.js
+++ b/chrome/ext/background.js
@@ -206,7 +206,14 @@
   BrowserAction.prototype = {
     setIcon: function(path)
     {
-      chrome.browserAction.setIcon({tabId: this._tabId, path: path});
+      var paths = {};
+      for (var i = 1; i <= 2; i++)
+      {
+        var size = i * 19;
+        paths[size] = path.replace(/((?:.*\/)*.+?\b)/, '$1-' + size);

[Wladimir Palant, 2014/04/02 16:37:24]

This is rather non-obvious behavior. It should be made obvious, e.g. by
specifying "abp-$size.png" as file path. It will also allow you to use a simple
replacement rather than this complex regexp. I'm aware that the icon has to be
called abp-16@2x.png in Safari then but IMHO that's fine.

[Sebastian Noack, 2014/04/02 17:02:08]

But then we would need something like |path.replace(/-?$size/, "")| for Safari
to remove the size placeholder and its leading dash.

Note that the icon on Safari is now just called abp[@2x].png (without size
infix). So I was able remove the code switching the size of the icon, dependent
on the browser. And I also found it non-obvious to have images which are twice
as large as their size infix suggests.

[Wladimir Palant, 2014/04/03 05:43:40]

No, path.replace("$size", "16") should do, the icon should still be called
abp-16.png. As I said, abp-16@2x.png isn't optimal but the "@2x" part still
makes it somewhat obvious.

[Sebastian Noack, 2014/04/03 11:42:26]

I somewhat agree. Here you go.

+      }
+
+      chrome.browserAction.setIcon({tabId: this._tabId, path: paths});
     },
     setBadge: function(badge)
     {