После недавнего обновления Firefox я обнаружил, что его дизайнеры сделали бесполезный редизайн ... снова. С апдейтом прилетели скругленные углы для множества контролов и полей ввода (а кнопки «Вперёд»/«Назад» и «Перезагрузить страницу» так и вовсе стали круглыми). Почему так было сделано — я не знаю, может быть это какой-то «новый тренд» в дизайне.

Но что я точно знаю — я ненавижу бесполезные изменения в интерфейсе используемых мною программ, сделанные «чисто чтобы было», «чтобы отдел дизайна не уволили целиком» и т.д. Также, я терпеть не могу «внезапно» ставшие модными pill-shaped элементы интерфейса — с ними привычная программа начинает выглядеть как что-то сделанное для старшей группы детского сада.

К счастью, разработчики Firefox всё ещё не додумались отобрать у пользователей возможность кастомизировать внешний вид браузера с помощью CSS. Поэтому всё ещё можно избавиться от всех этих «гениальных» решений дизайнеров, инвестировав немного своего времени!

Подготовка

Практически каждый UI элемент Firefox'а можно кастомизировать при помощи CSS — точно так же, как это делается в случае обычной веб-страницы. Этот CSS-код должен быть сохранён в файле userChrome.css, который должен лежать в каталоге <каталог профиля Firefox>/chrome/userChrome.css. Например, в моём случае это каталог ~/.librewolf/jtegbyjg.default-release/chrome/userChrome.css.

Естественно, поскольку это Firefox, сходу всё не заработает. Когда-то файл userChrome.css автоматически подгружался при старте браузера, но разработчики убрали эту возможность вот тут. И теперь нужно сначала перейти по адресу about:config в адресной строке, и выставить опцию toolkit.legacyUserProfileCustomizations.stylesheets в true и перезапустить браузер — после этого всё заработает как и раньше.

Затем, чтобы понять какой CSS-селектор нам нужен, чтобы выставить для него 0px !important, GUI браузера должен быть обозреваемым, т.е. пользователь должен быть способен спокойно посмотреть какие CSS-селекторы и свойства за какую кнопку или поле ввода отвечают — точно так же, как это можно сделать с обычными HTML-страницами в Developer Tools. Это возможно сделать, но к сожалению не так просто, как это происходит например в Emacs :-).

Во-первых, нужно выставить опцию devtools.chrome.enabled = true в about:config и перезапустить браузер.
Во-вторых, каждый раз, когда захочется что-то поменять в интерфейсе браузера, надо будет сначала зайти в тот же about:config и переключить опцию devtools.debugger.remote-enabled в true. Эта опция будет сбрасываться обратно в false после выхода из браузера, увы.

После вышеописанных действий, открывается доступ к инструменту «Browser Toolbox», который позволяет редизайнить UI браузера так же, как и UI любой веб-страницы. Запустить его можно через «Menu -> More Tools -> Browser Toolbox», либо же воспользовавшись хоткеем Ctrl+Alt+Shift+I. Firefox попросит подтвердить, что вы разрешаете удалённое отладочное подключение с 127.0.0.1:

В итоге, новое окно, похожее на окно Developer Tools, появится на экране:

Дальнейшие шаги достаточно простые и напоминают работу с обычным окном Инструментов Разработчика в Firefox:

• Нужно выбрать мышкой интересующий нас элемент интерфейса, предварительно нажав Ctrl+Shift+C или же кликнув на иконку с курсором внутри прямоугольника в левом верхнем углу окна со скриншота выше.
• Запомнить id или class элемента интерфейса, который нас интересует.
• Поискать в панели справа те CSS-свойства, которые мы хотим поменять. Например, в случае скруглённых углов это будет что-то вроде --xxx-radius:. И поменять эти свойства на лету, чтобы проверить, что наша догадка верна и мы нашли то что искали.
• Сохранить найденную пару CSS-селектор/CSS-свойство в userChrome.css, чтобы изменения сохранились после рестарта браузера.

Избавление от скруглённых углов

Здесь, для наглядности, я использовал новый чистый профиль браузера. Из расширений был установлен только uBlock, всё остальное должно быть как в новом, только что установленном Firefox.

Часть «рецептов» были найдены не мной, а взяты из разнообразных мест в Интернете, вроде сабреддита r/FirefoxCSS, в которые я первым делом заглянул, когда скругленность элементов интерфейса меня доконала.

Исправление кнопок в тулбаре

По умолчанию, кнопки «Вперёд», «Назад» и т.д. почему-то … полностью круглые:

Поскольку кнопки в других программах на моем компьютере прямоугольные (как минимум уже 2-3 десятилетия), я взялся за исправление этой несуразности в первую очередь. Всё это чинится вот таким кодом в userChrome.css:

:root {
    --toolbarbutton-border-radius: 0px !important;
}

В результате, кнопки «Вперёд», «Назад», «Перезагрузить страницу», кнопки для расширений, кнопка главного меню, остальные кнопки в этой же панели, а также кнопки в панели закладок вновь становятся прямоугольными! Также, вкладки браузера тоже возвращают себе былую прямоугольность:

Меню бразуера

«Дизайнеры» не забыли испоганить и меню. Главное меню браузера стало крайне скруглённым:

Контекстное меню тоже «скруглили», но не так сильно (согласованность интерфейса? нет, не слышали :-))))

Код из r/FirefoxCSS для исправления этого безобразия:

:root {
    --arrowpanel-border-radius: 0px !important;
    --panel-border-radius: 0px !important;
}
* menupopup, :is(menupopup, panel)[type=arrow] {
     --arrowpanel-border-radius: 0px !important;
     --panel-border-radius: 0px !important;
     border-radius: 0px !important;
}

В результате, после перезапуска браузера, все меню вернулись в норму:

Как видно, выбранный мышкой пункт меню по прежнему имеет скруглённые углы. Это недоразумение будет исправлено в следующем разделе.

Избавление от скруглённых углов во множестве мест

Этот код я тоже нашёл на r/FirefoxCSS. Этот небольшой кусочек кода для userChrome.css избавит нас от скруглённых углов во множестве элементов UI в Firefox:

:root {
    --tab-border-radius: 0px !important;
    --button-border-radius: 0px !important;
    --toolbarbutton-border-radius: 0px !important;
    --card-border-radius: 0px !important;
    --card-border-radius-compact: 0px !important;
    --card-cover-image-border-radius: 0px !important;
    --input-text-border-radius: 0px !important;
    --menuitem-border-radius: 0px !important;
    --popup-border-radius: 0px !important;
    --panel-menuitem-border-radius: 0px !important;
    --border-radius-circle: 0px !important;
}

Он возвращает прямоугольность выбранным пунктам меню, строке ввода URL, переключателям и т.д.:

Диалог подтверждения выхода

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

Здесь как раз вступает в игру Browser Toolbox, описанный в самом начале. Я его запустил, нажал Ctrl+Q, чтобы диалог подтверждения выхода отобразился на экране и выбрал его в окне Browser Toolbox. После недолгого созерцания свойств CSS, виновник лишних скруглений был обнаружен:

Оказалось, что к коду из предыдущего раздела достаточно добавить следующие 4 строки, чтобы диалог стал прекрасно прямоугольным:

--border-radius-xsmall: 0px !important;
--border-radius-small: 0px !important;
--border-radius-medium: 0px !important;
--border-radius-xlarge: 0px !important;

Прямоугольные элементы интерфейса

Как видно из скриншота выше, не все элементы интерфейса избавились от скруглённых углов — например во вкладке с настройками браузера всё по прежнему круглое :-(.

Решение этой проблемы такое же, как и прежде:

• Вызвать окно Browser Toolbox
• Выбрать нужный элемент интерфейса
• Найти CSS-свойство, которое его «скругляет»
• Прописать 0px !important для него.

Таким способом я нашёл и исправил ещё несколько свойств, относящихся к форме элементов интерфейса:

--input-search-border-radius: 0px !important;
--page-nav-button-border-radius: 0px !important;
--page-nav-button-border-radius-focused: 0px !important;
--panel-border-radius: 0px !important;

А также кучу свойств, которые уже были описаны выше (см. код, начинающийся с :root). Тем не менее, почему-то все мои изменения работали только если их применить внутри браузера, через Developer Toolbox. А правки в userChrome.css не оказывали никакого влияния на внешний вид вкладки с настройками.

Как оказалось, файл userChrome.css настраивает внешний вид самого браузера, но не контента, который в этом браузере отображается. А вкладка с настройками браузера оказывается относится не к самому браузеру, а как раз к отображаемому им контенту :-D. К счастью, и тут разработчики Firefox забыли забрать у пользователя возможность кастомизации.
В том же каталоге chrome/ можно создать файл userContent.css, код в котором будет влиять на то, как будут отображаться страницы в браузере. Чтобы ограничить изменения (на всякий случай) только страницей с настройками Firefox, я использовал селектор #preferences-root и в итоге убрал скругления в ней при помощи следующего кода:

#preferences-root {
    --border-radius-circle: 0px !important;
    --border-radius-xsmall: 0px !important;
    --border-radius-small: 0px !important;
    --border-radius-medium: 0px !important;
    --border-radius-xlarge: 0px !important;
    --button-border-radius: 0px !important;
    --card-border-radius: 0px !important;
    --card-border-radius-compact: 0px !important;
    --card-cover-image-border-radius: 0px !important;
    --input-search-border-radius: 0px !important;
    --input-text-border-radius: 0px !important;
    --menuitem-border-radius: 0px !important;
    --page-nav-button-border-radius: 0px !important;
    --page-nav-button-border-radius-focused: 0px !important;
    --panel-border-radius: 0px !important;
    --panel-menuitem-border-radius: 0px !important;
    --popup-border-radius: 0px !important;
    --tab-border-radius: 0px !important;
    --toolbarbutton-border-radius: 0px !important;
}

Прямоугольная новая вкладка

Осталась ещё пара вещей, состояние которых мне не нравилось: страница с предупреждением о недоступности сайта и "Новая вкладка".

Достаточно быстро я обнаружил, что содержимое новой вкладки имеет класс nova-tokens, а сообщение о недоступности сервера пользуется классом felt-privacy-body. И замена CSS-селектора из раздела выше на:

#preferences-root,
.felt-privacy-body,
.nova-tokens {

исправляет внешний вид двух упомянутых страниц:

Все вышеописанные трюки с CSS-стилями не являются законченным набором, исправляющим всё безумие «дизайнеров» Firefox'а. Я оставил за бортом ещё много проблемных мест, например содержимое окна about:config, которое (сюрприз) тоже невообразимо скруглённое. Но, при помощи Designer Toolbox можно вполне спокойно исправить и это окно, пользуясь приведёнными примерами и экспериментируя.

Прочие кастомизации Firefox

Здесь я опишу то, что не относится к проблеме «округления» — к сожалению, в Firefox и без этого полно мест, которые стоит привести в порядок, после того как их коснулись руки «дизайнеров».

Рамка вокруг поля ввода URL

Я смотрю на этот тулбар:

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

С давних времен кнопки выделялись цветом и/или рамкой вокруг кнопки (иногда даже псевдо-3D, как в Motif, Windows и т.д.) — вот например кнопки в программе HandyShpr (список покупок) для PalmOS:

BTW, скруглённые кнопки тут — часть дизайн-кода PalmOS, который не меняли по желанию левой пятки дизайнера. Мне довелось подержать в руках в основном мейнстримные модели КПК на PalmOS — с монохромным жидкокристаллическим и с цветным трансрефлективным экраном, на AA-батарейках и с аккумулятором — и у всех у них интерфейс был в целом похожий (за вычетом очевидных различий из-за разного железа). Всё ради того, чтобы пользователь мог просто взять новое устройство, синхронизировать его память со старым девайсом и сразу начать пользоваться, не тратя время на привыкание и замену старых привычек новыми.

Вернёмся к нашим баранам контролам. Для рамки вокруг поля для ввода URL я нашёл вот этот сниппет на r/FirefoxCSS:

.urlbar-input-container {
    border: 1px solid #002b36 !important;
}

Чтобы получить рамки вокруг главных кнопок, я использовал следующие CSS-селекторы:

#back-button > image,
#downloads-button > stack,
#forward-button > image,
#PanelUI-menu-button > stack,
#reload-button > image,
#stop-reload-button > image,
#tabs-newtab-button > image,
#unified-extensions-button > image {
    border: 1px solid #002b36 !important;
}

В итоге получилась вот такая панель:

Как видно, у кнопок "Загрузки" и "Расширения" рамки разных размеров — как я предполагаю, это из-за того, что иконки внутри этих кнопок тоже разных размеров. С этим я не разбирался, поскольку собирался насовсем убрать кнопку "Расширения" с панели — не имею ни малейшего представления зачем её добавили, ведь список расширений можно открыть через соответствующий пункт в главном меню, а часто используемые расширения обычно можно добавить прямо на панель, ещё с тех времён, когда одна зависшая вкладка приводила к зависанию всего браузера :-).

Кнопка убирается при помощи CSS кода:

#unified-extensions-button {
    display: none !important;
}

Промежуток между вкладкой и её содержимым

На предыдущем скриншоте видна ещё проблема с интерфейсом. Между вкладкой и её содержимым зачем-то вставили пустоту. Зачем это сделали? Непонятно — ведь «предок» вкладки в этом месте непрозрачен:

После недолгих поисков в Browser Toolbox я нашёл, что за пустое место отвечает vbox с классом tab-background, а свойство margin-block регулирует высоту пустого места:

Соответственно, следующий код избавляет от пустого места:

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

Смена главного цвета

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

Но этот яркий фиолетовый оттенок … не подходил вообще никуда! И я нашёл как это поменять. Следующий код для chrome/userContent.cssменяет фиолетовый на синий цвет из палитры Solarized Light:

:root {
    --color-accent-primary: #268bd2 !important;
}

В результате получилось вот это:

Конечно, это не идеально выверенный UI, но по крайней мере теперь можно быть уверенным — если дизайнеры Firefox выкатят новые ужасы в очередном обновлении, то это можно будет откатить обратно.