Improve command navigation visual feedback

Fixes #153591

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

@@ -449,6 +449,11 @@
 .terminal-scroll-highlight {
 	left: 0;
 	right: 0;
+	border-left: 5px solid #ffffff;
+	border-left-width: 5px !important;
+}
+
+.terminal-scroll-highlight-outline {
 	border: 1px solid #ffffff;
 }
 

src/vs/workbench/contrib/terminal/browser/xterm/commandNavigationAddon.ts

@@ -73,6 +73,8 @@ export class CommandNavigationAddon extends Disposable implements ICommandTracke
 		// Clear the current marker so successive focus/selection actions are performed from the
 		// bottom of the buffer
 		this._currentMarker = Boundary.Bottom;
+		this._navigationDecoration?.dispose();
+		this._navigationDecoration = undefined;
 		this._selectionStart = null;
 	}
 
@@ -110,6 +112,7 @@ export class CommandNavigationAddon extends Disposable implements ICommandTracke
 		if (markerIndex < 0) {
 			this._currentMarker = Boundary.Top;
 			this._terminal.scrollToTop();
+			this.clearMarker();
 			return;
 		}
 
@@ -151,6 +154,7 @@ export class CommandNavigationAddon extends Disposable implements ICommandTracke
 		if (markerIndex >= this._getCommandMarkers().length) {
 			this._currentMarker = Boundary.Bottom;
 			this._terminal.scrollToBottom();
+			this.clearMarker();
 			return;
 		}
 
@@ -178,12 +182,14 @@ export class CommandNavigationAddon extends Disposable implements ICommandTracke
 		});
 		this._navigationDecoration = decoration;
 		if (decoration) {
-			const isRendered = false;
+			let renderedElement: HTMLElement | undefined;
+
 			decoration.onRender(element => {
-				if (!isRendered) {
-					// TODO: Remove when https://github.com/xtermjs/xterm.js/issues/3686 is fixed
-					if (!element.classList.contains('xterm-decoration-overview-ruler')) {
-						element.classList.add('terminal-scroll-highlight');
+				if (!renderedElement) {
+					renderedElement = element;
+					element.classList.add('terminal-scroll-highlight', 'terminal-scroll-highlight-outline');
+					if (this._terminal?.element) {
+						element.style.marginLeft = `-${getComputedStyle(this._terminal.element).paddingLeft}`;
 					}
 				}
 			});
@@ -194,7 +200,9 @@ export class CommandNavigationAddon extends Disposable implements ICommandTracke
 			});
 			// Number picked to align with symbol highlight in the editor
 			timeout(350).then(() => {
-				decoration.dispose();
+				if (renderedElement) {
+					renderedElement.classList.remove('terminal-scroll-highlight-outline');
+				}
 			});
 		}
 	}