Карточка поиска с настоящим эффектом стекла без веб-движка

Поиск — одна из часто используемых функций редактора. Но мы долго его не трогали, потому что он и так хорошо работал.

Так было и с окном поиска в mote. Оно всегда занимало две строки, а если открыть его после выделения слова в документе, поле поискового запроса всё равно оставалось пустым.

Три приложения давали один и тот же ответ

Прежде чем что-либо менять, мы открыли поиск и замену в одном и том же документе в Typora, MarkText и Obsidian и сделали снимки экрана. Notion мы проверили по опубликованной справке. Когда мы собрали всё в таблицу, общие черты стали очевидны.

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

Мы решили, что mote тоже будет следовать этому принципу.

Основной экран мы сократили до одной строки. Замену можно открыть кнопкой слева или сочетанием Ctrl+H. Если выделенное предложение занимает одну строку и содержит не более 200 символов, оно автоматически подставляется в качестве поискового запроса.

Если совпадений нет, вместо цифры 0 появляется сообщение «Нет результатов». Поле ввода обводится красной рамкой. Так можно сразу проверить, допущена ли опечатка или такого слова действительно нет в документе.

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

Поиском пользуются гораздо чаще, чем заменой. Если редко используемая функция всегда раскрыта, за неё приходится каждый раз платить при выполнении частой задачи.

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

Текст под карточкой действительно размывается

Карточка поиска выглядит как стеклянная. Это не просто эффект. Текст документа под ней действительно отрисовывается с размытием.

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

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

При отрисовке документа редактор ещё раз рисует только ту его часть, которую закрывает карточка. При второй отрисовке применяется размытие в 18 px, а карточка лишь накладывает поверх него лёгкий оттенок.

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

С заголовком всё работает так же. При прокрутке документа название уходит под заголовок окна и естественным образом размывается. Чёткое и размытое изображения отрисовываются в один и тот же момент, поэтому они не расходятся.

По краю стекла мы добавили рамку толщиной 1 px вместо тени. На белом фоне документа одной тени было недостаточно, чтобы различить границу. Между карточкой и правым краем окна мы оставили отступ в 24 px, чтобы тень была видна.

Мы не стали добавлять анимацию появления. У человека, нажавшего Ctrl+F, уже есть то, что он хочет найти. Даже короткая анимация в этот момент превращается в ожидание. Карточка открывается сразу после нажатия и выглядит стеклянной уже в первом кадре.

Мы снова нашли результаты поиска, которые раньше пропускали

Когда интерфейс стал компактнее, обнаружились места, где результаты поиска отображались неправильно.

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

У каждой проблемы была своя причина.

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

Мы исправили способ вычисления положения и порядок отрисовки цветов, решив все три проблемы.

Результаты поиска выделяются жёлтым цветом. Только просматриваемый в данный момент результат показывается оранжевым. Те же цвета используются на экране, в PDF и HTML.

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

За стекло приходится платить

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

Поэтому мы не накладываем несколько слоёв стекла друг на друга. Оно используется только для заголовка, боковой панели и одной открытой в данный момент карточки.

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

Казалось, что сделать окно поиска красивее и сделать его легче — противоположные задачи. Но в конце остался лишь один вопрос.

Когда этот экран нужно перерисовывать?