editor.suggest.preview looks indistinguishable from comment in bash file

[LinqLover]

Does this issue occur when all extensions are disabled?: No

• VS Code Version: 1.60.0
• OS Version: Win 2004

Steps to Reproduce:

0. Turn on the setting editor.suggest.preview
1. Install GitHub Pull Requests extension
2. Open a GH repository that has at least one open issue/PR
3. Open a bash file in it

4. At the beginning of a non-empty line, type a #:

   

Unfortunately, there is no difference in the representation of the actual line (#exit 2) and the suggestion preview (#75). Different colors or text styles should be used.

While I reproduced this issue together with two extensions only, I have the impression that this might be a general issue with this setting since VS Code does not make sure the display format for suggestion previews is unique.

[hediet]

I understand the problem, but it is really hard to find a good compromise.

132017 is also related.

Any suggestions how to fix this (@misolori)?

[LinqLover]

Always style these previews in italic font?

[miguelsolorio]

An alternative would be to use a different color as this really depends on each theme, do we have a color token for the suggest preview text?

[hediet]

An alternative would be to use a different color as this really depends on each theme, do we have a color token for the suggest preview text?

Yes! There is editorGhostText.foreground and editorGhostText.border

[LinqLover]

Here is another UX drawback I experienced in connection with inline previews: Spaces that are part of a suggestion are not distinguishable from real spaces in the file.

For example, in this file using the Latex Workshop extension:

The space is part of the suggestion. If I press arrow + right in this situation, the space will suddenly disappear which caused confusion for me. Maybe this could also be improved, e.g., by using some kind of underscore or background styling for spaces in the ghost style?

[hediet]

@LinqLover thanks for the screenshot! So the line content of the file on disk is actually just \itemIn?

[LinqLover]

@hediet Very exactly.

[miguelsolorio]

I think there are two options:

Italicize the suggest preview, this would align with the inline suggestions in autocomplete changes:

Adjust the color of the ghost text. This one would be on a per-theme basis and depend on the comment color token, but it leaves a less-desirable look:

[LinqLover]

Italic looks better to me. Is there a risk that certain themes or language extensions might italicize text as well?

[miguelsolorio]

Just in the same way that there will be themes that conflict with the colors of ghost text, the same can happen for text so it is a possibility. I think it comes down to how likely users are to run into these issues and if it warrants a fix.

[hediet]

Italicize the suggest preview, this would align with the inline suggestions in autocomplete changes

And then you would make the preview of the inline suggestion when the suggest widget is shown non-italic?

[miguelsolorio]

@hediet I was wondering whether it would make sense for the ghost text to always be italicized except when there are inline suggestions, so that there is less differences between these two states:

what do you think?

[hediet]

I think that makes sense. It would basically swap italic ghost text with non-italic ghost text.

[LinqLover]

Thank you for fixing this! :-)

What is about the indistinguishable whitespace from suggestions (see https://github.com/microsoft/vscode/issues/132852#issuecomment-918106411)? Shall I open a new issue for this?

[hediet]

Yes please! Please ping me in the issue.