← Alle Beiträge

API & Helfer

Kontextmenü auf Pane-Headern — Rechtsklick = Schrift, Größe, trennen, deaktivieren

15 Mai 2026 · von JustZix Team

Ein Pane ist auf dem Bildschirm. Du willst es von der Snap-Gruppe lösen. Oder seine Schrift auf Fira Code ändern. Oder es deaktivieren, damit es für einen Moment verschwindet. Ohne ein Kontextmenü müsstest du zur Optionsseite gehen (3 Klicks), das Pane bearbeiten, speichern, zur Seite zurückkehren. Mit dem Kontextmenü (seit v2.13.42 für Leisten, v2.13.55 für CSS panes, v2.13.70 für alle Panes mit Schriften) — Rechtsklick auf den Header, 1 Sekunde.

Was im Kontextmenü ist

Ein Rechtsklick auf .jz-pane-header (der schmale Streifen oben an einem Pane, derselbe, den du zum Ziehen greifst) öffnet ein schwebendes Menü mit 4 Abschnitten:

Alles sofort angewendet — kein F5, kein Speichern-Button. Schrift auf „Fira Code" ändern → du siehst sofort Ligaturen (===, !==, →), wenn das System die Schrift installiert hat.

Funktioniert für alle 4 Pane-Typen + Leiste

Das Kontextmenü ist vereinheitlicht — dasselbe showBarContextMenu(id, x, y) behandelt 5 Elementtypen. Typ-Erkennung über das ID-Präfix:

• ab_* → Aktionsleiste — alle Optionen außer Schrift/Größe
• cp_* → CSS pane — vollständiges Menü
• jp_* → JS pane — vollständiges Menü
• jc_* → JS Console — vollständiges Menü
• oc_* → Output Console — vollständiges Menü

Aktionsleisten haben keine Schrift/Größe (ihr Inhalt sind Buttons, kein Text zum Lesen). CSS panes/JS panes schon — denn dort liest/schreibst du Code.

Anwendungsfall 1 — Eine Snap-Verbindung trennen

Du hast eine Gruppe: Aktionsleiste + CSS pane + Output Console vertikal eingerastet. Du willst die Output Console herausziehen, um sie auf einen anderen Monitor zu bewegen. Ohne das Kontextmenü — du müsstest sie >20px von der Gruppe ziehen, aber dann trennt sich der Snap „faul" und die Position könnte nah genug für ein erneutes Snap sein.

Mit dem Kontextmenü — Rechtsklick auf den Output-Console-Header → „Alle Verbindungen trennen". Verbindungen weg. Jetzt kann die Output Console ohne Re-Snap-Risiko überallhin gezogen werden. Bonus: „Von CSS pane trennen" (pro Verbindung) lässt andere Verbindungen unberührt — nützlich für 3-Element-Gruppen, wo du nur eine Kante brechen willst.

Anwendungsfall 2 — Ein Pane für einen Moment verbergen

Du refactorst CSS. Das CSS pane ist mit einem 200-Zeilen-Stylesheet offen. Eine E-Mail trifft ein — du willst in Gmail im selben Tab antworten. Das Pane ist visuell im Weg.

• CSS pane → „Dieses CSS-Pane deaktivieren": Pane weg. Persistent — F5 bringt es nicht zurück. Wieder aktivieren über das Widget-Popup (Klick auf das JustZix-Symbol in der Symbolleiste) oder chrome → JustZix → „CSS-Fenster" → Checkbox.
• Aktionsleiste → „Bis zum Reload verbergen": Leiste nur in diesem Tab weg, bis zum nächsten F5. Leichter, ein „nur für jetzt"-Toggle.

Der bewusste Unterschied: Panes (CSS/JS/Console/OC) haben „Deaktivieren" = persistent (ihre Rolle ist „das soll die ganze Zeit sichtbar sein"). Leisten haben „Bis zum Reload verbergen" = ephemer (Leisten sind standardmäßig sichtbar, also Deaktivieren = „nicht jetzt").

Anwendungsfall 3 — Fira-Code-Schrift für den CSS-Editor

Die Standardschrift für pane.body ist System-Mono — lesbar, aber ohne Ligaturen. Wenn du Fira Code lokal installiert hast:

1. Rechtsklick auf den CSS-pane-Header → Schrift → „Fira Code".
2. Der Editor rendert sofort Ligaturen: => als →, !== als ≠, >= als ≥.
3. Änderung pro Pane — jedes CSS pane / JS pane / Console kann seine eigene Schrift haben.

Angebotene Liste: Default (System-Mono), Fira Code, JetBrains Mono, Cascadia Code, Consolas, Menlo, ui-monospace. Hat das System eine Schrift nicht — der Browser fällt auf monospace zurück (dasselbe wie Default). Kein Fehler, keine Warnung — graceful.

Anwendungsfall 4 — Größe 10px für ein Mini-Dashboard

Du baust ein persönliches Dashboard für einen 4K-Monitor. CSS pane + JS pane + Output Console unten rechts eingerastet, je 300×200px. Die Standard-Schriftgröße (~13px) lässt den Text nicht gut passen.

Rechtsklick → Größe → 10px. Dreimal (jedes Pane separat). Jetzt passen in 200px Höhe ~16 Zeilen statt ~12. Das Mini-Dashboard wird informationsdicht.

Umgekehrt für Barrierefreiheit: Größe 18-20px gibt mehr Komfort für User mit Sehproblemen, auf Kosten der Informationsdichte.

Anwendungsfall 5 — Personalisierung pro Pane

Drei CSS panes im selben Tab:

• „Production styles" — Fira Code 13px (Komfort)
• „Quick fixes" — Consolas 12px (klein, für 5-Zeilen-Snippets)
• „Color palette" — ui-monospace 14px (Default, da der Inhalt nur Hex-Codes sind)

Jedes Pane hat seine eigene persistente Storage-Konfiguration. F5 → alles kommt in seiner Schrift/Größe zurück. Tabübergreifend auch (chrome.storage.local).

Fallstricke

• Der Rechtsklick MUSS auf .jz-pane-header sein (der schmale obere Streifen). Ein Rechtsklick auf den Pane-Body (Textarea) öffnet das native Browser-Menü (Ausschneiden/Kopieren/Einfügen/Untersuchen). Absicht — der Body ist der „Arbeitsbereich", der Header der „Steuerbereich".
• Aktionsleisten haben KEINE Schrift/Größe. Die Aktionsleiste sind Buttons, kein Text. Um Button-Text größer zu machen → nutze die color-Felder + eigenes CSS in deinen Regeln.
• Der Schrift-Fallback ist still. Wählt der User „Fira Code", ohne sie installiert zu haben, fällt der Browser üblicherweise still auf monospace zurück. Prüfe in Einstellungen → Datenschutz → Website-Einstellungen → Schriften, ob der Browser Zugriff auf Systemschriften hat (auf manchen Konfigurationen eingeschränkt).
• Ein CSS pane zu deaktivieren ist persistent. Leicht zu vergessen, dass du ein Pane verborgen hast → dann fragst du dich, warum CSS nicht angewendet wird. Wieder-Aktivieren-Orte: Widget-Popup (Klick auf das JustZix-Symbol), chrome → JustZix → „CSS-Fenster"-Untermenü oder options.html.
• Das Trennen eines Snap entfernt KEINE Verbindungs-Metadaten. Ziehst du das Pane zurück <20px von seinem früheren Nachbarn, kehrt der Snap zurück. Absicht — Trennen ist ein „Ad-hoc-Move", keine permanente Entkopplung.

Wie es weitergeht

Das Kontextmenü ist eine „zweite UI-Schicht" — schnelle Anpassungen ohne einen Ausflug zu den Optionen. Perfekt für Power-User, die täglich Stunden mit JustZix-Leisten verbringen. Sieh dir auch an:

• Snap connections — die vollständige Gruppen-Mechanik, von der du dich gerade trennst
• Globale Kürzel Ctrl+Shift+L/S/K/H — warum der Rechtsklick nicht jedem reicht
• Mini-IDE im Tab — vollständige UI-Karte

Installiere JustZix — komplett kostenlos, kein Konto, kein Server.