Output - Severity option (style) is not applied correctly in the OutputChannelManager append method

[safisa]

Hi,

Bug Description:

When using the OutputChannelManager the OutputChannelSeverity in the appendLine method does not work as expected, it does not color the Warning and Error as expected.
I have inspected the output line in the dev tools, and saw that the span over the message line has this class="mtk1 theia-output-warning", the mtk1 overrides the Yellow color defined in the theia-output-warning !!!

Steps to Reproduce:

try this:
const channel = this.outputChannelManager.getChannel('My Channel');
channel.appendLine("Test message...", OutputChannelSeverity.Warning);
you will get the line "Test message..." added to the channel but it is not colored.

Additional Information

• Operating System: window 10
• Theia Version: latest one - 1.10

[kittaakos]

I do not know what was the breaking change, but this should fix it:

diff --git a/packages/output/src/browser/style/output.css b/packages/output/src/browser/style/output.css
index a0b0c8c7b..e3a90608f 100644
--- a/packages/output/src/browser/style/output.css
+++ b/packages/output/src/browser/style/output.css
@@ -19,9 +19,9 @@
 }
 
 .theia-output-error {
-    color: var(--theia-errorForeground);
+    color: var(--theia-errorForeground) !important;
 }
 
 .theia-output-warning {
-    color: var(--theia-editorWarning-foreground);
+    color: var(--theia-editorWarning-foreground) !important;
 }

[gbodeen]

Git-bisect shows the regression was introduced in this commit, part of the PR where @theia/monaco-editor-core was upgraded from 0.19.0 to 0.20.0.

The cause is that in the upgraded Monaco, the editor token colors stylesheet is lazy-loaded and only attached to the DOM after the first editor is attached. So the CSS classes affecting the output are now loaded in the reverse order to what was originally expected.

The upstream fix is included as of v0.21.x, so if a PR such as this one going to 0.23.x is merged it will resolve the problem.

In the meantime, a solution like this will resolve the immediate problem in the Output package, and would not need to be reverted after a Monaco upgrade.

diff --git a/packages/output/src/browser/style/output.css b/packages/output/src/browser/style/output.css
index a0b0c8c7b..e3a90608f 100644
--- a/packages/output/src/browser/style/output.css
+++ b/packages/output/src/browser/style/output.css
@@ -19,9 +19,9 @@
 }
 
- .theia-output-error {
+ .theia-output .theia-output-error {
    color: var(--theia-errorForeground);
 }
 
- .theia-output-warning {
+ .theia-output .theia-output-warning {
    color: var(--theia-editorWarning-foreground);
 }

I'll see if I can make a quick PR for it.