Add visual indicator for extension packs in extension search results

[fiveisprime]

Today, it's possible to see the extensions that are part of an extension pack, but that requires that I click on the extension then click the "extension pack" header. I'd like to know, without clicking, that an extension is an extension pack via some kind of icon in the header.

It would be nice to link directly to the extension pack details (list of extensions in the pack) if the extension pack icon is clicked.

[sandy081]

@misolori Any suggestions for visual indications?

[miguelsolorio]

Here's a couple of ideas:

1. Multiple tile thumbnail

We could load the various thumbnails of the other extensions into a grid

2. Stacks view

We can try and make the image look like a "stack" of icons so that it appears to be many

3. Number badge

We could re-use our badge and append the total number of extensions in the pack. This could get a little busy with remote extensions since those have a remote badge in the bottom right.

4. Icon badge

This could also get busy with the remote badge but provides an entry point into the extension pack.

[fiveisprime]

I like the number badge since it doesn't obscure the icon and clearly shows what you're getting into.

I'd also like to see the extension pack prioritized in the search results with all extensions in the pack nested underneath. Something like this

That way, I can see what exactly is included in the tiles and even install just a couple of what's included without grabbing the pack and uninstalling/disabling things I don't want.

[miguelsolorio]

Placing the extensions under the pack like that would take up a lot more space. What if we added a small row under the extension pack author and placed the icons there like:

[fiveisprime]

Okay, yeah. I like that.

Next, is there any way to make the "Extension Pack" menu more obvious after clicking into and extension pack? The detail I'm looking for exists, but it's not super obvious.

[miguelsolorio]

We could try to bring in that content closer to the details page:

[fiveisprime]

I'm definitely feeling that 👍

[miguelsolorio]

And here's what it would look like if you did a search for all extensions packs, to see how busy it could get. This means we'd need to cap the number of extensions we show for each pack:

[sandy081]

Great ideas. I like the last proposal.

[miguelsolorio]

After getting feedback from the team, it appears the first option (tiles) is the favorable one since it doesn't feel too "heavy" compared to the extra row of icons.

[sandy081]

Deferring the implementation to next milestone.

[jwarkentin]

It would be nice to have collapsible groups of extensions in general. The extensions in a given group wouldn't have to be indented, taking more space to show. Instead, when expanded the group underneath could just share a slightly different background color and maybe an inset shadow to show the grouping. I just created a quick CodeSandbox here based on the TreeView from material-ui to demonstrate the concept. Here's a picture too:

My extension list is already so cluttered, it's hard to manage. Ultimately, I'd love to see grouping based on package and/or user-defined tags but at least being able to group and collapse extension packs would be amazing!

[sandy081]

Even though the tiles option is favourable, it is complex to implement and also not efficient. Because there is no information about the icons. It needs multiple queries. Hence I took the badge option.

Enhanced extension editor to show extension packs in the main page

[connor4312]

my $0.02 when verifying: it feels weird to have multiple scrollable regions together like this. Does that region need to scroll? I don't imagine we'll have packs with a dozen extensions to the point that it becomes overwhelming

[sandy081]

Yeah there are enough number of extension packs with atleast more than 4 extensions. I do not want read me to be pushed much further down. Above is the ideal proportional size for extensions and read me.

Agree that two scroll bars is not ideal but not odd :)

[miguelsolorio]

I think it would be worthwhile to update the extension pack items from the mockups above:

• Reduce the width of the extension packs so we can fit three in a row
• Hide extra meta data clutter (description, install button, install count, etc.)

If you do happen to get into a place where there are more extensions and you need to scroll, it can look like like there is only a certain amount and can be misleading (see below). And double scroll bars is something we intentionally avoid so we should allow the height to be dynamic.

[sandy081]

• ✅ Reduce the width of the extension packs so we can fit three in a row
• ✅ Hide extra meta data clutter (description, install button, install count, etc.) (Except install button)

I am not comfortable to have dynamic height for extensions, because this will push read me to bottom. See the following screen shot - Extension pack with many extensions (ignore the overlay)

My suggestion: Show scroll bar if an extension pack has more than 9 extensions. I think its a fair middle ground.

[miguelsolorio]

Ok let’s try that limit to see how it goes. Would be nice to set the height so that if there are more than 9
The next row is partially visible to indicate more.

For showing the install button, why is this useful in this case? Isn’t the point and the guidance to install the extension pack which install all the extensions? I don’t see the point of having that button visible and defeats the purpose of the extension pack.

[sandy081]

Would be nice to set the height so that if there are more than 9
The next row is partially visible to indicate more.

Good idea.

For showing the install button, why is this useful in this case? Isn’t the point and the guidance to install the extension pack which install all the extensions? I don’t see the point of having that button visible and defeats the purpose of the extension pack.

Don't want to limit and also want to give consistent representation of extension. Manage action is also available if the extension is already installed.

[sandy081]

[miguelsolorio]

Don't want to limit and also want to give consistent representation of extension

But we've never showed this additional info before on the extension pack view, here is stable:

IMO, the additional meta data feels unnecessary adds more visual noise to an already busy page.

[sandy081]

But we've never showed this additional info before on the extension pack view, here is stable:

Its an improvement from stable. It will make it easy for me to browse an extension pack and install the extensions I want from that pack individually. Also the same for uninstalling.

[jwarkentin]

Instead of a double scrollbar, wouldn't it make more sense to make the section expandable with a button/link at the bottom middle or left of the list of extensions that just says "Show more" or "Show all extensions" or something to that effect? That way the readme is still visible but the user can choose to expand the extension list as part of the one scrollable content area.

[mattacosta]

Another option is to just have the list overflow horizontally and scroll left and right, instead of up and down.

[sandy081]

Filed #94346 for expandable/collapsible section.

[connor4312]

It seems we determined the expandable/collapsible section wasn't feasible. Are there other approaches? I was watching Clarkio's stream today and he ran into this issue: https://clips.twitch.tv/CharmingLivelyPrariedogRiPepperonis

[jwarkentin]

@connor4312 I hadn't noticed the comment on the other issue that was opened to track it but it seems there was a misunderstanding based on the comment and the screenshot. There shouldn't be any feasibility problem as long as the expandable area is inserted at the top of the readme in the same scrollable area instead of expanding above the scrollable area and shrinking it.

[sandy081]

Lets continue the discussion in #94346