perf: tune flyout backdrop blur - #15
Merged
Merged
Conversation
Summary by CodeRabbit
WalkthroughThe 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. ChangesFlyout material documentation
Estimated code review effort: 1 (Trivial) | ~2 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
This was referenced Jul 28, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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:
gpui,gpui_platform, andvendor/gpuito5569a8cdb31a12f7ec4b9a825379400edde211c8A 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
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
material.flyout_blur_radius,material.flyout_light_opacity, ormaterial.flyout_dark_opacityin a theme and confirm the flyout follows the override.Validation run:
cargo fmt --all -- --checkcargo metadata --locked --format-version 1cargo build --lockedcargo clippy --locked -- --deny warningscargo test --locked -p gpui-component— 188 passedpython3 -m json.tool crates/ui/src/theme/default-theme.jsonAI 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
cargo runfor story tests related to the changes.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, andmaterial.flyout_dark_opacity.Macroscope summarized 9d59b07.