Как я могу иметь несколько строк с вкладками в Firefox 57+ (дополнение Tab Mix Plux больше не работает)?

Как можно иметь несколько строк с вкладками в Firefox 57+, после того как надстройка Tab Mix Plux больше не работает (все устаревшие расширения удаляются в Firefox 57). Может, мне просто подождать?

Это, пожалуй, единственная функциональность, которую я не смог найти в Opera или Chrome (и у Chrome есть некоторые проблемы с конфиденциальностью), когда я последний раз их тестировал. Так что, похоже, у меня есть несколько вариантов, а не один.

  1. Как предлагается в этой теме, я могу понизить до FF 52 ESR (с возможными проблемами...) или использовать ночную сборку...

  2. Другой возможный вариант - использовать файл [FF Current Profile Folder]/chrome/userChrome.css (может потребоваться создать папку), где я могу разместить некоторый код. Вот что я тестировал в FF 57, используя вкладки 500+:

(РЕДАКТИРОВАТЬ 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 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 неправильно их вычисляет и перемещает вкладку в случайную позицию

    1. Чтобы использовать форк унаследованного кода, кто-то упомянул 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 строк с вкладками). Удачи!

Ответ 1

Многорядная панель вкладок с перетаскиванием рабочей вкладки (протестировано на FF 61):

  1. Загрузите и извлеките https://luke-baker.github.io/Firefox_chrome.zip
  2. Скопируйте userChrome.xml в вашу папку Chrome.
  3. Добавьте содержимое из userChrome.css в ваш userChrome.css.
  4. Загрузите MultiRowTabLiteforFx.uc.js в папку Chrome.

Ваша папка chrome - это папка с именем chrome расположенная в вашем профиле пользователя, например ~/.mozilla/firefox/g7fa61h3.default/chrome. Он не существует по умолчанию, поэтому создайте его при необходимости.

ОБНОВИТЬ

Файл userChrome.xml теперь можно получить из репозитория Izheil Quantum-Nox-Firefox-Dark-Full-Theme. Существует также две версии скрипта MultiRowTab для ограниченного и неограниченного количества строк вкладок.

Ответ 2

Я сделал несколько изменений, теперь должен быть без ошибок (даже если вы нажимаете вкладки, перемещаете/перетаскиваете окно, прокручиваете между вкладками и т.д.):

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

Если вы обнаружите, что первая строка вкладок невидима, откройте about: config и измените значение browser.tabs.drawInTitlebar со значения по умолчанию от true до false.

browser.tabs.drawInTitlebar     false

если вы хотите перетащить окно Firefox, нажав на свободное пространство заголовка больше, чем используя 5 или более строк, просто удалите код:

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

Он позволяет прокручивать строки, удерживая полосу прокрутки, когда она содержит более 5 строк, но с другой стороны отключает возможность перетаскивания окон ff по заголовку. (Если вы не используете более пяти строк, вы можете удалить их)

Ответ 3

Для тех, кто заинтересован в изменении этого пользовательского интерфейса CSS, есть полезная статья о ghacks.net, которая описывает, что делается: https://www.ghacks.net/2017/11/13/customize-firefox-57-with- CSS/

В статье упоминается проект git hub "Настройка пользовательских CSS для Firefox 57+" https://github.com/Aris-t2/CustomCSSforFx. Этот проект содержит множество различных настроек пользовательского интерфейса, которые можно смешивать и сопоставлять. Файл README дает хорошее представление о том, как выбрать и выбрать один из вариантов.

Что касается того, нужно ли создавать каталог хрома:

В системе Fedora, которую я использовал, этот каталог нужно было создать. В системе Mac он уже присутствовал и содержал файлы примеров, userChrome-example.css и userContent-example.css.

В файле userChrome-example.css указано следующее:

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

Хотя мне нужно было установить для браузера.tabs.drawInTitlebar значение false, как только я это сделал, код R4zen отлично работал для меня как с линией @namespace, так и без нее.

Ответ 4

Просто подумал, что я добавлю, как это сделать. (хотя он предоставлен на других связанных сайтах, лучше иметь всю информацию в одном месте.)

  • Запустить firefox
  • введите "about: support" в адресной строке
  • В таблице есть строка "Папка профиля". Нажмите кнопку "Открыть папку".
  • под "chrome" должны быть файлы "userChrome-example.css", которые вы можете переименовать в "userChrome.css" и редактировать.

Это сэкономило мне много времени, потому что в моем случае% appdata% указал на неправильный диск. Кроме того, мне пришлось установить notepad++, потому что окончание строк не было замечено в блокноте.

Ответ 6

Репозиторий Izheil github упоминался в стеках комментариев выше, хотя URL-адрес, представленный выше, не работал для меня (следовательно, повторный обмен). Вышеперечисленные шаги помогли мне восстановить мой внешний вид Firefox до приемлемого уровня после обновления до бета-версий FF66 (не темная и прокручиваемая панель вкладок с 3 рядами). Я застрял на бета-канале FF Quantum, поэтому они могут или не могут помочь вам.

Следующие шаги помогли мне на OSX, начиная с FF 66 b4.

The highlighted 4 files needed at a minimum.

  1. Выбранные 4 файла, показанные выше, необходимы как минимум в папке Chrome вашего профиля.
  2. Далее, если я хотел добавить свои собственные настройки (выгруженные, закрепленные цвета вкладок и т.д.), Я внес изменения в соответствующие файлы (файлы js) и прошел шаги 3 и 4, чтобы сделать их эффективными.
  3. очищены все файлы в Macintosh HD⁩ → ⁨Users⁩ → [ACCOUNT] → ⁨Library⁩ → ⁨Caches⁩ → ⁨Firefox⁩ → ⁨Profiles⁩ → [PROFILE_NAME] → ⁨startupCache⁩. Обратите внимание, что папка [PROFILE_NAME] по умолчанию скрыта.
  4. и затем я перезапустил свой экземпляр Firefox.
  5. Убедитесь, что в вашей папке chrome есть только файлы css, js и xml, которые вы хотите использовать. Сделайте резервную копию/переместите все остальное в другое [безопасное] место.