Add LSP logs clear button

Kirill Bulatov created 2 years ago

Change summary

crates/language_tools/src/lsp_log.rs | 52 +++++++++++++++++++++++++----
crates/theme/src/theme.rs            |  1 
styles/src/style_tree/toolbar.ts     |  9 ++++
styles/src/style_tree/workspace.ts   |  2 +
4 files changed, 56 insertions(+), 8 deletions(-)

Detailed changes

crates/language_tools/src/lsp_log.rs

@@ -570,10 +570,12 @@ impl View for LspLogToolbarItemView {
         let Some(log_view) = self.log_view.as_ref() else {
             return Empty::new().into_any();
         };
-        let log_view = log_view.read(cx);
-        let menu_rows = log_view.menu_items(cx).unwrap_or_default();
+        let (menu_rows, current_server_id) = log_view.update(cx, |log_view, cx| {
+            let menu_rows = log_view.menu_items(cx).unwrap_or_default();
+            let current_server_id = log_view.current_server_id;
+            (menu_rows, current_server_id)
+        });
 
-        let current_server_id = log_view.current_server_id;
         let current_server = current_server_id.and_then(|current_server_id| {
             if let Ok(ix) = menu_rows.binary_search_by_key(&current_server_id, |e| e.server_id) {
                 Some(menu_rows[ix].clone())
@@ -583,8 +585,7 @@ impl View for LspLogToolbarItemView {
         });
 
         enum Menu {}
-
-        Stack::new()
+        let lsp_menu = Stack::new()
             .with_child(Self::render_language_server_menu_header(
                 current_server,
                 &theme,
@@ -631,8 +632,45 @@ impl View for LspLogToolbarItemView {
             })
             .aligned()
             .left()
-            .clipped()
-            .into_any()
+            .clipped();
+
+        enum LspCleanupButton {}
+        let log_cleanup_button =
+            MouseEventHandler::new::<LspCleanupButton, _>(1, cx, |state, cx| {
+                let theme = theme::current(cx).clone();
+                let style = theme
+                    .workspace
+                    .toolbar
+                    .toggleable_text_tool
+                    .active_state()
+                    .style_for(state);
+                Label::new("Clear", style.text.clone())
+                    .aligned()
+                    .contained()
+                    .with_style(style.container)
+            })
+            .on_click(MouseButton::Left, move |_, this, cx| {
+                if let Some(log_view) = this.log_view.as_ref() {
+                    log_view.update(cx, |log_view, cx| {
+                        log_view.editor.update(cx, |editor, cx| {
+                            editor.set_read_only(false);
+                            editor.clear(cx);
+                            editor.set_read_only(true);
+                        });
+                    })
+                }
+            })
+            .with_cursor_style(CursorStyle::PointingHand)
+            .aligned()
+            .right();
+
+        Flex::row()
+            .with_child(lsp_menu)
+            .with_child(log_cleanup_button)
+            .contained()
+            .aligned()
+            .left()
+            .into_any_named("lsp log controls")
     }
 }
 

crates/theme/src/theme.rs

@@ -408,6 +408,7 @@ pub struct Toolbar {
     pub height: f32,
     pub item_spacing: f32,
     pub toggleable_tool: Toggleable<Interactive<IconButton>>,
+    pub toggleable_text_tool: Toggleable<Interactive<ContainedText>>,
     pub breadcrumb_height: f32,
     pub breadcrumbs: Interactive<ContainedText>,
 }

styles/src/style_tree/toolbar.ts

@@ -1,7 +1,8 @@
 import { useTheme } from "../common"
 import { toggleable_icon_button } from "../component/icon_button"
-import { interactive } from "../element"
+import { interactive, toggleable } from "../element"
 import { background, border, foreground, text } from "./components"
+import { text_button } from "../component";
 
 export const toolbar = () => {
     const theme = useTheme()
@@ -34,5 +35,11 @@ export const toolbar = () => {
                 },
             },
         }),
+        toggleable_text_tool: toggleable({
+            state: {
+                inactive: text_button({ variant: "ghost", layer: theme.highest, disabled: true, margin: { right: 4 }, text_properties: { size: "sm" } }),
+                active: text_button({ variant: "ghost", layer: theme.highest, margin: { right: 4 }, text_properties: { size: "sm" } })
+            }
+        }),
     }
 }

styles/src/style_tree/workspace.ts

@@ -19,6 +19,8 @@ export default function workspace(): any {
 
     const { is_light } = theme
 
+    const TOOLBAR_ITEM_SPACING = 8;
+
     return {
         background: background(theme.lowest),
         blank_pane: {