Vivaldi. Убираем эскизы страниц с боковой панели и ещё немножко настроек

    Во вторник вышла новая версия Vivaldi, а сегодня мы будем делать этот браузер чуточку удобней.

    Переносим наши настройки в отдельный css, убираем эскизы, меняем цвет браузера, делаем «живые» обои на экспресс-панели и ещё пара мелочей прямо под катом.

    image

    Переезжаем в свой CSS


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

    Открываем в папке Vivaldi\Application\1.0.83.381.0.94.2\resources\vivaldi\ файл browser.html.
    Здесь и строится весь интерфейс браузера с помощью css и js файлов.
    Что мы сделаем, так это после строчки:

    <link rel="stylesheet" href="style/common.css" />

    добавим строчку, которая будет загружать ещё и наш файл css. Пусть файл называется «custom.css» и лежит в папке рядом с browser.html.

    <link rel="stylesheet" href="custom.css" />

    Теперь нужно создать этот файл с расширением css.
    Как мы выяснили по предыдущей статье, кнопки «домой», «возврат», «переход» и поле поиска имеют имена классов home, rewind, next и searchfield соотвественно.
    И в новом чистом файле нам нужно лишь написать одну строчку:

    .home,.rewind,.next,.searchfield{display:none}
    

    Если же вам нужно что-то оставить для себя, то надо лишь убрать имя класса из перечисления.

    Теперь при новом обновлении нам не нужно будет мучаться с common.css. Достаточно будет лишь в browser.html добавлять вновь строчку для custom.css.

    Прячем эскизы


    Теперь по поводу эскизов страницы в боковых вкладках.
    Скрытый текст
    image


    Здесь мы просто уменьшим высоту вкладок для левой и правой панелей.

    #tabs-container.right #tabs .tab,#tabs-container.left #tabs .tab{height:26px;max-height:26px}
    

    Получаем результат:

    Скрытый текст
    image


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

    Всё вполне замечательно, но по мне так вкладки слишком широкие, я не могу расстаться с таким большим куском экрана.
    Я хочу сделать их поменьше, для этого в своём css пишу:

    #tabs-container.left,#tabs-container.right{flex:0 0 100px}
    

    Теперь по ширине они у меня совпадают с кнопками.
    Скрытый текст
    image


    А чтобы убрать эскизы при наведении на вкладки, пишем:

    .tooltip .tooltip-item .thumbnail-image{display:none}
    


    Делаем живые обои


    Сразу хочу предупредить, что следующий фокус не предназначен для слабых компьютеров.
    Мы будем вставлять на фон видео.
    Вот демонстрация того, как это выглядит:
    Или gif вариант (13 Мб): i.imgur.com/IdnVbsW.gifv

    Итак, кладём нужное видео для фона в формате *.webm, например, в папку Vivaldi\Application\1.0.94.2\resources\vivaldi\. Настоятельно рекомендую обеззвучить видео, чтобы открытая стартовая страница не стала для вас сюрпризом.
    Дальше открываем Vivaldi\Application\1.0.94.2\resources\vivaldi\components\startpage\startpage.html и вставляем в body строку:
    <video autoplay loop id="bg"><source src="/timescape.webm" type="video/webm"></video>

    Вместо timescape.webm пишем имя своего видео.
    А в head нужно вставить это, чтобы видео занимало всё пространство:

    <style type="text/css">
       video#bg {
    	position: fixed; right: 0; bottom: 0;
    	min-width: 100%; min-height: 100%;
    	width: auto; height: auto; z-index: -100;
    	}
     </style>
    

    Видео вставлено в Экспресс-панель, но мы его по прежнему не видим.
    Нужно убрать фоновое изображение. В custom.css добавляем:

    .startpage{background-image:none}

    Теперь если открыть браузер, то видео будет на фоне Экспресс-панели.

    Дальше по мелочам


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

    • Например, для того, чтобы сделать поуже вкладки сверху, достаточно написать
      #tabs-container.top #tabs .tab{width:100px; max-width:100px}

      Для нижних вкладок соответственно будет bottom вместо top.
      Скрытый текст
      image
    • Если вам кажется, что системные кнопки слишком большие, то можно их уменьшить
      #browser.win .window-buttongroup button.window-close{width:25px}

      Скрытый текст
      image
    • Тем, кому не нравится дефолтная расцветка браузера, могут поменять её на свой вкус.
      Вот, например, мой вариант. Здесь всё окрашено в тёмный цвет.

      #header{background-color:#1F262A}
      .toolbar.toolbar-addressbar{background-color:#1F262A}
      #tabs .tab.active{background-image:#1F262A}
      #tabs.tab-stacking-tooltip .tab.active .tab-group-indicator .tab-indicator.active{background-color:#1F262A}
      .favicon-current-background-color{background-color:#1F262A}
      .favicon-current-color{color:#1F262A}
      .favicon-current-border-color{border-color:#1F262A}
      #browser.popup{background-color:#1E1E1E}
      
    • А если нужно, чтобы боковые панели вкладок не сильно били белым цветом, можно и им поменять цвет:
      #tabs-container.left,#tabs-container.right{background-color:#1F262A}
      
      #tabs .tab:not(.active):hover{background-color:#1E1E1E!important}
      #tabs .tab:not(.active){background-color:#1F262A!important;color:#FFFFFF!important}
      

      Здесь мы ещё поменяли и цвет неактивных вкладок, а текст внутри них соотвественно сделали белым.
    • Цвет интерфейса при стартовой странице правится этой строчкой:
      .is-startpage .favicon-current-background-color{background-color:#777777!important}
      
    • А для любителей экзотики можно, например, убрать заголовок окна через #header{display:none}.


    На этом, пожалуй, всё.

    Надеюсь что-то из этого было для вас полезно или познавательно.

    Если у вас есть какие-то свои наработки или идеи, то милости прошу в комментарии.

    UPD:
    В комментариях(1 и 2) подсказали, что с помощью инструментов можно править интерфейс через dev tools.
    Share post

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 26

      +4
      Может кинуть всё это счастье в гитхаб? Открыть пулл-реквесты, запилить возможность создания своих настроек.
        +1
        Очень радует, что есть такие увлеченные люди! Спасибо!
          0
          а юзерскую панель закладок включить можно как нибудь?
          т.е. горизонтальную панель, под строкой адреса, на которую пользователь кидает наиболее посещаемые сайты…

          utforum.ru/eph/images/09ba984643091436638ff0f4312b8189.jpg
            0
            Его пока никак не включить, т.к. в коде его попросту нет.
            Если панель нужна, чтобы пользоваться постоянными закладками, то при желании можно самому создать и отрисовать панельку с нужными ссылками. Если же вы активно удаляете и добавляете закладки/папки, то лучше дождаться разработчиков и не лепить своих велосипедов.
            +11
            Недавно после прочтения первого поста от 23rd, в котором предлагается копаться в минимизированном css коде и искать классы с помощью названия картинок тех или иным элементов, возникла мысль создать отдельный пост с рекомендациями и примерами по теме изменения и анализа ресурсов Vivaldi. Все бы ничего если бы подобные темы не превращались в банальные посты о том как с помощью css «переместить блок в лево или право или поменять его бегкраунд». Но куда же без нашего любимого Developer Tools и живого редактирования? Мои 5 копеек по теме.

            У Хромиума есть такая замечательная штука как Remote debugging protocol, протокол который позволяет подключаться к браузеру Chrome на других устройствах и исследовать запущенные страницы. Поскольку оболочка Vivaldi является html страницей то давайте попробуем подключиться к файлу browser.html который является index'ом нашего браузера?

            1. Запускаем Vivaldi c параметрами "--remote-debugging-port=2015".

            2. Идем по адресу localhost:2015, находим ссылку вида chrome-extension://mpognobbkildjkofajifpdfhcoklimli/browser.html и делаем переход.

            3. Изучаем DOM браузера, меняем стили и видим наши изменения вживую.
            gif, 3mb


            4. Копируем, сохраняем нужные css правила в отдельный .css файл, предварительно подключив его в упомянутый в статье browser.html. Не закрываем Vivaldi, жмем CTRL+N и видим наши изменения в новом запущенном окне Vivaldi.

              +1
              Спасибо, не знал об этом, так будет гораздо легче.
                +1
                Надо было вам всё же пост создать. Тогда бы можно было карму вам плюсонуть :)
                  +3
                  Думаете 3 МБ gif не загрузится если скрыть ее под спойлер?:)
                    0
                    Если честно я даже ничего и не думал, просто так назвал, хотя есть привычка с другого сайта (спойлер загружает контент после открытия). Отредактировать не успел (
                    0
                    Сейчас попробовал — не работает. Говорит «невозможно отобразить страницу».
                    Что-то поменялось? Или у меня ручки кривые?
                      0
                      Всё работает.
                        0
                        Сейчас попробовал на рабочей win8 — действительно все работает. Дома на win10 — не хочет.
                    0
                    Меня больше интересует файл bundle.js. Как указано на официальном сайте, UI Вивальди написан на ReactJS, и интуиция мне подсказывает что в bundle.js как раз находятся его компоненты. У меня руки чешутся с ними поиграть/изменить. К сожалению, он минифицирован.
                      0
                      К сожалению, он минифицирован.

                      Что мешает привести в читаемый вид? Это же не обфускация.
                        0
                        Ну, не очень-то приятно править метод a компоненты c, да еще и без jsx. Нет, если выхода нет, можно и завести beautify, но было бы неплохо, если бы ребята из Vivaldi куда-нибудь бы это выложили, там же, наверное, не какой-нибудь сверхсекретный проприетарный код.
                          +1
                          Тут 2 варианта приятностей:

                          1. Сделать проект open source c исходниками на github.
                          2. Вернуть старые фишки Opera и соответствующий функционал чтобы не было желания залезать в ресурсы браузера.

                          =)
                      +1
                      Если установить на вивальди хромовский плагин React Developer Tools, а потом сделать копию файла browser.html, добавив в него код
                      <script>
                          window.isPopup = function(){return false;}
                      </script>
                      


                      и открыть его в самом Вивальди, то можно исследовать иерархию компонентов
                      image
                        0
                        Добавить бы всё это в браузер по умолчанию, чтобы можно было кастомизовать его под себя сразу из настроек, как это умеет Habit Browser для андроида.
                          –2
                          После удаления браузера троян остается (проблема всех Хромов — троян вкомплекте всегда).
                          image
                          P.S. Качал с офф сайта.
                            +1
                            Спасибо за огромный скриншот с минимум информацией, он очень кстати. Но всё же объясните что за троян и где его найти? Может стоит обновить антивирус или, как все нормальные люди, проверить на virustotal?
                              0
                              Дело не в антивирусе, а в активности. Проводился не анализ антивирусом (это бесполезно, как и сканирование мейлру агентов, защитников и прочего хлама), а анализ активности приложения. Троян так же «сидит» в модуле обновления, который прописывается как службы (причем, не одна, а две) и больше не удаляется оттуда никогда. Более детальный анализ активности кражи и отправки личной информации не проводил по отсутствию такового желания, проводил лишь на наличие такового — оно есть и это факт. И еще повторюсь это не проблема вашего браузера отдельно, а проблема всех «Хромов».
                                0
                                а как его обнаружить и как от него избавиться?

                                какие конкретно службы создаются трояном?
                                  0
                                  Чесное слово, не знаю. Если б это был отдельный троян, то да, а это ж сам движок — троян (по этой причине вышел браузер SRWare Iron[, между прочим, вредоносных действий с его стороны не заметил, но и им не пользуюсь). Наверное, единственный метод убрать троян — править код.
                            0
                            У меня почему то фон строки меню, адреса, панели закладок и заголовка активной вкладки на боковой панели меняется в зависимости от цветового содержания открытой (активной) страницы.

                            скриншоты с разными активными страницами






                            Как это отключить?

                            Можно переставить кнопки «вперед» «назад» «перезагрузить» местами так как это было в старой Опере?
                            я хочу чтобы было — «вперед» «перезагрузить» «назад»
                              0
                              Как это отключить?
                              Настройки — интерфейс — цветные вкладки.
                              0
                              Мои 3 копейки.
                              .toolbar.toolbar-addressbar .button-toolbar svg {width:16px}



                              Ибо исходный размер излишне шлямбурный.

                              То же касается и «Корзины»
                              #tabs-container .toggle-trash svg {width:12px}

                              Спасибо за наводку.

                              Only users with full accounts can post comments. Log in, please.