Продолжаем расширять функциональность браузера Вивальди

Продолжаем расширять функциональность браузера Вивальди

450
ПОДЕЛИТЬСЯ

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

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

Она дозволила при повторном нажатии на активную вкладку для доступа к предшествующим. Свернуть, нажав на вкладку
Это было имя галочкой в настройках вкладка оперы Престо. Для неких это чрезвычайно нужная вещь, которая, к огорчению, отсутствует. Давайте сейчас возвратимся в Вивальди. Вот как она смотрится в Опере:
Иллюстрация:
Как и в предшествующей статье тут работать по старенькой схеме — сделать не лишь CSS и JS файл с неким именованием, к примеру «last-tab.js». И вставьте код туда:
last-tab.jsвар браузер = документ.тела.querySelector(‘#браузер’);
вар перечень = [];
функция listTabs() {
вар вкладок = браузер.querySelectorAll(‘#вкладки>.вкладка’);
перечень=[];
для(вар я = 0;я < вкладки.длина;я++){
перечень.толчок(вкладки[я]);
}

перечень.сортировки(функция(А,Б) { возвращение недавних(б) недавнего(в); });
}

функция крайних(вкладка){
вар страничка = документ.querySelector(‘.webpageview объект webview[tab_id=»‘+вкладка.набор данных.tabId+'»]’);
раз(страничка) {
страничка = странички.parentNode.parentNode.parentNode.parentNode;
возвращение parseInt(страничка.стиль.значением zindex отобразится);
}
возврат 0;
};

вар dispatchMouseEvent = функция(цель, var_args) {
вар е = документ.createEvent(«действия mouseevent»);
е.в initevent.использовать(электронного, массив.макет.порезать.вызов(аргументы, 1));
цель.dispatchEvent(е);
};

браузер.способа addeventlistener(‘mousedown встречает’, функция(е){
для (вар я = 0; я < е.путь.длина; я++) {
раз е.путь[я].имя_класса.помощи indexof(‘активный’) > -1) {
вар активный = браузер.querySelector(‘.таб.активный’);

listTabs();
dispatchMouseEvent(перечень[1], ‘событиями mousedown’, истина, истина);
перерыва;
}
}
});
И в browser.html опосля
<скрипт срц=»пачка.с JS»></скрипт>

вставьте эту строчку:
<скрипт в src=» » крайней вкладке.с JS»></скрипт>

Сейчас, когда вы щелкните на активной вкладке раскроется предшествующая.
Я и сам Yandex.Браузером никогда не воспользовался, но по описанию это, в принципе, это кристально незапятанной то, что требуется. Перейти на главную страничку, нажав на вкладку
Yandex имеет свою альтернативную точку зрения на то, как вы сможете применять клавишу на активной вкладке. В течение этих 6 месяцев, я нередко слышал в комментах на форумах и просьбы юзеров сделать эту функцию.
tab-to-top.js// щелчок на активной вкладке прокрутка топ
вар браузер=документ.тела.querySelector(‘#браузер’);
браузер.способа addeventlistener(‘нажмите’, функция(е){
для (вар я = 0; я < е.путь.длина; я++) {
раз е.путь[я].имя_класса.помощи indexof(‘активный’) > -1) {
вар активный = браузер.querySelector(‘.таб.активный’);
Варе объект webview = документ.querySelector(‘#объект webview-объект webview контейнер[tab_id=»‘+активный.набор данных.tabId+'»]’);
объект webview.executeScript({ код: «документ.тела.scrollTop=0″ });
возврат;
}
}
});
В browser.html соответственно:
<скрипт срц=»вкладки в верхней части.с JS»></скрипт>

Запустите, проверьте. Это похоже на работу.
Иллюстрация (1 Мб):
Так как эти две функции являются взаимно исключающими, то настоятельно советуем не кооперировать их.
Вставить и перейти нажмите на
В браузере Maxthon есть достаточно комфортная функция при нажатии на ссылку из буфера обмена.
К счастью мы можем не ожидать их и сами испытать повторить эту функцию в Вивальди. Опосля того, как я попробовал его, мне стало чрезвычайно не хватать во всех остальных браузерах, и остальные юзеры также попросили разрабов сделать схожее.
Сделать «click-and-go.js» и вставил код:
click-and-go.js// правой клавишей мыши на кнопочке «плюс» и вставляю
вар браузер=документ.тела.querySelector(‘#браузер’);
вар isItMouse = ересь; // исключаем ответы от клавиатуры

//Твик для того, чтоб вставить в этот вход-поле
вар hiddenInput = документ.ему(«ввод»);
hiddenInput.Тип = «текст»;
браузер.способа appendchild(hiddenInput);
hiddenInput.стиль.Ширина = «0px»;
hiddenInput.стиль.высота = «0px»;
hiddenInput.стиль.Экран = «нет»;

вар dispatchMouseEvent = функция(цель, var_args) {
вар е = документ.createEvent(«действия mouseevent»);
е.в initevent.использовать(электронного, массив.макет.порезать.вызов(аргументы, 1));
цель.dispatchEvent(е);
};

браузер.способа addeventlistener(‘контекстное меню’, функция(е) {
//Районе около площади
раз е.цель.имя_класса.способ tostring().помощи indexof(‘с newtab’) > -1) {
isItMouse = истина;
документ.команды execcommand(‘вставить’);
возврат;
}
//Плюс знак
раз е.цель.parentNode.parentNode.имя_класса.помощи indexof(‘с newtab’) > -1) {
initPaste();
возврат;
}
//Площади
раз е.цель.getTotalLength() > 0) { // 104 — длина новейшей вкладке клавиши в формате SVG
initPaste();
возврат;
}
});

функция initPaste() {
isItMouse = истина;
hiddenInput.стиль.экран = «блок»;
hiddenInput.фокус();
документ.команды execcommand(‘вставить’);
}

документ.способа addeventlistener(‘вставить’,функция(е) {
раз (isItMouse) {
isItMouse = ересь;
вар адреса URL = е.clipboardData.способ getdata(‘текст/равнина’);
hiddenInput.стиль.Экран = «нет»; //скрыть поле ввода для вставки

вар ре = новое постоянное выражение(‘\р\н’, ‘г’); // удалить знаки новейшей строчки
URL-адресок = URL-адресок.заменить(повторно, «);
// Поисковые системы
поисковая вар = ‘https://google.com/webhp?hl=ru#hl=ru&q=’;
// вар поисковая = ‘http://yandex.ru/search/?text=’;
// вар поисковая = ‘https://duckduckgo.com/?q=’;
вар активный = браузер.querySelector(‘.таб.активный’);
Варе объект webview = документ.querySelector(‘#объект webview-объект webview контейнер[tab_id=»‘+активный.набор данных.tabId+'»]’);

раз (URL-адресок.длина > 0) {
раз (checkUrl(URL-адресок)) {
объект webview.executeScript({ код: «окна.открыть(‘»+URL-адресок+»‘,’доктор’)» });
} по другому раз (checkUrlWithoutProtocol(адресок URL)) {
объект webview.executeScript({ код: «окна.открытые (с’http://»+URL-адресок+»‘,’доктор’)» });
} еще {
объект webview.executeScript({ код: «окна.открыть(‘»+поисковая+URL-адресок+»‘,’доктор’)» });
}
}

консоли.журнальчик(URL-адресок)}
}
);
//Проверить URL-адресок
вар patternUrl = /^(?:(?:https?/ftp)://)(?:S+(?::S*)?@)?(?:(?!(?:10/127)(?:.d{1,3}){3})(?!(?:169.254/192.168)(?:.d{1,3}){2})(?!172.(?:1[6-9]/2d/3[0-1])(?:.d{1,3}){2})(?:[1-9]d?/1dd/2[01]d/22[0-3])(?:.(?:1?d{1,2}/2[0-4]d/25[0-5])){2}(?:.(?:[1-9]d?/1dd/2[0-4]d/25[0-4]))/(?:(?:[a-zu00a1-uffff0-9]-*)*[a-zu00a1-uffff0-9]+)(?:.(?:[a-zu00a1-uffff0-9]-*)*[a-zu00a1-uffff0-9]+)*(?:.(?:[a-zu00a1-uffff]{2,})).?)(?::d{2,5})?(?:[/?/#]S*)?$/i;
вар patternUrlWithout = /^(?:S+(?::S*)?@)?(?:(?!(?:10/127)(?:.d{1,3}){3})(?!(?:169.254/192.168)(?:.d{1,3}){2})(?!172.(?:1[6-9]/2d/3[0-1])(?:.d{1,3}){2})(?:[1-9]d?/1dd/2[01]d/22[0-3])(?:.(?:1?d{1,2}/2[0-4]d/25[0-5])){2}(?:.(?:[1-9]d?/1dd/2[0-4]d/25[0-4]))/(?:(?:[a-zu00a1-uffff0-9]-*)*[a-zu00a1-uffff0-9]+)(?:.(?:[a-zu00a1-uffff0-9]-*)*[a-zu00a1-uffff0-9]+)*(?:.(?:[a-zu00a1-uffff]{2,3})).?)(?::d{2,5})?(?:[/?/#]S*)?$/i;
функция checkUrl(СПО) {
возвращение patternUrl.тест(СПО);
}
//URL-адресок без протокола
функция checkUrlWithoutProtocol(СПО) {
возвращение patternUrlWithout.тест(СПО);
}
В этом случае Поиск будет происходить через Google. То есть, к примеру, «тест.тест» воспринял как ссылку конкретно как «ya.ru». А во-вторых, беря во внимание поисковик не связан с поисковой системы, доставлен в браузер в качестве основного. Для остальных поисковых систем также достаточно просто написать правильную ссылку. Но, как правило, на практике это не обязано помешать. Я добавил еще одну строчку в duckduckgo и Yandex, раз кого-то не устраивает Google. Но решение есть пару минусов. Во-первых, постоянное выражение, выбирающее ссылку в строчку без протокола, может быть неправильной. Соответственно, в browser.html Добавлено:
<скрипт срц=»нажми-и-идти.с JS»></скрипт>

Функция изготовлена по такому принципу: при нажатии на правую клавишу мыши на символ «плюс» делает новейшую вкладку, а ссылку из буфера обмена, раз там не ссылка, то идет автоматический для строчки поиска в поисковой системе.

Иллюстрация (1 Мб):
На данный момент мы попытаемся это поправить с помощью CSS. Избавиться от состояния
Чтоб удалить строчку состояния (статус бар) можно было в настройках от первой версии. И те, кто статус бар не нужен, либо жить с ним либо нет чтоб узреть ссылку при наведении. Но неувязка заключается в том, что есть ссылки при наведении на их курсора.
статус-бар.в CSS/** избавиться от состояния **/

#Нижний колонтитул.инвалидов{
экран:блок !принципиально;
должность:статический !принципиально;
обивка:0 !принципиально;
высота:0 !принципиально;
Ширина:0 !принципиально;
}

#Нижний колонтитул.инвалидов > *{
Экран:нет !принципиально;
}
#Нижний колонтитул.инвалидов #status_info{
экран:блок !принципиально;
}

#Нижний колонтитул.инвалидов #status_info пядь{
должность:исправлено !принципиально;
снизу:0 !принципиально;
слева:0 !принципиально;
маржа:0 !принципиально;
цвет:#333 !принципиально;
фон-цвет:#FEFEFE !принципиально;
обивка:5px 2 пикселя !принципиально;
границы:#9E9E9E жесткий 0 !принципиально;
граница-Ширина:1 пиксель 0 0 1 пиксель !принципиально;
Макс-Ширина:75% !принципиально;
переполнение: сокрытый !принципиально;
белоснежный-пространстве: nowrap !принципиально;
текст-переполнений: Многоточие !принципиально;
Z-индекса:50 !принципиально;
}

#Нижний колонтитул.инвалидов #status_info период:пустой{
Экран:нет !принципиально;
}

/******/
Соответственно опосля
<ссылка отн=»стилей» в href=»стиле/общие.к CSS» />

вставьте строчку
<ссылка отн=»стилей» в href=»статус-бар.к CSS» />

Принцип тут прост: мы просто убрали показ состояния и нарисуйте прямоугольник, чтоб status_info в углу.

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

Заголовок.в CSS/** объединить Заголовок с adressbar **/
#заголовка {
мин-Высота: 2 пикселя !принципиально;
Высота: 2 пикселя !принципиально;
Z-индекса: авто !принципиально;
}

.выиграть .Вивальди {
цвет: #ффф;
позицию: абсолютная;
топ: 5px;
слева: 98px;
}

.Вивальди+#вкладки-контейнер.топ {
границы-нижней: 1 пиксель жесткий;
позицию: абсолютная;
топ: 62px;
Ширина: 100%;
Z-индекса: 1 !принципиально;
}

#вкладки-контейнер.нижняя, #вкладок, #вкладки-контейнер.топ #вкладки {
Макс-высота: 30px !принципиально;
}

.инструментов.панель инструментов-addressbar {
обивка-право: 100 пикселей;
}

.addressfield { маржа налево: 40px !принципиально; }

.клавиша-панель инструментов {
должность: относительная !принципиально;
левого: 30px !принципиально;
}

.закладки-бар { маржи-вниз: 37px; }

.Вивальди { Z-индекс: 3; }

.окна-самым buttongroup { Z-индекс: 2; }

.домой.перемотка,.дальше,#заглавие страницы{Дисплей:нет}
/********************/
И Ширина для различных языков меню будет различаться. В этом случае адресная строчка будет иметь ужаться и уступить дорогу клавиш меню. Но есть юзеры, которые употребляют меню в его классическом виде. Этот вариант для тех, кто употребляет Вивальди-клавиша.
Варианты на британском и российском языках
#заголовка {
мин-Высота: 2 пикселя !принципиально;
Z-индекса: авто !принципиально;
}

.выиграть .topmenu {
цвет: #ффф;
позицию: абсолютная;
топ: 5px;
слева: 0px;
}

.topmenu+#вкладки-контейнер.топ {
границы-нижней: 1 пиксель жесткий;
позицию: абсолютная;
топ: 62px;
Ширина: 100%;
Z-индекса: 1 !принципиально;
}

#вкладки-контейнер.нижняя, #вкладок, #вкладки-контейнер.топ #вкладки {
высота: 30px !принципиально;
}

.инструментов.панель инструментов-addressbar {
обивка-право: 100 пикселей;
}

.клавиша-панель инструментов.обратно{ маржа налево: 350 пикселей }

.домой.перемотка,.дальше,#заглавие страницы{Дисплей:нет}

.addressfield { маржа налево: 3 пиксела !принципиально; }

.закладки-бар { маржи-вниз:0px; }

.окна-самым buttongroup { Z-индекс: 2; }

#заголовка {
мин-Высота: 2 пикселя !принципиально;
Z-индекса: авто !принципиально;
}

.выиграть .topmenu {
цвет: #ффф;
позицию: абсолютная;
топ: 5px;
слева: 0px;
}

.topmenu+#вкладки-контейнер.топ {
границы-нижней: 1 пиксель жесткий;
позицию: абсолютная;
топ: 62px;
Ширина: 100%;
Z-индекса: 1 !принципиально;
}

#вкладки-контейнер.нижняя, #вкладок, #вкладки-контейнер.топ #вкладки {
высота: 30px !принципиально;
}

.инструментов.панель инструментов-addressbar {
обивка-право: 100 пикселей;
}

.клавиша-панель инструментов.обратно{маржа налево: 270px}

.домой.перемотка,.дальше,#заглавие страницы{Дисплей:нет}

.addressfield { маржа налево: 3 пиксела !принципиально; }

.закладки-бар { маржи-вниз:0px; }

.окна-самым buttongroup { Z-индекс: 2; }

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

вкладка-линий.в CSS#вкладки-контейнер.топ #вкладок, #вкладки-контейнер.дно #вкладки {
высота: авто !принципиально;
экран: блок !принципиально;
}
#вкладки-контейнер.дно #вкладок .вкладка #вкладки-контейнер.топ #вкладок .вкладки {
Макс-Ширина: 150 пикселей !принципиально;
мин-Ширина: 150 пикселей;
экран: инлайн-блок !принципиально;
поплавок: слева;
}
#вкладок .таб .вкладка-большой палец { Экран: нет; }
#вкладок .с newtab { маржи-топ: -9px; }
#вкладок .хлам {
маржи-топ: -10 пикселей;
экран: инлайн-блок !принципиально;
поплавок: справа;
}
Так будет смотреться итог:
При открытии новейшей вкладки на верхней панели будет возрастать в высоту соответственно.
И в конце концов, несколько вещей:

Отключить клавишу с плюсом в циферблате (в скором времени может стать неактуальным):
.циферблат.добавить {Дисплей: нет !принципиально;}

Для отображения кросс:
#вкладок .таб .вкладку-Заголовок .закрыть {Дисплей: нет !принципиально;}

Раз вы желаете применять несколько функций сразу, это может быть достаточно безболезненным, чтоб скопировать несколько файлов в один custom.js файл, чтоб не плодить ненадобных файлов. Тоже самое с CSS.
Хотя это наиболее непосредственно неактуально, поэтому что в браузер уже имеет эту функцию, хотя и в очень рудиментарной форме. Я также желал бы поделиться gichaba один юзер Вивальди с форума, которые делали хорошие вещи и даже воплотил свой прокрутки вкладок через ПКМ+прокрутка превью.
Естественно, эти решения не безупречны, и могут востребовать личных конфигураций, поэтому что запчасти от неких вещей я сделал для себя. Раз у вас есть мысли на наиболее изящное решение в JS функции либо предложения, что еще можно сделать, буду рад слушать. И вот и все. Я надеюсь, что неким это было полезно для вас.
Не запамятовывайте, что при каждом обновлении все конфигурации будут летать. Потому, все, что для вас необходимо-это просто скопировать два либо три файла в новейшей версии. Опосля обновления сделанные файлы в папку с предшествующей версией.
Пара готовых вариантов от меня:
крайнее-вкладка + статус-бар + клик-энд-ГОУ + hideplus + вкладка-линий
(Вкладки должны быть перемещены из заголовка) вкладка-топ + статус-бар + клик-энд-ГОУ + hideplus + Заголовок
Вивальди Форум
На github. habrahabr.ru