Una tarjeta de búsqueda con un auténtico efecto de cristal, renderizado sin motor web

Buscar es una función que se usa a menudo en un editor. Pero, como funcionaba bien, pasamos mucho tiempo sin tocarla.

A la ventana de búsqueda de mote le ocurría lo mismo. Siempre ocupaba dos líneas y, aunque se abriera después de seleccionar una palabra en el documento, el campo de búsqueda aparecía vacío.

Tres aplicaciones daban la misma respuesta

Antes de modificarla, abrimos Buscar y reemplazar en el mismo documento con Typora, MarkText y Obsidian, y tomamos capturas. En el caso de Notion, lo comprobamos mediante la documentación pública de ayuda. Al reunirlo todo en una tabla, los puntos en común quedaron claros.

La búsqueda empezaba en una sola línea. La función de reemplazo se desplegaba únicamente cuando hacía falta. La palabra seleccionada aparecía directamente en el campo de búsqueda. Casi todas las aplicaciones también mostraban el número de coincidencias dentro del campo de entrada y permitían desplazarse entre ellas con flechas.

Decidimos que mote también siguiera este flujo.

Redujimos la vista predeterminada a una sola línea. La función de reemplazo puede abrirse con el botón de la izquierda o con Ctrl+H. Si el texto seleccionado ocupa una sola línea y tiene 200 caracteres o menos, se introduce automáticamente como término de búsqueda.

Cuando no hay resultados coincidentes, se muestra «Sin resultados» en lugar del número 0. El campo de entrada también adquiere un borde rojo. Así se puede comprobar de inmediato si se trata de un error tipográfico o si la expresión realmente no aparece en el documento.

Solo redujimos una línea, pero se podía ver más contenido del documento. También disminuyeron las ocasiones en que la tarjeta tapaba el primer resultado de búsqueda.

Usamos Buscar con mucha más frecuencia que Reemplazar. Si una función que solo se utiliza de vez en cuando permanece siempre desplegada, pagamos su coste cada vez que realizamos una tarea habitual.

No cambiamos todo para que se pareciera a otros editores. Mantuvimos la tarjeta flotante en la esquina superior derecha y el botón de opciones. No analizamos otros productos para imitarlos. Lo hicimos para distinguir entre las convenciones conocidas y las decisiones propias de mote.

El texto situado bajo la tarjeta se desenfoca de verdad

La tarjeta de búsqueda parece de vidrio. No es un simple efecto. El contenido situado debajo de la tarjeta se dibuja realmente desenfocado.

Al principio decidimos eliminar por completo el efecto de desenfoque en Linux. El renderizador de GTK no permite muestrear la superficie situada detrás de un widget hermano. Además, como el fondo cambia cada vez que se desplaza el documento, había que volver a calcularlo en cada fotograma. Consideramos que una pantalla rápida era más importante que una pantalla bonita.

La solución consistió en hacer que el propio editor dibujara la vista desenfocada, en vez de desenfocar la tarjeta.

Cuando el editor dibuja el documento, vuelve a dibujar una vez más únicamente la parte cubierta por la tarjeta. La segunda vez aplica un desenfoque de 18 px, y la tarjeta solo añade encima un tinte tenue.

Solo se vuelven a dibujar las líneas realmente visibles bajo la tarjeta, y este trabajo se realiza dentro del fotograma que ya se estaba dibujando de todos modos. El número de fotogramas programados durante el estado de inactividad sigue siendo 0.

La cabecera funciona de la misma manera. Al desplazar el documento, el título pasa por debajo de la cabecera y se desenfoca de forma natural. Como la vista nítida y la desenfocada se dibujan en el mismo instante, nunca quedan desalineadas.

En el borde del vidrio añadimos un contorno de 1 px en lugar de una sombra. Lo hicimos porque, sobre un documento blanco, era difícil distinguir los bordes únicamente con una sombra. También dejamos un margen de 24 px entre la tarjeta y el lado derecho de la ventana para que la sombra pudiera verse.

No añadimos una animación de entrada. Quien pulsa Ctrl+F ya tiene algo que buscar. Incluso una transición breve se convierte en una espera en ese momento. La tarjeta se abre en cuanto se pulsa y parece de vidrio desde el primer fotograma.

También recuperamos los resultados de búsqueda que se nos escapaban

Al reducir la interfaz, vimos lugares donde los resultados de búsqueda no se mostraban correctamente.

Los resultados dentro de las tablas no aparecían coloreados. En el modo de lectura, la posición del resaltado estaba desalineada. Dentro del código en línea y de los fragmentos marcados con resaltador, el color de fondo existente ocultaba la indicación de búsqueda.

Cada problema tenía una causa distinta.

Dentro de las tablas había que calcular la posición por separado para cada celda. En el modo de lectura había que volver a ajustar las posiciones de los símbolos ocultos. En el texto con color de fondo había que dibujar primero la indicación de búsqueda.

Corregimos el método de cálculo de las posiciones y el orden en que se dibujaban los colores, y así resolvimos los tres problemas.

Los resultados de búsqueda se muestran en amarillo. Solo el resultado que se está consultando aparece en naranja. Usamos los mismos colores en la pantalla, en PDF y en HTML.

No cambiamos el color del texto. Un resaltador no pinta sobre las letras, sino que coloca el color entre el papel y las letras.

El vidrio tiene un coste

Si se desplaza el documento con la tarjeta de búsqueda abierta, el efecto de desenfoque vuelve a calcularse en cada pantalla. Solo se vuelve a dibujar la parte situada bajo la tarjeta, pero eso no significa que el coste desaparezca.

Por eso no apilamos varias capas de vidrio. Solo lo usamos en la cabecera, la barra lateral y una única tarjeta abierta en ese momento.

El vidrio no es un material decorativo, sino un presupuesto que debe repartirse dentro de los límites del rendimiento.

Hacer que la ventana de búsqueda fuera más bonita y hacerla más ligera parecían objetivos opuestos. Pero al final solo quedó una pregunta.

¿Cuándo debe volver a dibujarse esta pantalla?