vscode: output styling and formatting in "Wallaby Tests" is not as expected in most themes

[rbutera]

On the wallaby.js marketing site there is a screenshot of wallaby's output showing a number of features:

In particular, the diff has color coding and highlighting.

Unfortunately, you don't get any highlighting in MOST themes, including the most popular themes:

THEME: Default Dark:

THEME: Material (the second most popular vscode community theme iirc)

THEME: One Dark Pro (THE most popular vscode community theme)

This is obviously not ideal, but I have been unable to find out what needs to be modified/added to these themes in order to support wallaby.js

The documentation for wallaby.js vscode should contain a section describing the theming requirements in order for diff to be displayed correctly.

[smcenlly]

Unfortunately, you don't get any highlighting in MOST themes, including the most popular themes

Aren't One Dark Pro (zhuangtongfa.material-theme) and Material theme the same thing? Or is there a different material theme as well as One Dark Pro?

At any rate, it looks like this is a bug in the themes, not in Wallaby. In the case of One Dark Pro, it looks like it is somewhere overriding the editor.tokenColorCustomizations and expected textMateRules for markup.deleted, markup.inserted and markup.underline. You will find all of the expected textMateScopes specified here. In order for a theme to be as compatible as possible with other extensions, these scopes need to be supported/provided by the theme. We're not experts in creating themes so I'm not exactly sure where the issue lies in the theme.

You may refer to Wallaby's textMate grammar for Wallaby.js Tests and Wallaby.js Console output windows to see which scopes we use. These are specified in ~/.vscode/extensions/wallabyjs.wallaby-vscode-{VERSION}/wallaby-output.tmLanguage.json and ~/.vscode/extensions/wallabyjs.wallaby-vscode-{VERSION}/wallaby-timeline.tmGrammar.json (please don't change these files).

In the case of One Dark Pro, you may fix the problem by overriding your VS Code or Workspace settings to include these tokens:

{
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "name": "Deleted",
        "scope": "markup.deleted",
        "settings": {
          "foreground": "#ff0000"
        }
      },
      {
        "name": "Inserted",
        "scope": "markup.inserted",
        "settings": {
          "foreground": "#036A07"
        }
      },
      {
        "name": "Underline",
        "scope": "markup.underline",
        "settings": {
          "fontStyle": "underline"
        }
      },
    ]
  }
}

Which would make your Wallaby.js Tests output window look as shown below (obviously you might want to change the colors a bit):

---

Given that all of the default VS Code themes have values for the tokens that we are using for syntax highlighting, I think this is a bug in the themes that you are using. You should be able to pass on these details to the theme creators for them to adjust their themes. We'd be happy to assist communicating with them if you need help.

[rbutera]

Unfortunately, you don't get any highlighting in MOST themes, including the most popular themes

Aren't One Dark Pro (zhuangtongfa.material-theme) and Material theme the same thing? Or is there a different material theme as well as One Dark Pro?

Nope, distinct themes. Material theme can be found here. Both themes have millions of installs, so I think this is a significant issue.

It's interesting that one dark pro is called material-theme, probably started as a fork at one point which might explain the common bug!

I've noticed this problem is the case for 95%+ of the themes I have tried (and I have a LOT of themes installed, something like 30-40) . I remember quite recently going through my entire collection in order to find a theme that works with wallaby js output and finding that only 2 or 3 worked.

It seems that the textmate scopes used by wallaby's output tmLanguage are quite uncommon? Are there appropriate, more commonly used alternatives that wallaby might opt to use?

If the markup textmate scopes are appropriate, then I do think that this should probably be documented somewhere on the wallaby.js website. Just my 2 satoshi.

Thanks for your instructions and guidance, I hope that this issue serves as a useful resource for anyone that runs into this problem in the future.

[smcenlly]

Nope, distinct themes. Material theme can be found here. Both themes have millions of installs, so I think this is a significant issue.

Thanks - I don't disagree it's a problem, but it needs to be fixed by the theme creators.

I've noticed this problem is the case for 95%+ of the themes I have tried (and I have a LOT of themes installed, something like 30-40) . I remember quite recently going through my entire collection in order to find a theme that works with wallaby js output and finding that only 2 or 3 worked.

I wanted to see how wide-spread this issue is. I checked the top 10 themes (by install count) and the issue affects exactly 50% of them. I've created an issue in the repositories of the 5 that weren't working so that they can fix the problem. The issue is reproduceable outside of Wallaby (see this sample repo). If you are using any other themes that have the issue, please report to them via their issue repo (you may provide my sample repo that includes steps to reproduce).

Theme	Supports markup colors	Tracking Issue
One Dark Pro	No	FIXED
Material Theme	No	FIXED
Dracula Official	Yes	n/a
Community Material	Yes	n/a
Atom One Dark Theme	Yes	n/a
Winter is Coming	No	johnpapa/vscode-winteriscoming#57
Shades of Purple	No	FIXED
Night Owl	No	sdras/night-owl-vscode-theme#283
One Monokai	Yes	n/a
Ayu	Yes	n/a

It seems that the textmate scopes used by wallaby's output tmLanguage are quite uncommon? Are there appropriate, more commonly used alternatives that wallaby might opt to use?

They are standard and required by many grammars, not just Wallaby. These are the most appropriate for us to use (and give us exactly what we need).

[smcenlly]

FYI - One Dark Pro has already been fixed in v3.9.13

[rbutera]

Nope, distinct themes. Material theme can be found here. Both themes have millions of installs, so I think this is a significant issue.

Thanks - I don't disagree it's a problem, but it needs to be fixed by the theme creators.

I've noticed this problem is the case for 95%+ of the themes I have tried (and I have a LOT of themes installed, something like 30-40) . I remember quite recently going through my entire collection in order to find a theme that works with wallaby js output and finding that only 2 or 3 worked.

I wanted to see how wide-spread this issue is. I checked the top 10 themes (by install count) and the issue affects exactly 50% of them. I've created an issue in the repositories of the 5 that weren't working so that they can fix the problem. The issue is reproduceable outside of Wallaby (see this sample repo). If you are using any other themes that have the issue, please report to them via their issue repo (you may provide my sample repo that includes steps to reproduce).

Theme Supports markup colors Tracking Issue
One Dark Pro No FIXED
Material Theme No material-theme/vsc-material-theme#514
Dracula Official Yes n/a
Community Material Yes n/a
Atom One Dark Theme Yes n/a
Winter is Coming No johnpapa/vscode-winteriscoming#57
Shades of Purple No ahmadawais/shades-of-purple-vscode#105
Night Owl No sdras/night-owl-vscode-theme#283
One Monokai Yes n/a
Ayu Yes n/a

It seems that the textmate scopes used by wallaby's output tmLanguage are quite uncommon? Are there appropriate, more commonly used alternatives that wallaby might opt to use?

They are standard and required by many grammars, not just Wallaby. These are the most appropriate for us to use (and give us exactly what we need).

That's really proactive of you, thank you so much for submitting these tracking issues.

[smcenlly]

FYI - Material Theme has been fixed in v33.2.0