Mot-clef « Personnalisation »

Affichage des requêtes XHR

Je ne trouvais pas comment afficher les requêtes XHR dans la console de Firefox (et je me disais que bon ça quand même ils ne doivent pas l’avoir enlevé).

À force de cliquer au hasard, je finis par cliquer sur la petite icône en forme d’entonnoir. Je n’avais pas essayé plus tôt tant ça semblait évidemment lié au champ “filtrer” juste à côté. Mais en fait si c’est comme ça qu’on affiche le panneau pour décider des catégories d’informations qu’on veut afficher…

Retrouver des séparateurs dans les barres d’outils

Un des nombreux trucs qui ont disparu autour de Firefox 57 et de la suppression de XUL c’est le fait de pouvoir mettre des séparateurs entre les boutons d’une barre d’outils.

J’ai cherché un moment, mais pas trouvé de moyen de le refaire via une extension (mais je commence à avoir l’habitude).

Puis je suis tombé sur une solution : passer par userChrome.css en recyclant les espaces flexibles.

C’est très chiant à mettre en œuvre et à déployer sur plusieurs machines, mais au moins ça marche…

Récupérer la barre de statut

Ça non plus ce n’est plus possible via une extension depuis Firefox 57.

Mais ça peut se bricoler dans userChorme.css en recyclant la barre personnelle puis en la plaçant en bas.

Comme pour la barre de statut, c’est laborieux et ça oblige à se passer d’une autre élément.

Heureusement que comme le dit Mitchell Baker dans son appel aux dons, Mozilla est là pour nous aider à personnaliser notre expérience utilisateur ! Imaginez si ce n’était pas le cas…

Une feuille de style, qu'est-ce que c'est ?

Pour ceux qui ne s'y connaitraient pas trop en développement web, la feuille de style est un fichier qui permet de définir l'apparence d'une page web. Idéalement, lorsqu'on développe un site, la sémantique du contenu est indiquée par le code HTML qui le met en page (par exemple telle ligne est un titre, telle autre est une définition, etc) et on le décore ensuite via une feuille de style. Le langage utilisé pour écrire ces feuilles de style est CSS.

Des feuilles de style personnalisées ?

C'est là que Firefox intervient ! En effet, ce génial navigateur a une fonctionnalité qui bien que peu connue du grand public ouvre d'énormes possibilités : il permet à l'utilisateur averti de définir des feuilles de styles personnelles appliquées soit à tous les sites qu'il affiche, soit à un site, groupe de sites ou même une page en particulier (plus d'explications ici).

De base c'est masqué et pas facile d'accès mais l'extension Stylish permet de les définir très facilement. On peut ainsi modifier soi-même l'affichage des sites que l'on visite (bien entendu, cette modification ne vaut que pour votre navigateur à vous et n'est visible par personne d'autre).

On peut par exemple réorganiser les éléments en occupant l'espace inutilisé par un design prévu pour une résolution plus base, remplacer certaines couleurs insupportables, supprimer certains blocs d'affichage, etc.

Comment ajouter une feuille de style ?

1. Installez Stylish et relancez Firefox.
2. Lancez l'outil de gestion des feuilles de style :
   
3. Cliquez sur le bouton "Écrire" :
   *
4. Indiquez d'abord un titre (1) qui vous servira uniquement à reconnaitre cette feuille quand vous en aurez ajouté plein d'autres. Puis copiez/collez le code CSS que vous voulez appliquer dans le cadre texte (2) et enfin cliquez sur "Enregistrer" (3).
   
5. C'est prêt. Il peut cependant s'avérer nécessaire de rafraichir la page pour que les modifications apparaissent.

Tout ça c'est bien mais moi j'utilise IE...

Alors ça c'est ballot ! Parce que ça m'étonnerait fortement qu'IE gère un truc pareil, mais bon, on ne peut pas en même temps utiliser un navigateur totalement dépassé, ou plus généralement un produit Microsoft, et espérer qu'il soit à la pointe de l'innovation...

Et je n'en ai pas entendu parler pour les autres navigateurs tels qu'Opera ou Safari... Cela dit, rien ne vous empêche de chercher et de faire part de vos découvertes.