Предыдущая часть тут.

Когда коту нечего делать… Когда нечего делать разработчикам Firefox, они что-нибудь меняют в дизайне стартовой страницы. Некоторые такие изменения — однозначно в правильном направлении (например, возможность установить фоны с видами природы), хотя и сделаны тяп-ляп (если уж делать фотобэкграунды, так с автоматической сменой). Но, к сожалению, далеко не все изменения.

После очередного, 139-ого, обновления дизайнеры из Мозиллы порадовали вот такой картинкой:

Не знаю, чему и как учат современных дизайнеров, но когда учились мы (ещё по майкрософтовским гайдлайнам), нам рассказывали про т.н. «диагональ внимания»:

Взгляд юзера движется… мультикультурно сказать, из направления start в направлении end по обеим осям: inline (ось, вдоль которой пишут текст) и block (ось, перпендикулярная к ней). Что по-русски (и по-американски тоже) означает: «слева-направо, сверху-вниз». Разработчики Мозиллы, безусловно, в курсе этих мультикультурных заморочек — они пользуются CSS-свойством inset-inline-start (это мультикультурный вариант самого обычного left), чтобы иконка с булавкой переехала в левый верхний угол. Осталось понять, зачем. Что такого важного в статусе закрепа (pinning), что нужно мозолить глаза булавкой в самом важном углу каждой иконки? Тем более, на практике те, кто вообще пользуется секцией ярлыков на стартовом экране, закрепляют большинство иконок (если не все).

Напомню, как можно проводить политику культуры отмены в отношении спорного дизайна. Нам понадобится в папке профиля Firefox найти папку chrome. Под Windows в типичном случае путь будет таким: \AppData\Roaming\Mozilla\Firefox\Profiles\ВАШ_ПРОФИЛЬ\chrome.

Для переопределения внешнего вида элементов UI (меню, тулбаров и т.д.) там нужно создавать файл userChrome.css. (Пример, для чего это может понадобится, приведён в предыдущей части). Ну а для наших целей, для переопределения внешнего вида содержимого служебных страниц (about:new это служебная страница) понадобится файл userContent.css. Так сделано из соображений безопасности, ибо негоже, чтобы какой-нибудь аддон мог скрыть кнопку удаления аддонов из служебного интерфейса.

Что, товарищи, самое трудное в откате мозилловских изменений? Самое трудное в откате мозилловских изменений, товарищи, это вспомнить, как было раньше. Ну, или можно просто добиться чуть более приличного внешнего вида. К счастью, когда UI построен вокруг CSS, сделать это можно буквально несколькими строками (добавленными в userContent.css):

.shortcuts-refresh .top-site-outer .icon-pin-small
{
    transform: rotate(90deg) scale(0.85) !important;
    inset-inline-end: 0.1875rem !important;
    inset-inline-start: auto !important;
    opacity: 0.7 !important;
}

В результате чего булавка перестаёт мозолить измученный глаз:

Добавлю пару слов про наши изменения. Про inset-inline-start вы уже поняли, что это left. (Соответственно, inset-inline-end это right). Чтобы иконку можно было выровнять по правому краю, надо заменить явное значение свойства left на auto, а затем задать явное значение свойству right.

Любопытно, что для выравнивания по левому краю Мозилла использует значение 0.188rem (так и хочется сказать: «Мы отступ задавать не бросим!»). И легко догадаться, почему. В одной из предыдущих статей я подробно рассказывал про rem'ы и пиксели. Если коротко — при умолчальных настройках у пользователя (базовый размер шрифта — 16 пикселей), 3 пикселя составят 0.1875rem. Ну а до трёх цифр разработчики округлили это число в соответствии с какой-нибудь внутренней инструкцией. Можно было бы задать для правого отступа такое же округлённое значение, но точность — вежливость королей.

rotate(90deg) обеспечивает отражение, scale(0.85) — уменьшение, а для пущей незаметности мы делаем иконку слегка прозрачной (opacity: 0.7).

Повторю то, что уже писал. Пользуясь случаем, хочу попросить рекомендаций: чем вы пользуетесь в качестве стартовой страницы (в Firefox или Chrome)? Чтобы там были шорткаты (с полноценными preview сайтов), погода, калькулятор и что-нибудь ещё. Думаю, не запилить ли свой аддон со всем вышеперечисленным.