chat - indicate quota hit in prominent status (microsoft#235637) (microsoft#235658)

Author: bpasero

src/vs/workbench/browser/parts/statusbar/media/statusbarpart.css

@@ -205,7 +205,17 @@
 	background-color: var(--vscode-statusBarItem-prominentBackground);
 }
 
-.monaco-workbench .part.statusbar > .items-container > .statusbar-item.prominent-kind a:hover:not(.disabled) {
+/**
+ * Using :not(.compact-right):not(.compact-left) here to improve the visual appearance
+ * when a prominent item uses `compact: true` with other items. The presence of the
+ * !important directive for `background-color` otherwise blocks our special hover handling
+ * code here:
+ * https://github.com/microsoft/vscode/blob/c2037f152b2bb3119ce1d87f52987776540dd57f/src/vs/workbench/browser/parts/statusbar/statusbarPart.ts#L483-L505
+ *
+ * Note: this is currently only done for the prominent kind, but needs to be expanded if
+ * other kinds use compact feature.
+ */
+.monaco-workbench .part.statusbar > .items-container > .statusbar-item.prominent-kind:not(.compact-right):not(.compact-left) a:hover:not(.disabled) {
 	color: var(--vscode-statusBarItem-prominentHoverForeground);
 	background-color: var(--vscode-statusBarItem-prominentHoverBackground) !important;
 }

src/vs/workbench/browser/parts/statusbar/statusbarPart.ts

@@ -5,11 +5,11 @@
 
 import './media/statusbarpart.css';
 import { localize } from '../../../../nls.js';
-import { Disposable, DisposableStore, dispose, disposeIfDisposable, IDisposable, MutableDisposable, toDisposable } from '../../../../base/common/lifecycle.js';
+import { Disposable, DisposableStore, disposeIfDisposable, IDisposable, MutableDisposable, toDisposable } from '../../../../base/common/lifecycle.js';
 import { MultiWindowParts, Part } from '../../part.js';
 import { EventType as TouchEventType, Gesture, GestureEvent } from '../../../../base/browser/touch.js';
 import { IInstantiationService } from '../../../../platform/instantiation/common/instantiation.js';
-import { StatusbarAlignment, IStatusbarService, IStatusbarEntry, IStatusbarEntryAccessor, IStatusbarStyleOverride, isStatusbarEntryLocation, IStatusbarEntryLocation, isStatusbarEntryPriority, IStatusbarEntryPriority } from '../../../services/statusbar/browser/statusbar.js';
+import { StatusbarAlignment, IStatusbarService, IStatusbarEntry, IStatusbarEntryAccessor, IStatusbarStyleOverride, isStatusbarEntryLocation, IStatusbarEntryLocation, isStatusbarEntryPriority, IStatusbarEntryPriority, IStatusbarEntryOverride } from '../../../services/statusbar/browser/statusbar.js';
 import { IContextMenuService } from '../../../../platform/contextview/browser/contextView.js';
 import { IAction, Separator, toAction } from '../../../../base/common/actions.js';
 import { IThemeService } from '../../../../platform/theme/common/themeService.js';
@@ -75,6 +75,12 @@ export interface IStatusbarEntryContainer extends IDisposable {
 	 */
 	updateEntryVisibility(id: string, visible: boolean): void;
 
+	/**
+	 * Allows to override the appearance of an entry with the provided ID. Only a subset
+	 * of properties is allowed to be overridden.
+	 */
+	overrideEntry(id: string, override: IStatusbarEntryOverride): IDisposable;
+
 	/**
 	 * Focused the status bar. If one of the status bar entries was focused, focuses it directly.
 	 */
@@ -134,6 +140,9 @@ class StatusbarPart extends Part implements IStatusbarEntryContainer {
 	private readonly _onWillDispose = this._register(new Emitter<void>());
 	readonly onWillDispose = this._onWillDispose.event;
 
+	private readonly onDidOverrideEntry = this._register(new Emitter<string>());
+	private readonly entryOverrides = new Map<string, IStatusbarEntryOverride>();
+
 	private leftItemsContainer: HTMLElement | undefined;
 	private rightItemsContainer: HTMLElement | undefined;
 
@@ -173,6 +182,28 @@ class StatusbarPart extends Part implements IStatusbarEntryContainer {
 		this._register(this.contextService.onDidChangeWorkbenchState(() => this.updateStyles()));
 	}
 
+	overrideEntry(id: string, override: IStatusbarEntryOverride): IDisposable {
+		this.entryOverrides.set(id, override);
+		this.onDidOverrideEntry.fire(id);
+
+		return toDisposable(() => {
+			const currentOverride = this.entryOverrides.get(id);
+			if (currentOverride === override) {
+				this.entryOverrides.delete(id);
+				this.onDidOverrideEntry.fire(id);
+			}
+		});
+	}
+
+	private withEntryOverride(entry: IStatusbarEntry, id: string): IStatusbarEntry {
+		const override = this.entryOverrides.get(id);
+		if (override) {
+			entry = { ...entry, ...override };
+		}
+
+		return entry;
+	}
+
 	addEntry(entry: IStatusbarEntry, id: string, alignment: StatusbarAlignment, priorityOrLocation: number | IStatusbarEntryLocation | IStatusbarEntryPriority = 0): IStatusbarEntryAccessor {
 		let priority: IStatusbarEntryPriority;
 		if (isStatusbarEntryPriority(priorityOrLocation)) {
@@ -220,10 +251,11 @@ class StatusbarPart extends Part implements IStatusbarEntryContainer {
 	}
 
 	private doAddEntry(entry: IStatusbarEntry, id: string, alignment: StatusbarAlignment, priority: IStatusbarEntryPriority): IStatusbarEntryAccessor {
+		const disposables = new DisposableStore();
 
 		// View model item
 		const itemContainer = this.doCreateStatusItem(id, alignment);
-		const item = this.instantiationService.createInstance(StatusbarEntryItem, itemContainer, entry, this.hoverDelegate);
+		const item = disposables.add(this.instantiationService.createInstance(StatusbarEntryItem, itemContainer, this.withEntryOverride(entry, id), this.hoverDelegate));
 
 		// View model entry
 		const viewModelEntry: IStatusbarViewModelEntry = new class implements IStatusbarViewModelEntry {
@@ -245,20 +277,32 @@ class StatusbarPart extends Part implements IStatusbarEntryContainer {
 			this.appendStatusbarEntry(viewModelEntry);
 		}
 
-		return {
+		let lastEntry = entry;
+		const accessor: IStatusbarEntryAccessor = {
 			update: entry => {
-				item.update(entry);
+				lastEntry = entry;
+				item.update(this.withEntryOverride(entry, id));
 			},
 			dispose: () => {
 				const { needsFullRefresh } = this.doAddOrRemoveModelEntry(viewModelEntry, false);
 				if (needsFullRefresh) {
 					this.appendStatusbarEntries();
 				} else {
 					itemContainer.remove();
+					this.updateCompactEntries();
 				}
-				dispose(item);
+				disposables.dispose();
 			}
 		};
+
+		// React to overrides
+		disposables.add(this.onDidOverrideEntry.event(overrideEntryId => {
+			if (overrideEntryId === id) {
+				accessor.update(lastEntry);
+			}
+		}));
+
+		return accessor;
 	}
 
 	private doCreateStatusItem(id: string, alignment: StatusbarAlignment, ...extraClasses: string[]): HTMLElement {
@@ -790,6 +834,16 @@ export class StatusbarService extends MultiWindowParts<StatusbarPart> implements
 		}
 	}
 
+	overrideEntry(id: string, override: IStatusbarEntryOverride): IDisposable {
+		const disposables = new DisposableStore();
+
+		for (const part of this.parts) {
+			disposables.add(part.overrideEntry(id, override));
+		}
+
+		return disposables;
+	}
+
 	focus(preserveEntryFocus?: boolean): void {
 		this.activePart.focus(preserveEntryFocus);
 	}
@@ -856,6 +910,10 @@ export class ScopedStatusbarService extends Disposable implements IStatusbarServ
 		this.statusbarEntryContainer.updateEntryVisibility(id, visible);
 	}
 
+	overrideEntry(id: string, override: IStatusbarEntryOverride): IDisposable {
+		return this.statusbarEntryContainer.overrideEntry(id, override);
+	}
+
 	focus(preserveEntryFocus?: boolean): void {
 		this.statusbarEntryContainer.focus(preserveEntryFocus);
 	}

src/vs/workbench/contrib/chat/browser/chatQuotasService.ts

@@ -8,7 +8,7 @@ import { safeIntl } from '../../../../base/common/date.js';
 import { language } from '../../../../base/common/platform.js';
 import { Emitter, Event } from '../../../../base/common/event.js';
 import { MarkdownString } from '../../../../base/common/htmlContent.js';
-import { Disposable, MutableDisposable } from '../../../../base/common/lifecycle.js';
+import { Disposable, DisposableStore } from '../../../../base/common/lifecycle.js';
 import { localize, localize2 } from '../../../../nls.js';
 import { Categories } from '../../../../platform/action/common/actionCommonCategories.js';
 import { Action2, registerAction2 } from '../../../../platform/actions/common/actions.js';
@@ -18,7 +18,7 @@ import { createDecorator, ServicesAccessor } from '../../../../platform/instanti
 import { IQuickInputService } from '../../../../platform/quickinput/common/quickInput.js';
 import product from '../../../../platform/product/common/product.js';
 import { IWorkbenchContribution } from '../../../common/contributions.js';
-import { IStatusbarEntryAccessor, IStatusbarService, StatusbarAlignment } from '../../../services/statusbar/browser/statusbar.js';
+import { IStatusbarService, StatusbarAlignment } from '../../../services/statusbar/browser/statusbar.js';
 import { ChatContextKeys } from '../common/chatContextKeys.js';
 import { ICommandService } from '../../../../platform/commands/common/commands.js';
 
@@ -212,7 +212,7 @@ export class ChatQuotasStatusBarEntry extends Disposable implements IWorkbenchCo
 
 	private static readonly COPILOT_STATUS_ID = 'GitHub.copilot.status'; // TODO@bpasero unify into 1 core indicator
 
-	private readonly _entry = this._register(new MutableDisposable<IStatusbarEntryAccessor>());
+	private readonly entry = this._register(new DisposableStore());
 
 	constructor(
 		@IStatusbarService private readonly statusbarService: IStatusbarService,
@@ -221,12 +221,17 @@ export class ChatQuotasStatusBarEntry extends Disposable implements IWorkbenchCo
 		super();
 
 		this._register(Event.runAndSubscribe(this.chatQuotasService.onDidChangeQuotas, () => this.updateStatusbarEntry()));
+		this._register(this.statusbarService.onDidChangeEntryVisibility(e => {
+			if (e.id === ChatQuotasStatusBarEntry.COPILOT_STATUS_ID) {
+				this.updateStatusbarEntry();
+			}
+		}));
 	}
 
 	private updateStatusbarEntry(): void {
-		const { chatQuotaExceeded, completionsQuotaExceeded } = this.chatQuotasService.quotas;
+		this.entry.clear();
 
-		// Some quota exceeded, show indicator
+		const { chatQuotaExceeded, completionsQuotaExceeded } = this.chatQuotasService.quotas;
 		if (chatQuotaExceeded || completionsQuotaExceeded) {
 			let text: string;
 			if (chatQuotaExceeded && !completionsQuotaExceeded) {
@@ -242,23 +247,21 @@ export class ChatQuotasStatusBarEntry extends Disposable implements IWorkbenchCo
 				text = `$(copilot-warning) ${text}`;
 			}
 
-			this._entry.value = this.statusbarService.addEntry({
+			this.entry.add(this.statusbarService.addEntry({
 				name: localize('indicator', "Copilot Limit Indicator"),
 				text,
 				ariaLabel: text,
 				command: OPEN_CHAT_QUOTA_EXCEEDED_DIALOG,
 				showInAllWindows: true,
+				kind: 'prominent',
 				tooltip: quotaToButtonMessage({ chatQuotaExceeded, completionsQuotaExceeded })
 			}, ChatQuotasStatusBarEntry.ID, StatusbarAlignment.RIGHT, {
 				id: ChatQuotasStatusBarEntry.COPILOT_STATUS_ID,
 				alignment: StatusbarAlignment.RIGHT,
 				compact: isCopilotStatusVisible
-			});
-		}
+			}));
 
-		// No quota exceeded, remove indicator
-		else {
-			this._entry.clear();
+			this.entry.add(this.statusbarService.overrideEntry(ChatQuotasStatusBarEntry.COPILOT_STATUS_ID, { kind: 'prominent' }));
 		}
 	}
 }

src/vs/workbench/services/statusbar/browser/statusbar.ts

@@ -197,3 +197,15 @@ export interface IStatusbarEntryAccessor extends IDisposable {
 	 */
 	update(properties: IStatusbarEntry): void;
 }
+
+/**
+ * A way to override a status bar entry appearance. Only a subset of
+ * properties are currently allowed to override.
+ */
+export interface IStatusbarEntryOverride {
+
+	/**
+	 * The kind of status bar entry. This applies different colors to the entry.
+	 */
+	readonly kind?: StatusbarEntryKind;
+}