Как я могу иметь несколько строк с вкладками в Firefox 57+ (надстройка «Tab Mix Plus» больше не работает)? ⇐ CSS

[Anonymous]

Как я могу иметь несколько строк с вкладками в Firefox 57+, если надстройка Tab Mix Plus больше не работает (все устаревшие расширения удалены из Firefox 57). Возможно, мне стоит просто подождать?
Возможно, это единственная функция, которую я не смог найти в Opera или Chrome (а в Chrome есть некоторые проблемы с конфиденциальностью), когда я последний раз их тестировал. Кажется, у меня есть несколько вариантов, а не один.

• Как предложено в этой теме, я могу перейти на FF 52 ESR (с возможными проблемами...) или использовать ночную сборку...
• Другой возможный вариант — использовать [FF Current Profile Folder]/chrome/userChrome.css (возможно, потребуется создать папку), куда я могу поместить некоторый код. Вот что я тестировал в FF 57, используя более 500 вкладок:

(EDIT 1: добавлено несколько правил CSS, чтобы скрыть некоторые пробелы/кнопки, аналогично ответу R4zen, поскольку мой содержит еще одно правило и, возможно, более полный... но результат может быть таким же для большинства людей! Я проверил этот код, когда разместил вопрос, но решил размещать меньше кода, чтобы было легче понять, что происходит. Теперь я публикую свой полный код, чтобы другие могли извлечь из него пользу.)

Код: Выделить всё

#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 */
}

• Где 5 в max-height:calc(5*var(--tab-min-height)) !important; — это 5 строк, динамически вычисляемая высота.

Приведенный выше код показывает вкладки, но их поведение довольно плохое:

• самое худшее - когда вы прокручиваете между вкладками с помощью Ctrl+Tab (в последнем недавнем порядке), а вкладка, на которую переключено, находится в другой строке (на расстоянии более 5 строк), строка с вкладкой не прокручивается до активной вкладки. Ползунок необходимо использовать для ручной прокрутки строк и визуального поиска выбранной...
  (Для уточнения: я установил 5 видимых строк из 15)
• вкладки нельзя перетаскивать, так как ядро ​​FF неправильно рассчитывает и перемещает вкладку в случайное положение.

• Использовать ответвление устаревшего кода, кто-то упомянул WaterFox (или другое ответвление).

Есть ли какие-либо другие (лучшие) решения на сегодняшний день?
Я почти уверен, что в будущем у нас будет больше вариантов, поэтому правильный ответ сегодня может быть не лучшим через неделю или месяц(ы)...
РЕДАКТИРОВАНИЕ, апрель 2019 г. (Firefox) 66.x):: после обновления до Firefox 66 у меня было слишком много строк, занимающих весь экран (это более 1000 вкладок). Мне пришлось отредактировать исходный код выше и добавить несколько дополнительных правил:

Код: Выделить всё

#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;
}

Возможно, вам придется настроить их под себя, если у вас другое количество строк (у меня 5 строк с вкладками). Удачи!


Подробнее здесь: https://stackoverflow.com/questions/473 ... ix-plus-no