Scale UI elements in the editor based on the buffer_font_size (#11817)

This PR adjusts how UI elements are rendered inside of full-size editors
to scale with the configured `buffer_font_size`.

This fixes some issues where UI elements (such as the `IconButton`s used
for code action and task run indicators) would not scale as the
`buffer_font_size` was changed.

We achieve this by changing the rem size when rendering the
`EditorElement`, with a rem size that is derived from the
`buffer_font_size`.

`WindowContext` now has a new `with_rem_size` method that can be used to
render an element with a given rem size. Note that this can only be
called during `request_layout`, `prepaint`, or `paint`, similar to
`with_text_style` or `with_content_mask`.

### Before

<img width="1264" alt="Screenshot 2024-05-14 at 2 15 39 PM"
src="https://github.com/zed-industries/zed/assets/1486634/05ad7f8d-c62f-4baa-bffd-38cace7f3710">

<img width="1264" alt="Screenshot 2024-05-14 at 2 15 49 PM"
src="https://github.com/zed-industries/zed/assets/1486634/254cd11c-3723-488f-ab3d-ed653169056c">

### After

<img width="1264" alt="Screenshot 2024-05-14 at 2 13 02 PM"
src="https://github.com/zed-industries/zed/assets/1486634/c8dad309-62a4-444f-bfeb-a0009dc08c03">

<img width="1264" alt="Screenshot 2024-05-14 at 2 13 06 PM"
src="https://github.com/zed-industries/zed/assets/1486634/4d9a3a52-9656-4768-b210-840b4884e381">

Note: This diff is best viewed with whitespace changes hidden:

<img width="245" alt="Screenshot 2024-05-14 at 2 22 45 PM"
src="https://github.com/zed-industries/zed/assets/1486634/7cb9829f-9c1b-4224-95be-82182017ed90">

Release Notes:

- Changed UI elements within the editor to scale based on
`buffer_font_size` (e.g., code action indicators, task run indicators,
etc.).
This commit is contained in:
Marshall Bowers 2024-05-14 14:34:39 -04:00 committed by GitHub
parent c8ddde27e1
commit 5b8bb6237f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 560 additions and 479 deletions

File diff suppressed because it is too large Load diff

View file

@ -490,7 +490,15 @@ pub struct Window {
display_id: DisplayId,
sprite_atlas: Arc<dyn PlatformAtlas>,
text_system: Arc<WindowTextSystem>,
pub(crate) rem_size: Pixels,
rem_size: Pixels,
/// An override value for the window's rem size.
///
/// This is used by `with_rem_size` to allow rendering an element tree with
/// a given rem size.
///
/// Note: Right now we only allow for a single override value at a time, but
/// this could likely be changed to be a stack of rem sizes.
rem_size_override: Option<Pixels>,
pub(crate) viewport_size: Size<Pixels>,
layout_engine: Option<TaffyLayoutEngine>,
pub(crate) root_view: Option<AnyView>,
@ -763,6 +771,7 @@ impl Window {
sprite_atlas,
text_system,
rem_size: px(16.),
rem_size_override: None,
viewport_size: content_size,
layout_engine: Some(TaffyLayoutEngine::new()),
root_view: None,
@ -1202,7 +1211,9 @@ impl<'a> WindowContext<'a> {
/// The size of an em for the base font of the application. Adjusting this value allows the
/// UI to scale, just like zooming a web page.
pub fn rem_size(&self) -> Pixels {
self.window.rem_size
self.window
.rem_size_override
.unwrap_or(self.window.rem_size)
}
/// Sets the size of an em for the base font of the application. Adjusting this value allows the
@ -1211,6 +1222,31 @@ impl<'a> WindowContext<'a> {
self.window.rem_size = rem_size.into();
}
/// Executes the provided function with the specified rem size.
///
/// This method must only be called as part of element drawing.
pub fn with_rem_size<F, R>(&mut self, rem_size: Option<impl Into<Pixels>>, f: F) -> R
where
F: FnOnce(&mut Self) -> R,
{
debug_assert!(
matches!(
self.window.draw_phase,
DrawPhase::Prepaint | DrawPhase::Paint
),
"this method can only be called during request_layout, prepaint, or paint"
);
if let Some(rem_size) = rem_size {
self.window.rem_size_override = Some(rem_size.into());
let result = f(self);
self.window.rem_size_override.take();
result
} else {
f(self)
}
}
/// The line height associated with the current text style.
pub fn line_height(&self) -> Pixels {
let rem_size = self.rem_size();