Karta wyszukiwania z prawdziwym efektem szkła, rysowanym bez silnika przeglądarkowego
Czy zdarzyło Ci się, że po samym naciśnięciu przycisku wyszukiwania górna część ekranu stała się cięższa o dwa wiersze? Tak właśnie było z naszą kartą wyszukiwania, ale po przyjrzeniu się trzem innym edytorom zmniejszyliśmy ją do jednego wiersza.
Wyszukiwanie to często używana funkcja edytora. Ponieważ jednak działało poprawnie, przez długi czas go nie ruszaliśmy.
Tak samo było z oknem wyszukiwania w mote. Zawsze zajmowało dwa wiersze, a gdy otwierało się je po zaznaczeniu słowa w dokumencie, pole wyszukiwania pozostawało puste.
Trzy aplikacje dawały tę samą odpowiedź
Przed wprowadzeniem zmian otworzyliśmy wyszukiwanie i zamianę w tym samym dokumencie w aplikacjach Typora, MarkText i Obsidian, a następnie zrobiliśmy zrzuty ekranu. Notion sprawdziliśmy na podstawie publicznie dostępnej dokumentacji. Gdy zestawiliśmy wszystko w tabeli, podobieństwa stały się wyraźne.
Wyszukiwanie zaczynało się od jednego wiersza. Zamiana rozwijała się tylko wtedy, gdy była potrzebna. Zaznaczone słowo trafiało od razu do pola wyszukiwania. W większości aplikacji liczba dopasowań znajdowała się wewnątrz pola, a między dopasowaniami można było przechodzić za pomocą strzałek.
Postanowiliśmy, że mote także będzie działać w ten sposób.
Podstawowy widok zmniejszyliśmy do jednego wiersza. Zamianę można otworzyć przyciskiem po lewej stronie albo skrótem Ctrl+H. Jeśli zaznaczony fragment mieści się w jednym wierszu i ma nie więcej niż 200 znaków, automatycznie trafia do pola wyszukiwania.
Gdy nie ma pasujących wyników, zamiast cyfry 0 pojawia się komunikat „Brak wyników”. Pole otrzymuje czerwoną ramkę. Dzięki temu można od razu sprawdzić, czy wkradła się literówka, czy danego słowa rzeczywiście nie ma w dokumencie.
Ctrl+H. Liczba dopasowań wyszukiwanego hasła 통과 jest wyświetlana wewnątrz pola jako 1/3.Usunęliśmy tylko jeden wiersz, a mimo to widać więcej treści. Rzadziej też zdarza się, że karta zasłania pierwszy wynik wyszukiwania.
Z wyszukiwania korzysta się znacznie częściej niż z zamiany. Jeśli sporadycznie używana funkcja jest stale rozwinięta, za każdym razem obciąża najczęściej wykonywane zadanie.
Nie zmieniliśmy wszystkiego tak, by działało jak w innych edytorach. Zachowaliśmy unoszącą się w prawym górnym rogu kartę oraz przycisk opcji. Nie przyglądaliśmy się innym produktom po to, by je kopiować. Chcieliśmy odróżnić znajome rozwiązania od wyborów charakterystycznych dla mote.
Tekst pod kartą naprawdę się rozmywa
Karta wyszukiwania wygląda jak szkło. Nie jest to zwykły efekt wizualny. Treść znajdująca się pod kartą jest rzeczywiście rysowana z rozmyciem.
Początkowo postanowiliśmy całkowicie zrezygnować z efektu rozmycia w systemie Linux. Renderer GTK nie umożliwia próbkowania powierzchni znajdującej się za sąsiednim widżetem. Ponadto podczas przewijania dokumentu tło ciągle się zmienia, więc należałoby obliczać je ponownie w każdej klatce. Uznaliśmy, że szybki interfejs jest ważniejszy niż ładny.
Rozwiązaniem okazało się rysowanie rozmytego obrazu bezpośrednio przez edytor, zamiast rozmywania samej karty.
Podczas rysowania dokumentu edytor jeszcze raz renderuje wyłącznie obszar przykryty przez kartę. Przy drugim renderowaniu nakłada rozmycie o promieniu 18 px, a karta dodaje na nim jedynie delikatne zabarwienie.
Ponownie rysowane są tylko te wiersze, które rzeczywiście widać pod kartą, a cała operacja odbywa się w ramach klatki, która i tak jest renderowana. W stanie bezczynności liczba zaplanowanych klatek nadal wynosi 0.
Nagłówek działa tak samo. Podczas przewijania dokumentu tytuł przesuwa się pod nagłówek i naturalnie się rozmywa. Obraz ostry i rozmyty są rysowane w tej samej chwili, dlatego pozostają idealnie wyrównane.
Na krawędzi szkła zamiast cienia umieściliśmy obramowanie o grubości 1 px. Na białym dokumencie trudno było bowiem odróżnić krawędź za pomocą samego cienia. Między kartą a prawą krawędzią okna zostawiliśmy również 24 px odstępu, aby cień pozostał widoczny.
Nie dodaliśmy animacji pojawiania się. Osoba naciskająca Ctrl+F już wie, czego chce szukać. Nawet krótka animacja staje się w tym momencie oczekiwaniem. Karta otwiera się natychmiast i już od pierwszej klatki wygląda jak szkło.
Odnaleźliśmy też pomijane wyniki wyszukiwania
Gdy zmniejszyliśmy interfejs, zauważyliśmy miejsca, w których wyniki wyszukiwania nie były wyświetlane prawidłowo.
Wyniki w tabelach nie były zaznaczane kolorem. W trybie czytania położenie podświetlenia było przesunięte. W kodzie śródwierszowym i wewnątrz fragmentów zaznaczonych zakreślaczem istniejący kolor tła zasłaniał oznaczenia wyszukiwania.
Każdy z tych problemów miał inną przyczynę.
W tabelach położenie należało obliczać oddzielnie dla każdej komórki. W trybie czytania trzeba było ponownie dopasować pozycje ukrytych znaków. W przypadku tekstu z kolorowym tłem oznaczenia wyszukiwania należało rysować jako pierwsze.
Poprawiliśmy sposób obliczania położenia oraz kolejność rysowania kolorów, rozwiązując wszystkie trzy problemy.
Wyniki wyszukiwania są zaznaczane na żółto. Tylko aktualnie wyświetlany wynik jest pomarańczowy. Tych samych kolorów używamy na ekranie oraz w plikach PDF i HTML.
Nie zmieniliśmy koloru tekstu. Zakreślacz nie maluje po literach, lecz umieszcza kolor między papierem a tekstem.
Szkło ma swoją cenę
Gdy karta wyszukiwania jest otwarta podczas przewijania, efekt rozmycia jest obliczany ponownie dla każdego ekranu. Ponownie rysowany jest tylko obszar pod kartą, ale koszt tej operacji nie znika.
Dlatego nie układamy wielu warstw szkła jedna na drugiej. Używamy go tylko w nagłówku, na pasku bocznym i na jednej aktualnie otwartej karcie.
Szkło nie jest materiałem dekoracyjnym, lecz budżetem, który trzeba rozdzielać w granicach dostępnej wydajności.
Upiększanie okna wyszukiwania i zmniejszanie jego obciążenia wydawały się sprzecznymi celami. Ostatecznie pozostało jednak tylko jedno pytanie.
Kiedy należy ponownie narysować ten ekran?