From 3b8c6c6519189639a0f1694ac19fc24d05d8970c Mon Sep 17 00:00:00 2001
From: rebornix <penn.lv@gmail.com>
Date: Thu, 26 Mar 2020 13:40:38 -0700
Subject: [PATCH] padding adjustment for output in webview

---
 .../contrib/notebook/browser/notebookBrowser.ts          | 1 +
 .../workbench/contrib/notebook/browser/notebookEditor.ts | 2 +-
 .../notebook/browser/view/renderers/backLayerWebView.ts  | 9 ++++-----
 .../notebook/browser/view/renderers/cellRenderer.ts      | 6 ++++--
 .../contrib/notebook/browser/view/renderers/codeCell.ts  | 2 +-
 .../notebook/browser/viewModel/codeCellViewModel.ts      | 5 ++++-
 6 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/vs/workbench/contrib/notebook/browser/notebookBrowser.ts b/src/vs/workbench/contrib/notebook/browser/notebookBrowser.ts
index 0561b30203a..c3aa3836e7f 100644
--- a/src/vs/workbench/contrib/notebook/browser/notebookBrowser.ts
+++ b/src/vs/workbench/contrib/notebook/browser/notebookBrowser.ts
@@ -40,6 +40,7 @@ export interface CodeCellLayoutInfo {
 	readonly editorHeight: number;
 	readonly editorWidth: number;
 	readonly totalHeight: number;
+	readonly outputContainerOffset: number;
 	readonly outputTotalHeight: number;
 	readonly indicatorHeight: number;
 }
diff --git a/src/vs/workbench/contrib/notebook/browser/notebookEditor.ts b/src/vs/workbench/contrib/notebook/browser/notebookEditor.ts
index 124f909826f..3d35de9dcfd 100644
--- a/src/vs/workbench/contrib/notebook/browser/notebookEditor.ts
+++ b/src/vs/workbench/contrib/notebook/browser/notebookEditor.ts
@@ -792,7 +792,7 @@ registerThemingParticipant((theme, collector) => {
 
 	// Cell Margin
 	collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .monaco-list-row > div.cell { margin: 8px ${CELL_MARGIN}px 0px ${CELL_MARGIN}px; }`);
-	collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .output { margin: 0px ${CELL_MARGIN}px 8px ${CELL_MARGIN + CELL_RUN_GUTTER}px }`);
+	collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .output { margin: 0px ${CELL_MARGIN}px 0px ${CELL_MARGIN + CELL_RUN_GUTTER}px }`);
 
 	collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .cell .cell-editor-container { width: calc(100% - ${CELL_RUN_GUTTER}px); }`);
 	collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .monaco-list-row > div.cell.markdown { padding-left: ${CELL_RUN_GUTTER}px; }`);
diff --git a/src/vs/workbench/contrib/notebook/browser/view/renderers/backLayerWebView.ts b/src/vs/workbench/contrib/notebook/browser/view/renderers/backLayerWebView.ts
index 0d46ae98b84..5274d668ed6 100644
--- a/src/vs/workbench/contrib/notebook/browser/view/renderers/backLayerWebView.ts
+++ b/src/vs/workbench/contrib/notebook/browser/view/renderers/backLayerWebView.ts
@@ -112,8 +112,7 @@ export class BackLayerWebView extends Disposable {
 				<style>
 					#container > div > div {
 						width: 100%;
-						padding: 0 8px;
-						margin: 8px 0;
+						padding: 8px 0 0 0;
 						background-color: var(--vscode-list-inactiveSelectionBackground);
 					}
 					body {
@@ -288,7 +287,7 @@ export class BackLayerWebView extends Disposable {
 
 					let cell = this.insetMapping.get(output)!.cell;
 					let height = data.data.height;
-					let outputHeight = height === 0 ? 0 : height + 16;
+					let outputHeight = height;
 
 					if (cell) {
 						let outputIndex = cell.outputs.indexOf(output);
@@ -325,7 +324,7 @@ export class BackLayerWebView extends Disposable {
 		let outputIndex = cell.outputs.indexOf(output);
 
 		let outputOffsetInOutputContainer = cell.getOutputOffset(outputIndex);
-		let outputOffset = cellTop + cell.layoutInfo.editorHeight + 16 /* editor padding */ + 8 + outputOffsetInOutputContainer;
+		let outputOffset = cellTop + cell.layoutInfo.editorHeight + outputOffsetInOutputContainer;
 
 		if (outputOffset === outputCache.cacheOffset) {
 			return false;
@@ -341,7 +340,7 @@ export class BackLayerWebView extends Disposable {
 			let outputIndex = item.cell.outputs.indexOf(item.output);
 
 			let outputOffsetInOutputContainer = item.cell.getOutputOffset(outputIndex);
-			let outputOffset = item.cellTop + item.cell.layoutInfo.editorHeight + 16 /* editor padding */ + 16 + outputOffsetInOutputContainer;
+			let outputOffset = item.cellTop + item.cell.layoutInfo.outputContainerOffset + outputOffsetInOutputContainer;
 			outputCache.cacheOffset = outputOffset;
 
 			return {
diff --git a/src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts b/src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts
index 64e4b09bd97..2aad988a759 100644
--- a/src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts
+++ b/src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts
@@ -117,6 +117,8 @@ abstract class AbstractCellRenderer {
 			}
 		});
 
+		toolbar.getContainer().style.height = `${EDITOR_TOOLBAR_HEIGHT}px`;
+
 		return toolbar;
 	}
 
@@ -140,9 +142,9 @@ abstract class AbstractCellRenderer {
 
 			if (templateData.focusIndicator) {
 				if (actions.length) {
-					templateData.focusIndicator.style.top = `24px`;
+					templateData.focusIndicator.style.top = `${EDITOR_TOOLBAR_HEIGHT + EDITOR_TOP_PADDING}px`;
 				} else {
-					templateData.focusIndicator.style.top = `8px`;
+					templateData.focusIndicator.style.top = `${EDITOR_TOP_PADDING}px`;
 				}
 			}
 		};
diff --git a/src/vs/workbench/contrib/notebook/browser/view/renderers/codeCell.ts b/src/vs/workbench/contrib/notebook/browser/view/renderers/codeCell.ts
index 505f197794b..a9d14a9107f 100644
--- a/src/vs/workbench/contrib/notebook/browser/view/renderers/codeCell.ts
+++ b/src/vs/workbench/contrib/notebook/browser/view/renderers/codeCell.ts
@@ -264,7 +264,7 @@ export class CodeCell extends Disposable {
 		if (result.shadowContent) {
 			this.viewCell.selfSizeMonitoring = true;
 			let editorHeight = this.viewCell.layoutInfo.editorHeight;
-			this.notebookEditor.createInset(this.viewCell, currOutput, result.shadowContent, editorHeight + 8 + this.viewCell.getOutputOffset(index));
+			this.notebookEditor.createInset(this.viewCell, currOutput, result.shadowContent, editorHeight + this.viewCell.getOutputOffset(index));
 		} else {
 			DOM.addClass(outputItemDiv, 'foreground');
 		}
diff --git a/src/vs/workbench/contrib/notebook/browser/viewModel/codeCellViewModel.ts b/src/vs/workbench/contrib/notebook/browser/viewModel/codeCellViewModel.ts
index 60ae369d07b..9aeee392f91 100644
--- a/src/vs/workbench/contrib/notebook/browser/viewModel/codeCellViewModel.ts
+++ b/src/vs/workbench/contrib/notebook/browser/viewModel/codeCellViewModel.ts
@@ -83,6 +83,7 @@ export class CodeCellViewModel extends BaseCellViewModel implements ICellViewMod
 			fontInfo: null,
 			editorHeight: 0,
 			editorWidth: 0,
+			outputContainerOffset: 0,
 			outputTotalHeight: 0,
 			totalHeight: 0,
 			indicatorHeight: 0
@@ -108,12 +109,14 @@ export class CodeCellViewModel extends BaseCellViewModel implements ICellViewMod
 		const totalHeight = this.outputs.length
 			? EDITOR_TOOLBAR_HEIGHT + this.editorHeight + EDITOR_TOP_PADDING + 16 + outputTotalHeight
 			: EDITOR_TOOLBAR_HEIGHT + this.editorHeight + EDITOR_TOP_PADDING + outputTotalHeight;
-		const indicatorHeight = totalHeight - EDITOR_TOOLBAR_HEIGHT - 16;
+		const indicatorHeight = this.editorHeight + outputTotalHeight;
+		const outputContainerOffset = EDITOR_TOOLBAR_HEIGHT + this.editorHeight;
 		const editorWidth = state.outerWidth !== undefined ? state.outerWidth - CELL_MARGIN * 2 - CELL_RUN_GUTTER : 0;
 		this._layoutInfo = {
 			fontInfo: state.font || null,
 			editorHeight: this._editorHeight,
 			editorWidth,
+			outputContainerOffset,
 			outputTotalHeight,
 			totalHeight,
 			indicatorHeight
-- 
GitLab