Создание перемещаемых кнопок в браузере Vivaldi.
Впервые в истории развития веб-обозревателя Vivaldi, кнопка может существовать в нескольких местах. Вот как можно этого добиться.
Одно из основных убеждений разработчиков браузера Vivaldi в том, что именно пользователи хотят настраивать. Это также одна из причин, по которой многим нравится работать с этим веб-обозревателем. Для нашей команды - наши пользователи также являются дизайнерами. С Vivaldi, они вполне могут выразить себя, чтобы настроить все правильно, и по своему вкусу. Есть много способов сделать это. Например, перемещение кнопок в пользовательском интерфейсе до этого момента, сделать было практически невозможно.
С Vivaldi 2.4 изменилось многое. Впервые в истории создания браузера, кнопка может существовать в нескольких местах. Новые кнопки имеют новые функции, которые мы будем использовать для создания других альтернатив и лучшей управляемости. Кроме того, встроена поддержка специальных возможностей, а также поддержка значков, «состояний», меню, всплывающих окон и опции перетаскивания.
Разработчики недаром потратили время на то, чтобы многое переосмыслить, перерисовать графику панели инструментов (коллега по дизайну Atle, поделится некоторыми подробностями о том, как они были сделаны). Мы определились с тремя базовыми размерами, и с обновленным компонентом панели инструментов, теперь кнопки переключаются на правильный размер по мере необходимости.
Те из вас, кто использовал Vivaldi с самого начала, знают, что он позиционировался как «браузер для наших друзей». Мы строили основы по частям, с обратной связью с вами, при этом и не предполагали, что кто-то из команды Vivaldi тогда мог подумать, что Vivaldi 2.4 будет выглядеть таким, как он есть сегодня. Это привело ко многим нововведениям, разработанным и построенным разными людьми.
Ранние компоненты Vivaldi могли бы иметь согласованный дизайн, но связаная с этим логика, возможно сильно бы отличалась. Использование веб-технологий позволило разрабатывать некоторые вещи довольно быстро и продуктивно. Результатом чего, стала (помимо прочего) большая коллекция уникальных кнопок. Наличие таких кнопок, позволяющих им существовать в другом месте пользовательского интерфейса, означало добавление определенной последовательности и нового дизайна.
Умножение возможных комбинаций дает число, быстро приближающееся к бесконечности. Скромная команда разработчиков браузера Vivaldi состоит всего из трех человек, поэтому сложностью создания пришлось управлять. Мы решили, что стоит создать оболочку для наших кнопок, которая может быть предсказуемо стилизована и взаимодействовать с ней.
Например, наш коллега Petter, уже создал компонент панели инструментов, который может отображать разные кнопки. Это был значительный объем работы, тем более, что он выполнялся параллельно с основной веткой разработки. Как только такие изменения были объединены с основной идеей проекта, все это ровно сложилось в довольно монолитную конструкцию.
Пользовательский интерфейс браузера Vivaldi построен на популярной библиотеке JavaScript. На языке React, элементы являются независимыми, повторно используемыми компонентами. Цель написания компонента кнопки состояла в том, чтобы сделать кнопки панели инструментов предсказуемыми и последовательными. Чтобы избежать потери функциональности, или возникновения ошибок, при этом должен поддерживаться расширенный набор всех функций этих кнопок.
Когда мы только начинали, мы представляли этот список достаточно простым и коротким. Но позже обнаружили, что (удивительно) у нас было большое разнообразие кнопок, и иногда разные способы сделать одно и то же. Основы довольно просты. Кнопка должна иметь заголовок, или графическое изображение. И нажатие на нее должно вызвать определенное действие.
Мы задаем кнопкам функцию вызывать меню, например, кнопку «Корзина». Некоторые кнопки имеют как действие, так и меню, например, «Назад». Здесь мы поддерживаем оба контекстных меню. Мы добавили еще третий способ доступа к меню, нажав стрелку вниз, когда кнопка находится в фокусе. Говоря о фокусе, новый компонент построен так, что он не получит фокус при нажатии.
Возможно, нам меньше всего нравится в них использование HTML-кнопок с переключением фокуса, а более точная обработка фокуса в новом компоненте, пожалуй, и есть наилучшая функция. Выше мы упоминали действие и меню. Но есть много других функций, которые также были добавлены, например, всплывающее окно, вторичные действия для среднего (или дополнительного) клика. Накладные значки, перетаскивание.
Vivaldi версии 2.4 предлагается с поддержкой перетаскивания для кнопок адреса и строки состояния. Для перемещения кнопки требуется модификатор, в настоящее время это клавиша Shift. Когда кнопка перемещается, мы точно понимаем, где ее можно отпустить. Включение перетаскивания требует тонкой обработки событий. И как мы думаем, что любой, кто работал с этим, скажет то же самое - так работать не очень приятно. Но, в конце концов, это сработало, и нам даже пришлось заняться некоторыми интересными вещами, такими как создание пользовательских перетаскиваемых изображений.
______________________________________________________
