1use gpui::{
2 ClickEvent, DismissEvent, Entity, EventEmitter, FocusHandle, Focusable, MouseDownEvent, Render,
3};
4use ui::{TintColor, Vector, VectorName, prelude::*};
5use workspace::{ModalView, Workspace};
6
7use crate::DebugPanel;
8
9macro_rules! debugger_onboarding_event {
10 ($name:expr) => {
11 telemetry::event!($name, source = "Debugger Onboarding");
12 };
13 ($name:expr, $($key:ident $(= $value:expr)?),+ $(,)?) => {
14 telemetry::event!($name, source = "Debugger Onboarding", $($key $(= $value)?),+);
15 };
16}
17
18pub struct DebuggerOnboardingModal {
19 focus_handle: FocusHandle,
20 workspace: Entity<Workspace>,
21}
22
23impl DebuggerOnboardingModal {
24 pub fn toggle(workspace: &mut Workspace, window: &mut Window, cx: &mut Context<Workspace>) {
25 let workspace_entity = cx.entity();
26 workspace.toggle_modal(window, cx, |_window, cx| Self {
27 workspace: workspace_entity,
28 focus_handle: cx.focus_handle(),
29 });
30 }
31
32 fn open_panel(&mut self, _: &ClickEvent, window: &mut Window, cx: &mut Context<Self>) {
33 self.workspace.update(cx, |workspace, cx| {
34 workspace.focus_panel::<DebugPanel>(window, cx);
35 });
36
37 cx.emit(DismissEvent);
38
39 debugger_onboarding_event!("Open Panel Clicked");
40 }
41
42 fn view_blog(&mut self, _: &ClickEvent, _: &mut Window, cx: &mut Context<Self>) {
43 cx.open_url("https://zed.dev/blog/debugger");
44 cx.notify();
45
46 debugger_onboarding_event!("Blog Link Clicked");
47 }
48
49 fn cancel(&mut self, _: &menu::Cancel, _: &mut Window, cx: &mut Context<Self>) {
50 cx.emit(DismissEvent);
51 }
52}
53
54impl EventEmitter<DismissEvent> for DebuggerOnboardingModal {}
55
56impl Focusable for DebuggerOnboardingModal {
57 fn focus_handle(&self, _cx: &App) -> FocusHandle {
58 self.focus_handle.clone()
59 }
60}
61
62impl ModalView for DebuggerOnboardingModal {}
63
64impl Render for DebuggerOnboardingModal {
65 fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
66 let window_height = window.viewport_size().height;
67 let max_height = window_height - px(200.);
68
69 let base = v_flex()
70 .id("debugger-onboarding")
71 .key_context("DebuggerOnboardingModal")
72 .relative()
73 .w(px(450.))
74 .h_full()
75 .max_h(max_height)
76 .p_4()
77 .gap_2()
78 .elevation_3(cx)
79 .track_focus(&self.focus_handle(cx))
80 .overflow_hidden()
81 .on_action(cx.listener(Self::cancel))
82 .on_action(cx.listener(|_, _: &menu::Cancel, _window, cx| {
83 debugger_onboarding_event!("Canceled", trigger = "Action");
84 cx.emit(DismissEvent);
85 }))
86 .on_any_mouse_down(cx.listener(|this, _: &MouseDownEvent, window, _cx| {
87 this.focus_handle.focus(window);
88 }))
89 .child(
90 div()
91 .absolute()
92 .top(px(-8.0))
93 .right_0()
94 .w(px(400.))
95 .h(px(92.))
96 .child(
97 Vector::new(
98 VectorName::DebuggerGrid,
99 rems_from_px(400.),
100 rems_from_px(92.),
101 )
102 .color(ui::Color::Custom(cx.theme().colors().text.alpha(0.32))),
103 ),
104 )
105 .child(
106 div()
107 .absolute()
108 .inset_0()
109 .size_full()
110 .bg(gpui::linear_gradient(
111 175.,
112 gpui::linear_color_stop(
113 cx.theme().colors().elevated_surface_background,
114 0.,
115 ),
116 gpui::linear_color_stop(
117 cx.theme().colors().elevated_surface_background.opacity(0.),
118 0.8,
119 ),
120 )),
121 )
122 .child(
123 v_flex()
124 .w_full()
125 .gap_1()
126 .child(
127 Label::new("Introducing")
128 .size(LabelSize::Small)
129 .color(Color::Muted),
130 )
131 .child(Headline::new("Zed's Debugger").size(HeadlineSize::Large)),
132 )
133 .child(h_flex().absolute().top_2().right_2().child(
134 IconButton::new("cancel", IconName::Close).on_click(cx.listener(
135 |_, _: &ClickEvent, _window, cx| {
136 debugger_onboarding_event!("Cancelled", trigger = "X click");
137 cx.emit(DismissEvent);
138 },
139 )),
140 ));
141
142 let open_panel_button = Button::new("open-panel", "Get Started with the Debugger")
143 .icon_size(IconSize::Indicator)
144 .style(ButtonStyle::Tinted(TintColor::Accent))
145 .full_width()
146 .on_click(cx.listener(Self::open_panel));
147
148 let blog_post_button = Button::new("view-blog", "Check out the Blog Post")
149 .icon(IconName::ArrowUpRight)
150 .icon_size(IconSize::Indicator)
151 .icon_color(Color::Muted)
152 .full_width()
153 .on_click(cx.listener(Self::view_blog));
154
155 let copy = "It's finally here: Native support for debugging across multiple programming languages.";
156
157 base.child(Label::new(copy).color(Color::Muted)).child(
158 v_flex()
159 .w_full()
160 .mt_2()
161 .gap_2()
162 .child(open_panel_button)
163 .child(blog_post_button),
164 )
165 }
166}