development/vscode
development/vscode
1
0
Fork 0
mirror of https://github.com/Microsoft/vscode synced 2024-08-27 21:09:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #183361 from microsoft/aamunger/outputStreaming

Browse source 
re-add events and apply settings each time the output ID is rendered
This commit is contained in:
Aaron Munger 2023-05-24 15:09:23 -07:00 committed by GitHub
parent 625d5b3fd3 c71766d505
commit 82c9994e6d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 75 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
extensions/notebook-renderers/src/index.ts
View file

@ -277,43 +277,50 @@ function renderStream(outputInfo: OutputItem, outputElement: HTMLElement, error:
outputElement.classList.add('output-stream');
const text = outputInfo.text();
const content = createOutputContent(outputInfo.id, [text], ctx.settings.lineLimit, outputScrolling, false);
content.setAttribute('output-item-id', outputInfo.id);
const newContent = createOutputContent(outputInfo.id, [text], ctx.settings.lineLimit, outputScrolling, false);
newContent.setAttribute('output-item-id', outputInfo.id);
if (error) {
content.classList.add('error');
newContent.classList.add('error');
}
const scrollTop = outputScrolling ? findScrolledHeight(outputElement) : undefined;
const existingContent = outputElement.querySelector(`[output-item-id="${outputInfo.id}"]`) as HTMLElement | null;
const previousOutputParent = getPreviousMatchingContentGroup(outputElement);
// If the previous output item for the same cell was also a stream, append this output to the previous
const existingContentParent = getPreviousMatchingContentGroup(outputElement) || outputElement.querySelector('div');
if (existingContentParent) {
const existing = existingContentParent.querySelector(`[output-item-id="${outputInfo.id}"]`) as HTMLElement | null;
if (existing) {
existing.replaceWith(content);
while (content.nextSibling) {
if (previousOutputParent) {
if (existingContent) {
existingContent.replaceWith(newContent);
} else {
previousOutputParent.appendChild(newContent);
}
previousOutputParent.classList.toggle('scrollbar-visible', previousOutputParent.scrollHeight > previousOutputParent.clientHeight);
previousOutputParent.scrollTop = scrollTop !== undefined ? scrollTop : previousOutputParent.scrollHeight;
} else {
let contentParent = existingContent?.parentElement;
if (existingContent && contentParent) {
existingContent.replaceWith(newContent);
while (newContent.nextSibling) {
// clear out any stale content if we had previously combined streaming outputs into this one
content.nextSibling.remove();
newContent.nextSibling.remove();
}
} else {
existingContentParent.appendChild(content);
contentParent = document.createElement('div');
contentParent.appendChild(newContent);
while (outputElement.firstChild) {
outputElement.removeChild(outputElement.firstChild);
}
outputElement.appendChild(contentParent);
}
existingContentParent.classList.toggle('scrollbar-visible', existingContentParent.scrollHeight > existingContentParent.clientHeight);
existingContentParent.scrollTop = scrollTop !== undefined ? scrollTop : existingContentParent.scrollHeight;
} else {
const contentParent = document.createElement('div');
contentParent.appendChild(content);
contentParent.classList.toggle('scrollable', outputScrolling);
contentParent.classList.toggle('word-wrap', ctx.settings.outputWordWrap);
disposableStore.push(ctx.onDidChangeSettings(e => {
contentParent.classList.toggle('word-wrap', e.outputWordWrap);
contentParent!.classList.toggle('word-wrap', e.outputWordWrap);
}));
while (outputElement.firstChild) {
outputElement.removeChild(outputElement.firstChild);
}
outputElement.appendChild(contentParent);
initializeScroll(contentParent, disposableStore, scrollTop);
}

49
extensions/notebook-renderers/src/test/notebookRenderer.test.ts
View file

@ -6,7 +6,7 @@
import * as assert from 'assert';
import { activate } from '..';
import { OutputItem, RendererApi } from 'vscode-notebook-renderer';
import { IRichRenderContext, RenderOptions } from '../rendererTypes';
import { IDisposable, IRichRenderContext, RenderOptions } from '../rendererTypes';
import { JSDOM } from "jsdom";
const dom = new JSDOM();
@ -37,7 +37,15 @@ suite('Notebook builtin output renderer', () => {
type optionalRenderOptions = { [k in keyof RenderOptions]?: RenderOptions[k] };
type handler = (e: RenderOptions) => any;
const settingsChangedHandlers: handler[] = [];
function fireSettingsChange(options: optionalRenderOptions) {
settingsChangedHandlers.forEach((handler) => handler(options as RenderOptions));
}
function createContext(settings?: optionalRenderOptions): IRichRenderContext {
settingsChangedHandlers.length = 0;
return {
setState(_value: void) { },
getState() { return undefined; },
@ -48,9 +56,16 @@ suite('Notebook builtin output renderer', () => {
lineLimit: 30,
...settings
} as RenderOptions,
onDidChangeSettings<T>(_listener: (e: T) => any, _thisArgs?: any, _disposables?: any) {
onDidChangeSettings(listener: handler, _thisArgs?: any, disposables?: IDisposable[]) {
settingsChangedHandlers.push(listener);
const dispose = () => {
settingsChangedHandlers.splice(settingsChangedHandlers.indexOf(listener), 1);
};
disposables?.push({ dispose });
return {
dispose(): void { }
dispose
};
},
workspace: {
@ -250,5 +265,33 @@ suite('Notebook builtin output renderer', () => {
assert.ok(inserted.innerHTML.indexOf('>second stream content</') === -1, `Content was not cleared: ${outputElement.innerHTML}`);
assert.ok(inserted.innerHTML.indexOf('>third stream content</') === -1, `Content was not cleared: ${outputElement.innerHTML}`);
});
test(`Rendered output will wrap on settings change event`, async () => {
const context = createContext({ outputWordWrap: false, outputScrolling: true });
const renderer = await activate(context);
assert.ok(renderer, 'Renderer not created');
const outputElement = new OutputHtml().getFirstOuputElement();
const outputItem = createOutputItem('content', stdoutMimeType);
await renderer!.renderOutputItem(outputItem, outputElement);
fireSettingsChange({ outputWordWrap: true, outputScrolling: true });
const inserted = outputElement.firstChild as HTMLElement;
assert.ok(inserted.classList.contains('word-wrap') && inserted.classList.contains('scrollable'),
`output content classList should contain word-wrap and scrollable ${inserted.classList}`);
});
test(`Settings event change listeners should not grow if output is re-rendered`, async () => {
const context = createContext({ outputWordWrap: false });
const renderer = await activate(context);
assert.ok(renderer, 'Renderer not created');
const outputElement = new OutputHtml().getFirstOuputElement();
await renderer!.renderOutputItem(createOutputItem('content', stdoutMimeType), outputElement);
const handlerCount = settingsChangedHandlers.length;
await renderer!.renderOutputItem(createOutputItem('content', stdoutMimeType), outputElement);
assert.equal(settingsChangedHandlers.length, handlerCount);
});
});