Improve command navigation visual feedback

Fixes #153591
This commit is contained in:
Daniel Imms 2022-07-19 07:43:19 -07:00
parent f8aeb2013e
commit baf33bd455
No known key found for this signature in database
GPG key ID: E5CF412B63651C69
2 changed files with 19 additions and 6 deletions

View file

@ -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;
}

View file

@ -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');
}
});
}
}