Fix #97547. absolute position for notebook outputs.

Author: rebornix

src/vs/workbench/contrib/notebook/browser/media/notebook.css

@@ -112,8 +112,9 @@
 }
 
 .monaco-workbench .notebookOverlay .output {
-	padding-left: 8px;
-	padding-right: 8px;
+	position: absolute;
+	height: 0px;
+	width: 100%;
 	user-select: text;
 	transform: translate3d(0px, 0px, 0px);
 	cursor: auto;
@@ -127,6 +128,13 @@
 }
 
 .monaco-workbench .notebookOverlay .output > div.foreground {
+	width: 100%;
+	min-height: 24px;
+	box-sizing: border-box;
+}
+
+.monaco-workbench .notebookOverlay .output > div.foreground > .output-inner-container {
+	width: 100%;
 	padding: 8px;
 	box-sizing: border-box;
 }
@@ -144,7 +152,7 @@
 .monaco-workbench .notebookOverlay .output .multi-mimetype-output {
 	position: absolute;
 	top: 4px;
-	left: -34px;
+	left: -26px;
 	width: 16px;
 	height: 16px;
 	cursor: pointer;

src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts

@@ -1352,6 +1352,7 @@ registerThemingParticipant((theme, collector) => {
 	const containerBackground = theme.getColor(notebookOutputContainerColor);
 	if (containerBackground) {
 		collector.addRule(`.notebookOverlay .output { background-color: ${containerBackground}; }`);
+		collector.addRule(`.notebookOverlay .output-element { background-color: ${containerBackground}; }`);
 	}
 
 	const editorBackgroundColor = theme.getColor(editorBackground);

src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts

@@ -1043,8 +1043,10 @@ export class CodeCellRenderer extends AbstractCellRenderer implements IListRende
 		elementDisposables.add(new CellContextKeyManager(templateData.contextKeyService, this.notebookEditor.viewModel?.notebookDocument!, element));
 
 		templateData.focusIndicator.style.height = `${element.layoutInfo.indicatorHeight}px`;
+		templateData.outputContainer.style.top = `${element.layoutInfo.outputContainerOffset}px`;
 		elementDisposables.add(element.onDidChangeLayout(() => {
 			templateData.focusIndicator.style.height = `${element.layoutInfo.indicatorHeight}px`;
+			templateData.outputContainer.style.top = `${element.layoutInfo.outputContainerOffset}px`;
 		}));
 
 		this.updateForMetadata(element, templateData);

src/vs/workbench/contrib/notebook/browser/view/renderers/codeCell.ts

@@ -200,6 +200,17 @@ export class CodeCell extends Disposable {
 			}
 		}));
 
+		this._register(viewCell.onDidChangeLayout(() => {
+			this.outputElements.forEach((value, key) => {
+				const index = viewCell.outputs.indexOf(key);
+				if (index >= 0) {
+					const top = this.viewCell.getOutputOffsetInContainer(index);
+					value.style.top = `${top}px`;
+				}
+			});
+
+		}));
+
 		const updateFocusMode = () => viewCell.focusMode = templateData.editor!.hasWidgetFocus() ? CellFocusMode.Editor : CellFocusMode.Container;
 		this._register(templateData.editor!.onDidFocusEditorWidget(() => {
 			updateFocusMode();
@@ -311,15 +322,21 @@ export class CodeCell extends Disposable {
 			}
 			let pickedMimeTypeRenderer = currOutput.orderedMimeTypes![currOutput.pickedMimeTypeIndex!];
 
+			const innerContainer = DOM.$('.output-inner-container');
+			DOM.append(outputItemDiv, innerContainer);
+
 			if (pickedMimeTypeRenderer.isResolved) {
 				// html
-				result = this.notebookEditor.getOutputRenderer().render({ outputKind: CellOutputKind.Rich, data: { 'text/html': pickedMimeTypeRenderer.output! } } as any, outputItemDiv, 'text/html');
+				result = this.notebookEditor.getOutputRenderer().render({ outputKind: CellOutputKind.Rich, data: { 'text/html': pickedMimeTypeRenderer.output! } } as any, innerContainer, 'text/html');
 			} else {
-				result = this.notebookEditor.getOutputRenderer().render(currOutput, outputItemDiv, pickedMimeTypeRenderer.mimeType);
+				result = this.notebookEditor.getOutputRenderer().render(currOutput, innerContainer, pickedMimeTypeRenderer.mimeType);
 			}
 		} else {
 			// for text and error, there is no mimetype
-			result = this.notebookEditor.getOutputRenderer().render(currOutput, outputItemDiv, undefined);
+			const innerContainer = DOM.$('.output-inner-container');
+			DOM.append(outputItemDiv, innerContainer);
+
+			result = this.notebookEditor.getOutputRenderer().render(currOutput, innerContainer, undefined);
 		}
 
 		if (!result) {
@@ -340,6 +357,8 @@ export class CodeCell extends Disposable {
 			this.notebookEditor.createInset(this.viewCell, currOutput, result.shadowContent, this.viewCell.getOutputOffset(index));
 		} else {
 			DOM.addClass(outputItemDiv, 'foreground');
+			DOM.addClass(outputItemDiv, 'output-element');
+			outputItemDiv.style.position = 'absolute';
 		}
 
 		let hasDynamicHeight = result.hasDynamicHeight;
@@ -352,10 +371,9 @@ export class CodeCell extends Disposable {
 			};
 			const elementSizeObserver = getResizesObserver(outputItemDiv, dimension, () => {
 				if (this.templateData.outputContainer && document.body.contains(this.templateData.outputContainer!)) {
-					let height = elementSizeObserver.getHeight() + 8 * 2; // include padding
+					let height = Math.ceil(elementSizeObserver.getHeight());
 
 					if (clientHeight === height) {
-						// console.log(this.viewCell.outputs);
 						return;
 					}
 
@@ -375,13 +393,13 @@ export class CodeCell extends Disposable {
 			if (result.shadowContent) {
 				// webview
 				// noop
-				// let cachedHeight = this.viewCell.getOutputHeight(currOutput);
 			} else {
 				// static output
-
-				// @TODO@rebornix, if we stop checking output height, we need to evaluate it later when checking the height of output container
-				let clientHeight = outputItemDiv.clientHeight;
+				let clientHeight = Math.ceil(outputItemDiv.clientHeight);
 				this.viewCell.updateOutputHeight(index, clientHeight);
+
+				const top = this.viewCell.getOutputOffsetInContainer(index);
+				outputItemDiv.style.top = `${top}px`;
 			}
 		}
 	}

src/vs/workbench/contrib/notebook/browser/viewModel/codeCellViewModel.ts

@@ -201,15 +201,18 @@ export class CodeCellViewModel extends BaseCellViewModel implements ICellViewMod
 		this.layoutChange({ outputHeight: true });
 	}
 
-	getOutputOffset(index: number): number {
+	getOutputOffsetInContainer(index: number) {
 		this._ensureOutputsTop();
 
 		if (index >= this._outputCollection.length) {
 			throw new Error('Output index out of range!');
 		}
 
-		const offset = this._outputsTop!.getAccumulatedValue(index - 1);
-		return this.layoutInfo.outputContainerOffset + offset;
+		return this._outputsTop!.getAccumulatedValue(index - 1);
+	}
+
+	getOutputOffset(index: number): number {
+		return this.layoutInfo.outputContainerOffset + this.getOutputOffsetInContainer(index);
 	}
 
 	spliceOutputHeights(start: number, deleteCnt: number, heights: number[]) {