Debug: major theming improvements 🎨 🎉

[robertrossmann]

Let's be honest - the debug panel is past due some major repaint. Many parts of the UI have hard-coded colours, which makes the debug UI stand out of the other parts of VS Code, in a not very pleasant way. It's time to change that!

This PR introduces several new colour contribution points for many parts of the Debug UI. The vast majority revolves around the stack trace viewlet and the various colours used for showing variables across the debug panel, and the debug REPL.

Here is the list of new colour contributions. Please be aware that the screenshots below contain colours I overrode while working on this, they dot not represent the default colours in this PR. ⚠️ I kept the original color values as defaults for all the new colour contributions in vast majority of situations. There might be a slight deviation here and there to fix contrast but the overal look and feel should be relatively the same.

Looking forward to hear your feedback! 👀

Stack trace viewlet

debugView.exceptionLabelForeground
debugView.exceptionLabelBackground

debugView.stateLabelForeground
debugView.stateLabelBackground

debugView.valueChangedHighlight

This actually "blinks" when a value changes. This is merely the final colour.

Debug REPL

debugConsole.warningForeground <- Removed as per review

debugConsole.annotationForeground <- Removed as per review

No screenshot here, not found in the UI. 🤷‍♂️ <imagine popular Travolta gif here>

Variables / tokens & values

These are the colours used in the Variables viewlet and in the hovers during a debugging session.

debugTokenExpression.name
debugTokenExpression.value
debugTokenExpression.string
debugTokenExpression.boolean
debugTokenExpression.number

debugTokenExpression.error

Other changes

• The line/column position info in the stack trace viewlet now uses the same colours as a regular "badge" (badge.foreground & badge.background)

• The filename in the stack trace viewlet now uses the same colour as for list's deemphasized content (list.deemphasizedForeground)

• The debug REPL's input box border now uses the input border colour (input.border) if defined, otherwise it defaults back to the original colour used before this PR.

Overall look and feel

Before	After

[isidorn]

@robertrossmann thanks a lot for this awesome PR, overall great work, I really like it!

Feedback:

• debug toolbar is the debug floating widget with the pause / step action, so you are using a wrong name. You should use probably a debugView prefix, or just a debug prefix, not the debugToolbar
• Can you please list all the colors you have added since we will have to name them correctly and @aeschli can help here. Also list the comments you did which each color please.
• Did you verify that your changes do not break debug coloring across: debug views, debug console, debug hover?
• Did you verify that the default coloring is left as it was for both light, dark and high contrast theme?

Also assigning to @misolori for designer review and @aeschli for review of color names.
I will review the code changes which look good from a bird's eye persepctive.

fyi @connor4312 @weinand @roblourens

[robertrossmann]

@isidorn Thank you for your feedback! I will address it now. 💪

• I went ahead and renamed the debugToolBar.* contributions to debugView.*. They are also updated in the original PR description. ✅
• I have verified that the colours work consistently in all places I regularly use in my standard debugging workflow. I checked the following:
  • all the "sub-views" in the debug panel
  • hovers which show token contents during debugging
  • the REPL console
• I have copied the original, hard-coded colours from all three theme variants - dark, light and HC. However, I did make some changes to the originals in a few places, to make them look better. Below I have prepared screenshots showing the differences in colouring I have made. The screenshots have the exact same contents so it should be easy to compare them side-by-side.

Can you please list all the colors you have added since we will have to name them correctly...

I am not sure if I understand this correctly, but I did not really add any new colours, I merely took the existing hard-coded colours and made them themeable. The colour contributions are listed in the original description, including a screenshot of the thing they apply to. For completness' sake, here they are listed again in full.

debugView.exceptionLabelForeground
debugView.exceptionLabelBackground
debugView.stateLabelForeground
debugView.stateLabelBackground
debugView.valueChangedHighlight
debugTokenExpression.name
debugTokenExpression.value
debugTokenExpression.string
debugTokenExpression.boolean
debugTokenExpression.number
debugTokenExpression.error

Theme	Original	Updated
Remedy
Dark+
Light+
HC

To summarise which colours are now different in writing:

• In call stack view, the filename and line/col position info
• In variables view, the variables' contents

[robertrossmann]

I just noticed that the variable names in the Variables sub-view have different colour in dark variants in this PR. This was unintentional - I just force-pushed a fix for that. I won't update the screens, though - it's too much work. 😇

[isidorn]

Did another review and left comments in the code. It would be great if you could tackle them.

Yes I meant color names, so @aeschli can verify those. And once we get his feedback and @misolori feedback I will try this out a bit more and if it looks good we can merge in next week.

I am also not a fan of debugTokenExpression name but we can discuss that.

Thanks!

[isidorn]

Also something to keep in mind: if we ever want to make the debug colors more inlined with the language color. For example debug while deubgging javascript might want to color strings the same way as javascript colors them. This goes a bit against that. But I think that is fine. Though @weinand might be better to decide since he is looking into potential debug / language integration.

[robertrossmann]

@isidorn Thanks for review - all concerns have been addressed.

Regarding using language token colours for the debug views - that would be the ideal scenario, of course! Until then, however, I would love to have at least something to appease my inner artistic gods. They scream loud and shudder violently whenever I start a debugging session. 😂

[isidorn]

@robertrossmann Great work, you have my provisional approve.
Let's just finalise the naming next week.

In the future if we get nice coloring from languages then we can deprecate some of these colors.

[aeschli]

Color names look good to me!

[isidorn]

@robertrossmann I found ony copy paste error in the description. Once you tackle that we can merge this in.
@misolori maybe we should look into changing some of the built in themes to customise some of these new colors. What dp you think?

[robertrossmann]

@isidorn Thanks, I fixed the typo, squashed the review commits and rebased on current master. Excited to have this merged! 🎉 🍻

[isidorn]

Great work, merging in. Thank you very much! ☀️

[isidorn]

A bit of follow up polish so debug hover also uses these new colors 5a98e13
Found by @bpasero thanks!

[robertrossmann]

Thanks @isidorn, I would have sworn that I tested the hovers as well! 😱 👍 ❤️

[bpasero]

@robertohuertasm thanks ton for pushing this 👍

[isidorn]

@robertrossmann not sure if you are interested but in case you would like these colors being used in our default themes we are open for a PR that tackles that. Of course if @misolori agrees.

[robertrossmann]

@isidorn I think I can contribute to some themes but I am not sure if I can work on all the themes that ship with VS Code by default. 😢 Perhaps the more colourful ones would benefit the most from custom theming (Kimbie, Red, Solarized) ? The default colours work relatively well for the other themes.

@misolori Let us know what you think, we can perhaps split the work or do it incrementally as time permits. 💪

[isidorn]

Yeah, sounds good. I definetly agree that only the more colorful one should use the new colors.
Thanks!

[miguelsolorio]

@robertrossmann I agree that only the other non-default themes should start using the new color tokens. Feel free to ping me in your PR if you want any feedback on your proposals. Thanks again for doing this work 💪!