Saltar al contenido

Chrome propio: quitar las decoraciones

La decisión que se toma en una línea y cuesta semanas: sin marco del sistema hay que reimplementar el arrastre, los botones, el redimensionado desde los bordes, el doble clic y los atajos. Qué hay que hacer y qué se pierde.

Lo que deja de funcionar

El arrastre

Es lo primero y lo más sencillo. El framework reconoce un atributo en tu marcado:

HTML
<header data-tauri-drag-region>  <span class="titulo">Catálogo</span>  <!-- los botones NO deben arrastrar: hay que sacarlos de la región -->  <div class="botones">    <button id="min">–</button>    <button id="max">□</button>    <button id="close">×</button>  </div></header>

Dos detalles que producen fallos:

  • Los elementos interactivos dentro de la región de arrastre pueden quedar capturados. Un botón dentro de una zona de arrastre puede dejar de responder al clic, porque el gesto se interpreta como el inicio de un arrastre. La solución es que los botones estén fuera de la región, o marcados para excluirse.
  • Un texto seleccionable dentro de la región no se puede seleccionar. Es coherente y desconcierta: si el título tiene que poder copiarse, no puede estar en la zona de arrastre.

Los botones

Tres llamadas, desde el frontend o desde Rust:

JS
import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';const win = getCurrentWebviewWindow();document.getElementById('min').onclick = () => win.minimize();document.getElementById('max').onclick = () => win.toggleMaximize();document.getElementById('close').onclick = () => win.close();

El código es trivial. Lo que no lo es: el orden y el aspecto son distintos en cada sistema. En macOS van a la izquierda, redondos y en un orden concreto; en Windows y en la mayoría de escritorios de Linux van a la derecha, cuadrados y en otro. Una aplicación que ponga los tres siempre igual se ve fuera de sitio en dos de las tres plataformas.

Reproducir cada convención es trabajo de diseño, no de programación, y es la parte que la gente subestima al tomar la decisión.

La alternativa que casi siempre gana

Antes de quitar las decoraciones conviene mirar lo que se puede conseguir sin hacerlo:

La recomendación de este track: si lo que quieres es que tu interfaz llegue arriba del todo en macOS, usa la barra superpuesta del nivel 12.3 y quédate ahí. Quitar las decoraciones tiene sentido cuando la ventana es el producto —una herramienta de diseño, un reproductor, algo con una forma que no es un rectángulo con barra— y no cuando solo quieres ganar treinta píxeles.