debugger: Improve debugger panel empty state (#32889)

Nate Butler created 7 months ago

Before:

![CleanShot 2025-06-17 at 13 48
58@2x](https://github.com/user-attachments/assets/16ecebfa-871e-4a2d-b6a3-2178de70aaef)

After:

![CleanShot 2025-06-17 at 13 49
24@2x](https://github.com/user-attachments/assets/2d8a0444-6088-45f1-a880-0bdd0aef968e)


Release Notes:

- N/A (Beta: Improved the debugger panel when there are no currently
active sessions)

Change summary

assets/icons/blocks.svg                  |  2 
crates/debugger_ui/src/debugger_panel.rs | 76 +++++++++++++++++--------
crates/zed/src/zed.rs                    |  3 
crates/zed/src/zed/app_menus.rs          |  2 
crates/zed_actions/src/lib.rs            |  9 ++
5 files changed, 61 insertions(+), 31 deletions(-)

Detailed changes

assets/icons/blocks.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-blocks"><rect width="7" height="7" x="14" y="3" rx="1"/><path d="M10 21V8a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1H3"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-blocks-icon lucide-blocks"><rect width="7" height="7" x="14" y="3" rx="1"/><path d="M10 21V8a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1H3"/></svg>

crates/debugger_ui/src/debugger_panel.rs

@@ -1428,33 +1428,57 @@ impl Render for DebugPanel {
                             .items_center()
                             .justify_center()
                             .child(
-                                h_flex().child(
-                                    Label::new("No Debugging Sessions")
-                                        .size(LabelSize::Small)
-                                        .color(Color::Muted),
-                                ),
-                            )
-                            .child(
-                                v_flex().gap_4().items_center()
-                                .justify_center()
-                                .child(
-                                    h_flex().flex_shrink().child(
-                                        Button::new("spawn-new-session-empty-state", "New Session")
-                                            .size(ButtonSize::Large)
-                                            .on_click(|_, window, cx| {
-                                                window.dispatch_action(crate::Start.boxed_clone(), cx);
-                                            })
-                                    )
-                                )
-                                .child(
-                                    h_flex().flex_shrink().child(
-                                        Button::new("spawn-new-session-install-extensions", "Install Debug Extensions")
-                                            .label_size(LabelSize::Small)
-                                            .on_click(|_, window, cx| {
-                                                window.dispatch_action(zed_actions::Extensions { category_filter: Some(zed_actions::ExtensionCategoryFilter::DebugAdapters)}.boxed_clone(), cx);
-                                            })
+                                h_flex()
+                                    .items_start()
+                                    .gap_8()
+                                    .child(
+                                        v_flex()
+                                            .gap_2()
+                                            .pr_8()
+                                            .child(
+                                                Button::new("spawn-new-session-empty-state", "New Session")
+                                                    .icon(IconName::Plus)
+                                                    .icon_size(IconSize::XSmall)
+                                                    .icon_color(Color::Muted)
+                                                    .icon_position(IconPosition::Start)
+                                                    .on_click(|_, window, cx| {
+                                                        window.dispatch_action(crate::Start.boxed_clone(), cx);
+                                                    })
+                                            )
+                                            .child(
+                                                Button::new("edit-debug-settings", "Edit debug.json")
+                                                    .icon(IconName::Code)
+                                                    .icon_size(IconSize::XSmall)
+                                                    .color(Color::Muted)
+                                                    .icon_color(Color::Muted)
+                                                    .icon_position(IconPosition::Start)
+                                                    .on_click(|_, window, cx| {
+                                                        window.dispatch_action(zed_actions::OpenProjectDebugTasks.boxed_clone(), cx);
+                                                    })
+                                            )
+                                            .child(
+                                                Button::new("open-debugger-docs", "Debugger Docs")
+                                                    .icon(IconName::Book)
+                                                    .color(Color::Muted)
+                                                    .icon_size(IconSize::XSmall)
+                                                    .icon_color(Color::Muted)
+                                                    .icon_position(IconPosition::Start)
+                                                    .on_click(|_, _, cx| {
+                                                        cx.open_url("https://zed.dev/docs/debugger")
+                                                    })
+                                            )
+                                            .child(
+                                                Button::new("spawn-new-session-install-extensions", "Debugger Extensions")
+                                                    .icon(IconName::Blocks)
+                                                    .color(Color::Muted)
+                                                    .icon_size(IconSize::XSmall)
+                                                    .icon_color(Color::Muted)
+                                                    .icon_position(IconPosition::Start)
+                                                    .on_click(|_, window, cx| {
+                                                        window.dispatch_action(zed_actions::Extensions { category_filter: Some(zed_actions::ExtensionCategoryFilter::DebugAdapters)}.boxed_clone(), cx);
+                                                    })
+                                            )
                                     )
-                                )
                             )
                     )
                 }

crates/zed/src/zed.rs

@@ -86,7 +86,6 @@ actions!(
         OpenDefaultSettings,
         OpenProjectSettings,
         OpenProjectTasks,
-        OpenProjectDebugTasks,
         OpenTasks,
         OpenDebugTasks,
         ResetDatabase,
@@ -1512,7 +1511,7 @@ fn open_project_tasks_file(
 
 fn open_project_debug_tasks_file(
     workspace: &mut Workspace,
-    _: &OpenProjectDebugTasks,
+    _: &zed_actions::OpenProjectDebugTasks,
     window: &mut Window,
     cx: &mut Context<Workspace>,
 ) {

crates/zed/src/zed/app_menus.rs

@@ -215,7 +215,7 @@ pub fn app_menus() -> Vec<Menu> {
                 MenuItem::action("Start Debugger", debugger_ui::Start),
                 MenuItem::separator(),
                 MenuItem::action("Edit tasks.json...", crate::zed::OpenProjectTasks),
-                MenuItem::action("Edit debug.json...", crate::zed::OpenProjectDebugTasks),
+                MenuItem::action("Edit debug.json...", zed_actions::OpenProjectDebugTasks),
                 MenuItem::separator(),
                 MenuItem::action("Continue", debugger_ui::Continue),
                 MenuItem::action("Step Over", debugger_ui::StepOver),

crates/zed_actions/src/lib.rs

@@ -349,4 +349,11 @@ pub mod outline {
 actions!(zed_predict_onboarding, [OpenZedPredictOnboarding]);
 actions!(git_onboarding, [OpenGitIntegrationOnboarding]);
 
-actions!(debugger, [ToggleEnableBreakpoint, UnsetBreakpoint]);
+actions!(
+    debugger,
+    [
+        ToggleEnableBreakpoint,
+        UnsetBreakpoint,
+        OpenProjectDebugTasks,
+    ]
+);