Hatred's Log Place

DON'T PANIC!

Jan 16, 2020 - 3 minute read -

Firefox 72: убираем прокрутку большого количества вкладок

Небольшое введение.

Есть два поведения для большого количества вкладок:

  • Путь Google Chrome и производных: максимально сжимаем вкладки (правда потом они не отображаются и приходится неочевидным способом прокручивать колесиком мыши или горячими клавишами): image-20200116121003432

  • Путь Firefox: заполнять вкладками всё пространство, как будет занято, начинать их сжимать, если размер достигнут какого-то минимального значения, включать полосу прокрутки плюс добавляется выпадающий список: image-20200116121911753

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

Стоит отметить, что организация вкладок в том же Vivaldi (базируется на движке Chromium) для меня является эталонной. И реализовано оно значительно лучше, нежели в родительском браузере: image-20200116123424977

Итак, моя задача - добиться схожего поведения в Firefox.

До Firefox 72

До перехода на движок Quamtum можно было найти расширения для браузера, которые реализовали нечто подобное. А вот после перехода, для достижения нужного эффекта, стало необходимым править userChrome.css (располагается в $HOME/.mozilla/firefox/<PROFILE_NAME>/chrome/):

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/*
 * Setup minimal Tab width
 * Ref: https://www.reddit.com/r/FirefoxCSS/comments/70cvby/fully_disable_tab_overflow/
 */
.tabbrowser-tab:not([pinned]):not([selected]) {
    min-width: initial !important;
}

.tab-content {
    overflow: hidden !important;
}

В комментарии виден источник решения:

А вообще, крайне рекомендую для ознакомления канал Firefox CSS.

С версии Firefox 69, что бы эти настройки подтянулись нужно включить опцию toolkit.legacyUserProfileCustomizations.stylesheets (установить в true) в about:config.

Встречаем Firefox 72

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

Не буду вдаваться в подробности, но методом проб и ошибок получил такой userChrome.css:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

.tabbrowser-tab:not([pinned]):not([selected]) {
    min-width: initial !important;
    overflow: hidden;
}

.tabbrowser-tab:not([pinned]) {
    min-width: initial !important;
}

.tabbrowser-tab {
    border-right: 1px solid #aaa !important;
}

/* dividers between tabs */
.tabbrowser-tab::after,
.tabbrowser-tab::before {
  display: none !important;
}

Основная проблема: простой перенос overflow: hidden !important в .tabbrowser-tab (селекторы опускаю) убивает напрочь разделители между вкладками, которые задаются через псевдоэлемент .tabbbrowser-tab::after, а так как этот элемент является дочерним относительно самого .tabbrowser-tab, то настройки перекрытия действуют и на него.

Пришлось ручками рисовать бордюр справа и скрывать блок ::after. Минус данного решения: бордюр рисуется на всю высоту вкладки, но я готов с этим смириться.

Выглядит это так: image-20200116125819455

Отмечу, что при просто огромном числе вкладок, прокрутка всё же появится. Но даже для меня это будет чересчур :)

Отладка стилей

Не могу пройти и мимо вопроса - а как вообще понять, что редактировать, откуда брать классы и иерархию?

Ответов может быть несколько. Например, открыть встроенный стиль:

Но лучшим способом, будет использовать DevTools. Да, их можно применить не только для проверки или отладки страницы :) Но для начала, нужно включить. Для этого активируем DevTools комбинацией Ctrl+Shift+I (на macOS вместо Ctrl будет Cmd). Идём в настройки (нажимаем F1) и в секции Advanced settings активируем опции:

  • Enable browser chrome and add-on debugging toolboxes
  • Enable remote debugging

После чего DevTools для всего браузера можно активировать комбинацией Ctrl+Shift+Alt+I и подтвердив входящее подключение:

image-20200116131018761

Дальше всё аналогично обычному использованию, только выбираем элементы браузера, а не страницы.