Только вчера состоялся показ первой тестовой версии Vivaldi, а у меня уже начали чесаться руки убрать некоторые ненужные мне элементы.
Итак, первое, что мне не понравилось — это наличие бесполезной кнопки «Домой», которая также есть в наличии и у Оперы (15+) под названием «Начальная страница».
Дальше идут кнопки «Возврат» и «Переход».
Ну и под конец мне бы не хотелось видеть дополнительную строку поиска справа.
С первым всё довольно просто. В папке Application1.0.83.38resourcesvivaldiresources находим иконку домика и видим название «symbol-home.png».
В комментариях к статье Vivaldi подсказали, что есть файл стилей под названием common.css. Здесь мы и будем искать нашу строку «symbol-home.png».
Поиск выдаёт единственный результат.
(-webkit-min-device-pixel-ratio:2){.button-addressfield.loading,.button-tabbar.loading,.button-toolbar-small.loading,.button-toolbar.loading{background-image:url(/resources/symbol-stopload@2x.png)}}.button-addressfield.home,.button-tabbar.home,.button-toolbar-small.home,.button-toolbar.home{background-image:url(/resources/symbol-home.png)}@media
Всё, что нам нужно, это написать display:none до/после/вместо background-image:url(/resources/symbol-home.png).
Получится:
(-webkit-min-device-pixel-ratio:2){.button-addressfield.loading,.button-tabbar.loading,.button-toolbar-small.loading,.button-toolbar.loading{background-image:url(/resources/symbol-stopload@2x.png)}}.button-addressfield.home,.button-tabbar.home,.button-toolbar-small.home,.button-toolbar.home{display:none}@media
Сохраняем, проверяем. Теперь бестолковой кнопки больше действительно нет.
По поводу кнопок возврата и перехода: беглый поиск по эскизам выдал изображения «symbol-next.png» и «symbol-rewind.png».
Проделываем ту же процедуру.
Находим отрывок кода:
(-webkit-min-device-pixel-ratio:2){.button-addressfield.forward,.button-tabbar.forward,.button-toolbar-small.forward,.button-toolbar.forward{background-image:url(/resources/symbol-forward@2x.png)}}.button-addressfield.next,.button-tabbar.next,.button-toolbar-small.next,.button-toolbar.next{background-image:url(/resources/symbol-next.png);min-width:24px!important;max-width:24px!important}@media
И после "!important" дописываем ;display:none.
Код кнопки возврата.
До:
.button-toolbar.rewind{background-image:url(/resources/symbol-rewind.png);min-width:24px!important;max-width:24px!important}@media
После:
.button-toolbar.rewind{background-image:url(/resources/symbol-rewind.png);min-width:24px!important;max-width:24px!important;display:none}@media
Всё действительно работает:
Осталось поле поиска, что находится справа.
Поиск по ресурсам дал лишь «input-search.png» и это не помогало мне решить проблему в нахождении названия нужного мне поля в коде.
Тогда я решил пойти несколько топорным путём. Я заметил, что при ресайзе окна размер поля не меняется, из чего я сделал вывод, что размер чётко прописан в коде. И тогда я в обычном MSPaint измерил и узнал длину поля — 175 пикселей.
Поиск по этому числу и вывел меня к нужной строке.
.searchfield{margin:4px 4px 4px 0;background:#fff;position:relative;height:26px;flex:0 1 175px;display:flex}.searchfield
Здесь вместо display:flex пишем также display:none.
Сохраняем, запускаем и видим тот результат, который я преследовал.
Да, интерфейс не нативный, это делает удар по производительности, но в тоже время мы имеем такой плюс, как полная настраиваемость.
В этой статье я лишь хотел показать, что в Вивальди есть возможность более тонкой настройки. Из-за того, что js и css файлы находятся в открытом виде, пользователь имеет полный доступ и контроль над интерфейсом. При желании можно добавить в панель свои кнопки со своими иконками и функциями. Если пользователю что-то нужно для его комфорта, то он может это сделать.
Я очень надеюсь, что разработчики Вивальди не спрячут в последующих версиях эти файлы в контейнеры с каким-нибудь расширением *.pak и не будут проверять их контрольные суммы при запуске, как это сделала Опера, а всё же оставят эту замечательную возможность пользователям.
Автор: 23rd
