Peer usernames are remote-controlled and were interpolated into an
innerHTML string in updateLobbyUI. The server only truncates them to 30
chars, so a peer could inject markup into everyone else's popup: enough
to load a remote image (leaking viewer IPs) or spoof readiness badges.
Inline handlers were already blocked by the MV3 default CSP.
Build the peer items with the DOM API, matching the pattern the sibling
peer list already uses.
Add the two checks that would have caught this before upload:
- eslint no-unsanitized, which reproduces the AMO warning at lint time
- addons-linter on the built XPI in verify-release, with
--warnings-as-errors since it exits 0 on warnings and AMO rejects them
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Feedback round (calmer, less "template/AI"):
- Dial back animated background motion globally (sway/leaf-drift halved,
fewer falling leaves, gentler godrays/fireflies/light-sweep).
- Fire leaf confetti on click of real controls only (was pointerdown
everywhere, which showered mobile users on every scroll).
- Remove hover lift/scale from non-interactive cards, screenshots and
mascots so they no longer read as clickable.
- Fix mobile nav menu colours in the light theme (was a hard-coded dark
panel with low-contrast links).
- Calm how-it-works steps 1-2 (no button pulse/shine/cursor bob); step 3
keeps its lively sync animation. Remove the now-static "copied" toast
from step 1 since it only made sense mid-animation.
UX audit follow-ups:
- Unify vertical rhythm with one section-padding scale; vertically centre
the hero so space is balanced instead of pooling under the CTAs.
- Split the mixed "Why KoalaSync?" grid into use-case scenarios and a
labelled "Features" subsection, and move the #features nav anchor there.
- Demote the hero GitHub CTA to a quiet text link (Chrome > Firefox >
GitHub hierarchy); scale down oversized section mascots and give them a
shared soft shadow.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- thin out bamboo/leaf/firefly decor in tiers (<=1440 / <=1024 / <=768px)
so nothing moves behind the text column and copy stays readable
- center the single-column hero below 1024px (text, koala, CTAs, trust
line) and let the odd CTA button span the full grid row
- remove the periodic wind gusts; keep the constant gentle bamboo sway
- reword the German demo CTA to "Live-Demo ansehen"
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- Flag font: ship a committed fontTools subset (43 KB, -45%) of
TwemojiCountryFlags.woff2 with only the 15 flags the site uses, under a
content-hashed name with a preload on every flag-bearing page. The build
validates the subset against a manifest and fails when a new flag
appears without regenerating (npm run subset-flags). JS subsetters
(subset-font/harfbuzzjs) were rejected: their wasm builds silently drop
the COLR/CPAL color tables, rendering all flags invisible.
- Responsive mascots: legal/join/404 pages served 434-500px sources for
175-180px slots; the build now emits 180w/360w variants (AVIF 1x: ~7 KB
vs ~22 KB) and the pages use srcset. Small logo spots (14-42px) now use
the existing 64/128px variants instead of the 256px file.
- injectAvifPictures copies the img sizes attribute onto the AVIF
<source>; without it Chrome mis-selects w-descriptor candidates and can
drop the image entirely.
- AVIF conversion is cached by content hash (.avif-cache.json); the old
mtime check never hit because copyDirSync refreshes mtimes, so every
verify re-encoded all 26 files.
- HTML output is minified (comments + indentation, <pre> preserved,
newlines kept for inline-script safety): index.html 121 KB -> 93 KB.
- unicode-range trimmed to U+1F1E6-1F1FF; tag-sequence flags fall through
to the system emoji font.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Strip every bird from the demo mockups: both hero video tabs and both
step-3 player scenes lose the background flock (.film-birds) and the
foreground flapping bird (.film-hero-bird), plus all related CSS in
styles/demo.css and the dead style.legacy.css.
Language selector: the <select> was 30px narrower than its pill, so in
appearance:base-select the click/focus highlight covered only the inner
~110px ("half the box"). Move the padding from the container onto the
control so it fills the pill edge-to-edge; mirror the fix in the mobile
legal.css override.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Bamboo layers get their own light-mode recipes (fresh greens, visible
segment rings, sheen) instead of dark-theme gradients faded to 45%
- Language selector pill: frosted white glass, light dropdown/picker
(was hard-coded dark glass in both themes)
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Scrolling down now moves all bamboo layers up-screen with the content
(near fastest, far slowest) instead of pushing them down against it.
Vertical overscan flipped from top (-70%) to bottom (-40%) so the
upward drift never exposes a gap at the viewport bottom.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The drift clamp saturated after ~2600px, so nothing moved on long
pages. The vertical drift now maps scroll progress (0..1 over the full
document) onto the stalks' overscan, so the parallax runs end to end.
Turn the background into a descent through the forest: god-ray light
shafts and the canopy fade out while a dusk tint, thicker mist, the
terracotta horizon glow and the fireflies fade in as you scroll down.
Fireflies additionally wander organically (independent translate
property composing with their scale pulse), and on hover-capable
devices the bamboo layers tilt subtly toward the cursor. All layers
animate transform/opacity only, rAF-throttled, reduced-motion safe.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The stalks used border-radius:50%, which renders a tall ellipse whose
ends taper to points, and unbounded parallax drift pushed them off the
bottom of the viewport on long pages. Rounded caps + 20% overscan +
a viewport-relative drift clamp keep them full-height while scrolling.
Sweep the remaining off-palette colors into the nature palette:
content-script overlays (slate grays), amber warnings/badges/star
accents (now terracotta) in popup, background badge and website
illustrations, and the support-heart red (now --danger).
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
v3.0.0 "The Greens Update" palette: forest-green oklch color system
(accent green + terracotta secondary) replaces the indigo/slate scheme
across the landing page and the extension popup/options. The blob
background becomes an animated bamboo forest overlay (parallax stalks,
falling leaves, canopy, ground mist, fireflies, light sweep, grain)
with prefers-reduced-motion support. Layout, structure and copy are
unchanged.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
KoalaDev