← Alle Beiträge

Fenster im Frontend

JustZix-Floating-Button — 3-Buchstaben-Tropfen mit Hover-State, Snap, Popup-Menü

15 Mai 2026 · von JustZix Team

Der Floating-Button ist der kleine 3-Buchstaben-Tropfen, den du auf jeder Seite siehst, auf der JustZix eine aktive Regel hat. Er ist der Eingang zur gesamten JustZix-UI — ein Klick öffnet ein Popup mit Toggles, Ziehen lässt dich ihn neu positionieren, Snap verbindet ihn mit Aktionsleisten. Visuell klein, aber er verdichtet viel Funktionalität. Dieser Beitrag öffnet ihn von innen.

3-Buchstaben-Label pro Folder

Jeder Folder in JustZix (die Haupteinheit zur Gruppierung von Regeln) hat ein optionales Icon — max 3 Zeichen, automatisch GROSSBUCHSTABEN. Der Float-Btn zeigt das Icon des ersten matchenden Folders (nach URL-Präfix):

folder.icon = 'qa'      → Label „QA"
folder.icon = 'dev'     → Label „DEV"
folder.icon = '🐛'      → Label „🐛" (Emoji auf 3 Zeichen gekürzt)
folder.icon = (leer)    → Label „ZIX" (Standard)

Idee: ein Power-User hat 5-10 Folder pro Projekt, jeder mit einem anderen 3-Buchstaben-Marker. Siehst du „QA" auf dem Floating-Btn, sind die QA-Regeln aktiv. Visuelles Feedback vor jeder Interaktion.

4 visuelle Zustände — Farbe + Opacity

Der Zustand aktualisiert sich automatisch bei storage onChanged — toggle eine Regel irgendwo (Optionsseite, Popup-Widget, Chrome-Kontextmenü) → der Float-Btn ändert sofort sein Aussehen.

Anatomie eines Klicks — Popup-Widget

Linksklick auf den Float-Btn → ein Popup-Widget öffnet sich daneben. Das Widget enthält:

• Globale Pause — pauseToggle ganz oben, ein Klick = die gesamte Erweiterung deaktivieren
• Folder-Bereich — eine Checkbox pro Folder, der die URL matcht, Toggle on/off pro Folder (persistent)
• Aktionsleisten-Bereich — Sichtbarkeit jeder Leiste separat umschalten (Session pro Tab)
• CSS/JS/Console-Fenster-Bereich — eine Checkbox pro Pane (persistent)
• „Optionen öffnen"-Link — voller Editor in einem neuen Tab

Ein Klick außerhalb schließt das Popup (Event-Listener auf document-Ebene). Ein Klick auf eine Checkbox triggert setBarHidden / setCssPaneEnabled / setFolderEnabled — alle über Promise verkettet, um Race Conditions zu vermeiden.

Snap connections mit Leisten und Panes

Der Float-Btn nimmt an Snap connections als Pseudo-Element mit der ID '__float' teil. Mechanik identisch zu Panes:

1. Ziehe den Float-Btn nah an eine Aktionsleiste (≤20px) → Snap, die zwei Elemente = eine Gruppe
2. Ziehe ein beliebiges Element der Gruppe → die ganze Gruppe bewegt sich zusammen
3. Rechtsklick auf den Float-Btn → Kontextmenü mit „Von X trennen"-Optionen

Anwendungsfall: Floating-Btn als „Anchor-Griff" für die ganze Gruppe. Leisten + Output Console an den Float-Btn eingerastet → Float-Btn ziehen = du bewegst das ganze Dashboard.

Rechtsklick = Kontextmenü

Derselbe Mechanismus wie für Leisten / CSS panes — Kontextmenü pro Element. Der Float-Btn hat:

• „Bis zum Reload verbergen" — der Float-Btn verschwindet bis zum nächsten F5. Persistentes OFF erfordert die Optionsseite (bewusst nicht im Kontextmenü — damit User „verbergen" nicht mit „die ganze Erweiterung deaktivieren" verwechseln)
• „Von X trennen" — pro Snap-Verbindung. Plus „Alle Verbindungen trennen"

Keine Schrift/Größe — der Float-Btn hat eine feste Größe (32×32px). Dort gibt es keinen Text zum Anpassen außer dem 3-Buchstaben-Label (das aus folder.icon kommt).

Anwendungsfall 1 — Visueller Scope-Indikator

Du hast 3 Folder: „ALL" (funktioniert überall), „GHB" (nur GitHub), „GMA" (nur Gmail). Jeder mit einer anderen Farbe (grün, schwarz, rot) und einem 3-Buchstaben-Icon. Besuche github.com → der Float-Btn zeigt schwarzes „GHB". Besuche gmail.com → rotes „GMA". Ohne das Popup-Widget zu prüfen, siehst du den Scope.

Anwendungsfall 2 — Schnelle globale Pause

Skype-Call, jemandem ein neues Feature in der Produktion vorführen, JustZix könnte stören. Klick Float-Btn → „Globale Pause"-Toggle → die Erweiterung deaktiviert alle Regeln. Nach der Demo → erneut klicken → aktiviert. Ohne chrome://extensions zu öffnen.

Anwendungsfall 3 — Pro Seite bis zum Reload verbergen

Die Regel „Force dark mode" matcht auch die Seite deiner Bank — die bereits einen eigenen Dark Mode hat. Der Float-Btn verdeckt das Bank-Logo. Rechtsklick auf den Float-Btn → „Bis zum Reload verbergen" → der Float-Btn verschwindet nur auf diesem Tab, bis zum F5. Die Regeln laufen weiter, nur die UI ist verborgen.

Anwendungsfall 4 — Position pro Domain

Die Position des Float-Btn ist persistent in chrome.storage.sync. Standardmäßig unten rechts (BR-Anchor). Ziehen → Speichern → der nächste Besuch dieser Domain bringt ihn dorthin zurück, wo du ihn gelassen hast. Die Position ist pro Element-ID, aber alle Seiten teilen die ID '__float' — also ist die Position global über alle Domains hinweg. Willst du sie pro Seite → nutze Snap mit einer Leiste, die scope-spezifisch ist.

Fallstricke

• 3-Buchstaben-Icon — auf 3 Zeichen gekürzt. „qa-team" → „QA-" (mit dem Bindestrich). Best Practice: 1-3 alphanumerische Zeichen. Ein einzelnes Emoji = OK (z. B. 🐛 → „🐛"), aber Multi-Char-Emoji (👨‍💻 = 5 Codepoints) kürzt seltsam.
• folder.icon ist standardmäßig 'ZIX', selbst wenn du kein eigenes definierst — früher war es „JZ" (2 Zeichen), seit v2.13 ist es markenkonformes 'ZIX'.
• Globale Pause vs. Deaktivieren pro Folder. Die globale Pause löscht den Aktivierungszustand pro Folder nicht — beim Aufheben der Pause kehren die Folder in den Zustand zurück, in dem sie waren. Das Deaktivieren pro Folder ist persistent, unabhängig von der globalen Pause.
• Die Float-Btn-Position im Sync-Storage kann zwischen Geräten desynchronisieren, wenn du auf einem schnell ziehst und auf einem anderen den Tab öffnest. Chrome Eventual Consistency ~1-2 Sek.
• Float-Btn-Snap ist nicht beidseitig. Die Float-Btn-Position ist global, Leisten haben eine Position pro Fensterzustand. Snap funktioniert visuell, aber wenn du den Float-Btn auf einem anderen Tab bewegst, folgen die Leisten nicht (sie sind scope-locked an ihren Tab).

Wie es weitergeht

Der Float-Btn ist der „Einstiegspunkt" für die gesamte JustZix-UI — alle anderen Elemente (Leisten, Panes) sind kontextabhängiger. Sieh dir auch an:

• Snap connections — Float-Btn als Anchor für eine Gruppe
• Kontextmenü auf Pane-Headern — paralleler Mechanismus
• Mini-IDE im Tab — vollständige UI-Karte

Installiere JustZix — der Float-Btn erscheint von selbst, sobald du deine erste Regel hinzufügst.