Add process ID to terminal tab tooltips

[Angelk90]

Closes #12807

Before	After

Release Notes:

• Added the process ID (PID) to terminal tab tooltips.

[Angelk90]

@danilo-leal : Do you think it is possible to create a customizable tooltip to be used for the terminal tab and not only, like the one you created for git blame #17517?

With the fields title, details where the details would be an array, for each detail a separation is made, the final part customizable.

[Angelk90]

@danilo-leal , @maxdeviant : I was thinking of using a similar code to create a custom tooltip but I don't know how I can use it inside :

File:
crates/terminal_view/src/terminal_view.rs

Code:

fn tab_tooltip_text(&self, cx: &AppContext) -> Option<SharedString> {
...
}

Use:

let details = Details {
            details: vec![
                vec![
                    "Process ID (PID): 3000".to_string(),
                    "Command line: /bin/zsh '-il'".to_string(),
                ],
                vec![
                    "Shell integration activated".to_string(),
                ],
                vec![
                    "The following extensions have contributed to this terminal's environment:".to_string(),
                    "JavaScript Debugger: Enables Node.js auto attach debugging in \"onlyWithFlag\" mode".to_string(),
                    "Git: Enables the following features: git auth provider".to_string(),
                ],
            ],
        };
    
let entry_tooltip = create_entry_tooltip(Some("Tooltip Title".to_string()), Some(details));

/crates/editor/src/entry_tooltip.rs

use gpui::{
    ParentElement, Render, ScrollHandle,
    StatefulInteractiveElement,
};
use ui::{prelude::*, tooltip_container};
pub struct Details {
    pub details: Vec<Vec<String>>,
}
pub struct EntryTooltip {
    title: Option<String>,
    details: Option<Details>,
    scroll_handle: ScrollHandle,
}

impl EntryTooltip {
    pub fn new(
        title: Option<String>,
        details: Option<Details>,
    ) -> Self {
        Self {
            title,
            details,
            scroll_handle: ScrollHandle::new(),
        }
    }
}

pub fn create_entry_tooltip(
    title: Option<String>,
    details: Option<Details>,
) -> EntryTooltip {
    EntryTooltip::new(title, details)
}

impl Render for EntryTooltip {
    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
        let title = self
            .title
            .clone()
            .unwrap_or_else(|| "<no title>".to_string());

        let message = self.details.as_ref().map_or(vec![], |details| {
            details.details.iter().flat_map(|section| {
                section.iter().map(|line| {
                    div()
                        .child(line.clone())
                        .py_1()
                }).collect::<Vec<_>>()
            }).collect::<Vec<_>>()
        });

        let message_element = v_flex().children(message);

        tooltip_container(cx, move |this, cx| {
            this.occlude()
                .on_mouse_move(|_, cx| cx.stop_propagation())
                .child(
                    v_flex()
                        .w(gpui::rems(30.))
                        .gap_4()
                        .child(
                            h_flex()
                                .pb_1p5()
                                .gap_x_2()
                                .overflow_x_hidden()
                                .flex_wrap()
                                .child(title)
                                .border_b_1()
                                .border_color(cx.theme().colors().border_variant),
                        )
                        .child(
                            div()
                                .id("inline-message")
                                .occlude()
                                .child(message_element)
                                .overflow_y_scroll()
                                .track_scroll(&self.scroll_handle),
                        )
                )
        })
    }
}

[Angelk90]

@danilo-leal , @maxdeviant : I was thinking of using a tooltip, obviously with the right information to show this is a test of the tooltip, what do you think?

[Angelk90]

@maxdeviant : Are there any changes to be made?

[danilo-leal]

Hey @Angelk90! Thanks for the PR! Just to understand, this last screenshot you sent is something you haven't committed yet? Meaning, the creation of a custom tooltip for this terminal use case. I think it makes sense. We have more autonomy with the design that way, rather than using - for dividers and whatnot!

[Angelk90]

@danilo-leal : It's currently like this:

I wanted to create a custom tooltip, but I don't know how to use it inside the terminal.
can you help me, you can modify the code as you want.

[danilo-leal]

Quick status update here as I do have working code for this, but it involved adding a new method (tab_tooltip_content) to the Item trait, which feels worth its separate/standalone PR. Will try to break it up before continuing with the terminal-specific content over here.

[Angelk90]

@danilo-leal : Great, the idea of ​​the tooltip is that it could be used in different places.

The idea of ​​the tooltip that I had in mind was to divide it into three parts:

1. Title
2. Body of the message, which would be an array of text arrays, in this text there could be code that could be of markdown type for example use of `.
   For each element of the array have a separation.
3. Final part, could contain buttons or informational messages

See image below:

[Angelk90]

@danilo-leal : I sent you a private message on Discord.