Vscode: Rendering of documentation in Intellisense and hover inconsistent

[egamma]

Testing #2230

The rendering of the documentation in the hover and in Intellisense is inconsistent, different font, font size, font family, and color.
Suggest to align on the way the documentation is rendered in Intellisense. It looks nicer.

FYI @bgashler1

• [x] Delayed hover
• [x] Diagnostics hover
• [x] Glyph hover
  
  
  
  • [x] Debug breakpoint expressions colorisation
  
  
• [x] URL click hover
• [x] Suggest widget
• [ ] Parameter hints widget

[bgashler1]

Totally agree. Only code should be in a monospaced font. The way it's done in the second image is how we should do it.

[joaomoreno]

I can't do it on styles alone.

The data type that hover gets when rendering something is:

export interface IComputeExtraInfoResult {
    range: editorCommon.IRange;
    value?: string;
    htmlContent?: IHTMLContentElement[];
    className?: string;
}

Basically, a mode just needs to return htmlContent. There is no distinction between the textual parts of the information and the code parts of it, when comparing it to the suggestion world:

export interface ISuggestion {
    label: string;
    codeSnippet: string;
    type: SuggestionType;
    typeLabel?: string;
    documentationLabel?: string;
    filterText?: string;
    sortText?: string;
    noAutoAccept?: boolean;
    overwriteBefore?: number;
    overwriteAfter?: number;
}

To fix this we might have to go the other way and render suggestions' documentations in fixed-width fonts, similarly to hover... which I would be very sad about.

cc @alexandrudima @jrieken @egamma

[joaomoreno]

Actually, just saw that the html content does distinguish between code and otherwise... maybe we can work with that.

[jrieken]

@joaomoreno Careful cos the content can be full markdown, meaning again code and also other formatting instructions. Tho, you can use this - like the hover does.

[joaomoreno]

I can do this, which is pretty cool.

We can go further, with both widgets. Not in endgame though. Pushing to May and to joaomoreno/vscode, branch hover-ui.

[bpasero]

I am not a big fan of our hover when it has lots of contents because the content blends too easy into the other contents of the editor making it hard to read.

At the minimum the hover should have a different background color. Also in this example the JS doc comments look very similar to the actual method signature. I would love if both could be made more distinct so that its clear the one is documentation and the other is signature.

/cc @joaomoreno @bgashler1 @stevencl @alexandrudima

[joaomoreno]

Started to work on this: https://github.com/joaomoreno/vscode/tree/hover

Moving to September though.

[DanTup]

@joaomoreno I like the look of this; hovers were looking a bit weird (esp. with fixed width fonts) :+1:

I raised a case related to code-rendering in hovers, I don't know whether they may be any overlap with what you're doing here and that (#11331).

[joaomoreno]

Delayed hover

Delayed hover with scroll

Diagnostics hover

Glyph hover (breakpoints)

[jrieken]

@joaomoreno It broke multi-line error messages that have a source-property

  let dia = new vscode.Diagnostic(range, 'I am an error diagnostic\n   ^^^^\n   this is bad');
  dia.source = 'abc';

[joaomoreno]

Good to know, expect that it didn't break anything. That didn't work before. Here's the current insiders, where my change is yet not pushed:

[jrieken]

[joaomoreno]

Just went through suggest widget.

Both hover and suggest are styled the same. The contents themselves are a bit different. We need to come up with an API solution for completion item providers (and others) to return Markdown for some fields. Once we have that, we can have the same styles for the type signature and cool Markdown in the suggestion details.

[jrieken]

I see many horizontal lines

[joaomoreno]

[DanTup]

This looks really good in insiders (esp. with the code language fix!). But, would there be any possibility of allowing it to go up to 80 characters before wrapping? 80 chars seems to be a fairly common wrapping point so docs might be formatted to try and fit within that (the Dart source code is certainly full of this!)

[joaomoreno]

Parameter hints:

[joaomoreno]

@DanTup: #11875

Closing this as all widgets are somewhat more aligned. Created #11877 for further content alignment.

[bpasero]

Since this was on the plan, I am removing the verification-needed label.