Fully convert message to tooltip on hover

src/vs/workbench/parts/terminal/browser/terminalWidgetManager.ts

@@ -5,7 +5,6 @@
 
 import { ITerminalConfigHelper } from 'vs/workbench/parts/terminal/common/terminal';
 import { IDisposable, dispose } from 'vs/base/common/lifecycle';
-import { setDisposableTimeout } from 'vs/base/common/async';
 
 export class TerminalWidgetManager {
 	private _container: HTMLElement;
@@ -28,26 +27,24 @@ export class TerminalWidgetManager {
 	private _initTerminalHeightWatcher(terminalWrapper: HTMLElement) {
 		// Watch the xterm.js viewport for style changes and do a layout if it changes
 		this._xtermViewport = <HTMLElement>terminalWrapper.querySelector('.xterm-viewport');
-		const mutationObserver = new MutationObserver(() => this.refreshHeight());
+		const mutationObserver = new MutationObserver(() => this._refreshHeight());
 		mutationObserver.observe(this._xtermViewport, { attributes: true, attributeFilter: ['style'] });
 	}
 
 	public showMessage(left: number, top: number, text: string): void {
 		dispose(this._messageWidget);
 		this._messageListeners = dispose(this._messageListeners);
-
 		this._messageWidget = new MessageWidget(this._container, left, top, text);
-
-		// close after 3s
-		this._messageListeners.push(setDisposableTimeout(() => this.closeMessage(), 3000));
 	}
 
-	closeMessage(): void {
+	public closeMessage(): void {
 		this._messageListeners = dispose(this._messageListeners);
+		if (this._messageWidget) {
 			this._messageListeners.push(MessageWidget.fadeOut(this._messageWidget));
 		}
+	}
 
-	public refreshHeight(): void {
+	private _refreshHeight(): void {
 		this._container.style.height = this._xtermViewport.style.height;
 	}
 }
@@ -60,7 +57,7 @@ class MessageWidget {
 	public get text(): string { return this._text; }
 	public get domNode(): HTMLElement { return this._domNode; }
 
-	static fadeOut(messageWidget: MessageWidget): IDisposable {
+	public static fadeOut(messageWidget: MessageWidget): IDisposable {
 		let handle: number;
 		const dispose = () => {
 			messageWidget.dispose();
@@ -83,19 +80,12 @@ class MessageWidget {
 		this._domNode.style.position = 'absolute';
 		this._domNode.style.left = `${_left}px`;
 		this._domNode.style.bottom = `${_container.offsetHeight - _top}px`;
-		this._domNode.classList.add('terminal-message-widget');
-
+		this._domNode.classList.add('terminal-message-widget', 'fadeIn');
 		this._domNode.textContent = _text;
-		// const message = document.createElement('div');
-		// message.classList.add('message');
-		// message.textContent = _text;
-		// this._domNode.appendChild(message);
-
 		this._container.appendChild(this._domNode);
-		this._domNode.classList.add('fadeIn');
 	}
 
-	dispose() {
+	public dispose(): void {
 		if (this.domNode.parentElement === this._container) {
 			this._container.removeChild(this.domNode);
 		}

src/vs/workbench/parts/terminal/common/terminal.ts

@@ -294,13 +294,4 @@ export interface ITerminalInstance {
 	 * @param shell The new launch configuration.
 	 */
 	reuseTerminal(shell?: IShellLaunchConfig): void;
-
-	/**
-	 * Show a message in the terminal for a brief period.
-	 *
-	 * @param left The left position to show the message at.
-	 * @param top The top position to show the message at.
-	 * @param text The message to show.
-	 */
-	showMessage(left: number, top: number, text: string): void;
 }

src/vs/workbench/parts/terminal/electron-browser/terminalInstance.ts

@@ -211,8 +211,6 @@ export class TerminalInstance implements ITerminalInstance {
 		this._xtermElement = document.createElement('div');
 
 		this._xterm.open(this._xtermElement);
-		this._linkHandler = this._instantiationService.createInstance(TerminalLinkHandler, this, this._xterm, platform.platform);
-		this._linkHandler.registerLocalLinkHandler();
 		this._xterm.attachCustomKeydownHandler((event: KeyboardEvent) => {
 			// Disable all input if the terminal is exiting
 			if (this._isExiting) {
@@ -283,6 +281,8 @@ export class TerminalInstance implements ITerminalInstance {
 
 		this._wrapperElement.appendChild(this._xtermElement);
 		this._widgetManager = new TerminalWidgetManager(this._configHelper, this._wrapperElement);
+		this._linkHandler = this._instantiationService.createInstance(TerminalLinkHandler, this._widgetManager, this._xterm, platform.platform);
+		this._linkHandler.registerLocalLinkHandler();
 		this._container.appendChild(this._wrapperElement);
 
 		const computedStyle = window.getComputedStyle(this._container);
@@ -711,10 +711,6 @@ export class TerminalInstance implements ITerminalInstance {
 		}
 	}
 
-	public showMessage(left: number, top: number, text: string): void {
-		this._widgetManager.showMessage(left, top, text);
-	}
-
 	public static setTerminalProcessFactory(factory: ITerminalProcessFactory): void {
 		this._terminalProcessFactory = factory;
 	}

src/vs/workbench/parts/terminal/electron-browser/terminalLinkHandler.ts

@@ -10,7 +10,7 @@ import * as pfs from 'vs/base/node/pfs';
 import Uri from 'vs/base/common/uri';
 import { IWorkbenchEditorService } from 'vs/workbench/services/editor/common/editorService';
 import { IWorkspaceContextService } from 'vs/platform/workspace/common/workspace';
-import { ITerminalInstance } from 'vs/workbench/parts/terminal/common/terminal';
+import { TerminalWidgetManager } from 'vs/workbench/parts/terminal/browser/terminalWidgetManager';
 import { TPromise } from 'vs/base/common/winjs.base';
 
 const pathPrefix = '(\\.\\.?|\\~)';
@@ -36,7 +36,7 @@ export type XtermLinkMatcherValidationCallback = (uri: string, element: HTMLElem
 
 export class TerminalLinkHandler {
 	constructor(
-		private _instance: ITerminalInstance,
+		private _widgetManager: TerminalWidgetManager,
 		private _xterm: any,
 		private _platform: platform.Platform,
 		@IWorkbenchEditorService private _editorService: IWorkbenchEditorService,
@@ -72,14 +72,6 @@ export class TerminalLinkHandler {
 		return (event: MouseEvent, uri: string) => {
 			// Require ctrl/cmd on click
 			if (this._platform === platform.Platform.Mac ? !event.metaKey : !event.ctrlKey) {
-				const link = <HTMLElement>event.target;
-				let message: string;
-				if (platform.isMacintosh) {
-					message = nls.localize('terminalLinkHandler.followLinkCmd', 'Cmd + click to follow link');
-				} else {
-					message = nls.localize('terminalLinkHandler.followLinkCtrl', 'Ctrl + click to follow link');
-				}
-				this._instance.showMessage(link.offsetLeft, link.offsetTop, message);
 				event.preventDefault();
 				return false;
 			}
@@ -119,11 +111,21 @@ export class TerminalLinkHandler {
 	}
 
 	private _addTooltipEventListeners(element: HTMLElement) {
+		let timeout = null;
 		element.addEventListener('mouseenter', () => {
-			console.log('enter');
+			timeout = setTimeout(() => {
+				let message: string;
+				if (platform.isMacintosh) {
+					message = nls.localize('terminalLinkHandler.followLinkCmd', 'Cmd + click to follow link');
+				} else {
+					message = nls.localize('terminalLinkHandler.followLinkCtrl', 'Ctrl + click to follow link');
+				}
+				this._widgetManager.showMessage(element.offsetLeft, element.offsetTop, message);
+			}, 500);
 		});
 		element.addEventListener('mouseleave', () => {
-			console.log('leave');
+			clearTimeout(timeout);
+			this._widgetManager.closeMessage();
 		});
 	}