Élargir les barres de défilement des navigateurs (Firefox, Chromium)

gtalbot · 19-07-2018 05:59:13

Chers amis et collègues de Debian Facile,

Comment élargir les barres de défilement des navigateurs web Firefox 91 et plus et Chromium?

J'ai cherché et j'ai trouvé une solution (mise à jour le 23 décembre 2021)
qu'il me fait plaisir de vous présenter.

Pour Firefox 91 et plus
**********************

J'ai fermé Firefox et j'ai ouvert un terminal [Raccourci: Ctrl+Alt+T].

J'ai navigué jusqu'à mon répertoire gtk-3.0 en tapant:

$ cd ~/.config/gtk-3.0

puis j'ai créé et édité le fichier gtk.css en tapant

nano gtk.css

et en y éditant:

  scrollbar slider

    {

      background-color: gray;

      border: green solid 6px;

      border-radius: 0px; 

    }

   scrollbar.vertical slider

    {

      min-height: 40px;

      min-width: 19px;

    }

   scrollbar.horizontal slider

    {

      min-height: 19px;

      min-width: 40px;

    }

   scrollbar slider:hover

    {

      background-color: #999;

      border: lime solid 6px;

    }

  /*

  Lors d'un survol du curseur au-dessus du bouton principal, 

  la bordure du bouton principal de la barre de défilement et 

  le bouton principal vont légèrement changer de couleurs 

  (couleurs plus vives, moins sombres). 

  */

J'ai sauvegardé le fichier avec Ctrl+O, j'ai fermé nano avec Ctrl+X et j'ai redémarré Firefox.

J'ai ensuite tapé
about:config
dans la barre d'adresse de Firefox,
j'ai validé en appuyant sur Entrer, j'ai accepté les risques et,
dans la barre Rechercher un nom de préférence, j'ai écrit
widget.non-native-theme.enabled
et j'ai inversé sa valeur pour qu'elle devienne
false . [Crédit à totoZero7 pour son aide]

Cette solution fonctionne pour Firefox (version 91 et plus).

Cette solution fonctionne aussi pour d'autres applications (comme
Atril, BlueFish, Caja, Epiphany, Evince, FileZilla, gEdit, Mousepad, Nemo,
Pluma, Thunar, etc) qui utilisent les librairies GTK3.

Addendum:
Cette solution ne fonctionne pas pour les applications de LibreOffice comme
Writer ou Calc.

Le code CSS ci-haut configure les tailles minimales pour les 2 barres de
défilement: la verticale (à droite) et l'horizontale (en bas). Ce code CSS ajoute
une bordure verte de 6 pixels autour du bouton principal. Lors du survol du
curseur au-dessus du bouton principal, la bordure du bouton principal de
la barre de défilement et le bouton principal vont légèrement changer de
couleurs (couleurs plus vives, moins sombres).

J'ai vérifié que la solution ci-haut fonctionne correctement
si/quand la propriété layout.scrollbar.side dans about:config
http://kb.mozillazine.org/Layout.scroll … ir_effects
est 1 ou 3 pour les documents définis pour être rtl (right-to-left) et donc
quand la barre de défilement vertical est supposé être à gauche.

19px ce n'est peut-être pas assez pour certains (comme moi) et c'est
peut-être trop pour d'autres: libre à vous de trouver la valeur qui vous
convient.

Toutes les couleurs, les effets graphiques lors du survol et
toutes les dimensions (longueur et largeur) sont personnalisables.

Ce qui manque pour le moment à cette solution, c'est de ramener, de ressusciter les
bouton-flèches (^ , v, <, >) de défilement fin qu'on voit normalement aux extrémités
des barres de défilement. Si vous connaissez la réponse, alors ça m'intéresse de
la connaître.

Je pense que Firefox n'utilise pas de véritables barres de défilement
mais plutôt un "slider": une sorte de barre de glissement ou barre coulissante.
Donc, les bouton-flèches de défilement fin ne seraient malheureusement pas
ressuscitables.

Pour Chromium
****************

Il faut d'abord télécharger et installer une extension (aussi appelé module additionnel
ou complémentaire) pour éditer une feuille de style utilisateur.
J'ai utilisé l'extension Stylus version 1.5.25
ou alors, dans la barre d'adresse de Chromium, on édite:
chrome://extensions/?id=clngdbkpkpeebahjckkjfobafhncgmne
et j'ai édité une feuille de style utilisateur (ébauche rapide, sans finesse) comme ceci:

  ::-webkit-scrollbar

    {

      height: 21px;

      width: 21px;

    }

  ::-webkit-scrollbar-thumb

    {

      background-color: gray;

    }

  ::-webkit-scrollbar-button

    {

      background-color: black;

      height: 21px;

      width: 21px;

    }

et ça réussit pour tous les sites (à "S'applique à (URL)", à droite, il faut laisser le champ
texte vide).

Le code CSS ci-haut est rudimentaire. Il fonctionne sous Chromium 75. Pour
davantage de personnalisation (couleurs, dimensions, effets graphiques),
voir plus loin dans ce fil de discussion.

Gérard

Dernière modification par gtalbot (09-06-2022 16:03:56)

smolski · 19-07-2018 08:35:44

Ah super tuto que j'ai reporté dans le tuto firefox du wiki là :
https://debian-facile.org/doc:reseau:firefox?&#astuce

Merci.

gtalbot · 21-07-2018 22:16:07

Mise à jour le 9 juin 2022

(Suite et addendum)

Pour Chromium
***************

(...)

  ::-webkit-scrollbar

    {

      height: 24px;

      width: 24px;

    }

  ::-webkit-scrollbar-thumb

    {

      background-color: gray;

      border: green solid 4px;

    }

  ::-webkit-scrollbar-thumb:hover

    {

      background-color: #999;

      border: lime solid 4px;

    }

  /*

  Lors d'un survol du curseur au-dessus du bouton principal, 

  la bordure du bouton principal de la barre de défilement et 

  le bouton principal vont légèrement changer de couleurs 

  (couleurs plus vives, moins sombres). 

  */

  ::-webkit-scrollbar-track

    {

      background-color: lightgray;

    }

  ::-webkit-scrollbar-track:hover

    {

      background-color: gainsboro;

    }

  /*

  Lors d'un survol du curseur au-dessus de la barre de défilement, 

  la couleur d'arrière-plan de la barre de défilement va légèrement 

  changer de couleur (couleur plus pâle, moins sombre). 

  */

  ::-webkit-scrollbar-corner

    {

      background-color: beige;

    }

   ::-webkit-resizer

     {

       background-image: url("data:image/png;base64,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Lm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgIHhtcE1NOkRvY3VtZW50SUQ9ImdpbXA6ZG9jaWQ6Z2ltcDoxZDZiOTlmNi1lMTAzLTRkZWMtOGEzYS0xMjdhNWYxNGNjYmMiCiAgIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ZmM1MWM2OTUtY2U4NS00NDdmLWJjN2ItMDg3NmQ5OGM3YmZjIgogICB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NWRjMWVjZGUtZmEwYS00YTczLTkzOGYtZjFlYmY4ZGM2YmFiIgogICBHSU1QOkFQST0iMi4wIgogICBHSU1QOlBsYXRmb3JtPSJMaW51eCIKICAgR0lNUDpUaW1lU3RhbXA9IjE2NDUxOTgwNzg5Mzg3ODUiCiAgIEdJTVA6VmVyc2lvbj0iMi4xMC4yMiIKICAgZGM6Rm9ybWF0PSJpbWFnZS9wbmciCiAgIHRpZmY6T3JpZW50YXRpb249IjEiCiAgIHhtcDpDcmVhdG9yVG9vbD0iR0lNUCAyLjEwIj4KICAgPGlwdGNFeHQ6TG9jYXRpb25DcmVhdGVkPgogICAgPHJkZjpCYWcvPgogICA8L2lwdGNFeHQ6TG9jYXRpb25DcmVhdGVkPgogICA8aXB0Y0V4dDpMb2NhdGlvblNob3duPgogICAgPHJkZjpCYWcvPgogICA8L2lwdGNFeHQ6TG9jYXRpb25TaG93bj4KICAgPGlwdGNFeHQ6QXJ0d29ya09yT2JqZWN0PgogICAgPHJkZjpCYWcvPgogICA8L2lwdGNFeHQ6QXJ0d29ya09yT2JqZWN0PgogICA8aXB0Y0V4dDpSZWdpc3RyeUlkPgogICAgPHJkZjpCYWcvPgogICA8L2lwdGNFeHQ6UmVnaXN0cnlJZD4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiCiAgICAgIHN0RXZ0OmNoYW5nZWQ9Ii8iCiAgICAgIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ZDVlMGUxNTItMzIxMS00N2U5LWI5M2UtY2NlNzMwNTZlZWFhIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJHaW1wIDIuMTAgKExpbnV4KSIKICAgICAgc3RFdnQ6d2hlbj0iLTA1OjAwIi8+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InNhdmVkIgogICAgICBzdEV2dDpjaGFuZ2VkPSIvIgogICAgICBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmU2OGYyYWQ4LWU0N2MtNDcyOC05ZGZhLWYwYTAzNTk4NDg4ZSIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iR2ltcCAyLjEwIChMaW51eCkiCiAgICAgIHN0RXZ0OndoZW49Ii0wNTowMCIvPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJzYXZlZCIKICAgICAgc3RFdnQ6Y2hhbmdlZD0iLyIKICAgICAgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDoyMzE5YjE5Yi02MGQxLTQwMGItOGYyYi1kM2FhZDU0NTI5YzQiCiAgICAgIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkdpbXAgMi4xMCAoTGludXgpIgogICAgICBzdEV2dDp3aGVuPSItMDU6MDAiLz4KICAgICA8cmRmOmxpCiAgICAgIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiCiAgICAgIHN0RXZ0OmNoYW5nZWQ9Ii8iCiAgICAgIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YzlkNTAyY2MtYjA4OC00MDBiLWExMmItMjI4YjgxZDc0MDA3IgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJHaW1wIDIuMTAgKExpbnV4KSIKICAgICAgc3RFdnQ6d2hlbj0iLTA1OjAwIi8+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InNhdmVkIgogICAgICBzdEV2dDpjaGFuZ2VkPSIvIgogICAgICBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjU4OGM3ZjNkLTcxZWEtNGU1Yi04YzM5LTRiZGI4MjVlMzM3OSIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iR2ltcCAyLjEwIChMaW51eCkiCiAgICAgIHN0RXZ0OndoZW49Ii0wNTowMCIvPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJzYXZlZCIKICAgICAgc3RFdnQ6Y2hhbmdlZD0iLyIKICAgICAgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo5YmZhMmQ2MC1iYWU0LTQzN2UtOGRkNi0xOGE4MGI5MzhjMDUiCiAgICAgIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkdpbXAgMi4xMCAoTGludXgpIgogICAgICBzdEV2dDp3aGVuPSItMDU6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogICA8cGx1czpJbWFnZVN1cHBsaWVyPgogICAgPHJkZjpTZXEvPgogICA8L3BsdXM6SW1hZ2VTdXBwbGllcj4KICAgPHBsdXM6SW1hZ2VDcmVhdG9yPgogICAgPHJkZjpTZXEvPgogICA8L3BsdXM6SW1hZ2VDcmVhdG9yPgogICA8cGx1czpDb3B5cmlnaHRPd25lcj4KICAgIDxyZGY6U2VxLz4KICAgPC9wbHVzOkNvcHlyaWdodE93bmVyPgogICA8cGx1czpMaWNlbnNvcj4KICAgIDxyZGY6U2VxLz4KICAgPC9wbHVzOkxpY2Vuc29yPgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgIAo8P3hwYWNrZXQgZW5kPSJ3Ij8+XtxxwAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB+YCEg8bOuh/y14AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAoUlEQVRIx2NkoC74j8a/zURDw58wMDBsp6bh6LiHgYFBilaG9zMwMMiSYxgjkS6XpWWwSJJjGDMRhk+gtcvpHiz/sSRdqqWW/4QsoCS1/CfGAkqDhWgLSEkt2NSaUiu1YFNrhiV5Uy1YTEg1vJ8El5tgSSTDNFgmUCFY/tMyWP7js4DSYPmPzwJqBAtOC6gVLDAcCxOciKeCxpb9mYl0CBcAJi7WlMK6PJEAAAAASUVORK5CYII=");

     }

  /*

  webkit-resizer correspond à la poignée de 

  redimensionnement (en bas à droite)

  */

  ::-webkit-scrollbar-button

    {

      background-color: orange;

      border-style: solid;

      height: 24px;

      width: 24px;

    }

  /* Flèche haut (défilement fin) */

  ::-webkit-scrollbar-button:vertical:decrement

    {

      border-color: transparent transparent black transparent;

      border-width: 0px 12px 21px 12px;

    }

  /* Flèche bas (défilement fin) */

  ::-webkit-scrollbar-button:vertical:increment

    {

      border-color: black transparent transparent transparent;

      border-width: 21px 12px 0px 12px;

    }

  /* Flèche gauche (défilement fin) */

  ::-webkit-scrollbar-button:horizontal:decrement

    {

      border-color: transparent black transparent transparent;

      border-width: 12px 21px 12px 0px;

    }

  /* Flèche droite (défilement fin) */

  ::-webkit-scrollbar-button:horizontal:increment

    {

      border-color: transparent transparent transparent black;

      border-width: 12px 0px 12px 21px;

    }

et ça réussit pour tous les sites (à "S'applique à (URL)", à droite, il faut laisser le champ
texte vide) sauf les sites dont l'adresse commence par "about:" (par ex.: about:newtab)
et par "chrome:" (par ex.: chrome://settings/).

Le code CSS ci-haut est élaboré. Il fonctionne sous Chromium version 98,
Epiphany version 3.38.2 et Falkon version 3.1.0.
Davantage de personnalisation et de stylisation sont possibles.
Toutes les couleurs, les effets graphiques lors du survol et
toutes les dimensions (longueur et largeur) sont personnalisables.

Voici ce que donne le code ci-haut (à essayer avec Chromium 98 ou
Epiphany 3.38.2 ou Falkon 3.1.0):

http://www.gtalbot.org/BrowserBugsSecti … omium.html

Je suis ouvert à vos suggestions, corrections, améliorations et à vos expérimentations.

On peut retrouver ce tutoriel dans le wiki Chromium (et Chrome) : Navigateurs Web précisément ici:

Comment élargir les barres de défilement de Chromium

Gérard

Dernière modification par gtalbot (09-06-2022 16:00:30)

smolski · 22-07-2018 02:54:58

Merci du suivi gtalbot.
En tant que membre df, tu peux éditer le tuto et faire les modifications toi-même, ce qui est le mieux puisque tu expérimentes ce que tu présentes.

Debian-facile

#1 19-07-2018 05:59:13

Élargir les barres de défilement des navigateurs (Firefox, Chromium)

#2 19-07-2018 08:35:44

Re : Élargir les barres de défilement des navigateurs (Firefox, Chromium)

#3 21-07-2018 22:16:07

Re : Élargir les barres de défilement des navigateurs (Firefox, Chromium)

#4 22-07-2018 02:54:58

Re : Élargir les barres de défilement des navigateurs (Firefox, Chromium)

Pied de page des forums