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

Sur une initiative de la Mozilla Foundation, de Mozilla Europe et de l'Universidad Rey Juan Carlos de Madrid (via LibreSoft), est né le Madrid Mozilla Technologies Course. C'est un cours de 3 mois, principalement en ligne, sur les technologies Mozilla avec une semaine de cours intensive à Madrid même. Le cours terminera mi-octobre avec le rendu d'un projet suivi, si réussite, de l'obtention d'un diplôme par l'université.

Comme vous l'avez peut-être déjà deviné, j'ai eu la chance de voir ma candidature acceptée et je suis d'ailleurs actuellement à Madrid, avec une vingtaine de camarades, en train d'assister aux cours de Paul et de Vivien.

En plus du suivi évident des cours, les élèves doivent rédiger en anglais au moins un article par semaine, ce que je vais donc faire directement sur ce site Web dans les semaines à venir. Le sujet des articles tournera autour de l'écosystème Mozilla, comprenant aussi bien des informations sur mon projet, sur Mozilla vu de l'intérieur ou sur la programmation XUL.