El botón flotante de JustZix — una gota de 3 letras con hover state, snap, menú popup
El botón flotante es la pequeña gota de 3 letras que ves en cada página donde JustZix tiene una regla activa. Es la entrada a toda la UI de JustZix — un clic abre un popup con los toggles, el drag te permite reposicionarlo, el snap lo conecta a las barras de acciones. Pequeño visualmente, pero condensa mucha funcionalidad. Este artículo lo abre por dentro.
Label de 3 letras por carpeta
Cada carpeta en JustZix (la unidad principal de agrupación de las reglas) tiene un icono opcional — máx. 3 caracteres, automáticamente en MAYÚSCULAS. El botón flotante muestra el icono de la primera carpeta que coincide (por prefijo URL):
folder.icon = 'qa' → label «QA»
folder.icon = 'dev' → label «DEV»
folder.icon = '🐛' → label «🐛» (emoji truncado a 3 caracteres)
folder.icon = (vacío) → label «ZIX» (default)Idea: un power user tiene 5-10 carpetas por proyecto, cada una con un marcador de 3 letras distinto. Ver «QA» en el botón flotante significa que las reglas QA están activas. Feedback visual antes de cualquier interacción.
4 estados visuales — color + opacidad
| Estado | Clase CSS | Cuándo | Aspecto |
|---|---|---|---|
| jz-on | todas las carpetas que coinciden activadas | Color pleno | Color de acento de la carpeta (o teal por defecto) |
| jz-mixed | algunas carpetas on, otras off | Semitransparente | Atenuado — señala «atención, no todo activo» |
| jz-off | todas las carpetas que coinciden desactivadas | Gris | Bajo contraste — «inactivo» |
| jz-globally-off | extensión desactivada globalmente | Rojizo / llamativo | «Toda la extensión desactivada» |
El estado se actualiza automáticamente al storage onChanged — conmuta una regla desde cualquier sitio (página de opciones, popup widget, menú contextual de Chrome) → el botón flotante cambia de aspecto enseguida.
Anatomía de un clic — el popup widget
Clic izquierdo en el botón flotante → se abre un popup widget junto a él. El widget contiene:
- Pausa global — pauseToggle en lo alto, un clic = desactivar toda la extensión
- Sección Carpetas — un checkbox por carpeta que coincide con la URL, toggle on/off por carpeta (persistente)
- Sección Barras de acciones — conmuta la visibilidad de cada barra por separado (sesión por pestaña)
- Sección Ventanas CSS/JS/Console — un checkbox por pane (persistente)
- Enlace «Abrir Opciones» — editor completo en una nueva pestaña
Un clic fuera cierra el popup (event listener a nivel de document). Pulsar un checkbox activa setBarHidden / setCssPaneEnabled / setFolderEnabled — todas encadenadas vía Promise para evitar race conditions.
Snap connections con barras y panes
El botón flotante participa en las snap connections como pseudo-elemento con el ID '__float'. Mecánica idéntica a los panes:
- Arrastra el botón flotante cerca de una barra de acciones (≤20px) → snap, los dos elementos = un grupo
- Arrastra cualquier elemento del grupo → todo el grupo se mueve junto
- Clic derecho en el botón flotante → menú contextual con las opciones «Desconectar de X»
Caso de uso: botón flotante como «manija de anchor» de todo el grupo. Barras + Output Console enganchadas al botón flotante → arrastrar el botón flotante = mueves todo el dashboard.
Clic derecho = menú contextual
Mismo mecanismo que las barras / CSS pane — menú contextual por elemento. El botón flotante tiene:
- «Ocultar hasta la recarga» — el botón flotante desaparece hasta el próximo F5. Un OFF persistente requiere la página de opciones (intencionadamente no en el menú contextual — para que los usuarios no confundan «ocultar» con «desactivar toda la extensión»)
- «Desconectar de X» — por snap connection. Más «Desconectar todas las conexiones»
Sin fuente/tamaño — el botón flotante es de tamaño fijo (32×32px). Ahí no hay texto que personalizar aparte de la label de 3 letras (que viene de folder.icon).
Caso de uso 1 — Indicador visual del scope
Tienes 3 carpetas: «ALL» (funciona en todas partes), «GHB» (solo github), «GMA» (solo gmail). Cada una con un color distinto (verde, negro, rojo) y un icono de 3 letras. Visitas github.com → el botón flotante muestra «GHB» negro. Visitas gmail.com → «GMA» rojo. Sin comprobar el popup widget ves el scope.
Caso de uso 2 — Pausa global rápida
Llamada de Skype, demostración de una nueva feature a alguien en producción, JustZix podría molestar. Clic en el botón flotante → toggle «Pausa global» → la extensión desactiva todas las reglas. Tras la demo → pulsa de nuevo → activado. Sin entrar en chrome://extensions.
Caso de uso 3 — Ocultar por página hasta la recarga
La regla «Force dark mode» coincide también con el sitio de tu banco — que ya tiene su propio modo oscuro. El botón flotante tapa el logo del banco. Clic derecho en el botón flotante → «Ocultar hasta la recarga» → el botón flotante desaparece solo en esta pestaña, hasta el F5. Las reglas siguen corriendo, solo la UI está oculta.
Caso de uso 4 — Posición por dominio
La posición del botón flotante es persistente en chrome.storage.sync. Por defecto abajo a la derecha (anchor BR). Arrastra → guarda → la próxima visita a ese dominio lo devuelve donde lo dejaste. La posición es por ID de elemento, pero todas las páginas comparten el ID '__float' — así que la posición es global entre los dominios. Si la quieres por página → usa el snap con una barra que sea scope-específica.
Trampas
- Icono de 3 letras — truncado a 3 caracteres. «qa-team» → «QA-» (con el guion). Best practice: 1-3 caracteres alfanuméricos. Un emoji único = OK (p. ej. 🐛 → «🐛»), pero un emoji multi-carácter (👨💻 = 5 codepoints) se trunca de forma extraña.
- folder.icon es «ZIX» por defecto, incluso cuando no defines uno personalizado — antes era «JZ» (2 caracteres), desde v2.13 es «ZIX» alineado a la marca.
- Pausa global vs desactivación por carpeta. La pausa global no resetea el estado de activación por carpeta — al quitar la pausa, las carpetas vuelven al estado en el que estaban. La desactivación por carpeta es persistente, independiente de la pausa global.
- La posición del botón flotante en el sync storage puede desincronizarse entre dispositivos si arrastras rápido en uno y abres la pestaña en otro. Eventual consistency de Chrome ~1-2 seg.
- El snap del botón flotante no es bidireccional. La posición del botón flotante es global, las barras tienen una posición por estado de ventana. El snap funciona visualmente, pero si mueves el botón flotante a otra pestaña, las barras no lo siguen (están scope-locked a su pestaña).
Qué hacer después
El botón flotante es el «punto de entrada» a toda la UI de JustZix — todos los demás elementos (barras, panes) son más contextuales. Mira también:
- Snap connections — el botón flotante como anchor de un grupo
- Menú contextual en las cabeceras de los panes — mecanismo paralelo
- Mini-IDE en la pestaña — mapa completo de la UI
Instala JustZix — el botón flotante aparecerá solo en cuanto añadas tu primera regla.
Valora este artículo
Sin valoraciones — sé el primero.