editor - update style and behaviour of message widget (#186480)

microsoft · Jun 28, 2023 · 93b9d0a · 93b9d0a
1 parent fb1d792
commit 93b9d0a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 16 deletions.
diff --git a/src/vs/editor/contrib/message/browser/messageController.css b/src/vs/editor/contrib/message/browser/messageController.css
@@ -31,19 +31,23 @@
 }
 
 .monaco-editor .monaco-editor-overlaymessage .message {
-	padding: 1px 4px;
-	color: var(--vscode-inputValidation-infoForeground);
-	background-color: var(--vscode-inputValidation-infoBackground);
+	padding: 2px 4px;
+	color: var(--vscode-editorHoverWidget-foreground);
+	background-color: var(--vscode-editorHoverWidget-background);
 	border: 1px solid var(--vscode-inputValidation-infoBorder);
+	border-radius: 3px;
 }
 
 .monaco-editor .monaco-editor-overlaymessage .message p {
 	margin-block: 0px;
 }
 
 .monaco-editor .monaco-editor-overlaymessage .message a {
-	font-weight: bold;
-	color: var(--vscode-inputValidation-infoForeground);
+	color: var(--vscode-textLink-foreground);
+}
+
+.monaco-editor .monaco-editor-overlaymessage .message a:hover {
+	color: var(--vscode-textLink-activeForeground);
 }
 
 .monaco-editor.hc-black .monaco-editor-overlaymessage .message,
@@ -59,6 +63,7 @@
 	z-index: 1000;
 	border-width: 8px;
 	position: absolute;
+	left: 2px;
 }
 
 .monaco-editor .monaco-editor-overlaymessage .anchor.top {

diff --git a/src/vs/editor/contrib/message/browser/messageController.ts b/src/vs/editor/contrib/message/browser/messageController.ts
@@ -5,7 +5,7 @@
 
 import { renderMarkdown } from 'vs/base/browser/markdownRenderer';
 import { alert } from 'vs/base/browser/ui/aria/aria';
-import { TimeoutTimer } from 'vs/base/common/async';
+import { Event } from 'vs/base/common/event';
 import { IMarkdownString, isMarkdownString } from 'vs/base/common/htmlContent';
 import { KeyCode } from 'vs/base/common/keyCodes';
 import { DisposableStore, IDisposable, MutableDisposable } from 'vs/base/common/lifecycle';
@@ -38,7 +38,7 @@ export class MessageController implements IEditorContribution {
 	private readonly _messageWidget = new MutableDisposable<MessageWidget>();
 	private readonly _messageListeners = new DisposableStore();
 	private _message: { element: HTMLElement; dispose: () => void } | undefined;
-	private _focus: boolean = false;
+	private _mouseOverMessage: boolean = false;
 
 	constructor(
 		editor: ICodeEditor,
@@ -76,21 +76,24 @@ export class MessageController implements IEditorContribution {
 		}) : undefined;
 		this._messageWidget.value = new MessageWidget(this._editor, position, typeof message === 'string' ? message : this._message!.element);
 
-		// close on blur, cursor, model change, dispose
-		this._messageListeners.add(this._editor.onDidBlurEditorText(() => {
-			if (!this._focus) {
-				this.closeMessage();
+		// close on blur (debounced to allow to tab into the message), cursor, model change, dispose
+		this._messageListeners.add(Event.debounce(this._editor.onDidBlurEditorText, (last, event) => event, 0)(() => {
+			if (this._mouseOverMessage) {
+				return; // override when mouse over message
+			}
+
+			if (this._messageWidget.value && dom.isAncestor(document.activeElement, this._messageWidget.value.getDomNode())) {
+				return; // override when focus is inside the message
 			}
+
+			this.closeMessage();
 		}
 		));
 		this._messageListeners.add(this._editor.onDidChangeCursorPosition(() => this.closeMessage()));
 		this._messageListeners.add(this._editor.onDidDispose(() => this.closeMessage()));
 		this._messageListeners.add(this._editor.onDidChangeModel(() => this.closeMessage()));
-		this._messageListeners.add(dom.addDisposableListener(this._messageWidget.value.getDomNode(), dom.EventType.MOUSE_ENTER, () => this._focus = true, true));
-		this._messageListeners.add(dom.addDisposableListener(this._messageWidget.value.getDomNode(), dom.EventType.MOUSE_LEAVE, () => this._focus = false, true));
-
-		// 3sec
-		this._messageListeners.add(new TimeoutTimer(() => this.closeMessage(), 3000));
+		this._messageListeners.add(dom.addDisposableListener(this._messageWidget.value.getDomNode(), dom.EventType.MOUSE_ENTER, () => this._mouseOverMessage = true, true));
+		this._messageListeners.add(dom.addDisposableListener(this._messageWidget.value.getDomNode(), dom.EventType.MOUSE_LEAVE, () => this._mouseOverMessage = false, true));
 
 		// close on mouse move
 		let bounds: Range;