Editor: line counter in tabs, wider scrollbar and longer action labels
Bigger changes (shadow DOM, dark mode, the AI Helper) get the headlines. Small UX polish doesn't — and yet polish is what tends to change how you use a tool day to day. In v3.2.80–82 we shipped four pieces that together make working with the rule editor noticeably nicer.
Line counter in CSS / JS / Actions tabs (v3.2.82)
Each tab of the rule editor — CSS, JS, Actions — now carries a line-count badge next to its name. Analogous to the Actions tab, which has long shown the action count.
Why: when you look at a rule set, you see where the bulk lives. 87 lines of CSS + 12 lines of JS + 3 actions — one glance and you know this set is moderately complex, and most of the logic sits in CSS. Before, you had to open every tab to gauge that.
Small technical detail: the counter updates live as you type (200 ms debounce), so the badge doesn't flicker on every keystroke.
Wider scrollbar in windows: 10 → 14 px (v3.2.80)
The inner scrollbar of developer windows (CSS pane, JS pane, JS Console, Output Console, AI Helper) was 10 px wide — which clashed with the 8-pixel resize handle on the right edge. It was easy to grab the handle instead of the scrollbar and accidentally resize the window.
After the change the scrollbar is 14 px wide — easier to grab, and the resize handle is still there, but clearly below the scrollbar edge. No more conflict, no more frustration.
Action labels 8 → 12 characters (v3.2.81)
Action labels in the bar had a hard-coded limit of 8 characters. Fine for "Dark", "Hide" and similar — but when working with the AI Helper, it often wanted to suggest a longer, more descriptive name ("Hide ads", "Wide column") — and was cut off.
The new limit is 12 characters. UI and backend are in sync — the AI Helper, the editor, the bar render, the settings panel — all talk about the same length. Labels can now carry more context about what each action does.
Folder toolbar reorganized (v3.2.80)
The folder header toolbar (folder edit panel) used to have everything in one row: Export, Import, Delete + Group, Bar, Window. Six buttons side by side — visually they ran into each other and it was hard to find what you wanted quickly.
The new layout is two rows:
- Top: Export / Import / Delete — operations on the folder as a whole, above the URL patterns field.
- Bottom: + Group / + Bar / + Window — creating child elements, separate from the folder operations.
Two logical groups, clearly recognizable at a glance.
Other small wins from the same series
Alongside the main changes a handful of smaller, nice touches went in:
- Symmetric padding on the
.rules-areacontainer — 14 px (v3.2.88) — previously 24 px on the right, a legacy asymmetry from an earlier UI iteration. - Scroll-preserve in the editor when syncing from another device (v3.2.82) — when another device changes the rule, CodeMirror no longer jumps to position 0, it keeps you where you were.
- Dropdown anchor button — a second click closes it (v3.2.89) — fixed bug where a dropdown opened by the button could only be closed by clicking outside, not by clicking the button again.
See also
- On-page windows — overview of every developer window the wider scrollbar covers
- JustZix keyboard shortcuts — the full keyboard cheat sheet
- Edit panel next to your page — another way to handle day-to-day rule editing
Install JustZix — and feel the difference in the details.
Rate this post
No ratings yet — be the first.