Editor: contador de líneas en las pestañas, scrollbar más ancha y etiquetas de acción más largas
Los cambios grandes (shadow DOM, modo oscuro, el AI Helper) se llevan los titulares. Los retoques de UX no — y, sin embargo, son ellos los que cambian cómo usas una herramienta día tras día. En v3.2.80–82 entregamos cuatro piezas que, juntas, hacen que trabajar con el editor de reglas resulte notablemente más agradable.
Contador de líneas en las pestañas CSS / JS / Acciones (v3.2.82)
Cada pestaña del editor de reglas — CSS, JS, Acciones — lleva ahora un badge con el conteo de líneas junto a su nombre. Análogo a la pestaña Acciones, que desde hace tiempo muestra el número de acciones.
Para qué: cuando miras un conjunto de reglas, ves de inmediato dónde está el peso. 87 líneas de CSS + 12 líneas de JS + 3 acciones — un vistazo y sabes que este conjunto es de complejidad media y que la mayor parte de la lógica vive en el CSS. Antes tenías que abrir cada pestaña para hacerte una idea.
Pequeño detalle técnico: el contador se actualiza en vivo mientras escribes (debounce de 200 ms), así el badge no parpadea con cada pulsación.
Scrollbar más ancha en las ventanas: 10 → 14 px (v3.2.80)
La scrollbar interna de las ventanas de desarrollador (panel CSS, panel JS, JS Console, Output Console, AI Helper) tenía 10 px de ancho — lo que chocaba con el tirador de redimensionamiento de 8 px del borde derecho. Era fácil agarrar el tirador en lugar de la scrollbar y redimensionar la ventana sin querer.
Tras el cambio la scrollbar tiene 14 px de ancho — más fácil de agarrar, y el tirador de redimensionamiento sigue ahí, pero claramente por debajo del borde de la scrollbar. Se acabó el conflicto, se acabó la frustración.
Etiquetas de acción 8 → 12 caracteres (v3.2.81)
Las etiquetas de acción en la barra tenían un límite codificado en duro de 8 caracteres. Servía para "Dark", "Hide" y similares — pero al trabajar con el AI Helper, a menudo quería sugerir un nombre más largo y descriptivo ("Hide ads", "Wide column") — y quedaba cortado.
El nuevo límite es de 12 caracteres. UI y backend están sincronizados — el AI Helper, el editor, el render de la barra, el panel de ajustes — todos hablan de la misma longitud. Las etiquetas ahora pueden llevar más contexto sobre qué hace cada acción.
Barra de herramientas de carpeta reorganizada (v3.2.80)
La barra de herramientas del encabezado de carpeta (panel de edición de carpeta) lo tenía todo en una sola fila: Export, Import, Delete + Group, Bar, Window. Seis botones uno al lado del otro — visualmente se fundían entre sí y costaba encontrar rápido lo que buscabas.
El nuevo layout son dos filas:
- Arriba: Export / Import / Delete — operaciones sobre la carpeta como un todo, encima del campo URL patterns.
- Abajo: + Group / + Bar / + Window — creación de elementos hijos, separada de las operaciones de carpeta.
Dos grupos lógicos, claramente reconocibles de un vistazo.
Otras pequeñas victorias de la misma serie
Junto con los cambios principales entraron algunos retoques más pequeños pero agradables:
- Padding simétrico en el contenedor
.rules-area— 14 px (v3.2.88) — antes eran 24 px a la derecha, una asimetría heredada de una iteración anterior de la UI. - Preservación del scroll en el editor al sincronizar desde otro dispositivo (v3.2.82) — cuando otro dispositivo cambia la regla, CodeMirror ya no salta a la posición 0, te deja donde estabas.
- Botón ancla del dropdown — un segundo clic lo cierra (v3.2.89) — corregido un bug por el que un dropdown abierto con el botón solo se podía cerrar haciendo clic fuera, no volviendo a hacer clic en el botón.
Ver también
- Ventanas en la página — repaso de todas las ventanas de desarrollador que cubre la scrollbar más ancha
- Atajos de teclado de JustZix — el chuletario completo de teclado
- Panel de edición junto a tu página — otra forma de gestionar la edición de reglas día a día
Instala JustZix — y siente la diferencia en los detalles.
Valora este artículo
Sin valoraciones — sé el primero.