Firefox – Extension Tab Center Reborn

Dans mon article sur la personnalisation de Firefox, je vous ai listé une des extensions que j’utilise à savoir Tab Center Reborn.

Son principe est de basculer la liste de vos onglets en colonne, et pour ma part c’est ce que je préfère vu la quantité que j’ai pour habitude d’ouvrir. L’extension fonctionne très bien de base, mais pour ma part j’ai préféré personnaliser son affichage et aussi celui de Firefox pour avoir un meilleur rendu esthétique. Pour l’installer il vous suffit de vous rendre dans le menu des modules complémentaires ou de cliquer sur le lien suivant : https://addons.mozilla.org/fr/firefox/addon/tabcenter-reborn/

Configuration Extension

Une fois installée la barre d’onglet s’affichera automatiquement sur la gauche et vous pourrez accéder à sa personnalisation en cliquant sur l’icône , une fois sur la nouvelle page rendez-vous en bas de celle-ci dans la partie « Avancé » et cochez « Feuille de style personnalisée ».

Vous pouvez maintenant y saisir les valeurs suivantes:

Mettre le menu de l’extension en bas plutôt qu’en haut
```
#topmenu {
  order: 2;
}
```
Masquer le bouton d’un nouvel onglet
```
#newtab {
  display: none;
}
```

Cacher automatiquement la barre d’ascenseur et lui donner un aspect plus fin

#tablist {
  scrollbar-width: none;
}
#tablist:hover {
  scrollbar-width: thin;
}

N’oubliez pas de cliquer sur le bouton Enregistrer la CSS pour voir ces premières modifications.

Configuration Firefox

Pour l’instant vous avez dû remarquer que vous avez une double barre d’onglet, en haut horizontale et à gauche verticale. Ce n’est pas le comportement que je souhaite, donc voici comment masquer la barre horizontale:

Saisir about:config dans la barre de recherche
Rechercher la propriété toolkit.legacyUserProfileCustomizations.stylesheets et la passer à true
Saisir de nouveau dans la barre de recherche about:profiles puis sur le bouton Ouvrir le dossier de votre répertoire racine
Créer un dossier que vous nommerez chrome
Créer un fichier userChrome.css dans le dossier précédent

Renseigner les valeurs suivantes dans le fichier:

#TabsToolbar:not([customizing="true"]) { visibility: collapse !important;}
#toolbar-menubar { padding-top: 0px !important; }

Retourner sur la page about:profiles et sélectionner le bouton pour redémarrer Firefox

Vous possédez maintenant plus qu’une seule barre d’onglet à savoir celle de l’extension. Si vous remarquez que vous n’avez plus les icônes pour réduire/agrandir/fermer Firefox en haut à droite dans votre barre il faudra simplement modifier dans votre about:config la propriété suivante :

browser.tabs.drawInTitlebar = false

Il est aussi possible d’ajouter le code suivant dans votre fichier userChrome.css pour que la barre des onglets se réduise automatiquement lorsque qu’elle n’est pas survolée:

#sidebar-box:not([hidden]) {
  display: block;
  position: fixed;
  min-width: 5vw !important;
  max-width: 5vw !important;
  overflow: hidden;
  transition: min-width 0.5s ease;
  border-right: 1px solid #cdc7c2;
  z-index:1;
}

#sidebar,
#sidebar-box:hover {
  min-width: 20vw !important;
  max-width: 20vw !important;
}

#sidebar-splitter {
  display: none;
}

/*
 * You need to subtract the height of the panels above sidebar: toolbar (with the URL),
 * bookmarks bar, etc. -- whichever is enabled/displayed.
 * You can see which mode (normal, compact or touch) you’re in by going to:
 * Firefox Menu → Customize… (at the bottom of the screen) → Density
 *
 *                | normal | compact | touch
 * Menu bar       |  27px  |   27px  |  27px
 * Tab bar        |  33px  |   29px  |  41px
 * Toolbar        |  40px  |   32px  |  40px
 * Bookmarks bar  |  23px  |   21px  |  27px
 * Sidebar header |  47px  |   47px  |  47px
 *
 * Ex: in compact mode:
 * - menu bar, tab bar and sidebar header hidden (0px)
 * - nav bar (32px) + bookmarks bar (21px) = 53px
 */
#sidebar {
  height: calc(100vh - 97px);
}

#sidebar-box:not([hidden]) ~ #appcontent {
  margin-left: 4vw;
}

#main-window[inFullscreen][inDOMFullscreen] #appcontent {
  margin-left: 0;
}

#main-window[inFullscreen] #sidebar {
  height: 100vh;
}

Ne pas oublier de faire le calcul pour la propriété #sidebar afin que la hauteur soit au plus juste avec votre interface.

L’ensemble des personnalisations possibles pour cette extension sont disponibles sur la page wiki du projet.

Mise à jour article

Maj du 18/11/2022 : Ajouter !important aux valeurs min-width et max-width de la propriété #sidebar-box pour corriger le problème sous Firefox 107