Default sidebar width should not trigger narrow mode for extensionsViewlet

[digitarald]

The default sidebar width is dynamically calculated but ends up being 251px for most window sizes I tested. The narrow mode for the extensionsViewlet is triggered for ⪬ 300px.

While narrow is great for small spaces, it hides key information like the icon, rating and download numbers. For users who don't discover the resizing, important context is lost for extensions. I noticed this during my work on getting started, as it guides users early into the extension panel; which looks no very inviting without expanded.

Ideas for solutions

• Trigger narrow for ⪬ 250px
• Add a size before narrow that allows more context like a smaller extension icon and simpler rating, or other redesign ideas.

Tooltips on descriptions to read cut off text.

cc @sana-ajani @misolori @fiveisprime

[gjsjohnmurray]

@digitarald you are referring to the side bar, not the activity bar. See https://code.visualstudio.com/docs/getstarted/userinterface#_basic-layout and the annotated screenshot above that section.

Please update the issue.

[sana-ajani]

Good observation! Strongly agree that that showing icons, the starred recommended ones, and download count would provide a richer view and catch new users' eyes.

[miguelsolorio]

I think your proposal is to change the default width of the sidebar (not just for the extensions view). I can't remember if @sbatten or @isidorn owns the sidebar?

[isidorn]

Please note that the SideBar probably takes the "optimal" width of the explorer since that is the initial view shown.
When we change the active view in the sidebar the sidebar does not change size. Not sure if that would be strange.

Anyways leaving this up to @sbatten to decide

[digitarald]

I think your proposal is to change the default width of the sidebar (not just for the extensions view).

I am leaning towards the lower hanging proposal to change the min-width for narrow. For changing the default sidebar width I'd have to dig deeper into seen window sizes. I am also not aware that other panels have problems with narrow width; which would otherwise strengthen the case. The middle-ground would be increasing sidebar default width a bit and making the narrow min-width a bit wider.

[sbatten]

@sandy081 for the narrow breakpoint in extensions viewlet

[miguelsolorio]

Ah, ok I see what you mean now. That makes sense to me as well, this is handled here:

vscode/src/vs/workbench/contrib/extensions/browser/extensionsViewlet.ts

Lines 564 to 572 in 17c6796

	layout(dimension: Dimension): void {
	if (this.root) {
	this.root.classList.toggle('narrow', dimension.width <= 300);
	}
	if (this.searchBox) {
	this.searchBox.layout(new Dimension(dimension.width - 34, 20));
	}
	super.layout(new Dimension(dimension.width, dimension.height - 41));
	}

[digitarald]

And the initial default width comes from

https://github.com/microsoft/vscode/blob/main/src/vs/workbench/browser/parts/views/viewPaneContainer.ts#L708-L721

[sandy081]

It seems showing icon, title, version, rating & downloads in 250 px is too clumsy - title and version are shown partially with ellipsis.

What do you think not showing version instead of rating & downloads in narrow version?

[miguelsolorio]

@sandy081 I think when you are installing an extension for the first time you are less concerned about the version so that sounds good to me. Screenshot?

[digitarald]

Download numbers seem the best indicator (and are also used in Popular), as ratings can mislead.

If the entries use a grid layout, it could shift the icon from top-row to the left:

[sandy081]

Improved the viewlet representation when the width is small. It also has other improvements which are part of #126479. Feedback is appreciated

Kapture.2021-07-15.at.15.33.51.mp4