Vivaldi : placer la barre de marque-pages verticalement
mardi 1 janvier 2019 à 15:57À l’image de ce que j’avais fait pour Firefox, et dans l’idée de gagner de la place verticale à l’écran, je souhaite avoir mes marques pages sur le côté de l’écran, à droite, plus précisément :
Ce qui suit est mon bidouillage pour avoir la barre de signets verticalement sous Vivaldi :
C’est fait sous Linux Mint 19, avec Vivaldi 2.2.1388.37 (Stable, 64 bit).
Cette habitude m’est venu de l’époque où j’utilisais Opera 12.x, et qui offrait cette fonctionnalité nativement.
Pour obtenir la même chose sous Firefox, il s’agissait de bidouiller dans les styles interne du navigateur pour donner l’aspect souhaité aux éléments de l’interface (l’interface du navigateur — le chrome comme on l’appelle (rien à avoir avec Google Chrome) — est lui-même du HTML et il peut être modifié avec des CSS).
Dans Vivaldi, c’est plus ou moins la même chose : l’interface entière est juste un gros template HTML + CSS + JS.
Il suffit de lancer Vivaldi en mode « débugger » :
vivaldi --debug-packed-apps --silent-debugger-extension-apiAinsi, on peut bidouiller l’interface « en direct » dans les outils de développeurs (en plus de pouvoir bidouiller le contenu de la page web dans l’onglet). Pour inspecter un élément de l’interface (barre d’adresse, onglet, …) il suffit de faire clic-droit dessus et « Inspecter ». Si sous connaissez les outils de développeurs, vous ne serez pas dépaysés.
Ensuite, il s’agit simplement de manipuler les éléments avec du CSS.
Une grosse difficulté m’a retardée cependant : quand on modifie la largeur de la barre des marques pages, le javascript s’en mêle et retire les icônes. Ils ne font alors plus partie de l’interface et impossible de les voir sans cliquer sur le bouton avec le chevron. Ceci m’empêche de donner une largeur fixe à la barre et de la positionner à droite.
J’ai dû ruser : à la place, je garde la barre comme elle est, je la fait pivoter avec transform: rotate(90deg) puis je la déplace avec position: relative;. C’est la seule solution pour que l’élément ne sorte pas du flux du document et conserve sa haute/largeur.
Bien-sûr, les icônes sont toutes de côté. Ce n’est pas grâce, il suffit de faire tourner les icônes individuellement dans le sens inverse : transform: rotate(-90deg).
Ensuite, sur le bloc qui contient la page web, on libère une petite marge à droite avec margin-right: 35px. Comme la barre est déplacé de façon relative, elle occupe toujours sa place en haut de l’écran (tout en étant à droite). On remonte donc la fenêtre de navigation : margin-top: -35px
Et… c’est tout.
Le CSS global est :
/* Bookmarkbar : turning it on the side, placing it on the right */
#app #browser #main .bookmark-bar {
transform: rotate(90deg) scale(1, 1)!important;
transform-origin: 0% 0%!important;
position: relative!important;
left: 100%;
height: 34px;
}
/* flip back the individual icons */
#app #browser #main .bookmark-bar button {
transform: rotate(-90deg)!important;
}
/* gives margins to the main frame */
#app #browser #main .inner {
margin-right: 35px!important; /* gives place to the new bars position */
margin-top: -35px!important; /* claims the place from its old position */
}
Enfin, il s’agit de sauvegarder ça dans les fichiers de style de Vivaldi, qui se trouve (sous Linux) là :
/opt/vivaldi/resources/vivaldi/style/common.cssC’est là que je ne sais pas si ce fichier sera un jour écrasé ou non par une mise à jour du navigateur. Il doit probablement y avoir un fichier CSS utilisateur pour Vivaldi, mais je ne l’ai pas trouvé.
ÉDIT : La réponse est "non" : le fichier sera écrasé à chaque mise à jour. Donc il faudra remettre ce code dans le fichier CSS à chaque fois (ça prend 10 secondes toutes les 6 semaines).
En tout cas, ça marche pour le moment.
