Messaging · GIF picker: a GIF focused past the fold scrolls into view

Each GIF holds its own focus handle, and a canvas around it, ring and
all, sets the results box's offset once per focus from its painted
bounds. layout::bring_into_view now works along either axis; the data
table's header and the video timeline pass their sideways one.

src/messaging/gifs.rs

@@ -1,17 +1,17 @@
 use std::rc::Rc;
 
 use gpui::{
-    App, Context, ElementId, Entity, ImageSource, InteractiveElement, IntoElement, MouseButton,
-    ParentElement, RenderOnce, SharedString, StatefulInteractiveElement, Styled, Subscription,
-    Window, div, prelude::*, rems,
+    App, Axis, Context, ElementId, Entity, FocusHandle, ImageSource, InteractiveElement,
+    IntoElement, MouseButton, ParentElement, RenderOnce, ScrollHandle, SharedString,
+    StatefulInteractiveElement, Styled, Subscription, Window, canvas, div, prelude::*, rems,
 };
 
 use crate::{
     buttons::{Button, ButtonVariant},
     forms::{Input, InputEvent, OnValue, TextInput},
-    layout::{Masonry, on_axis},
+    layout::{Masonry, bring_into_view, on_axis},
     motion::Skeleton,
-    primitives::{FocusRing, Icon, IconName, Image, Tooltip, checked_ratio, framed},
+    primitives::{FocusRing, Icon, IconName, Image, Tooltip, checked_ratio, framed, tab_stop},
     theme::{ActiveTheme, ControlSize, IconSize, Radius, TextSize},
 };
 
@@ -147,6 +147,26 @@ impl RenderOnce for GifPicker {
         search.update(cx, |search, _| search.on_query = self.on_query.clone());
         let input = search.read(cx).input.clone();
         let empty = input.read(cx).text().trim().is_empty();
+        let scroll = window
+            .use_keyed_state((self.id.clone(), "scroll"), cx, |_, _| ScrollHandle::new())
+            .read(cx)
+            .clone();
+        let revealed =
+            window.use_keyed_state(
+                (self.id.clone(), "revealed"),
+                cx,
+                |_, _| None::<SharedString>,
+            );
+        let focuses: Vec<FocusHandle> = match &self.gifs {
+            Gifs::Loading => Vec::new(),
+            Gifs::Found(found) => found
+                .iter()
+                .map(|gif| {
+                    let id = (self.id.clone(), format!("gif-focus-{}", gif.key)).into();
+                    tab_stop(id, true, window, cx)
+                })
+                .collect(),
+        };
         let theme = cx.theme();
         let colors = &theme.colors;
         let round = theme.radius(Radius::Md);
@@ -186,15 +206,46 @@ impl RenderOnce for GifPicker {
                 .collect(),
             Gifs::Found(found) => found
                 .into_iter()
-                .map(|gif| {
+                .zip(focuses)
+                .map(|(gif, focus)| {
                     let (key, on_pick, owner) =
                         (gif.key.clone(), self.on_pick.clone(), self.id.clone());
-                    div()
+                    let (shown, revealed, scroll) =
+                        (gif.key.clone(), revealed.clone(), scroll.clone());
+                    let reveal = canvas(
+                        {
+                            let focus = focus.clone();
+                            move |bounds, window, cx| {
+                                let focused = focus.is_focused(window);
+                                let held = revealed.read(cx).as_ref() == Some(&shown);
+                                if focused && !held {
+                                    revealed
+                                        .update(cx, |revealed, _| *revealed = Some(shown.clone()));
+                                    if bring_into_view(&scroll, bounds, Axis::Vertical) {
+                                        log::info!("gif picker: {shown} scrolled into view");
+                                        window.request_animation_frame();
+                                    }
+                                } else if !focused && held {
+                                    revealed.update(cx, |revealed, _| *revealed = None);
+                                }
+                            }
+                        },
+                        |_, _, _, _| {},
+                    )
+                    .absolute()
+                    .top_0()
+                    .left_0()
+                    .size_full();
+                    let tile = div()
                         .id((self.id.clone(), format!("gif-{}", gif.key)))
+                        .debug_selector({
+                            let key = gif.key.clone();
+                            move || format!("gif {key}")
+                        })
                         .rounded(round)
                         .border_1()
                         .border_color(gpui::transparent_black())
-                        .tab_index(0)
+                        .track_focus(&focus)
                         .focus_ring(cx)
                         .cursor_pointer()
                         .tooltip(Tooltip::text(gif.title.clone()))
@@ -214,7 +265,11 @@ impl RenderOnce for GifPicker {
                                 .size_full()
                                 .rounded(round),
                             ),
-                        )
+                        );
+                    div()
+                        .relative()
+                        .child(tile)
+                        .child(reveal)
                         .into_any_element()
                 })
                 .collect(),
@@ -256,6 +311,8 @@ impl RenderOnce for GifPicker {
                 on_axis(
                     div()
                         .id((self.id.clone(), "results"))
+                        .debug_selector(|| "gif-results".into())
+                        .track_scroll(&scroll)
                         .max_h(theme.list_max_height())
                         .overflow_y_scroll(),
                 )

src/messaging/tests/pickers.rs

@@ -180,6 +180,23 @@ fn a_gif_is_a_tab_stop_that_space_picks(cx: &mut TestAppContext) {
     assert_eq!(heard(&host, cx), ["pick b"]);
 }
 
+#[gpui::test]
+fn a_gif_past_the_fold_comes_into_view_when_focused(cx: &mut TestAppContext) {
+    let keys = [
+        "g0", "g1", "g2", "g3", "g4", "g5", "g6", "g7", "g8", "g9", "g10", "g11",
+    ];
+    let (_, cx) = gifing(Gifs::Found(keys.iter().map(|key| gif(key)).collect()), cx);
+    tab_to(15, cx);
+    let (tile, results) = (
+        cx.debug_bounds("gif g11").expect("the last GIF draws"),
+        cx.debug_bounds("gif-results").expect("the results draw"),
+    );
+    assert!(
+        tile.top() >= results.top() && tile.bottom() <= results.bottom(),
+        "{tile:?} inside {results:?}"
+    );
+}
+
 #[gpui::test]
 fn nothing_found_says_so(cx: &mut TestAppContext) {
     let (_, cx) = gifing(Gifs::Found(Vec::new()), cx);