← Wszystkie wpisy

Okna na froncie

Floating button JustZix — 3-literowa kropla z hover state, snap, popup menu

15 maja 2026 · autor JustZix Team

Floating button to mała kropla 3-literowa którą widzisz na każdej stronie, gdzie JustZix ma aktywną regułę. To wejście do całego JustZix UI — klik otwiera popup z toggle'ami, drag pozwala przesunąć, snap łączy z paskami akcji. Mała wizualnie, ale kondensuje dużo funkcjonalności. Ten post otwiera ją od środka.

3-literowy label per folder

Każdy folder w JustZix (główna jednostka grupująca reguły) ma opcjonalny icon — max 3 znaki, automatycznie UPPERCASE. Float btn pokazuje icon pierwszego matchującego folder'a (po prefiksie URL):

folder.icon = 'qa'      → label "QA"
folder.icon = 'dev'     → label "DEV"
folder.icon = '🐛'      → label "🐛" (emoji slice'd do 3 znaków)
folder.icon = (puste)   → label "ZIX" (default)

Idea: power user ma 5-10 folderów per project, każdy z innym 3-literowym oznaczeniem. Widząc "QA" na floating btn wiesz że reguły QA są aktywne. Visual feedback przed jakimkolwiek interakcji.

4 stany wizualne — kolor + opacity

State auto-update na storage onChanged — toggle reguły gdziekolwiek (options page, popup widget, chrome context menu) → float btn natychmiast zmienia wygląd.

Anatomia kliknięcia — popup widget

Lewy klik na float btn → otwiera się popup widget tuż obok przycisku. Widget zawiera:

• Globalna pauza — pauseToggle na samej górze, jeden klik = wyłącz całą wtyczkę
• Sekcja Foldery — checkbox per folder match'ujący URL, toggle on/off per folder (persistent)
• Sekcja Pasków akcji — toggle visibility każdego bara osobno (per-tab session)
• Sekcja Okien CSS/JS/Console — checkbox per pane (persistent)
• "Otwórz Opcje" link — full editor w nowym tabie

Click outside zamyka popup (event listener na document). Kliknięcie checkbox'a triggeruje setBarHidden / setCssPaneEnabled / setFolderEnabled — wszystkie chain'ed przez Promise żeby uniknąć race condition.

Snap connections z bars i panes

Float btn uczestniczy w snap connections jako pseudo-element z ID '__float'. Mechanika identyczna co dla pane'ów:

1. Drag float btn blisko bara akcji (≤20px) → snap, dwa elementy = grupa
2. Drag dowolnego elementu w grupie → cała grupa porusza się razem
3. Prawokliki na float btn → context menu z opcjami "Rozłącz od X"

Use case: floating btn jako "anchor handle" dla całej grupy. Bary + Output Console snap'nięte do float btn → drag float btn = przenosisz cały dashboard.

Prawokliki = context menu

Identyczny mechanizm co dla bars / CSS panes — context menu per element. Float btn ma:

• "Ukryj do reloadu" — float btn znika do najbliższego F5. Persistent OFF wymaga options page (nie obecny w context menu — celowe, żeby user nie pomylił "hide" z "wyłącz całą wtyczkę")
• "Rozłącz od X" — per snap connection. Plus "Rozłącz wszystkie połączenia"

Brak font/size — float btn jest fixed-size (32×32px). Nie ma tam textu do customizacji poza 3-literowym labelem (który jest z folder.icon).

Use case 1 — Visual scope indicator

Mas 3 foldery: "ALL" (działa wszędzie), "GHB" (tylko github), "GMA" (tylko gmail). Każdy z innym kolorem (zielony, czarny, czerwony) i 3-literowym icon. Wchodzisz na github.com → float btn pokazuje czarne "GHB". Wchodzisz na gmail.com → czerwone "GMA". Bez sprawdzania popup widget'a widzisz scope.

Use case 2 — Quick global pauza

Skype call, demo komuś nowej feature na produkcji, JustZix może przeszkadzać. Klik float btn → "Pauza globalna" toggle → wtyczka deaktywuje wszystkie reguły. Po demo → klik znów → enabled. Bez wchodzenia w chrome://extensions.

Use case 3 — Per-page hide do reloadu

Reguła "Force dark mode" pasuje też na strone bankową — która już ma własny dark mode. Float btn zasłania logo banku. Prawokliki na float btn → "Ukryj do reloadu" → float btn znika tylko na tej karcie, do F5. Reguły wciąż działają, tylko UI hidden.

Use case 4 — Pozycja per-domena

Position float btn'a jest persistent w chrome.storage.sync. Domyślnie w prawym dolnym rogu (BR anchor). Drag → save → następna wizyta na tej domenie wraca tam gdzie zostawiłeś. Pozycja jest per-element-id, ale wszystkie pages share id '__float' — czyli pozycja jest globalna across domains. Jeśli chcesz per-page → użyj snap z bar'em który jest scope-specific.

Pułapki

• 3-letter icon — slice na 3 znaki. "qa-team" → "QA-" (z dash'em). Best practice: użyj 1-3 alphanumeric chars. Emoji single character = OK (np. 🐛 → "🐛"), ale multi-char emoji (👨‍💻 = 5 codepoints) slice'uje się dziwnie.
• Folder.icon default to 'ZIX' nawet gdy nie zdefiniujesz custom — kiedyś było "JZ" (2 chars), od v2.13 to brand-zgodne 'ZIX'.
• Globalna pauza vs per-folder disable. Pauza globalna nie czyści per-folder enable state — przywracając pauzę, foldery wracają w stanach jakie były. Per-folder disable jest persistent, niezależny od globalnej pauzy.
• Float btn pozycja w sync storage może desynchronizować się między urządzeniami przy szybkim drag na jednym i otwarciu tabu na innym. Chrome eventual consistency ~1-2 sec.
• Snap z float btn nie jest dwustronny. Float btn pozycja jest globalna, bary mają position per-window-state. Snap działa wizualnie, ale jeśli przeniesiesz float btn na innej karcie, bary nie idą za nim (są scope-locked do swojej karty).

Co dalej

Float btn to "entry point" dla całej UI JustZix — wszystkie inne elementy (bars, panes) są bardziej kontekstualne. Sprawdź też:

• Snap connections — float btn jako anchor dla grupy
• Context menu na pane headers — równoległy mechanizm
• Mini-IDE w karcie — pełna mapa UI

Zainstaluj JustZix — float btn pojawi się sam jak tylko dodasz pierwszą regułę.