debugger_ui: Add button to close the panel when docked to bottom (#43409)

Danilo Leal created 3 weeks ago

This PR adds a button to close the panel when it is docked to the
bottom. Effectively, the button triggers the same `ToggleBottomDock`
action that clicking on the button that opened the panel triggers, but I
think having it there just makes it extra obvious how to close it, which
is beneficial.

As a bonus, also fixed the panel controls container height when it is
docked to the sides, so it perfectly aligns with the panel tabbar
height.

| Perfectly Aligned Header | Close Button |
|--------|--------|
| <img width="2620" height="2010" alt="Screenshot 2025-11-24 at 12  01
2@2x"
src="https://github.com/user-attachments/assets/08a50858-1b50-4ebd-af7a-c5dae32cf4f6"
/> | <img width="2620" height="2010" alt="Screenshot 2025-11-24 at 12 
01@2x"
src="https://github.com/user-attachments/assets/17a6eee0-9934-4949-8741-fffd5b106e95"
/> |

Release Notes:

- N/A

Change summary

crates/debugger_ui/src/debugger_panel.rs | 14 +++++++++++++-
1 file changed, 13 insertions(+), 1 deletion(-)

Detailed changes

crates/debugger_ui/src/debugger_panel.rs

@@ -651,6 +651,17 @@ impl DebugPanel {
                 .tooltip(Tooltip::text("Open Debug Adapter Logs"))
         };
 
+        let close_bottom_panel_button = {
+            h_flex().pl_0p5().gap_1().child(Divider::vertical()).child(
+                IconButton::new("debug-close-panel", IconName::Close)
+                    .icon_size(IconSize::Small)
+                    .on_click(move |_, window, cx| {
+                        window.dispatch_action(workspace::ToggleBottomDock.boxed_clone(), cx)
+                    })
+                    .tooltip(Tooltip::text("Close Panel")),
+            )
+        };
+
         Some(
             div.w_full()
                 .py_1()
@@ -658,7 +669,7 @@ impl DebugPanel {
                 .justify_between()
                 .border_b_1()
                 .border_color(cx.theme().colors().border)
-                .when(is_side, |this| this.gap_1())
+                .when(is_side, |this| this.gap_1().h(Tab::container_height(cx)))
                 .child(
                     h_flex()
                         .justify_between()
@@ -957,6 +968,7 @@ impl DebugPanel {
                                         .child(edit_debug_json_button())
                                         .child(documentation_button())
                                         .child(logs_button())
+                                        .child(close_bottom_panel_button)
                                 }),
                         ),
                 ),