From 033726cf8713829ea5d5626e9bf86044c1dacd04 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Mon, 6 Jan 2025 11:58:12 -0300 Subject: [PATCH] Improve diagnostics multibuffer design (#22705) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Namely, just removing the unnecessary extra line dividers and adding a super subtle background color to the diagnostic message to create a bit of separation/hierarchy. Screenshot 2025-01-04 at 9 46 03 PM Release Notes: - N/A --- crates/diagnostics/src/diagnostics.rs | 103 ++++++++++++-------------- 1 file changed, 46 insertions(+), 57 deletions(-) diff --git a/crates/diagnostics/src/diagnostics.rs b/crates/diagnostics/src/diagnostics.rs index cb6160e6591edd..4e76da63b6ad3a 100644 --- a/crates/diagnostics/src/diagnostics.rs +++ b/crates/diagnostics/src/diagnostics.rs @@ -841,72 +841,61 @@ fn diagnostic_header_renderer(diagnostic: Diagnostic) -> RenderBlock { h_flex() .id(DIAGNOSTIC_HEADER) + .block_mouse_down() + .h(2. * cx.line_height()) .w_full() - .relative() - .child( - div() - .top(px(0.)) - .absolute() - .w_full() - .h_px() - .bg(color.border_variant), - ) + .px_9() + .justify_between() + .gap_2() .child( h_flex() - .block_mouse_down() - .h(2. * cx.line_height()) - .pl_10() - .pr_5() - .w_full() - .justify_between() .gap_2() + .px_1() + .rounded_md() + .bg(color.surface_background.opacity(0.5)) + .map(|stack| { + stack.child( + svg() + .size(cx.text_style().font_size) + .flex_none() + .map(|icon| { + if diagnostic.severity == DiagnosticSeverity::ERROR { + icon.path(IconName::XCircle.path()) + .text_color(Color::Error.color(cx)) + } else { + icon.path(IconName::Warning.path()) + .text_color(Color::Warning.color(cx)) + } + }), + ) + }) .child( h_flex() - .gap_3() - .map(|stack| { - stack.child(svg().size(cx.text_style().font_size).flex_none().map( - |icon| { - if diagnostic.severity == DiagnosticSeverity::ERROR { - icon.path(IconName::XCircle.path()) - .text_color(Color::Error.color(cx)) - } else { - icon.path(IconName::Warning.path()) - .text_color(Color::Warning.color(cx)) - } - }, - )) - }) + .gap_1() .child( - h_flex() - .gap_1() - .child( - StyledText::new(message.clone()).with_highlights( - &cx.text_style(), - code_ranges - .iter() - .map(|range| (range.clone(), highlight_style)), - ), - ) - .when_some(diagnostic.code.as_ref(), |stack, code| { - stack.child( - div() - .child(SharedString::from(format!("({code})"))) - .text_color(cx.theme().colors().text_muted), - ) - }), - ), - ) - .child(h_flex().gap_1().when_some( - diagnostic.source.as_ref(), - |stack, source| { - stack.child( - div() - .child(SharedString::from(source.clone())) - .text_color(cx.theme().colors().text_muted), + StyledText::new(message.clone()).with_highlights( + &cx.text_style(), + code_ranges + .iter() + .map(|range| (range.clone(), highlight_style)), + ), ) - }, - )), + .when_some(diagnostic.code.as_ref(), |stack, code| { + stack.child( + div() + .child(SharedString::from(format!("({code})"))) + .text_color(color.text_muted), + ) + }), + ), ) + .when_some(diagnostic.source.as_ref(), |stack, source| { + stack.child( + div() + .child(SharedString::from(source.clone())) + .text_color(color.text_muted), + ) + }) .into_any_element() }) }