Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2025-12-24 12:19:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

ensure focus is set correctly in output, enable keyboard scrolling for outputs

Browse Source
This commit is contained in:
aamunger
2023-04-21 13:26:35 -07:00
parent 59012a886b
commit 31cd1ee042
3 changed files with 34 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
extensions/notebook-renderers/src/index.ts
View File

@@ -196,6 +196,17 @@ function onScrollHandler(e: globalThis.Event) {
} else {
target.classList.add('more-above');
}
e.stopPropagation();
}
function onKeypressHandler(e: KeyboardEvent) {
if (e.ctrlKey || e.shiftKey) {
return;
}
if (e.code === 'ArrowDown' || e.code === 'End' || e.code === 'ArrowUp' || e.code === 'Home') {
// These should change the scroll position, not adjust the selected cell in the notebook
e.stopPropagation();
}
}
// if there is a scrollable output, it will be scrolled to the given value if provided or the bottom of the element
@@ -205,6 +216,9 @@ function initializeScroll(scrollableElement: HTMLElement, disposables: Disposabl
scrollableElement.scrollTop = scrollTop !== undefined ? scrollTop : scrollableElement.scrollHeight;
scrollableElement.addEventListener('scroll', onScrollHandler);
disposables.push({ dispose: () => scrollableElement.removeEventListener('scroll', onScrollHandler) });
scrollableElement.addEventListener('keydown', onKeypressHandler);
disposables.push({ dispose: () => scrollableElement.removeEventListener('keydown', onKeypressHandler) });
scrollableElement.tabIndex = 0;
}
}
@@ -351,6 +365,10 @@ export const activate: ActivationFunction<void> = (ctx) => {
#container div.output .scrollable.scrollbar-visible {
border-color: var(--vscode-editorWidget-border);
}
#container div.output .scrollable.scrollbar-visible:focus{
outline: 0;
border-color: var(--theme-input-focus-border-color);
}
.output-plaintext .code-bold,
.output-stream .code-bold,
.traceback .code-bold {