Extension pre-release vs stable-release is confusing to me

[bpasero]

In my day to day use and esp. now that I am doing testing, I find how we distinguish pre-release from stable-release extensions confusing.

To clarify: we show a badge to the left when an extension can be installed as pre-release and a badge to the right when it is pre-release installed:

In my mental model - given VSCode and insiders - I map a blue logo to stable and a green logo to insiders. Maybe we can use something similar for extensions as well?

//cc @isidorn

[isidorn]

This is good feedback
When you compare it like that side by side I think the top left green thing deserves to be in both cases.
And maybe in the first case it is blue.

[bpasero]

One idea would be to prominently indicate the fact that it is insiders next to the blue mark "GitHub"?

[bpasero]

Actually why do I need this badge on the left at all when the button strongly indicates I can install pre-release?

Here is my suggestion:

• remove the left hand badge
• remove the right hand badge
• clearly spell out "Pre-release" as label next to the blue mark (maybe use the greenish icon we have to coney insiders meaning)

🚀

[isidorn]

@bpasero overall I like your suggestion since it simplifies things and the "Install Pre-Release" button is there by default. However pre-release next to the author name feels like it does not belong there.

[bpasero]

Right, my point I guess is to have it spelled out somewhere and not convey the info just through a badge or icon.

[sandy081]

Actually why do I need this badge on the left at all when the button strongly indicates I can install pre-release?

This is true for not installed extensions. But what about installed extensions? How to indicate that an extension has pre-release or not?

[gjsjohnmurray]

@bpasero look out for extra confusion if you ever need to install pre-release extensions direct from VSIX (e.g. if you need to use proposed APIs in them).

See #141869 and the discussion in the issue it was spun off from.

[bpasero]

How to indicate that an extension has pre-release or not?

Show the same button to switch to pre-release?

[miguelsolorio]

Actually why do I need this badge on the left at all when the button strongly indicates I can install pre-release?

On Insiders, you are defaulted to install a pre-release, on Stable the default is the regular version.

@isidorn @sandy081 have we seen similar feedback, overall, from other users?

[sandy081]

have we seen similar feedback, overall, from other users?

Not yet.

Badge on the left is to indicate that the extension has a pre-release version, otherwise stable user does not know unless user clicks on the Install dropdown. If extension is already installed, user has to open extension editor or context menu to know there is a pre-release.

Show the same button to switch to pre-release?

This adds more noise to the UI. This button is more annoying to me if I opted to install release version.

I find how we distinguish pre-release from stable-release extensions confusing.

Indicator on the right is meant to distinguish if an extension is running pre-release or not.

Summarising the states we represent:

1. VS Code Stable: Extension has Pre-release

2. VS Code Insider: Extension has Pre-release

3. Extension has Pre-release but release version is installed

4. Extension has Pre-release and pre-release is installed

• Badge on the left indicates that the extension has a pre-release
• Indicator on the right indicates that extension is running pre-release

Edit: How about having the badge on the left always for an extension that has pre-release and the indicator on the right is shown only when pre-release version is installed ?

[bpasero]

I was not even aware that we show different buttons depending on being in Code stable vs insiders.

I like the idea of reducing this to 1 badge that is always at the same location, but then we are at risk imho of subtle differences, because if the badge shows it can mean both that pre-release is installed as well as that pre-release is available.

As such, why not just:

• drop the badge and purely rely on the install button for picking pre-release
• show the badge exclusively for when you have pre-release installed

[sandy081]

It seems, I am not clear - I do not want to reduce or remove any. I am recommending to have the badge on the left always for an extension that has pre-release and the indicator on the right is shown only when pre-release version is installed. This was how it was before.

drop the badge and purely rely on the install button for picking pre-release

This might be unintuitive because user has to click on the dropdown to see if the extension has a pre-release or not.

show the badge exclusively for when you have pre-release installed

The indicator on the right is meant for this purpose.

[bpasero]

Fair enough, I think that is worth a try 👍

[gjsjohnmurray]

I wish these badges showed a brief explanatory tooltip when hovered over.

[isidorn]

@gjsjohnmurray there is no tooltip per html element in the extensions view, only one big tooltip for the whole tree element.

I agree with the proposed change:

to have the badge on the left always for an extension that has pre-release and the indicator on the right is shown only when pre-release version is installed

IMHO indicator on the might be too opaque. It either needs to be stronger or to be changed with text if possible.

[lychung7]

Yes, on the single tooltip for the entire element we show whether the prerelease version is installed or available.
I agree the icon itself on the right is a bit subtle especially as I'm scrolling through my list of installed extensions. There have been past explorations of including text with the icon. Maybe we could show icon + 'pre-release' on the right side when the sidebar is wide enough to fit it, and as the view gets narrower we only show the icon.

[bpasero]

So this is actually a nice, descriptive pre-release badge:

[isidorn]

Yeah but in the Extension Details View we have more space. I am not sure if that would fit in the viewlet. We could be smart - when there is not enough space “Pre-Release“ text gets hidden and only the icon is left. We might be able to do that using flex.

[sandy081]

Even if it fits in the viewlet, I would think this adds more noise in the UI.

I think the root problem here is that the badge on the left is confused between whether extension is a pre-release version or extension has a pre-release version. I have tried following to make it clear:

• I have removed the indicator on the right
• Badge on the left indicates that this is a pre-release version
• If a release extension is installed and it has a pre-release version, added an icon action before gear icon for switching to pre-release version

Feedback?

[miguelsolorio]

@sandy081 can you show an example with all of the various states?

[sandy081]

Here you go:

1. VS Code Stable: Extension has Pre-release

2. VS Code Insider: Extension has Pre-release

3. Extension has Pre-release and pre-release is installed

4. Extension has Pre-release but release version is installed

5. Hover and Extension Editor of an extension with pre-release version.

6. Hover and Extension Editor of an extension with release version.

Please note that hover and extension editor always resonates with the version of the extension

[sandy081]

@isidorn @lychung7 @misolori @bpasero let me know what you think about above changes?

[isidorn]

@sandy081 great work. I like this changes and they make sense to me.
Once they are in insiders I can try them out and provide more feedback.