Two icons for representing notification progress are confusing

[isidorn]

Refs: #91163

We showing notificatino progress we render two icons in the status bar. The ball and the spinner.
I am not a big fan of this appraoch as they seem like two disconnected icons to me. We should somehow marry them, or show a progress in some other way.
On the very least they should share some backgroun color / outline

[bpasero]

Agree. @misolori might need your help. I am fine having another bell icon that just has a different decoration. Maybe we leave the animation out for laters.

[bpasero]

For example:

[isidorn]

Yeah that would be pretty cool. If the spinning is ike a spinning badge on the bell.

[bpasero]

I doubt we can animate just that part of the bell. It would be static and not spinning.

Unless maybe with some tricks we can overlay 2.

[miguelsolorio]

You can now use bell-progress though it's a bit hard to make out the smaller icon (had to reduce the amount of lines to make it stand out more):

Yea, if we want to animate the second icon we'd need to use two icons and animate one.

[bpasero]

I ended up not using this icon as I felt it was too subtle. What I did instead is to simply use the bell with a dot whenever a notification is in progress. I think this is easier to understand because this indicates that "something" is going on in the hidden notification center.

Verification: follow steps from #91163 and verify the bell shows a dot for as long as the notification is in progress.

[jrieken]

Are we sure this isn't too subtle? We have never finishing save operations that can be behind this...

[bpasero]

@jrieken the alternative is what I suggested earlier to promote a running save operation to the status bar where we usually show progress when not in notification.

[bpasero]

Went back to the original model where we would indicate the progress in the status bar whenever the notification is hidden:

Verification:

• craft a action that you can use to bring up a notification with progress (see below)
• as long as the notification is visible either as toast or in the notification center no status entry shows
• once you hide the notification toast with ESC key, status bar shows progress for as long as the progress goes on
• once you hide the notification center, status bar shows progress for as long as the progress goes on
• ensure the status bar entry can be clicked to open the notification center
• ensure the status bar entry is always showing the latest progress step message
• ensure the status bar entry goes away when the progress is done
• bring up multiple notifications with progress and see that things still work ok (note: the status bar currently only supports to show the last progress message that was set, not mutliple)

class ProgressAction extends Action {

	static readonly ID = 'workbench.action.ProgressAction';
	static readonly LABEL = nls.localize('ProgressAction', "ProgressAction");

	static counter = 0;

	constructor(
		id: string,
		label: string,
		@IProgressService private readonly progressService: IProgressService
	) {
		super(id, label);

		ProgressAction.counter++;
	}

	run(): Promise<void> {
		this.progressService.withProgress({
			location: ProgressLocation.Notification,
			title: `[${ProgressAction.counter}]Some long running operation`,
			cancellable: true
		}, progress => {
			progress.report({ increment: 0, total: 100 });

			let counter = 0;
			setInterval(() => {
				progress.report({ increment: 10, message: 'Increment from [microsoft.com](http://microsoft.com) ' + (++counter), total: 100 });
			}, 1000);

			return timeout(10000);
		});

		return Promise.resolve();
	}
}

[joaomoreno]

@bpasero Fantastic verification steps!

[bpasero]

Thanks for verifying so fast 👍

[miguelsolorio]

Since we won't be using the subtle icon (which I agree with) I'll remove it from our library