← All posts

Windows on the frontend

JustZix floating button — 3-letter drop with hover state, snap, popup menu

15 May 2026 · by JustZix Team

The floating button is the small 3-letter drop you see on every page where JustZix has an active rule. It's the entrance to the whole JustZix UI — click opens a popup with toggles, drag lets you reposition it, snap links it with action bars. Small visually, but it condenses a lot of functionality. This post opens it up.

3-letter label per folder

Each folder in JustZix (the main rule-grouping unit) has an optional icon — max 3 chars, auto-UPPERCASE. The float btn shows the icon of the first matching folder (by URL prefix):

folder.icon = 'qa'      → label "QA"
folder.icon = 'dev'     → label "DEV"
folder.icon = '🐛'      → label "🐛" (emoji sliced to 3 chars)
folder.icon = (empty)   → label "ZIX" (default)

Idea: a power user has 5-10 folders per project, each with a different 3-letter marker. Seeing "QA" on the floating btn means QA rules are active. Visual feedback before any interaction.

4 visual states — colour + opacity

State auto-updates on storage onChanged — toggle a rule anywhere (options page, popup widget, chrome context menu) → the float btn changes appearance immediately.

Anatomy of a click — popup widget

Left-click on the float btn → a popup widget opens next to it. The widget contains:

• Global pause — pauseToggle at the very top, one click = disable the entire extension
• Folders section — a checkbox per folder matching the URL, toggle on/off per folder (persistent)
• Action bars section — toggle visibility of each bar separately (per-tab session)
• CSS/JS/Console windows section — a checkbox per pane (persistent)
• "Open Options" link — full editor in a new tab

Click outside closes the popup (document-level event listener). Clicking a checkbox triggers setBarHidden / setCssPaneEnabled / setFolderEnabled — all chained via Promise to avoid race conditions.

Snap connections with bars and panes

The float btn participates in snap connections as a pseudo-element with the ID '__float'. Mechanics identical to panes:

1. Drag the float btn close to an action bar (≤20px) → snap, the two elements = a group
2. Drag any element of the group → the whole group moves together
3. Right-click on the float btn → context menu with "Disconnect from X" options

Use case: floating btn as an "anchor handle" for the entire group. Bars + Output Console snapped to the float btn → drag the float btn = you move the whole dashboard.

Right-click = context menu

Same mechanism as for bars / CSS panes — context menu per element. Float btn has:

• "Hide until reload" — float btn disappears until next F5. Persistent OFF requires the options page (intentionally not in the context menu — so users don't confuse "hide" with "disable the whole extension")
• "Disconnect from X" — per snap connection. Plus "Disconnect all connections"

No font/size — the float btn is fixed-size (32×32px). No text to customise besides the 3-letter label (which comes from folder.icon).

Use case 1 — Visual scope indicator

You have 3 folders: "ALL" (works everywhere), "GHB" (only github), "GMA" (only gmail). Each with a different colour (green, black, red) and 3-letter icon. Visit github.com → float btn shows black "GHB". Visit gmail.com → red "GMA". Without checking the popup widget you see the scope.

Use case 2 — Quick global pause

Skype call, demoing a new feature to someone in production, JustZix might get in the way. Click float btn → "Global pause" toggle → the extension deactivates all rules. After the demo → click again → enabled. Without going into chrome://extensions.

Use case 3 — Per-page hide until reload

The "Force dark mode" rule also matches your bank's site — which already has its own dark mode. The float btn covers the bank's logo. Right-click on float btn → "Hide until reload" → float btn disappears only on this tab, until F5. The rules still run, only the UI is hidden.

Use case 4 — Position per domain

The float btn's position is persistent in chrome.storage.sync. Default in the bottom-right (BR anchor). Drag → save → next visit to that domain returns it where you left it. Position is per-element-id, but all pages share id '__float' — so the position is global across domains. If you want per-page → use snap with a bar that is scope-specific.

Pitfalls

• 3-letter icon — sliced to 3 chars. "qa-team" → "QA-" (with the dash). Best practice: 1-3 alphanumeric chars. A single emoji = OK (e.g. 🐛 → "🐛"), but multi-char emoji (👨‍💻 = 5 codepoints) slices oddly.
• folder.icon defaults to 'ZIX' even when you don't define a custom one — used to be "JZ" (2 chars), since v2.13 it's brand-aligned 'ZIX'.
• Global pause vs per-folder disable. Global pause doesn't clear per-folder enable state — when you unpause, folders return to whatever state they were in. Per-folder disable is persistent, independent of global pause.
• Float btn position in sync storage may desync between devices if you drag quickly on one and open the tab on another. Chrome eventual consistency ~1-2 sec.
• Float btn snap isn't two-way. Float btn position is global, bars have position per-window-state. Snap works visually, but if you move the float btn on another tab, bars don't follow (they're scope-locked to their tab).

What's next

Float btn is the "entry point" for the whole JustZix UI — all other elements (bars, panes) are more contextual. Check also:

• Snap connections — float btn as an anchor for a group
• Context menu on pane headers — parallel mechanism
• Mini-IDE in a tab — full UI map

Install JustZix — the float btn will appear by itself as soon as you add your first rule.