← Todos los artículos

API y helpers

Menú contextual en las cabeceras de los panes — clic derecho = fuente, tamaño, desconectar, desactivar

15 mayo 2026 · por JustZix Team

Un pane está en la pantalla. Quieres separarlo del grupo snap. O cambiarle la fuente a Fira Code. O desactivarlo para que desaparezca un momento. Sin un menú contextual tendrías que ir a la página de opciones (3 clics), modificar el pane, guardar, volver a la página. Con el menú contextual (desde v2.13.42 para las barras, v2.13.55 para los CSS panes, v2.13.70 para todos los panes con las fuentes) — clic derecho en la cabecera, 1 segundo.

Qué hay en el menú contextual

Un clic derecho sobre .jz-pane-header (la franja estrecha en lo alto de un pane, la misma que agarras para arrastrar) abre un menú flotante con 4 secciones:

Todo aplicado inmediatamente — sin F5, sin botón de guardar. Cambiar la fuente a «Fira Code» → ves enseguida las ligaduras (===, !==, →) si el sistema tiene la fuente instalada.

Funciona para los 4 tipos de pane + la barra

El menú contextual es unificado — el mismo showBarContextMenu(id, x, y) gestiona 5 tipos de elementos. Detección del tipo a partir del prefijo de ID:

• ab_* → Barra de acciones — todas las opciones excepto fuente/tamaño
• cp_* → CSS pane — menú completo
• jp_* → JS pane — menú completo
• jc_* → JS Console — menú completo
• oc_* → Output Console — menú completo

Las barras de acciones no tienen fuente/tamaño (su contenido son botones, no texto para leer). Los CSS panes/JS panes sí — porque ahí lees/escribes código.

Caso de uso 1 — Desconectar una snap connection

Tienes un grupo: Barra de acciones + CSS pane + Output Console enganchados verticalmente. Quieres sacar la Output Console para moverla a otro monitor. Sin el menú contextual — tendrías que arrastrarla a >20px del grupo, pero entonces el snap se desconecta «perezosamente» y la posición podría quedar lo bastante cerca como para volver a engancharse.

Con el menú contextual — clic derecho en la cabecera de la Output Console → «Desconectar todas las conexiones». Conexiones desaparecidas. Ahora la Output Console se puede arrastrar a cualquier sitio sin riesgo de re-snap. Bonus: «Desconectar del CSS pane» (por conexión) deja intactas las demás conexiones — útil para grupos de 3 elementos donde quieres romper solo un borde.

Caso de uso 2 — Ocultar un pane un momento

Estás refactorizando el CSS. El CSS pane está abierto con una hoja de estilo de 200 líneas. Llega un correo — quieres responder en Gmail en la misma pestaña. El pane estorba visualmente.

• CSS pane → «Desactivar este CSS pane»: pane desaparecido. Persistente — el F5 no lo trae de vuelta. Reactiva mediante el popup del widget (clic en el icono de JustZix en la barra de herramientas), o chrome → JustZix → «Ventanas CSS» → checkbox.
• Barra de acciones → «Ocultar hasta la recarga»: barra desaparecida solo en esta pestaña, hasta el próximo F5. Más ligero, un toggle «solo por ahora».

La diferencia es a propósito: los panes (CSS/JS/Console/OC) tienen «Desactivar» = persistente (su rol es «esto debe ser visible siempre»). Las barras tienen «Ocultar hasta la recarga» = efímero (las barras son visibles por defecto, así que desactivar = «ahora no»).

Caso de uso 3 — Fuente Fira Code para el editor CSS

La fuente por defecto para pane.body es el mono del sistema — legible, pero sin ligaduras. Si tienes Fira Code instalada localmente:

1. Clic derecho en la cabecera del CSS pane → Fuente → «Fira Code».
2. El editor renderiza enseguida las ligaduras: => como →, !== como ≠, >= como ≥.
3. Cambio por pane — cada CSS pane / JS pane / Console puede tener su propia fuente.

Lista ofrecida: Default (mono del sistema), Fira Code, JetBrains Mono, Cascadia Code, Consolas, Menlo, ui-monospace. Si el sistema no tiene una fuente — el navegador hace fallback a monospace (lo mismo que Default). Sin error, sin aviso — graceful.

Caso de uso 4 — Tamaño 10px para un mini-dashboard

Estás construyendo un dashboard personal para un monitor 4K. CSS pane + JS pane + Output Console enganchados abajo a la derecha, cada uno 300×200px. El tamaño de fuente por defecto (~13px) hace que el texto no entre bien.

Clic derecho → Tamaño → 10px. Tres veces (cada pane por separado). Ahora en 200px de altura entran ~16 líneas en lugar de ~12. El mini-dashboard se vuelve denso de información.

Al contrario para la accesibilidad: tamaño 18-20px da más comodidad a los usuarios con problemas de vista, a costa de la densidad de información.

Caso de uso 5 — Personalización por pane

Tres CSS panes en la misma pestaña:

• «Production styles» — Fira Code 13px (comodidad)
• «Quick fixes» — Consolas 12px (pequeño, para snippets de 5 líneas)
• «Color palette» — ui-monospace 14px (default, ya que el contenido son solo códigos hex)

Cada pane tiene su propia configuración de storage persistente. F5 → todo vuelve a su fuente/tamaño. Entre pestañas también (chrome.storage.local).

Trampas

• El clic derecho DEBE ser sobre .jz-pane-header (la franja estrecha de arriba). Un clic derecho en el body del pane (textarea) abre el menú nativo del navegador (Cortar/Copiar/Pegar/Inspeccionar). A propósito — el body es la «zona de trabajo», la cabecera la «zona de control».
• Las barras de acciones NO tienen fuente/tamaño. La barra de acciones son botones, no texto. Para agrandar el texto de los botones → usa los campos color + CSS personalizado en tus reglas.
• El fallback de la fuente es silencioso. Si el usuario elige «Fira Code» sin tenerla instalada, el navegador normalmente hace fallback en silencio a monospace. Comprueba en Ajustes → Privacidad → Configuración de los sitios → Fuentes si el navegador tiene acceso a las fuentes del sistema (en algunas configuraciones está limitado).
• Desactivar un CSS pane es persistente. Fácil olvidar que has ocultado un pane → luego te preguntas por qué el CSS no se aplica. Sitios para reactivar: popup del widget (clic en el icono de JustZix), chrome → JustZix → submenú «Ventanas CSS», o options.html.
• Desconectar un snap NO elimina los metadatos de conexión. Si arrastras el pane de nuevo a <20px de su antiguo vecino, el snap vuelve. A propósito — desconectar es un «movimiento ad-hoc», no un desacoplamiento permanente.

Qué hacer después

El menú contextual es una «segunda capa de UI» — cambios rápidos sin un desvío a las opciones. Perfecto para los power users que pasan horas al día con las barras de JustZix. Mira también:

• Snap connections — la mecánica completa de los grupos, esos de los que te estás desconectando
• Atajos globales Ctrl+Shift+L/S/K/H — por qué el clic derecho no basta para todos
• Mini-IDE en la pestaña — mapa completo de la UI

Instala JustZix — completamente gratuito, sin cuenta, sin servidor.