Настройка внешнего вида Firefox Proton

  • 15.06.2021
  • 19 044
  • 45
  • 17.02.2022
  • 73
  • 71
  • 2
Настройка внешнего вида Firefox Proton

Вышедшее в июне 2021 года обновление браузера Firefox под номером 89 принесло новое оформление программы под названием Proton, которое оказалось не по вкусу большому количеству пользователей. К счастью, в браузере Firefox можно вернуть старый интерфейс, воспользовавшись расширенными настройками браузера.

Настройка внешнего вида в Firefox 91 и новее

В Firefox 91 разработчики значительно "порезали" возможности использования старой темы оформления, в результате чего простых действий с расширенными настройками стало недостаточно. Тем не менее, все еще можно вернуть внешний вид к подобию старого. Для этого придется создать специальный файл css, отвечающий за отображение интерфейса Firefox.

Первым делом, нужно включить загрузку пользовательских стилей браузера. Для этого, в адресной строке браузера набираем about:config, и нажимаем Enter для перехода на страницу настроек. В том случае, если появится предупреждение о возможном вреде в случае изменения настроек, нажимаем на кнопку "Я принимаю на себя риск!".

Затем, используя окно поиска, находим toolkit.legacyUserProfileCustomizations.stylesheets и путем двойного клика, переключаем его значение с false на true.

После этого, переходим в директорию с профилями браузера, которая расположена по следующему пути:

Windows - %appdata%\Mozilla\Firefox\Profiles
Linux - ~/.mozilla/firefox/
Mac - ~/Library/Application Support/Firefox/Profiles или ~/Library/Mozilla/Firefox/Profiles

Там будет находится директория с именем профиля из случайных букв и цифр, вроде 69ghjabkb.default-release. Заходим в неё, и создаем там директорию chrome, а в ней файл userchrome.css, после чего начинаем заполнять его указанным ниже текстом.

Для применения изменений в userchrome.css нужно перезапустить браузер!

Уменьшаем промежуток между элементами главного меню:

:root {
	--arrowpanel-menuitem-padding: 4px 8px !important;
}

Было

Стало

Уменьшаем промежуток между элементами различных меню (верхнее меню Firefox, контекстное меню, панель закладок и т. д.):

menupopup > menuitem, menupopup > menu {
	padding-block: 2px !important;
}

Было

Стало.

Перейдем к редактированию панели вкладок. Уберем закругленные углы и отступ между вкладками и панелькой ниже:

.tab-background {
	border-radius: 0 0 !important;
	margin-block: 0 0 !important;
}

Было

Стало

Так же добавим синюю полосу у активной в текущий момент вкладки:

.tab-background[selected="true"] {
	border-top: 2px solid #0983ff !important;
}

Было

Стало

При этом, вместо синего цвета, можно вписать любой свой - к примеру, темно-серый #8f8d9a.

В итоге, содержимое userchrome.css должно иметь следующий вид:

:root {
	--arrowpanel-menuitem-padding: 4px 8px !important;
}
menupopup > menuitem, menupopup > menu {
	padding-block: 2px !important;
}
.tab-background {
	border-radius: 0 0 !important;
	margin-block: 0 0 !important;
}
.tab-background[selected="true"] {
	border-top: 2px solid #0983ff !important;
}

Так же, стоит отметить, что для включения темы "Системная" нужно в расширенных настройках установить значение параметра browser.proton.enabled на false.

Настройка внешнего вида в Firefox 89-90

Первое, что бросается в глаза - измененный вид вкладок в Firefox - если раньше они выглядели более квадратно, то теперь стали больше похожи на Google Chrome, получив широкие сглаженные углы и большие отступы по горизонтали. Так же отсутствуют какие-либо разделители между неактивными вкладками, что может показаться неудобным.

Вид вкладок Firefox с новым интерфейсом Proton

Для того, чтобы вернуть старый вид вкладок, нужно открыть страницу about:config, и там поменять значение параметра browser.proton.enabled на false.

Вид вкладок Firefox с включенным старым интерфейсом

Значение false у параметра browser.proton.enabled так же вернет старый вид главного меню программы - с уменьшенными отступами и значками у большинства пунктов меню.

Главное меню с интерфейсом Proton

Главное меню со старым интерфейсом

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

Контекстное меню Firefox с новым интерфейсом Proton

Для включения старого вида, нужно найти параметр browser.proton.contextmenus.enabled и установить ему значение false.

Контекстное меню Firefox со включенным старым интерфейсом

Была ли эта статья Вам полезна?

Комментарии к статье (45)

    • Юрий

    Добрый день!
    Подскажите, пожалуйста, как изменить внешний вид и цвет папки "Другие закладки"

    • Андрей

    Был бы благодарен, если бы кто-нибудь подсказал рабочую команду для отображения кнопки закрытия ("х") на неактивных вкладках.

    • Аноним

    Был бы благодарен, если бы кто-нибудь подсказал как вернуть отображение значка "x" при наведении курсора на НЕактивные вкладки

    • Сергей

    Подскажите, пожалуйста, как убрать из меню закладок -Показать боковую панель закладок, -Поиск закладок
    И включить отображение папки -Другие закладки.

    • Потыкал свой Firefox - не увидел подобных пунктов.

    • Папка профиля

    Папка с профилями браузера расположена по следующему пути:
    Меню браузера, Справка, Информация для решения проблем, Сведения о приложении, Папка профиля, Открыть папку.

    • Андрей

    Доброго времени суток!
    Такая проблема,при тыкании в поле введения адреса/поискового запроса снизу выезжают варианты или рекомендации,так вот,это поле которое выезжает,полностью прозрачное,от чего некомфортно читается.
    Применил все твики кроме цвета полосочки над активной вкладкой.

    • Анон

    Для "Firefox" версии 111 способ рабочий. Спасибо автору и комментаторам. Убрал отступы и закруглённые углы, сменил цвет панели вкладок.
    С помощью поисковика и метода тыка уменьшил высоту панели вкладок, вкладок и панели инструментов. Возможно, кому-то пригодится. Текст нужно вставить в упомянутый выше файл userchrome.css. Измените числа для изменения высоты.

    #TabsToolbar {
    height: 30px !Important;
    }
    #tabbrowser-tabs {
    height: 30px !important;
    }
    #urlbar {
    min-height: 22px !important;
    height: 22px !important;
    }

    • Waskord

    Я не смог найти папку где создавать "google", похожей папки нету

    • Читайте внимательнее, про папку "google" в статье вообще нет и речи. Что касается пути, где нужно создавать папку "chrome", то он так же указан в статье.

        • Waskord

        Короче проблема была то что я искал не в той папке, но спасибо что хотели помочь

    • Гость

    firefox 101, не работает! toolkit.legacyUserProfileCustomizations.stylesheets стоит на true

    • В свежеустановленном Firefox 102 все работает без каких-либо проблем. Проверяйте корректность выполненных действий.

    • Сергей

    Добрый день, скажите какой код добавить в css файл чтобы поменять цвет активной и неактивных вкладок?

    • Вам нужно использовать класс tab-background для того, чтобы задать цвет вкладок, а с помощью атрибута [selected="true"], можно поменять цвет выбранной на текущий момент вкладки.

      .tab-background {
      	background-color:  !important;
      }
      .tab-background[selected="true"] {
      	background-color: blue !important;
      }
    • alex

    Спасибо, то что искал. Убрал наконец гадские отступы, себе в userchrome.css оставил так

    .tab-background {
    	margin-block: 0 0 !important;
    }
    .tabbrowser-tab {
    	padding-left: 0 !important;
    	padding-right: 0 !important;
    }

    Recluse, в статью ещё можно добавить про параметр browser.uidensity из about:config (browser.uidensity=1 компактный интерфейс), на ноутбуке firefox с ним выглядит гораздо приятней

    • гена

    ????????????????????????? ГДЕ КОД ШАПКИ CSS КАК СВЯЗАТЬ CSS ФАЙЛ С Firefox?

      • Recluse

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

        • Евгений

        Не работает.

        Что делаю не так? Вот скриншот: https://disk.yandex.ru/i/RKx9U2cCTR35kQ
        Видно, что файл userchrome.css лежит в папке C:\Users\ххххххх\AppData\Roaming\Mozilla\Firefox\Profiles\5vrd9.default-release\chrome

        Все настройки в about:config применил.
        Файлик создал как текстовый.
        Мозилла 103.0.2

        • Если в адресной строке перейти по адресу about:profiles, то отобразит директорию C:\Users\ххххххх\AppData\Roaming\Mozilla\Firefox\Profiles\5vrd9.default-release?

    • Аноним

    за что разработчики так не любят своих пользователей?

    • Николай

    Здравствуйте! Версия 94.0.1, не работает, помогите, пожалуйста(

    • Ромео

    Даже после изменения стилей рекомендую ставить about:config -> browser.proton.enabled = false, т.к. иначе строка заголовка браузера (если она у вас включена) будет пропадать при каждом его перезапуске.

    • Роман

    Спасибо автору за наводку на .css!

    Установить цвет для ВСЕЙ панели табов:

    #TabsToolbar {
    	background-color: #8acafe !important;
    }

    + добавить тот же цвет неактивным табам, чтобы полностью вернуть \"старый\" вид,

    ИТОГО весь .css будет такой:

    @import \"./css/tabs/tab_throbber_grey_classic.css\"; <!-- строка импорта старой темы -!>-->
    
    :root {
    	--arrowpanel-menuitem-padding: 4px 8px !important;
    }
    menupopup > menuitem, menupopup > menu {
    	padding-block: 2px !important;
    }
    .tab-background {
    	border-radius: 0 0 !important;
    	margin-block: 0 0 !important;
    }
    .tabbrowser-tab:not([selected=true]):not([multiselected=true]):not([beforeselected-visible=\"true\"]) .tab-background {
    	border-right: 1px solid var(--lwt-background-tab-separator-color, rgba(0, 0, 0, .20)) !important;
    }
    .tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background {
    	border-radius: 0 !important;
    	background-color: #8acafe !important;
    }
    .tabbrowser-tab {
    	padding-left: 0 !important;
    	padding-right: 0 !important;
    }
    #TabsToolbar {
    	background-color: #8acafe !important;
    }
      • Фаерфоксер

      А как вернуть такую же черно-белую расцветку, которая была раньше? Чтоб буквы белые были на фоне черного неактивных вкладок. Очень бы хотелось, плиз. Пробовал менять цвет, но вышло что черные буквы сливаются в черном на вкладках.

      • Фаерфоксер

      Но всё равно спасибо за такой вариант! Он смотрибельный.

    • Аноним

    Странно. Все делаю как в инструкции, но ничего не меняется. Мозила 91.3.0 esr

      • Recluse

      Делали именно действия, описанные в разделе для версий 91 и новее?

    • Аноним

    Здравствуйте. Скажите, пожалуйста, какой код нужно вставить в userchrome.css, чтобы вернуть разделители между неактивными вкладками?

      • Recluse

      Добавьте это, должно работать:

      .tabbrowser-tab:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) .tab-background {
      	border-right: 1px solid var(--lwt-background-tab-separator-color, rgba(0, 0, 0, .20)) !important;
      }
      .tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background {
      	border-radius: 0 !important;
      }
      .tabbrowser-tab {
      	padding-left: 0 !important;
      	padding-right: 0 !important;
      }
    • алекс

    Папку "chrome" и файл "userchrome.css" в ней надо создавать не по пути
    %appdata%\Mozilla\Firefox\Profiles а по пути
    %appdata%\Roaming\Mozilla\Firefox\Profiles
    тогда заработает.

      • Recluse

      У вас явно какие-то сбитые настройки переменных окружения или странное расположение профиля Firefox. Переменная %appdata% как раз и ведет по пути C:\Users\ИМЯ ПОЛЬЗОВАТЕЛЯ\AppData\Roaming. Убедиться в этом можете сами - ссылка.

    • Гость

    Не описан способ для portable-версии

    • Игорь

    А можно как-то вернуть значки у кнопок в боковом меню и иконку рупора во вкладке, чтобы всегда отображалась при воспроизведении вместо идиотского "Воспроизводится"?

    • Дмитрий

    Можно сделать, чтобы границы между неактивными вкладками были видны?

      • Recluse

      Попробуйте добавить так же следующие строки:

      .tabbrowser-tab:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) .tab-background {
      	border-right: 1px solid var(--lwt-background-tab-separator-color, rgba(0, 0, 0, .20)) !important;
      }
      .tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background {
      	border-radius: 0 !important;
      }
      .tabbrowser-tab {
      	padding-left: 0 !important;
      	padding-right: 0 !important;
      }
    • User

    Очень благодарен за помощь! Спасибо большое! Рекомендую к применению, все работает 22-09-2021.

    • Аноним

    C:\Users\"имя пользователя"\AppData\Roaming\Mozilla\Firefox\Profiles\"случайное имя профиля"\chrome

    сюда поместил файл css - сработало, спасибо

    • антипротонист

    не работает сия метода
    toolkit.legacyUserProfileCustomizations.stylesheets выставил в true
    все значения с proton выставил в false (в том числе и browser.proton.enabled)
    созданный файл userchrome.css кинул и в C:\Users\USER\AppData\Local\Mozilla\Firefox\Profiles\
    и в C:\Users\USER\AppData\Roaming\Mozilla\Firefox\Profiles\
    эффекту НОЛЬ.
    пс: ос windows embedded 8.1 industry pro

      • Recluse

      В статье забыл дописать часть текста, в которой описывалось правильное местоположение, где должен быть css файл. Сейчас дополнил материал, должно все работать.

        • антипротонист

        вот теперь всё чётенько работает, премного благодарствую)

    • Аноним

    А если они в следующем обновлении и это отключат? Что тогда делать? Браузеров нормальных не осталось.

      • Recluse

      Маловероятно, что они отключат возможности настройки браузера через userchrome.css, в крайнем случае, придется немного поменять css код.

    • Аноним

    АААААгромное тебе спасибо, добрый человек!!

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Напоминаем Вам, что Ваше сообщение будет опубликовано только после проверки администратором сайта. Обычно это занимает 1-2 рабочих дня.