Le Hollandais Volant

Ceci est une version mise à jour des articles suivants :

• Firefox 57 : placer la barre personnelle verticalement.
• Firefox 72 : placer la barre personnelle verticalement.

Firefox se met à jour, et forcément son code interne a changé, et ce genre de hacks ne marche parfois plus, du moins pas sans le modifier à nouveau, et c’est précisément ce que j’ai fait ici.

Comme d’hab, le hack prend parti du fait que l’interface de Firefox est du HTML/CSS.

Ici, il s’agit de prendre la barre personnelle, de la faire tourner de 90° sur le côté, la mettant verticalement. Ensuite, on remet chaque marque-page droit en les faisant tourner de −90°. On masque le texte pour ne garder que les icônes.

La barre personnelle est placée de façon absolue dans l’interface de Firefox, elle se trouve donc sous le content (distinction du chrome). Il faut donc réduire un peu la largeur du content. C’est tout.
On gère aussi le plein écran : en plein écran, le content récupère 100 % de la largeur, masquant la barre personnelle.

Voici la procédure.

Affichez la barre personnelle

Dans la barre d’outils (en haut) de Firefox, cliquez droit puis « Barre personnelle » et « Toujours afficher ».

Activer la prise en compte du CSS utilisateur sur le chrome

Allez dans about:config, puis mettez toolkit.legacyUserProfileCustomizations.stylesheets à true

Allez dans le dossier de votre profile Firefox

Ouvrez about:profiles.
Repérez le profil qui indique « Il s’agit du profil en cours d’utilisation ».
Dans le tableau dessous, cliquez sur « ouvrir le répertoire » en face de « répertoire racine ».

Créez le fichier userChrome.css

Dans ce répertoire racine, créez un dossier « chrome ».
Dans ce dossier chrome, créez le fichier « userChrome.css ».

C’est bien un fichier CSS. Ne l’enregistrez pas comme un fichier .txt, mais bien comme .css.

Utilisez le code CSS

Dans ce fichier userChrome.css, entrez ce CSS :

#PersonalToolbar {
	position: fixed!important;
	right: 0px!important;
	top: 92px!important;
	height: 35px!important;
	transform-origin: bottom right!important;
	transform: rotate(-90deg)!important;
	z-index: 1200!important;
	display: inline-flex!important;
	width: 100%;
	flex-direction: row-reverse;
}

#personal-bookmarks {
	transform: rotate(180deg)!important;
	width: 100%!important;
}

#PersonalToolbar .bookmark-item {
	transform: rotate(-90deg)!important;
}

#PersonalToolbar .bookmark-item .toolbarbutton-text {
	display: none!important;
}

#browser,
#browser-bottombox {
	margin-right: 35px!important;
}


#main-window[inFullscreen="true"] #PersonalToolbar {
	visibility: collapse !important;
}

#main-window[inFullscreen="true"] #browser,
#main-window[inFullscreen="true"] #browser-bottombox {
	margin-right: 0!important;
}

Enregistrez le fichier.
Fermez et rouvrez Firefox de nouveau. Normalement la barre personnelle est à droite, debout.

Autre chose ?

J’ai testé ça sur mon installation, Linux Mint 22.3 et Firefox 153.
Je n’ai pas testé ailleurs.

Si vous voulez explorer le code de l’interface de Firefox, ouvrez cette page : chrome://browser/content/browser.xhtml, puis ouvrez les outils de développement.
Vous pouvez y aller, vous ne risquez pas de casser quoi que ce soit.

Si jamais votre code CSS a cassé quelque chose, supprimez le fichier userChrome.css, et relancez Firefox.

Voilà.
Maintenant, @Mozilla : c’est sympa les onglets verticaux et la jolie page de démarrage avec de la pub, la météo et des news, mais une option native pour mettre la barre de favoris verticalement avec juste les icônes, ça serait cool aussi. Merci.

D’autant que ceci est un hack « legacy » qui va bien me faire chier lorsque ça ne marche plus ; et je n’ai pas envie de passer sous un autre navigateur (Vivaldi est super, merci, mais Webkit/Blink c’est de la merde lente, lourde et moche ; Gekgo/Servo est bien plus puissant, rapide et léger… et ouvert).