flash background with prominent color only and only for warning and e…

…rror, #145950
microsoft · Apr 6, 2022 · 807596b · 807596b
1 parent 368c39c
commit 807596b
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 25 deletions.
diff --git a/src/vs/workbench/contrib/languageStatus/browser/languageStatus.contribution.ts b/src/vs/workbench/contrib/languageStatus/browser/languageStatus.contribution.ts
@@ -204,18 +204,21 @@ 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 A');
-			if (node instanceof HTMLElement) {
-				const _sev = `sev${first.severity}`;
+			const node = document.querySelector('.monaco-workbench.enable-motion .statusbar DIV#status\\.languageStatus A>SPAN.codicon');
+			const container = document.querySelector('.monaco-workbench.enable-motion .statusbar DIV#status\\.languageStatus');
+			if (node instanceof HTMLElement && container) {
 				const _wiggle = 'wiggle';
-				const _repeat = 'repeat';
+				const _flash = 'flash';
 				if (!isOneBusy) {
+					// wiggle icon when severe or "new"
 					node.classList.toggle(_wiggle, showSeverity || !userHasInteractedWithStatus);
-					node.classList.toggle(_sev, showSeverity || !userHasInteractedWithStatus);
-					node.classList.toggle(_repeat, showSeverity);
-					this._renderDisposables.add(dom.addDisposableListener(node, 'animationend', _e => node.classList.remove(_wiggle, _repeat, _sev)));
+					this._renderDisposables.add(dom.addDisposableListener(node, 'animationend', _e => node.classList.remove(_wiggle)));
+					// flash background when severe
+					container.classList.toggle(_flash, showSeverity);
+					this._renderDisposables.add(dom.addDisposableListener(container, 'animationend', _e => container.classList.remove(_flash)));
 				} else {
-					node.classList.remove(_wiggle, _repeat, _sev);
+					node.classList.remove(_wiggle);
+					container.classList.remove(_flash);
 				}
 			}
 

diff --git a/src/vs/workbench/contrib/languageStatus/browser/media/languageStatus.css b/src/vs/workbench/contrib/languageStatus/browser/media/languageStatus.css
@@ -3,15 +3,11 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+/* status bar animation */
 
 @keyframes wiggle {
 	0% {
 		transform: rotate(0) scale(1);
-		opacity: 0;
-	}
-
-	30% {
-		opacity: .75;
 	}
 
 	15%,
@@ -26,32 +22,37 @@
 
 	100% {
 		transform: rotate(0) scale(1);
-		opacity: 0;
 	}
 }
 
-.monaco-workbench.enable-motion .statusbar DIV#status\.languageStatus A.wiggle {
+.monaco-workbench.enable-motion .statusbar DIV#status\.languageStatus A>SPAN.codicon.wiggle {
 	animation-duration: .8s;
 	animation-iteration-count: 1;
 	animation-name: wiggle;
 }
 
-.monaco-workbench.enable-motion .statusbar DIV#status\.languageStatus A.wiggle.sev1 {
-	background-color: var(--vscode-statusBarItem-prominentBackground);
-}
+@keyframes flash {
+	0% {
+		background-color: initial;
+	}
 
-.monaco-workbench.enable-motion .statusbar DIV#status\.languageStatus A.wiggle.sev2 {
-	background-color: var(--vscode-statusBarItem-warningBackground);
-}
+	50% {
+		background-color: var(--vscode-statusBarItem-prominentBackground);
+	}
 
-.monaco-workbench.enable-motion .statusbar DIV#status\.languageStatus A.wiggle.sev3 {
-	background-color: var(--vscode-statusBarItem-errorBackground);
+	100% {
+		background-color: initial;
+	}
 }
 
-.monaco-workbench.enable-motion .statusbar DIV#status\.languageStatus A.wiggle.repeat {
-	animation-iteration-count: 3;
+.monaco-workbench.enable-motion .statusbar DIV#status\.languageStatus.flash {
+	animation-duration: .8s;
+	animation-iteration-count: 1;
+	animation-name: flash;
 }
 
+/* --- hover */
+
 .monaco-workbench .hover-language-status {
 	display: flex;
 	padding: 4px 8px;