Improve error message style slightly (#8092)

### What
Before, the error style was inconsistent and ugly:

![image](https://github.com/user-attachments/assets/8ebb82ae-8e40-441e-ae1f-553a7be95028)

Now it is consistent and ever so slightly less ugly:

![image](https://github.com/user-attachments/assets/949d7efa-decf-4629-b28c-89d9b3cc756c)

We can do better though, in
* #8091

### Checklist
* [x] I have read and agree to [Contributor
Guide](https://github.com/rerun-io/rerun/blob/main/CONTRIBUTING.md) and
the [Code of
Conduct](https://github.com/rerun-io/rerun/blob/main/CODE_OF_CONDUCT.md)
* [x] I've included a screenshot or gif (if applicable)
* [x] I have tested the web demo (if applicable):
* Using examples from latest `main` build:
[rerun.io/viewer](https://rerun.io/viewer/pr/8092?manifest_url=https://app.rerun.io/version/main/examples_manifest.json)
* Using full set of examples from `nightly` build:
[rerun.io/viewer](https://rerun.io/viewer/pr/8092?manifest_url=https://app.rerun.io/version/nightly/examples_manifest.json)
* [x] The PR title and labels are set such as to maximize their
usefulness for the next release's CHANGELOG
* [x] If applicable, add a new check to the [release
checklist](https://github.com/rerun-io/rerun/blob/main/tests/python/release_checklist)!
* [x] If have noted any breaking changes to the log API in
`CHANGELOG.md` and the migration guide

- [PR Build Summary](https://build.rerun.io/pr/8092)
- [Recent benchmark results](https://build.rerun.io/graphs/crates.html)
- [Wasm size tracking](https://build.rerun.io/graphs/sizes.html)

To run all checks from `main`, comment on the PR with `@rerun-bot
full-check`.

Author: emilk

crates/viewer/re_chunk_store_ui/src/arrow_ui.rs

@@ -43,10 +43,7 @@ pub(crate) fn arrow_ui(ui: &mut egui::Ui, array: &dyn arrow2::array::Array) {
                 let mut string = String::new();
                 match display(&mut string, 0) {
                     Ok(_) => ui.monospace(&string),
-                    Err(err) => ui.error_with_details_on_hover("error").on_hover_ui(|ui| {
-                        ui.style_mut().wrap_mode = Some(egui::TextWrapMode::Wrap);
-                        ui.error_with_details_on_hover(&format!("{err}"));
-                    }),
+                    Err(err) => ui.error_with_details_on_hover(&err.to_string()),
                 };
                 return;
             } else {

crates/viewer/re_chunk_store_ui/src/chunk_ui.rs

@@ -146,9 +146,7 @@ impl ChunkUi {
                             crate::arrow_ui::arrow_ui(ui, &*data);
                         }
                         Some(Err(err)) => {
-                            ui.error_with_details_on_hover("error").on_hover_ui(|ui| {
-                                ui.label(format!("{err}"));
-                            });
+                            ui.error_with_details_on_hover(&err.to_string());
                         }
                         None => {
                             ui.weak("-");

crates/viewer/re_component_ui/src/datatype_uis/singleline_string.rs

@@ -89,7 +89,7 @@ pub fn display_text_ui(
     let text = match Text::from_arrow(data) {
         Ok(text) => text.first().cloned(),
         Err(err) => {
-            ui.error_with_details_on_hover("failed to deserialize")
+            ui.error_label("Failed to deserialize")
                 .on_hover_text(err.to_string());
             return;
         }
@@ -118,7 +118,7 @@ pub fn display_name_ui(
     let name = match Name::from_arrow(data) {
         Ok(name) => name.first().cloned(),
         Err(err) => {
-            ui.error_with_details_on_hover("failed to deserialize")
+            ui.error_label("Failed to deserialize")
                 .on_hover_text(err.to_string());
             return;
         }

crates/viewer/re_data_ui/src/video.rs

@@ -116,10 +116,11 @@ pub fn show_video_blob_info(
             // See also `MediaTypeIsNotAVideo` case above.
         }
         Err(err) => {
+            let error_message = format!("Failed to load video: {err}");
             if ui_layout.is_single_line() {
-                ui.error_with_details_on_hover(&format!("Failed to load video: {err}"));
+                ui.error_with_details_on_hover(&error_message);
             } else {
-                ui.error_label(&format!("Failed to load video: {err}"));
+                ui.error_label(&error_message);
             }
         }
     }

crates/viewer/re_selection_panel/src/visualizer_ui.rs

@@ -26,7 +26,7 @@ pub fn visualizer_ui(
         .lookup_result_by_path(entity_path)
         .cloned()
     else {
-        ui.error_with_details_on_hover("Entity not found in view.");
+        ui.error_label("Entity not found in view");
         return;
     };
     let active_visualizers: Vec<_> = data_result.visualizers.iter().sorted().copied().collect();

crates/viewer/re_space_view_dataframe/src/display_record_batch.rs

@@ -254,7 +254,7 @@ impl DisplayColumn {
                             ui.label(timeline.typ().format(timestamp, ctx.app_options.time_zone));
                         }
                         Err(err) => {
-                            ui.error_with_details_on_hover(&format!("{err}"));
+                            ui.error_with_details_on_hover(&err.to_string());
                         }
                     }
                 } else {

crates/viewer/re_space_view_spatial/src/ui.rs

@@ -7,7 +7,7 @@ use re_types::{
     archetypes::Pinhole, blueprint::components::VisualBounds2D, components::ViewCoordinates,
     image::ImageKind,
 };
-use re_ui::UiExt as _;
+use re_ui::{ContextExt as _, UiExt as _};
 use re_viewer_context::{
     HoverHighlight, SelectionHighlight, SpaceViewHighlights, SpaceViewState, ViewerContext,
 };
@@ -18,7 +18,7 @@ use crate::{
     picking::{PickableUiRect, PickingResult},
     scene_bounding_boxes::SceneBoundingBoxes,
     view_kind::SpatialSpaceViewKind,
-    visualizers::{SpatialViewVisualizerData, UiLabel, UiLabelTarget},
+    visualizers::{SpatialViewVisualizerData, UiLabel, UiLabelStyle, UiLabelTarget},
 };
 
 use super::{eye::Eye, ui_3d::View3DState};
@@ -214,13 +214,19 @@ pub fn create_labels(
         };
 
         let font_id = egui::TextStyle::Body.resolve(parent_ui.style());
+        let format = match label.style {
+            UiLabelStyle::Color(color) => egui::TextFormat::simple(font_id, color),
+            UiLabelStyle::Error => parent_ui.ctx().error_text_format(),
+        };
+        let text_color = format.color;
+
         let galley = parent_ui.fonts(|fonts| {
             fonts.layout_job({
                 egui::text::LayoutJob {
                     sections: vec![egui::text::LayoutSection {
                         leading_space: 0.0,
                         byte_range: 0..label.text.len(),
-                        format: egui::TextFormat::simple(font_id, label.color),
+                        format,
                     }],
                     text: label.text.clone(),
                     wrap: TextWrapping {
@@ -241,9 +247,9 @@ pub fn create_labels(
         let highlight = highlights
             .entity_highlight(label.labeled_instance.entity_path_hash)
             .index_highlight(label.labeled_instance.instance);
-        let fill_color = match highlight.hover {
+        let background_color = match highlight.hover {
             HoverHighlight::None => match highlight.selection {
-                SelectionHighlight::None => parent_ui.style().visuals.widgets.inactive.bg_fill,
+                SelectionHighlight::None => parent_ui.style().visuals.panel_fill,
                 SelectionHighlight::SiblingSelection => {
                     parent_ui.style().visuals.widgets.active.bg_fill
                 }
@@ -252,11 +258,11 @@ pub fn create_labels(
             HoverHighlight::Hovered => parent_ui.style().visuals.widgets.hovered.bg_fill,
         };
 
-        label_shapes.push(egui::Shape::rect_filled(bg_rect, 3.0, fill_color));
+        label_shapes.push(egui::Shape::rect_filled(bg_rect, 3.0, background_color));
         label_shapes.push(egui::Shape::galley(
             text_rect.center_top(),
             galley,
-            label.color,
+            text_color,
         ));
 
         ui_rects.push(PickableUiRect {

crates/viewer/re_space_view_spatial/src/visualizers/mod.rs

@@ -26,7 +26,7 @@ pub use depth_images::DepthImageVisualizer;
 pub use transform3d_arrows::{add_axis_arrows, AxisLengthDetector, Transform3DArrowsVisualizer};
 pub use utilities::{
     entity_iterator, process_labels_3d, textured_rect_from_image, SpatialViewVisualizerData,
-    UiLabel, UiLabelTarget,
+    UiLabel, UiLabelStyle, UiLabelTarget,
 };
 
 /// Shows a loading animation in a spatial view.

crates/viewer/re_space_view_spatial/src/visualizers/utilities/labels.rs

@@ -25,10 +25,25 @@ pub enum UiLabelTarget {
     Position3D(glam::Vec3),
 }
 
+#[derive(Clone)]
+pub enum UiLabelStyle {
+    Color(egui::Color32),
+
+    /// Style it like an error message
+    Error,
+}
+
+impl From<egui::Color32> for UiLabelStyle {
+    fn from(color: egui::Color32) -> Self {
+        Self::Color(color)
+    }
+}
+
 #[derive(Clone)]
 pub struct UiLabel {
     pub text: String,
-    pub color: egui::Color32,
+
+    pub style: UiLabelStyle,
 
     /// The shape/position being labeled.
     pub target: UiLabelTarget,
@@ -181,7 +196,7 @@ pub fn process_labels<'a, P: 'a>(
             .filter_map(move |(i, (position, label, color))| {
                 label.map(|label| UiLabel {
                     text: label,
-                    color: *color,
+                    style: (*color).into(),
                     target: target_from_position(position),
                     labeled_instance: InstancePathHash::instance(
                         entity_path,

crates/viewer/re_space_view_spatial/src/visualizers/utilities/mod.rs

@@ -6,7 +6,7 @@ mod textured_rect;
 
 pub use labels::{
     process_labels, process_labels_2d, process_labels_3d, show_labels_fallback, LabeledBatch,
-    UiLabel, UiLabelTarget,
+    UiLabel, UiLabelStyle, UiLabelTarget,
 };
 pub use proc_mesh_vis::{ProcMeshBatch, ProcMeshDrawableBuilder};
 pub use spatial_view_visualizer::SpatialViewVisualizerData;

crates/viewer/re_space_view_spatial/src/visualizers/videos.rs

@@ -30,7 +30,8 @@ use crate::{
 };
 
 use super::{
-    entity_iterator::process_archetype, SpatialViewVisualizerData, UiLabel, UiLabelTarget,
+    entity_iterator::process_archetype, SpatialViewVisualizerData, UiLabel, UiLabelStyle,
+    UiLabelTarget,
 };
 
 pub struct VideoFrameReferenceVisualizer {
@@ -365,7 +366,7 @@ impl VideoFrameReferenceVisualizer {
         );
         self.data.ui_labels.push(UiLabel {
             text: error_string,
-            color: egui::Color32::LIGHT_RED,
+            style: UiLabelStyle::Error,
             target: UiLabelTarget::Rect(label_target_rect),
             labeled_instance: re_entity_db::InstancePathHash::entity_all(entity_path),
         });

crates/viewer/re_ui/src/context_ext.rs

@@ -9,6 +9,11 @@ use crate::{DesignTokens, TopBarStyle};
 pub trait ContextExt {
     fn ctx(&self) -> &egui::Context;
 
+    // -----------------------------------------------------
+    // Style-related stuff.
+    // We could have this on a `StyleExt` trait, but we prefer to have it here on `Context`
+    // so that it is the same style everywhere (instead of being specific to the parent `ui.style`).
+
     /// Text format used for regular body.
     fn text_format_body(&self) -> egui::TextFormat {
         egui::TextFormat::simple(
@@ -56,17 +61,25 @@ pub trait ContextExt {
     #[must_use]
     fn warning_text(&self, text: impl Into<String>) -> egui::RichText {
         let style = self.ctx().style();
-        egui::RichText::new(text)
-            .italics()
-            .color(style.visuals.warn_fg_color)
+        egui::RichText::new(text).color(style.visuals.warn_fg_color)
     }
 
+    /// NOTE: duplicated in [`Self::error_text_format`]
     #[must_use]
     fn error_text(&self, text: impl Into<String>) -> egui::RichText {
         let style = self.ctx().style();
-        egui::RichText::new(text)
-            .italics()
-            .color(style.visuals.error_fg_color)
+        egui::RichText::new(text).color(style.visuals.error_fg_color)
+    }
+
+    /// NOTE: duplicated in [`Self::error_text`]
+    fn error_text_format(&self) -> egui::TextFormat {
+        let style = self.ctx().style();
+        let font_id = egui::TextStyle::Body.resolve(&style);
+        egui::TextFormat {
+            font_id,
+            color: style.visuals.error_fg_color,
+            ..Default::default()
+        }
     }
 
     fn top_bar_style(&self, style_like_web: bool) -> TopBarStyle {

crates/viewer/re_viewer_context/src/selection_state.rs

@@ -38,7 +38,7 @@ pub enum ItemSpaceContext {
 }
 
 /// Selection highlight, sorted from weakest to strongest.
-#[derive(Copy, Clone, PartialEq, Eq, PartialOrd, Ord, Default)]
+#[derive(Copy, Clone, Debug, PartialEq, Eq, PartialOrd, Ord, Default)]
 pub enum SelectionHighlight {
     /// No selection highlight at all.
     #[default]
@@ -53,7 +53,7 @@ pub enum SelectionHighlight {
 }
 
 /// Hover highlight, sorted from weakest to strongest.
-#[derive(Copy, Clone, PartialEq, Eq, PartialOrd, Ord, Default)]
+#[derive(Copy, Clone, Debug, PartialEq, Eq, PartialOrd, Ord, Default)]
 pub enum HoverHighlight {
     /// No hover highlight.
     #[default]