Выделить вкладку страницы в фокусе в Firefox

Автор: | 03.12.2020
Когда вкладок много, и непонятно, которая из них открыта прямо сейчас, то можно взять быка за CSS. Раньше-то мы щупали за вымя расширения Firefox, коих было больше, чем нужно, и если у вас раньше hdd не завывал при запуске FF с шестьюдесятью расширениями на борту, то у вас не было детства. Но после перехода FF на новый движ, движ с расширениями завял, бо их же переписывать надо. А старый CSS остаётся в строю, ака берданка (она уже не в строю). Всего-то надо:
  • Открыть в Firefox страницу “about:config”
  • Найти параметр toolkit.legacyUserProfileCustomizations.stylesheets
  • Одним даблкликом сделать его = TRUE
  • Открыть страницу “about:profiles
  • Узнать там КОРНЕВОЙ каталог своего профиля Firefox.
    • Кроме корневого есть и локальный каталог, который находится в профиле юзера. Игнорируем локальный каталог.
    • Скорее всего, будет представлено несколько профилей браузера. Надо найти только тот, у которого в разделе «Профиль по умолчанию» отмечено «да», остальные игнорим.
    • Название профиля будет нечеловеческим, вроде “04l0hhhm.default-1234551996427” или “p191htyk.default-release”. Это нормально.
  • Открыть — повторюсь — КОРНЕВОЙ каталог своего профиля — и закрыть Firefox.
  • Создать в корневом каталоге своего профиля новый каталог — “chrome”
  • Создать в новом каталоге “chrome” новый файл “userChrome.css”
  • Записать в файл “userChrome.css” код для управления стилем вкладки в фокусе.
Например, такой:
/* Active Tab text color */
.tabbrowser-tab[selected="true"] {
    font-weight: bold !important;
    font-size: 15px !important;
    color: #d9c3c5 !important;
    }
/* Active Tab background color */
.tab-background[selected="true"] {
    background-color: #4753bd !important;
    background-image: none !important;
    } 
  • Запустить Firefox.
Если кажется глазовырвно, то надо открывать какой-нибудь GIMP или Paint и выбирать rgb-код более подходящих цветов. Рекомендуется использовать пастельные тона, а не black/white, мы же не на тропе войны.

А давайте ещё фокусы!

А давайте. Заставим Firefox отображать вкладки в несколько рядов. В тот самый файл “userChrome.css” надо добавить инструкции для отображения вкладок в несколько строк (взяты отсюда):
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_tabs.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Makes tabs to appear on multiple lines */
/* Tab reordering will not work and can't be made to work */
/* You can use multi-row_tabs_window_control_patch.css to move window controls to nav-bar*/

/* You might want to move tabs-new-tab-button outside tabs toolbar for smoother behavior */

/* Change the --multirow-n-rows to change maximum number of rows before the rows will start to scroll  */

:root{
    --multirow-n-rows: 2;
    --multirow-tab-min-width: 80px;
    --multirow-tab-dynamic-width: 1; /* Change to 0 for fixed-width tabs using the above width. */
}

/* Scrollbar can't be clicked but the rows can be scrolled with mouse wheel */
/* Uncomment the next line if you want to be able to use the scrollbar with mouse clicks */

/* #tabbrowser-arrowscrollbox{ -moz-window-dragging: no-drag } */

/* Uncommenting the above makes you unable to drag the window from empty space in the tab strip but normal draggable spaces will continue to work */

#tabbrowser-tabs{
  min-height: unset !important;
  padding-inline-start: 0px !important
}

@-moz-document url(chrome://browser/content/browser.xhtml){
  #scrollbutton-up~spacer,
  #scrollbutton-up,
  #scrollbutton-down{ display: var(--scrollbutton-display-model,initial) }

  scrollbox[part][orient="horizontal"]{
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
    max-height: calc((var(--tab-min-height) + 2 * var(--tab-block-margin,0px)) * var(--multirow-n-rows));
    scrollbar-color: currentColor transparent;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    scroll-snap-type: y mandatory;
  }
}

.scrollbox-clip[orient="horizontal"],
#tabbrowser-arrowscrollbox{
  overflow: -moz-hidden-unscrollable;
  display: inline;
  --scrollbutton-display-model: none;
}

.tabbrowser-tab{ scroll-snap-align: start; }

#tabbrowser-tabs .tabbrowser-tab[pinned]{
  position: static !important;
  margin-inline-start: 0px !important;
}

.tabbrowser-tab[fadein]:not([pinned]){
  min-width: var(--multirow-tab-min-width) !important;
  flex-grow: var(--multirow-tab-dynamic-width) !important;
  /*
  Uncomment to enable full-width tabs, also makes tab dragging a tiny bit more sensible
  Don't set to none or you'll see errors in console when closing tabs
  */
  /*max-width: 100vw !important;*/
}

.tabbrowser-tab > stack{ width: 100%; height: 100% }

/* remove bottom margin so it doesn't throw off row height computation */
#tabs-newtab-button{ margin-bottom: 0 !important; }

#tabbrowser-tabs[hasadjacentnewtabbutton][overflow="true"] > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button {
  display: flex !important;
  align-items: center; /* Fx <112 compatibility */
}

#alltabs-button,
:root:not([customizing]) #TabsToolbar #new-tab-button,
#tabbrowser-arrowscrollbox > spacer,
.tabbrowser-tab::after{ display: none !important }
Условно всё в порядке. Если нужно отображать вкладки в три и больше рядов — изменить циферку у параметра “multirow-n-rows”. Ширина вкладок если не устраивает — изменить “multirow-tab-min-width”. Придётся привыкнуть к тому, что перетаскивание вкладок покажется хаотичным — если двигаешь вкладку со второго или третьего ряда, она резво метнётся в первый ряд. И ещё какое-то время будет странно не видеть вкладку на том месте, где она была — их прокрутка не даётся даром. К этому тоже привыкаешь. Посматривать весь список вкладок сразу поможет расширение “Tree Style Tab”.

Выделить вкладку страницы в фокусе в Firefox: 2 комментария

  1. Мария

    У меня название корневого каталога вполне человеческое. Удалось раскрасить вкладку, спасибо.

  2. Анатолий Парченко

    Гений
    Спасибо тебе добрый человек

Добавить комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.