Tune presentation of input/output in the debug console

[isidorn]

Follow up work from last milestone to make the input / output more distinguishable.

[isidorn]

I have improved the alignment so it now looks like this.
As @joaomoreno points out the issue is that we use the same icon as for the tree expando which can resonate badly with the user.
We should use a different icon. However if I use a arrow right / left codicon I personally do not like the effect since due to an illusion they do not look centereted

Thus I think we should introduce a new icon. Something that looks like a chevron but is a bit different. So some stylised version of > <
@misolori is it possible to design something like this?

[joaomoreno]

I remember discussing this back in December. Alternatives discussed were:

• Only use an icon for input
• Only use an icon for output
• Separate input/output pairs with a horizontal separator

Let's explore those as well.

[isidorn]

Good ideas.
Horizontal separator: the repl no longer would look like an editor and I personally dislike this.

Only use an icon for input:

Only use an icon for output:

I personally like how it looks when we only use an icon for input.
I would push this to insiders to get feedback.
Let me know what you think! And thanks a lot

[joaomoreno]

Horizontal separator: the repl no longer would look like an editor and I personally dislike this.

But the repl isn't an editor. The Chrome dev tools repl uses horizontal separators.

[isidorn]

Yeah, I am aware of both those things. IMHO it just feels like too much for me with all the horisontal lines. Chrome uses nice transparent color for lines and I could be convinced to also try that, but I would first like to try the one arrow approach.

Our users are always swtiching between the editor and repl, while the chrome does not have a regular editor. Since VSCode is an editor, and our users mostly look at the editor imho it makes sense to make the repl resemble the editor as much as it can.

[joaomoreno]

Since VSCode is an editor, and our users mostly look at the editor imho it makes sense to make the repl resemble the editor as much as it can.

It's especially because our users constantly switch between both that it is important to differentiate between them such that they don't get annoyed when they try to edit the repl or run commands in the editor.

But, you're right, let's roll with the current approach since it already addresses some pain points. 👍