debugger: Change console text color, add tooltips (#31765)

Piotr Osiewicz created 6 months ago

- Improved legibility of console text:

| Theme | Dark | Light |
|--------|--------|--------|
| Before |
![image](https://github.com/user-attachments/assets/756da36d-9ef4-495a-9cf9-7249c25d106a)
|
![image](https://github.com/user-attachments/assets/42558ec2-ee08-4973-8f7d-d7f4feb38cf8)
|
| After |
![image](https://github.com/user-attachments/assets/4469f000-b34f-4cbb-819d-4ae1f2f58a4a)
|
![image](https://github.com/user-attachments/assets/3b862114-0fd3-427c-9c76-f030d3442090)
|

Release Notes:

- debugger: Improved legibility of console text
- debugger: Added tooltips to all debugger items.

Change summary

crates/debugger_ui/src/persistence.rs             | 22 +++++++++++++++++
crates/debugger_ui/src/session/running.rs         |  7 +++++
crates/debugger_ui/src/session/running/console.rs | 18 +++++++------
3 files changed, 39 insertions(+), 8 deletions(-)

Detailed changes

crates/debugger_ui/src/persistence.rs

@@ -61,6 +61,28 @@ impl DebuggerPaneItem {
             DebuggerPaneItem::Terminal => SharedString::new_static("Terminal"),
         }
     }
+    pub(crate) fn tab_tooltip(self) -> SharedString {
+        let tooltip = match self {
+            DebuggerPaneItem::Console => {
+                "Displays program output and allows manual input of debugger commands."
+            }
+            DebuggerPaneItem::Variables => {
+                "Shows current values of local and global variables in the current stack frame."
+            }
+            DebuggerPaneItem::BreakpointList => "Lists all active breakpoints set in the code.",
+            DebuggerPaneItem::Frames => {
+                "Displays the call stack, letting you navigate between function calls."
+            }
+            DebuggerPaneItem::Modules => "Shows all modules or libraries loaded by the program.",
+            DebuggerPaneItem::LoadedSources => {
+                "Lists all source files currently loaded and used by the debugger."
+            }
+            DebuggerPaneItem::Terminal => {
+                "Provides an interactive terminal session within the debugging environment."
+            }
+        };
+        SharedString::new_static(tooltip)
+    }
 }
 
 impl From<DebuggerPaneItem> for SharedString {

crates/debugger_ui/src/session/running.rs

@@ -173,6 +173,10 @@ impl Item for SubView {
         self.kind.to_shared_string()
     }
 
+    fn tab_tooltip_text(&self, _: &App) -> Option<SharedString> {
+        Some(self.kind.tab_tooltip())
+    }
+
     fn tab_content(
         &self,
         params: workspace::item::TabContentParams,
@@ -399,6 +403,9 @@ pub(crate) fn new_debugger_pane(
                                     .p_1()
                                     .rounded_md()
                                     .cursor_pointer()
+                                    .when_some(item.tab_tooltip_text(cx), |this, tooltip| {
+                                        this.tooltip(Tooltip::text(tooltip))
+                                    })
                                     .map(|this| {
                                         let theme = cx.theme();
                                         if selected {

crates/debugger_ui/src/session/running/console.rs

@@ -176,16 +176,18 @@ impl Console {
     }
 
     fn render_console(&self, cx: &Context<Self>) -> impl IntoElement {
-        EditorElement::new(&self.console, self.editor_style(cx))
+        EditorElement::new(&self.console, Self::editor_style(&self.console, cx))
     }
 
-    fn editor_style(&self, cx: &Context<Self>) -> EditorStyle {
+    fn editor_style(editor: &Entity<Editor>, cx: &Context<Self>) -> EditorStyle {
+        let is_read_only = editor.read(cx).read_only(cx);
         let settings = ThemeSettings::get_global(cx);
+        let theme = cx.theme();
         let text_style = TextStyle {
-            color: if self.console.read(cx).read_only(cx) {
-                cx.theme().colors().text_disabled
+            color: if is_read_only {
+                theme.colors().text_muted
             } else {
-                cx.theme().colors().text
+                theme.colors().text
             },
             font_family: settings.buffer_font.family.clone(),
             font_features: settings.buffer_font.features.clone(),
@@ -195,15 +197,15 @@ impl Console {
             ..Default::default()
         };
         EditorStyle {
-            background: cx.theme().colors().editor_background,
-            local_player: cx.theme().players().local(),
+            background: theme.colors().editor_background,
+            local_player: theme.players().local(),
             text: text_style,
             ..Default::default()
         }
     }
 
     fn render_query_bar(&self, cx: &Context<Self>) -> impl IntoElement {
-        EditorElement::new(&self.query_bar, self.editor_style(cx))
+        EditorElement::new(&self.query_bar, Self::editor_style(&self.query_bar, cx))
     }
 
     fn update_output(&mut self, window: &mut Window, cx: &mut Context<Self>) {