Fix rendering of diagnostic blocks (#4232)

Conrad Irwin created 2 years ago

- Distinct colors to make it not confusing
- Avoid overflowing the edge of the editor when the message is long


Release Notes:

- Improved display of diagnostic blocks (F8)

Change summary

crates/diagnostics/src/diagnostics.rs      |  1 +
crates/editor/src/display_map/block_map.rs |  1 +
crates/editor/src/editor.rs                | 20 +++++++++++---------
crates/editor/src/element.rs               |  3 +++
4 files changed, 16 insertions(+), 9 deletions(-)

Detailed changes

crates/diagnostics/src/diagnostics.rs

@@ -1603,6 +1603,7 @@ mod tests {
                                         gutter_width: px(0.),
                                         line_height: px(0.),
                                         em_width: px(0.),
+                                        max_width: px(0.),
                                         block_id: ix,
                                         view: editor_view,
                                         editor_style: &editor::EditorStyle::default(),

crates/editor/src/display_map/block_map.rs

@@ -84,6 +84,7 @@ pub struct BlockContext<'a, 'b> {
     pub context: &'b mut ElementContext<'a>,
     pub view: View<Editor>,
     pub anchor_x: Pixels,
+    pub max_width: Pixels,
     pub gutter_width: Pixels,
     pub gutter_padding: Pixels,
     pub em_width: Pixels,

crates/editor/src/editor.rs

@@ -9593,31 +9593,33 @@ pub fn diagnostic_block_renderer(diagnostic: Diagnostic, _is_valid: bool) -> Ren
     let (text_without_backticks, code_ranges) = highlight_diagnostic_message(&diagnostic);
 
     Arc::new(move |cx: &mut BlockContext| {
-        let color = Some(cx.theme().colors().text_accent);
         let group_id: SharedString = cx.block_id.to_string().into();
-        // TODO: Nate: We should tint the background of the block with the severity color
-        // We need to extend the theme before we can do this
+
+        let mut text_style = cx.text_style().clone();
+        text_style.color = diagnostic_style(diagnostic.severity, true, cx.theme().status());
+
         h_flex()
             .id(cx.block_id)
             .group(group_id.clone())
             .relative()
-            .pl(cx.anchor_x)
             .size_full()
-            .gap_2()
-            .child(
+            .pl(cx.gutter_width)
+            .w(cx.max_width + cx.gutter_width)
+            .child(div().flex().w(cx.anchor_x - cx.gutter_width).flex_shrink())
+            .child(div().flex().flex_shrink_0().child(
                 StyledText::new(text_without_backticks.clone()).with_highlights(
-                    &cx.text_style(),
+                    &text_style,
                     code_ranges.iter().map(|range| {
                         (
                             range.clone(),
                             HighlightStyle {
-                                color,
+                                font_weight: Some(FontWeight::BOLD),
                                 ..Default::default()
                             },
                         )
                     }),
                 ),
-            )
+            ))
             .child(
                 IconButton::new(("copy-block", cx.block_id), IconName::Copy)
                     .icon_color(Color::Muted)

crates/editor/src/element.rs

@@ -2074,6 +2074,7 @@ impl EditorElement {
                     &snapshot,
                     bounds.size.width,
                     scroll_width,
+                    text_width,
                     gutter_dimensions.padding,
                     gutter_dimensions.width,
                     em_width,
@@ -2260,6 +2261,7 @@ impl EditorElement {
         snapshot: &EditorSnapshot,
         editor_width: Pixels,
         scroll_width: Pixels,
+        text_width: Pixels,
         gutter_padding: Pixels,
         gutter_width: Pixels,
         em_width: Pixels,
@@ -2309,6 +2311,7 @@ impl EditorElement {
                         gutter_width,
                         em_width,
                         block_id,
+                        max_width: scroll_width.max(text_width),
                         view: editor_view.clone(),
                         editor_style: &self.style,
                     })