← Tous les articles

API et helpers

Menu contextuel sur les en-têtes de pane — clic droit = police, taille, déconnecter, désactiver

15 mai 2026 · par JustZix Team

Un pane est à l'écran. Vous voulez le détacher du groupe snap. Ou changer sa police pour Fira Code. Ou le désactiver pour qu'il disparaisse un instant. Sans menu contextuel, il faudrait aller à la page d'options (3 clics), éditer le pane, sauvegarder, revenir à la page. Avec le menu contextuel (depuis v2.13.42 pour les barres, v2.13.55 pour les CSS panes, v2.13.70 pour tous les panes avec polices) — clic droit sur l'en-tête, 1 seconde.

Ce qu'il y a dans le menu contextuel

Un clic droit sur .jz-pane-header (la bande étroite en haut d'un pane, la même que vous saisissez pour glisser) ouvre un menu flottant avec 4 sections :

Tout appliqué instantanément — pas de F5, pas de bouton de sauvegarde. Changer la police pour « Fira Code » → vous voyez immédiatement les ligatures (===, !==, →) si le système a la police installée.

Fonctionne pour les 4 types de panes + la barre

Le menu contextuel est unifié — le même showBarContextMenu(id, x, y) gère 5 types d'éléments. Détection du type par le préfixe d'ID :

• ab_* → Barre d'actions — toutes les options sauf police/taille
• cp_* → CSS pane — menu complet
• jp_* → JS pane — menu complet
• jc_* → JS Console — menu complet
• oc_* → Output Console — menu complet

Les barres d'actions n'ont pas de police/taille (leur contenu, ce sont des boutons, pas du texte à lire). Les CSS panes/JS panes si — parce que c'est là que vous lisez/écrivez du code.

Cas d'usage 1 — Déconnecter une snap connection

Vous avez un groupe : Barre d'actions + CSS pane + Output Console aimantés verticalement. Vous voulez sortir l'Output Console pour la déplacer sur un autre écran. Sans le menu contextuel — il faudrait la glisser à >20px du groupe, mais alors le snap se déconnecte « paresseusement » et la position pourrait être assez proche pour re-snapper.

Avec le menu contextuel — clic droit sur l'en-tête de l'Output Console → « Déconnecter toutes les connexions ». Connexions parties. Maintenant l'Output Console peut être glissée n'importe où sans risque de re-snap. Bonus : « Déconnecter du CSS pane » (par connexion) laisse les autres connexions intactes — utile pour les groupes à 3 éléments où vous voulez casser une seule arête.

Cas d'usage 2 — Masquer un pane un instant

Vous refactorez du CSS. Le CSS pane est ouvert avec une feuille de style de 200 lignes. Un e-mail arrive — vous voulez répondre dans Gmail dans le même onglet. Le pane gêne visuellement.

• CSS pane → « Désactiver ce CSS pane » : pane parti. Persistant — F5 ne le ramène pas. Réactiver via le popup widget (clic sur l'icône JustZix dans la barre d'outils), ou chrome → JustZix → « Fenêtres CSS » → case à cocher.
• Barre d'actions → « Masquer jusqu'au rechargement » : barre partie seulement dans cet onglet, jusqu'au prochain F5. Plus léger, un toggle « juste pour l'instant ».

La différence intentionnelle : les panes (CSS/JS/Console/OC) ont « Désactiver » = persistant (leur rôle est « ça doit être visible tout le temps »). Les barres ont « Masquer jusqu'au rechargement » = éphémère (les barres sont visibles par défaut, donc désactiver = « pas maintenant »).

Cas d'usage 3 — Police Fira Code pour l'éditeur CSS

La police par défaut de pane.body est le mono système — lisible, mais sans ligatures. Si vous avez Fira Code installée localement :

1. Clic droit sur l'en-tête du CSS pane → Police → « Fira Code ».
2. L'éditeur rend immédiatement les ligatures : => en →, !== en ≠, >= en ≥.
3. Changement par pane — chaque CSS pane / JS pane / Console peut avoir sa propre police.

Liste proposée : Default (mono système), Fira Code, JetBrains Mono, Cascadia Code, Consolas, Menlo, ui-monospace. Si le système n'a pas une police — le navigateur retombe sur monospace (identique à Default). Pas d'erreur, pas d'avertissement — graceful.

Cas d'usage 4 — Taille 10px pour un mini-dashboard

Vous construisez un dashboard personnel pour un écran 4K. CSS pane + JS pane + Output Console aimantés en bas à droite, chacun 300×200px. La taille de police par défaut (~13px) fait que le texte ne tient pas bien.

Clic droit → Taille → 10px. Trois fois (chaque pane séparément). Maintenant 200px de hauteur contiennent ~16 lignes au lieu de ~12. Le mini-dashboard devient dense en informations.

Inversement pour l'accessibilité : taille 18-20px donne plus de confort aux utilisateurs avec des problèmes de vue, au prix de la densité d'information.

Cas d'usage 5 — Personnalisation par pane

Trois CSS panes dans le même onglet :

• « Production styles » — Fira Code 13px (confort)
• « Quick fixes » — Consolas 12px (petit, pour des snippets de 5 lignes)
• « Color palette » — ui-monospace 14px (défaut, puisque le contenu n'est que des codes hex)

Chaque pane a sa propre config de stockage persistante. F5 → tout revient dans sa police/taille. Inter-onglets aussi (chrome.storage.local).

Pièges

• Le clic droit DOIT être sur .jz-pane-header (la bande étroite du haut). Un clic droit sur le corps du pane (textarea) ouvre le menu natif du navigateur (Couper/Copier/Coller/Inspecter). Intentionnel — le corps est la « zone de travail », l'en-tête la « zone de contrôle ».
• Les barres d'actions n'ont PAS de police/taille. La barre d'actions, ce sont des boutons, pas du texte. Pour agrandir le texte des boutons → utilisez les champs color + du CSS personnalisé dans vos règles.
• Le fallback de police est silencieux. Si l'utilisateur choisit « Fira Code » sans l'avoir installée, le navigateur retombe généralement en silence sur monospace. Vérifiez dans Paramètres → Confidentialité → Paramètres des sites → Polices si le navigateur a accès aux polices système (c'est restreint sur certaines configurations).
• Désactiver un CSS pane est persistant. Facile d'oublier que vous avez masqué un pane → ensuite vous vous demandez pourquoi le CSS ne s'applique pas. Endroits pour réactiver : popup widget (clic sur l'icône JustZix), chrome → JustZix → sous-menu « Fenêtres CSS », ou options.html.
• Déconnecter un snap ne supprime PAS les métadonnées de connexion. Si vous glissez le pane à <20px de son ancien voisin, le snap revient. Intentionnel — déconnecter est un « déplacement ad-hoc », pas un découplage permanent.

La suite

Le menu contextuel est une « deuxième couche d'UI » — des ajustements rapides sans un détour par les options. Parfait pour les power users qui passent des heures par jour avec les barres JustZix. Voyez aussi :

• Snap connections — la mécanique complète des groupes, ceux dont vous vous déconnectez
• Raccourcis globaux Ctrl+Shift+L/S/K/H — pourquoi le clic droit ne suffit pas à tout le monde
• Mini-IDE dans un onglet — carte complète de l'UI

Installez JustZix — entièrement gratuit, sans compte, sans serveur.