use an interaction counter and reduce animations when users interacted repeatedly with the language status hover, https://github.com/microsoft/vscode/issues/145950

pull/146588/head
Johannes 2022-04-01 16:58:25 +02:00
parent eed790ddf3
commit 1adebec08e
No known key found for this signature in database
GPG Key ID: 6DEF802A22264FCA
1 changed files with 34 additions and 1 deletions

View File

@ -41,6 +41,21 @@ class LanguageStatusViewModel {
}
}
class StoredCounter {
constructor(@IStorageService private readonly _storageService: IStorageService, private readonly _key: string) { }
get value() {
return this._storageService.getNumber(this._key, StorageScope.GLOBAL, 0);
}
increment(): number {
const n = this.value + 1;
this._storageService.store(this._key, n, StorageScope.GLOBAL, StorageTarget.MACHINE);
return n;
}
}
class EditorStatusContribution implements IWorkbenchContribution {
private static readonly _id = 'status.languageStatus';
@ -48,6 +63,7 @@ class EditorStatusContribution implements IWorkbenchContribution {
private static readonly _keyDedicatedItems = 'languageStatus.dedicated';
private readonly _disposables = new DisposableStore();
private readonly _interactionCounter: StoredCounter;
private _dedicated = new Set<string>();
@ -65,6 +81,7 @@ class EditorStatusContribution implements IWorkbenchContribution {
) {
_storageService.onDidChangeValue(this._handleStorageChange, this, this._disposables);
this._restoreState();
this._interactionCounter = new StoredCounter(_storageService, 'languageStatus.interactCount');
_languageStatusService.onDidChange(this._update, this, this._disposables);
_editorService.onDidActiveEditorChange(this._update, this, this._disposables);
@ -184,18 +201,34 @@ class EditorStatusContribution implements IWorkbenchContribution {
// animate the status bar icon whenever language status changes, repeat animation
// when severity is warning or error, don't show animation when showing progress/busy
const userHasInteractedWithStatus = this._interactionCounter.value >= 3;
const node = document.querySelector('.monaco-workbench .statusbar DIV#status\\.languageStatus span.codicon');
if (node instanceof HTMLElement) {
const _wiggle = 'wiggle';
const _repeat = 'repeat';
if (!isOneBusy) {
node.classList.add(_wiggle);
node.classList.toggle(_wiggle, showSeverity || !userHasInteractedWithStatus);
node.classList.toggle(_repeat, showSeverity);
this._renderDisposables.add(dom.addDisposableListener(node, 'animationend', _e => node.classList.remove(_wiggle, _repeat)));
} else {
node.classList.remove(_wiggle, _repeat);
}
}
// track when the hover shows (this is automagic and DOM mutation spying is needed...)
// use that as signal that the user has interacted/learned language status items work
if (!userHasInteractedWithStatus) {
const hoverTarget = document.querySelector('.monaco-workbench .context-view');
if (hoverTarget instanceof HTMLElement) {
const observer = new MutationObserver(() => {
if (document.contains(element)) {
this._interactionCounter.increment();
observer.disconnect();
}
});
observer.observe(document.body, { childList: true, subtree: true });
}
}
}
// dedicated status bar items are shows as-is in the status bar