Merge pull request microsoft#210790 from microsoft/tyriar/210107

Show terminal command guide when hovering side

Author: Tyriar

src/vs/workbench/contrib/terminal/browser/media/terminal.css

@@ -486,6 +486,7 @@
 	border-color: var(--vscode-notebook-inactiveFocusedCellBorder);
 	box-sizing: border-box;
 	transform: translateX(3px);
+	pointer-events: none;
 }
 .terminal-command-guide.top {
 	border-top-left-radius: 1px;

src/vs/workbench/contrib/terminalContrib/highlight/browser/terminal.highlight.contribution.ts

@@ -30,25 +30,28 @@ class TerminalHighlightContribution extends Disposable implements ITerminalContr
 
 	xtermOpen(xterm: IXtermTerminal & { raw: RawXtermTerminal }): void {
 		const screenElement = xterm.raw.element!.querySelector('.xterm-screen')!;
-		this._register(addDisposableListener(screenElement, 'mousemove', (e: MouseEvent) => {
-			if ((e.target as any).tagName !== 'CANVAS') {
-				return;
-			}
-			const rect = xterm.raw.element?.getBoundingClientRect();
-			if (!rect) {
-				return;
-			}
-			const mouseCursorY = Math.floor(e.offsetY / (rect.height / xterm.raw.rows));
-			const command = this._instance.capabilities.get(TerminalCapability.CommandDetection)?.getCommandForLine(xterm.raw.buffer.active.viewportY + mouseCursorY);
-			if (command && 'getOutput' in command) {
-				xterm.markTracker.showCommandGuide(command);
-			} else {
-				xterm.markTracker.showCommandGuide(undefined);
-			}
-		}));
-		this._register(addDisposableListener(screenElement, 'mouseout', () => xterm.markTracker.showCommandGuide(undefined)));
+		this._register(addDisposableListener(screenElement, 'mousemove', (e: MouseEvent) => this._tryShowHighlight(screenElement, xterm, e)));
+
+		const viewportElement = xterm.raw.element!.querySelector('.xterm-viewport')!;
+		this._register(addDisposableListener(viewportElement, 'mousemove', (e: MouseEvent) => this._tryShowHighlight(screenElement, xterm, e)));
+
+		this._register(addDisposableListener(xterm.raw.element!, 'mouseout', () => xterm.markTracker.showCommandGuide(undefined)));
 		this._register(xterm.raw.onData(() => xterm.markTracker.showCommandGuide(undefined)));
 	}
+
+	private _tryShowHighlight(element: Element, xterm: IXtermTerminal & { raw: RawXtermTerminal }, e: MouseEvent) {
+		const rect = element.getBoundingClientRect();
+		if (!rect) {
+			return;
+		}
+		const mouseCursorY = Math.floor(e.offsetY / (rect.height / xterm.raw.rows));
+		const command = this._instance.capabilities.get(TerminalCapability.CommandDetection)?.getCommandForLine(xterm.raw.buffer.active.viewportY + mouseCursorY);
+		if (command && 'getOutput' in command) {
+			xterm.markTracker.showCommandGuide(command);
+		} else {
+			xterm.markTracker.showCommandGuide(undefined);
+		}
+	}
 }
 
 registerTerminalContribution(TerminalHighlightContribution.ID, TerminalHighlightContribution, false);