#24358 cmux NEXT glass: in a see-through Chromium page, menus and the composer no longer show the chat text sharp through the glass

Leo: "2 on we can't be having unstyled main chat panes..."

Leo-ask: ask-95c8d21afb

Every cmux page in Chromium is see-through over the window glass (8e36a5bd9ea). Chromium draws a backdrop-filter's blurred copy over the page's own pixels, not in their place. A see-through page doesn't contain the window glass, so that copy is mostly clear, and the transcript under a menu, a hover card or the composer reads crisp through the tint. WebKit's backdrop takes in the opaque window glass and frosts it. The bench captures for #24160 showed this: in the Chromium column the transcript text sits sharp inside the side panel's glass.

What changes

• Floating glass in a see-through Chromium page now lays its tint over the theme surface at --glass-underlay (webviews/src/ui/glass/glass.css).
  • Floating glass means .ui-popup, .ui-tooltip, .ui-title-tooltip, .ui-card, and surfaces marked with the new .ui-glass-floats: the composer card, queue and strip, both jump pills, the session and link hover cards, and the add-project dialog.
  • The rule is scoped by @supports not (-webkit-backdrop-filter: none), so it applies only in Chromium (WebKit keeps the prefixed property). It also needs a see-through root, no lens canvas, and no Reduce Transparency.
• Glass in the page's flow keeps its tint, as in WebKit. A user's bubble and a settings card have nothing under them.
• The strength is a gallery experiment, chromium-glass-underlay, with four arms: none (today), light 50%, medium 70% (default), heavy 85%.
  • desktop.ts puts the arm on <html> as data-glass-underlay.
  • With no attribute, the CSS already uses the default arm, so the first frame doesn't change.
  • The Liquid glass gallery entry adds see-through-text variants (dark and light) that compare the arms.
  • I picked medium: the text under the glass fades to a trace, and the surface stays below 0.9 alpha (glass is never opaque).
• WebKit, an opaque window, the lens and Reduce Transparency draw exactly what they did before.

This is a page-side stopgap. The real fix is in the CEF fork's compositor (replace the backdrop with its blurred copy instead of drawing over it), which belongs to the fork's owner.

Verification

• webviews/test/chromium-glass-underlay.test.ts (Playwright Chromium and WebKit; the page is clear, as in the app, via omitBackground) measures white bars under a floating glass.
  • Base (glass.css from feat-cmux-next): red. The bar contrast is 38 for every arm ("Expected: < 17.12, Received: 38.05"), and the arms don't order.
  • Head: 4 pass.
    • The default arm fades the bars below 45% of the tint-only contrast, and the in-flow glass is unchanged.
    • The arms order by strength, each fill alpha is under 0.9, and WebKit draws no underlay.
    • As a control, the same tint-only glass over an opaque page frosts the bars below 8, so the cause is the clear page, not the blur.
  • Command: CMUX_BROWSER_TESTS=1 bun test test/chromium-glass-underlay.test.ts.

Observed / Not run

• Observed:
  • The test above, red on base and green on head.
  • composer-glass.test.ts (8 pass; its fixture now carries ui-glass-floats like ComposerBox.tsx) and glass-lens.test.ts (14 pass, Chromium and WebKit).
  • glass-never-opaque, user-bubble-glass and hover-cards-glass (10 pass).
  • vp fmt --check, plus vp lint and the type check filtered to the changed files (no findings).
  • check-layers.py, and the pre-push gate.
  • All of these ran on Huge Blue (Linux) in a copy of webviews/.
• Not run:
  • The full bun run check. The copy lacked the rest of the repo, so 34 errors appeared in files this PR doesn't touch.
  • The full browser lane. CI runs it.
  • The real-app capture of a fleet build at this head is in progress on a capture mini; the result will be a comment here.

Changelog

• Fixed: In a Chromium page over the window glass, menus, hover cards and the composer no longer show the chat text sharp through their glass.

Risk: normal (webview CSS; WebKit unchanged; the arm can be switched with cmux.experiments).

Agent session: cosmic-gray

🤖 Generated with Claude Code

---

^{Need help on this PR? Tag @codesmith-bot with what you need.}

---

Summary by cubic

Fixes see-through Chromium pages showing chat text crisp through menus, hover cards, the composer, and the Chat Inspector glass. Chromium draws a backdrop-filter's blurred copy over the page's own pixels, so the window glass never reaches the filter; WebKit already frosts it correctly.

• Floating glass (popups, tooltips, hover cards, the Chat Inspector, and surfaces marked .ui-glass-floats) now lays its tint over the theme surface, scoped to see-through Chromium pages with no lens and no Reduce Transparency.
• The composer's top strip does the same, except a plain strip or system Reduce Transparency stays unfilled and draws nothing extra.
• Glass in the page's flow (user bubbles, settings cards) keeps its tint unchanged.
• The underlay strength is the chromium-glass-underlay experiment with four arms: none, light 50%, medium 70%, and heavy 85%. Medium is the default; the CSS already uses it when no attribute is set, so the first frame is unchanged.
• WebKit, opaque windows, and the lens draw exactly as before.