← All posts

API & helpers

Context menu on pane headers — right-click = font, size, disconnect, disable

15 May 2026 · by JustZix Team

A pane is on the screen. You want to detach it from the snap group. Or change its font to Fira Code. Or disable it so it disappears for a moment. Without a context menu you'd have to go to the options page (3 clicks), edit the pane, save, return to the page. With the context menu (since v2.13.42 for bars, v2.13.55 for CSS panes, v2.13.70 for all panes with fonts) — right-click the header, 1 second.

What's in the context menu

Right-clicking on .jz-pane-header (the narrow strip at the top of a pane, the same one you grab to drag) opens a floating menu with 4 sections:

All applied instantly — no F5, no save button. Changing font to "Fira Code" → you immediately see ligatures (===, !==, →) if the system has the font installed.

Works for all 4 pane types + bar

The context menu is unified — the same showBarContextMenu(id, x, y) handles 5 element types. Type detection by ID prefix:

• ab_* → Action bar — all options except font/size
• cp_* → CSS pane — full menu
• jp_* → JS pane — full menu
• jc_* → JS Console — full menu
• oc_* → Output Console — full menu

Action bars don't have font/size (their content is buttons, not text to read). CSS panes/JS panes do — because that's where you read/write code.

Use case 1 — Disconnect a snap connection

You have a group: Action bar + CSS pane + Output Console snapped vertically. You want to pull Output Console out to move it to another monitor. Without the context menu — you'd have to drag it >20px from the group, but then snap "lazily" disconnects and the position might be close enough to re-snap.

With the context menu — right-click on the Output Console header → "Disconnect all connections". Connections gone. Now Output Console can be dragged anywhere without re-snap risk. Bonus: "Disconnect from CSS pane" (per connection) leaves other connections intact — useful for 3-element groups where you want to break only one edge.

Use case 2 — Hiding a pane for a moment

You're refactoring CSS. CSS pane is open with a 200-line stylesheet. An email arrives — you want to reply in Gmail in the same tab. The pane is visually in the way.

• CSS pane → "Disable this CSS pane": pane gone. Persistent — F5 won't bring it back. Re-enable via widget popup (click the JustZix icon in toolbar), or chrome → JustZix → "CSS Windows" → checkbox.
• Action bar → "Hide until reload": bar gone only in this tab, until next F5. Lighter, "just for now" toggle.

The intentional difference: panes (CSS/JS/Console/OC) have "Disable" = persistent (their role is "this should be visible all the time"). Bars have "Hide until reload" = ephemeral (bars are visible by default, so disable = "not now").

Use case 3 — Fira Code font for the CSS editor

Default font for pane.body is system mono — readable, but no ligatures. If you have Fira Code installed locally:

1. Right-click the CSS pane header → Font → "Fira Code".
2. Editor immediately renders ligatures: => as →, !== as ≠, >= as ≥.
3. Per-pane change — each CSS pane / JS pane / Console can have its own font.

List offered: Default (system mono), Fira Code, JetBrains Mono, Cascadia Code, Consolas, Menlo, ui-monospace. If the system doesn't have a font — browser falls back to monospace (same as Default). No error, no warning — graceful.

Use case 4 — 10px size for a mini-dashboard

You're building a personal dashboard for a 4K monitor. CSS pane + JS pane + Output Console snapped in the bottom-right, each 300×200px. Default font size (~13px) makes text not fit well.

Right-click → Size → 10px. Three times (each pane separately). Now 200px height fits ~16 lines instead of ~12. The mini-dashboard becomes information-dense.

Reverse for accessibility: size 18-20px gives more comfort for users with vision issues, at the cost of information density.

Use case 5 — Per-pane personalization

Three CSS panes in the same tab:

• "Production styles" — Fira Code 13px (comfort)
• "Quick fixes" — Consolas 12px (small, for 5-line snippets)
• "Color palette" — ui-monospace 14px (default, since content is just hex codes)

Each pane has its own persistent storage config. F5 → everything comes back in its font/size. Cross-tab too (chrome.storage.local).

Pitfalls

• Right-click MUST be on .jz-pane-header (the narrow top strip). Right-clicking the pane body (textarea) opens the native browser menu (Cut/Copy/Paste/Inspect). Intentional — body is the "work area", header is the "control area".
• Action bars have NO font/size. The action bar is buttons, not text. To make button text bigger → use the color fields + custom CSS in your rules.
• Font fallback is silent. If the user picks "Fira Code" without having it installed, the browser usually silently falls back to monospace. Check in Settings → Privacy → Site Settings → Fonts whether the browser has access to system fonts (it's restricted on some configurations).
• Disabling a CSS pane is persistent. Easy to forget you hid a pane → then you wonder why CSS isn't applying. Re-enable locations: widget popup (click the JustZix icon), chrome → JustZix → "CSS Windows" submenu, or options.html.
• Disconnecting snap does NOT remove connection metadata. If you drag the pane back <20px from its former neighbour, snap returns. Intentional — disconnect is "ad-hoc move", not permanent decoupling.

What's next

The context menu is a "second UI layer" — quick tweaks without a trip to options. Perfect for power users who spend hours daily with JustZix bars. Check also:

• Snap connections — full group mechanics, the groups you're disconnecting from
• Global shortcuts Ctrl+Shift+L/S/K/H — why right-click isn't enough for everyone
• Mini-IDE in a tab — full UI map

Install JustZix — completely free, no account, no server.