output: improve output display

[vince-fugnitto]

What it does

The previous font-weight of the ouput-view made the visibility difficult (especially on lighter themes), and this pull-request updates it to be more consistent and easier to use.

The following pull-request updates the output-view to improve the output display:

• updates the output-view content (including an update to the font-weight).
• refactors the output-view to make use of css variables.
• renames --theia-terminal-font-family to the more generic name --theia-monospace-font-family (the variable was previously unused).

Before & After

_Before_:

After:

How to test

master:

1. start the application, open the output-view and select 'my test channel'
2. view the output under different themes (light + dark) - the output is difficult to see conformably

pull-request:

1. perform the same steps above with the pull-request built

Alternatively you may also set the JSON trace to verbose and open a JSON file (ex: 'package.json') to see much more output.

Review checklist

• as an author, I have thoroughly tested my changes and carefully followed the review guidelines

Reminder for reviewers

• as a reviewer, I agree to behave in accordance with the review guidelines

Signed-off-by: vince-fugnitto vincent.fugnitto@ericsson.com

[kittaakos]

We will switch to monco editor with #7570. Would that make this issue obsolete?

[vince-fugnitto]

We will switch to monaco editor with #7570. Would that make this issue obsolete?

Yes I remember :) The switch to the monaco-editor will make the output-view will definitely improve the view (like vscode).

I noticed the output was not easy to read during a pull-request review and thought that a quick fix (even if obsolete when the switch happens) might be an improvement to end-users. I also do not know when the switch will happen as the pull-request is already quite involving and still needs to be finalized and reviewed.

If you do not believe the effort is worth it, I can close the pull-request without any problems :)

[kittaakos]

make this issue obsolete?

can close the pull-request

No no, I was stupid and did not notice it is already a PR. It affects only the electron-based app, right? I am happy to verify right now...

[vince-fugnitto]

make this issue obsolete?

can close the pull-request

No no, I was stupid and did not notice it is already a PR. It affects only the electron-based app, right? I am happy to verify right now...

No problem! It is for both the browser and electron targets.

[kittaakos]

It is for both the browser

I see.

Browser before:

Browser after:

It is a bit too "heavy" for me in the browser...

and electron targets.

but I agree, it is hardly visible in electron (with the dark theme) so it is a reasonable change. 👍 Other committers can vote or decide I do not have any objections. Please keep in mind #7570.

---

Regarding the code change you did just to understand, it's all equivalent with adding fontWeight: 600 to the object, right?

[vince-fugnitto]

Regarding the code change you did just to understand, it's all equivalent with adding fontWeight: 600 to the object, right?

Yes, I refactored the code from the widget itself into the css stylesheet, and updated the font-weight for the monospace font-family. Originally, the font-weight on electron was too thin and made it difficult to easily view the content. I think it will look much better like you said when we start using monaco in the view.