ListItem2.0 (part 1): introduce content-generic ListItem and `Lab…

…elContent` legacy back-port (#6161)

### What

This PR does the following:
- Introduces the fundamental content-generic `ListItem` infrastructure
(`ListItem`, `trait ListItemContent`, `list_item_scope()`.
- Introduces `LabelContent`, a `ListItemContent` implementation which
implements the exact same features as the legacy `ListItem`.
- Updates `re_ui_example` to demonstrate the use of the new list item,
including a fairly extensive clean-up of the right panel code.

<img width="411" alt="image"
src="https://github.com/rerun-io/rerun/assets/49431240/dcd960d8-2fd1-48ed-ba5b-6f36bd35c65c">
 <br/> <br/>


- Part of #6075 
- Follow-up to #6148
- Fixes #5740

### Limitation and todos

- The handling of the X coordinate range for the background highlight
needs (introduced here to part with the clip rect hack) needs splitting
of to include _all_ full-span widgets: #6156.
- The state management currently looks meaningless as state will only be
used by the future `PropertyContent`. Funnily, all the state management
currently does is what is to be split off as per above :)
- Docstrings needs more work (in particular top-level overview)
- `ListItem` + `LabelContent` should be deployed wherever we currently
use `ListItem` 1.0, which should be then entirely removed.
- And of course, we need a two-column `PropertyContent`…

### 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/6161?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/6161?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)!

- [PR Build Summary](https://build.rerun.io/pr/6161)
- [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`.

crates/re_ui/Cargo.toml

@@ -31,6 +31,7 @@ default = []
 [dependencies]
 re_entity_db.workspace = true # syntax-highlighting for InstancePath. TODO(emilk): move InstancePath
 re_format.workspace = true
+re_log.workspace = true
 re_log_types.workspace = true # syntax-highlighting for EntityPath
 
 egui_commonmark = { workspace = true, features = ["pulldown_cmark"] }
@@ -42,9 +43,8 @@ serde_json.workspace = true
 strum_macros.workspace = true
 strum.workspace = true
 sublime_fuzzy.workspace = true
+once_cell.workspace = true
 
-[dev-dependencies]
-re_log.workspace = true
 
 eframe = { workspace = true, default-features = false, features = ["wgpu"] }
 egui_tiles.workspace = true

crates/re_ui/examples/re_ui_example/drag_and_drop.rs

@@ -1,5 +1,7 @@
 use std::collections::HashSet;
 
+use re_ui::list_item2;
+
 #[derive(Hash, Clone, Copy, PartialEq, Eq)]
 struct ItemId(u32);
 
@@ -20,6 +22,9 @@ impl Default for ExampleDragAndDrop {
 }
 
 impl ExampleDragAndDrop {
+    /// Draw the drag-and-drop demo.
+    ///
+    /// Note: this function uses `ListItem` and must be wrapped in a `ListItemContent`.
     pub fn ui(&mut self, re_ui: &crate::ReUi, ui: &mut egui::Ui) {
         let mut swap: Option<(usize, usize)> = None;
 
@@ -29,11 +34,10 @@ impl ExampleDragAndDrop {
             //
 
             let label = format!("Item {}", item_id.0);
-            let response = re_ui
-                .list_item(label.as_str())
+            let response = list_item2::ListItem::new(re_ui)
                 .selected(self.selected_items.contains(item_id))
                 .draggable(true)
-                .show_flat(ui);
+                .show_flat(ui, list_item2::LabelContent::new(&label));
 
             //
             // Handle item selection

crates/re_ui/examples/re_ui_example/hierarchical_drag_and_drop.rs

@@ -2,7 +2,7 @@ use std::collections::{HashMap, HashSet};
 
 use egui::NumExt;
 
-use re_ui::ReUi;
+use re_ui::{list_item2, ReUi};
 
 #[derive(Hash, Clone, Copy, PartialEq, Eq)]
 struct ItemId(u32);
@@ -276,15 +276,19 @@ impl HierarchicalDragAndDrop {
         item_id: ItemId,
         children: &Vec<ItemId>,
     ) {
-        let response = re_ui
-            .list_item(format!("Container {item_id:?}"))
-            .subdued(true)
+        let response = list_item2::ListItem::new(re_ui)
             .selected(self.selected(item_id))
             .draggable(true)
             .drop_target_style(self.target_container == Some(item_id))
-            .show_hierarchical_with_content(ui, item_id, true, |re_ui, ui| {
-                self.container_children_ui(re_ui, ui, children);
-            });
+            .show_hierarchical_with_children(
+                ui,
+                item_id,
+                true,
+                list_item2::LabelContent::new(format!("Container {item_id:?}")).subdued(true),
+                |re_ui, ui| {
+                    self.container_children_ui(re_ui, ui, children);
+                },
+            );
 
         self.handle_interaction(
             ui,
@@ -315,11 +319,10 @@ impl HierarchicalDragAndDrop {
     }
 
     fn leaf_ui(&self, re_ui: &crate::ReUi, ui: &mut egui::Ui, item_id: ItemId, label: &str) {
-        let response = re_ui
-            .list_item(label)
+        let response = list_item2::ListItem::new(re_ui)
             .selected(self.selected(item_id))
             .draggable(true)
-            .show_hierarchical(ui);
+            .show_hierarchical(ui, list_item2::LabelContent::new(label));
 
         self.handle_interaction(ui, item_id, false, &response, None);
     }

crates/re_ui/examples/re_ui_example/main.rs

@@ -311,7 +311,19 @@ impl eframe::App for ExampleApp {
         egui::SidePanel::right("right_panel")
             .frame(panel_frame)
             .show_animated(egui_ctx, self.show_right_panel, |ui| {
-                self.right_panel.ui(&self.re_ui, ui);
+                // TODO(#6156): this is still needed for some full-span widgets
+                ui.set_clip_rect(ui.max_rect());
+
+                // define the hover/selection background highlight range for all nested `ListItem`s
+                re_ui::list_item2::list_item_scope(
+                    ui,
+                    "right_panel_list_item_scope",
+                    Some(ui.max_rect().x_range()),
+                    |ui| {
+                        ui.spacing_mut().item_spacing.y = 0.0;
+                        self.right_panel.ui(&self.re_ui, ui);
+                    },
+                );
             });
 
         egui::CentralPanel::default()
@@ -430,41 +442,6 @@ fn file_menu(ui: &mut egui::Ui, command_sender: &CommandSender) {
     UICommand::Quit.menu_button_ui(ui, command_sender);
 }
 
-fn selection_buttons(ui: &mut egui::Ui) {
-    use egui_extras::{Size, StripBuilder};
-
-    const BUTTON_SIZE: f32 = 20.0;
-    const MIN_COMBOBOX_SIZE: f32 = 100.0;
-
-    ui.horizontal(|ui| {
-        StripBuilder::new(ui)
-            .cell_layout(egui::Layout::centered_and_justified(
-                egui::Direction::TopDown, // whatever
-            ))
-            .size(Size::exact(BUTTON_SIZE)) // prev
-            .size(Size::remainder().at_least(MIN_COMBOBOX_SIZE)) // browser
-            .size(Size::exact(BUTTON_SIZE)) // next
-            .horizontal(|mut strip| {
-                strip.cell(|ui| {
-                    let _ = ui.small_button("⏴");
-                });
-
-                strip.cell(|ui| {
-                    egui::ComboBox::from_id_source("foo")
-                        .width(ui.available_width())
-                        .selected_text("ComboBox")
-                        .show_ui(ui, |ui| {
-                            ui.label("contents");
-                        });
-                });
-
-                strip.cell(|ui| {
-                    let _ = ui.small_button("⏵");
-                });
-            });
-    });
-}
-
 fn tabs_ui(ui: &mut egui::Ui, tree: &mut egui_tiles::Tree<Tab>) {
     tree.ui(&mut MyTileTreeBehavior {}, ui);
 }