Unify button handling in LabelContent, PropertyContent and SectionHeader (#11164)

### Related
* closes #6191
* closes #6203
* related to #10762 (RR-1532)

### What

Unify button handling via new `ItemButtons` struct and introduce ext
trait to unify convenience helper fns.

This changes the default behavior of the PropertyContent to only show
icon buttons on hover. In some places this may be desired (usually if
there are a lot of items with the same buttons (e.g. blueprint panel)),
sometimes not (e.g. if buttons are only on select items in a list, they
should always be visible for discoverability). We should check that this
should make sense for all property content buttons.

Author: lucasmerlin

crates/viewer/re_blueprint_tree/src/blueprint_tree.rs

@@ -8,6 +8,7 @@ use re_data_ui::item_ui::guess_instance_path_icon;
 use re_entity_db::InstancePath;
 use re_log_types::{ApplicationId, EntityPath};
 use re_ui::filter_widget::format_matching_text;
+use re_ui::list_item::ListItemContentButtonsExt as _;
 use re_ui::{
     ContextExt as _, DesignTokens, UiExt as _, drag_and_drop::DropTarget, filter_widget, list_item,
 };
@@ -300,15 +301,12 @@ impl BlueprintTree {
             .label_style(contents_name_style(&container_data.name))
             .with_icon(icon_for_container_kind(&container_data.kind))
             .with_buttons(|ui| {
-                let vis_response = visibility_button_ui(ui, parent_visible, &mut visible);
+                visibility_button_ui(ui, parent_visible, &mut visible);
 
-                let remove_response = remove_button_ui(ui, "Remove container");
-                if remove_response.clicked() {
+                if remove_button_ui(ui, "Remove container").clicked() {
                     viewport_blueprint.mark_user_interaction(ctx);
                     viewport_blueprint.remove_contents(content);
                 }
-
-                remove_response | vis_response
             });
 
         // Globally unique id - should only be one of these in view at one time.
@@ -391,15 +389,12 @@ impl BlueprintTree {
             .with_icon(class.icon())
             .subdued(!view_visible)
             .with_buttons(|ui| {
-                let vis_response = visibility_button_ui(ui, container_visible, &mut visible);
+                visibility_button_ui(ui, container_visible, &mut visible);
 
-                let response = remove_button_ui(ui, "Remove view from the viewport");
-                if response.clicked() {
+                if remove_button_ui(ui, "Remove view from the viewport").clicked() {
                     viewport_blueprint.mark_user_interaction(ctx);
                     viewport_blueprint.remove_contents(Contents::View(view_data.id));
                 }
-
-                response | vis_response
             });
 
         // Globally unique id - should only be one of these in view at one time.
@@ -518,22 +513,20 @@ impl BlueprintTree {
                         .subdued(!view_visible || !data_result_data.visible)
                         .with_buttons(|ui: &mut egui::Ui| {
                             let mut visible_after = data_result_data.visible;
-                            let vis_response =
-                                visibility_button_ui(ui, view_visible, &mut visible_after);
+                            visibility_button_ui(ui, view_visible, &mut visible_after);
                             if visible_after != data_result_data.visible {
                                 data_result_data.update_visibility(ctx, visible_after);
                             }
 
-                            let response = remove_button_ui(
+                            if remove_button_ui(
                                 ui,
                                 "Remove this entity and all its children from the view",
-                            );
-                            if response.clicked() {
+                            )
+                            .clicked()
+                            {
                                 data_result_data
                                     .remove_data_result_from_view(ctx, viewport_blueprint);
                             }
-
-                            response | vis_response
                         })
                 }
             }

crates/viewer/re_data_ui/src/item_ui.rs

@@ -9,6 +9,7 @@ use re_types::{
     archetypes::RecordingInfo,
     components::{Name, Timestamp},
 };
+use re_ui::list_item::ListItemContentButtonsExt as _;
 use re_ui::{SyntaxHighlighting as _, UiExt as _, icons, list_item};
 use re_viewer_context::{
     HoverHighlight, Item, SystemCommand, SystemCommandSender as _, UiLayout, ViewId, ViewerContext,
@@ -740,7 +741,6 @@ pub fn entity_db_button_ui(
                         store_id.clone().into(),
                     ));
             }
-            resp
         });
     }
 
@@ -812,7 +812,6 @@ pub fn table_id_button_ui(
                         table_id.clone().into(),
                     ));
             }
-            resp
         });
     }
 

crates/viewer/re_recording_panel/src/recording_panel_ui.rs

@@ -7,7 +7,7 @@ use re_data_ui::item_ui::{entity_db_button_ui, table_id_button_ui};
 use re_log_types::TableId;
 use re_redap_browser::{Command, EXAMPLES_ORIGIN, LOCAL_ORIGIN, RedapServers};
 use re_smart_channel::SmartChannelSource;
-use re_ui::list_item::{ItemButton as _, ItemMenuButton, LabelContent};
+use re_ui::list_item::{ItemMenuButton, LabelContent, ListItemContentButtonsExt as _};
 use re_ui::{UiExt as _, UiLayout, icons, list_item};
 use re_viewer_context::{
     DisplayMode, Item, RecordingOrTable, SystemCommand, SystemCommandSender as _, ViewerContext,
@@ -219,9 +219,9 @@ fn server_section_ui(
     } = server_data;
 
     let content = list_item::LabelContent::header(origin.host.to_string())
-        .always_show_buttons(true)
+        .with_always_show_buttons(true)
         .with_buttons(|ui| {
-            Box::new(ItemMenuButton::new(&icons::MORE, "Actions", move |ui| {
+            ItemMenuButton::new(&icons::MORE, "Actions", move |ui| {
                 if icons::RESET
                     .as_button_with_label(ui.tokens(), "Refresh")
                     .ui(ui)
@@ -243,8 +243,8 @@ fn server_section_ui(
                 {
                     servers.send_command(Command::RemoveServer(origin.clone()));
                 }
-            }))
-            .ui(ui)
+            })
+            .ui(ui);
         });
 
     let item_response = ui
@@ -358,8 +358,6 @@ fn dataset_entry_ui(
                         ));
                 }
             }
-
-            resp
         });
     }
 
@@ -498,7 +496,6 @@ fn app_id_section_ui(ctx: &ViewerContext<'_>, ui: &mut egui::Ui, local_app_id: &
                 ctx.command_sender()
                     .send_system(SystemCommand::CloseApp(app_id.clone()));
             }
-            resp
         });
     }
 
@@ -565,8 +562,6 @@ fn receiver_ui(
         if resp.clicked() {
             ctx.connected_receivers.remove(receiver);
         }
-
-        resp
     });
 
     if show_hierarchal {

crates/viewer/re_selection_panel/src/defaults_ui.rs

@@ -9,6 +9,7 @@ use re_data_ui::{DataUi as _, archetype_label_list_item_ui};
 use re_log_types::EntityPath;
 use re_types_core::ComponentDescriptor;
 use re_types_core::reflection::ComponentDescriptorExt as _;
+use re_ui::list_item::ListItemContentButtonsExt as _;
 use re_ui::{SyntaxHighlighting as _, UiExt as _, list_item::LabelContent};
 use re_viewer_context::{
     ComponentUiTypes, QueryContext, SystemCommand, SystemCommandSender as _, UiLayout, ViewContext,
@@ -90,8 +91,8 @@ Click on the `+` button to add a new default value.";
         active_default_ui(ctx, ui, &active_defaults, view, query, db);
     };
     ui.section_collapsing_header("Component defaults")
-        .button(add_button)
-        .help_markdown(markdown)
+        .with_button(add_button)
+        .with_help_markdown(markdown)
         .show(ui, body);
 }
 
@@ -146,7 +147,7 @@ fn active_default_ui(
             let response = ui.list_item_flat_noninteractive(
                 re_ui::list_item::PropertyContent::new(component_descr.archetype_field_name())
                     .min_desired_width(150.0)
-                    .action_button(&re_ui::icons::CLOSE, "Clear blueprint component", || {
+                    .with_action_button(&re_ui::icons::CLOSE, "Clear blueprint component", || {
                         ctx.clear_blueprint_component(
                             view.defaults_path.clone(),
                             component_descr.clone(),

crates/viewer/re_selection_panel/src/selection_panel.rs

@@ -9,6 +9,7 @@ use re_data_ui::{
 use re_entity_db::{EntityPath, InstancePath};
 use re_log_types::{ComponentPath, EntityPathFilter, EntityPathSubs, ResolvedEntityPathFilter};
 use re_types::ComponentDescriptor;
+use re_ui::list_item::ListItemContentButtonsExt as _;
 use re_ui::{
     SyntaxHighlighting as _, UiExt as _, icons,
     list_item::{self, PropertyContent},
@@ -428,7 +429,7 @@ The last rule matching `/world/house` is `+ /world/**`, so it is included.
 
         if let Some(view) = viewport.view(view_id) {
             ui.section_collapsing_header("Entity path filter")
-                .button(
+                .with_button(
                     list_item::ItemActionButton::new(
                         &re_ui::icons::EDIT,
                         "Add new entity…",
@@ -438,7 +439,7 @@ The last rule matching `/world/house` is `+ /world/**`, so it is included.
                     )
                     .hover_text("Modify the entity query using the editor"),
                 )
-                .help_markdown(markdown)
+                .with_help_markdown(markdown)
                 .show(ui, |ui| {
                     // TODO(#6075): Because `list_item_scope` changes it. Temporary until everything is `ListItem`.
                     ui.spacing_mut().item_spacing.y = ui.ctx().style().spacing.item_spacing.y;
@@ -710,7 +711,7 @@ fn container_children(
     };
 
     ui.section_collapsing_header("Contents")
-        .button(
+        .with_button(
             list_item::ItemActionButton::new(&re_ui::icons::ADD, "Add to container", || {
                 show_add_view_or_container_modal(*container_id);
             })
@@ -999,8 +1000,6 @@ fn show_list_item_for_container_child(
                         if response.clicked() {
                             remove_contents = true;
                         }
-
-                        response
                     }),
             )
         }
@@ -1025,8 +1024,6 @@ fn show_list_item_for_container_child(
                         if response.clicked() {
                             remove_contents = true;
                         }
-
-                        response
                     }),
             )
         }

crates/viewer/re_selection_panel/src/visible_time_range_ui.rs

@@ -7,6 +7,7 @@ use re_types::{
     blueprint::{archetypes as blueprint_archetypes, components::VisibleTimeRange},
     datatypes::{TimeInt, TimeRange, TimeRangeBoundary},
 };
+use re_ui::list_item::ListItemContentButtonsExt as _;
 use re_ui::{TimeDragValue, UiExt as _};
 use re_viewer_context::{QueryRange, ViewClass, ViewState, ViewerContext};
 use re_viewport_blueprint::{ViewBlueprint, entity_path_for_view_property};
@@ -173,7 +174,7 @@ Notes:
     let collapsing_response = ui
         .section_collapsing_header("Visible time range")
         .default_open(true)
-        .help_markdown(markdown)
+        .with_help_markdown(markdown)
         .show(ui, |ui| {
             ui.horizontal(|ui| {
                 ui.re_radio_value(has_individual_time_range, false, "Default")

crates/viewer/re_selection_panel/src/visualizer_ui.rs

@@ -8,6 +8,7 @@ use re_log_types::{ComponentPath, EntityPath};
 use re_types::blueprint::archetypes::VisualizerOverrides;
 use re_types::{ComponentDescriptor, reflection::ComponentDescriptorExt as _};
 use re_types_core::external::arrow::array::ArrayRef;
+use re_ui::list_item::ListItemContentButtonsExt as _;
 use re_ui::{UiExt as _, design_tokens_of_visuals, list_item};
 use re_view::latest_at_with_blueprint_resolved_data;
 use re_viewer_context::{
@@ -74,8 +75,8 @@ in the blueprint or in the UI by selecting the view.
 specific to the visualizer and the current view type.";
 
     ui.section_collapsing_header("Visualizers")
-        .button(button)
-        .help_markdown(markdown)
+        .with_button(button)
+        .with_help_markdown(markdown)
         .show(ui, |ui| {
             visualizer_ui_impl(ctx, ui, &data_result, &active_visualizers, &all_visualizers);
         });
@@ -129,17 +130,21 @@ pub fn visualizer_ui_impl(
                             ),
                         )
                         .min_desired_width(150.0)
-                        .with_buttons(|ui| remove_visualizer_button(ui, visualizer_id))
-                        .always_show_buttons(true),
+                        .with_buttons(|ui| {
+                            remove_visualizer_button(ui, visualizer_id);
+                        })
+                        .with_always_show_buttons(true),
                     );
                 visualizer_components(ctx, ui, data_result, visualizer);
             } else {
                 ui.list_item_flat_noninteractive(
                     list_item::LabelContent::new(format!("{visualizer_id} (unknown visualizer)"))
                         .weak(true)
                         .min_desired_width(150.0)
-                        .with_buttons(|ui| remove_visualizer_button(ui, visualizer_id))
-                        .always_show_buttons(true),
+                        .with_buttons(|ui| {
+                            remove_visualizer_button(ui, visualizer_id);
+                        })
+                        .with_always_show_buttons(true),
                 );
             }
         }
@@ -406,22 +411,21 @@ fn visualizer_components(
                 )
                 .value_fn(value_fn)
                 .show_only_when_collapsed(false)
-                .menu_button(
-                    &re_ui::icons::MORE,
-                    "More options",
-                    |ui: &mut egui::Ui| {
-                        menu_more(
-                            ctx,
-                            ui,
-                            component_descr.clone(),
-                            override_path,
-                            &raw_override.clone().map(|(_, raw_override)| raw_override),
-                            raw_default.clone().map(|(_, raw_override)| raw_override),
-                            raw_fallback.clone(),
-                            raw_current_value.clone(),
-                        );
-                    },
-                ),
+                .with_menu_button(&re_ui::icons::MORE, "More options", |ui: &mut egui::Ui| {
+                    menu_more(
+                        ctx,
+                        ui,
+                        component_descr.clone(),
+                        override_path,
+                        &raw_override.clone().map(|(_, raw_override)| raw_override),
+                        raw_default.clone().map(|(_, raw_override)| raw_override),
+                        raw_fallback.clone(),
+                        raw_current_value.clone(),
+                    );
+                })
+                // TODO(emilk/egui#7531): Ideally we would hide the button unless hovered, but this
+                // currently breaks the menu.
+                .with_always_show_buttons(true),
                 add_children,
             )
             .item_response;
@@ -460,7 +464,7 @@ fn editable_blueprint_component_list_item(
                     allow_multiline,
                 );
             })
-            .action_button(&re_ui::icons::CLOSE, "Clear blueprint component", || {
+            .with_action_button(&re_ui::icons::CLOSE, "Clear blueprint component", || {
                 query_ctx
                     .viewer_ctx()
                     .clear_blueprint_component(blueprint_path, component_descr.clone());

crates/viewer/re_ui/examples/re_ui_example/main.rs

@@ -3,6 +3,7 @@ mod hierarchical_drag_and_drop;
 mod right_panel;
 
 use egui::{Modifiers, os};
+use re_ui::list_item::ListItemContentButtonsExt as _;
 use re_ui::{
     CommandPalette, CommandPaletteAction, CommandPaletteUrl, ContextExt as _, DesignTokens, Help,
     IconText, UICommand, UICommandSender, UiExt as _,
@@ -250,7 +251,7 @@ impl eframe::App for ExampleApp {
             // ---
 
             ui.section_collapsing_header("Data")
-                .button(list_item::ItemMenuButton::new(
+                .with_button(list_item::ItemMenuButton::new(
                     &re_ui::icons::ADD,
                     "Add",
                     |ui| {