← Tutti gli articoli

Finestre nel frontend

Il pulsante flottante di JustZix — una goccia a 3 lettere con hover state, snap, menu popup

15 maggio 2026 · di JustZix Team

Il pulsante flottante è la piccola goccia a 3 lettere che vedi su ogni pagina dove JustZix ha una regola attiva. È l'ingresso all'intera UI di JustZix — un clic apre un popup con i toggle, il drag ti permette di riposizionarlo, lo snap lo collega alle barre delle azioni. Piccolo visivamente, ma condensa molta funzionalità. Questo articolo lo apre dall'interno.

Label a 3 lettere per folder

Ogni folder in JustZix (l'unità principale di raggruppamento delle regole) ha un'icona opzionale — max 3 caratteri, automaticamente MAIUSCOLE. Il pulsante flottante mostra l'icona del primo folder corrispondente (per prefisso URL):

folder.icon = 'qa'      → label «QA»
folder.icon = 'dev'     → label «DEV»
folder.icon = '🐛'      → label «🐛» (emoji troncato a 3 caratteri)
folder.icon = (vuoto)   → label «ZIX» (default)

Idea: un power user ha 5-10 folder per progetto, ognuno con un marcatore a 3 lettere diverso. Vedere «QA» sul pulsante flottante significa che le regole QA sono attive. Feedback visivo prima di qualsiasi interazione.

4 stati visivi — colore + opacità

Lo stato si aggiorna automaticamente a storage onChanged — commuta una regola da qualsiasi parte (pagina delle opzioni, popup widget, menu contestuale di Chrome) → il pulsante flottante cambia subito aspetto.

Anatomia di un clic — il popup widget

Clic sinistro sul pulsante flottante → si apre un popup widget accanto ad esso. Il widget contiene:

• Pausa globale — pauseToggle in cima, un clic = disattivare l'intera estensione
• Sezione Folder — una checkbox per folder che corrisponde all'URL, toggle on/off per folder (persistente)
• Sezione Barre delle azioni — commuta la visibilità di ogni barra separatamente (sessione per scheda)
• Sezione Finestre CSS/JS/Console — una checkbox per pane (persistente)
• Link «Apri Opzioni» — editor completo in una nuova scheda

Un clic fuori chiude il popup (event listener a livello di document). Cliccare una checkbox attiva setBarHidden / setCssPaneEnabled / setFolderEnabled — tutte concatenate via Promise per evitare race condition.

Snap connections con barre e pane

Il pulsante flottante partecipa alle snap connections come pseudo-elemento con l'ID '__float'. Meccanica identica ai pane:

1. Trascina il pulsante flottante vicino a una barra delle azioni (≤20px) → snap, i due elementi = un gruppo
2. Trascina qualsiasi elemento del gruppo → l'intero gruppo si muove insieme
3. Clic destro sul pulsante flottante → menu contestuale con le opzioni «Scollega da X»

Caso d'uso: pulsante flottante come «maniglia di anchor» per l'intero gruppo. Barre + Output Console agganciate al pulsante flottante → trascinare il pulsante flottante = sposti l'intera dashboard.

Clic destro = menu contestuale

Stesso meccanismo delle barre / CSS pane — menu contestuale per elemento. Il pulsante flottante ha:

• «Nascondi fino al ricaricamento» — il pulsante flottante sparisce fino al prossimo F5. Un OFF persistente richiede la pagina delle opzioni (intenzionalmente non nel menu contestuale — così gli utenti non confondono «nascondi» con «disattiva l'intera estensione»)
• «Scollega da X» — per snap connection. Più «Scollega tutte le connessioni»

Niente font/dimensione — il pulsante flottante è di dimensione fissa (32×32px). Lì non c'è testo da personalizzare a parte la label a 3 lettere (che viene da folder.icon).

Caso d'uso 1 — Indicatore visivo dello scope

Hai 3 folder: «ALL» (funziona ovunque), «GHB» (solo github), «GMA» (solo gmail). Ognuno con un colore diverso (verde, nero, rosso) e un'icona a 3 lettere. Visiti github.com → il pulsante flottante mostra «GHB» nero. Visiti gmail.com → «GMA» rosso. Senza controllare il popup widget vedi lo scope.

Caso d'uso 2 — Pausa globale rapida

Chiamata Skype, dimostrazione di una nuova feature a qualcuno in produzione, JustZix potrebbe dare fastidio. Clic sul pulsante flottante → toggle «Pausa globale» → l'estensione disattiva tutte le regole. Dopo la demo → clicca di nuovo → attivato. Senza entrare in chrome://extensions.

Caso d'uso 3 — Nascondere per pagina fino al ricaricamento

La regola «Force dark mode» corrisponde anche al sito della tua banca — che ha già la propria modalità scura. Il pulsante flottante copre il logo della banca. Clic destro sul pulsante flottante → «Nascondi fino al ricaricamento» → il pulsante flottante sparisce solo in questa scheda, fino al F5. Le regole girano ancora, solo la UI è nascosta.

Caso d'uso 4 — Posizione per dominio

La posizione del pulsante flottante è persistente in chrome.storage.sync. Di default in basso a destra (anchor BR). Trascina → salva → la prossima visita a quel dominio lo riporta dove l'hai lasciato. La posizione è per ID di elemento, ma tutte le pagine condividono l'ID '__float' — quindi la posizione è globale tra i domini. Se vuoi per pagina → usa lo snap con una barra che è scope-specifica.

Trappole

• Icona a 3 lettere — troncata a 3 caratteri. «qa-team» → «QA-» (con il trattino). Best practice: 1-3 caratteri alfanumerici. Un emoji singolo = OK (es. 🐛 → «🐛»), ma un emoji multi-carattere (👨‍💻 = 5 codepoint) si tronca in modo strano.
• folder.icon è «ZIX» di default, anche quando non ne definisci uno personalizzato — un tempo era «JZ» (2 caratteri), da v2.13 è «ZIX» allineato al brand.
• Pausa globale vs disattivazione per folder. La pausa globale non azzera lo stato di attivazione per folder — togliendo la pausa, i folder tornano allo stato in cui erano. La disattivazione per folder è persistente, indipendente dalla pausa globale.
• La posizione del pulsante flottante nel sync storage può desincronizzarsi tra dispositivi se trascini velocemente su uno e apri la scheda su un altro. Eventual consistency di Chrome ~1-2 sec.
• Lo snap del pulsante flottante non è bidirezionale. La posizione del pulsante flottante è globale, le barre hanno una posizione per stato di finestra. Lo snap funziona visivamente, ma se sposti il pulsante flottante su un'altra scheda, le barre non lo seguono (sono scope-locked alla loro scheda).

Cosa fare dopo

Il pulsante flottante è il «punto d'ingresso» per l'intera UI di JustZix — tutti gli altri elementi (barre, pane) sono più contestuali. Vedi anche:

• Snap connections — il pulsante flottante come anchor per un gruppo
• Menu contestuale sugli header dei pane — meccanismo parallelo
• Mini-IDE nella scheda — mappa completa della UI

Installa JustZix — il pulsante flottante apparirà da solo non appena aggiungi la tua prima regola.