draw page action icon using canvas

kassens · Feb 16, 2012 · d5bf9a7 · d5bf9a7
1 parent 0dca562
commit d5bf9a7
Show file tree

Hide file tree

Showing 29 changed files with 100 additions and 67 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1 @@
 extension.zip
-images/backbone.png
diff --git a/Makefile b/Makefile
@@ -1,14 +1,9 @@
-ICOS := $(wildcard images/*.ico)
-
 JS_FILES := $(wildcard *.js)
 HTML_FILES := $(wildcard *.html)
-PNG_FILES := $(wildcard images/*.png) $(patsubst %.ico, %.png, $(ICOS))
+IMAGES := images/logo16.png images/logo48.png images/logo128.png
 
 all: extension.zip
 
-%.png: %.ico
-	convert $< $@
-
-extension.zip: manifest.json LICENSE ${JS_FILES} ${HTML_FILES} ${PNG_FILES}
+extension.zip: manifest.json LICENSE ${JS_FILES} ${HTML_FILES} ${IMAGES}
 	rm -f $@
 	zip $@ $^
diff --git a/global.js b/global.js
@@ -13,16 +13,63 @@ chrome.extension.onRequest.addListener(function(frameworks, sender){
 	}).join('\n');
 	chrome.pageAction.setTitle({tabId: tabId, title: title});
 
-	var icon;
-	for (var i = 0; i < frameworks.length; i++) {
-		icon = frameworks[i].icon;
-		if (icon) break;
-	}
-	icon = 'images/' + (icon || 'unknown.png');
-	chrome.pageAction.setIcon({tabId: tabId, path: icon});
+	chrome.pageAction.setIcon({
+		tabId: tabId,
+		imageData: createIcon(frameworks[0].abbr)
+	});
 
 	var popup = 'popup.html#' + encodeURIComponent(JSON.stringify(frameworks))
 	chrome.pageAction.setPopup({tabId: tabId, popup: popup})
 
 	chrome.pageAction.show(tabId);
 });
+
+function createIcon(text) {
+  var ctx = document.createElement('canvas').getContext('2d');
+
+  var w = 19;
+  var h = 19;
+  var rad = 3; // border radius
+  var lw = 1 // line width
+  var hlw = lw/2; // half line width
+
+  var t = hlw + 1;
+  var r = w - hlw;
+  var b = h - hlw - 1;
+  var l = hlw;
+
+  // box path
+  ctx.beginPath();
+  ctx.moveTo(l, (t + b) / 2);
+  ctx.arcTo(l, t, r, t, rad);
+  ctx.arcTo(r, t, r, b, rad);
+  ctx.arcTo(r, b, l, b, rad);
+  ctx.arcTo(l, b, l, t, rad);
+  ctx.closePath();
+
+  // box background
+  var grad = ctx.createLinearGradient(0, t, 0, b);
+  grad.addColorStop(0, '#6ee');
+  grad.addColorStop(0.1, '#5BC0DE');
+  grad.addColorStop(1, '#2F96B4');
+  ctx.fillStyle = grad;
+  ctx.fill();
+
+  // box border
+  ctx.lineWidth = lw;
+  ctx.strokeStyle = '#2F96B4';
+  ctx.stroke();
+
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+
+  // text shadow
+  ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
+  ctx.fillText(text, w/2, h/2 - 1, w - 2);
+
+  // text
+  ctx.fillStyle = '#fff';
+  ctx.fillText(text, w/2, h/2, w - 2);
+
+  return ctx.getImageData(0, 0, w, h);
+}
diff --git a/images/backbone.ico b/images/backbone.ico
diff --git a/images/clientcide-libraries.png b/images/clientcide-libraries.png
diff --git a/images/crafty.png b/images/crafty.png
diff --git a/images/dhtmlx.png b/images/dhtmlx.png
diff --git a/images/dojo.png b/images/dojo.png
diff --git a/images/ext-js.png b/images/ext-js.png
diff --git a/images/glow.png b/images/glow.png
diff --git a/images/javascriptmvc.png b/images/javascriptmvc.png
diff --git a/images/jquery-ui.png b/images/jquery-ui.png
diff --git a/images/jquery.png b/images/jquery.png
diff --git a/images/midori.png b/images/midori.png
diff --git a/images/mochikit.png b/images/mochikit.png
diff --git a/images/mootools.png b/images/mootools.png
diff --git a/images/processing-js.png b/images/processing-js.png
diff --git a/images/prototype.png b/images/prototype.png
diff --git a/images/qooxdoo.png b/images/qooxdoo.png
diff --git a/images/raphael.png b/images/raphael.png
diff --git a/images/rico.png b/images/rico.png
diff --git a/images/rightjs.png b/images/rightjs.png
diff --git a/images/sammy.png b/images/sammy.png
diff --git a/images/scriptaculous.png b/images/scriptaculous.png
diff --git a/images/unknown.png b/images/unknown.png
diff --git a/images/yui.png b/images/yui.png
diff --git a/images/zk.png b/images/zk.png
diff --git a/inject.js b/inject.js
@@ -10,57 +10,54 @@
 	}
 
 	var frameworks = {
-		'ActiveJS':             {version: ['ActiveSupport']                                                        },
-		'Backbone.js':          {version: ['Backbone', 'VERSION'],                icon: 'backbone.png'             },
-		'Base2':                {version: ['base2', 'version']                                                     },
-		'Clientcide Libraries': {version: ['Clientcide', 'version'],              icon: 'clientcide-libraries.png' },
-		'Crafty':               {version: ['Crafty', 'init'],                     icon: 'crafty.png'               },
-		'd3.js':                {version: ['d3', 'version']                                                        },
-		'DHTMLX':               {version: ['dhtmlx'],                             icon: 'dhtmlx.png'               },
-		'Dojo': {
-			version: function() {
-				return (window.dojo && dojo.version && dojo.version.toString) ? dojo.version.toString() : false;
-			},
-			icon: 'dojo.png'
-		},
-		'Ember':                {version: ['Ember', 'VERSION']                                                     },
-		'Ext JS':               {version: ['Ext', 'version'],                     icon: 'ext-js.png'               },
-		'Glow':                 {version: ['glow', 'VERSION'],                    icon: 'glow.png'                 },
-		'JavaScriptMVC':        {version: ['steal', 'fn'],                        icon: 'javascriptmvc.png'        },
-		'jQuery':               {version: ['jQuery', 'fn', 'jquery'],             icon: 'jquery.png'               },
-		'jQuery UI':            {version: ['$', 'ui', 'version'],                 icon: 'jquery-ui.png'            },
-		'Midori':               {version: ['midori', 'domReady'],                 icon: 'midori.png'               },
-		'MochiKit':             {version: ['MochiKit', 'MochiKit', 'VERSION'],    icon: 'mochikit.png'             },
-		'MooTools A.R.T.':      {version: ['ART', 'version']                                                       },
-		'MooTools Core':        {version: ['MooTools', 'version'],                icon: 'mootools.png'             },
-		'MooTools More':        {version: ['MooTools', 'More', 'version'],        icon: 'mootools.png'             },
-		'Processing.js':        {version: ['Processing', 'version'],              icon: 'processing-js.png'        },
-		'Prototype':            {version: ['Prototype', 'Version'],               icon: 'prototype.png'            },
-		'Qooxdoo':              {version: ['qx', '$$libraries', 'qx', 'version'], icon: 'qooxdoo.png'              },
-		'Raphaël':              {version: ['Raphael', 'version'],                 icon: 'raphael.png'              },
-		'Rico':                 {version: ['Rico', 'Version'],                    icon: 'rico.png'                 },
-		'RightJS':              {version: ['RightJS', 'version'],                 icon: 'rightjs.png'              },
-		'Sammy.js':             {version: ['Sammy', 'VERSION'],                   icon: 'sammy.png'                },
-		'Script.aculo.us':      {version: ['Scriptaculous', 'Version'],           icon: 'scriptaculous.png'        },
-		'Scripty2':             {version: ['S2', 'Version']                                                        },
-		'Snack':                {version: ['snack', 'v']                                                           },
-		'Spine':                {version: ['Spine', 'version']                                                     },
-		'SproutCore':           {version: ['SC', 'isReady']                                                        },
-		'Spry':                 {version: ['Spry', '$']                                                            },
-		'Underscore.js':        {version: ['_', 'VERSION'],                                                        },
-		'YUI 2':                {version: ['YAHOO', 'VERSION'],                   icon: 'yui.png'                  },
-		'YUI 3':                {version: ['YUI', 'version'],                     icon: 'yui.png'                  },
-		'Zepto':                {version: ['Zepto']                                                                },
-		'ZK':                   {version: ['zk', 'version'],                      icon: 'zk.png'                   }
+		'ActiveJS':             { abbr: 'AJS',  version: ['ActiveSupport']                      },
+		'Backbone.js':          { abbr: 'BB',   version: ['Backbone', 'VERSION'],               },
+		'Base2':                { abbr: 'Base', version: ['base2', 'version']                   },
+		'Clientcide Libraries': { abbr: 'Moo',  version: ['Clientcide', 'version'],             },
+		'Crafty':               { abbr: 'Crf',  version: ['Crafty', 'init'],                    },
+		'D3':                   { abbr: 'D3',   version: ['d3', 'version']                      },
+		'DHTMLX':               { abbr: 'DHT',  version: ['dhtmlx'],                            },
+		'Dojo':                 { abbr: 'Dojo', version: function() { return dojo.version.toString(); } },
+		'Ember':                { abbr: 'Emb',  version: ['Ember', 'VERSION']                   },
+		'Ext JS':               { abbr: 'Ext',  version: ['Ext', 'version'],                    },
+		'Glow':                 { abbr: 'Glw',  version: ['glow', 'VERSION'],                   },
+		'JavaScriptMVC':        { abbr: 'MVC',  version: ['steal', 'fn'],                       },
+		'jQuery':               { abbr: 'jQ',   version: ['jQuery', 'fn', 'jquery'],            },
+		'jQuery UI':            { abbr: 'jQUI', version: ['$', 'ui', 'version'],                },
+		'Midori':               { abbr: 'Mid',  version: ['midori', 'domReady'],                },
+		'MochiKit':             { abbr: 'MK',   version: ['MochiKit', 'MochiKit', 'VERSION'],   },
+		'MooTools A.R.T.':      { abbr: 'Moo',  version: ['ART', 'version']                     },
+		'MooTools Core':        { abbr: 'Moo',  version: ['MooTools', 'version'],               },
+		'MooTools More':        { abbr: 'Moo',  version: ['MooTools', 'More', 'version'],       },
+		'Processing.js':        { abbr: 'Prc',  version: ['Processing', 'version'],             },
+		'Prototype':            { abbr: 'Pro',  version: ['Prototype', 'Version'],              },
+		'Qooxdoo':              { abbr: 'Qxd',  version: ['qx', '$$libraries', 'qx', 'version'] },
+		'Raphaël':              { abbr: 'Rël',  version: ['Raphael', 'version'],                },
+		'Rico':                 { abbr: 'Ric',  version: ['Rico', 'Version'],                   },
+		'RightJS':              { abbr: 'Rig',  version: ['RightJS', 'version'],                },
+		'Sammy.js':             { abbr: 'Sam',  version: ['Sammy', 'VERSION'],                  },
+		'Script.aculo.us':      { abbr: 'Scr',  version: ['Scriptaculous', 'Version'],          },
+		'Scripty2':             { abbr: 'Sc2',  version: ['S2', 'Version']                      },
+		'Snack':                { abbr: 'Snc',  version: ['snack', 'v']                         },
+		'Spine':                { abbr: 'Spi',  version: ['Spine', 'version']                   },
+		'SproutCore':           { abbr: 'SpC',  version: ['SC', 'isReady']                      },
+		'Spry':                 { abbr: 'Spr',  version: ['Spry', '$']                          },
+		'Underscore.js':        { abbr: '_',    version: ['_', 'VERSION'],                      },
+		'YUI 2':                { abbr: 'YUI',  version: ['YAHOO', 'VERSION'],                  },
+		'YUI 3':                { abbr: 'YUI',  version: ['YUI', 'version'],                    },
+		'Zepto':                { abbr: 'Zept', version: ['Zepto']                              },
+		'ZK':                   { abbr: 'ZK',   version: ['zk', 'version'],                     }
 	};
 
 	var data = [];
 	for (var name in frameworks) {
 		if (frameworks.hasOwnProperty(name)) {
 			var framework = frameworks[name];
-			var version;
+			var version = null;
 			if (typeof framework.version == 'function') {
-				version = framework.version();
+				try {
+					version = framework.version();
+				} catch (e) { }
 			} else {
 				version = window;
 				for (var i = 0; i < framework.version.length; i++) {
@@ -69,9 +66,7 @@
 			}
 			if (version) {
 				var info = '{"name":"' + name + '"';
-				if (framework.icon) {
-					info += ',"icon":"' + framework.icon + '"';
-				}
+				info += ',"abbr":"' + framework.abbr + '"';
 				if (typeof version == 'string' && version != '%build%') {
 					info += ',"version":"' + version + '"';
 				}

diff --git a/manifest.json b/manifest.json
@@ -1,6 +1,6 @@
 {
 	"name": "Frameworks",
-	"version": "1.3",
+	"version": "2.0",
 	"icons": {
 		"16": "images/logo16.png",
 		"48": "images/logo48.png",
@@ -16,8 +16,5 @@
 			"run_at": "document_end"
 		}
 	],
-	"page_action": {
-		"default_icon": "images/unknown.png",
-		"default_title": "Framework"
-	}
+	"page_action": {}
 }