Comment puis-je avoir plusieurs rangées avec des onglets sur Firefox 57+ (l'extension "Tab Mix Plus" ne fonctionne plus) ?

Question

Comment puis-je avoir plusieurs rangées avec des onglets sur Firefox 57+, après le module complémentaire Tab Mix Plus ne fonctionne plus (toutes les extensions anciennes sont abandonnées avec Firefox 57). Peut-être devrais-je simplement attendre ?

C'est peut-être la seule fonctionnalité que je n'ai pas trouvée dans Opera ou Chrome (et Chrome a quelques problèmes de confidentialité), la dernière fois que je les ai testés. Il semble donc que j'aie plusieurs options, et non une seule.

1. Comme suggéré dans ce fil je peux rétrograder vers FF 52 ESR (avec des problèmes possibles...) ou utiliser un nightly build...

2. Une autre option possible est d'utiliser un [FF Current Profile Folder]/chrome/userChrome.css (il faudra peut-être créer un dossier), où je peux placer du code. Voici ce que j'ai testé sous FF 57, en utilisant plus de 500 onglets :

( EDIT 1 : Ajout de quelques règles css pour cacher certains espaces/boutons, similaire à la réponse de R4zen, car la mienne contient une règle de plus et est peut-être plus complète... mais le résultat pourrait être le même pour la plupart des gens ! J'avais testé ce code lorsque j'ai posté la question, mais j'ai décidé de poster moins de code pour faciliter la compréhension de ce qui se passe. Je poste maintenant mon code complet, afin que d'autres puissent en bénéficier).

#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#tabbrowser-tabs .arrowscrollbox-overflow-start-indicator,
#tabbrowser-tabs .arrowscrollbox-overflow-end-indicator,
#tabbrowser-tabs #alltabs-button {
    display: none;
}
#tabbrowser-tabs .tabbrowser-arrowscrollbox,
#tabbrowser-tabs .arrowscrollbox-scrollbox {
    display: block;
}
#tabbrowser-tabs .arrowscrollbox-scrollbox .scrollbox-innerbox {
    display: flex;
    flex-wrap: wrap;
    /*
    display: block;
    */
    overflow-y: auto !important;
    min-height: var(--tab-min-height); /* default */
    max-height: calc(5*var(--tab-min-height)) !important;
}
    #tabbrowser-tabs .tabbrowser-tab {
        flex-grow: 1;
        flex-wrap:wrap;
        min-width: 150px;
        vertical-align: bottom !important;
    }
    #tabbrowser-tabs .tabbrowser-tab,
    #tabbrowser-tabs .tabbrowser-tab .tab-stack .tab-background {
        height: var(--tab-min-height);
    }
        #tabbrowser-tabs .tabbrowser-tab .tab-stack {
            width: 100%;
        }
    #tabbrowser-tabs .tabbrowser-tab[pinned] {
        min-width: 0px;
        max-width: 40px;
    }
        #tabbrowser-tabs .tabbrowser-tab[pinned] .tab-icon-image:not([src]) {
            visibility: hidden !important;
        }
        #tabbrowser-tabs .tabbrowser-tab[pinned] .tab-text {
            display: none !important;
        }
    /* Active tab's style - visuallyselected="true" === ACTIVE TAB */
    #tabbrowser-tabs .tabbrowser-tab[visuallyselected="true"] {
        font-weight: bold;
    }
    #tabbrowser-tabs .tabbrowser-tab[visuallyselected="true"] .tab-background {
        background-color: lime !important; /* green, lime, LawnGreen-7CFC00, LimeGreen-32CD32, SpringGreen-00FF7F */
    }

• Dónde 5 en max-height: calc(5*var(--tab-min-height)) !important; sont 5 rangs, hauteur calculée dynamiquement.

Le code ci-dessus montre des onglets, mais leur comportement est assez mauvais :

• le pire : lorsque vous faites défiler les onglets à l'aide de la fonction Ctrl+Tab (dans la dernière commande récente), et que l'onglet sur lequel on est passé se trouve sur une ligne différente (à plus de 5 lignes de distance), la ligne avec l'onglet ne défile pas vers l'onglet actif. Il faut utiliser le curseur pour faire défiler manuellement les rangées et trouver visuellement celle qui est sélectionnée... (Pour clarifier : j'ai défini 5 rangées visibles sur un total de 15 rangées)

• les onglets ne peuvent pas être déplacés car le noyau FF calcule mal la position de l'onglet et le déplace à une position aléatoire

  3. Pour utiliser un fork du code hérité, quelqu'un a mentionné WaterFox (ou un autre fork).

Existe-t-il d'autres (meilleures) solutions à ce jour ?

Je suis presque sûr que nous aurons plus d'options à l'avenir, donc la bonne réponse aujourd'hui ne sera peut-être pas la meilleure dans une semaine ou un mois...

EDIT Avril 2019 (Firefox 66.x) : Après avoir mis à jour vers Firefox 66, j'avais trop de rangées couvrant tout l'écran (c'est 1000+ onglets). J'ai dû modifier le code original ci-dessus et ajouter quelques règles supplémentaires :

#tabbrowser-tabs .arrowscrollbox-scrollbox {
    max-height: calc(5*var(--tab-min-height)) !important;
    overflow: auto;
    margin-bottom: calc(1.25 * var(--tab-min-height)) !important;
}

Vous devrez peut-être les ajuster pour vous, au cas où vous auriez un nombre différent de rangées (j'ai 5 rangées avec des onglets). Bonne chance !

Answer 1

Barre d'onglets à rangées multiples avec déplacement des onglets fonctionnel (testé sur FF 61) :

1. Télécharger et extraire https://luke-baker.github.io/Firefox_chrome.zip
2. Copie userChrome.xml dans votre dossier chrome.
3. Ajouter du contenu à partir de userChrome.css à votre userChrome.css .
4. Télécharger MultiRowTabLiteforFx.uc.js dans votre dossier chrome.

Votre dossier chrome est un dossier nommé chrome situé sous votre profil d'utilisateur, par ex. ~/.mozilla/firefox/g7fa61h3.default/chrome . Il n'existe pas par défaut, il faut donc le créer si nécessaire.

UPDATE

userChrome.xml peut maintenant être obtenu à partir du fichier d'Izheil. Quantum-Nox-Firefox-Dark-Full-Theme repo. Il existe également deux versions du script MultiRowTab, pour un nombre limité et illimité de lignes d'onglets.

Answer 2

J'ai fait quelques modifications, maintenant il ne devrait plus y avoir de bugs (même si vous épinglez les onglets, déplacez/déplacez la fenêtre, faites défiler entre les onglets etc ) :

#tabbrowser-tabs .tabbrowser-arrowscrollbox,
#tabbrowser-tabs .arrowscrollbox-scrollbox {
    display: block;
}

.scrollbutton-up,
.arrowscrollbox-overflow-start-indicator,
.scrollbutton-down,
.arrowscrollbox-overflow-end-indicator {
    display: none !important;
}

#tabbrowser-tabs .arrowscrollbox-scrollbox .scrollbox-innerbox {
    display: flex;
    flex-wrap: wrap;
    /*
    display: block;
    */
    overflow-y: auto !important;
    min-height: var(--tab-min-height); /* default */
    max-height: calc(5*var(--tab-min-height)) !important;
}
#tabbrowser-tabs .tabbrowser-tab:not([pinned]) {
    flex-grow: 1;
    flex-wrap:wrap;
    min-width: 150px;
    vertical-align: bottom !important;
}
#tabbrowser-tabs .tabbrowser-tab,
#tabbrowser-tabs .tabbrowser-tab .tab-stack .tab-background {
    height: var(--tab-min-height);
}

#tabbrowser-tabs .tabbrowser-tab .tab-stack {
    width: 100%;
}

#titlebar-buttonbox {
    display: block !important;
    vertical-align: top !important;
}

#main-window[tabsintitlebar] #tabbrowser-tabs {
    -moz-window-dragging: no-drag;   
}

Si la première rangée d'onglets est invisible, ouvrez about:config et modifiez la valeur de browser.tabs.drawInTitlebar, qui passe de true (valeur par défaut) à false.

browser.tabs.drawInTitlebar     false

si vous voulez faire glisser la fenêtre de firefox en cliquant sur l'espace libre de la barre de titre plus qu'en utilisant 5 ou plusieurs rangées, il suffit de supprimer le code :

#main-window[tabsintitlebar] #tabbrowser-tabs {
    -moz-window-dragging: no-drag;   
}

Il est possible de faire défiler les lignes en maintenant la barre de défilement quand il y a plus de 5 lignes, mais d'un autre côté, il est impossible de faire glisser les fenêtres par la barre de titre (si vous n'utilisez pas plus de 5 lignes, vous pouvez le supprimer).

Answer 3

Pour les personnes intéressées par le fonctionnement de cette modification de l'interface utilisateur CSS, il existe un article utile sur ghacks.net qui décrit ce qui est fait : https://www.ghacks.net/2017/11/13/customize-firefox-57-with-css/

L'article fait référence au projet git hub "Custom CSS tweaks for Firefox 57+". https://github.com/Aris-t2/CustomCSSforFx Ce projet contient de nombreuses modifications de l'interface utilisateur qui peuvent être mélangées et assorties. Le fichier README donne un bon aperçu de la façon de choisir parmi les options.

En ce qui concerne la nécessité de créer ou non le répertoire chrome :

Sur le système Fedora que j'ai utilisé, ce répertoire a dû être créé. Sur le système Mac, il était déjà présent et contenait des fichiers d'exemple, userChrome-example.css et userContent-example.css.

Dans le fichier userChrome-example.css se trouvait le texte suivant :

/*
 * Do not remove the @namespace line -- it's required for correct functioning
 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */

Bien que j'aie dû définir la valeur false pour browser.tabs.drawInTitlebar, une fois que j'ai fait cela, le code de R4zen a bien fonctionné pour moi avec et sans la ligne @namespace présente.

Answer 4

J'ai juste pensé que je devais ajouter comment faire cela. (bien qu'elle soit fournie sur d'autres sites liés, il est préférable d'avoir toutes les informations en un seul endroit).

• Démarrer firefox
• saisissez "about:support" dans la barre d'adresse
• Dans le tableau, il y a une ligne "Dossier de profil". Cliquez sur le bouton "Ouvrir le dossier".
• sous "chrome", il devrait y avoir des fichiers "userChrome-example.css" que vous pouvez renommer en "userChrome.css" et modifier.

Cela m'a fait gagner beaucoup de temps car dans mon cas, le %appdata% pointait vers le mauvais lecteur. De plus j'ai dû installer notepad++ car les fins de lignes n'étaient pas vues par notepad.

Answer 5

Izheil's répertoire Github a été mentionné dans les commentaires ci-dessus, bien que l'URL partagée ci-dessus n'ait pas fonctionné pour moi (d'où un nouveau partage). Les étapes indiquées ici m'ont aidé à récupérer l'apparence de mon Firefox à un niveau acceptable après la mise à niveau vers les versions bêta de FF66 (barre d'onglets non sombre et déroulante à 3 rangées). J'ai été bloqué sur le canal bêta de FF Quantum, donc ces étapes peuvent ou non vous aider.

Les étapes suivantes ont fonctionné pour moi sur OSX à partir de FF 66 b4.

.

1. Les 4 fichiers sélectionnés ci-dessus sont nécessaires au minimum dans le dossier chrome de votre profil.
2. En outre, si je voulais ajouter mes propres personnalisations (couleurs des onglets déchargés, épinglés, etc.), j'apportais des modifications aux fichiers respectifs (les fichiers js) et passais par les étapes 3 et 4 pour les rendre effectives.
3. a effacé tous les fichiers dans Macintosh HD -> Users -> [ACCOUNT] -> Library -> Caches -> Firefox -> Profiles -> [PROFILE_NAME] -> startupCache . Notez que le dossier [PROFILE_NAME] est caché par défaut.
4. et ensuite j'ai redémarré mon instance de Firefox.
5. Assurez-vous que votre dossier chrome ne contient que les fichiers css, js et xml que vous souhaitez utiliser. Sauvegardez/déplacez tout le reste à un autre endroit [sûr].