Better highlight breakpoints and current line at which execution is paused at

[filipdutescu]

Description

Currently, breakpoints do not use a conventional symbol, such as the classic filled red circle. The current line at which execution is paused at is also not properly shown. This makes debugging at least somewhat more challenging than it should probably be.

Proposal

1. Change the current symbol to the aforementioned conventional one
2. Add new theme highlights for breakpoint and current line colors
3. Highlight the current line at which debugging is stopped at

UI mockup

[pascalkuthe]

I think this would be quite easy to accomplish:
Right now in helix-term/src/ui/editor.rs:114 the highlight is set to:

let style = theme.get("ui.highlight");

I think all you would need to do is use a custom theme key here like ui.highlight.breakpoint and add it to a couple of themes. That would be a very uncontroversial change.

Regarding the gutter I think #5371 could provide a means to customize the exact icon.

In a TUI our hands are a bit bound with the styling of the icon.
The red circle is already used for diagnostic errors and it doesn't look as nice as in your mockup because its quite a bit smaller:

You could consider experimenting whether setting this to bold or using a different icon works better.

Perhaphs there is a different symbol we could use?

[filipdutescu]

I used the NerdFonts na-fa-circle icon in my mockups (search here: https://www.nerdfonts.com/cheat-sheet).

We could probably use that (togglable/customizable of course, since maybe not everyone has nerdfonts). Would you say this change is dependent on #5371 then?

[pascalkuthe]

If you want to use a nerdfont symbol this would depend on #2869 instead.

In general we would not be using nerdfont icons by default to ensure helix can be rendered everywhere with just default fonts. Although we could just keep the current icons for now (I think the red hihglight already goes a long way) and only change the icon for use with nerdfonts once #2869 lands

[filipdutescu]

I could substitute it for a B in the meantime I guess. Is there any resource on how to find default icons? Or how where those already existing chosen?

[filipdutescu]

Let's make it with the current available icons for now and when #2869 lands we can explore adding nerdfont icons.

[archseer]

You can just use the same dot we use for diagnostics

[archseer]

Rather than a dot, a triangle seems a lot more fitting

▶ and ▷ taken from https://en.wikipedia.org/wiki/Geometric_Shapes_(Unicode_block)

[archseer]

I'd prefer a lighter highlight than red, which is why I picked the existing ui.highlight color. Some more design ideas here: https://emacs-lsp.github.io/dap-mode/page/gallery/

[filipdutescu]

You can just use the same dot we use for diagnostics

Precisely what I did for the current implementation. I would like to offer, in the future, the possibility of user-defined icons, probably by means of nerdfonts.

Rather than a dot, a triangle seems a lot more fitting

▶ and ▷ taken from https://en.wikipedia.org/wiki/Geometric_Shapes_(Unicode_block)

I assume you mean for the current line at which execution is paused at. If so, I agree, this would be a good improvement, but I think the only way to do it is to override the breakpoint icon with the triangle one, right?

[filipdutescu]

I'd prefer a lighter highlight than red, which is why I picked the existing ui.highlight color. Some more design ideas here: https://emacs-lsp.github.io/dap-mode/page/gallery/

Will modify the default theme according to your preference then. Thanks for letting me know, I used that colour as it is what I am accustomed to.

[CptPotato]

In general we would not be using nerdfont icons by default to ensure helix can be rendered everywhere with just default fonts. Although we could just keep the current icons for now (I think the red hihglight already goes a long way) and only change the icon for use with nerdfonts once #2869 lands

Here are some unicode options:

(or more)

[filipdutescu]

After a lot of discussion, the redesigned UI/theme will look like this (default theme for reference):

[filipdutescu]

After talking some more with @archseer, we landed on this colour for the debug highlight, which I find beautiful: