Clearer indication of what is input and what is output in debug console

[mjbvz]

Problem
In the debug console, it can sometimes be difficult to tell what is text you entered and what is the evaluated result:

This was improved with #35324 for literals but I still like how Chrome and Safari have little icons (and separator lines) to indicate this:

[roblourens]

And F12. Don't forget Edge!

[isidorn]

We had these lines before and decided against it, since it is not always nicely grouped two by two. Sometimes some output comes and then the lines would not look so nice.
@mjbvz you can probaly download a build from a year ago to check it out
@weinand do you remember the other reasons why we removed this?

[weinand]

Let's try to use the icons and see how this looks and feel.

If we like them, then we can try the separator lines (since we made some improvements to the output stream, it could be that some of the old issues no longer exist).

[isidorn]

We could look into improving this in the future.
fyi @dgozman since you added colors in your version to make this clearer.

[isidorn]

This is how it looks, try it out and let me know.
For the arrows I am using octicon small arrows. @misolori feedback welcome if we have some better icons. Though I peronsally like these.

@weinand already pointed out that the tree expando should be closer to the element, I will look into if that is possible

[isidorn]

Even though the arrows are centered due to the way how the brain processes these images one looks more to the left, and one more to the right and the whole hing looks a bit messy. Suggestions welcome on how to improve!

[jrieken]

It is there but not really pretty, esp when expanded but I believe we already talked about it