You are here:
Woah, today I decided to spend the Sunday with some coding fun, and I ended up using the whole day, breakfast to dinner, and even after. It turns out that none of the alternatives available on Firefox to create thumbnail previews, or speed dials, is satisfying enough for my tastes. On the contrary, the new TopSites feature in Safari 4 is quite appealing. So I decided to recreate it.
The problem is, I have never done any Firefox extension development before. So lots of learning to do. Quite fun, actually.
The most difficult part is to display thumbnails in a perspective fashion that creates the illusion of a curved wall. I initially started with the idea of using css transforms but the problem is that they only support affine transforms, so there is no way to create a perspective distortion like the one in Safari.
Then I considered using the unbelievably amazing reflex.js by Christian Effenberger, but I spent too much time to decouple its dependencies on actual images (to have it work un pure canvas objects) and I gave up.
So I decided to go the Canvas way from the ground up. Thanks to canvas.drawWindow to load remote content into a canvas, and some creative slicing, here are some preliminary results. My first Firefox plugin generating a thumbnail with perspective distortion is on the left. Safari is on the right. Feel the power!
The code is just too rough to be shown just now, but it will be released soon. Not much left before having a fully functional plugin.
At the end of the day:
- I learned how to create Firefox extensions
- I studied XUL (a bit)
- I refreshed my memory on CSS3 transforms and Canvas
- I spent way to much time re-learning affine transforms and perspective distortion effects
- I fought a number of bugs, most of them due to my silly mistakes.
Good day. A bit of a shame it was just lovely sunshine outside.
Tags
7 Comments to this page
Puleeease complete this, been looking forward to a real substitute for the top sites. I really don't like Safari, but I NEED top sites. Have fun!
Hey any news on that?
Hello Riccardo,
one option should be saving the canva data as an image file, using HTML5 data: protocol, then applying the 2d transformation/effect on the preview-image, and sure keeping this content in cache and only updating the preview image file when it's required, this is some how Safari TopSites is working.
http://www.nihilogic.dk/labs/canvas2image/
Best,
Excelente trabajo! genial idea!!! por favor espero q no lo dejes, seria realmente genial tener top sites en firefox como en safari!!!
=)
podrias mandar un mail avisando cuando este disponible la primer version??
desde argentina gracias por tomarte este trabajo!
--
Excellent work!!! great idea!!! please don't leave it, it would be great to have top sites in firefox!!
could you send a mail when the first final release is done??
from argentina thanks for your effort!!
You would be a gangster if you make top sites for Mozilla..
Please be my own personal hero and finish this up. ;-)
Hi all, thanks for your interest in this thing.
I think what you really want is FoxTab ... it's a tremendous Firefox add-on that does pretty much everything I wanted to implement: https://addons.mozilla.org/en-US/firefox/addon/8879
Given how advanced FoxTab is, it's a bit unlikely I'll go on developing my own solution. Let me know what you think about it.