Firefox 4 is rapidly approaching release and there are numerous interface enhancements already included in the current nightlies. One is the addition of AppTabs; sticky tabs that remain at the left of your tab bar that are meant to serve as a place to keep your web “applications” like GMail or Twitter.<\/p>\n
There’s still a lot that hasn’t yet determined about AppTabs yet, like how navigation is handled, when a link will open in the AppTab and when in a new tab and so on, but that it will only display the favicons with no title is reasonably certain. Since all your user will see of your website is a favicon it’s important to keep the user up-to-date using only this limited space, for example by showing the number of unread mails as part of the favicon.<\/p>\n
This may seem like a difficult task, but thanks to Canvas it’s actually very simple. Assuming you already have a function somewhere in your code that gets notified when the number of new events changes, all you have to do is add code to that function that will create a Canvas, draw the number to it, remove the old favicon, create a new one and finally set it to the url you get from Canvas’ toDataURL.<\/p>\n
One by one:<\/p>\n
assuming you have a function onNewEvent(newEvents){} that is called with the number of events<\/p>\n
<\/code><\/p>\n This will create a Canvas with the content we want (you’ll probably want to draw your usual favicon in the background as well and make the text a bit prettier, but this works for now). Now we need to assign it<\/p>\n For some reason setting the href value on an existing link[rel=”icon”] element doesn’t have any effect, so we have to create a new one to replace the existing one. First, let’s remove the old one(s):<\/p>\n <\/code><\/p>\n And finally we create a new one and attach it to the head.<\/p>\n <\/code><\/p>\n The whole function now looks like this:<\/p>\n <\/code><\/p>\n That’s all there is to it. No big framework, just a good dozen lines of code and you’re set.<\/p>\n Here’s a bookmarklet that will let you try it on GMail now. It’s Firefox-only since it hooks into GMail using the Gecko-only __defineSetter__ method on the title, but that’s only for the wrapper. The actual code works on any browser as long as it supports Canvas. Just drag this link<\/a> to your bookmark toolbar, then click it while you’re using GMail (it will persist for your current session, but not if you refresh, restart and so on)<\/p>\n","protected":false},"excerpt":{"rendered":" Firefox 4 is rapidly approaching release and there are numerous interface enhancements already included in the current nightlies. One is the addition of AppTabs; sticky tabs that remain at the left of your tab bar that are meant to serve as a place to keep your web “applications” like GMail or Twitter. There’s still a … Continue reading Firefox 4 AppTabs : Preparing with dynamic favicons<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/posts\/221"}],"collection":[{"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/comments?post=221"}],"version-history":[{"count":6,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/posts\/221\/revisions"}],"predecessor-version":[{"id":227,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/posts\/221\/revisions\/227"}],"wp:attachment":[{"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/media?parent=221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/categories?post=221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/tags?post=221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<\/p>\nfunction onNewEvent(newEvents){\r\n \/* Create a canvas to draw the icon *\/\r\n var c=document.createElement(\"canvas\"); \r\n c.height=c.width=16; \r\n var cx=c.getContext(\"2d\"); \r\n\r\n \/* Formatting *\/\r\n cx.font=\"18px bold Calibri\";\r\n cx.fillStyle=\"#000\";\r\n\r\n \/* Draw nothing if number is 0, \"9+\" for 10\r\n or more, otherwise the number *\/\r\n if(newEvents)\r\n cx.fillText(newEvents>9?\"9+\":newEvents,0,16,16); \r\n}<\/pre>\n<\/p>\n var oldicons=document.querySelectorAll(\r\n 'link[rel=\"icon\"], link[rel=\"shortcut icon\"]'); \r\n for(var i=0;i<oldicons.length;i++)\r\n oldicons[i].parentNode.removeChild(oldicons[i]);<\/pre>\n
<\/p>\n var newicon=document.createElement(\"link\"); \r\n newicon.setAttribute(\"rel\",\"icon\"); \r\n newicon.setAttribute(\"href\",c.toDataURL()); \r\n document.querySelector(\"head\").appendChild(newicon);<\/pre>\n
<\/p>\nfunction onNewEvent(newEvents){\r\n \/* Create a canvas to draw the icon *\/\r\n var c=document.createElement(\"canvas\"); \r\n c.height=c.width=16; \r\n var cx=c.getContext(\"2d\"); \r\n\r\n \/* Formatting *\/\r\n cx.font=\"18px bold Calibri\";\r\n cx.fillStyle=\"#000\";\r\n\r\n\r\n \/* Draw nothing if number is 0, \"9+\" for 10\r\n or more, otherwise the number *\/\r\n if(newEvents)\r\n cx.fillText(newEvents>9?\"9+\":newEvents,0,16,16);\r\n\r\n \/* Remove old icons and add node for new\r\n one (just setting the href won't work) *\/\r\n var oldicons=document.querySelectorAll(\r\n 'link[rel=\"icon\"], link[rel=\"shortcut icon\"]'); \r\n for(var i=0;i<oldicons.length;i++)\r\n oldicons[i].parentNode.removeChild(oldicons[i]); \r\n\t\r\n var newicon=document.createElement(\"link\"); \r\n newicon.setAttribute(\"rel\",\"icon\"); \r\n newicon.setAttribute(\"href\",c.toDataURL()); \r\n document.querySelector(\"head\").appendChild(newicon); \r\n}<\/pre>\n