make all builtin output containers focusable

This commit is contained in:
aamunger 2023-05-09 13:38:34 -07:00
parent 07b73db4f8
commit f9ee1a2abc
No known key found for this signature in database
GPG key ID: F2CA0C6303FC6B74
2 changed files with 21 additions and 15 deletions

View file

@ -154,7 +154,6 @@ function renderError(
contentParent.classList.toggle('word-wrap', e.outputWordWrap);
}));
contentParent.classList.toggle('scrollable', outputScrolling);
outputElement.classList.toggle('remove-padding', outputScrolling);
contentParent.appendChild(content);
outputElement.appendChild(contentParent);
@ -232,7 +231,6 @@ function renderStream(outputInfo: OutputItem, outputElement: HTMLElement, error:
const outputScrolling = scrollingEnabled(outputInfo, ctx.settings);
outputElement.classList.add('output-stream');
outputElement.classList.toggle('remove-padding', outputScrolling);
const text = outputInfo.text();
const content = createOutputContent(outputInfo.id, [text], ctx.settings.lineLimit, outputScrolling, false);
@ -287,7 +285,6 @@ function renderText(outputInfo: OutputItem, outputElement: HTMLElement, ctx: IRi
}
content.classList.toggle('scrollable', outputScrolling);
outputElement.classList.toggle('remove-padding', outputScrolling);
outputElement.appendChild(content);
initializeScroll(content, disposableStore);
@ -327,16 +324,28 @@ export const activate: ActivationFunction<void> = (ctx) => {
#container div.output_container .word-wrap span {
white-space: pre-wrap;
}
#container div.output .scrollable {
#container div.output>div {
padding-left: var(--notebook-output-node-left-padding);
padding-right: var(--notebook-output-node-padding);
overflow-y: scroll;
max-height: var(--notebook-cell-output-max-height);
border-style: solid;
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: transparent;
}
#container div.output>div:focus {
outline: 0;
border-color: var(--theme-input-focus-border-color);
}
#container div.output .scrollable {
overflow-y: scroll;
max-height: var(--notebook-cell-output-max-height);
}
#container div.output .scrollable.scrollbar-visible {
border-color: var(--vscode-editorWidget-border);
}
#container div.output .scrollable.scrollbar-visible:focus {
border-color: var(--theme-input-focus-border-color);
}
#container div.truncation-message {
font-style: italic;
font-family: var(--theme-font-family);
@ -351,13 +360,6 @@ export const activate: ActivationFunction<void> = (ctx) => {
#container div.output .scrollable.more-above {
box-shadow: var(--vscode-scrollbar-shadow) 0 6px 6px -6px inset
}
#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 {
@ -383,6 +385,7 @@ export const activate: ActivationFunction<void> = (ctx) => {
return {
renderOutputItem: async (outputInfo, element, signal?: AbortSignal) => {
element.classList.add('remove-padding');
switch (outputInfo.mime) {
case 'text/html':
case 'image/svg+xml': {
@ -445,6 +448,10 @@ export const activate: ActivationFunction<void> = (ctx) => {
default:
break;
}
if (element.querySelector('div')) {
element.querySelector('div')!.tabIndex = 0;
}
},
disposeOutputItem: (id: string | undefined) => {
if (id) {

View file

@ -337,7 +337,6 @@ export class BackLayerWebView<T extends ICommonCellInfo> extends Themable {
padding-left: var(--notebook-output-node-left-padding);
box-sizing: border-box;
border-top: none;
border: 1px solid var(--theme-notebook-output-border);
}
/* markdown */