T08a menus: menu, items, groups, separators, submenus, check and radio rows, key hints, icons; dropdown, split, overflow and context hosts; overlays pick on key release

src/buttons/button.rs

@@ -225,7 +225,7 @@ impl RenderOnce for Button {
             .bg(tone.bg)
             .when(self.full_width, |el| el.w_full())
             .when_some(self.icon, |el, name| el.child(icon(name)))
-            .child(self.label)
+            .when(!self.label.is_empty(), |el| el.child(self.label))
             .when_some(self.trailing_icon, |el, name| el.child(icon(name)))
             .when_some(hint, |el, hint| {
                 el.child(

src/lib.rs

@@ -3,6 +3,7 @@ mod assets;
 pub mod buttons;
 pub mod forms;
 pub mod layout;
+pub mod menus;
 pub mod motion;
 pub mod navigation;
 pub mod primitives;

src/menus/hosts.rs

@@ -0,0 +1,225 @@
+use std::rc::Rc;
+
+use gpui::{
+    AnyElement, App, ClickEvent, Div, ElementId, Entity, InteractiveElement, IntoElement,
+    MouseButton, ParentElement, RenderOnce, SharedString, Stateful, Styled, Window, div,
+    prelude::*,
+};
+use smallvec::SmallVec;
+
+use super::{
+    menu::{Open, Spot, hang, measure_host},
+    model::Menu,
+};
+use crate::{
+    buttons::{Button, ButtonGroup, ButtonVariant, IconButton},
+    primitives::IconName,
+};
+
+type Click = Rc<dyn Fn(&ClickEvent, &mut Window, &mut App)>;
+
+fn state(id: &ElementId, window: &mut Window, cx: &mut App) -> Entity<Open> {
+    window.use_keyed_state((id.clone(), "menu"), cx, |_, _| Open::default())
+}
+
+/// Toggles the menu under the host; a keyboard press marks its first row.
+fn toggle(state: &Entity<Open>, menu: &Menu, cx: &App) -> Click {
+    let (state, menu, open) = (state.clone(), menu.clone(), state.read(cx).is_open());
+    Rc::new(move |event, window, cx| {
+        if open {
+            Open::close(&state, window, cx);
+        } else {
+            Open::show(&state, &menu, Spot::Under, event.is_keyboard(), cx);
+        }
+    })
+}
+
+/// A trigger, the canvas that measures it, and its menu while open.
+fn host(
+    id: ElementId,
+    trigger: impl IntoElement,
+    menu: &Menu,
+    state: &Entity<Open>,
+    window: &mut Window,
+    cx: &mut App,
+) -> Stateful<Div> {
+    div()
+        .id(id.clone())
+        .relative()
+        .flex_none()
+        .child(trigger)
+        .child(measure_host(state.clone()))
+        .children(hang(&id, menu, state, window, cx))
+}
+
+/// A button that opens a menu under it.
+#[derive(IntoElement)]
+pub struct DropdownMenu {
+    id: ElementId,
+    label: SharedString,
+    icon: Option<IconName>,
+    variant: ButtonVariant,
+    menu: Menu,
+}
+
+impl DropdownMenu {
+    pub fn new(id: impl Into<ElementId>, label: impl Into<SharedString>, menu: Menu) -> Self {
+        Self {
+            id: id.into(),
+            label: label.into(),
+            icon: None,
+            variant: ButtonVariant::Secondary,
+            menu,
+        }
+    }
+
+    pub fn icon(mut self, icon: IconName) -> Self {
+        self.icon = Some(icon);
+        self
+    }
+
+    pub fn variant(mut self, variant: ButtonVariant) -> Self {
+        self.variant = variant;
+        self
+    }
+}
+
+impl RenderOnce for DropdownMenu {
+    fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
+        let state = state(&self.id, window, cx);
+        let click = toggle(&state, &self.menu, cx);
+        let button = Button::new((self.id.clone(), "button"), self.label)
+            .variant(self.variant)
+            .trailing_icon(IconName::ChevronDown)
+            .when_some(self.icon, |button, icon| button.icon(icon))
+            .on_click(move |event, window, cx| click(event, window, cx));
+        host(self.id, button, &self.menu, &state, window, cx)
+    }
+}
+
+/// An icon button that opens a menu of what did not fit.
+#[derive(IntoElement)]
+pub struct OverflowMenu {
+    id: ElementId,
+    menu: Menu,
+}
+
+impl OverflowMenu {
+    pub fn new(id: impl Into<ElementId>, menu: Menu) -> Self {
+        Self {
+            id: id.into(),
+            menu,
+        }
+    }
+}
+
+impl RenderOnce for OverflowMenu {
+    fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
+        let state = state(&self.id, window, cx);
+        let click = toggle(&state, &self.menu, cx);
+        let button = IconButton::new((self.id.clone(), "button"), IconName::Ellipsis)
+            .variant(ButtonVariant::Ghost)
+            .tooltip("More")
+            .on_click(move |event, window, cx| click(event, window, cx));
+        host(self.id, button, &self.menu, &state, window, cx)
+    }
+}
+
+/// A button's main action, and related ones in a menu under its arrow.
+#[derive(IntoElement)]
+pub struct SplitButton {
+    id: ElementId,
+    label: SharedString,
+    variant: ButtonVariant,
+    menu: Menu,
+    on_click: Option<Click>,
+}
+
+impl SplitButton {
+    pub fn new(id: impl Into<ElementId>, label: impl Into<SharedString>, menu: Menu) -> Self {
+        Self {
+            id: id.into(),
+            label: label.into(),
+            variant: ButtonVariant::Secondary,
+            menu,
+            on_click: None,
+        }
+    }
+
+    pub fn variant(mut self, variant: ButtonVariant) -> Self {
+        self.variant = variant;
+        self
+    }
+
+    /// The main action.
+    pub fn on_click(
+        mut self,
+        handler: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static,
+    ) -> Self {
+        self.on_click = Some(Rc::new(handler));
+        self
+    }
+}
+
+impl RenderOnce for SplitButton {
+    fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
+        let state = state(&self.id, window, cx);
+        let click = toggle(&state, &self.menu, cx);
+        let main = Button::new((self.id.clone(), "main"), self.label)
+            .variant(self.variant)
+            .when_some(self.on_click, |button, run| {
+                button.on_click(move |event, window, cx| run(event, window, cx))
+            });
+        let more = Button::new((self.id.clone(), "more"), "")
+            .variant(self.variant)
+            .icon(IconName::ChevronDown)
+            .on_click(move |event, window, cx| click(event, window, cx));
+        host(
+            self.id,
+            ButtonGroup::new().button(main).button(more),
+            &self.menu,
+            &state,
+            window,
+            cx,
+        )
+    }
+}
+
+/// Its children, and a menu that opens at the pointer on a right click.
+#[derive(IntoElement)]
+pub struct ContextMenu {
+    id: ElementId,
+    menu: Menu,
+    children: SmallVec<[AnyElement; 2]>,
+}
+
+impl ContextMenu {
+    pub fn new(id: impl Into<ElementId>, menu: Menu) -> Self {
+        Self {
+            id: id.into(),
+            menu,
+            children: SmallVec::new(),
+        }
+    }
+}
+
+impl ParentElement for ContextMenu {
+    fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
+        self.children.extend(elements);
+    }
+}
+
+impl RenderOnce for ContextMenu {
+    fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
+        let state = state(&self.id, window, cx);
+        let (open, menu) = (state.clone(), self.menu.clone());
+        div()
+            .id(self.id.clone())
+            .on_mouse_down(MouseButton::Right, move |event, _, cx| {
+                log::info!("context menu: at {:?}", event.position);
+                Open::show(&open, &menu, Spot::At(event.position), false, cx);
+            })
+            .children(self.children)
+            .children(hang(&self.id, &self.menu, &state, window, cx))
+    }
+}

src/menus/menu.rs

@@ -0,0 +1,484 @@
+use std::rc::Rc;
+
+use gpui::{
+    Animation, AnimationExt, AnyElement, App, Bounds, Div, ElementId, Entity, FontWeight,
+    InteractiveElement, IntoElement, MouseButton, ParentElement, Pixels, Point, Stateful, Styled,
+    Window, anchored, canvas, deferred, div, prelude::*,
+};
+
+use super::model::{Entry, Kind, Menu, MenuItem};
+use crate::{
+    forms::{Run, float, surface},
+    motion,
+    primitives::{Icon, IconName, Takeover, give_back, take_focus},
+    theme::{ActiveTheme, ControlSize, IconSize, Radius, TextSize},
+    typography::KbdCombo,
+};
+
+/// The menu open at `depth`, following the marked rows above it; `None` once those rows changed.
+fn at_depth<'a>(menu: &'a Menu, levels: &[Level], depth: usize) -> Option<&'a Menu> {
+    levels.get(..depth)?.iter().try_fold(menu, |menu, level| {
+        match level
+            .at
+            .and_then(|ix| menu.item_at(ix))
+            .map(|item| &item.kind)
+        {
+            Some(Kind::Sub(sub)) => Some(sub),
+            _ => None,
+        }
+    })
+}
+
+/// Fits open levels to the menu as it is now: a mark on a row gone or disabled clears, and levels under a row that no longer opens them close.
+fn settle(menu: &Menu, levels: &mut Vec<Level>) {
+    let mut here = menu;
+    for depth in 0..levels.len() {
+        let at = levels[depth]
+            .at
+            .filter(|&ix| here.item_at(ix).is_some_and(|item| !item.disabled));
+        levels[depth].at = at;
+        match at.and_then(|ix| here.item_at(ix)).map(|item| &item.kind) {
+            Some(Kind::Sub(sub)) if depth + 1 < levels.len() => here = sub,
+            _ => {
+                levels.truncate(depth + 1);
+                return;
+            }
+        }
+    }
+}
+
+/// One open level: its marked row, that row's box and its panel's box.
+#[derive(Clone, Copy, Debug, Default, PartialEq)]
+struct Level {
+    at: Option<usize>,
+    row: Bounds<Pixels>,
+    panel: Bounds<Pixels>,
+}
+
+/// Where an open menu hangs: under its host's box, or at a point.
+#[derive(Clone, Copy, Debug, PartialEq)]
+pub(crate) enum Spot {
+    Under,
+    At(Point<Pixels>),
+}
+
+/// A host's menu: where it hangs, its open levels root first, the host's box, and the focus to hand back.
+#[derive(Default)]
+pub(crate) struct Open {
+    spot: Option<Spot>,
+    levels: Vec<Level>,
+    anchor: Bounds<Pixels>,
+    takeover: Option<Entity<Takeover>>,
+}
+
+impl Open {
+    pub(crate) fn is_open(&self) -> bool {
+        self.spot.is_some()
+    }
+
+    /// Opens at `spot`, with the first row marked when `marked`.
+    pub(crate) fn show(state: &Entity<Open>, menu: &Menu, spot: Spot, marked: bool, cx: &mut App) {
+        let first = menu.step(None, 1).filter(|_| marked);
+        state.update(cx, |open, cx| {
+            open.spot = Some(spot);
+            open.levels = vec![Level {
+                at: first,
+                ..Level::default()
+            }];
+            cx.notify();
+        });
+    }
+
+    /// Closes and hands focus back to whatever held it before the menu opened.
+    pub(crate) fn close(state: &Entity<Open>, window: &mut Window, cx: &mut App) {
+        let takeover = state.update(cx, |open, cx| {
+            open.spot = None;
+            open.levels.clear();
+            cx.notify();
+            open.takeover.take()
+        });
+        if let Some(takeover) = takeover {
+            give_back(&takeover, window, cx);
+        }
+    }
+}
+
+/// Marks row `at` of level `depth` and drops deeper levels; a submenu row opens when `open_sub`.
+fn mark(state: &Entity<Open>, menu: &Menu, depth: usize, at: usize, open_sub: bool, cx: &mut App) {
+    state.update(cx, |open, cx| {
+        let Some(here) = at_depth(menu, &open.levels, depth) else {
+            return;
+        };
+        let sub = matches!(here.item_at(at).map(|item| &item.kind), Some(Kind::Sub(_)));
+        open.levels.truncate(depth + 1);
+        if open.levels[depth].at != Some(at) {
+            open.levels[depth].at = Some(at);
+            open.levels[depth].row = Bounds::default();
+        }
+        if open_sub && sub {
+            open.levels.push(Level::default());
+        }
+        cx.notify();
+    });
+}
+
+/// Runs a row. A submenu opens with its first row marked; anything else closes the menu first.
+fn choose(
+    state: &Entity<Open>,
+    menu: &Menu,
+    depth: usize,
+    at: usize,
+    close: &Run,
+    window: &mut Window,
+    cx: &mut App,
+) {
+    let levels = &state.read(cx).levels;
+    let Some(item) = at_depth(menu, levels, depth)
+        .filter(|_| levels.len() > depth)
+        .and_then(|here| here.item_at(at))
+        .cloned()
+    else {
+        log::debug!("menu: a press from an older frame found row {at} of level {depth} gone");
+        return;
+    };
+    if item.disabled {
+        return;
+    }
+    if let Kind::Sub(sub) = &item.kind {
+        let first = sub.step(None, 1);
+        mark(state, menu, depth, at, false, cx);
+        state.update(cx, |open, cx| {
+            open.levels.push(Level {
+                at: first,
+                ..Level::default()
+            });
+            cx.notify();
+        });
+        return;
+    }
+    log::info!("menu: {}", item.label);
+    close(window, cx);
+    if let Some(on_click) = &item.on_click {
+        on_click(window, cx);
+    }
+}
+
+/// Arrows walk the deepest level; Right opens a submenu; Enter and Space choose; Left and Escape back out.
+fn keys(
+    menu: &Menu,
+    state: &Entity<Open>,
+    key: &str,
+    close: &Run,
+    window: &mut Window,
+    cx: &mut App,
+) -> bool {
+    let levels = state.read(cx).levels.clone();
+    let Some(depth) = levels.len().checked_sub(1) else {
+        return false;
+    };
+    let Some(here) = at_depth(menu, &levels, depth) else {
+        return false;
+    };
+    let at = levels[depth].at;
+    let sub = at
+        .and_then(|at| here.item_at(at))
+        .is_some_and(|item| matches!(item.kind, Kind::Sub(_)));
+    match (key, at) {
+        ("down" | "up", _) => {
+            let by = if key == "down" { 1 } else { -1 };
+            if let Some(to) = here.step(at, by) {
+                mark(state, menu, depth, to, false, cx);
+            }
+        }
+        ("right", Some(at)) if sub => choose(state, menu, depth, at, close, window, cx),
+        ("enter" | "space", Some(at)) => choose(state, menu, depth, at, close, window, cx),
+        ("left" | "escape", _) if depth > 0 => state.update(cx, |open, cx| {
+            open.levels.pop();
+            cx.notify();
+        }),
+        ("escape", _) => close(window, cx),
+        _ => return false,
+    }
+    true
+}
+
+/// Records a box into the host's state: the host's own, a marked row's or a panel's.
+fn measure(
+    state: Entity<Open>,
+    write: impl Fn(&mut Open, Bounds<Pixels>) -> bool + 'static,
+) -> impl IntoElement {
+    canvas(
+        move |bounds, _, cx| {
+            if state.update(cx, |open, _| write(open, bounds)) {
+                state.update(cx, |_, cx| cx.notify());
+            }
+        },
+        |_, _, _, _| {},
+    )
+    .absolute()
+    .top_0()
+    .left_0()
+    .size_full()
+}
+
+/// Measures the host's box, which a dropdown hangs under.
+pub(crate) fn measure_host(state: Entity<Open>) -> impl IntoElement {
+    measure(state, |open, bounds| {
+        let changed = open.anchor != bounds;
+        open.anchor = bounds;
+        changed
+    })
+}
+
+fn row(item: &MenuItem, ix: usize, marked: bool, cx: &App) -> Stateful<Div> {
+    let theme = cx.theme();
+    let colors = &theme.colors;
+    let fg = if item.disabled {
+        colors.fg_disabled
+    } else {
+        colors.fg
+    };
+    let (lead, lead_color) = match &item.kind {
+        Kind::Check(true) => (Some(IconName::Check), fg),
+        Kind::Radio(true) => (Some(IconName::Dot), fg),
+        _ => (item.icon, if item.disabled { fg } else { colors.fg_muted }),
+    };
+    div()
+        .id(("row", ix))
+        .relative()
+        .flex()
+        .items_center()
+        .gap_2()
+        .h(theme.control_height(ControlSize::Md))
+        .px_2()
+        .rounded(theme.radius(Radius::Md))
+        .text_color(fg)
+        .when(marked && !item.disabled, |row| row.bg(colors.hover))
+        .when(!item.disabled, |row| row.cursor_pointer())
+        .child(
+            div()
+                .flex()
+                .flex_none()
+                .items_center()
+                .justify_center()
+                .size(theme.icon_size(IconSize::Sm))
+                .when_some(lead, |slot, icon| {
+                    slot.child(Icon::new(icon).size(IconSize::Sm).color(lead_color))
+                }),
+        )
+        .child(
+            div()
+                .flex_1()
+                .min_w_0()
+                .overflow_hidden()
+                .text_ellipsis()
+                .whitespace_nowrap()
+                .child(item.label.clone()),
+        )
+        .when_some(item.keys.clone(), |row, keys| {
+            row.child(
+                div()
+                    .flex_none()
+                    .pl_4()
+                    .text_color(colors.fg_subtle)
+                    .child(KbdCombo::new(&keys)),
+            )
+        })
+        .when(matches!(item.kind, Kind::Sub(_)), |row| {
+            row.child(
+                Icon::new(IconName::ChevronRight)
+                    .size(IconSize::Xs)
+                    .color(colors.fg_subtle),
+            )
+        })
+}
+
+fn panel(
+    id: &ElementId,
+    menu: &Menu,
+    state: &Entity<Open>,
+    depth: usize,
+    close: &Run,
+    cx: &App,
+) -> Stateful<Div> {
+    let open = state.read(cx);
+    let here = at_depth(menu, &open.levels, depth).expect("settled levels follow submenu rows");
+    let at = open.levels[depth].at;
+    let theme = cx.theme();
+    let colors = &theme.colors;
+    let rows = here
+        .entries
+        .iter()
+        .enumerate()
+        .map(|(ix, entry)| match entry {
+            Entry::Separator => div().h_px().my_1().bg(colors.border).into_any_element(),
+            Entry::Heading(title) => div()
+                .px_2()
+                .pt_1p5()
+                .pb_1()
+                .text_size(theme.text_size(TextSize::Xs))
+                .font_weight(FontWeight::MEDIUM)
+                .text_color(colors.fg_subtle)
+                .child(title.clone())
+                .into_any_element(),
+            Entry::Item(item) => {
+                let marked = at == Some(ix);
+                let sub = matches!(item.kind, Kind::Sub(_));
+                let (hover, click, close, menu) =
+                    (state.clone(), state.clone(), close.clone(), menu.clone());
+                let hover_menu = menu.clone();
+                row(item, ix, marked, cx)
+                    .when(!item.disabled, |row| {
+                        row.on_mouse_move(move |_, _, cx| {
+                            let open = hover.read(cx);
+                            let Some(level) = open.levels.get(depth) else {
+                                return;
+                            };
+                            let shown = open.levels.len() > depth + 1;
+                            if level.at != Some(ix) || (sub && !shown) {
+                                mark(&hover, &hover_menu, depth, ix, true, cx);
+                            }
+                        })
+                        .on_mouse_down(
+                            MouseButton::Left,
+                            move |_, window, cx| {
+                                window.prevent_default();
+                                cx.stop_propagation();
+                                choose(&click, &menu, depth, ix, &close, window, cx);
+                            },
+                        )
+                    })
+                    .when(marked && sub, |row| {
+                        row.child(measure(state.clone(), move |open, bounds| {
+                            let level = &mut open.levels[depth];
+                            let changed = level.row != bounds;
+                            level.row = bounds;
+                            changed
+                        }))
+                    })
+                    .into_any_element()
+            }
+        });
+    surface((id.clone(), format!("panel-{depth}")), cx)
+        .relative()
+        .min_w(theme.menu_width())
+        .p_1()
+        .flex()
+        .flex_col()
+        .children(rows)
+        .child(measure(state.clone(), move |open, bounds| {
+            let level = &mut open.levels[depth];
+            let changed = level.panel != bounds;
+            level.panel = bounds;
+            changed
+        }))
+}
+
+/// The open menu of host `id`, placed at its spot. It holds focus while open and gives it back on every close.
+pub(crate) fn hang(
+    id: &ElementId,
+    menu: &Menu,
+    state: &Entity<Open>,
+    window: &mut Window,
+    cx: &mut App,
+) -> Option<AnyElement> {
+    let spot = state.read(cx).spot?;
+    let takeover = take_focus((id.clone(), "takeover"), window, cx);
+    let focus = takeover.read(cx).focus.clone();
+    if state.read(cx).takeover.is_none() {
+        state.update(cx, |open, _| open.takeover = Some(takeover));
+    }
+    let close: Run = {
+        let (state, id) = (state.clone(), id.clone());
+        Rc::new(move |window, cx| {
+            log::info!("menu {id:?}: closed");
+            Open::close(&state, window, cx);
+        })
+    };
+    if !focus.is_focused(window) {
+        log::info!("menu {id:?}: focus left");
+        close(window, cx);
+        return None;
+    }
+    let mut levels = state.read(cx).levels.clone();
+    settle(menu, &mut levels);
+    if levels != state.read(cx).levels {
+        log::info!("menu {id:?}: rows changed while open");
+        state.update(cx, |open, _| open.levels = levels);
+    }
+    let depth = state.read(cx).levels.len();
+    let enter =
+        Animation::new(motion::duration(motion::FAST, cx)).with_easing(motion::ease_out_cubic);
+    let (keyed, key_menu, key_close) = (state.clone(), menu.clone(), close.clone());
+    let (lifted, lift_menu, lift_close) = (state.clone(), menu.clone(), close.clone());
+    let (out, out_close) = (state.clone(), close.clone());
+    let root = panel(id, menu, state, 0, &close, cx)
+        .track_focus(&focus)
+        .on_key_down(move |event, window, cx| {
+            let stroke = &event.keystroke;
+            let key = stroke.key.as_str();
+            if matches!(key, "enter" | "space") {
+                if !stroke.modifiers.modified() {
+                    cx.stop_propagation();
+                }
+                return;
+            }
+            if keys(&key_menu, &keyed, key, &key_close, window, cx) {
+                cx.stop_propagation();
+            }
+        })
+        .on_key_up(move |event, window, cx| {
+            let stroke = &event.keystroke;
+            let key = stroke.key.as_str();
+            if matches!(key, "enter" | "space")
+                && !stroke.modifiers.modified()
+                && keys(&lift_menu, &lifted, key, &lift_close, window, cx)
+            {
+                cx.stop_propagation();
+            }
+        })
+        .on_mouse_down_out(move |event, window, cx| {
+            let open = out.read(cx);
+            let on_host = open.spot == Some(Spot::Under) && open.anchor.contains(&event.position);
+            if !on_host
+                && !open
+                    .levels
+                    .iter()
+                    .any(|level| level.panel.contains(&event.position))
+            {
+                out_close(window, cx);
+            }
+        });
+    let placed = match spot {
+        Spot::Under => float(state.read(cx).anchor, menu.entries.len(), root, window, cx),
+        Spot::At(point) => deferred(anchored().position(point).snap_to_window().child(
+            root.with_animation((id.clone(), "in"), enter.clone(), |root, t| root.opacity(t)),
+        ))
+        .with_priority(1)
+        .into_any_element(),
+    };
+    let subs = (1..depth).filter_map(|level| {
+        let row = state.read(cx).levels[level - 1].row;
+        (row != Bounds::default()).then(|| {
+            deferred(
+                anchored().position(row.top_right()).snap_to_window().child(
+                    panel(id, menu, state, level, &close, cx)
+                        .mt_neg_1()
+                        .with_animation(
+                            (id.clone(), format!("sub-{level}")),
+                            enter.clone(),
+                            |panel, t| panel.opacity(t).ml(motion::NUDGE * (t - 1.0)),
+                        ),
+                ),
+            )
+            .with_priority(2)
+            .into_any_element()
+        })
+    });
+    Some(
+        div()
+            .child(placed)
+            .children(subs.collect::<Vec<_>>())
+            .into_any_element(),
+    )
+}

src/menus/mod.rs

@@ -0,0 +1,8 @@
+mod hosts;
+mod menu;
+mod model;
+#[cfg(all(test, feature = "test-support"))]
+mod tests;
+
+pub use hosts::{ContextMenu, DropdownMenu, OverflowMenu, SplitButton};
+pub use model::{Menu, MenuItem};

src/menus/model.rs

@@ -0,0 +1,141 @@
+use std::rc::Rc;
+
+use gpui::{App, SharedString, Window};
+
+use crate::{forms::Run, primitives::IconName};
+
+/// What a row does when chosen.
+#[derive(Clone)]
+pub(super) enum Kind {
+    Run,
+    Check(bool),
+    Radio(bool),
+    Sub(Menu),
+}
+
+/// One row of a menu. Its keys are shown, not bound.
+#[derive(Clone)]
+pub struct MenuItem {
+    pub(super) label: SharedString,
+    pub(super) icon: Option<IconName>,
+    pub(super) keys: Option<SharedString>,
+    pub(super) kind: Kind,
+    pub(super) disabled: bool,
+    pub(super) on_click: Option<Run>,
+}
+
+impl MenuItem {
+    fn with(label: impl Into<SharedString>, kind: Kind) -> Self {
+        Self {
+            label: label.into(),
+            icon: None,
+            keys: None,
+            kind,
+            disabled: false,
+            on_click: None,
+        }
+    }
+
+    pub fn new(label: impl Into<SharedString>) -> Self {
+        Self::with(label, Kind::Run)
+    }
+
+    /// A row with a check; the owner flips `checked` in `on_click`.
+    pub fn check(label: impl Into<SharedString>, checked: bool) -> Self {
+        Self::with(label, Kind::Check(checked))
+    }
+
+    /// One of a set; the owner moves `selected` in `on_click`.
+    pub fn radio(label: impl Into<SharedString>, selected: bool) -> Self {
+        Self::with(label, Kind::Radio(selected))
+    }
+
+    /// A row that opens `menu` beside it.
+    pub fn submenu(label: impl Into<SharedString>, menu: Menu) -> Self {
+        Self::with(label, Kind::Sub(menu))
+    }
+
+    pub fn icon(mut self, icon: IconName) -> Self {
+        self.icon = Some(icon);
+        self
+    }
+
+    /// Its chord at the row's end, in gpui key syntax.
+    pub fn keys(mut self, keys: impl Into<SharedString>) -> Self {
+        self.keys = Some(keys.into());
+        self
+    }
+
+    pub fn disabled(mut self, disabled: bool) -> Self {
+        self.disabled = disabled;
+        self
+    }
+
+    pub fn on_click(mut self, handler: impl Fn(&mut Window, &mut App) + 'static) -> Self {
+        self.on_click = Some(Rc::new(handler));
+        self
+    }
+}
+
+#[derive(Clone)]
+pub(super) enum Entry {
+    Item(MenuItem),
+    Separator,
+    Heading(SharedString),
+}
+
+/// Rows, separators and titled groups. A row can open a submenu.
+#[derive(Clone, Default)]
+pub struct Menu {
+    pub(super) entries: Vec<Entry>,
+}
+
+impl Menu {
+    pub fn new() -> Self {
+        Self::default()
+    }
+
+    pub fn item(mut self, item: MenuItem) -> Self {
+        self.entries.push(Entry::Item(item));
+        self
+    }
+
+    pub fn separator(mut self) -> Self {
+        self.entries.push(Entry::Separator);
+        self
+    }
+
+    /// A titled run of rows, set off from the rows before it.
+    pub fn group(
+        mut self,
+        title: impl Into<SharedString>,
+        items: impl IntoIterator<Item = MenuItem>,
+    ) -> Self {
+        if !self.entries.is_empty() {
+            self.entries.push(Entry::Separator);
+        }
+        self.entries.push(Entry::Heading(title.into()));
+        self.entries.extend(items.into_iter().map(Entry::Item));
+        self
+    }
+
+    pub(super) fn item_at(&self, ix: usize) -> Option<&MenuItem> {
+        match self.entries.get(ix) {
+            Some(Entry::Item(item)) => Some(item),
+            _ => None,
+        }
+    }
+
+    /// The next enabled row from `from`, stepping by `by` and wrapping.
+    pub(super) fn step(&self, from: Option<usize>, by: isize) -> Option<usize> {
+        let count = self.entries.len() as isize;
+        let mut at = from.map_or(if by > 0 { -1 } else { count }, |at| at as isize);
+        for _ in 0..count {
+            at = (at + by).rem_euclid(count);
+            if self.item_at(at as usize).is_some_and(|item| !item.disabled) {
+                return Some(at as usize);
+            }
+        }
+        None
+    }
+}

src/menus/tests.rs

@@ -0,0 +1,267 @@
+use gpui::{
+    App, Context, FocusHandle, InteractiveElement, IntoElement, KeyUpEvent, Keystroke, Modifiers,
+    MouseButton, ParentElement, Render, SharedString, Styled, TestAppContext, VisualTestContext,
+    Window, div, point, px,
+};
+
+use super::{ContextMenu, DropdownMenu, Menu, MenuItem};
+use crate::{primitives::FocusScope, theme::Theme};
+
+/// What the rows did, and the state the check and radio rows show.
+struct Desk {
+    root: FocusHandle,
+    ran: Vec<SharedString>,
+    wrap: bool,
+    theme: SharedString,
+    view_rows: bool,
+    enters_above: usize,
+}
+
+impl Desk {
+    fn menu(&self, cx: &mut Context<Self>) -> Menu {
+        let run = |name: &'static str| {
+            let view = cx.entity();
+            move |_: &mut Window, cx: &mut App| {
+                view.update(cx, |desk, cx| {
+                    desk.ran.push(name.into());
+                    cx.notify();
+                })
+            }
+        };
+        let (wrap, light, dark) = (cx.entity(), cx.entity(), cx.entity());
+        let theme = Menu::new()
+            .item(
+                MenuItem::radio("Light", self.theme == "light")
+                    .on_click(move |_, cx| light.update(cx, |desk, _| desk.theme = "light".into())),
+            )
+            .item(
+                MenuItem::radio("Dark", self.theme == "dark")
+                    .on_click(move |_, cx| dark.update(cx, |desk, _| desk.theme = "dark".into())),
+            );
+        let edit = Menu::new()
+            .item(
+                MenuItem::new("Cut")
+                    .keys("secondary-x")
+                    .on_click(run("cut")),
+            )
+            .item(MenuItem::new("Copy").disabled(true).on_click(run("copy")))
+            .item(MenuItem::new("Paste").on_click(run("paste")));
+        if !self.view_rows {
+            return edit;
+        }
+        edit.group(
+            "View",
+            [
+                MenuItem::check("Word wrap", self.wrap)
+                    .on_click(move |_, cx| wrap.update(cx, |desk, _| desk.wrap = !desk.wrap)),
+                MenuItem::submenu("Theme", theme),
+            ],
+        )
+    }
+}
+
+impl Render for Desk {
+    fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        let menu = self.menu(cx);
+        let above = cx.entity();
+        div()
+            .size_full()
+            .on_key_down(move |event, _, cx| {
+                if event.keystroke.key == "enter" {
+                    above.update(cx, |desk, _| desk.enters_above += 1);
+                }
+            })
+            .child(
+                FocusScope::new(&self.root)
+                    .size_full()
+                    .child(DropdownMenu::new("edit", "Edit", menu.clone()))
+                    .child(ContextMenu::new("area", menu).child(div().w(px(200.0)).h(px(120.0)))),
+            )
+    }
+}
+
+fn settle(cx: &mut VisualTestContext) {
+    cx.run_until_parked();
+    cx.update(|window, _| window.refresh());
+    cx.run_until_parked();
+}
+
+/// Presses and releases `key`, with a frame in between as on a real keyboard.
+fn press(key: &str, cx: &mut VisualTestContext) {
+    cx.simulate_keystrokes(key);
+    settle(cx);
+    cx.simulate_event(KeyUpEvent {
+        keystroke: Keystroke::parse(key).expect("a key"),
+    });
+    settle(cx);
+}
+
+fn desk(cx: &mut TestAppContext) -> (gpui::Entity<Desk>, &mut VisualTestContext) {
+    cx.update(Theme::init);
+    let (view, cx) = cx.add_window_view(|_, cx| Desk {
+        root: cx.focus_handle(),
+        ran: Vec::new(),
+        wrap: false,
+        theme: "light".into(),
+        view_rows: true,
+        enters_above: 0,
+    });
+    settle(cx);
+    (view, cx)
+}
+
+fn ran(view: &gpui::Entity<Desk>, cx: &mut VisualTestContext) -> Vec<SharedString> {
+    view.read_with(cx, |desk, _| desk.ran.clone())
+}
+
+fn click(x: f32, y: f32, cx: &mut VisualTestContext) {
+    let at = point(px(x), px(y));
+    cx.simulate_mouse_move(at, None, Modifiers::none());
+    cx.simulate_click(at, Modifiers::none());
+    settle(cx);
+}
+
+#[gpui::test]
+fn the_keyboard_opens_walks_past_disabled_rows_and_runs(cx: &mut TestAppContext) {
+    let (view, cx) = desk(cx);
+    cx.update(|window, _| window.focus_next());
+    press("enter", cx);
+    press("down", cx);
+    press("enter", cx);
+    assert_eq!(ran(&view, cx), ["paste"]);
+    press("down", cx);
+    press("enter", cx);
+    assert_eq!(ran(&view, cx), ["paste"], "the release left the menu shut");
+}
+
+#[gpui::test]
+fn submenus_open_right_and_close_left(cx: &mut TestAppContext) {
+    let (view, cx) = desk(cx);
+    cx.update(|window, _| window.focus_next());
+    press("enter", cx);
+    press("up", cx);
+    press("right", cx);
+    press("down", cx);
+    press("left", cx);
+    press("right", cx);
+    press("down", cx);
+    press("enter", cx);
+    assert_eq!(view.read_with(cx, |desk, _| desk.theme.clone()), "dark");
+}
+
+#[gpui::test]
+fn a_check_row_reports_to_its_owner(cx: &mut TestAppContext) {
+    let (view, cx) = desk(cx);
+    cx.update(|window, _| window.focus_next());
+    press("enter", cx);
+    press("up", cx);
+    press("up", cx);
+    press("enter", cx);
+    assert!(view.read_with(cx, |desk, _| desk.wrap));
+}
+
+#[gpui::test]
+fn escape_backs_out_one_level_then_closes(cx: &mut TestAppContext) {
+    let (view, cx) = desk(cx);
+    cx.update(|window, _| window.focus_next());
+    press("enter", cx);
+    press("up", cx);
+    press("right", cx);
+    press("escape", cx);
+    press("up", cx);
+    press("enter", cx);
+    assert!(
+        view.read_with(cx, |desk, _| desk.wrap),
+        "one escape left the root open"
+    );
+    press("enter", cx);
+    press("escape", cx);
+    press("down", cx);
+    press("enter", cx);
+    assert!(
+        ran(&view, cx).is_empty(),
+        "the second escape closed the menu"
+    );
+}
+
+#[gpui::test]
+fn a_right_click_opens_the_context_menu_where_it_lands(cx: &mut TestAppContext) {
+    let (view, cx) = desk(cx);
+    let at = point(px(60.0), px(80.0));
+    cx.simulate_mouse_move(at, None, Modifiers::none());
+    cx.simulate_mouse_down(at, MouseButton::Right, Modifiers::none());
+    cx.simulate_mouse_up(at, MouseButton::Right, Modifiers::none());
+    settle(cx);
+    press("down", cx);
+    press("enter", cx);
+    assert_eq!(ran(&view, cx), ["cut"]);
+}
+
+#[gpui::test]
+fn the_trigger_toggles_and_a_press_outside_closes(cx: &mut TestAppContext) {
+    let (view, cx) = desk(cx);
+    click(12.0, 12.0, cx);
+    click(12.0, 12.0, cx);
+    press("down", cx);
+    press("enter", cx);
+    assert!(
+        ran(&view, cx).is_empty(),
+        "the second press on the trigger closed it"
+    );
+    click(12.0, 12.0, cx);
+    click(600.0, 400.0, cx);
+    press("down", cx);
+    press("enter", cx);
+    assert!(ran(&view, cx).is_empty(), "the press outside closed it");
+}
+
+#[gpui::test]
+fn rows_the_owner_removes_leave_the_menu_usable(cx: &mut TestAppContext) {
+    let (view, cx) = desk(cx);
+    cx.update(|window, _| window.focus_next());
+    press("enter", cx);
+    press("up", cx);
+    view.update(cx, |desk, cx| {
+        desk.view_rows = false;
+        cx.notify();
+    });
+    settle(cx);
+    press("enter", cx);
+    assert!(ran(&view, cx).is_empty(), "the removed row ran");
+    press("down", cx);
+    press("enter", cx);
+    assert_eq!(ran(&view, cx), ["cut"]);
+}
+
+#[gpui::test]
+fn closing_from_the_trigger_hands_focus_back(cx: &mut TestAppContext) {
+    let (view, cx) = desk(cx);
+    cx.update(|window, _| window.focus_next());
+    press("enter", cx);
+    click(12.0, 12.0, cx);
+    press("enter", cx);
+    press("enter", cx);
+    assert_eq!(ran(&view, cx), ["cut"], "focus came back to the trigger");
+}
+
+#[gpui::test]
+fn confirm_keys_stay_inside_the_menu(cx: &mut TestAppContext) {
+    let (view, cx) = desk(cx);
+    click(12.0, 12.0, cx);
+    press("down", cx);
+    press("enter", cx);
+    assert_eq!(ran(&view, cx), ["cut"]);
+    assert_eq!(view.read_with(cx, |desk, _| desk.enters_above), 0);
+}
+
+#[gpui::test]
+fn modified_confirm_keys_do_not_pick(cx: &mut TestAppContext) {
+    let (view, cx) = desk(cx);
+    cx.update(|window, _| window.focus_next());
+    press("enter", cx);
+    press("ctrl-enter", cx);
+    press("shift-space", cx);
+    assert!(ran(&view, cx).is_empty(), "a modified key picked");
+    press("enter", cx);
+    assert_eq!(ran(&view, cx), ["cut"]);
+}

src/navigation/palette/mod.rs

@@ -327,9 +327,11 @@ impl Palette {
                 cx.stop_propagation();
                 down(1, cx);
             })
-            .capture_action(move |_: &Enter, window, cx| {
-                cx.stop_propagation();
-                if count > 0 {
+            .capture_action(|_: &Enter, _, cx| cx.stop_propagation())
+            .on_key_up(move |event, window, cx| {
+                let stroke = &event.keystroke;
+                if stroke.key == "enter" && !stroke.modifiers.modified() && count > 0 {
+                    cx.stop_propagation();
                     enter(chosen.read(cx).at.min(count - 1), window, cx);
                 }
             })

src/navigation/palette/tests.rs

@@ -1,12 +1,13 @@
 use std::ops::Range;
 
 use gpui::{
-    Context, FocusHandle, InteractiveElement, IntoElement, KeyBinding, ParentElement, Render,
-    SharedString, TestAppContext, VisualTestContext, Window, div, prelude::*,
+    Context, FocusHandle, IntoElement, KeyBinding, KeyUpEvent, Keystroke, ParentElement, Render,
+    SharedString, TestAppContext, VisualTestContext, Window, prelude::*,
 };
 
 use super::{Command, CommandPalette, Fit, QuickOpen, QuickSwitcher, SearchPalette, fuzzy};
 use crate::{
+    buttons::Button,
     forms::Choice,
     primitives::{FocusNext, FocusScope},
     theme::Theme,
@@ -26,6 +27,16 @@ fn settle(cx: &mut VisualTestContext) {
     cx.run_until_parked();
 }
 
+/// Presses and releases `key`, with a frame in between as on a real keyboard.
+fn press(key: &str, cx: &mut VisualTestContext) {
+    cx.simulate_keystrokes(key);
+    settle(cx);
+    cx.simulate_event(KeyUpEvent {
+        keystroke: Keystroke::parse(key).expect("a key"),
+    });
+    settle(cx);
+}
+
 #[test]
 fn fuzzy_finds_letters_in_order_and_ranks_word_starts() {
     let found = fuzzy("tsb", "Toggle sidebar").expect("a fit");
@@ -54,7 +65,6 @@ fn fuzzy_finds_letters_in_order_and_ranks_word_starts() {
 /// Opens one palette at a time and records what it handed back.
 struct Host {
     root: FocusHandle,
-    outside: FocusHandle,
     open: bool,
     got: Option<SharedString>,
     kind: Kind,
@@ -83,7 +93,7 @@ fn results(query: &str) -> Vec<(SharedString, Vec<Choice>)> {
 
 impl Render for Host {
     fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
-        let (view, close) = (cx.entity(), cx.entity());
+        let (view, close, opener) = (cx.entity(), cx.entity(), cx.entity());
         let close = move |_: &mut Window, cx: &mut gpui::App| {
             close.update(cx, |host, cx| {
                 host.open = false;
@@ -139,7 +149,12 @@ impl Render for Host {
         };
         FocusScope::new(&self.root)
             .size_full()
-            .child(div().id("outside").track_focus(&self.outside))
+            .child(Button::new("opener", "Open").on_click(move |_, _, cx| {
+                opener.update(cx, |host, cx| {
+                    host.open = true;
+                    cx.notify();
+                })
+            }))
             .when(self.open, |host| host.child(palette))
     }
 }
@@ -148,7 +163,6 @@ fn host(kind: Kind, cx: &mut TestAppContext) -> (gpui::Entity<Host>, &mut Visual
     setup(cx);
     let (view, cx) = cx.add_window_view(move |_, cx| Host {
         root: cx.focus_handle(),
-        outside: cx.focus_handle().tab_stop(true),
         open: true,
         got: None,
         kind,
@@ -173,15 +187,16 @@ fn reopen(view: &gpui::Entity<Host>, cx: &mut VisualTestContext) {
 #[gpui::test]
 fn the_command_palette_leads_with_recent_and_runs_the_best_fit(cx: &mut TestAppContext) {
     let (view, cx) = host(Kind::Commands, cx);
-    cx.simulate_keystrokes("enter");
+    press("enter", cx);
     assert_eq!(got(&view, cx), (false, Some("dark".into())));
     reopen(&view, cx);
     cx.simulate_input("zi");
     settle(cx);
-    cx.simulate_keystrokes("enter");
+    press("enter", cx);
     assert_eq!(got(&view, cx), (false, Some("zoom".into())));
     reopen(&view, cx);
-    cx.simulate_keystrokes("up enter");
+    cx.simulate_keystrokes("up");
+    press("enter", cx);
     assert_eq!(got(&view, cx), (false, Some("light".into())));
     reopen(&view, cx);
     cx.simulate_keystrokes("escape");
@@ -193,7 +208,7 @@ fn quick_open_ranks_the_whole_path(cx: &mut TestAppContext) {
     let (view, cx) = host(Kind::Files, cx);
     cx.simulate_input("navmenu");
     settle(cx);
-    cx.simulate_keystrokes("enter");
+    press("enter", cx);
     assert_eq!(
         got(&view, cx),
         (false, Some("src/navigation/menu.rs".into()))
@@ -203,24 +218,26 @@ fn quick_open_ranks_the_whole_path(cx: &mut TestAppContext) {
 #[gpui::test]
 fn the_switcher_opens_on_the_one_before(cx: &mut TestAppContext) {
     let (view, cx) = host(Kind::Switcher, cx);
-    cx.simulate_keystrokes("enter");
+    press("enter", cx);
     assert_eq!(got(&view, cx), (false, Some("before".into())));
     reopen(&view, cx);
     cx.simulate_input("old");
     settle(cx);
-    cx.simulate_keystrokes("enter");
+    press("enter", cx);
     assert_eq!(got(&view, cx), (false, Some("older".into())));
 }
 
 #[gpui::test]
 fn search_walks_the_owners_results(cx: &mut TestAppContext) {
     let (view, cx) = host(Kind::Search, cx);
-    cx.simulate_keystrokes("down enter");
+    cx.simulate_keystrokes("down");
+    press("enter", cx);
     assert_eq!(got(&view, cx), (false, Some("motion".into())));
     reopen(&view, cx);
     cx.simulate_input("theme");
     settle(cx);
-    cx.simulate_keystrokes("down enter");
+    cx.simulate_keystrokes("down");
+    press("enter", cx);
     assert_eq!(got(&view, cx), (false, Some("tokens".into())));
 }
 
@@ -230,7 +247,7 @@ fn tab_stays_inside_an_open_palette(cx: &mut TestAppContext) {
     cx.simulate_keystrokes("tab");
     cx.simulate_input("zi");
     settle(cx);
-    cx.simulate_keystrokes("enter");
+    press("enter", cx);
     assert_eq!(got(&view, cx), (false, Some("zoom".into())));
 }
 
@@ -239,3 +256,16 @@ fn tab_stays_inside_an_open_palette(cx: &mut TestAppContext) {
 fn search_refuses_disabled_results(cx: &mut TestAppContext) {
     host(Kind::Disabled, cx);
 }
+
+#[gpui::test]
+fn enter_picks_on_release_so_the_opener_stays_shut(cx: &mut TestAppContext) {
+    let (view, cx) = host(Kind::Commands, cx);
+    press("escape", cx);
+    cx.update(|window, _| window.focus_next());
+    press("enter", cx);
+    assert_eq!(got(&view, cx), (true, None));
+    cx.simulate_input("zi");
+    settle(cx);
+    press("enter", cx);
+    assert_eq!(got(&view, cx), (false, Some("zoom".into())));
+}

src/primitives/mod.rs

@@ -11,7 +11,7 @@ mod tooltip;
 pub use backdrop::{Backdrop, Place};
 pub use divider::Divider;
 pub use focus::{FocusNext, FocusPrev, FocusRing, FocusScope};
-pub(crate) use focus::{give_back, tab_stop, take_focus};
+pub(crate) use focus::{Takeover, give_back, tab_stop, take_focus};
 pub use ghost::DragGhost;
 pub use icon::{Icon, IconName};
 pub use image::Image;

src/shell/mod.rs

@@ -8,6 +8,8 @@ mod native;
 mod status;
 mod switcher;
 mod tabs;
+#[cfg(all(test, feature = "test-support"))]
+mod tests;
 mod update;
 mod windows;
 

src/shell/switcher.rs

@@ -95,8 +95,9 @@ impl RenderOnce for WindowSwitcher {
             })
             .collect();
         let handles: Vec<AnyWindowHandle> = windows.iter().map(|(handle, _)| *handle).collect();
-        let (next, prev, keys) = (state.clone(), state.clone(), state.clone());
-        let (close_keys, close_scrim) = (close.clone(), close);
+        let (next, prev, keys, chosen) =
+            (state.clone(), state.clone(), state.clone(), state.clone());
+        let (close_keys, close_enter, close_scrim) = (close.clone(), close.clone(), close);
         let focus = takeover.read(cx).focus.clone();
         let panel = div()
             .id("window-switcher")
@@ -117,16 +118,21 @@ impl RenderOnce for WindowSwitcher {
                 match event.keystroke.key.as_str() {
                     "down" => step(&keys, 1, count, cx),
                     "up" => step(&keys, -1, count, cx),
-                    "enter" => {
-                        if let Some(handle) = handles.get(keys.read(cx).selected) {
-                            switch_to(*handle, &close_keys, window, cx);
-                        }
-                    }
                     "escape" => close_keys(window, cx),
+                    "enter" if !event.keystroke.modifiers.modified() => {}
                     _ => return,
                 }
                 cx.stop_propagation();
             })
+            .on_key_up(move |event, window, cx| {
+                let stroke = &event.keystroke;
+                if stroke.key == "enter" && !stroke.modifiers.modified() {
+                    cx.stop_propagation();
+                    if let Some(handle) = handles.get(chosen.read(cx).selected) {
+                        switch_to(*handle, &close_enter, window, cx);
+                    }
+                }
+            })
             .children(rows)
             .when(count == 0, |panel| {
                 panel.child(

src/shell/tests.rs

@@ -0,0 +1,90 @@
+use gpui::{
+    AppContext as _, Context, FocusHandle, InteractiveElement, IntoElement, KeyUpEvent, Keystroke,
+    ParentElement, Render, TestAppContext, VisualTestContext, Window, div, prelude::*, px, size,
+};
+
+use super::{WindowManager, WindowSwitcher};
+use crate::{buttons::Button, primitives::FocusScope, theme::Theme};
+
+struct Blank;
+
+impl Render for Blank {
+    fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
+        div()
+    }
+}
+
+struct Desk {
+    root: FocusHandle,
+    open: bool,
+    enters_above: usize,
+}
+
+impl Render for Desk {
+    fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        let (opener, closer, above) = (cx.entity(), cx.entity(), cx.entity());
+        let scope = FocusScope::new(&self.root)
+            .size_full()
+            .child(Button::new("opener", "Windows").on_click(move |_, _, cx| {
+                opener.update(cx, |desk, cx| {
+                    desk.open = true;
+                    cx.notify();
+                })
+            }))
+            .when(self.open, |desk| {
+                desk.child(WindowSwitcher::new("switcher", move |_, cx| {
+                    closer.update(cx, |desk, cx| {
+                        desk.open = false;
+                        cx.notify();
+                    })
+                }))
+            });
+        div()
+            .size_full()
+            .on_key_down(move |event, _, cx| {
+                if event.keystroke.key == "enter" {
+                    above.update(cx, |desk, _| desk.enters_above += 1);
+                }
+            })
+            .child(scope)
+    }
+}
+
+fn settle(cx: &mut VisualTestContext) {
+    cx.run_until_parked();
+    cx.update(|window, _| window.refresh());
+    cx.run_until_parked();
+}
+
+fn press(key: &str, cx: &mut VisualTestContext) {
+    cx.simulate_keystrokes(key);
+    settle(cx);
+    cx.simulate_event(KeyUpEvent {
+        keystroke: Keystroke::parse(key).expect("a key"),
+    });
+    settle(cx);
+}
+
+#[gpui::test]
+fn the_switcher_switches_on_release_so_its_opener_stays_shut(cx: &mut TestAppContext) {
+    cx.update(Theme::init);
+    let (desk, cx) = cx.add_window_view(|_, cx| Desk {
+        root: cx.focus_handle(),
+        open: false,
+        enters_above: 0,
+    });
+    cx.update(|_, cx| {
+        WindowManager::open("Notes", size(px(320.0), px(240.0)), cx, |_, cx| {
+            cx.new(|_| Blank)
+        })
+        .expect("a managed window");
+    });
+    settle(cx);
+    cx.update(|window, _| window.focus_next());
+    press("enter", cx);
+    assert!(desk.read_with(cx, |desk, _| desk.open));
+    let above = desk.read_with(cx, |desk, _| desk.enters_above);
+    press("enter", cx);
+    assert!(!desk.read_with(cx, |desk, _| desk.open));
+    assert_eq!(desk.read_with(cx, |desk, _| desk.enters_above), above);
+}

src/theme/tokens.rs

@@ -228,6 +228,11 @@ impl Theme {
         px_to_rems(480.0)
     }
 
+    /// Narrowest a menu's panel gets.
+    pub fn menu_width(&self) -> Rems {
+        px_to_rems(200.0)
+    }
+
     /// A palette's card; its list scrolls inside.
     pub fn palette_size(&self) -> Size<Rems> {
         size(px_to_rems(600.0), px_to_rems(400.0))