Chendo
released this
2026-07-07 12:22:34 +00:00
| 142 commits to main since this release
Version 0.54.0
- NEW 🦊 Firefox support (Firefox 128+): every release now also ships a
…-firefox.zip — the same build with a Firefox-ready manifest (event-page background, gecko id). Install temporarily via about:debugging, or sign once via AMO (self-distributed) for a permanent .xpi; see the README. Firefox treats site access as opt-in, so the toolbar popup now asks for permission to the current site on first use.
- IMPROVED Release notes on git are cumulative: when a release is published, its notes now cover every version since the previous published release — intermediate versions no longer disappear.
Version 0.53.0
- NEW 📍 "Where does this come from?" — click any palette swatch, any row in the "hardcoded although a token exists" table, or any variable in the hygiene tables, and a panel lists every declaration with selector, file and line number, each with a copy button (
theme.compiled.css:1234 .btn { color: … }). Line numbers are read from the stylesheet source itself; compiled Mendix CSS gets a hint to fix it in theme/web or app/styling (SCSS).
- IMPROVED The CSS-cascade view now shows
file:line for every matched rule, with a copy button per rule — send the developer straight to the place to correct it.
Version 0.52.0
- NEW Variable hygiene (Design ▸ Style ▸ CSS variables): two new tables — used but never declared (per variable: usage count, whether a fallback catches it, and whether it is only defined at runtime by JavaScript) and declared but unused (candidates — JS reads are invisible, so no death sentence). Both also appear as signals and in the client report.
- IMPROVED The CSS-cascade view flags a declaration that references an undeclared variable with a red "⚠ --x undeclared" pill, telling you whether the fallback saves it or the declaration does nothing.
Version 0.51.0
- NEW 🚔 Inline-styling detection (Design ▸ Style): every
style="…" attribute on the page, split into presentational properties (colour, font, spacing — the offence that, per house rules, authorises UX/UI designers to administer corporal punishment) and runtime properties (display/position, legitimately set by widgets). Click a row to highlight the element; svg internals and the tool itself are excluded.
- NEW Inline styling also surfaces as an audit finding (and thus in the client report, phrased professionally), as a 🚔-pill on inspected elements, and in the CSS-cascade view.
Version 0.50.0
- NEW 🧊 Freeze / delay tool (Design ▸ Tools): start a 2/5/10-second countdown, open the menu, tooltip or dropdown you want to study — at zero the page freezes: CSS animations and transitions pause, and everything that opened during the countdown is captured as a readable, copyable HTML tree. Esc restores the page; the captures stay.
- NEW Optional debugger break at zero — a real breakpoint, the "setTimeout(() => { debugger }, 3000)" console trick without the console. Only pauses when DevTools (F12) is open.
Version 0.49.0
- NEW Easy HTML inspection: pinning an element with the Element inspector now also shows its markup in a new 📄 HTML section (Design ▸ Tools) — a collapsible tree with syntax colours, cleaned of framework attributes (widgetid, data-mendix-id, …) by default, with a raw toggle and a "Copy HTML" button that produces neatly indented source.
Version 0.48.0
- NEW Page-wide contrast scan: one click in the contrast checker scans every text/background combination that actually occurs on the page — worst first, with WCAG AA/APCA verdicts, occurrence counts and design-token names. The checks-strip chip shows the verdict (✗ failing count / ✓ AA) at a glance.
- IMPROVED Contrast in the client report: the report now leads with a summary ("N of M combinations below AA"), lists all failing pairs (up to 25) instead of a fixed top-10, and shows token names next to the colours.
Version 0.47.0
- NEW Design tokens everywhere: wherever the tool shows a flat colour it now also shows the CSS variable it comes from — in the element inspector, on the palette swatches (Design ▸ Style) and in the client report. A new "CSS variables (design tokens)" section lists every token with its usage count.
- NEW Hardcoded-value detection: token-driven and hardcoded usage are counted separately — a colour that is hardcoded somewhere although a token with that exact value exists gets a ⚠ on its swatch, a dedicated table, a signal and a block in the client report. The CSS cascade view flags such declarations inline ("⚠ = var(--token)").
- NEW !important insight: a new section counts every !important declaration (per property, with example selectors), the cascade view badges them, and the report summarises them under "Design tokens & CSS hygiene".
Downloads