Use buffer font size for editor overlays and blocks (#3852)

Max Brunsfeld created

Previously, the buffer font size was not respected by these editor
features.

Change summary

crates/diagnostics2/src/diagnostics.rs |  34 ++++++--
crates/editor2/src/editor.rs           |   3 
crates/editor2/src/element.rs          | 103 ++++++++++++++++-----------
crates/editor2/src/hover_popover.rs    |   2 
4 files changed, 85 insertions(+), 57 deletions(-)

Detailed changes

crates/diagnostics2/src/diagnostics.rs 🔗

@@ -13,7 +13,7 @@ use editor::{
 };
 use futures::future::try_join_all;
 use gpui::{
-    actions, div, AnyElement, AnyView, AppContext, Context, EventEmitter, FocusHandle,
+    actions, div, svg, AnyElement, AnyView, AppContext, Context, EventEmitter, FocusHandle,
     FocusableView, HighlightStyle, InteractiveElement, IntoElement, Model, ParentElement, Render,
     SharedString, Styled, StyledText, Subscription, Task, View, ViewContext, VisualContext,
     WeakView, WindowContext,
@@ -800,12 +800,20 @@ fn diagnostic_header_renderer(diagnostic: Diagnostic) -> RenderBlock {
                 h_stack()
                     .gap_3()
                     .map(|stack| {
-                        let icon = if diagnostic.severity == DiagnosticSeverity::ERROR {
-                            IconElement::new(Icon::XCircle).color(Color::Error)
-                        } else {
-                            IconElement::new(Icon::ExclamationTriangle).color(Color::Warning)
-                        };
-                        stack.child(icon)
+                        stack.child(
+                            svg()
+                                .size(cx.text_style().font_size)
+                                .flex_none()
+                                .map(|icon| {
+                                    if diagnostic.severity == DiagnosticSeverity::ERROR {
+                                        icon.path(Icon::XCircle.path())
+                                            .text_color(Color::Error.color(cx))
+                                    } else {
+                                        icon.path(Icon::ExclamationTriangle.path())
+                                            .text_color(Color::Warning.color(cx))
+                                    }
+                                }),
+                        )
                     })
                     .child(
                         h_stack()
@@ -819,7 +827,11 @@ fn diagnostic_header_renderer(diagnostic: Diagnostic) -> RenderBlock {
                                 ),
                             )
                             .when_some(diagnostic.code.as_ref(), |stack, code| {
-                                stack.child(Label::new(format!("({code})")).color(Color::Muted))
+                                stack.child(
+                                    div()
+                                        .child(SharedString::from(format!("({code})")))
+                                        .text_color(cx.theme().colors().text_muted),
+                                )
                             }),
                     ),
             )
@@ -827,7 +839,11 @@ fn diagnostic_header_renderer(diagnostic: Diagnostic) -> RenderBlock {
                 h_stack()
                     .gap_1()
                     .when_some(diagnostic.source.as_ref(), |stack, source| {
-                        stack.child(Label::new(format!("{source}")).color(Color::Muted))
+                        stack.child(
+                            div()
+                                .child(SharedString::from(source.clone()))
+                                .text_color(cx.theme().colors().text_muted),
+                        )
                     }),
             )
             .into_any_element()

crates/editor2/src/editor.rs 🔗

@@ -1195,7 +1195,6 @@ impl CompletionsMenu {
                     .min_w(px(260.))
                     .max_w(px(640.))
                     .w(px(500.))
-                    .text_ui()
                     .overflow_y_scroll()
                     // Prevent a mouse down on documentation from being propagated to the editor,
                     // because that would move the cursor.
@@ -1251,7 +1250,6 @@ impl CompletionsMenu {
                             .max_w(px(540.))
                             .whitespace_nowrap()
                             .overflow_hidden()
-                            .text_ui()
                             .px_1()
                             .rounded(px(4.))
                             .bg(cx.theme().colors().ghost_element_background)
@@ -1425,7 +1423,6 @@ impl CodeActionsMenu {
                         let colors = cx.theme().colors();
                         div()
                             .px_2()
-                            .text_ui()
                             .text_color(colors.text)
                             .when(selected, |style| {
                                 style

crates/editor2/src/element.rs 🔗

@@ -52,7 +52,7 @@ use std::{
 use sum_tree::Bias;
 use theme::{ActiveTheme, PlayerColor};
 use ui::prelude::*;
-use ui::{h_stack, ButtonLike, ButtonStyle, IconButton, Label, Tooltip};
+use ui::{h_stack, ButtonLike, ButtonStyle, IconButton, Tooltip};
 use util::ResultExt;
 use workspace::item::Item;
 
@@ -2305,13 +2305,17 @@ impl EditorElement {
                                         h_stack().gap_3().child(
                                             h_stack()
                                                 .gap_2()
-                                                .child(Label::new(
+                                                .child(
                                                     filename
                                                         .map(SharedString::from)
                                                         .unwrap_or_else(|| "untitled".into()),
-                                                ))
+                                                )
                                                 .when_some(parent_path, |then, path| {
-                                                    then.child(Label::new(path).color(Color::Muted))
+                                                    then.child(
+                                                        div().child(path).text_color(
+                                                            cx.theme().colors().text_muted,
+                                                        ),
+                                                    )
                                                 }),
                                         ),
                                     )
@@ -2373,8 +2377,6 @@ impl EditorElement {
                                     this.child(div().size_full().bg(gpui::green()))
                                 }
                             })
-                        // .child("⋯")
-                        // .children(jump_icon) // .p_x(gutter_padding)
                     };
                     element.into_any()
                 }
@@ -2811,50 +2813,65 @@ impl Element for EditorElement {
     ) {
         let editor = self.editor.clone();
 
-        let mut layout = self.compute_layout(bounds, cx);
-        let gutter_bounds = Bounds {
-            origin: bounds.origin,
-            size: layout.gutter_size,
-        };
-        let text_bounds = Bounds {
-            origin: gutter_bounds.upper_right(),
-            size: layout.text_size,
-        };
+        cx.with_text_style(
+            Some(gpui::TextStyleRefinement {
+                font_size: Some(self.style.text.font_size),
+                ..Default::default()
+            }),
+            |cx| {
+                let mut layout = self.compute_layout(bounds, cx);
+                let gutter_bounds = Bounds {
+                    origin: bounds.origin,
+                    size: layout.gutter_size,
+                };
+                let text_bounds = Bounds {
+                    origin: gutter_bounds.upper_right(),
+                    size: layout.text_size,
+                };
 
-        let focus_handle = editor.focus_handle(cx);
-        let key_context = self.editor.read(cx).key_context(cx);
-        cx.with_key_dispatch(Some(key_context), Some(focus_handle.clone()), |_, cx| {
-            self.register_actions(cx);
-            self.register_key_listeners(cx);
+                let focus_handle = editor.focus_handle(cx);
+                let key_context = self.editor.read(cx).key_context(cx);
+                cx.with_key_dispatch(Some(key_context), Some(focus_handle.clone()), |_, cx| {
+                    self.register_actions(cx);
+                    self.register_key_listeners(cx);
 
-            cx.with_content_mask(Some(ContentMask { bounds }), |cx| {
-                let input_handler = ElementInputHandler::new(bounds, self.editor.clone(), cx);
-                cx.handle_input(&focus_handle, input_handler);
+                    cx.with_content_mask(Some(ContentMask { bounds }), |cx| {
+                        let input_handler =
+                            ElementInputHandler::new(bounds, self.editor.clone(), cx);
+                        cx.handle_input(&focus_handle, input_handler);
 
-                self.paint_background(gutter_bounds, text_bounds, &layout, cx);
-                if layout.gutter_size.width > Pixels::ZERO {
-                    self.paint_gutter(gutter_bounds, &mut layout, cx);
-                }
-                self.paint_text(text_bounds, &mut layout, cx);
+                        self.paint_background(gutter_bounds, text_bounds, &layout, cx);
+                        if layout.gutter_size.width > Pixels::ZERO {
+                            self.paint_gutter(gutter_bounds, &mut layout, cx);
+                        }
+                        self.paint_text(text_bounds, &mut layout, cx);
 
-                cx.with_z_index(0, |cx| {
-                    self.paint_mouse_listeners(bounds, gutter_bounds, text_bounds, &layout, cx);
-                });
-                if !layout.blocks.is_empty() {
-                    cx.with_z_index(0, |cx| {
-                        cx.with_element_id(Some("editor_blocks"), |cx| {
-                            self.paint_blocks(bounds, &mut layout, cx);
+                        cx.with_z_index(0, |cx| {
+                            self.paint_mouse_listeners(
+                                bounds,
+                                gutter_bounds,
+                                text_bounds,
+                                &layout,
+                                cx,
+                            );
                         });
-                    })
-                }
+                        if !layout.blocks.is_empty() {
+                            cx.with_z_index(0, |cx| {
+                                cx.with_element_id(Some("editor_blocks"), |cx| {
+                                    self.paint_blocks(bounds, &mut layout, cx);
+                                });
+                            })
+                        }
 
-                cx.with_z_index(1, |cx| {
-                    self.paint_overlays(text_bounds, &mut layout, cx);
-                });
+                        cx.with_z_index(1, |cx| {
+                            self.paint_overlays(text_bounds, &mut layout, cx);
+                        });
 
-                cx.with_z_index(2, |cx| self.paint_scrollbar(bounds, &mut layout, cx));
-            });
-        })
+                        cx.with_z_index(2, |cx| self.paint_scrollbar(bounds, &mut layout, cx));
+                    });
+                })
+            },
+        );
     }
 }
 

crates/editor2/src/hover_popover.rs 🔗

@@ -478,7 +478,6 @@ impl InfoPopover {
         div()
             .id("info_popover")
             .elevation_2(cx)
-            .text_ui()
             .p_2()
             .overflow_y_scroll()
             .max_w(max_size.width)
@@ -555,7 +554,6 @@ impl DiagnosticPopover {
             .px_2()
             .py_1()
             .bg(diagnostic_colors.background)
-            .text_ui()
             .text_color(diagnostic_colors.text)
             .border_1()
             .border_color(diagnostic_colors.border)