Replace remaining XAML-drawn icons with Image Service icons

[donnie-msft]

Blocked by: https://devdiv-design.visualstudio.com/D3%20Studio/_workitems/edit/12595
Remove and replace XAML-drawn icons with Image Service, once they are available per this blocking issue.

Cancel/Download are available today, but are very thin and may not work well in our UI. I believe new icons are being created per issue.
For the ones that already had close matches, they'll be removed as part of #9789

Cancel option?

I did find a possible replacement for the Cancel ("X"), but it's very thin and may be too difficult to see. (particularly on Dark theme). Code change: NuGet/NuGet.Client@06902c0.

@JonDouglas can comment on these samples:

XAML-drawn icons which don't currently have close matches in ImageService:

Icon	PackageIconMonikers	src\NuGet.Clients\NuGet.PackageManagement.UI\Xamls\
	PrefixReservedIndicator	PrefixReservedIndicator.xaml
	UpdateAvailableIndicator	UpdateAvailableIndicator.xaml
	UninstallIndicator	UninstallIndicator.xaml
	DownloadIndicator	DownloadIndicator.xaml

[donnie-msft]

andreinitescu commented:
(@JonDouglas any input on removing some of these indicators or changing the Update experience?)

After more thinking, my conclusion is... There should not be any icons!

Usually, status icons are very useful, but in this particular context of the NuGet explorer, which is already a complex screen, I find the status icons over the package icons very distracting and they unnecessarily increase the overall complexity of the screen.

For seeing the updates, there's already the "Updates" tab with the nice blue pill-like badge. Unfortunately, when you open the NuGet explorer, it takes an extra click to see what the Updates are, because it's a separate screen and it's not the default one. But let's leave this aside for the moment.

To see what I mean, compare the following two screenshots of the "Installed" screen, the current look and my suggested new look:

Screenshot of the current look

Beside the confusing status icons, the stacked versions on the right side of every package item in the list is another issue.

My mock-up of the new look

Having no complicated overlay status icons and only show the current version numbers makes the "Installed" screen look like exactly what I think it's supposed to be: a simple and clear list of your installed packages.

Another option for the new look

Another option I see for a better "Installed" screen is to add an "Update" button on those package items with an update available:

If having the "Update" button both on the package item in the list and in the package details panel on the right, might feel conflicting/confusing, there could only be only one button visible at a time depending on the selection of the list item:

• If the package in the list is not selected, the list item shows the "Update" button (like in my mock-up above)
• If the package in the list is selected, the list item does not show the "Update" button, because the package details panel on the right has the "Update" button for the selected package.

All these makes the "Updates" tab unnecessary. The blue badge showing the numbers of available updates would be displayed on the "Installed" tab item.

Also, in a similar way to how the app updates look on Android and iOS, the list could show first the packages which have updates.

Not shown in my mock-up is the "Update" button at the top in order to update all packages. It would only appear if there's at least two updates available.

I kept the same stacking of the current and update version numbers on the right when there's an update, but I think there might be a better way to show it than stacking them. Maybe something like just show the version of the update, or show "v12.0.2 ➡ v12.0.3" below the "Update" button.