Rendre utilisable FireFox sous KDE
26 septembre, 2007 - 00:10 | Ulhume | Le Bureau Tutoriel

Oui, FireFox est déjà utilisable mais dieu que c'est lent, vilain et mal intégré. Alors pour ne pas noyer le bébé avec l'eau du bain, j'ai tenté de customiser un peu le monstre pour qu'il soit plus intégré au reste de KDE et plus en phase avec les performances de konqueror.

Modifiée les paramètres cachés de FireFox

Cela va beaucoup nous servir par la suite donc autant en parler tout de suite. Les options que nous allons activer sont disponible dans les paramètres internes de firefox, pas dans ses préférences. Pour y accéder il suffit de taper l'URL about:config. S'affiche alors une liste de noms/valeurs. En double cliquant sur une ligne, nous pouvons modifier cette valeur. En clickant droit, il est possible de la supprimer ou d'en créer une nouvelle.

Pour les nouvelle valeur crées, il faut choisir son type : chaîne (string), valeur booléenne (boolean) et valeur entière (integer). Ensuite il faut donne son nom, puis sa valeur.

Voilà, avec cela nous allons pouvoir jouer un peu ;-)

Performances réseau

Avouons que la vitesse de transfert est peu la base des performances d'un navigateur, avec celle du moteur de rendu. FireFox n'est pas pire qu'un autre navigateur de ce point de vue. Cependant, comme souvent, ses concepteurs ont des "stratégies" qui ne sont pas forcement heureuses.

Par exemple attendre qu'une élément composant une page soit chargée pour lancer le chargement de la suivante. En effet, il est plus optimal de lancer le chargement de plusieurs éléments en même temps pour occuper au maximum la bande passante disponible. De plus, FireFox est "IPV6 Ready", ce qui est très bien... sauf lorsque l'on a pas l'IPV6... Auquel cas, il va chercher à résoudre un nom dans un standard pour rien, perdant ainsi de précieuses secondes.

Activation du pipelining

C'est une chose étrange que le pipelining soit désactivé par défaut sur FireFox. Pour l'activer, il suffit simplement de modifier trois valeurs. Les deux premières active le pipeline en mode normal et avec les proxies. La dernière indique le nombre maximum de requête à traiter en parallèle.

network.http.pipelining=true
network.http.proxy.pipelining=true
network.http.pipelining.maxrequests=30

La dernière valeur peut être modulée selon vos goûts mais un nombre trop important ne servirait à rien.

Supprimer la résolution IPV6

Une autre modification qui peut améliorer les performances est donc de désactiver la résolution DNS pour l'IPV6 (sauf si vous avez un tel réseau ;-)

network.dns.disableIPv6 = true

Pour aller plus loin...

Enfin, comme l'indiquait FreeFlyer, un très bon plugin permet de paramétrer une partie de ces valeurs. Il s'agit de FasterFox. Ce plugin est très dense, il permet de régler le pipelining comme indiqué plus haut, mais permet aussi d'ajouter le téléchargement silencieux des liens d'une page, et pas mal d'autres goodies. A tester donc.

Performances visuelles

FireFox est un monde de goulots d'étranglements. Tout d'abord il est construit sur GTK, qui n'est pas pour ainsi dire un modèle de performances. Je ne veux pas chatouiller les sensibilités des pro GTK ou flatter celle des pro-Qt en disant cela. C'est juste un fait, que j'ai constaté "scientifiquement" avec des outils comme oprofiler et gtkperf. Il semble que GTK perde un temps monstre à créer, à chaque clignotement du curseur, des pixmaps qu'il détruit aussitôt. La preuve est qu'en désactivant le double-buffering responsable de ce comportement, les performances GTK deviennent comme par magie très proche de celles de Qt avec l'inconvénient de faire beaucoup pleurer les yeux ;-)

Un autre goulot d'étranglement, plus spécifique à FireFox celui-là, est le système XUL. Techniquement, l'interface graphique de FireFox est décrite par des fichiers XML (barres d'outils, menus, etc...). Ces fichiers XML sont "animés" par des... scripts en javascript. L'interface graphique de FireFox est donc totalement interprétée et sa vitesse est limité par l'utilisation de javascript qui est clairement plus lent qu'un équivalent compilé en C. La aussi, ce n'est pas un délire subjectif, lorsque l'on utilise oprofiler pour auditer l'utilisation du processeur lorsque l'on affiche des boites de dialogues, des menus, le résultat est le suivante :

12475 18.4517% libmozjs.so

Paramétrer au mieux sa configuration X11

Pour régler le problème "GTK", il n'y a pas de miracles. En attendant que les développeurs du projet trouvent l'inspiration, nous ne pouvons finalement agir que sur les couches qui se trouvent "sous" GTK. A savoir X11 ou le pilote de la carte graphique. Cela passe par une bonne configuration de la carte graphique sous X11 (comme expliqué ici), mais aussi par l'utilisation des derniers pilotes. Par exemple dans mon cas, le passage à la dernière version du driver nVidia, m'a procuré un gain de performance mesuré avec gtkperf de 200% !! Alors même si cela ressemble un peu à une emplâtre sur une jambe de bois, c'est toujours cela de gagné.

Utiliser une version optimisée de FireFox

Concernant XUL, là aussi, il n'y a pas grand chose à faire, si ce n'est optimiser au maximum la librairie javascript de FireFox. Et c'est possible grâce au projet SwiftFox. En effet, cette équipe s'est donnée pour objectif non seulement d'améliorer les performances sous Linux, mais aussi de produire des versions optimisées pour une classe de microprocesseur donnée (Athlon, Sempron, etc...)

Le résultat constaté est plus que probant sur ma configuration et le sera sûrement aussi sur la votre. L'ensemble de l'interface répond beaucoup plus vite et surtout le rendu des pages est bien plus rapide ! Cela se voit surtout lorsque l'on scroll une page riche en graphique. La version "standard" de firefox saccadait, SwiftFox a lui un scroll totalement comparable en terme de fluidité à la version windows.

Diminuer le temps d'attente avant rendu visuel d'une page

Enfin, il ne faut pas négliger l'aspect "psychologique" de la vitesse. Si une page met 10 secondes à se charger, le navigateur semblera plus "lent" s'il attends d'avoir toutes les informations pour l'afficher. Nous allons donc indiquer à firefox de lancer le rendu de la page le plus tôt possible. Cela est possible en créant une nouvelle "valeur entière" dans la paramétrage interne de FireFox (voir plus haut) et en fixant à 0ms le temps d'attente avant rendu visuel de la page.

nglayout.initialpaint.delay=0

Améliorer le Look de FireFox

Synchroniser GTK avec KDE

Le look par défaut de FireFox est franchement horrible sous Linux/KDE. Et à mon humble avis, l'utilisation de thèmes aggrave encore les choses pour ceux qui aiment que l'ensemble des applications se ressemble.

Comme dit plus haut, par défaut, FireFox utilise le look de GTK. Il existe certains styles comme ClearLook qui ont été portés à la fois sur GTK et sur Qt. Mais la "vraie" solution réside plutôt d'ans l'utilisation de gtk-qt. Qt-Gtk est en réalité un thème pour GTK qui a la particularité de copier celui qui est en court d'utilisation sous Qt. En utilisant ce style, les applications GTK (FireFox, mais aussi Gimp, Evolution, etc...) deviennent alors d'un coup de baguette magique compatible avec le look général de KDE.

Pour l'installer sous Mandriva

urpmi gtk-qt-engine

Ceci fait, il fait paramétrer GTK pour utiliser notre nouveau style. Et là il y a quelques mystères... J'ai remarqué que pour un look quasi parfait de toutes les applications, j'ai besoin de trois choses.

Tout d'abord, d'aller dans le panneau de configuration de KDE, dans la section Apparence/Style et Police GTK, de choisir Use my KDE style in GTK applications, Use my KDE fonts in GTK applications, de clicker sur Install scrollbar fix..., puis sur Appliquer.

Ensuite, je vais régler, en plus, le style GTK par l'application gtk-chtheme. Elle aussi se trouve dans votre distribution sans aucun doute. Une fois lancée, vous cherchez le style Qt et vous le sélectionnez.

Dernier point, installer le gnome-settings-deamon. Cet utilitaire semble important pour que le style passe bien sur certaines applications comme... firefox, mais aussi Eclipse. Le plus simple est d'installer le package gnome-control-center. Ceci fait, il faut simplement créer un lien symbolique dans votre dossier AutoStart :

ln -s /usr/lib/gnome-settings-daemon ~/.kde/Autostart

Ceci fait, pour le lancer la première fois et pour re-re-re-configurer le style GTK, lancez gnome-control-center, clickez sur Thème puis Personnaliser..., sélectionnez dans la liste de l'onglet Contrôles le style Qt, puis clickez sur Fermer/Fermer

Voilà, ça devrait être bon, vérifiez à l'aide de la commande ps -edaf que le démon est bien lancé, quittez firefox et relancez le, normalement il devrait avoir le style Qt, même pour les onglets...

Modifier l'interface utilisateur

L'interface de FireFox est très ouvertes car écrite en XUL (nous verrons cela plus en détail avec les extensions), un format de description hérité du XML qui emprunte beaucoup de ses comportements au couple DOM/Javascript. Cette particularité rend possible la modification de l'interface même de firefox à travers l'utilisation de simples feuilles de style. Et c'est très simple comme vous allez le voir.

Prenons un exemple. Sous KDE, j'utilise une fonte très particulière pour les menus, la Square721 BT, en 12pt. Et malheureusement, Firefox n'en a cure. Malgrès l'utilisation de GTK/QT, il décide d'afficher le tout a sa sauce.

La solution se trouve dans votre dossier ./mozilla/firefox/XXXXX.defaults/chrome. Vous trouverez là, deux fichiers userChrome.css. S'il n'existe pas il faut le créer. Ce fichier est ni plus ni moins qu'une feuille de style classique à la différence près qu'il ne modifie pas l'apparence d'une page web, mais de l'interface de FireFox. La syntaxe est strictement la même, seul les tags changent, car XUL est plus riche que HTML et contient par exemple des balises bookmarks-tree, tabs ou menubar. Nous alons donc ajouter un bloc de CSS pour modifier la fonte et la taille de celle-ci pour l'ensemble (ou presque) de firefox.

#main-window, #toolbar-menubar, menubar > menu, #bookmarks-menu, tabs, #bookmarksPanel, bookmarks-tree, menubar > menu > menu
{
  font-family:"Square721 BT" !important ;
  font-size:12px;
}

Le mot clef !important est très... important :) En effet, il va indiquer à firefox que ce n'est pas la peine d'utiliser une autre police, c'est celle là que l'on veut. Bien évidement, il faut redémarrer firefox pour voir le résultat (vous pouvez remplacer "ma" fonte par n'importe quelle autre police de votre goût).

Alors oui ce système est très puissant mais aussi assez obscure. Je n'ai en effet pas réussi à mettre la main sur une documentation complète et/ou à jour sur les balises et les IDs utilisables. Le bon moyen pour trouver votre voie, est d'utiliser le men DOM Inspector et de saisir l'URL chrome://browser/content/browser.xul dans l'inspecteur. Là il vous faut naviguer pour trouver votre bonheur et le reporter dans la feuille de style.

Petit gag amusant, tapez la même URL (chrome://browser/content/browser.xul) non pas dans le DOM inspector, mais dans firefox directement ;-)

Modifié le rendu des pages

Maintenant que l'interface nous convient mieux, il est temps de s'attaquer aux pages elle-mêmes. En effet il y a plusieurs choses qui ne vont pas. Les bordures des zones d'édition et des boutons sont épaisses et laides, les boutons cubiques, les radios et les combos semblent venir d'un autre âge.

Alors nous pourions appliquer le même principe que pour l'interface en modifiant cette fois le fichier userContent.css qui se trouve au même endroit que userChrome.css. Par exemple si je veux que toutes les zones d'édition aient une bordure grise, il me suffit d'ajouter :
textArea
{
  border: 1px solid gray !important;
}

Après redémarrage, toutes les zones de textes sont ainsi modifiées, quel que soit le site visité. Cette solution permet avec un peu d'effort de régler tous les problèmes. Mais l'avantage est que quelqu'un a déjà fait cela pour nous en fournissant un kit complet transformat tous les contrôles firefox avec un look kde. Cela s'apelle FireFox Form Widgets. Une fois que vous avez téléchargé cette archive, il suffit de la décompresser, d'aller dans le dossier KDEWidgets, et de copier tout son contenu (5 images et une feuille css) dans le dossier /usr/lib/firefox/res/. Après redémarrage de firefox, tout les formulaires sont maintenant visuellement compatibles avac KDE.

Améliorer l'intégration avec KDE

L'intégration à KDE est à prendre au sens large du terme. Il s'agit autant de remplacer les dialogues GTK par ceux de KDE (ex. Impression) que de pouvoir appeler certaines applications KDE en lieu et place des fonctions internes de FireFox (ex. Téléchargement).

Utiliser KPrint pour l'impression

GTK et l'impression c'est un roman. Linus Torvald lui-même avait pété le plomb sur ce sujet tant l'équipe Gnome avait simplifié à outrance les dialogues au point de les rendre absolument inutilisable dans certains cas (avec deux imprimantes par exemple). KDE, en revanche, a un magnifique moteur d'impression nommé kprint. Nous allons donc tenter de l'utiliser. Pour cela il faut aller dans la boîte de dialogue d'impression de firefox (Fichier/Imprimer). Cliquer sur "propriétés". Dans la zone "commande", videz ce qui existe et saisissez juste kprinter --stdin. Validez et tentez une impression, vous devriez enfin déboucher sur la fenêtre d'impression de kde. simple et efficace (idée originale trouvé ici)

Ajouter les flux RSS dans akregator

Pour réaliser cela, il faut utiliser ce script. Vous pouvez sauver ce script en /usr/bin/xdg-addrss et le rendre exécutable (chmod +x /usr/bin/xdg-addrss).Ensuite, il suffit de créer deux nouvelles valeurs dans firefox, la première de type chaîne, la seconde booléenne et de leur donner l'allure suivante :

network.protocol-handler.app.feed=/usr/bin/xdg-addrss
network.protocol-handler.external.feed=true

Comme souvent, l'effet est immédiat, il suffit d'aller sur un site disposant de flux, de cliquer sur l'icône orange dans la barre d'url et de sélectionner votre flux pour qu'il apparaisse sous akregator. Une bonne chose de faite, passons à la suite ;-)

Appeler des programmes externes à partir de FireFox

Pour rendre FireFox encore un peu plus intégré à KDE, j'avais besoin de deux choses. Tout d'abord un menu contextuel sur un lien dans une page permettant de transférer l'URL vers Agregator. L'idée est d'exploiter pour se simplifier la vie, les fils discussion au format RSS, de plus en plus nombreux. Ce menu devra exécuter le script présenté plus haut pour ajouter la conversation à akregator.

La deuxième chose qui me manque est l'archivage des pages web. L'idée est d'avoir un menu dans la barre principale appelant un script qui va télécharger la page avec ses images, ses styles, etc... et bien sur compresser l'ensemble en un fichier .war. Ses fichiers .war sont directement lisibles par konqueror et me servent à garder trace de tous les articles qui vont un jour ou l'autre disparaître de la toile. Je peux garder konqueror pour les relire, mais je dois pouvoir les créer avec FireFox.

Alors aussi étrange cela puisse paraître, ajouter un menu pour Firefox, c'est la croix et la bannière. En réalité il n'existe aucun mécanisme standard permettant de faire cela simple (comme un simple fichier .desktop sous konqueror). Pour y arriver, la seule possibilité est de faire une extension... Sacré programme pour un bête menu :/

Création d'un plugin basique

Heureusement, après avoir passé quelque temps à tenter de créer un plugin, j'ai découvert un magnifique assistant qui fabrique cela tout seul. Il suffit de la paramétrer pour lui demander de nous générer un fichier xpi contenant un squelette fonctionnel.

Dans notre cas nous allons donner les valeurs suivantes :

  • Your Name: Votre nom ;-)
  • Extension Name: le nom du plugin, par exemple, handleit
  • Short Name: handleit
  • Extension: handleit@karmalab.net
  • Cocher Create options dialog and preferences
  • Cocher Create context menu item
  • Cocher Create custom about box

Vous pouvez en mettre plus si cela vous tente mais c'est tout ce qui est nécessaire. Il ne reste plus qu'à cliquer sur Create Extension pour télécharger le fichier squelette handleit.zip

Ce fichier contient tout ce qu'il faut pour fabriquer un XPI mais pour l'instant, nous allons l'utiliser tel quel sous FireFox. Première étape, localiser votre dossier de profile. Il se trouve normalement dans le dossier ~/.mozilla/firefox et porte un nom ésotérique avec l'extension .default. J'imagine que c'est pour des raisons de sécurité. S'il vous en avez plusieurs, trouvez le bon en vous aidant du contenu du fichier bookmark.html qui se trouve à l'intérieur.

Dans ce dossier, que nous appellerons à partir de maintenant nrz806.default, se trouve un dossier extensions. Et dans ce sous-dossier sont stockés tous les plugins que vous avez installés. Pour utiliser notre plugin en cours de fabrication, nous allons donc procéder de la manière suivante :

cd
mkdir workspace
cd workspace
unzip ~/Desktop/handleit.zip
cd handleit
echo $PWD/ > ~/.mozilla/firefox/nrz806.default/extensions/handleit\@karmalab.net

Ceci va créer un \"faux plugin\" dans le dossier des extensions qui pointe sur le plugin que l'on est en train de développer. Pour continuer, je vous conseille d'installer l'extension Restart FireFox. En effet, redémarrer firefox est le seul moyen de tester les modifications dans le plugin, youpi :)

De toute façon, l'installation de cette extension va logiquement impliquer... de redémarrer FireFox. Lorsque ce dernier sera revenu à lui, vous aurez un nouveau menu Restart FireFox dans Fichier, un menu En rouge dans Outils et un nouveau menu dans votre click-droit. Les deux derniers ont été ajoutés par votre plugin.

Pour modifier les libélés, allez simplement changer leur valeur dans ~/workspace/handleit/locale/en-US/handleit.dtd. Mettez Archiver la page courante comme valeur à handleit.label, et Ajouter la conversation à Akregator dans handleitContext.label. Ceci fa22it, redémarrez FireFox pour admirez votre premier résultat.

Les plugins sont en javascript, pour modifier le comportement de nos deux menus (qui pour l'instant disent "hello world"), il faut modifier le fichier /home/yoran/workspace/handleit/content/overlay.js. Il nous faut tout d'abord y ajouter une fonction qui exécute une commande externe à FireFox (et oui, c'est possible...). Pour cela, ajoutez après la fonction onLoad:fuchions(){...}, le code suivante :

execute:function(command,args)
{
  var targetFile = Components.classes['@mozilla.org/file/local;1'].createInstance(Components.interfaces.nsILocalFile);
  targetFile.initWithPath(command);
  var process = Components.classes['@mozilla.org/process/util;1'].getService(Components.interfaces.nsIProcess);
  process.init(targetFile);
  process.run(false, args, args.length);
},

La virgule finale est importante !! Ceci fait, nous allons vider le corps de la fonction onMenuItemCommand pour la faire coller à nos besoins. En l'occurence il s'agit d'exécuter deux commandes différentes en fonction du type d'appel (par le menu principal ou par le menu contextuel), cela nous donne :

if (gContextMenu)
{
  var args = [gContextMenu.getLinkURL(),'conversation'];
  handleit.execute('/usr/bin/xdg-addrss',args);
}
else
{
  var pos=document.title.indexOf("-");
  var title=document.title.substring(0,pos);
  var args = [window.content.document.location.href, title,document.characterSet];
  handleit.execute('/usr/bin/xdg-war-archive',args);      
}

Notez que comparé à l'utilisation précédente, nous passons un paramètre en plus à xfg-addrss pour spécifier de mettre ce que l'on ajoute dans le dossier conversations d'Akregator.

Il ne nous reste maintenant plus qu'à créer le script /usr/bin/xdg-war-archive disponible ici

Ce script va donc poser sur le bureau de l'utilisateur qui le lance un fichier portant comme nom, le tire de la page. Il consistera en une archive tar.gz complète au format .war lisible donc par konqueror. N'oubliez pas de faire un chmod +x /usr/bin/xdg-war-archive.

Il ne reste maintenant plus qu'à redémarer FireFox pour tester tout cela. Si cela coince, il doit y avoir une faute de frappe, vous pouvez mettre des boites de dialogue dans le code pour tester pas à pas :

var promptService = Components.classes["@mozilla.org/embedcomp/prompt-service;1"]
                                  .getService(Components.interfaces.nsIPromptService);
promptService.alert(window, "Debugger","Message d'alerte");  

Maintenant si vous voulez supprimer le faux plugin et installer "pour de vrai" votre création (ou pourquoi pas, la redistribuer, il y a de quoi être fier ;-), la marche à suivre est la suivante :

cd ~/workspace/handlit
chmod +x build.sh
./build.sh

Vous pouvez maintenant supprimer le faux plugin de votre profile, et installer le fichier XPI fraîchement généré.

Commentaires

Jon207, le 6 septembre, 2007 - 14:35

Petite astuce : si vous utilisez le gestionnaire de téléchargements de firefox et êtes sous KDE, si vous faites clic droit > "ouvrir le dossier contenant" sur un téléchargement terminé, il y a de fortes chances pour que firefox cherche a ouvrir nautilus à la place de konqueror (ou n'ouvre rien si nautilus n'est pas installé). Pour éviter cela (testé sous kubuntu) :
sudo ln -s /usr/share/applications/kde/kfmclient_dir.desktop /usr/share/applications/nautilus-folder-handler.desktop

Ulhume, le 8 septembre, 2007 - 10:52

merci pour l'astuce, je vais tester cela

Sinon, quelqu'un aurait une idée pour la lenteur de l'IHM de firefox. PAr exemple si je demande à bookmarker, la petite fenêtre d'ajout mais bien entre 1 et 1.5 seconde à s'afficher. Je ne sais pas si cela vient de XUL ou de GTK, je suis preneur de toute idée.

daive, le 10 février, 2009 - 18:22

J'ai suivi les instructions pour pouvoir ajouter akregator à mes applications de flux, mais il ne ce trouve pas dans ma liste lorsque je vais dans préférences. Une idée sur ce problème? Je ne pourrais pas spécifier un path quelconque et l'ajouter manuellement a la liste? Merci de me répondre!

Ulhume, le 10 février, 2009 - 21:48

Aïe désolé, Akregator c'est un peu loin pour moi maintenant...

Poster un nouveau commentaire

Si vous avez détecté une erreur, coquille ou bêtises du même ordre, merci de plutôt passer par le formulaire de contact
Pour vous abonner au flux des commentaires sur cet article, clickez ici.
Pour répondre à quelqu'un, utilisez plutôt le lien répondre qui se trouve en haut (ou en bas) à gauche de son commentaire.
Le contenu de ce champ sera maintenu privé et ne sera pas affiché publiquement. Si vous avez un compte gravatar, l'utilisez pour afficher votre avatar.
  • To highlight piece of code, just surround them with <code type="language"> Your code &tl;/code>>. Language can be java,c++,bash,etc... Everything Geshi support.
  • Tags HTML autorisés : <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <blockquote> <div> <p> <br>
  • Les lignes et les paragraphes vont à la ligne automatiquement.
  • Les adresses de pages web et de messagerie électronique sont transformées en liens automatiquement.
  • Every instance of custom tags in the input text will be replaced with a specific tool shortcut.

Plus d'informations sur les options de formatage

Êtes-vous humain ?
Cette question est là pour déterminer si vous êtes humain ou pas...