← Wszystkie wpisy

API i helpers

Context menu na header'ach pane — prawy klik = font, size, disconnect, disable

15 maja 2026 · autor JustZix Team

Pane masz na ekranie. Chcesz go odłączyć od grupy snap. Albo zmienić mu font na Fira Code. Albo wyłączyć żeby zniknął na chwilę. Bez context menu musisz iść do options page (3 kliknięcia), wyedytować pane, save, wrócić na stronę. Z context menu (od v2.13.42 dla bar, v2.13.55 dla CSS pane, v2.13.70 dla wszystkich pane'ów z fontami) — prawy klik na headerze, 1 sekunda.

Co jest w context menu

Prawy klik na .jz-pane-header (wąski pasek na górze pane'a, ten sam za który chwytasz do drag) otwiera floating menu z 4 sekcjami:

Wszystkie aplikowane natychmiast — bez F5, bez save buttonu. Zmiana fontu na "Fira Code" → natychmiast widzisz ligatures (===, !==, →) jeśli system ma ten font zainstalowany.

Działa dla wszystkich 4 typów paneli + bar

Context menu jest unified — ten sam showBarContextMenu(id, x, y) obsługuje 5 typów elementów. Detekcja typu po ID prefiksie:

• ab_* → Action bar — wszystkie opcje oprócz font/size
• cp_* → CSS pane — pełne menu
• jp_* → JS pane — pełne menu
• jc_* → JS Console — pełne menu
• oc_* → Output Console — pełne menu

Action bary nie mają font/size (bo content to przyciski, nie tekst do czytania). CSS pane/JS pane mają — bo tam czytasz / piszesz kod.

Use case 1 — Rozłączenie snap connection

Masz grupę: Action bar + CSS pane + Output Console snap'nięte pionowo. Chcesz Output Console wyrwać żeby przenieść na drugi monitor. Bez context menu — musisz przeciągnąć go >20px od grupy, ale wtedy snap się "leniwie" rozłącza i pozycja może być zbyt blisko żeby uniknąć ponownego snap'u.

Z context menu — prawy klik na header Output Console → "Rozłącz wszystkie połączenia". Połączenia zniknęły. Teraz Output Console można drag'nąć gdziekolwiek bez ryzyka ponownego snap'a. Bonus: opcja "Rozłącz od CSS pane" (per connection) zostawia inne connections nienaruszone — przydatne dla 3-element grup gdzie chcesz rozdzielić tylko jedną krawędź.

Use case 2 — Ukrywanie pane'a na chwilę

Pracujesz nad refactorem CSS. CSS pane jest otwarty z 200-line stylesheet. Pojawia się email — chcesz odpowiedzieć w Gmailu w tym samym tabie. Pane przeszkadza wizualnie.

• CSS pane → "Wyłącz to okno CSS": pane znika. Persistent — F5 nie przywróci. Re-enable z widget popup (klik na ikonę JustZix w toolbar) lub z chrome → JustZix → "Okna CSS" → checkbox.
• Action bar → "Ukryj do reloadu": bar znika tylko w tej karcie, do następnego F5. Lżejszy, "just for now" toggle.

Różnica intencjonalna: panes (CSS/JS/Console/OC) mają "Wyłącz" = persistent (bo ich rolą jest "to ma być widoczne stale"). Bary mają "Ukryj do reloadu" = ephemeral (bary domyślnie są zawsze widoczne, więc disable to tylko "nie teraz").

Use case 3 — Font Fira Code dla CSS edytora

Default font dla pane.body to system mono — czytelne, ale bez ligatures. Jeśli masz Fira Code zainstalowany lokalnie:

1. Prawy klik na header CSS pane → Font → "Fira Code".
2. Editor natychmiast renderuje ligatures: => jako →, !== jako ≠, >= jako ≥.
3. Zmiana per-pane — każdy CSS pane / JS pane / Console może mieć swój font.

Lista oferowana: Default (system mono), Fira Code, JetBrains Mono, Cascadia Code, Consolas, Menlo, ui-monospace. Jeśli system nie ma fontu — browser fallback'uje na monospace (czyli to samo co Default). Bez błędu, bez warning'a — graceful.

Use case 4 — Size 10px dla mini-dashboard

Robisz personal dashboard dla 4K monitora. CSS pane + JS pane + Output Console snap'nięte w prawym dolnym rogu, każdy 300×200px. Default font size (~13px) sprawia że tekst nie mieści się dobrze.

Prawy klik → Size → 10px. Trzy razy (każdy pane osobno). Teraz w 200px wysokości mieści się ~16 linii zamiast ~12. Mini-dashboard staje się informacyjnie gęsty.

Odwrotnie dla accessibility: size 18-20px daje większy komfort dla osób z wadami wzroku, kosztem informacyjnej gęstości.

Use case 5 — Per-pane personalizacja

Trzy CSS panes w tej samej karcie:

• "Production styles" — Fira Code 13px (komfort)
• "Quick fixes" — Consolas 12px (małe, dla 5-linijkowych snippetów)
• "Color palette" — ui-monospace 14px (default, bo content to po prostu hex codes)

Każdy pane ma własną konfigurację persistent w storage'u. F5 → wszystko wraca w swoim fontu/rozmiarze. Cross-tab → też (chrome.storage.local).

Pułapki

• Prawy klik MUSI być na .jz-pane-header (wąski pasek górny). Prawy klik na body pane'a (textarea) otwiera natywne menu przeglądarki (Cut/Copy/Paste/Inspect). To celowe — body to "obszar pracy", header to "obszar kontroli".
• Bary akcji NIE mają font/size. Pasek akcji to przyciski, nie tekst. Jeśli chcesz większy text na buttonach → użyj pól color + custom CSS w rule'ach.
• Font fallback bez ostrzeżenia. Jeśli user wybierze "Fira Code" a nie ma go zainstalowanego, browser zwykle silently fallback'uje na monospace. Sprawdź w Settings → Privacy → Site Settings → Fonts czy browser ma dostęp do system fonts (na niektórych konfiguracjach jest ograniczony).
• Disable CSS pane jest persistent. Łatwo zapomnieć że ukryłeś pane → potem szukasz dlaczego CSS nie aplikuje się. Re-enable miejsce: widget popup (klik na ikonę JustZix), chrome → JustZix → "Okna CSS" submenu, albo options.html.
• Rozłączenie snap NIE usuwa connection metadata. Jeśli przeciągniesz pane z powrotem <20px od poprzedniego sąsiada, snap pojawi się znowu. To celowe — rozłączenie to "ad-hoc move", nie permanent decoupling.

Co dalej

Context menu to "drugi layer UI" — szybkie tweaks bez wycieczki do options. Idealne dla power userów którzy spędzają godziny dziennie z JustZix paskami. Sprawdź też:

• Snap connections — pełna mechanika grup, których właśnie się rozłączasz
• Globalne skróty Ctrl+Shift+L/S/K/H — czemu prawe kliknięcie nie wszystkim wystarcza
• Mini-IDE w karcie — pełna mapa UI

Zainstaluj JustZix — kompletnie za darmo, bez konta, bez serwera.