Test coverage highlight colors are not colorblind friendly

[dcormier]

The red/green test coverage highlight colors are not colorblind friendly, and there does not appear to be a way to configure the highlight color (if there is a way, please do correct me).

I'm colorblind (as are ~10% of people with XY chromosomes), and it's hard for me to use the colors tell what's been covered and what has not.

[sigwinch28]

Same issue here. I have a red/green colour deficiency and I struggle to tell the reds and greens apart.

It appears that the gutter coverage (which I use) is implemented via images/gutter-green.svg and images/gutter-red.svg. So it looks like this is hard-coded.

Would it not be possible to generate these SVGs in memory according to a user's colour preferences?

[sigwinch28]

I have a temporary workaround for gutter coverage: replace the colour code in gutter-green.svg (or gutter-red.svg) in your .vscode/extensions/lukehoban.go-x.x.x/images directory to your liking:

<svg width="32" height="48" viewPort="0 0 32 48"
    xmlns="http://www.w3.org/2000/svg">
  <!-- <polygon points="16,0 32,0 32,48 16,48" fill="#A6DC8E"/> -->
  <polygon points="16,0 32,0 32,48 16,48" fill="#5C8BA9"/>
</svg>

[ramya-rao-a]

@sigwinch28 The api for applying decorator on the gutter takes absolute path to the svg file, so generating them during runtime is not possible.

How about using a pattern in the svg instead to denote either covered or uncovered areas?

[ramya-rao-a]

Also, we have a setting to highlight only the covered areas or only the uncovered areas.

If you set the setting go.coverageOptions to either showCoveredCodeOnly or showUncoveredCodeOnly, then you dont have to try and differentiate the 2 colors. The gutter or the highlight will appear only for either covered or uncovered areas.

Does that help?

[sigwinch28]

@ramya-rao-a That definitely helps for me.

Alas, would it be possible to distribute a handful of SVGs as part of two or three colour schemes, too?

[ramya-rao-a]

@sigwinch28 Yes it is very much possible to use different sets of svgs based on color schemes, I just don't know what colors to use :)

If you can help me with which colors make sense, then we can have a setting to choose the color scheme for the coverage

[sigwinch28]

According to a post on the UX stack exchange and the article it cites, it looks like yellow/blue should be a good combination (see this example palette).

Here's a bit more on the subject: http://jfly.iam.u-tokyo.ac.jp/color/#pallet

I chose the yellow for uncovered and blue for covered:

Edit: @ramya-rao-a as you suggested, a pattern could work, too. Perhaps some diagonal striping in one of the decorations?

[Mistobaan]

Same issue here but for the color highlighting itself. I am using the solarmode and the red totally obscures the text.

Can we make the colors configurables?

https://github.com/Microsoft/vscode-go/blob/cded61c853da3e4a9cfa06dbfca818da6d79ee80/src/goCover.ts#L19

[ramya-rao-a]

@Mistobaan Sure that's a good suggestion

We have the setting go.coverageDecorator for which valid values are either gutter or highlight. We can extend this and make it accept an object as well. For eg:

"go.coverageDecorator": {
    "type": "highlight",
    "coveredColor": "rgba(64,128,64,0.5)",
    "uncoveredColor": "rgba(128,64,64,0.5)"
}

PRs are welcome

[kentquirk]

@ramya-rao-a -- I have started working on this, but I need some guidance, please. Here you indicate using the coverageDecorator setting as an object, which is totally possible -- but the problem is that if we do it this way, then the settings editor can't provide editing help (as it does with enums, for example). I have a design which adds several settings (for color of both highlight and gutter decorators, as well as the appearance in the gutter), each of which has a type and therefore could be easy to edit. But in #1649, you say "we already have way too many settings".

I personally think that extra settings are OK as long as the defaults are good, but if you feel strongly enough to reject a PR with new settings, then I will do it as an object on coverageDecorator instead (as noted above) and then people will have to edit it manually.

The third alternative is to leave it as non-settable but just change the colors to blue/yellow, and also change the gutter appearance.

Please tell me which of these you prefer and I can make it happen this week.

[kentquirk]

After thinking about it, I decided to go with the single modification to go.coverageDecorator, so it creates no new settings. The setting is now an object instead of a string, but if a string is left in the settings from a previous setup, it still works properly.

The setting now looks like:

    "go.coverageDecorator": {
        "type": "highlight",
        "isWholeLine": false,
        "coveredHighlightColor": "rgba(64,128,128,0.5)",
        "uncoveredHighlightColor": "rgba(128,64,64,0.25)",
        "coveredGutterStyle": "blockblue",
        "uncoveredGutterStyle": "slashyellow"
    }

The PR is up as #1695.

[ramya-rao-a]

Thanks to @kentquirk, this feature is now in.

To give it a spin before I release an update,

• Download https://github.com/Microsoft/vscode-go/blob/master/Go-latest.vsix
• Run code --install-extension Go-latest.vsix
• If the above fails with Error: end of central directory record signature not found, then clone this repo and use the Go-latest.vsix file from the cloned repo
• Reload VS Code

Then play with the go.coverageDecorator setting to tweak as needed.

@kentquirk I have updated your comment above to include the new names for the colors for the covered/uncovered highlights

@dcormier @sigwinch28 Please give this a try and let me know which gutter styles work the best.

[ramya-rao-a]

This feature is now out in the latest update to the Go extension (0.6.81)