Debugging overhaul and redesign

[filipdutescu]

Description

The current debugging experience is less than ideal. While challenges are expected with TUI editors, the current experience is, to put it bluntly, raw. It is hard to launch or stop sessions, view variables, see which line the session is paused at etc. You also have no way to drill down into variable values (or if you have, it is so hidden I have yet to find it) or edit their values during a debugging session.

There is much more that should be done to ensure a smooth experience, including:

1. defaults for binary targets (ie configuration type - Debug/Release, binary location - target/debug/myexe) which should be overridable in language.toml as well
2. attach should show a searchable list of processes the user could choose from (search should include the option for process ID)
3. [DAP] add inline values of variables during debugging #5927

Proposal

To address some of those pain points, I propose the following overhaul and redesign:

• Add a new editor mode, alongside NOR, INS, SEL: the DBG mode, which would be basically NOR with extra configurable keybindings for the debugging commands. This would also remove the need for the sticky popup, which could be turned on by a new keybinding, such as ?, for example - Add DBG (Debug) editor mode #5951;
• Highlight the current line at which execution is paused, This also means adding new theme colors for breakpoints and the current line - Better highlight breakpoints and current line at which execution is paused at #5952, Add better breakpoint icons #5956;
• Add a new debug panel, which should be able to be placed in all cardinal points (left, top, bottom, right), containing at least: a variables panel (locals, arguments, registers etc.), watches, call stack and breakpoints. Those individual modules should also be able to be placed in any of the 4 directions by themselves, in order to have a more personal and customized UI. The variables should be expandable, showing their inner fields (private, protected and public) with their values. Those "children" should behave the same, if they are complex types. Watches and variable values should be editable with a prompt - Add a debug panel, containing sections with relevant debugging information #5954.
• A quick watch popup should be made, which could start empty or from the current code selection, behaving similar to a picker, with expandable values for the result of the expression - Add a quick watch popup for easy debugging of expressions #5955.

Related issues

• [DAP] add inline values of variables during debugging #5927
• Add DBG (Debug) editor mode #5951
• Better highlight breakpoints and current line at which execution is paused at #5952
• Add a debug panel, containing sections with relevant debugging information #5954
• Add a quick watch popup for easy debugging of expressions #5955
• Add better breakpoint icons #5956
• Add scope precision to breakpoint toggling  #6238

UI/UX mockups

New UI for debugging:

Help popup (using the current one as example):

Expanding a variable's value (same prompt and cursor highlighting should be used for watches as well):

Quick watch popup:

[archseer]

For the variable views (the top pane called Locals -- it's technically variables), the idea was to repurpose the tree component from #2377 / #5768

[filipdutescu]

For the variable views (the top pane called Locals -- it's technically variables), the idea was to repurpose the tree component from #2377 / #5768

Yes, I plan on using the exact same mechanism as proposed by you. That part (local pane) and the quick watch one would be dependent on either of the two linked PRs.

[filipdutescu]

@CptPotato proposed a new design for the debug panel,which I like quite a bit. This is what I propose, moving forward:

[filipdutescu]

Update on the current debug line (#5952). Latest developments lead me to this current implementation, which is a good MVP in my opinion. Further work can be done to improve the ability to customise components such as selection and cursor highlights, but they'll be out of scope for the current PR.

Dracula theme example:

Onedark example:

Ayu light example:

[filipdutescu]

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

[filipdutescu]

Latest update: #5952 was merged, hope it is a pleasant addition and a nice start to the overhaul! Thanks a lot to @pascalkuthe and @archseer for the help with the issue!

[teburd]

Would a disasm split or register view be something to consider? Debugging low level code these features in gdb are incredibly helpful

[andreciobezerra]

I hope this proposal is going on, the helix is fantastic, but the debug is really experimental.