Расширение для очистки данных в браузере вивальди. Быстрые команды, горячие клавиши, жесты. Инструменты разработчика в доке

Всем привет!

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

Веб-панели

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

Для добавления новой веб-панели нажмите "+" и введите URL. После добавления веб-панели её иконка появится в боковой панели, под встроенными панелями браузера. Клик на этой иконке откроет соответствующую страницу прямо внутри боковой панели.

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

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

Кнопки расширений

Мы планируем предоставлять пользователям в браузере все популярные функции «из коробки», но мы понимаем, что невозможно учесть вкусы всех пользователей. Поэтому мы встроили в браузер Vivaldi поддержку расширений. Базовая поддержка уже была реализована раньше, в новой сборке мы добавили поддержку кнопок расширений, размещаемых прямо в интерфейсе браузера. Таким образом расширилось число расширений, поддерживаемых в Vivaldi, а также вы получили больше возможностей по работе с расширениями.

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

Подробности в адресной строке

Мы давно обещали сделать более информативной загрузку страниц, и теперь мы своё обещание выполняем. Информация о загрузке страниц теперь размещается прямо в адресной строке.

Производительность: вкладки и закладки

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

Другие улучшения

В дополнение к вышеуказанным изменениям, которые на виду, мы сделали и много изменений, незаметных внешне. Эти изменения коснулись панели закладок и заметок. Также мы обновили ядро браузера до версии Chromium 45.0.2454.43. Полный список изменений вы можете посмотреть ниже.

Известные проблемы

  • Не работают ссылки на странице истории
  • Вкладки при боковом расположении поломались

На этом пока всё на сегодня. Загрузить новую сборку можно по ссылкам ниже:

  • Windows 64-bit (экспериментальная)
Полный список изменений:
  • VB-8062 Add an option to open URL"s in same/new tab from QC
  • VB-8428 No difference in disabled and blurred state for tool bar buttons
  • VB-8348 Really disable Google translate
  • VB-88 Web panels missing
  • VB-8392 Create an Empty State for Notes panel
  • VB-8387 HTML menu"s text gets cut in bookmarks bar
  • VB-8378 Capitalize short-cuts in Linux menus
  • VB-7686 Two selections in the address field drop-down - independently for mouse and keyboard
  • VB-56 Progress info is missing
  • VB-2454 Page up/Page down does not work in address bar drop-down menu
  • VB-8316 Panel is rendered when it is invisible
  • VB-8078 Drag and drop in bookmark tree without clicking on bookmark item first
  • VB-8255 Add bookmark dialog disappears shortly after being opened
  • VB-8298 Re-add web navigation helpers.
  • VB-3198 Implement browser and pageActions
  • VB-8286 Space seems missing after last character of word in menu if it"s the hot key
  • VB-8285 Remove lower case “Show panel” string
  • VB-8161 Replace search field"s drop-down with menu component
  • VB-8261 Add support for displaying keyboard short-cuts to menus
  • VB-8226 Make bookmarks bar look clean
  • VB-8281 Our UI blends (too much) with web page UI
  • VB-8252 native menu doesn"t show check boxes
  • VB-3723 Get rid of toggle word in menus
  • VB-8210 Add support for check boxes to menu component
  • VB-8160 Further enhance our menu component
  • VB-8209 Add support for type=“checkbox” to showMenu API
  • VB-8208 “Open in Background Tab” in context menu is in a wrong position
  • VB-8220 Remove appear animation from Speed dials
  • VB-8211 Select all, cut, copy, paste, undo and redo keyboard short-cuts broken on Mac
  • VB-7712 Mac strings (All languages)
  • VB-6968 Upper case transform is wrong for Turkish in settings page
  • VB-8035 Sound icon in tab more modern
  • VB-7379 Panel switcher and scrollbars don"t adapt to light/dark themes: work in progress
  • VB-8082 Strings show variables if not in translation file
  • VB-5692 Crash on import data
  • VB-8141 Regression: find in page match case broken
  • VB-8121 Bookmark icon should adhere to Dark UI
  • VB-5321 Option to not grey UI when not in focus
  • VB-7173 Browser icon is a warning triangle in task manager
  • VB-3772 Ability to open links in background tab from context-menu
  • VB-8180 Context menu in empty area of bookmark panel missing
  • VB-8174 Unclear “Requires Restart” info text in Settings
  • VB-8152 Keyboard navigation is broken in Bookmark Tree
  • VB-8136 Bookmark all open pages does not work
  • VB-8130 Sound icon invisible in light theme with coloring off
  • VB-7248 Short-cuts window has transparency
  • VB-8108 “Reveal File” should be Renamed to “Open Folder”
  • VB-7799 Cannot bring the update dialog to foreground
  • VB-8125 Selected Note icon, not in Focus, has wrong color (dark-ui)
  • VB-7789 Auto-update sets last Standalone install to default browser
  • VB-7230 Drag and drop of URL to address bar messes up URL field content
  • VB-2358 Detect pepper flash from Chrome
  • VB-7893 Every second click in address bar selects whole URL instead of changing cursor position
  • VB-8089 Vivaldi 64-bit Windows version does not update automatically
  • VB-8048 Arrow down on search selector does not display list of search engines
  • VB-7177 Padding of new folder button in new bookmark panel is missing
  • VB-7705 Zooming when clicking on ⌘ after scrolling with touch pad
  • VB-7957 Find in page arrows have a 2px difference in position
  • Update Chromium to 45.0.2454.43
  • Add more short-cuts to main menu
  • Updating default favicon to have white fill
  • Persist selection on single click in URL field
  • Form element font definitions
  • URL bar focus & drop down hide
  • Fixed bookmark import dialog
  • Fix for URL bar only setting focus when switching page
  • Find in Page styling improvement
  • Fix back and rewind button"s translations
  • Alternate address bar position styling

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

Это новый десктопный браузер доступный для Linux, Windows и MacOS созданный преимущественно для людей, которые скучают по старой Opera и хотят иметь максимальный контроль над браузером. После нескольких лет разработки недавно состоялся первый стабильный релиз Vivaldi, но есть ли что-то, из-за чего вы должны немедленно бросить свой старый браузер и поменять его на Vivaldi?

Браузер Vivaldi разработан компанией Vivaldi Technologies. Компания была создана бывшим со-основателем Opera Jón S. von Tetzchner. Когда-то у Opera было много фанатов и людей, которым он просто нравился. Со временем они заметно отстали от Chrome и Firefox и потеряли свою былую популярность. Переход со своего движка на Blink так же не помог, а скорее даже ускорил отток лояльных когда то к браузеру пользователей.

Когда был релиз Vivaldi я решил его попробовать, и честно говоря я уже месяц пользуюсь только им, хотя мне казалось что привычный firefox мне уже ни один браузер не заменит. Даже несмотря на то, что мне пришлось в сразу после установки, лично мне он весьма понравился. Ниже я описал основные на мой взгляд фичи, выделяющие Vivaldi от других популярных сейчас браузеров.

Speed Dial

Speed Dial в Vivaldi получило несколько улучшений в сравнении с Opera. Вы можете собирать ваши сайты в именованные группы, изменять фон или даже можно исползовать папку с закладками в качестве панели быстрого запуска.

Во всех браузерах есть стандартные панели быстрого запуска, но все они мягко говоря не очень. Конечно, это решается дополнениями, но, скажем для firefox нет ни одного внятного подобного дополнения. Пользователям Chrome в этом плане легче - у них есть отличнейшний speeddial2. В целом панель быстрого запуска в Vivaldi ничем не уступает speeddial2, и явно лучше всех имеющихся дополенний реализующих подобную функциональность для Firefox.

Быстрые команды

Если вы терпеть не можете лишний раз тянуться к мышке, и лишнему движению руки предпочитаете клавиатурные "шорткаты", то вам определенно понравятся "Quick Commands" в Vivaldi. Что-то похожее есть во многих IDE. Например, в Sublime Text 2 и Atom - это командная палитра, в Atom. "Быстрые команды" позволяют производить поиск по всему: открытым вкладкам, закладкам, истории, настройкам и разным действиям с самим браузером (открытие новых вкладок, окон) по нажатию F2 . Диалог "быстрых комманд" так же показывает клавиатурные комбинации для различных действий и команд.

К сожалению в Chrome или Firefox я не обнаружил дополнений реализующих хотя бы похожую функциональность. Особенно удобно пользоваться "быстрыми командами" в сочетании в "никнеймами" закладок: закладке дается удобное короткое имя (никнейм), и при наборе из панели быстрых команд части никнейма - Vivaldi дополнит и откроет закладку.

Веб-панели

Веб-панели позволяют отображать любой веб-сайт в боковой панели браузера. В этой панели можно разместить, например, мобильную версию telegram, twitter или что-то ещё полезное, и эти сайты всегда будут под рукой, букально в одном клике мышки. Имейте ввиду, что эта возможность может быть не такой полезной на небольших экранах.

Размер панели разумеется можно изменять.

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

Группы вкладок

Я привык открывать множество вкладок и не закрывать их довольно продолжительное время, откладывая прочтение на потом. Vivaldi позволяет группировать вкладки, тем самым организуя их увеличивая свободное пространтсво на панели. Просто перетаскиваем одну владку на другую пока она не потемнеет, и отпускаем:

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

В сочетании с поиском по всем вкладкам через диалог быстрых команд - это очень удобная возможность, позволяющая легко ориентироваться в большим количестве вкладок. Только надо не забыть установить The Great Suspender , иначе память может очень быстро и незаметно закончиться.

Подобная функциональность есть в Firefox, в виде теперь уже расширения Tab Groups . В Chrome ничего даже близко подобного по удобству нет.

Просмотр нескольких вкладок одновременно - тайлинг

Кроме всего прочего, Vivaldi может отображать несколько владок одновременно разделяя основное рабочее пространтсво между ними. Что-то вроде тайлинговых оконных менеджеров в Linux, только вместо окон веб-сайты. Можно отображать вкладки из группы, или просто отдельные. Например, если вы хотите посмотреть сразу одновременно несколько вкладок из группы, нужно выбрать группу, нажать по ней правой кнопкой мышки и во всплывающем окне выбрать Tile Tab Stack:

По-умолчанию страницы будут расположены вертикально.

Расстановку можно изменить с помощью кнопки в панели со статусом.

Есть так же удобные клавиатурные комбинации, которые действуют сразу на все открытые в данном окне вкладки:

  • Ctrl-F7 расположит вкладки в "сеть";
  • Ctrl-F8 расположит вкладки по горизонтали
  • Ctrl-F9 расположит вкладки по вертикали;

В Firefox и Chrome для того, чтобы получить аналогичную функциональность необходимо установить дополнение. Например, для Firefox есть дополнение Tile Tabs . Для Chrome ничего даже близко похожего и удобного я не нашел.

Выгрузка вкладок из памяти

Открыли слишком много вкладок, память закончилась и браузер стал медлительным? В vivaldi есть решение этой проблемы. Фоновые вкладки можно выгрузить из памяти, при этом они останутся на месте и по клику мгновенно будут загруженны из кэша. Это освобождает так иногда нужные ресурсы.

Чтобы выгрузить все вкладки кроме текущей активной, нажимаем правой кнопкой мышки по активной вкладке и выбираем Hibernate Background Tabs из меню. Текущая активная вкладка при этом останется активной. Так же можно выгрузить отдельные вкладки, правда этот пункт в меню появляется только когда уже открыто достаточно большое количество вкладок. Для выгрузки, делаем тоже самое - нажимаем правой кнопкой мышки по нужной вкладке и выбираем Hibernate Tab . Данная функция не работает в ОС Linux пока что, но разработчики Vivaldi обещали это скоро исправить.

В Firefox подобная функциональность достигается с помощью дополнения UnlockTab , в chrome - The Great Suspender . Мне лично лениво руками выгружать ненужные вкладки, поэтому в Vivaldi я так же установил The Great Suspender, т.к. он может автоматически выгружать неактивные вкладки по истечении определенного времени.

Эскизы открытых вкладок

Vivaldi может показывать небольшие эcкизы вкладок без необходимости их активировать. Что-то подобное было в старых версиях Opera, и судя по отзывам многие ею пользовались. Приятно, что Vivaldi умеет это из коробки хоть я и не понимаю, что в этом может быть удобного.

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

Конечно, vivaldi может показывать эскиз страницы и при наведении мышки на вкладку:

Управление сессиями

В любое время можно вернуться к любой сохраненной сессии:

В Firefox и Chrome подобную функциональность так же можно достичь с помощью дополнений. Для Firefox - Session Manager , для Chrome Session Buddy .

Rewind and Fast Forward

Я думаю, вам известны кнопки "вперед" и "назад" в браузерах. В Vivaldi к ним добавили ещё несколько полезных - это "Перемотка" (Rewind) и "Перемотка вперед" (Fast forward).

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

"Перемотка вперед" немного другое: для любого сайта у которого есть несколько страниц, по нажатию этой кнопки Vivaldi перейдет на следующую страницу. Искать при этом саму кнопку на сайте не нужно. Например, в поисковой выдаче Google можно просто нажать кнопку быстрой перемотки для перехода на следующую страницу с результатами поиска. Главное, чтобы была поддержка со стороны сайта.

Эти кнопки могут ощутимо облегчить серфинг в интернете. В Firefox и Chrome нет таких фич, так же нет и дополнений реализующих эту функциональность.

Настройка внешнего вида веб-сайта c Эффектами страницы

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

В Firefox и Chrome такой возможности нет, да и дополнений реализующих подобный функционал я не нашел.

Расширения

Vivaldi основан на Chromium, так же как и Chrome. Поэтому Vivaldi поддерживает расширения написанные для Chrome. Однако, не все расширения хорошо работают в Vivaldi, а некоторые не работают совсем. Например, у меня не заработал менеджер паролей Last Pass, а популярное расширение для сервиса Pocket до недавнего времени валило браузер наповал.

Для установки расширений переходим на страницу с расширениями для Chrome, и просто их устанавливаем.

Последние несколько лет я использовал браузер Google Chrome. Всем он хорош, но есть проблемы с производительностью. При открытии большого количества вкладок — больше 20 штук — он начинает тормозить. Его проблема в использовании диска. Когда я сменил диск в своем ноутбуке на SSD, то производительность браузера ощутимо возросла.Да и системы в целом. Но даже сейчас эта проблема никуда не делась — Хром как-то странно нагружает диск.

Услышал я за браузер Vivaldi (у mr. Vigner). Оказывается это реинкарнация браузера Opera на движке Chromium, том же, на котором сделан Гугл Хром. Точнее форк. Когда то давно Опера была моим любимым и основным браузером. Но потом что-то с ним случилось и перестал его юзать.

Мне в ней нравились гибкие настройки, можно было настроить под себя абсолютно любые . В нем был отличный почтовый клиент. Кстати да, вот в этом и была причина, по которой перестал его использовать — убрали почтовый клиент. В общем, решил я попробовать этот Вивальди. Поставил. Вроде хорош. Но после месяца использования вернулся на Chrome, обнаружив кучу недостатков и никаких ощутимых преимуществ в сравнении с Хромом.

Расширения на Vivaldi

Их можно поставить абсолютно те же самые, что ставятся на Google Chrome.

Что я незамедлительно и сделал — поставил адблок.

Кстати, в этом браузере мне не понадобилось использовать , которое позволяет сохранять все открытые вкладки и окна, то есть всю сессию.

Потом в любой момент можно открыть любой из сайтов в той сессии. Это бывает удобно, когда нужно быстро переключиться на работу с какими то другими задачами и сайтами. Допустим, сижу я настраиваю серверы, открыто у меня три окна по 10-15 вкладок, с разными мануалами, техническими доками, тестовыми сайтами. Тут бац, нужно все это убрать срочно и переключиться на решение какой-нибудь домашней задачи, например поиск квартиры. Если открывать еще вкладки или окна уже под это дело, то можно окончательно запутаться, да и ресурсы компьютера не резиновые — будет тормозить.

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

Из достоинств на этом, пожалуй, и все. Ну, как всё — для непривередливого пользователя браузер хорош. Просто остальные достоинства его не выделяют, ибо они есть в любом браузере на базе Chromium. В том числе и в самой известной и распространенной его версии Google Chrome.

Что такое Chromium-based браузеры

Кстати да, если вы думали что Яндекс браузер, Амиго, Гугл хром и Вивальди это принципиально разные браузеры — то это не так. Это все по сути одно и то же, различия между ними лишь внешние -всевозможные примочки типа баров, кнопок, вставок, логотипов. Сейчас только ленивый не запилил своего браузера на основе Хромиума.

Но на все эти браузеры подходят одни и те же расширения, обрабатывают страницы они одними и теми же механизмами и даже тонкие настройки у них одинаковые. Потому что все эти браузеры на одном и том же движке Хромиум. Не стоит путать кстати Chromium и Chrome.

Но вернемся к к Вивальди. Чем же он мне так не угодил?

Как я уже говорил — он не показывает улучшения производительности. Все точно так же виснет, как и в хроме при открытии большого количества вкладок.

Не показывает уведомления при получении новой почты во вкладках типа gmail

Я пользуюсь веб-почтой в закрепленных вкладках и мне нужно какое-то оповещение когда приходят новые письма. Когда это происходит в Хроме вкладка начинает «бликовать». У Вивальди такой фишки нет, поэтому иногда можно пропустить какие-то важные сообщения, на которые желательно ответить быстро.

Перемещение вкладок между окнами

В большинстве браузеров давно уже есть возможность посредством простого перетаскивания мышью, т.н. «drag-n-drop», вытаскивать вкладку как новое окно или перебрасывать вкладки между окнами. Я был удивлен, но в Вивальди этого нет. Можно только открыть новое окно, открыть в нем новую вкладку и скопировать адрес. А потом закрыть вкладку в первом окне. Слишком уж много телодвижений для такого нужного функционала.

Инструменты разработчика в доке

Пожалуй, это и стало основным камнем преткновения в использовании мной этого браузера. Дело в том, что я занимаюсь администрированием и настройкой серверов и бывает много задач по оптимизации сайтов. Поэтому встроенный отладчик браузера — это один из моих основных рабочих инструментов. Через него можно тестировать скорость работы сайта, смотреть http-заголовки, отдаваемые сервером. Можно смотреть ошибки отображения страницы или узнать IP-адрес сайта.

В общем, без него как без рук. Эта штука обычно открывается в той же вкладке, где открыта сама страница это называется док. Так работает и в хроме и firebug в mozilla, и даже отладчики в виндобраузерах, edge, например. Так вот Vivaldi запускать отладчик в доке не умеет.

Он открывает его в отдельном окне. А это в десять раз менее удобно, чем в доке. Очень странно, потому что когда я пользовался оперой много лет назад — она свой Dragonfly в доке открывать умела. В общем, когда я сидел на Вивальди, мне все равно приходилось запускать Хром. У меня и так всегда работает два браузера, кроме основного всегда еще запущен firefox с несколькими табами, ибо он у меня используется для работы с и всегда настроен именно через прокси, что мне тоже бывает нужно очень часто, ибо я так же занимаюсь настройкой прокси.

Так вот если использовать Вивальди, да еще и запускать для отладки Хром — то выходит уже три браузера запущено. Это уж ни в какие ворота, друзья. Поэтому я и вернулся на Хром. Тем более что есть чудесный костыль xtab , который позволяет ограничить количество открытых вкладок и и вот так по-идиотски «решить» проблему с производительностью Google Chrome.

Вот такая история, господа. А вы какой браузер юзаете?

Созданное вами расширение можно будет встроить в интерфейс браузера(не как дополнительное расширение, а как часть браузера). Простите за тавтологию.

Вам потребуется:

  • Знание основ CSS, HTML, JS и работы с DOM.
  • Если страшно - можно обойтись онлайн-справочниками(как я).
  • Редактор кода. Какой душе угодно, желательно с подсветкой Javasvript. Я пользуюсь Sublime Text 3 .
  • Минимум полчаса свободного времени

Шаг нулевой. Списывание

Создаем файл MyLinks.user.js(обязательно добавляем.user., иначе браузер не поймет что это расширение) в любой удобной директории. Открываем.

В целях сократить код я использовал функцию, которая упрощает создание html элементов из js(ссылку на источник прилагаю):

Function create(name, attributes) {
var el = document.createElement(name);
if (typeof attributes == "object") {
for (var i in attributes) {
el.setAttribute(i, attributes[i]);
}
}
for (var i = 2;i < arguments.length; i++) {
var val = arguments[i];
if (typeof val == "string") { val = document.createTextNode(val) };
el.appendChild(val);
}
return el;
}

Шаг первый. И второй... и третий...
Для начала нам нужно создать контейнер(квадратик), в котором будут храниться наши ссылки:


var linkBox = create("div", { id: "linkBox"});

Можно сразу задать ему стили, для удобства. Я использовал метод style.cssText:


linkBox.style.cssText = " width:180px; position: fixed;top: 100px;right: 0px; z-index: 999;background: #fff;padding: 10px;box-shadow: 0 0 20px 0px #999;display:flex; flex-direction:column;justify-content:space-between;text-align:left;";
var linkVivaldi = create("a", { href: "https://forum.vivaldi.net/category/20/%D1%80%D1%83%D1%81%D1%81%D0%BA%D0%B8%D0%B9"},
"Vivaldi RU Форум");
var habr = create("a", {href: "https://habrahabr.ru/top/"}, "Хабрахабр");
var vk = create("a", {href: "https://vk.com/vaskm"}, "Вконтакте")

LinkBox.appendChild(linkVivaldi);
linkBox.appendChild(habr);
linkBox.appendChild(vk);

Кладем наш бокс, собственно, на страницу:

Document.body.appendChild(linkBox);

Добавляем автоскрытие нашего бокса по таймауту:

LinkBox.onmouseover = function (){
if (document.querySelector("#linkBox").style.right == "-180px") {
document.getElementById("linkBox").style.right = "0";
setTimeout(5000);
}
setTimeout(function(){document.getElementById("linkBox").style.right = "-180px";}, 5000);
};

Ах да, забыли. Добавляем синюю полосу слева. Изначально она задумывалась как кнопка, а потом осталась просто для красоты:


var toggler = create("span", { id:"boxToggler"}, "");
//сразу же добавляем его в наш бокс
linkBox.appendChild(toggler);

Стили можно прописывать не только явным указанием через js(как выше).
На многих форумах говорят, что подключить свой файл css из браузера невозможно. Поэтому мы создадим свой файл уже внутри документа. С флексбоксом и марджинами.

// Создаем собственный CSS стиль
var style = document.createElement("style");

Добавляем стили обычным innerHTML(не забываем ставить += , иначе каждая запись будет стирать предыдущую):

// украшаем полоску слева. Можно добавить ее через:before
style.innerHTML = "#boxToggler{content: ""; position:absolute; top:0; bottom: 0; left: -10px; width: 14px; background: cornflowerblue;}";

//сам декорэйшенс
style.innerHTML+=" #linkBox a{padding: 5px 0 0 5px; line-height:8px; height:16px;font-size:14px;}";
style.innerHTML+="#linkBox a:hover{background: #ddd; text-decoration: none;}";
style.innerHTML+="#linkBox span{text-align: center;}";

Файл со стилями мы создали, осталось лишь засунуть его в наш документ, традиционно в <head> :

Document.head.appendChild(style);

Теперь сохраняем наш файл. Открываем страницу расширений vivaldi://extensions/ , отмечаем Developer Mode и перетаскиваем прям в окно наш файл. Должно появиться диалоговое окно с разрешением на установку. Соглашаемся. Открываем любой сайт. Наслаждаемся. Для добавления расширения в основной функционал браузера - кладем наш файл в корневую директорию браузера и прописываем к нему путь в файле browser.html.

Можно уверенно сказать, что по количеству доступных настроек Vivaldi уверенно опережает всех конкурентов. Внешний вид, функциональность, производительность - всё в этом браузере можно настроить в соответствии со своими вкусами и потребностями. Браво, Vivaldi!

2. Группы вкладок

Группировка вкладок была одной из киллер-фич Opera 12. Пользователи, которые работали с большим количеством табов, просто боготворили эту функцию, позволяющую несколькими элегантными движениями навести порядок среди открытых сайтов.

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

3. Эффекты страницы

Среди многих функций, унаследованных от старой доброй Opera, присутствуют также специальные CSS-фильтры. С их помощью можно применить к любой странице целый ряд любопытных и / или полезных фильтров, изменяющих её внешний вид. Таким образом пользователи получают возможность исправить проявления дурного вкуса некоторых веб-дизайнеров, создающих совершенно вырвиглазные страницы, и даже активировать специальный режим чтения.

4. Темы оформления

Многие браузеры поддерживают темы оформления. Но чаще всего это означает, что в него можно просто вставить свою картинку в качестве фона. Vivaldi пошёл гораздо дальше в этом направлении. Эту программу можно раскрасить буквально как захочется: светлые фоны с цветными вкладками, тёмные фоны со светлыми кнопками - всё зависит только от вашей фантазии.

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

5. Информация в панели адреса

Панель адреса Vivaldi, кроме своих прямых обязанностей, ещё выполняет роль индикатора загрузки. Во время открытия новой веб-страницы в ней отображается прогресс-бар, скорость и количество уже загруженных элементов. Мегаудобная и полезная функция.

6. Загрузки и закладки в боковой панели

Мне нравится Chrome, но то, как в нём реализована работа с загрузками, не выдерживает никакой критики. Нижняя панель не очень удобна, а для отображения специальной страницы с загрузками необходимо продираться через многоуровневое меню. Не лучше обстоят дела с закладками.

В Vivaldi всё гораздо проще и удобнее. Все закладки и загрузки можно найти в многофункциональном сайдбаре, вызываемом одним кликом мыши. Такая же панель была в старой версии Opera, да.

7. Встроенные заметки

Ещё одна суперфишка, прямиком перекочевавшая из Opera. Встроенный в сайдбар заметочник позволяет в два счёта сохранять любую информацию с открытой в данный момент страницы, в том числе тексты, ссылки, скриншоты и файлы. Незаменимый инструмент для тех, кто в интернете не только развлекается, но и работает.

8. Скриншоты

По работе мне очень часто приходится делать скриншоты страниц. Наличие в Vivaldi удобного инструмента для их создания не может не радовать. Уверен, что меня поддержат множество журналистов, дизайнеров, разработчиков, блогеров и людей других специальностей, которым приходится часто делать снимки веб-сайтов.

9. Быстрые команды, горячие клавиши, жесты

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

Браузер Vivaldi может удовлетворить все категории пользователей. В нём есть горячие клавиши, управление жестами мыши и даже некое подобие встроенной командной строки, появляющееся при нажатии клавиши F2. С её помощью можно быстро перейти к нужной вкладке, найти необходимое слово на странице, изменить настройки - то есть выполнить практически любое действие.

10. Веб-панели

Я посвятил сайдбару Vivaldi уже несколько пунктов, но этого всё равно недостаточно, чтобы перечислить все его функции. Одна из самых любимых - встроенные веб-панели. Эта функция позволяет открывать в сайдбаре любые нужные сервисы. Очень удобно: можно разместить здесь переводчик, музыкальный проигрыватель, список задач и любой другой сервис, которым вы часто пользуетесь.

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