[output] add severity/color to appendLine method

[amiramw]

Signed-off-by: Amiram Wingarten amiram.wingarten@sap.com

Fixes #7504

What it does

Add severity to append methods of output channel. This allow to color output lines for errors and warnings.

How to test

For some output channel call appendLine with severities info, warning and error.
The output lines should color accordingly, warning in yellow and error in red.

Call append method - it should behave as info.

See example examples/api-samples/src/browser/output/sample-output-channel-with-severity.ts

Also test application can be found in #7600

theia/packages/output/src/browser/test-app.ts

Lines 26 to 32 in d26c403

	const channel = this.outputChannelManager.getChannel('my test channel');
	channel.appendLine('hello info1');
	channel.appendLine('hello info2', OutputChannelSeverity.info);
	channel.appendLine('hello error', OutputChannelSeverity.Error);
	channel.appendLine('hello warning', OutputChannelSeverity.Warning);
	channel.append('append info1 ');
	channel.append('append info2');

The expected output channel "my test channel" should look like this after theia start:

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

[vince-fugnitto]

@amiramw do you mind updating the pull-request's 'how to test' so a reviewer can verify the output for both errors and warnings? I was unable to do so with the description provided.

[vince-fugnitto]

I'm not sure these are the correct classes to use as they are contributed by console.
It is possible to build an application without console, and in this scenario, coloring present in the output view will not work.

[amiramw]

I created new classes in output package styles

[akosyakov]

Would it be possible to keep it after we switch to use Monaco editor for the output to align with VS Code and get features like search and so on?

[amiramw]

@akosyakov sure. But will colors be possible after the move? VS code doesn't have this feature as far as I know.

[akosyakov]

@amiramw It was my question :) But thinking now, Monaco editor has decorators API to color text. So it should be.

Please address @vince-fugnitto comment: #7549 (comment)

The output extension should not have implicit dependencies on the console extension via css classes.

[amiramw]

@akosyakov i wasn't aware that vscode uses monaco editor component also for the output.

Anyway for now I'm addressing CR comments...

[amiramw]

@vince-fugnitto I updated the how to test section. There is another PR with test example.

[amiramw]

Any clue why the build is failing now?

[akosyakov]

@amiramw I'm looking into the build failure.

[kittaakos]

Adding a new dependency to @theia/api-sampl should update the examples/api-samples/compile.tsconfig.json with the path too @theia/output when you run the build. Did you commit all the file changes?

[amiramw]

I didn't, thought it was generated wrongly. I'll check again.

[amiramw]

@kittaakos Seems that build is fine now and i fixed your comment.

[kittaakos]

I like the idea, the implementation will probably change as soon as we switch to the editor. 👍

I have verified it with the API sample:

[kittaakos]

@amiramw, ping me if you cannot do the merge.

[amiramw]

Thansks @kittaakos! Merging.