extensions view: Wrap stars instead of clipping them

[jsoref]

This is not a duplicate of #9644 -- but it's perhaps tangentially related

I'm using multiple boxes side by side in VSCode, so my individual editors are moderately narrow. And I turn on word wrap for my editors...

When I searched for an HTML Preview editor, in extensions, I saw this:

2 stars doesn't seem like a good rating. But I installed it anyway. (Yes, it has 3+ stars, but ...)

Keep in mind that a user, like me, won't necessarily know how non present stars work. Sure, it's possible that they're painted as hollow (as VSCode does), but it's also possible that they're painted as invisible, and if a user doesn't see them, and hasn't looked for extensions in general / recently, there's no way for them to know.

stars aren't shown in this view, so there's no hint about how to expect them above:

Some parts of the top grow ellipses, and the descriptive content wraps:

---

In short, I'd like the stars to wrap as an integral unit. arguably whatever tht13.html-preview-vscode is and the non selectable text This extension is enabled globally. should as well. Or, if not, at least use ellipses instead of simply clipping them.

[Swatilekha-Roy]

Hi, this is my very first time exploring the vscode repository and this issue seems interesting to me and I would be very grateful for a chance to be assigned on this issue as a part of Open Source Day! Thanks.

[jsoref]

@Swatilekha-Roy: @JacksonKearl assigned #123423 to @sandy081 on May 11 which presumably would fix this. Although I'm really not at all certain.

That PR doesn't appear to have a video showing it applied 😦 .

I'd suggest asking for help on https://aka.ms/vscode-dev-community -- good luck.

[justlucdewit]

Hi, im new to contributing to vs code, but id like to give it a try (because right now it seems like people got assigned, but they havnt done anything on this for months)

[jsoref]

Personally, if I were you, I'd start working on it, the odds aren't high that someone else is, and worst case, I'd learn how to do some VSCode coding and not have my changes merged because someone else's changes are merged instead.

I'd probably also join the slack community: https://aka.ms/vscode-dev-community

[justlucdewit]

When i click the link, i get 'This link is no longer active' error

[jsoref]

Hmm, that link is reachable from https://github.com/Microsoft/vscode/wiki/Feedback-Channels#slack

Lemme see if I can find someone who can poke it...

[justlucdewit]

Its not reachable on https://github.com/Microsoft/vscode/wiki/Feedback-Channels#slack for me either, weird

[justlucdewit]

[amanasifkhalid]

I can still reproduce this on the latest mainline build, and it looks like this issue hasn't received much love lately. Mind if I work on this? Thanks!

[jsoref]

Please be my guest

[CaptainT33mo]

Hi, It seems like it is still not resolved in the latest build so I was wondering whether it is supposed to look like this after it is wrapped?

Before:

After:

If yes, then I would like to work on its fix.

P.S.: Open to design suggestions.

[jsoref]

I try not to micromanage projects I don't own. In this case, I wouldn't expect the separators to line up (or connect) across lines as the four items aren't related. More or less, I probably wouldn't want them to end up at the beginning of a line either.

[CaptainT33mo]

Then I guess the comment in this PR https://github.com/microsoft/vscode/pull/147331 is what might be needed here. A horizontal scroll? If that's the case then that PR needs to get merged.

[jsoref]

Horizonal scrolling is almost never the answer in my opinion. That text should just wrap. But, I don't own this project.

The wrapping of the stars in the description's video looks good.

[priytosh-tripathi]

I agree with @jsoref 's approach of Wrapping the text in the form of

1. No star rating, when the space is not at all.
2. In the form of a Number and star when the space is limited (e.g. "5⭐️" )
3. As full star represented rating as soon as space is enough. (e.g. "⭐️⭐️⭐️⭐️⭐️")

[CaptainT33mo]

That sounds good for the star ratings part but what about the sponsors' badge and the total number of downloads counter? Will they be hidden when there is no space?

[prionkor]

Looks like it is how the UI got designed. Everything on the right side of the extension image shouldn't move down more then the height of the extension image (I am guessing).

In the smaller window the right side of all content is getting clipped not only the stars.

So it might be worth considering a new ticket on this subject and discuss how we can design the header section for smaller window.

Relevant to this discussion. The row that have 1. Company name 2. Verified Badge 3. Number of downloads 4. Ratings

For smaller screens what we can do is:

1. Approximation of Download counts: 35,234,234 to 35M+
2. Ratings graphics to texts [star icon] 4/5 (26). Meaning one star icon followed by ratings and count.

But this alone will not help us if we shrink the window further to max allowed state. Contents will get clipped eventually

What can we do?

1. Determine how much the window can shrink.
2. Implement a smaller size layout where the header content can stack top to bottom. This is a common approach. If we have any UI/UX expert for contribution we can discuss it further.

Further Observation

Class VerifiedPublisherWidget, InstallCountWidget, RatingsWidget, and SponsorWidget already have a property called small which looks like generates output that is optimize for smaller window but they are not used by the looks of it as I can see the value passed is hardcoded false.