← Tous les articles

Fenêtres sur le frontend

Le bouton flottant JustZix — une goutte à 3 lettres avec hover state, snap, menu popup

15 mai 2026 · par JustZix Team

Le bouton flottant est la petite goutte à 3 lettres que vous voyez sur chaque page où JustZix a une règle active. C'est l'entrée de toute l'UI de JustZix — un clic ouvre un popup avec des toggles, le drag permet de le repositionner, le snap le relie aux barres d'actions. Petit visuellement, mais il condense beaucoup de fonctionnalités. Cet article l'ouvre de l'intérieur.

Label à 3 lettres par folder

Chaque folder dans JustZix (l'unité principale de regroupement des règles) a une icône optionnelle — max 3 caractères, automatiquement en MAJUSCULES. Le bouton flottant affiche l'icône du premier folder correspondant (par préfixe d'URL) :

folder.icon = 'qa'      → label « QA »
folder.icon = 'dev'     → label « DEV »
folder.icon = '🐛'      → label « 🐛 » (emoji tronqué à 3 caractères)
folder.icon = (vide)    → label « ZIX » (par défaut)

Idée : un power user a 5-10 folders par projet, chacun avec un marqueur à 3 lettres différent. Voir « QA » sur le bouton flottant signifie que les règles QA sont actives. Feedback visuel avant toute interaction.

4 états visuels — couleur + opacité

L'état se met à jour automatiquement à storage onChanged — basculez une règle n'importe où (page d'options, popup widget, menu contextuel de Chrome) → le bouton flottant change immédiatement d'apparence.

Anatomie d'un clic — le popup widget

Clic gauche sur le bouton flottant → un popup widget s'ouvre à côté. Le widget contient :

• Pause globale — pauseToggle tout en haut, un clic = désactiver toute l'extension
• Section Folders — une case à cocher par folder correspondant à l'URL, toggle on/off par folder (persistant)
• Section Barres d'actions — basculer la visibilité de chaque barre séparément (session par onglet)
• Section Fenêtres CSS/JS/Console — une case à cocher par pane (persistant)
• Lien « Ouvrir les Options » — éditeur complet dans un nouvel onglet

Un clic en dehors ferme le popup (listener d'event au niveau document). Cliquer une case à cocher déclenche setBarHidden / setCssPaneEnabled / setFolderEnabled — toutes chaînées via Promise pour éviter les race conditions.

Snap connections avec les barres et les panes

Le bouton flottant participe aux snap connections comme pseudo-élément avec l'ID '__float'. Mécanique identique aux panes :

1. Glissez le bouton flottant près d'une barre d'actions (≤20px) → snap, les deux éléments = un groupe
2. Glissez n'importe quel élément du groupe → tout le groupe bouge ensemble
3. Clic droit sur le bouton flottant → menu contextuel avec les options « Déconnecter de X »

Cas d'usage : bouton flottant comme « poignée d'anchor » pour tout le groupe. Barres + Output Console aimantées au bouton flottant → glisser le bouton flottant = vous déplacez tout le dashboard.

Clic droit = menu contextuel

Même mécanisme que pour les barres / CSS panes — menu contextuel par élément. Le bouton flottant a :

• « Masquer jusqu'au rechargement » — le bouton flottant disparaît jusqu'au prochain F5. Un OFF persistant nécessite la page d'options (intentionnellement pas dans le menu contextuel — pour que les utilisateurs ne confondent pas « masquer » avec « désactiver toute l'extension »)
• « Déconnecter de X » — par snap connection. Plus « Déconnecter toutes les connexions »

Pas de police/taille — le bouton flottant est de taille fixe (32×32px). Il n'y a pas de texte à personnaliser là-bas, hormis le label à 3 lettres (qui vient de folder.icon).

Cas d'usage 1 — Indicateur visuel de scope

Vous avez 3 folders : « ALL » (fonctionne partout), « GHB » (seulement github), « GMA » (seulement gmail). Chacun avec une couleur différente (vert, noir, rouge) et une icône à 3 lettres. Visitez github.com → le bouton flottant affiche « GHB » en noir. Visitez gmail.com → « GMA » en rouge. Sans vérifier le popup widget, vous voyez le scope.

Cas d'usage 2 — Pause globale rapide

Appel Skype, démonstration d'une nouvelle fonctionnalité à quelqu'un en production, JustZix pourrait gêner. Clic sur le bouton flottant → toggle « Pause globale » → l'extension désactive toutes les règles. Après la démo → cliquez à nouveau → activé. Sans aller dans chrome://extensions.

Cas d'usage 3 — Masquer par page jusqu'au rechargement

La règle « Force dark mode » correspond aussi au site de votre banque — qui a déjà son propre mode sombre. Le bouton flottant couvre le logo de la banque. Clic droit sur le bouton flottant → « Masquer jusqu'au rechargement » → le bouton flottant disparaît seulement sur cet onglet, jusqu'au F5. Les règles tournent toujours, seule l'UI est masquée.

Cas d'usage 4 — Position par domaine

La position du bouton flottant est persistante dans chrome.storage.sync. Par défaut en bas à droite (anchor BR). Glissez → sauvegarde → la prochaine visite de ce domaine le ramène où vous l'avez laissé. La position est par ID d'élément, mais toutes les pages partagent l'ID '__float' — donc la position est globale à travers les domaines. Si vous voulez du par page → utilisez le snap avec une barre qui est scope-spécifique.

Pièges

• Icône à 3 lettres — tronquée à 3 caractères. « qa-team » → « QA- » (avec le tiret). Bonne pratique : 1-3 caractères alphanumériques. Un emoji seul = OK (p. ex. 🐛 → « 🐛 »), mais un emoji multi-caractères (👨‍💻 = 5 codepoints) se tronque bizarrement.
• folder.icon vaut « ZIX » par défaut même quand vous n'en définissez pas un personnalisé — c'était « JZ » (2 caractères) avant, depuis v2.13 c'est « ZIX » aligné sur la marque.
• Pause globale vs désactivation par folder. La pause globale n'efface pas l'état d'activation par folder — en levant la pause, les folders reviennent à l'état dans lequel ils étaient. La désactivation par folder est persistante, indépendante de la pause globale.
• La position du bouton flottant dans le sync storage peut se désynchroniser entre appareils si vous glissez vite sur l'un et ouvrez l'onglet sur l'autre. Cohérence éventuelle de Chrome ~1-2 sec.
• Le snap du bouton flottant n'est pas bidirectionnel. La position du bouton flottant est globale, les barres ont une position par état de fenêtre. Le snap fonctionne visuellement, mais si vous déplacez le bouton flottant sur un autre onglet, les barres ne suivent pas (elles sont scope-lockées à leur onglet).

La suite

Le bouton flottant est le « point d'entrée » de toute l'UI de JustZix — tous les autres éléments (barres, panes) sont plus contextuels. Voyez aussi :

• Snap connections — le bouton flottant comme anchor d'un groupe
• Menu contextuel sur les en-têtes de pane — mécanisme parallèle
• Mini-IDE dans un onglet — carte complète de l'UI

Installez JustZix — le bouton flottant apparaîtra de lui-même dès que vous ajoutez votre première règle.