diff editor output decorations fix.

Author: rebornix

src/vs/workbench/contrib/notebook/browser/diff/diffComponents.ts

@@ -1385,40 +1385,44 @@ export class ModifiedElement extends AbstractElementRenderer {
 
 			this._outputLeftContainer = DOM.append(this._outputViewContainer!, DOM.$('.output-view-container-left'));
 			this._outputRightContainer = DOM.append(this._outputViewContainer!, DOM.$('.output-view-container-right'));
+
+			if (this.cell.checkIfOutputsModified()) {
+				const originalOutputRenderListener = this.notebookEditor.onDidDynamicOutputRendered(e => {
+					if (e.cell.uri.toString() === this.cell.original.uri.toString()) {
+						this.notebookEditor.deltaCellOutputContainerClassNames(DiffSide.Original, this.cell.original.id, ['nb-cellDeleted'], []);
+						originalOutputRenderListener.dispose();
+					}
+				});
+
+				const modifiedOutputRenderListener = this.notebookEditor.onDidDynamicOutputRendered(e => {
+					if (e.cell.uri.toString() === this.cell.modified.uri.toString()) {
+						this.notebookEditor.deltaCellOutputContainerClassNames(DiffSide.Modified, this.cell.modified.id, ['nb-cellAdded'], []);
+						modifiedOutputRenderListener.dispose();
+					}
+				});
+
+				this._register(originalOutputRenderListener);
+				this._register(modifiedOutputRenderListener);
+			}
+
 			// We should use the original text model here
 			this._outputLeftView = this.instantiationService.createInstance(OutputContainer, this.notebookEditor, this.notebookEditor.textModel!, this.cell, this.cell.original!, DiffSide.Original, this._outputLeftContainer!);
 			this._outputLeftView.render();
 			this._register(this._outputLeftView);
 			this._outputRightView = this.instantiationService.createInstance(OutputContainer, this.notebookEditor, this.notebookEditor.textModel!, this.cell, this.cell.modified!, DiffSide.Modified, this._outputRightContainer!);
 			this._outputRightView.render();
 			this._register(this._outputRightView);
-
-			const originalOutputRenderListener = this.notebookEditor.onDidDynamicOutputRendered(e => {
-				if (e.cell.uri.toString() === this.cell.original.uri.toString()) {
-					this.notebookEditor.deltaCellOutputContainerClassNames(DiffSide.Original, this.cell.original.id, ['nb-cellDeleted'], []);
-					originalOutputRenderListener.dispose();
-				}
-			});
-
-			const modifiedOutputRenderListener = this.notebookEditor.onDidDynamicOutputRendered(e => {
-				if (e.cell.uri.toString() === this.cell.modified.uri.toString()) {
-					this.notebookEditor.deltaCellOutputContainerClassNames(DiffSide.Modified, this.cell.modified.id, ['nb-cellAdded'], []);
-					modifiedOutputRenderListener.dispose();
-				}
-			});
-
-			this._register(originalOutputRenderListener);
-			this._register(modifiedOutputRenderListener);
-
 			this._decorate();
 		}
 
 		this._outputViewContainer.style.display = 'block';
 	}
 
 	_decorate() {
-		this.notebookEditor.deltaCellOutputContainerClassNames(DiffSide.Original, this.cell.original.id, ['nb-cellDeleted'], []);
-		this.notebookEditor.deltaCellOutputContainerClassNames(DiffSide.Modified, this.cell.modified.id, ['nb-cellAdded'], []);
+		if (this.cell.checkIfOutputsModified()) {
+			this.notebookEditor.deltaCellOutputContainerClassNames(DiffSide.Original, this.cell.original.id, ['nb-cellDeleted'], []);
+			this.notebookEditor.deltaCellOutputContainerClassNames(DiffSide.Modified, this.cell.modified.id, ['nb-cellAdded'], []);
+		}
 	}
 
 	_showOutputsRenderer() {

src/vs/workbench/contrib/notebook/browser/diff/notebookDiff.css

@@ -196,26 +196,26 @@
 	overflow: hidden;
 }
 
-.monaco-workbench .notebook-text-diff-editor .cell-body.full .output-info-container.modified .output-view-container .output-view-container-left {
+.monaco-workbench .notebook-text-diff-editor .cell-body.full .output-info-container .output-view-container .output-view-container-left {
 	top: 0;
 	position: absolute;
 	left: 0;
 }
 
-.monaco-workbench .notebook-text-diff-editor .cell-body.full .output-info-container.modified .output-view-container .output-view-container-right {
+.monaco-workbench .notebook-text-diff-editor .cell-body.full .output-info-container .output-view-container .output-view-container-right {
 	position: absolute;
 	top: 0;
 	left: 50%;
 }
 
-.monaco-workbench .notebook-text-diff-editor .cell-body.full .output-info-container.modified .output-view-container .output-view-container-left,
-.monaco-workbench .notebook-text-diff-editor .cell-body.full .output-info-container.modified .output-view-container .output-view-container-right {
+.monaco-workbench .notebook-text-diff-editor .cell-body.full .output-info-container .output-view-container .output-view-container-left,
+.monaco-workbench .notebook-text-diff-editor .cell-body.full .output-info-container .output-view-container .output-view-container-right {
 	width: 50%;
 	display: inline-block;
 }
 
-.monaco-workbench .notebook-text-diff-editor .cell-body.full .output-info-container.modified .output-view-container .output-view-container-left div.foreground,
-.monaco-workbench .notebook-text-diff-editor .cell-body.full .output-info-container.modified .output-view-container .output-view-container-right div.foreground {
+.monaco-workbench .notebook-text-diff-editor .cell-body.full .output-info-container .output-view-container .output-view-container-left div.foreground,
+.monaco-workbench .notebook-text-diff-editor .cell-body.full .output-info-container .output-view-container .output-view-container-right div.foreground {
 	width: 100%;
 }
 

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

@@ -561,6 +561,7 @@ function webviewPreloads() {
 
 					postNotebookMessage<IDimensionMessage>('dimension', {
 						id: outputId,
+						isOutput: true,
 						init: true,
 						data: {
 							height: outputNode.clientHeight
@@ -642,6 +643,7 @@ function webviewPreloads() {
 
 						postNotebookMessage<IDimensionMessage>('dimension', {
 							id: outputId,
+							isOutput: true,
 							data: {
 								height: output.clientHeight
 							}