debugger: Add refinements to the UI (#35940)

Took a little bit of time to add just a handful of small tweaks to the
debugger UI so it looks slightly more polished. This PR includes
adjustments to size, focus styles, and more in icon buttons, overall
spacing nudges in each section pane, making tooltip labels title case
(for overall consistency), and some icon SVG iteration.

Release Notes:

- N/A
This commit is contained in:
Danilo Leal 2025-08-10 15:23:27 -03:00 committed by GitHub
parent 95e302fa68
commit f3d6deb5a3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 263 additions and 204 deletions

View file

@ -48,10 +48,8 @@ use task::{
};
use terminal_view::TerminalView;
use ui::{
ActiveTheme, AnyElement, App, ButtonCommon as _, Clickable as _, Context, FluentBuilder,
IconButton, IconName, IconSize, InteractiveElement, IntoElement, Label, LabelCommon as _,
ParentElement, Render, SharedString, StatefulInteractiveElement, Styled, Tab, Tooltip,
VisibleOnHover, VisualContext, Window, div, h_flex, v_flex,
FluentBuilder, IntoElement, Render, StatefulInteractiveElement, Tab, Tooltip, VisibleOnHover,
VisualContext, prelude::*,
};
use util::ResultExt;
use variable_list::VariableList;
@ -419,13 +417,14 @@ pub(crate) fn new_debugger_pane(
.map_or(false, |item| item.read(cx).hovered);
h_flex()
.group(pane_group_id.clone())
.justify_between()
.bg(cx.theme().colors().tab_bar_background)
.border_b_1()
.px_2()
.border_color(cx.theme().colors().border)
.track_focus(&focus_handle)
.group(pane_group_id.clone())
.pl_1p5()
.pr_1()
.justify_between()
.border_b_1()
.border_color(cx.theme().colors().border)
.bg(cx.theme().colors().tab_bar_background)
.on_action(|_: &menu::Cancel, window, cx| {
if cx.stop_active_drag(window) {
return;
@ -514,6 +513,7 @@ pub(crate) fn new_debugger_pane(
)
.child({
let zoomed = pane.is_zoomed();
h_flex()
.visible_on_hover(pane_group_id)
.when(is_hovered, |this| this.visible())
@ -537,7 +537,7 @@ pub(crate) fn new_debugger_pane(
IconName::Maximize
},
)
.icon_size(IconSize::XSmall)
.icon_size(IconSize::Small)
.on_click(cx.listener(move |pane, _, _, cx| {
let is_zoomed = pane.is_zoomed();
pane.set_zoomed(!is_zoomed, cx);
@ -592,10 +592,11 @@ impl DebugTerminal {
}
impl gpui::Render for DebugTerminal {
fn render(&mut self, _window: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
div()
.size_full()
.track_focus(&self.focus_handle)
.size_full()
.bg(cx.theme().colors().editor_background)
.children(self.terminal.clone())
}
}