//! One open device: its live screen, which takes taps, drags and typing,
//! the rail of quick controls beside it and the Tools drawer, as T3 Code's
//! `DeviceWorkspace` lays them out. The same view shows in the right panel
//! or floats over the chat.
use std::time::Duration;
use gpui_kit::component::{
Icon, IconName, h_flex,
input::{Input, InputState},
menu::{DropdownMenu as _, PopupMenuItem},
v_flex, Selectable as _, Sizable as _,
};
use gpui_kit::prelude::FluentBuilder as _;
use gpui_kit::*;
use super::DeviceWatch;
use crate::device::{
self, Action, AxElement, ColorFilter, Detail, DeviceSummary, Orientation, Platform, TextSize, Toggle,
stream::{Button, DeviceStream, Frame, Key, Screen, Status, StreamEvent, TouchPhase},
};
use crate::ui::icons::Lucide;
use crate::ui::metal::{self, Led, MetalButton, MetalStyled as _, Palette};
/// The rail's width; the screen keeps clear of it.
const RAIL_WIDTH: f32 = 56.;
const TOOLS_WIDTH: f32 = 288.;
/// The panel is this wide before the drawer sits beside the screen rather than over it.
const TOOLS_BESIDE: f32 = 700.;
const AX_POLL: Duration = Duration::from_millis(1500);
const LOCATION_PRESETS: [(&str, f64, f64); 5] = [
("San Francisco", 37.7749, -122.4194),
("New York", 40.7128, -74.006),
("London", 51.5074, -0.1278),
("Stockholm", 59.3293, 18.0686),
("Tokyo", 35.6762, 139.6503),
];
const IOS_PERMISSIONS: [(&str, &str); 11] = [
("camera", "Camera"),
("microphone", "Microphone"),
("photos", "Photos"),
("contacts", "Contacts"),
("calendar", "Calendar"),
("reminders", "Reminders"),
("location", "Location"),
("notifications", "Notifications"),
("motion", "Motion"),
("media-library", "Media library"),
("faceid", "Face ID"),
];
const ANDROID_PERMISSIONS: [(&str, &str); 8] = [
("camera", "Camera"),
("microphone", "Microphone"),
("photos", "Photos"),
("contacts", "Contacts"),
("calendar", "Calendar"),
("location", "Location"),
("notifications", "Notifications"),
("motion", "Physical activity"),
];
pub enum DeviceViewEvent {
/// Float over the chat.
Float,
/// Close the tab; the device keeps running.
Close,
/// Close the tab and power the device off.
PowerOff,
}
/// The Tools drawer's text fields.
struct Fields {
url: Entity<InputState>,
launch: Entity<InputState>,
latitude: Entity<InputState>,
longitude: Entity<InputState>,
permission_app: Entity<InputState>,
push: Entity<InputState>,
}
pub struct DeviceView {
pub device: DeviceSummary,
host_label: String,
stream: Option<DeviceStream>,
frame: Option<Frame>,
status: Status,
status_detail: Option<SharedString>,
screen: Option<Screen>,
input_connected: bool,
input_detail: Option<SharedString>,
visible: bool,
/// Drawn without the rail and drawer, as the floating preview.
pub compact: bool,
focus_handle: FocusHandle,
/// The whole viewer and the screen within it, in window coordinates.
area: Bounds<Pixels>,
screen_area: Bounds<Pixels>,
touching: bool,
tools_open: bool,
ax_overlay: bool,
ax: Vec<AxElement>,
detail: Option<Detail>,
pending: bool,
error: Option<SharedString>,
screenshot_pending: bool,
fields: Fields,
permission: &'static str,
_events: Task<()>,
_ax: Task<()>,
_detail: Task<()>,
}
impl EventEmitter<DeviceViewEvent> for DeviceView {}
impl DeviceView {
pub fn new(device: DeviceSummary, host_label: String, window: &mut Window, cx: &mut Context<Self>) -> Self {
let field = |placeholder: &str, window: &mut Window, cx: &mut Context<Self>| {
let placeholder = placeholder.to_string();
cx.new(|cx| InputState::new(window, cx).placeholder(placeholder))
};
let fields = Fields {
url: field("https://… or myapp://", window, cx),
launch: field(if device.platform == Platform::Ios { "Bundle ID to launch" } else { "Package name to launch" }, window, cx),
latitude: field("Latitude", window, cx),
longitude: field("Longitude", window, cx),
permission_app: field("App ID", window, cx),
push: field("Alert text", window, cx),
};
cx.on_release(|this, cx| {
if let Some(frame) = this.frame.take() {
cx.drop_image(frame.image, None);
}
})
.detach();
Self {
device,
host_label,
stream: None,
frame: None,
status: Status::Connecting,
status_detail: None,
screen: None,
input_connected: false,
input_detail: None,
visible: false,
compact: false,
focus_handle: cx.focus_handle(),
area: Bounds::default(),
screen_area: Bounds::default(),
touching: false,
tools_open: false,
ax_overlay: false,
ax: Vec::new(),
detail: None,
pending: false,
error: None,
screenshot_pending: false,
fields,
permission: "camera",
_events: Task::ready(()),
_ax: Task::ready(()),
_detail: Task::ready(()),
}
}
/// Streams while shown; a hidden view lets go of its stream.
pub fn set_visible(&mut self, visible: bool, window: &mut Window, cx: &mut Context<Self>) {
if self.visible == visible {
return;
}
self.visible = visible;
if visible {
self.ensure_stream(window, cx);
self.read_detail(cx);
self.poll_ax(cx);
} else {
self._detail = Task::ready(());
self._ax = Task::ready(());
}
if let Some(stream) = &self.stream {
stream.set_watching(visible);
}
cx.notify();
}
/// The device as the service now knows it (an AVD becomes a serial when it boots).
pub fn update_device(&mut self, device: DeviceSummary, cx: &mut Context<Self>) {
if self.device != device {
self.device = device;
cx.notify();
}
}
fn ensure_stream(&mut self, window: &mut Window, cx: &mut Context<Self>) {
if self.stream.is_some() {
return;
}
let Some(origin) = device::service().hub_origin() else {
self.status = Status::Error;
self.status_detail = Some("The device hub is not running. Refresh devices to start it.".into());
return;
};
let (tx, rx) = smol::channel::unbounded();
self.stream = Some(DeviceStream::new(origin, self.device.platform, self.device.id.clone(), tx));
self._events = cx.spawn_in(window, async move |this, cx| {
while let Ok(event) = rx.recv().await {
let mut batch = vec![event];
while let Ok(event) = rx.try_recv() {
batch.push(event);
}
let updated = this.update_in(cx, |this, window, cx| {
for event in batch {
this.handle_event(event, window, cx);
}
cx.notify();
});
if updated.is_err() {
break;
}
}
});
}
fn handle_event(&mut self, event: StreamEvent, window: &mut Window, cx: &mut Context<Self>) {
match event {
StreamEvent::Status(status, detail) => {
self.status = status;
self.status_detail = detail.map(Into::into);
}
StreamEvent::Frame => {
if let Some(frame) = self.stream.as_ref().and_then(DeviceStream::take_frame)
&& let Some(old) = self.frame.replace(frame)
{
cx.drop_image(old.image, Some(window));
}
}
StreamEvent::Screen(screen) => self.screen = Some(screen),
StreamEvent::Input(connected, detail) => {
self.input_connected = connected;
self.input_detail = detail.map(Into::into);
}
}
}
fn reconnect(&mut self, cx: &mut Context<Self>) {
if let Some(stream) = &self.stream {
stream.restart();
}
self.status = Status::Connecting;
self.status_detail = None;
cx.notify();
}
/// Reads the device's settings; every action reads them again after.
fn read_detail(&mut self, cx: &mut Context<Self>) {
let id = self.device.id.clone();
self._detail = cx.spawn(async move |this, cx| {
let result = cx.background_executor().spawn(async move { device::service().detail(&id) }).await;
let _ = this.update(cx, |this, cx| {
match result {
Ok(detail) => {
this.detail = Some(detail);
this.error = None;
}
Err(err) => {
this.detail = None;
this.error = Some(format!("{err:#}").into());
}
}
cx.notify();
});
});
}
/// Runs one action. One at a time; the result replaces the settings shown,
/// so a control never shows a value the device didn't confirm.
fn act(&mut self, action: Action, cx: &mut Context<Self>) {
if self.pending || self.detail.is_none() {
return;
}
self.pending = true;
self.error = None;
let id = self.device.id.clone();
cx.spawn(async move |this, cx| {
let result = cx.background_executor().spawn(async move { device::service().action(&id, &action) }).await;
let _ = this.update(cx, |this, cx| {
this.pending = false;
match result {
Ok(detail) => this.detail = Some(detail),
Err(err) => this.error = Some(format!("{err:#}").into()),
}
cx.notify();
});
})
.detach();
cx.notify();
}
fn controls_disabled(&self) -> bool {
self.pending || self.detail.is_none() || !self.visible
}
/// Polls the accessibility tree while the overlay is on.
fn poll_ax(&mut self, cx: &mut Context<Self>) {
if !self.ax_overlay || !self.visible {
self._ax = Task::ready(());
self.ax.clear();
return;
}
let id = self.device.id.clone();
self._ax = cx.spawn(async move |this, cx| {
loop {
let id = id.clone();
let tree = cx.background_executor().spawn(async move { device::service().accessibility(&id) }).await;
let keep_going = this
.update(cx, |this, cx| {
// A failed poll keeps the last good tree.
if let Ok(tree) = tree {
this.ax = tree;
cx.notify();
}
this.ax_overlay && this.visible
})
.unwrap_or(false);
if !keep_going {
break;
}
cx.background_executor().timer(AX_POLL).await;
}
});
}
fn save_screenshot(&mut self, cx: &mut Context<Self>) {
if self.screenshot_pending || !self.visible {
return;
}
self.screenshot_pending = true;
let id = self.device.id.clone();
let name: String = self.device.name.chars().map(|c| if c.is_ascii_alphanumeric() || c == '-' { c } else { '-' }).collect();
let file = format!("{name}-{}.png", chrono::Local::now().timestamp_millis());
let dir = std::env::var_os("HOME").map(std::path::PathBuf::from).map(|home| {
let downloads = home.join("Downloads");
if downloads.is_dir() { downloads } else { home }
});
let path = cx.prompt_for_new_path(&dir.unwrap_or_default(), Some(&file));
cx.spawn(async move |this, cx| {
let target = path.await.ok().and_then(Result::ok).flatten();
let result = match target {
Some(target) => {
cx.background_executor()
.spawn(async move {
let (_, png) = device::service().screenshot(&id)?;
std::fs::write(&target, png)?;
anyhow::Ok(())
})
.await
}
None => Ok(()),
};
let _ = this.update(cx, |this, cx| {
this.screenshot_pending = false;
if let Err(err) = result {
this.error = Some(format!("{err:#}").into());
}
cx.notify();
});
})
.detach();
cx.notify();
}
/// A window position as a 0..1 point on the screen.
fn screen_point(&self, position: Point<Pixels>) -> (f32, f32) {
let bounds = self.screen_area;
let width = f32::from(bounds.size.width).max(1.);
let height = f32::from(bounds.size.height).max(1.);
(
(f32::from(position.x - bounds.origin.x) / width).clamp(0., 1.),
(f32::from(position.y - bounds.origin.y) / height).clamp(0., 1.),
)
}
fn touch(&self, phase: TouchPhase, position: Point<Pixels>) {
if let Some(stream) = &self.stream {
let (x, y) = self.screen_point(position);
stream.touch(phase, x, y);
}
}
fn on_key_down(&mut self, event: &KeyDownEvent, _: &mut Window, cx: &mut Context<Self>) {
let Some(stream) = &self.stream else { return };
let keystroke = &event.keystroke;
let mods = &keystroke.modifiers;
if keystroke.key == "v" && mods.control && !mods.alt {
if let Some(text) = cx.read_from_clipboard().and_then(|item| item.text()) {
stream.text(text);
}
cx.stop_propagation();
return;
}
// Leave the app's own shortcuts alone.
if mods.platform || (mods.control && keystroke.key != "c") {
return;
}
stream.key(Key {
key: keystroke.key.clone(),
text: keystroke.key_char.clone(),
shift: mods.shift,
command: mods.control || mods.alt || mods.platform,
});
cx.stop_propagation();
}
/// The shown aspect ratio, width over height.
fn aspect(&self) -> f32 {
match &self.screen {
Some(screen) => screen.aspect(),
None if self.device.platform == Platform::Ios => 9. / 19.5,
None => 9. / 20.,
}
}
// ---- rendering ----
fn render_screen(&self, cx: &mut Context<Self>) -> AnyElement {
let p = metal::palette(cx);
let entity = cx.entity().downgrade();
let track_area = canvas(
move |bounds, _, cx| {
let _ = entity.update(cx, |this, cx| {
if this.area != bounds {
this.area = bounds;
cx.notify();
}
});
},
|_, _, _, _| {},
)
.absolute()
.size_full();
let rail = if self.compact { 0. } else { RAIL_WIDTH };
let width = (f32::from(self.area.size.width) - rail - 16.).max(0.);
let height = (f32::from(self.area.size.height) - 16.).max(0.);
let aspect = self.aspect();
let (frame_w, frame_h) = if width / height.max(1.) > aspect { (height * aspect, height) } else { (width, width / aspect) };
let entity = cx.entity().downgrade();
let track_screen = canvas(
move |bounds, _, cx| {
let _ = entity.update(cx, |this, _| this.screen_area = bounds);
},
|_, _, _, _| {},
)
.absolute()
.size_full();
let streaming = self.status == Status::Streaming;
let screen = div()
.id("device-screen")
.relative()
.flex_none()
.w(px(frame_w))
.h(px(frame_h))
.rounded(px(if self.compact { 10. } else { 14. }))
.overflow_hidden()
.bg(black())
.cursor_default()
.child(track_screen)
.when_some(self.frame.as_ref(), |this, frame| {
this.child(img(ImageSource::Render(frame.image.clone())).size_full().object_fit(ObjectFit::Fill))
})
.children(self.ax.iter().map(|element| {
div()
.absolute()
.left(relative(element.x))
.top(relative(element.y))
.w(relative(element.width))
.h(relative(element.height))
.border_1()
.border_color(p.blue_ink.opacity(0.8))
.bg(p.blue_ink.opacity(0.1))
.when(!element.label.is_empty(), |this| {
this.child(
div()
.absolute()
.top(px(-14.))
.left_0()
.max_w_full()
.truncate()
.px(px(3.))
.rounded(px(2.))
.bg(p.blue_ink)
.text_size(px(9.))
.line_height(px(14.))
.text_color(white())
.child(element.label.clone()),
)
})
}))
.on_mouse_down(
MouseButton::Left,
cx.listener(|this, event: &MouseDownEvent, window, cx| {
this.focus_handle.focus(window, cx);
this.touching = true;
this.touch(TouchPhase::Begin, event.position);
cx.stop_propagation();
}),
)
.on_mouse_move(cx.listener(|this, event: &MouseMoveEvent, _, _| {
if this.touching && event.pressed_button == Some(MouseButton::Left) {
this.touch(TouchPhase::Move, event.position);
}
}))
.on_mouse_up(
MouseButton::Left,
cx.listener(|this, event: &MouseUpEvent, _, _| {
if std::mem::take(&mut this.touching) {
this.touch(TouchPhase::End, event.position);
}
}),
)
.on_mouse_up_out(
MouseButton::Left,
cx.listener(|this, event: &MouseUpEvent, _, _| {
if std::mem::take(&mut this.touching) {
this.touch(TouchPhase::End, event.position);
}
}),
);
let overlay = if streaming {
(!self.input_connected).then(|| {
let detail = self.input_detail.as_ref().map(|detail| format!(" ({detail})")).unwrap_or_default();
div()
.absolute()
.bottom(px(8.))
.left_0()
.right(px(rail))
.flex()
.justify_center()
.child(
div()
.px(px(8.))
.py(px(4.))
.rounded(px(6.))
.bg(p.s.opacity(0.9))
.text_size(px(11.5))
.text_color(p.ink3)
.child(format!("Input disconnected{detail}, reconnecting…")),
)
.into_any_element()
})
} else {
Some(self.render_loading(cx).into_any_element())
};
div()
.id("device-viewer")
.key_context("DeviceScreen")
.track_focus(&self.focus_handle)
.on_key_down(cx.listener(Self::on_key_down))
.relative()
.size_full()
.flex()
.items_center()
.justify_center()
.when(!self.compact, |this| this.pr(px(RAIL_WIDTH)))
.child(track_area)
.child(screen)
.children(overlay)
.when(!self.compact, |this| this.child(self.render_rail(cx)))
.into_any_element()
}
fn render_loading(&self, cx: &mut Context<Self>) -> impl IntoElement {
let p = metal::palette(cx);
let error = self.status == Status::Error;
let message: SharedString = if error {
self.status_detail.clone().unwrap_or_else(|| "Stream failed.".into())
} else {
"Connecting video…".into()
};
super::loading_view(
&self.device.name,
&format!("{} · {}", self.host_label, self.device.version),
message,
error,
p,
)
.absolute()
.inset_0()
.when(!self.compact, |this| this.right(px(RAIL_WIDTH)))
.bg(p.s)
.when(error, |this| {
this.child(
MetalButton::new("device-reconnect")
.compact()
.label("Reconnect")
.on_click(cx.listener(|this, _, _, cx| this.reconnect(cx))),
)
})
}
fn rail_button(
&self,
id: &'static str,
icon: impl Into<Icon>,
label: &'static str,
disabled: bool,
cx: &mut Context<Self>,
on_click: impl Fn(&mut Self, &mut Window, &mut Context<Self>) + 'static,
) -> MetalButton {
MetalButton::new(id)
.ghost()
.mini()
.icon(icon)
.tooltip(label)
.disabled(disabled)
.on_click(cx.listener(move |this, _, window, cx| on_click(this, window, cx)))
}
fn render_rail(&self, cx: &mut Context<Self>) -> impl IntoElement {
let p = metal::palette(cx);
let input_disabled = !self.input_connected || self.stream.is_none();
let settings = self.detail.as_ref().map(|detail| &detail.settings);
let dark = settings.and_then(|settings| settings.dark);
let text_size = settings.and_then(|settings| settings.text_size);
let controls_disabled = self.controls_disabled();
let platform = self.device.platform;
let press = |button: Button| move |this: &mut Self, _: &mut Window, _: &mut Context<Self>| {
if let Some(stream) = &this.stream {
stream.button(button);
}
};
let divider = || div().my(px(3.)).h(px(1.)).w(px(18.)).bg(p.rule);
let weak = cx.weak_entity();
let mut pill = v_flex()
.items_center()
.gap(px(3.))
.p(px(6.))
.rounded_full()
.raised(p)
.child(self.rail_button("device-home", Lucide::House, "Home", input_disabled, cx, press(Button::Home)));
if platform == Platform::Android {
let weak = weak.clone();
pill = pill
.child(self.rail_button("device-back", IconName::ChevronLeft, "Back", input_disabled, cx, press(Button::Back)))
.child(self.rail_button("device-recents", Lucide::Square, "Recents", input_disabled, cx, press(Button::Recents)))
.child(
MetalButton::new("device-rotate")
.ghost()
.mini()
.icon(Lucide::RotateCcw)
.tooltip("Rotate device")
.disabled(controls_disabled)
.dropdown_menu_with_anchor(Anchor::TopRight, move |menu, _, _| {
let pick = |orientation: Orientation| {
let weak = weak.clone();
move |_: &ClickEvent, _: &mut Window, cx: &mut App| {
let _ = weak.update(cx, |this, cx| this.act(Action::SetOrientation(orientation), cx));
}
};
menu.item(PopupMenuItem::new("Portrait").on_click(pick(Orientation::Portrait)))
.item(PopupMenuItem::new("Landscape").on_click(pick(Orientation::LandscapeLeft)))
}),
);
} else {
pill = pill.child(self.rail_button("device-rotate", Lucide::RotateCcw, "Rotate device", input_disabled, cx, |this, _, _| {
if let Some(stream) = &this.stream {
stream.rotate();
}
}));
}
let next_dark = dark != Some(true);
let text_weak = weak.clone();
let more_weak = weak.clone();
pill = pill
.child(divider())
.child(self.rail_button(
"device-appearance",
if dark == Some(true) { IconName::Sun } else { IconName::Moon },
if next_dark { "Switch device to dark mode" } else { "Switch device to light mode" },
controls_disabled || dark.is_none(),
cx,
move |this, _, cx| this.act(Action::SetAppearance(next_dark), cx),
))
.child(
MetalButton::new("device-text-size")
.ghost()
.mini()
.icon(Lucide::Type)
.tooltip("Device text size")
.disabled(controls_disabled || text_size.is_none())
.dropdown_menu_with_anchor(Anchor::TopRight, move |mut menu, _, _| {
menu = menu.min_w(px(160.));
for size in TextSize::ALL {
let weak = text_weak.clone();
menu = menu.item(PopupMenuItem::new(size.label()).checked(text_size == Some(size)).on_click(
move |_, _, cx| {
let _ = weak.update(cx, |this, cx| this.act(Action::SetTextSize(size), cx));
},
));
}
menu
}),
)
.child(
self.rail_button("device-tools", Lucide::SlidersHorizontal, "Device tools", false, cx, |this, _, cx| {
this.tools_open = !this.tools_open;
cx.notify();
})
.selected(self.tools_open),
)
.child(self.rail_button(
"device-screenshot",
Lucide::Camera,
if self.screenshot_pending { "Capturing screenshot" } else { "Save screenshot" },
self.status != Status::Streaming || self.screenshot_pending,
cx,
|this, _, cx| this.save_screenshot(cx),
))
.child(
MetalButton::new("device-more")
.ghost()
.mini()
.icon(IconName::Ellipsis)
.tooltip("More device actions")
.dropdown_menu_with_anchor(Anchor::BottomRight, move |menu, _, _| {
let emit = |event: fn() -> DeviceViewEvent| {
let weak = more_weak.clone();
move |_: &ClickEvent, _: &mut Window, cx: &mut App| {
let _ = weak.update(cx, |_, cx| cx.emit(event()));
}
};
menu.item(
PopupMenuItem::new("Float device over chat")
.icon(Icon::new(Lucide::PictureInPicture2))
.on_click(emit(|| DeviceViewEvent::Float)),
)
.item(PopupMenuItem::new("Close device panel").icon(Icon::new(Lucide::X)).on_click(emit(|| DeviceViewEvent::Close)))
.separator()
.item(PopupMenuItem::new("Power off device").icon(Icon::new(Lucide::Power)).on_click(emit(|| DeviceViewEvent::PowerOff)))
}),
);
div()
.absolute()
.top_0()
.bottom_0()
.right(px(8.))
.flex()
.flex_col()
.justify_center()
.child(pill)
}
fn render_tools(&self, cx: &mut Context<Self>) -> impl IntoElement {
let p = metal::palette(cx);
let ios = self.device.platform == Platform::Ios;
let disabled = self.controls_disabled();
let settings = self.detail.as_ref().map(|detail| detail.settings.clone()).unwrap_or_default();
let foreground = self.detail.as_ref().and_then(|detail| detail.foreground.clone());
let weak = cx.weak_entity();
let mut body = v_flex().id("device-tools-body").flex_1().min_h_0().overflow_y_scroll();
if let Some(error) = &self.error {
body = body.child(
div().px(px(12.)).py(px(8.)).bg(p.red.opacity(0.1)).text_size(px(11.5)).text_color(p.red).child(error.clone()),
);
}
if self.detail.is_none() && self.error.is_none() {
body = body.child(
h_flex()
.gap(px(8.))
.px(px(12.))
.py(px(10.))
.text_size(px(11.5))
.text_color(p.ink3)
.child(metal::led("device-reading", Led::Waiting, true, p))
.child("Reading device settings…"),
);
}
if let Some(diagnostics) = cx.global::<DeviceWatch>().state.host_detail.clone().filter(|_| cx.global::<DeviceWatch>().state.host_status == device::HostStatus::Ready) {
body = body.child(section("Host diagnostics", p).child(small_text(diagnostics, p)));
}
// App.
let mut app = section("App", p).child(row(
"Foreground",
div()
.min_w_0()
.truncate()
.font_family(metal::MONO)
.text_size(px(11.5))
.child(foreground.as_ref().map(|app| app.id.clone()).unwrap_or_else(|| "—".into())),
p,
));
if let Some(app_id) = foreground.as_ref().map(|app| app.id.clone()) {
let relaunch = app_id.clone();
app = app.child(
h_flex()
.gap(px(6.))
.child(small_button("device-terminate", "Terminate", disabled, cx, move |this, _, cx| {
this.act(Action::TerminateApp(app_id.clone()), cx)
}))
.child(small_button("device-relaunch", "Relaunch", disabled, cx, move |this, _, cx| {
this.act(Action::LaunchApp(relaunch.clone()), cx)
})),
);
}
app = app
.child(self.submit_row("device-open-url", &self.fields.url, "Open", disabled, cx, |text| Action::OpenUrl(text)))
.child(self.submit_row("device-launch", &self.fields.launch, "Launch", disabled, cx, |text| Action::LaunchApp(text)));
body = body.child(app);
// Simulator / Emulator.
let mut system = section(if ios { "Simulator" } else { "Emulator" }, p).child(row(
"Appearance",
{
let weak = weak.clone();
choice_segment("device-appearance-segment", &[(false, "Light"), (true, "Dark")], settings.dark, disabled, p, move |dark, _, cx| {
let _ = weak.update(cx, |this, cx| this.act(Action::SetAppearance(dark), cx));
})
},
p,
));
{
let weak = weak.clone();
system = system.child(row(
"Text size",
select(
"device-text-size-select",
settings.text_size.map(TextSize::label).unwrap_or("Unknown"),
disabled,
TextSize::ALL.iter().map(|size| (size.label(), settings.text_size == Some(*size))).collect(),
move |ix, cx| {
let _ = weak.update(cx, |this, cx| this.act(Action::SetTextSize(TextSize::ALL[ix]), cx));
},
),
p,
));
}
if ios {
let glass_weak = weak.clone();
let filter_weak = weak.clone();
system = system
.child(row(
"Liquid Glass",
choice_segment(
"device-liquid-glass",
&[(false, "Clear"), (true, "Tinted")],
settings.liquid_glass_tinted,
disabled || settings.liquid_glass_tinted.is_none(),
p,
move |tinted, _, cx| {
let _ = glass_weak.update(cx, |this, cx| this.act(Action::SetLiquidGlass(tinted), cx));
},
),
p,
))
.child(row(
"Color filter",
select(
"device-color-filter",
settings.color_filter.map(ColorFilter::label).unwrap_or("Unknown"),
disabled,
ColorFilter::ALL.iter().map(|filter| (filter.label(), settings.color_filter == Some(*filter))).collect(),
move |ix, cx| {
let _ = filter_weak.update(cx, |this, cx| this.act(Action::SetColorFilter(ColorFilter::ALL[ix]), cx));
},
),
p,
));
} else {
let weak = weak.clone();
system = system.child(row(
"Orientation",
select(
"device-orientation",
"Rotate to…",
disabled,
Orientation::ALL.iter().map(|orientation| (orientation.label(), false)).collect(),
move |ix, cx| {
let _ = weak.update(cx, |this, cx| this.act(Action::SetOrientation(Orientation::ALL[ix]), cx));
},
),
p,
));
}
let toggles: &[(Toggle, &str)] = if ios {
&[
(Toggle::ReduceMotion, "Reduce Motion"),
(Toggle::IncreaseContrast, "Increase Contrast"),
(Toggle::ReduceTransparency, "Reduce Transparency"),
(Toggle::ShowBorders, "Show Borders"),
(Toggle::VoiceOver, "VoiceOver"),
]
} else {
&[(Toggle::ReduceMotion, "Reduce Motion"), (Toggle::NetworkEnabled, "Network")]
};
for (toggle, label) in toggles {
let value = settings.toggle(*toggle);
let weak = weak.clone();
let toggle = *toggle;
system = system.child(row(
label,
switch(("device-toggle", toggle as usize), value, disabled, p, move |on, _, cx| {
let _ = weak.update(cx, |this, cx| this.act(Action::SetToggle { setting: toggle, value: on }, cx));
}),
p,
));
}
body = body.child(system);
// Accessibility.
{
let weak = weak.clone();
body = body.child(section("Accessibility", p).child(row(
"Overlay element frames",
switch("device-ax-overlay", Some(self.ax_overlay), self.stream.is_none(), p, move |on, _, cx| {
let _ = weak.update(cx, |this, cx| {
this.ax_overlay = on;
this.poll_ax(cx);
cx.notify();
});
}),
p,
)));
}
// Location.
{
let preset_weak = weak.clone();
let mut location = section("Location", p)
.child(
h_flex()
.gap(px(6.))
.child(field(&self.fields.latitude, p))
.child(field(&self.fields.longitude, p)),
)
.child(
h_flex()
.gap(px(6.))
.child(
MetalButton::new("device-location-preset")
.compact()
.label("Preset…")
.caret()
.disabled(disabled)
.dropdown_menu_with_anchor(Anchor::TopLeft, move |mut menu, _, _| {
for (label, latitude, longitude) in LOCATION_PRESETS {
let weak = preset_weak.clone();
menu = menu.item(PopupMenuItem::new(label).on_click(move |_, window, cx| {
let _ = weak.update(cx, |this, cx| {
this.fields.latitude.update(cx, |input, cx| input.set_value(latitude.to_string(), window, cx));
this.fields.longitude.update(cx, |input, cx| input.set_value(longitude.to_string(), window, cx));
this.act(Action::SetLocation { latitude, longitude }, cx);
});
}));
}
menu
}),
)
.child(small_button("device-location-set", "Set", disabled || self.location(cx).is_none(), cx, |this, _, cx| {
if let Some((latitude, longitude)) = this.location(cx) {
this.act(Action::SetLocation { latitude, longitude }, cx);
}
})),
);
if ios {
location = location.child(
MetalButton::new("device-location-clear")
.ghost()
.compact()
.label("Clear")
.disabled(disabled)
.on_click(cx.listener(|this, _, window, cx| {
this.fields.latitude.update(cx, |input, cx| input.set_value("", window, cx));
this.fields.longitude.update(cx, |input, cx| input.set_value("", window, cx));
this.act(Action::ClearLocation, cx);
})),
);
}
body = body.child(location);
}
// Permissions.
{
let permissions: &[(&'static str, &'static str)] = if ios { &IOS_PERMISSIONS } else { &ANDROID_PERMISSIONS };
let current = permissions.iter().find(|(key, _)| *key == self.permission).map(|(_, label)| *label).unwrap_or("Camera");
let app_id = self.permission_app(foreground.as_ref().map(|app| app.id.as_str()), cx);
let no_app = app_id.is_none();
let pick_weak = weak.clone();
let keys: Vec<&'static str> = permissions.iter().map(|(key, _)| *key).collect();
let decide = |decision: &'static str| {
let app_id = app_id.clone();
move |this: &mut Self, _: &mut Window, cx: &mut Context<Self>| {
if let Some(app_id) = app_id.clone() {
let permission = this.permission;
this.act(Action::SetPermission { app_id, permission, decision }, cx);
}
}
};
let mut buttons = h_flex()
.gap(px(6.))
.flex_wrap()
.child(select(
"device-permission",
current,
disabled,
permissions.iter().map(|(key, label)| (*label, *key == self.permission)).collect(),
move |ix, cx| {
let key = keys[ix];
let _ = pick_weak.update(cx, |this, cx| {
this.permission = key;
cx.notify();
});
},
))
.child(small_button("device-permission-grant", "Grant", disabled || no_app, cx, decide("grant")))
.child(small_button("device-permission-revoke", "Revoke", disabled || no_app, cx, decide("revoke")));
if ios {
buttons = buttons.child(small_button("device-permission-reset", "Reset", disabled || no_app, cx, decide("reset")));
}
body = body.child(section("Permissions", p).child(field(&self.fields.permission_app, p)).child(buttons));
}
if ios {
let app = foreground.as_ref().map(|app| app.id.clone());
let mut push = section("Push notification", p).child(self.submit_row(
"device-push",
&self.fields.push,
"Send",
disabled || app.is_none(),
cx,
move |text| Action::SendPush { app_id: app.clone().unwrap_or_default(), text },
));
if foreground.is_none() {
push = push.child(small_text("Open an app first.", p));
}
body = body.child(push);
}
v_flex()
.h_full()
.w(px(TOOLS_WIDTH))
.flex_none()
.bg(p.s)
.border_l_1()
.border_color(p.rule)
.child(
h_flex()
.h(px(36.))
.flex_none()
.px(px(12.))
.gap(px(8.))
.border_b_1()
.border_color(p.rule)
.child(div().text_size(px(13.)).font_weight(FontWeight::MEDIUM).child("Tools"))
.when(self.pending, |this| this.child(metal::led("device-tools-pending", Led::Waiting, true, p)))
.child(div().flex_1())
.child(
MetalButton::new("device-tools-close")
.ghost()
.mini()
.icon(Lucide::X)
.tooltip("Close tools")
.on_click(cx.listener(|this, _, _, cx| {
this.tools_open = false;
cx.notify();
})),
),
)
.child(body)
}
/// The latitude and longitude typed in, when both are valid.
fn location(&self, cx: &App) -> Option<(f64, f64)> {
let read = |input: &Entity<InputState>| input.read(cx).value().trim().parse::<f64>().ok();
let (latitude, longitude) = (read(&self.fields.latitude)?, read(&self.fields.longitude)?);
(latitude.abs() <= 90. && longitude.abs() <= 180.).then_some((latitude, longitude))
}
/// The app permissions apply to: the field, or the foreground app.
fn permission_app(&self, foreground: Option<&str>, cx: &App) -> Option<String> {
let typed = self.fields.permission_app.read(cx).value().trim().to_string();
if typed.is_empty() { foreground.map(str::to_string) } else { Some(typed) }
}
/// A text field with its button, which runs the action on its text.
fn submit_row(
&self,
id: &'static str,
input: &Entity<InputState>,
label: &'static str,
disabled: bool,
cx: &mut Context<Self>,
action: impl Fn(String) -> Action + 'static,
) -> impl IntoElement {
let p = metal::palette(cx);
let empty = input.read(cx).value().trim().is_empty();
let input_handle = input.clone();
h_flex().gap(px(6.)).child(field(input, p)).child(small_button(id, label, disabled || empty, cx, move |this, window, cx| {
let text = input_handle.read(cx).value().trim().to_string();
if text.is_empty() {
return;
}
this.act(action(text), cx);
input_handle.update(cx, |input, cx| input.set_value("", window, cx));
}))
}
}
impl Render for DeviceView {
fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
let p = metal::palette(cx);
let wide = f32::from(self.area.size.width) + if self.tools_open { TOOLS_WIDTH } else { 0. } >= TOOLS_BESIDE;
let screen = self.render_screen(cx);
let tools = (self.tools_open && !self.compact).then(|| self.render_tools(cx));
let error = (!self.tools_open).then(|| self.error.clone()).flatten();
h_flex()
.relative()
.size_full()
.bg(p.s)
.child(
v_flex()
.relative()
.flex_1()
.min_w_0()
.h_full()
.when_some(error.filter(|_| !self.compact), |this, error| {
this.child(div().px(px(12.)).py(px(6.)).text_size(px(11.5)).text_color(p.red).child(error))
})
.child(div().flex_1().min_h_0().child(screen)),
)
.when_some(tools, |this, tools| {
if wide {
this.child(tools)
} else {
this.child(div().absolute().top_0().bottom_0().right_0().shadow_lg().child(tools))
}
})
}
}
fn section(title: &'static str, p: &Palette) -> Div {
v_flex()
.gap(px(8.))
.px(px(12.))
.py(px(10.))
.border_b_1()
.border_color(p.rule)
.child(div().text_size(px(11.5)).font_weight(FontWeight::MEDIUM).text_color(p.ink3).child(title))
}
fn row(label: &str, control: impl IntoElement, p: &Palette) -> Div {
h_flex()
.min_h(px(26.))
.gap(px(12.))
.justify_between()
.child(div().flex_none().text_size(px(11.5)).text_color(p.ink3).child(label.to_string()))
.child(h_flex().min_w_0().justify_end().child(control))
}
fn small_text(text: impl Into<SharedString>, p: &Palette) -> Div {
div().text_size(px(11.5)).line_height(px(16.)).text_color(p.ink3).child(text.into())
}
fn field(input: &Entity<InputState>, p: &Palette) -> Div {
h_flex()
.flex_1()
.min_w_0()
.h(px(26.))
.px(px(8.))
.rounded(px(8.))
.well(p)
.text_color(p.ink)
.child(Input::new(input).appearance(false).xsmall())
}
fn small_button(
id: &'static str,
label: &'static str,
disabled: bool,
cx: &mut Context<DeviceView>,
on_click: impl Fn(&mut DeviceView, &mut Window, &mut Context<DeviceView>) + 'static,
) -> MetalButton {
MetalButton::new(id).compact().label(label).disabled(disabled).on_click(cx.listener(move |this, _, window, cx| on_click(this, window, cx)))
}
/// A switch that shows unknown values as off and can't be flipped then.
fn switch(
id: impl Into<ElementId>,
value: Option<bool>,
disabled: bool,
p: &Palette,
on_toggle: impl Fn(bool, &mut Window, &mut App) + 'static,
) -> AnyElement {
let blocked = disabled || value.is_none();
metal::toggle(id, value.unwrap_or(false), p, move |on, window, cx| {
if !blocked {
on_toggle(on, window, cx);
}
})
.when(blocked, |this| this.opacity(0.5).cursor_default())
.into_any_element()
}
/// Two options as a segmented switch; an unknown value raises neither.
fn choice_segment(
id: &'static str,
options: &[(bool, &'static str)],
value: Option<bool>,
disabled: bool,
p: &Palette,
on_pick: impl Fn(bool, &mut Window, &mut App) + 'static,
) -> AnyElement {
// `segmented` needs a current value; an unknown one picks an option nobody has.
let options: Vec<(Option<bool>, &'static str)> = options.iter().map(|(value, label)| (Some(*value), *label)).collect();
metal::segmented(id, &options, value, p, move |picked, window, cx| {
if !disabled && let Some(picked) = picked {
on_pick(picked, window, cx);
}
})
.when(disabled, |this| this.opacity(0.5))
.into_any_element()
}
/// A dropdown of labelled options; `on_pick` gets the picked index.
fn select(
id: &'static str,
current: &'static str,
disabled: bool,
options: Vec<(&'static str, bool)>,
on_pick: impl Fn(usize, &mut App) + 'static,
) -> AnyElement {
let on_pick = std::rc::Rc::new(on_pick);
MetalButton::new(id)
.compact()
.label(current)
.caret()
.disabled(disabled)
.dropdown_menu_with_anchor(Anchor::TopRight, move |mut menu, _, _| {
for (ix, (label, checked)) in options.iter().enumerate() {
let on_pick = on_pick.clone();
menu = menu.item(PopupMenuItem::new(*label).checked(*checked).on_click(move |_, _, cx| on_pick(ix, cx)));
}
menu
})
.into_any_element()
}