web-dev-qa-db-fra.com

Comment puis-je avoir plusieurs lignes avec des onglets sur Firefox 57+ (l'add-on Tab Mix Plus ne fonctionne plus)?

Comment puis-je avoir plusieurs lignes avec des onglets sur Firefox 57+, après que le module complémentaire Mix Mix Plux ne fonctionne plus (toutes les extensions héritées sont supprimées avec Firefox 57). Peut-être que je devrais juste attendre?

C’est peut-être la seule fonctionnalité que je ne pouvais pas trouver 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’ai quelques options, pas une seule.

  1. Comme suggéré dans ce fil , je peux rétrograder à 52 FF (avec des problèmes possibles ...) ou utiliser une version nocturne ...

  2. Une autre option possible consiste à utiliser un fichier [FF Current Profile Folder]/chrome/userChrome.css (il peut être nécessaire de 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 masquer des espaces/boutons, similaire à la réponse de R4zen, car la mienne contient une règle supplémentaire et est peut-être plus complète ... mais le résultat pourrait être le même pour la plupart des gens! J'ai fait tester ce code lors de la publication de la question, mais j'ai décidé de publier moins de code pour mieux comprendre ce qui se passe. Maintenant, je publie 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 */
    }
  • Où 5 dans max-height: calc(5*var(--tab-min-height)) !important; sont 5 lignes, hauteur calculée dynamiquement.

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

  • la pire chose - lorsque vous faites défiler les onglets à l'aide de Ctrl+Tab (dans la dernière commande récente) et que l'onglet basculé sur est sur une ligne différente (à plus de 5 lignes), la ligne avec l'onglet ne défile pas vers l'onglet actif . Le curseur doit être utilisé pour faire défiler manuellement les lignes et rechercher visuellement celle sélectionnée ... (Pour préciser: j'ai défini 5 lignes visibles sur un total de 15 lignes)

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

    1. Pour utiliser une fourche du code existant, quelqu'un a mentionné WaterFox (ou une autre fourchette).

Existe-t-il d'autres solutions (meilleures) à partir d'aujourd'hui?

Je suis à peu près sûr que nous aurons plus d'options à l'avenir, donc la bonne réponse aujourd'hui pourrait ne pas être la meilleure après une semaine ou un mois ...

firefoxfirefox-addon
39
Minister

Barre d'onglets multi-tâches avec déplacement de l'onglet (testé sur FF 61):

  1. Téléchargez et extrayez https://luke-baker.github.io/Firefox_chrome.Zip
  2. Copiez userChrome.xml dans votre dossier chrome.
  3. Ajoutez le contenu 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 utilisateur, par exemple. ~/.mozilla/firefox/g7fa61h3.default/chrome. Il n'existe pas par défaut, créez-le si nécessaire.

METTRE À JOUR

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

20
xuhcc

J'ai fait peu de modifications, cela devrait maintenant être sans bugs (même si vous épinglez des onglets, déplacez/glissez une fenêtre, faites défiler les onglets e.t.c.):

#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 vous trouvez que la première ligne d'onglets est invisible, ouvrez about: config et modifiez la valeur de browser.tabs.drawInTitlebar de la valeur par défaut true à 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 que d'utiliser 5 lignes ou plus, supprimez simplement 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ésactivez la possibilité de faire glisser les fenêtres par rangée (si vous n'utilisez pas plus de 5 lignes, vous pouvez le supprimer)

13
R4zen

Pour ceux qui s'intéressent au 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- avec-css/

L'article fait référence au projet git hub "Réglages CSS personnalisés pour Firefox 57+" https://github.com/Aris-t2/CustomCSSforFx Ce projet contient de nombreux réglages de l'interface utilisateur pouvant être mélangés et mis en correspondance. Le fichier README qui s'y trouve donne un bon aperçu de la manière de choisir et de choisir parmi les options.

Pour ce qui est de savoir si le répertoire chrome doit être créé ou non:

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

Le fichier userChrome-example.css était le 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 */

Même si j'avais besoin de définir browser.tabs.drawInTitlebar sur false, le code de R4zen a bien fonctionné pour moi avec et sans la ligne @namespace.

1
poetnerd

Je pensais que j'ajouterais comment faire cela. (Bien que cela soit fourni sur d'autres sites Web liés, il est préférable d'avoir toutes les informations au même endroit.)

  • Démarrer Firefox
  • entrez "about: support" dans la barre d'adresse
  • Dans la table, 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 les éditer. 

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

0
Sanjay Manohar

Le github repo d'Izheil a été mentionné dans les piles de commentaires ci-dessus, bien que l'URL partagée ci-dessus ne fonctionne pas pour moi (d'où un nouveau partage). Les étapes décrites ici m'ont aidé à retrouver mon apparence et mon environnement Firefox à un niveau acceptable après la mise à niveau vers la version bêta de FF66 (barre de tabulation non sombre et défilante avec 3 lignes). Je suis bloqué sur la chaîne bêta de FF Quantum, donc ceux-ci peuvent ou non vous aider.

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

The highlighted 4 files needed at a minimum

  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 souhaitais ajouter mes propres personnalisations (couleurs d'onglet épinglées, non chargées, etc.), j'ai apporté des modifications aux fichiers respectifs (les fichiers js) et suis passé aux étapes 3 et 4 pour les rendre efficaces.
  3. effacé tous les fichiers dans Macintosh HD⁩ -> ⁨Users⁩ -> [ACCOUNT] -> ⁨Library⁩ -> ⁨Caches⁩ -> ⁨Firefox⁩ -> ⁨Profiles⁩ -> [PROFILE_NAME] -> ⁨startupCache⁩. Notez que le dossier [PROFILE_NAME] est masqué par défaut.
  4. puis 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 vers un autre emplacement [sûr].
0
shuhradk