Могу ли я скрыть встроенные вкладки вверху Firefox?

Я начал использовать Tree Style Tab в Firefox. Это отличное решение для случаев, когда у вас много вкладок, и вы хотите добавить некоторый уровень организации.

Становится все менее необходимым иметь список вкладок в верхней части моего браузера.

Можно ли скрыть список вкладок в верхней части браузера?

Чтобы скрыть стандартные вкладки, вам нужно добавить новый файл под названием userChrome.css и CSS-свойство visibility: collapse.

Для этого в Firefox нажмите на Меню -> Справка -> Дополнительная информация по устранению неполадок или перейдите к about:support в адресной строке.

В разделе Основы приложения будет раздел под названием Папка профиля с кнопкой Открыть папку.

В Папке профиля создайте новую папку под названием chrome. В папке chrome создайте или отредактируйте файл userChrome.css, если он уже существует.

Содержимое userChrome.css должно быть следующим.

/* скрывает стандартные вкладки */
#TabsToolbar {
  visibility: collapse;
}

Некоторые дополнительные необязательные модификации, которые можно добавить в userChrome.css, это:

/* скрывает строку заголовка */
#titlebar {
  visibility: collapse;
}

/* скрывает боковую панель */
#sidebar-header {
  visibility: collapse !important;
} 

Конфигурация, которую использует Xilin Sun, выглядит так:

/* скрывает стандартные вкладки */
#TabsToolbar {
  visibility: collapse;
}
/* оставляет место для кнопок окна */
#nav-bar {
    margin-top: -8px;
    margin-right: 74px;
    margin-bottom: -4px;
}

Попробуйте эти варианты и посмотрите, что выглядит лучше.

Чтобы ответить на ваш вопрос в комментарии, вам может понравиться этот вариант больше. Я попробовал использовать visibility, но это было чрезвычайно мерцающим и дергающимся при наведении.

/* Вариант 1 */
#TabsToolbar {
    opacity: 0.0;
}

#TabsToolbar:hover {
    opacity: 1.0;
}

/* Вариант 2 */
#TabsToolbar {
    visibility: collapse;
}

#navigator-toolbox:hover #TabsToolbar {
    visibility: visible;
}

Перед тем как закрыть и перезапустить, вам нужно открыть about:config и переключить свойство toolkit.legacyUserProfileCustomizations.stylesheets на true, чтобы это было включено.

Снова включить пользовательский CSS

1. Перейдите на about:config
2. Найдите toolkit.legacyUserProfileCustomizations.stylesheets
3. Переключите его, установив значение true

Создать userChrome.css

1. Перейдите на about:support
2. Справа от “Папка профиля” нажмите кнопку Открыть папку
3. Создайте новую папку под названием chrome
4. Откройте папку chrome и создайте новый файл под названием userChrome.css

Установите стиль в userChrome.css

В зависимости от того, включена ли строка заголовка, необходимо использовать разные CSS.

С строкой заголовка

Строка заголовка видима (Меню Гамбургер в правом верхнем углу -> Дополнительные инструменты -> Настроить панель инструментов..)

Результат (скриншот Ubuntu)

1. В файле userChrome.css вставьте код ниже, чтобы скрыть вкладки:

#TabsToolbar {
  visibility: collapse;
}

2. Закройте и перезапустите Firefox, чтобы увидеть изменения.

Без строки заголовка

Строка заголовка не видима (Меню Гамбургер в правом верхнем углу -> Дополнительные инструменты -> Настроить панель инструментов..)

Результат (скриншот Ubuntu)

1. В файле userChrome.css вставьте код ниже, чтобы скрыть вкладки:

#tabbrowser-tabs {
    visibility: collapse;
}

2. Закройте и перезапустите Firefox, чтобы увидеть изменения.

Альтернативный стиль

Без строки заголовка: мини-панель

Результат (Ubuntu)

Стиль

#tabbrowser-tabs {
  visibility: collapse;
}
#TabsToolbar .titlebar-buttonbox-container {
  max-height: 20px;
}
#TabsToolbar .titlebar-buttonbox-container {
  transform: scale(.7) translateX(12px);
}

Без строки заголовка: встроенные кнопки окна (с боксом для перетаскивания)

Результат (Ubuntu)

Стиль

/* Скрывает верхние вкладки */
#tabbrowser-tabs {
  visibility: collapse;
}
/* Контейнер: все элементы пользовательского интерфейса в верхней части окна */
#navigator-toolbox {
  display: grid;
  grid-template-columns: 1fr auto; /* URL-панель (1fr), кнопки минимизации/закрытия (auto) */
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  padding-top: 1px; /* Элементы немного смещены */
}
/* Контейнер: "Меню" - Файл, Правка, Вид и т. д. */
#toolbar-menubar {
  grid-column: 1 / span 2; /* Полная ширина: охватывает оба столбца */
  /* Улучшает внешний вид меню */
  align-items: center;
  padding: 0 0.5em;
}
/* Убирает дополнительный вертикальный отступ, когда меню показывается */
#toolbar-menubar &[autohide="true"] :root[tabsintitlebar] #navigator-toolbox:not([tabs-hidden]) > & {
  min-height: unset;
}
/* Контейнер: URL-панель, кнопки назад, кнопки дополнений и т. д. */
#nav-bar {
  /* Размещает ниже меню приложения, слева от кнопок минимизации/разворачивания/закрытия */
  order: 0;
  grid-row: 2;
}
/* Убирает правый отступ для последнего элемента в URL-панели */
#PanelUI-menu-button {
  padding-inline-end: 0 !important;
}
/* Контейнер: кнопки минимизации, разворачивания, закрытия и бокса для перетаскивания */
#navigator-toolbox #TabsToolbar {
  /* Размещает ниже меню приложения, справа от URL-панели */
  order: 1;
  grid-row: 2;
  /* Совмещает стиль этого контейнера с URL-панелью */
  background-color: var(--toolbar-bgcolor) !important;
  background-image: var(--toolbar-bgimage);
  color: var(--toolbar-color) !important;
  /* Правый отступ перемещается с кнопки меню на правый край */
  padding-right: var(--toolbar-start-end-padding) !important;
}
/* Встроенный бокс для перетаскивания */
#TabsToolbar .titlebar-spacer {
  background-color: rgba(0,0,0,0.06);
  margin: var(--toolbarbutton-outer-padding);
  border-radius: 8px;
  cursor: grab;
  width: 32px !important;
  height: 32px;
  align-self: center;
}
#TabsToolbar .titlebar-spacer[type="pre-tabs"] {
  display: none;
}
/* Улучшает внешний вид кнопок в #TabsToolbar */
#TabsToolbar .toolbar-items {
  margin: var(--toolbarbutton-outer-padding);
}
/* Контейнер: "Панель закладок" - находится под URL-панелью */
#PersonalToolbar {
  /* Размещает ниже URL-панели и кнопок назад */
  order: 2;
  grid-row: 3;
  grid-column: 1 / span 2; /* Полная ширина: охватывает оба столбца */
}
/* Если вы хотите скрыть одну из:
 - кнопку "Недавняя история браузера на всех окнах и устройствах"
 - выпадающий список "Список всех вкладок"
Сделайте это через "Настроить панель инструментов" и перетащите элементы с панели инструментов.
*/

Для MacOS вы также можете установить

#nav-bar {
    order: 0;
    width: 100%;
}

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

Настройка этих пользовательских стилей

Вам не нужно гадать и проверять стиль. У Firefox есть окно инструментов для самого браузера. Оно называется “Инструменты браузера”, но выглядит идентично инструментам разработчика сайта Firefox.

У Mozilla есть информация о том, как это использовать здесь: https://firefox-source-docs.mozilla.org/devtools-user/browser_toolbox/index.html

Суть следующая: Откройте инструменты разработки -> Перейдите в настройки -> Убедитесь, что выбраны “Включить отладку браузера” и “Включить удалённую отладку” -> Используйте Ctrl + Shift + Alt + i, чтобы запустить это.

Если вы используете Windows 10, я обнаружил, что следующее дает лучшее слияние:

1. Включите режим “Строка заголовка”, перейдя в меню гамбургер (☰) → Настроить → Установите флажок “Строка заголовка” в нижней части экрана.
2. Примените следующий userChrome.css:

#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar {
    opacity: 0;
    pointer-events: none;
}

#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
}

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

• Используйте Tree Style Tab и хотите скрыть горизонтальные вкладки
• Показать обработчик окна, потому что вам нужно много перемещать
• На macOS и Windows 10

macOS

Windows 10

Шаг 1: Включите CSS

1. Перейдите на about:config → Нажмите Принять риск и продолжить
2. Найдите toolkit.legacyUserProfileCustomizations.stylesheets
3. Переключите его, установив значение true

Шаг 2: Найдите CSS

1. Перейдите на about:support в адресной строке
2. Найдите таблицу Основы приложения → найдите строку Папка профиля → нажмите кнопку Показать в папке или Открыть папку. Обычно она указывает на
   • /Users/your-alias/Library/Application Support/Firefox/Profiles/your-id.Default User для macOS
   • Или C:\Users\your-alias\AppData\Roaming\Mozilla\Firefox\Profiles\your-id.Default User для Windows
3. В этой папке профиля создайте новую папку под названием chrome или откройте ее, если она уже существует.
4. В папке chrome создайте userChrome.css или отредактируйте его, если он уже существует.

Шаг 3: Отредактируйте CSS

1. Отредактируйте userChrome.css и добавьте:

/* Чтобы скрыть горизонтальные панели */
#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar {
    opacity: 0;
    pointer-events: none;
}

#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
}

2. (Необязательно) Если вы хотите, чтобы заголовок Tree Style Tab на боковой панели был меньше, добавьте:

/* Для Tree Style Tab */
#sidebar-header{
  font-size: 1em !important;
  padding: 5px 2px 5px 13px !important;
}

Шаг 4: Включите строку заголовка и перезапустите

1. Включите режим “Строка заголовка”

   • Щелкните правой кнопкой мыши на панели инструментов → выберите Настроить панель инструментов...
   • Или нажмите меню (☰) → Дополнительные инструменты → Настроить панель инструментов...

2. В левом нижнем углу экрана установите флажок “Строка заголовка” → нажмите кнопку Готово в правом нижнем углу

3. Перезапустите.

Этот CSS скрывает вкладки, но сохраняет меню и кнопки минимизации/разворачивания/закрытия.

#tabbrowser-tabs {  visibility: collapse;}

Работает в версии FF 83

Вот моя любимая настройка для macOS Monterey.

Сначала выполните эти шаги, чтобы включить userChrome.css.

Затем добавьте это в userChrome.css

#tabbrowser-tabs {
  visibility: collapse;
}

#titlebar #TabsToolbar {
  background-color: var(--toolbar-bgcolor);
  background-image: var(--toolbar-bgimage);
  padding-top: 5px;
}

Наконец, уберите пробел между кнопкой обновления и URL-панелью.

• Щелкните правой кнопкой мыши на пустой области панели инструментов и выберите Настроить.
• Перетащите разделитель между кнопкой обновления и URL-панелью с панели инструментов.
• Готово

Хорошо, это заняло у меня некоторое время, потому что для меня кнопки окна всегда начинали исчезать, как только я “сжимал” панель вкладок. После некоторых исследований я нашел решение на форуме поддержки Mozilla, которое позволило мне скрыть стандартные вкладки, сохранив при этом кнопки минимизации/разворачивания/закрытия окна и оставив немного места для перемещения окна без большой пустой строки заголовка. (Теперь это будет работать в Firefox V107.0.1 на Windows 10)

Чтобы сделать это, вот CSS, который нужно вставить в ваш “userChrome.css”, после того как вы установите параметр “toolkit.legacyUserProfileCustomizations.stylesheets” в True в разделе about:config.

#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
  opacity: 0;
  pointer-events: none;
}

#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
}

#titlebar {
    max-height: 1px;
}

#nav-bar {
    margin-top: -30px;
    margin-right: 146px;
    margin-bottom: 0px;
}

Теперь вам также нужно добавить “гибкое пространство” на вашу панель инструментов, чтобы было достаточно места для перемещения окна. (Щелкните правой кнопкой мыши в любом месте, нажмите на настройку и перетащите его в желаемое место) В результате окно, которое было хорошим для меня, выглядит так:

Вы можете просто нажать F11, чтобы перейти в полноэкранный режим. Это убирает стандартную панель вкладок среди прочего.

Вот отчет о моих результатах и любимом содержимом userChrome.css на Mac OS Ventura:

Результат:

Код:

#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
  opacity: 0;
  pointer-events: none;
}

#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
}

#titlebar {
    max-height: 15px;
}

/* Для Tree Style Tab */
#sidebar-header{
  font-size: 1em !important;
  padding: 5px 2px 5px 13px !important;
}

Результатом является маленькая строка заголовка с достаточным пространством для кнопок окна mac. Нет верхних вкладок и нет большой пустой области, где раньше были вкладки.

+1 за информацию о живой отладке файла userChrome.css.

Я также нашел следующие более простые пошаговые инструкции для живой отладки userChrome.css:

https://www.reddit.com/r/FirefoxCSS/comments/73dvty/tutorial_how_to_create_and_livedebug_userchromecss/

“Низкокодовое” решение – использовать CSS-стили MrOtherGuy для Firefox: https://github.com/MrOtherGuy/firefox-csshacks

Следуя руководству по настройке (так же, как и в других ответах здесь, для включения пользовательских стилей и создания каталога chrome в профиле), я создал файл userChrome.css со следующим содержимым (и загрузил указанные файлы в ту же директорию):

@import url(window_control_placeholder_support.css);
@import url(hide_tabs_toolbar_osx.css);