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

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
This commit is contained in:
Danilo Leal
2025-11-24 12:28:23 -03:00
committed by GitHub
parent eff592c447
commit d6c550c838
+13 -1
View File
@@ -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)
}),
),
),