Una scheda di ricerca con un autentico effetto vetro, realizzata senza motore web

Trova è una funzione usata spesso negli editor. Eppure, proprio perché funzionava bene, non la modificavamo da molto tempo.

Anche la finestra Trova di mote era così. Occupava sempre due righe e, anche aprendola dopo aver selezionato una parola nel documento, il campo di ricerca rimaneva vuoto.

Tre app davano la stessa risposta

Prima di modificarla, abbiamo aperto Trova e sostituisci sullo stesso documento in Typora, MarkText e Obsidian e abbiamo acquisito delle schermate. Per Notion abbiamo consultato la documentazione pubblica. Riunendo tutto in una tabella, gli elementi in comune sono apparsi chiari.

Trova iniziava su una sola riga. Sostituisci si espandeva soltanto quando serviva. La parola selezionata veniva inserita immediatamente nel campo di ricerca. Anche il numero di corrispondenze all’interno del campo e le frecce per spostarsi tra una corrispondenza e l’altra erano soluzioni adottate quasi ovunque.

Anche mote ha deciso di seguire questo flusso.

Abbiamo ridotto la schermata predefinita a una sola riga. Sostituisci può essere aperto con il pulsante a sinistra oppure con Ctrl+H. Se il testo selezionato occupa una sola riga e non supera i 200 caratteri, viene inserito automaticamente come termine di ricerca.

Quando non ci sono risultati corrispondenti, invece del numero 0 viene mostrato il messaggio «Nessun risultato». Intorno al campo compare un bordo rosso. Così è possibile verificare subito se si tratta di un errore di battitura o se quella parola non è davvero presente nel documento.

Abbiamo eliminato soltanto una riga, ma ora è visibile una porzione maggiore del testo. È anche meno frequente che il primo risultato della ricerca venga nascosto dalla scheda.

Trova viene usato molto più spesso di Sostituisci. Se una funzione usata solo ogni tanto rimane sempre aperta, ogni operazione frequente finisce per pagarne il costo.

Non abbiamo cambiato tutto per renderlo uguale agli altri editor. Abbiamo mantenuto la scheda sospesa nell’angolo superiore destro e il pulsante delle opzioni. Non abbiamo esaminato gli altri prodotti per copiarli. Lo abbiamo fatto per distinguere le convenzioni familiari dalle scelte proprie di mote.

Il testo sotto la scheda viene sfocato davvero

La scheda Trova sembra fatta di vetro. Non è un semplice effetto. Il testo sotto la scheda viene realmente ridisegnato con una sfocatura.

All’inizio avevamo deciso di eliminare del tutto l’effetto di sfocatura su Linux. Il renderer di GTK non dispone di una funzione per campionare la superficie dietro un widget fratello. Inoltre, scorrendo il documento, lo sfondo cambiava e doveva quindi essere ricalcolato a ogni fotogramma. Abbiamo ritenuto che una schermata veloce fosse più importante di una schermata bella.

La soluzione è stata fare in modo che fosse l’editor stesso a disegnare la schermata sfocata, invece di sfocare la scheda.

Quando disegna il documento, l’editor ridisegna una volta soltanto la parte coperta dalla scheda. La seconda volta applica una sfocatura di 18 px, mentre la scheda aggiunge sopra solo una leggera tinta.

Vengono ridisegnate esclusivamente le righe effettivamente visibili sotto la scheda e l’operazione avviene all’interno di un fotogramma che sarebbe comunque stato disegnato. Il numero di fotogrammi programmati durante lo stato di inattività resta pari a 0.

Lo stesso vale per l’intestazione. Quando si scorre il documento, il titolo passa sotto l’intestazione e si sfoca in modo naturale. Poiché la schermata nitida e quella sfocata vengono disegnate nello stesso istante, rimangono perfettamente allineate.

Sul bordo del vetro abbiamo aggiunto un contorno di 1 px al posto dell’ombra. Su un documento bianco, infatti, la sola ombra non bastava a distinguere chiaramente i margini. Tra la scheda e il lato destro della finestra abbiamo inoltre lasciato uno spazio di 24 px, così che l’ombra possa rimanere visibile.

Non abbiamo aggiunto un’animazione di comparsa. Chi preme Ctrl+F ha già qualcosa da cercare. In quel momento, anche una breve animazione diventa un’attesa. La scheda si apre appena si preme il comando e appare come vetro fin dal primo fotogramma.

Abbiamo ritrovato anche i risultati di ricerca che ci sfuggivano

Dopo aver ridotto l’interfaccia, abbiamo notato alcuni punti in cui i risultati della ricerca non venivano visualizzati correttamente.

I risultati all’interno delle tabelle non venivano colorati. In modalità lettura, la posizione dell’evidenziazione risultava disallineata. Nel codice inline e nel testo evidenziato, il colore di sfondo esistente copriva l’indicazione della ricerca.

Ogni problema aveva una causa diversa.

Nelle tabelle era necessario calcolare separatamente la posizione per ciascuna cella. In modalità lettura bisognava riallineare le posizioni dei simboli nascosti. Nel testo con un colore di sfondo, l’indicazione della ricerca doveva essere disegnata per prima.

Abbiamo corretto il metodo di calcolo delle posizioni e l’ordine con cui vengono disegnati i colori, risolvendo tutti e tre i problemi.

I risultati della ricerca sono evidenziati in giallo. Soltanto il risultato visualizzato in quel momento appare in arancione. Gli stessi colori vengono usati sullo schermo, nei PDF e nell’HTML.

Non abbiamo cambiato il colore del testo. Un evidenziatore non dipinge sopra le lettere: colloca il colore tra la carta e le lettere.

Il vetro ha un costo

Se si scorre il documento mentre la scheda Trova è aperta, l’effetto di sfocatura viene ricalcolato a ogni schermata. Viene ridisegnata soltanto l’area sotto la scheda, ma questo non significa che il costo scompaia.

Per questo non sovrapponiamo molti strati di vetro. Lo usiamo soltanto per l’intestazione, la barra laterale e l’unica scheda aperta in quel momento.

Il vetro non è un materiale decorativo, ma un budget da distribuire entro i limiti delle prestazioni.

Rendere la finestra Trova più bella e renderla più leggera sembravano obiettivi opposti. Ma alla fine è rimasta una sola domanda.

Quando deve essere ridisegnata questa schermata?