Editor: contatore di righe nei tab, scrollbar più larga ed etichette di azione più lunghe
I cambiamenti grossi (shadow DOM, dark mode, l’AI Helper) si prendono i titoli. Le rifiniture UX no — eppure sono proprio loro a cambiare come usi uno strumento giorno dopo giorno. In v3.2.80–82 abbiamo rilasciato quattro pezzi che insieme rendono il lavoro con l’editor di regole notevolmente più piacevole.
Contatore di righe nei tab CSS / JS / Azioni (v3.2.82)
Ogni tab dell’editor di regole — CSS, JS, Azioni — ora porta un badge con il conteggio delle righe accanto al nome. Analogamente al tab Azioni, che da tempo mostra il numero di azioni.
Perché: quando guardi un set di regole, vedi subito dov’è la sostanza. 87 righe di CSS + 12 righe di JS + 3 azioni — un colpo d’occhio e sai che questo set è di media complessità e che la logica vive soprattutto nel CSS. Prima dovevi aprire ogni tab per farti un’idea.
Piccolo dettaglio tecnico: il contatore si aggiorna dal vivo mentre digiti (debounce di 200 ms), così il badge non lampeggia a ogni tasto.
Scrollbar più larga nelle finestre: 10 → 14 px (v3.2.80)
La scrollbar interna delle finestre di sviluppo (pannello CSS, pannello JS, JS Console, Output Console, AI Helper) era larga 10 px — andava in conflitto con la maniglia di resize da 8 px sul bordo destro. Era facile prendere la maniglia al posto della scrollbar e ridimensionare la finestra per errore.
Dopo la modifica la scrollbar è larga 14 px — più facile da afferrare, e la maniglia di resize c’è ancora, ma chiaramente sotto al bordo della scrollbar. Niente più conflitto, niente più frustrazione.
Etichette di azione 8 → 12 caratteri (v3.2.81)
Le etichette delle azioni nella barra avevano un limite hard-coded di 8 caratteri. Andava bene per "Dark", "Hide" e simili — ma quando lavoravi con l’AI Helper, spesso voleva suggerire un nome più lungo e descrittivo ("Hide ads", "Wide column") — e veniva tagliato.
Il nuovo limite è di 12 caratteri. UI e backend sono allineati — l’AI Helper, l’editor, il render della barra, il pannello delle impostazioni — tutti parlano della stessa lunghezza. Le etichette ora possono portare più contesto su cosa fa ciascuna azione.
Toolbar della cartella riorganizzata (v3.2.80)
La toolbar dell’intestazione di cartella (pannello di modifica cartella) aveva tutto su una sola riga: Export, Import, Delete + Group, Bar, Window. Sei pulsanti uno accanto all’altro — visivamente si confondevano ed era difficile trovare in fretta quello che cercavi.
Il nuovo layout è su due righe:
- In alto: Export / Import / Delete — operazioni sulla cartella nel suo complesso, sopra il campo URL patterns.
- In basso: + Group / + Bar / + Window — creazione di elementi figli, separata dalle operazioni sulla cartella.
Due gruppi logici, riconoscibili a colpo d’occhio.
Altri piccoli guadagni della stessa serie
Insieme ai cambiamenti principali è arrivata una manciata di ritocchi più piccoli ma piacevoli:
- Padding simmetrico nel contenitore
.rules-area— 14 px (v3.2.88) — prima erano 24 px a destra, un’asimmetria ereditata da una precedente iterazione dell’UI. - Conservazione dello scroll nell’editor durante la sync da un altro dispositivo (v3.2.82) — quando un altro dispositivo modifica la regola, CodeMirror non salta più alla posizione 0, ti lascia dove eri.
- Pulsante ancora del dropdown — un secondo clic lo chiude (v3.2.89) — risolto un bug per cui un dropdown aperto dal pulsante poteva essere chiuso solo cliccando fuori, non ricliccando sul pulsante.
Vedi anche
- Finestre nella pagina — panoramica di tutte le finestre di sviluppo coperte dalla scrollbar più larga
- Scorciatoie da tastiera di JustZix — il cheatsheet completo della tastiera
- Pannello di modifica accanto alla pagina — un altro modo di gestire la modifica quotidiana delle regole
Installa JustZix — e senti la differenza nei dettagli.
Valuta questo articolo
Nessuna valutazione — sii il primo.