Systèmes d’Information, Développement Web et Mozilla

You know, when loo­king at a page on the web, our indi­ca­tion of it’s length is the size of the scroll bar in our brow­ser win­dow (if it’s small, the page is long).

Some­ti­mes, our assump­tion about the arti­cle’s length is wrong because while scrol­ling you see that most of the page is com­ments.

Tho­mas Hoo­per pro­po­sed a nice solu­tion. I deci­ded to tweak his code and adapt it to Jet­pack. The solu­tion con­sist in dis­playing what por­tion of the page is arti­cle and what is com­ments.

It’s quite dif­fi­cult to find an gene­ral algo­rithm which can work on quite all web­si­tes, so I deci­ded to focus on http://linuxfr.org, a kind of French Sla­sh­dot. It could have been Sma­shing Maga­zine too.

On LinuxFR.org, arti­cles are com­po­sed of :

• The main arti­cle
• An optio­nal second part
• Nes­ted group of com­ments

It looks like:

Like my other Jet­pack expe­ri­ments, the MagicS­croll­bar is a just a proof of con­cept which lacks of polish. The user is able to see what the page con­tains in rela­tive pro­por­tions: the arti­cle and the dif­fe­rent groups of nes­ted com­ments. Unfor­tu­na­tely, I can’t find an easy why to have access to the win­dow docu­ment in Jet­pack scripts, so I had to use a lot of tricks to get things done.

By default the MagicS­croll­bar is almost hid­den and it appears on hover like in the fol­lo­wing screen­shot. You can see the arti­cle on Linuxfr.org.

By the way, I have totally revam­ped my Jet­pack labo­ra­tory and, as always, the code is still a mess.

It was a long time since I star­ted the deve­lop­ment of my exten­sion for Fire­fox. I easily manage to create a side­bar and list all the tabs. But qui­ckly I found my first dif­fi­cul­ties…

I sear­ched how to create a thumb­nail of a web page. Well, it’s quite easy there is a func­tion for that : draw­Win­dow. But I wan­ted to creat par­tial thumb­nails, as explai­ned of Alexan­der Limi arti­cle. And playing with ratio, screen width, thumb­nail width was quite disap­poin­ting. I mana­ged to create par­tial thumb­nail, but only blur­red.

Then is deci­ded to create 2 XBL ele­ment. One for the tab con­tai­ner and ano­ther for the tabs (inclu­ding the favi­con, the title and the thumb­nail). Here star­ted the night­mare. I hacked Tab­Si­de­bar exten­sion to get ins­pi­ra­tion but it’s a long pro­cess to dive in a pro­ject with thou­sands lines of code.

So, three days ago I give up and deci­ded to test Jet­Pack, by Mozilla Labs. Jet­Pack should repre­sent the future of exten­sions. It inclu­des the jQuery fra­me­work (very handy for ani­ma­tions and events mana­ge­ment) and you don’t need to res­tart the brow­ser after ins­tal­ling jet­packs. Howe­ver it’s a young pla­te­form, there is a lot of bugs, you can­not loca­lize your strings, there is no mecha­nisms for pre­fe­ren­ces hand­ling, etc.

Any­way, I tried it and here it is :

Clearly, it lacks of polish, the code is messy and I have seen a lot of bugs. Moreo­ver it’s bro­ken with Jet­Pack 0.5pre2…

Ano­ther screen­shot, clo­ser :

I don’t com­ple­tely aban­don the clas­sic exten­sion, but I will wait to finish the Jet­Pack pro­to­type so I will be more trai­ned with JavaS­cript stuff. I think it’s all a mat­ter of lear­ning curve. Jet­Pack one is more acces­si­ble ;)

Let’s start my first post on MMTC pla­net.

As you may know, my first goal was to deve­lop an exten­sion which ena­ble us to paste an URL into the down­load mana­ger. This action should start the down­load of the file repre­sen­ted by the URL. The exten­sion was just the first part, then I plan­ned to create a bug on bug­zilla and sub­mit a patch on the Fire­fox trunk. The bug is filled (bug 506881) but as you can see it was mar­ked as RESOL­VED WONT­FIX :( I will finish my exten­sion any­way but I had to find a new pro­ject.

So I deci­ded to work on tabs.

I deci­ded to use the side­bar and remove the tra­di­tio­nal tab bar. Let’s ima­gine that you have less than X tabs (X will pro­ba­bly be cal­cu­la­ted from the size of your screen), Fire­fox will dis­play a side­bar with web­si­tes thumb­nails. Moreo­ver, the « new tab » but­ton will have a search field to create directly a tab with the search results.

Side­bar with thumb­nails accor­ding to Alexan­der Limi

Beyond a thre­shold, the tabs will look like a tree (see the exten­sion Tree­Sty­le­Tab), without the thumb­nails.

Tree-style tabs accor­ding to Alexan­der Limi

Those ideas are from Alexan­der Limi, a Mozilla employee. I encou­rage you to read his arti­cle Rein­ven­ting tabs for the brow­ser to bet­ter unders­tand the design pur­po­ses.

If I have more time, I plan to add « work spa­ces ». It’s like a box where you store a set of tabs, for later use.

Work spa­ces accor­ding to Aza Ras­kin