← Tutti gli articoli

API e helper

Menu contestuale sugli header dei pane — clic destro = font, dimensione, scollega, disattiva

15 maggio 2026 · di JustZix Team

Un pane è sullo schermo. Vuoi staccarlo dal gruppo snap. O cambiargli il font in Fira Code. O disattivarlo perché sparisca per un momento. Senza un menu contestuale dovresti andare alla pagina delle opzioni (3 clic), modificare il pane, salvare, tornare alla pagina. Con il menu contestuale (da v2.13.42 per le barre, v2.13.55 per i CSS pane, v2.13.70 per tutti i pane con i font) — clic destro sull'header, 1 secondo.

Cosa c'è nel menu contestuale

Un clic destro su .jz-pane-header (la striscia stretta in cima a un pane, la stessa che afferri per trascinare) apre un menu flottante con 4 sezioni:

Tutto applicato immediatamente — niente F5, niente pulsante di salvataggio. Cambiare il font in «Fira Code» → vedi subito le legature (===, !==, →) se il sistema ha il font installato.

Funziona per tutti e 4 i tipi di pane + la barra

Il menu contestuale è unificato — lo stesso showBarContextMenu(id, x, y) gestisce 5 tipi di elementi. Rilevamento del tipo dal prefisso di ID:

• ab_* → Barra delle azioni — tutte le opzioni tranne font/dimensione
• cp_* → CSS pane — menu completo
• jp_* → JS pane — menu completo
• jc_* → JS Console — menu completo
• oc_* → Output Console — menu completo

Le barre delle azioni non hanno font/dimensione (il loro contenuto sono pulsanti, non testo da leggere). I CSS pane/JS pane sì — perché lì leggi/scrivi codice.

Caso d'uso 1 — Scollegare una snap connection

Hai un gruppo: Barra delle azioni + CSS pane + Output Console agganciati verticalmente. Vuoi tirare fuori la Output Console per spostarla su un altro monitor. Senza il menu contestuale — dovresti trascinarla a >20px dal gruppo, ma allora lo snap si scollega «pigramente» e la posizione potrebbe essere abbastanza vicina da ri-agganciarsi.

Con il menu contestuale — clic destro sull'header della Output Console → «Scollega tutte le connessioni». Connessioni sparite. Ora la Output Console può essere trascinata ovunque senza rischio di ri-snap. Bonus: «Scollega dal CSS pane» (per connessione) lascia intatte le altre connessioni — utile per gruppi a 3 elementi dove vuoi rompere solo un bordo.

Caso d'uso 2 — Nascondere un pane per un momento

Stai facendo refactoring del CSS. Il CSS pane è aperto con un foglio di stile di 200 righe. Arriva un'e-mail — vuoi rispondere in Gmail nella stessa scheda. Il pane è visivamente d'intralcio.

• CSS pane → «Disattiva questo CSS pane»: pane sparito. Persistente — il F5 non lo riporta. Riattiva tramite il popup del widget (clic sull'icona JustZix nella barra degli strumenti), o chrome → JustZix → «Finestre CSS» → checkbox.
• Barra delle azioni → «Nascondi fino al ricaricamento»: barra sparita solo in questa scheda, fino al prossimo F5. Più leggero, un toggle «solo per ora».

La differenza voluta: i pane (CSS/JS/Console/OC) hanno «Disattiva» = persistente (il loro ruolo è «questo deve essere visibile sempre»). Le barre hanno «Nascondi fino al ricaricamento» = effimero (le barre sono visibili di default, quindi disattivare = «non ora»).

Caso d'uso 3 — Font Fira Code per l'editor CSS

Il font di default per pane.body è il mono di sistema — leggibile, ma senza legature. Se hai Fira Code installato localmente:

1. Clic destro sull'header del CSS pane → Font → «Fira Code».
2. L'editor rende subito le legature: => come →, !== come ≠, >= come ≥.
3. Cambiamento per pane — ogni CSS pane / JS pane / Console può avere il proprio font.

Lista offerta: Default (mono di sistema), Fira Code, JetBrains Mono, Cascadia Code, Consolas, Menlo, ui-monospace. Se il sistema non ha un font — il browser fa fallback su monospace (lo stesso di Default). Nessun errore, nessun avviso — graceful.

Caso d'uso 4 — Dimensione 10px per una mini-dashboard

Stai costruendo una dashboard personale per un monitor 4K. CSS pane + JS pane + Output Console agganciati in basso a destra, ognuno 300×200px. La dimensione del font di default (~13px) fa sì che il testo non entri bene.

Clic destro → Dimensione → 10px. Tre volte (ogni pane separatamente). Ora in 200px di altezza entrano ~16 righe invece di ~12. La mini-dashboard diventa densa di informazioni.

Al contrario per l'accessibilità: dimensione 18-20px dà più comfort agli utenti con problemi di vista, a costo della densità di informazioni.

Caso d'uso 5 — Personalizzazione per pane

Tre CSS pane nella stessa scheda:

• «Production styles» — Fira Code 13px (comfort)
• «Quick fixes» — Consolas 12px (piccolo, per snippet di 5 righe)
• «Color palette» — ui-monospace 14px (default, dato che il contenuto sono solo codici hex)

Ogni pane ha la propria configurazione di storage persistente. F5 → tutto torna nel suo font/dimensione. Tra schede anche (chrome.storage.local).

Trappole

• Il clic destro DEVE essere su .jz-pane-header (la striscia stretta in alto). Un clic destro sul body del pane (textarea) apre il menu nativo del browser (Taglia/Copia/Incolla/Ispeziona). Voluto — il body è la «zona di lavoro», l'header la «zona di controllo».
• Le barre delle azioni NON hanno font/dimensione. La barra delle azioni sono pulsanti, non testo. Per ingrandire il testo dei pulsanti → usa i campi color + CSS personalizzato nelle tue regole.
• Il fallback del font è silenzioso. Se l'utente sceglie «Fira Code» senza averlo installato, il browser di solito fa fallback in silenzio su monospace. Controlla in Impostazioni → Privacy → Impostazioni dei siti → Font se il browser ha accesso ai font di sistema (su alcune configurazioni è limitato).
• Disattivare un CSS pane è persistente. Facile dimenticare di aver nascosto un pane → poi ti chiedi perché il CSS non si applica. Posti per riattivare: popup del widget (clic sull'icona JustZix), chrome → JustZix → sottomenu «Finestre CSS», o options.html.
• Scollegare uno snap NON rimuove i metadati di connessione. Se trascini il pane di nuovo a <20px dal suo vecchio vicino, lo snap torna. Voluto — scollegare è uno «spostamento ad-hoc», non un disaccoppiamento permanente.

Cosa fare dopo

Il menu contestuale è un «secondo strato di UI» — modifiche rapide senza una deviazione alle opzioni. Perfetto per i power user che passano ore al giorno con le barre di JustZix. Vedi anche:

• Snap connections — la meccanica completa dei gruppi, quelli da cui ti stai scollegando
• Scorciatoie globali Ctrl+Shift+L/S/K/H — perché il clic destro non basta a tutti
• Mini-IDE nella scheda — mappa completa della UI

Installa JustZix — completamente gratuito, senza account, senza server.