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

simplify generated html

Browse Source
This commit is contained in:
aamunger
2023-03-10 09:34:15 -08:00
parent 994b2d03c0
commit 39c8e79b13
2 changed files with 49 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,7 @@
*--------------------------------------------------------------------------------------------*/
import type { ActivationFunction, OutputItem, RendererContext } from 'vscode-notebook-renderer';
import { insertOutput, scrollableClass } from './textHelper';
import { insertOutput as createOutputContent, scrollableClass } from './textHelper';
interface IDisposable {
dispose(): void;
@@ -165,8 +165,6 @@ function renderError(
clearContainer(container);
const element = document.createElement('div');
container.appendChild(element);
type ErrorLike = Partial<Error>;
let err: ErrorLike;
@@ -178,17 +176,16 @@ function renderError(
}
if (err.stack) {
const stack = document.createElement('span');
stack.classList.add('traceback');
container.classList.add('traceback');
if (ctx.settings.outputWordWrap) {
stack.classList.add('wordWrap');
container.classList.add('wordWrap');
}
disposableStore.push(ctx.onDidChangeSettings(e => {
stack.classList.toggle('wordWrap', e.outputWordWrap);
container.classList.toggle('wordWrap', e.outputWordWrap);
}));
insertOutput(outputInfo.id, [err.stack ?? ''], ctx.settings.lineLimit, ctx.settings.outputScrolling, stack, true);
appendChildAndScroll(container, stack, disposableStore);
const content = createOutputContent(outputInfo.id, [err.stack ?? ''], ctx.settings.lineLimit, ctx.settings.outputScrolling, true);
appendChildAndScroll(container, content, disposableStore);
} else {
const header = document.createElement('div');
const headerMessage = err.name && err.message ? `${err.name}: ${err.message}` : err.name || err.message;
@@ -227,17 +224,16 @@ function onScrollHandler(e: globalThis.Event) {
// if there is a scrollable output, it will be scrolled to the given value if provided or the bottom of the element
function appendChildAndScroll(container: HTMLElement, child: HTMLElement, disposables: DisposableStore, scrollTop?: number) {
container.appendChild(child);
const scrollableElement = child.querySelector(`.${scrollableClass}`);
if (scrollableElement instanceof HTMLElement) {
scrollableElement.scrollTop = scrollTop !== undefined ? scrollTop : scrollableElement.scrollHeight;
scrollableElement.addEventListener('scroll', onScrollHandler);
disposables.push({ dispose: () => scrollableElement.removeEventListener('scroll', onScrollHandler) });
if (child.classList.contains(scrollableClass)) {
child.scrollTop = scrollTop !== undefined ? scrollTop : child.scrollHeight;
child.addEventListener('scroll', onScrollHandler);
disposables.push({ dispose: () => child.removeEventListener('scroll', onScrollHandler) });
}
}
// Find the scrollTop of the existing scrollable output, return undefined if at the bottom or element doesn't exist
function findScrolledHeight(outputContainer: HTMLElement, outputId: string): number | undefined {
const scrollableElement = outputContainer.querySelector(`[output-item-id="${outputId}"] .${scrollableClass}`);
const scrollableElement = outputContainer.querySelector(`[output-item-id="${outputId}"].${scrollableClass}`);
if (scrollableElement && scrollableElement.scrollHeight - scrollableElement.scrollTop - scrollableElement.clientHeight > 2) {
// not scrolled to the bottom
return scrollableElement.scrollTop;
@@ -266,27 +262,27 @@ function renderStream(outputInfo: OutputItem, container: HTMLElement, error: boo
element.classList.toggle('wordWrap', e.outputWordWrap);
}));
element.setAttribute('output-item-id', outputInfo.id);
insertOutput(outputInfo.id, [text], ctx.settings.lineLimit, outputScrolling, element, false);
appendChildAndScroll(outputElement, element, disposableStore);
const content = createOutputContent(outputInfo.id, [text], ctx.settings.lineLimit, outputScrolling, false);
appendChildAndScroll(outputElement, content, disposableStore);
return disposableStore;
}
const element = document.createElement('span');
element.classList.add('output-stream');
element.classList.toggle('wordWrap', ctx.settings.outputWordWrap);
disposableStore.push(ctx.onDidChangeSettings(e => {
element.classList.toggle('wordWrap', e.outputWordWrap);
}));
element.setAttribute('output-item-id', outputInfo.id);
const text = outputInfo.text();
insertOutput(outputInfo.id, [text], ctx.settings.lineLimit, outputScrolling, element, false);
const content = createOutputContent(outputInfo.id, [text], ctx.settings.lineLimit, outputScrolling, false);
content.classList.add('output-stream');
content.classList.toggle('wordWrap', ctx.settings.outputWordWrap);
disposableStore.push(ctx.onDidChangeSettings(e => {
content.classList.toggle('wordWrap', e.outputWordWrap);
}));
content.setAttribute('output-item-id', outputInfo.id);
const scrollTop = outputScrolling ? findScrolledHeight(container, outputInfo.id) : undefined;
while (container.firstChild) {
container.removeChild(container.firstChild);
}
appendChildAndScroll(container, element, disposableStore, scrollTop);
container.setAttribute('output-mime-type', outputInfo.mime);
appendChildAndScroll(container, content, disposableStore, scrollTop);
content.setAttribute('output-mime-type', outputInfo.mime);
if (error) {
container.classList.add('error');
}
@@ -296,16 +292,16 @@ function renderStream(outputInfo: OutputItem, container: HTMLElement, error: boo
function renderText(outputInfo: OutputItem, container: HTMLElement, ctx: IRichRenderContext): IDisposable {
const disposableStore = createDisposableStore();
clearContainer(container);
const contentNode = document.createElement('div');
contentNode.classList.add('output-plaintext');
if (ctx.settings.outputWordWrap) {
contentNode.classList.add('wordWrap');
}
const text = outputInfo.text();
insertOutput(outputInfo.id, [text], ctx.settings.lineLimit, ctx.settings.outputScrolling, contentNode, false);
appendChildAndScroll(container, contentNode, disposableStore);
const content = createOutputContent(outputInfo.id, [text], ctx.settings.lineLimit, ctx.settings.outputScrolling, false);
content.classList.add('output-plaintext');
if (ctx.settings.outputWordWrap) {
content.classList.add('wordWrap');
}
appendChildAndScroll(container, content, disposableStore);
return disposableStore;
}

37
extensions/notebook-renderers/src/textHelper.ts
View File

@@ -35,46 +35,43 @@ function generateViewMoreElement(outputId: string, adjustableSize: boolean) {
function truncatedArrayOfString(id: string, buffer: string[], linesLimit: number, container: HTMLElement, trustHtml: boolean) {
const lineCount = buffer.length;
container.appendChild(generateViewMoreElement(id, true));
container.parentNode!.append(generateViewMoreElement(id, true));
const div = document.createElement('div');
container.appendChild(div);
div.appendChild(handleANSIOutput(buffer.slice(0, linesLimit - 5).join('\n'), trustHtml));
container.appendChild(handleANSIOutput(buffer.slice(0, linesLimit - 5).join('\n'), trustHtml));
// view more ...
const viewMoreSpan = document.createElement('span');
viewMoreSpan.innerText = '...';
container.appendChild(viewMoreSpan);
const div2 = document.createElement('div');
container.appendChild(div2);
div2.appendChild(handleANSIOutput(buffer.slice(lineCount - 5).join('\n'), trustHtml));
container.appendChild(handleANSIOutput(buffer.slice(lineCount - 5).join('\n'), trustHtml));
}
function scrollableArrayOfString(id: string, buffer: string[], container: HTMLElement, trustHtml: boolean) {
const scrollableDiv = document.createElement('div');
scrollableDiv.classList.add(scrollableClass);
container.classList.add(scrollableClass);
if (buffer.length > 5000) {
container.appendChild(generateViewMoreElement(id, false));
container.parentNode!.append(generateViewMoreElement(id, false));
}
container.appendChild(scrollableDiv);
scrollableDiv.appendChild(handleANSIOutput(buffer.slice(0, 5000).join('\n'), trustHtml));
container.appendChild(handleANSIOutput(buffer.slice(0, 5000).join('\n'), trustHtml));
}
export function insertOutput(id: string, outputs: string[], linesLimit: number, scrollable: boolean, container: HTMLElement, trustHtml: boolean) {
export function insertOutput(id: string, outputs: string[], linesLimit: number, scrollable: boolean, trustHtml: boolean) {
const element = document.createElement('div');
const buffer = outputs.join('\n').split(/\r\n|\r|\n/g);
const lineCount = buffer.length;
if (lineCount < linesLimit) {
const spanElement = handleANSIOutput(buffer.join('\n'), trustHtml);
container.appendChild(spanElement);
return;
element.appendChild(spanElement);
} else {
if (scrollable) {
scrollableArrayOfString(id, buffer, element, trustHtml);
} else {
truncatedArrayOfString(id, buffer, linesLimit, element, trustHtml);
}
}
if (scrollable) {
scrollableArrayOfString(id, buffer, container, trustHtml);
} else {
truncatedArrayOfString(id, buffer, linesLimit, container, trustHtml);
}
return element;
}