Skip to content

perf: tune flyout backdrop blur - #15

Merged
BumpyClock merged 2 commits into
mainfrom
perf/backdrop-blur-material
Jul 31, 2026
Merged

perf: tune flyout backdrop blur#15
BumpyClock merged 2 commits into
mainfrom
perf/backdrop-blur-material

Conversation

@BumpyClock

@BumpyClock BumpyClock commented Jul 28, 2026

Copy link
Copy Markdown
Owner

Description

Menus and dropdowns looked poor for two separate reasons: the pinned GPUI revision used a lower-quality blur path, and the component flyout material requested an oversized 60px blur behind a heavy 0.75/0.85 tint.

This PR:

  • consumes the phase-stable cross-backend blur from BumpyClock/gpui#8 by pinning gpui, gpui_platform, and vendor/gpui to 5569a8cdb31a12f7ec4b9a825379400edde211c8
  • tunes the shared flyout preset used by menus and dropdowns from 60px to 32px and from 0.75/0.85 to 0.68/0.76 light/dark tint opacity
  • documents the theme override keys
  • advances the pre-1.0 compatibility pair from 0.6.0 to 0.7.0, as required for a GPUI revision change

A representative flyout reduced padded blur work from 476,352 to 357,744 pixels (~25%) and pyramid scratch from ~3.0 MiB to ~2.3 MiB (~23%).

Depends on BumpyClock/gpui#8.

Screenshot

Before After
60px blur, 0.75/0.85 tint; flatter and chalkier 32px blur, 0.68/0.76 tint; clearer depth and backdrop modulation

Fresh source-blind review of local macOS light/dark A/B captures preferred the tuned result. No halo, banding, blur leakage, geometry shift, or text-contrast regression was found.

Breaking Changes

Published workspace crates advance from 0.6.0 to 0.7.0 because this pre-1.0 release changes the pinned GPUI revision. No intentional source API break is introduced. Release tags remain deferred until the change lands on main, per repository workflow.

How to Test

  1. Open a popup menu and a select/dropdown over detailed content in light and dark themes.
  2. Confirm background detail is smoothly defocused while labels remain crisp and the blur stays inside the rounded flyout.
  3. Override material.flyout_blur_radius, material.flyout_light_opacity, or material.flyout_dark_opacity in a theme and confirm the flyout follows the override.

Validation run:

  • cargo fmt --all -- --check
  • cargo metadata --locked --format-version 1
  • cargo build --locked
  • cargo clippy --locked -- --deny warnings
  • cargo test --locked -p gpui-component — 188 passed
  • python3 -m json.tool crates/ui/src/theme/default-theme.json
  • local story app macOS light/dark menu and dropdown smoke/A-B capture

AI Assistance

AI-assisted change. Codex implemented and tested it; Claude Fable and Oracle browser reviews challenged the blur design; independent source and visual reviews found no blockers. Findings were checked against the code and runtime captures before submission.

Checklist

  • I have read the CONTRIBUTING document and followed the guidelines.
  • Reviewed the changes in this PR and confirmed AI generated code is accurate.
  • Passed cargo run for story tests related to the changes.
  • Tested macOS, Windows and Linux platforms performance — macOS visual smoke completed; cross-platform renderer CI belongs to the dependent GPUI PR.

Note

Document flyout backdrop blur and tint opacity defaults in theme configuration

Adds a 'Material Surfaces' section to theme.md describing the visual properties of menus and dropdowns. Documents the default backdrop blur radius (24px) and popover tint opacity (0.86 light, 0.88 dark), and the theme override keys material.flyout_blur_radius, material.flyout_light_opacity, and material.flyout_dark_opacity.

Macroscope summarized 9d59b07.

@coderabbitai

coderabbitai Bot commented Jul 28, 2026

Copy link
Copy Markdown

Review Change Stack

Summary by CodeRabbit

  • Documentation
    • Added guidance on default material surface styling for menus and dropdowns.
    • Documented backdrop blur, light/dark popover opacity values, and available theme override settings.

Walkthrough

The theme documentation adds a “Material Surfaces” section for menu and dropdown flyouts. It documents default blur, light-mode opacity, dark-mode opacity, and theme override keys.

Changes

Flyout material documentation

Layer / File(s) Summary
Document flyout material defaults
docs/docs/theme.md
Documents the 24px backdrop blur, light-mode opacity of 0.86, dark-mode opacity of 0.88, and configurable theme override keys.

Estimated code review effort: 1 (Trivial) | ~2 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Title check ✅ Passed The title clearly and concisely identifies the main change: tuning flyout backdrop blur performance.
Description check ✅ Passed The description explains the problem, changes, testing, screenshots, compatibility impact, dependency, and checklist status in sufficient detail.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch perf/backdrop-blur-material

Comment @coderabbitai help to get the list of available commands.

@BumpyClock
BumpyClock merged commit a3ff1b3 into main Jul 31, 2026
17 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant