URL:
https://linuxfr.org/news/tab-center-reborn-onglets-verticaux-dans-firefox
Title: Tab Center Reborn, onglets verticaux dans Firefox
Authors: ariasuni
orfenor, theojouedubanjo, tisaac, M5oul et thomasv
Date: 2020-10-28T14:08:36+01:00
License: CC By-SA
Tags: webextensions et firefox
Score: 3
[Tab Center Reborn](
https://addons.mozilla.org/fr/firefox/addon/tabcenter-reborn/) est une extension fournissant une barre d’onglets verticale simple et puissante. Elle reproduit au mieux les fonctionnalités et l’apparence natives de Firefox, s’intègre comme peu d’extensions au thème du navigateur, et ajoute quelques fonctionnalités pour mieux gérer une grande quantité d’onglets.
Par rapport à la référence en la matière, [Tree Style Tab](
https://addons.mozilla.org/fr/firefox/addon/tree-style-tab/), Tab Center Reborn ne propose pas d’arborescence ou d’options de contrôle avancées sur les onglets, mais est généralement plus simple et réactive, et s’intègre visuellement mieux avec le navigateur.
----
[Tab Center Reborn sur addons.mozilla.org](
https://addons.mozilla.org/fr/firefox/addon/tabcenter-reborn/)
[Dépôt du code source (sur Framagit)](
https://framagit.org/ariasuni/tabcenter-reborn/)
----
# Historique
## Situation initiale
Début 2014, je découvre [Tree Style Tab](
https://addons.mozilla.org/fr/firefox/addon/tree-style-tab/) que j’adopte immédiatement. Je trouve ceci dit qu’il manque parfois de réactivité et qu’à en faire trop il est un peu brouillon à l’utilisation. À l’époque, il n’y a pas vraiment d’alternative et Tree Style Tab était de toute façon une excellente extension dont je suis satisfaite.
Vers la mi-2015, j’adopte [Tab Tree](
https://addons.mozilla.org/firefox/addon/tab-tree/) qui est simple, rapide et dont j’apprécie les fonctionnalités supplémentaires par rapport à la barre d’onglet native. Je l’apprécie tellement que [j’en fais la traduction en français](
https://github.com/traxium/tabtree/pulls?q=is%3Apr+is%3Aclosed+author%3Aariasuni) et que je fais un don au développeur.
## Élément perturbateur
[Fin 2016, Mozilla annonce qu’à la fin de l’année suivante, seules les WebExtensions seront prises en charge](
https://blog.mozilla.org/addons/2016/11/23/add-ons-in-2017/) (voir la dépêche [Histoire des systèmes d’extensions de Firefox](
https://linuxfr.org/news/histoire-des-systemes-d-extensions-de-firefox)). Les extensions d’onglets verticaux, qui se branchent aux entrailles de Firefox, doivent être complètement réécrites.
## Péripéties
J’ai donc recherché activement une solution qui me conviendrait. Tab Tree est abandonné, mais la grosse et mature extension Tree Style Tab a pu être réécrite pour l’API WebExtensions. J’avais un peu testé l’expérimentation TabCenter (de [Test Pilot](
https://web.archive.org/web/20190905043220/https://testpilot.firefox.com/)), mais je la trouvais un peu moins bien que les alternatives. De plus, Mozilla a décidé que fournir une fonctionnalité d’onglets verticaux devrait être laissée aux développeurs WebExtensions, et TabCenter fut abandonnée.
Je suis un peu retournée à Tree Style Tab, version WebExtensions cette fois. Je lui ai même développé une extension, [Onglet revers pour Tree Style Tab](
https://addons.mozilla.org/fr/firefox/addon/tab-flip-for-tree-style-tab/)). J’étais habituée aux contributions, mais je n’avais jamais vraiment créé et maintenu un logiciel. En créant cette extension d’une centaine de lignes, j’ai pu me familiariser avec les API et le format WebExtensions, découvrir les dessous de la publication d’une extension sur addons.mozilla.org, me faire la main sur l’outillage JavaScript et résoudre de vrais bugs.
Malgré tout, je trouvais la réécriture de Tree Style Tab pour WebExtensions moins rapide et moins fiable, et que l’intégration à l’interface et au thème de Firefox laissait à désirer.
## Dénouement
J’ai fini par découvrir [Tab Center Redux](
https://github.com/eoger/tabcenter-redux) ([plus disponible sur le magasin d’extensions de Firefox](
https://github.com/eoger/tabcenter-redux/issues/437)), extension reprenant le concept de TabCenter, qui semblait correspondre à mes besoins et couvrait le même créneau que Tab Tree mais en WebExtensions : simple, rapide, pratique. J’ai vite commencé à [contribuer de temps en temps](
https://github.com/eoger/tabcenter-redux/pulls?q=is%3Apr+author%3Aariasuni+), ce qui m’a permis de découvrir la base de code à mon rythme. Puis le mainteneur a arrêté de s’occuper de ce projet et après six mois, j’ai décidé de le forker pour lui redonner vie, d’où le nom Reborn.
# Fonctionnalités
## Modes d’affichage
Les onglets peuvent être affichés en mode compact avec seulement favicon et titre de la page (comme les onglets natifs), ou en mode informatif où y sont ajoutés l’URL et une miniature de la page web (illustré dans la capture ci-dessous). Par défaut, Tab Center Reborn utilise un mode dynamique : informatif tant qu’il y a assez de place pour tout afficher, compact au-delà.
De plus, les onglets épinglés peuvent être affichés comme sur la barre native (c'est à dire limités à leur favicon), ou bien comme les autres onglets (illustré dans la capture ci-dessous). Dans tous les cas, la liste des onglets épinglés reste toujours affichée à l’écran.
## Intégration avec Firefox
- Apparence native (même la page d’options) : un gros travail a été effectué pour coller de près au design Photon/de Firefox Quantum.
- Respect des thèmes: l’extension s’adapte aux thèmes Firefox, applique les mêmes couleurs de la même façon que Firefox, et vérifie que le thème sera lisible avant de l’utiliser.
- Cohérence avec les menus contextuels natifs : utilisation du même ordre et des mêmes labels pour les menus natifs.
- Gestion des [conteneurs/identités contextuelles](
https://support.mozilla.org/fr/kb/onglets-contextuels-avec-les-containers) : l’extension affiche correctement le conteneur d’un onglet, et permet d’ouvrir.
Évidemment, le redesign à venir de Firefox va nécessiter un travail d’adaptation pour que Tab Center Reborn reste au plus proche de l’apparence et du comportement natif du navigateur.
## Gérer beaucoup d’onglets
Si l’extension vise d’abord la parité avec la barre d’onglet native de Firefox, quelques fonctionnalités supplémentaires ont été rajoutées pour pouvoir gérer un plus grand nombre d’onglets avec aisance :
- Filtrer les onglets : il est possible de filtrer les onglets en tapant un bout de leur titre ou URL, ([recherche approximative — *fuzzy search* — à la Sublime Text](
https://www.npmjs.com/package/fuzzysort)).
- Onglet revers : copie de la fonctionnalité « tab flip » de la défunte extension XUL [Tab Tree](
https://github.com/traxium/tabtree), elle permet de revenir à l’onglet précédemment active en cliquant sur l’onglet courant.
- Décharger l’onglet : ajout, parmi les actions disponibles dans le menu contextuel, l’option « Décharger l’onglet », qui « éteint » l’onglet afin d’économiser mémoire et réduire la charge processeur.
- Fermer les onglets au-dessus : toujours dans le menu contextuel, il est possible de fermer tous les onglets au-dessus de l’onglet courant.
# Notes de fin
## Cacher la barre d’onglet native
Il n’est pas possible de cacher la barre d’onglets native facilement dans Firefox, ni par une API WebExtensions ni par une option quelconque. Mais c’est quand même possible en ajoutant [un peu de CSS dans le fichier `userChrome.css`](
https://framagit.org/ariasuni/tabcenter-reborn/-/wikis/home#userchromecss-tweaks) (toutes les étapes sont décrites sur le wiki).
## Anecdotes
Depuis mon fork, pas loin de [45 bugs/fonctionnalités manquantes rapportées pour l’extension initiale ont corrigées/implémentées dans Tab Center Reborn](
https://github.com/eoger/tabcenter-redux/issues/421) !
J’ai refait l’icône en lui donnant une forme plus carrée comme les autres icônes de Firefox, et en mettant des ronds symbolisant les favicons devant chaque ligne. Je n’y connais rien en logiciel de dessin vectoriel mais l’icône était un SVG très simple, alors j’ai bidouillé les valeurs des balises `<rect />` et ajouté des balises `<circle />` en ajustant les valeurs jusqu’à ce que ce que tout soit bien aligné et rende bien même en petite taille (c’est pourquoi les ronds ont un diamètre plus important que la hauteur des lignes qui les accompagne) ([commit](
https://framagit.org/ariasuni/tabcenter-reborn/-/commit/9723250228099cd4200352f91b5940239f7f547d#edd7d0004edc02c21dec9bc37500151e2c202c34)).
## Amélioration de l’API WebExtensions
Je dois bien l'avouer, je suis bien contente que [Firefox soit parmi les seuls navigateur à permettre aux extensions d’utiliser le panneau latéral](
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/sidebar_action), sinon ni Tab Center Redux ni son successeur n’aurait pu exister. Ceci dit, lors du développement de Tab Center Reborn, je me suis aussi retrouvée face à quelques bugs et limites de l’API WebExtensions de Firefox.
Non seulement j’ai pu résoudre mes propres problèmes ou ajouter les fonctionnalités dont j’avais besoin, mais j’ai contribué à améliorer le développement de WebExtensions pour tout le monde ! J’ai pu améliorer la fonction de duplication d’onglets ([correction 1](
https://phabricator.services.mozilla.com/D15337), [correction 2](
https://phabricator.services.mozilla.com/D48471), [ajout de fonctionnalité](
https://phabricator.services.mozilla.com/D67782), [correction 3](
https://phabricator.services.mozilla.com/D73732)), et ajouter une fonction pour [ouvrir/fermer la barre latérale](
https://phabricator.services.mozilla.com/D54005) et [préparer un onglet](
https://phabricator.services.mozilla.com/D71873).
J’ai aussi fait l’objet d’[un article sur le blog Mozilla Add-on](
https://blog.mozilla.org/addons/2021/03/25/friend-of-add-ons-melanie-chauvel/) pour ces contributions.
## Comment contribuer
À votre tour vous pouvez me donner un coup de main. :)
- Parlez de l’extension aux personnes de votre entourage qui pourraient être intéressées.
- Donnez à l’extension une note [sur addons.mozilla.org](
https://addons.mozilla.org/fr/firefox/addon/tabcenter-reborn/) (vous pouvez aussi écrire un commentaire).
- [Rapportez des bugs](
https://framagit.org/ariasuni/tabcenter-reborn/issues?scope=all&utf8=%E2%9C%93&state=opened), [aidez à la traduction](
https://translate.funkwhale.audio/engage/tabcenter-reborn/) (je maintiens déjà l’anglais, le français et l’espéranto), [améliorez le wiki](
https://framagit.org/ariasuni/tabcenter-reborn/wikis/home), ou [développez](
https://framagit.org/ariasuni/tabcenter-reborn/blob/main/CONTRIBUTING.md#developing) !
