Add add/del mark to marginDomNode in diff view zone

src/vs/editor/browser/viewParts/viewZones/viewZones.ts

@@ -344,7 +344,7 @@ export class ViewZones extends ViewPart {
 			StyleMutator.setDisplay(zone.delegate.domNode, newDisplay);
 
 			if (zone.delegate.marginDomNode) {
-				StyleMutator.setTop(zone.delegate.marginDomNode, newTop);
+				StyleMutator.setTop(zone.delegate.marginDomNode, newTop - ctx.viewportTop);
 				StyleMutator.setHeight(zone.delegate.marginDomNode, newHeight);
 				StyleMutator.setDisplay(zone.delegate.marginDomNode, newDisplay);
 			}

src/vs/editor/browser/widget/diffEditorWidget.ts

@@ -847,8 +847,12 @@ export class DiffEditorWidget extends EventEmitter implements editorBrowser.IDif
 		clonedOptions.scrollbar = clonedOptions.scrollbar || {};
 		clonedOptions.scrollbar.vertical = 'visible';
 		clonedOptions.folding = false;
+		clonedOptions.glyphMargin = false;
 		clonedOptions.codeLens = false;
 		clonedOptions.fixedOverflowWidgets = true;
+		if (typeof options.fontSize !== 'undefined') {
+			clonedOptions.lineDecorationsWidth = 0.8 * options.fontSize;
+		}
 		return clonedOptions;
 	}
 
@@ -1492,8 +1496,14 @@ class DiffEdtorWidgetSideBySide extends DiffEditorWidgetStyle implements IDiffEd
 			let lineChange = lineChanges[i];
 
 			if (isChangeOrDelete(lineChange)) {
-
-				result.decorations.push(createDecoration(lineChange.originalStartLineNumber, 1, lineChange.originalEndLineNumber, Number.MAX_VALUE, 'line-delete', true));
+				result.decorations.push({
+					range: new Range(lineChange.originalStartLineNumber, 1, lineChange.originalEndLineNumber, Number.MAX_VALUE),
+					options: {
+						className: 'line-delete',
+						linesDecorationsClassName: 'my-deleted',
+						isWholeLine: true
+					}
+				});
 				if (!isChangeOrInsert(lineChange) || !lineChange.charChanges) {
 					result.decorations.push(createDecoration(lineChange.originalStartLineNumber, 1, lineChange.originalEndLineNumber, Number.MAX_VALUE, 'char-delete', true));
 				}
@@ -1553,7 +1563,14 @@ class DiffEdtorWidgetSideBySide extends DiffEditorWidgetStyle implements IDiffEd
 
 			if (isChangeOrInsert(lineChange)) {
 
-				result.decorations.push(createDecoration(lineChange.modifiedStartLineNumber, 1, lineChange.modifiedEndLineNumber, Number.MAX_VALUE, 'line-insert', true));
+				result.decorations.push({
+					range: new Range(lineChange.modifiedStartLineNumber, 1, lineChange.modifiedEndLineNumber, Number.MAX_VALUE),
+					options: {
+						className: 'line-insert',
+						linesDecorationsClassName: 'my-added',
+						isWholeLine: true
+					}
+				});
 				if (!isChangeOrDelete(lineChange) || !lineChange.charChanges) {
 					result.decorations.push(createDecoration(lineChange.modifiedStartLineNumber, 1, lineChange.modifiedEndLineNumber, Number.MAX_VALUE, 'char-insert', true));
 				}
@@ -1699,7 +1716,14 @@ class DiffEdtorWidgetInline extends DiffEditorWidgetStyle implements IDiffEditor
 
 			// Add decorations & overview zones
 			if (isChangeOrInsert(lineChange)) {
-				result.decorations.push(createDecoration(lineChange.modifiedStartLineNumber, 1, lineChange.modifiedEndLineNumber, Number.MAX_VALUE, 'line-insert', true));
+				result.decorations.push({
+					range: new Range(lineChange.modifiedStartLineNumber, 1, lineChange.modifiedEndLineNumber, Number.MAX_VALUE),
+					options: {
+						className: 'line-insert',
+						linesDecorationsClassName: 'my-added',
+						isWholeLine: true
+					}
+				});
 
 				result.overviewZones.push(new editorCommon.OverviewRulerZone(
 					lineChange.modifiedStartLineNumber,
@@ -1774,7 +1798,6 @@ class InlineViewZonesComputer extends ViewZonesComputer {
 
 	_produceModifiedFromDiff(lineChange: editorCommon.ILineChange, lineChangeOriginalLength: number, lineChangeModifiedLength: number): IMyViewZone {
 		let decorations: InlineDecoration[] = [];
-
 		if (lineChange.charChanges) {
 			for (let j = 0, lengthJ = lineChange.charChanges.length; j < lengthJ; j++) {
 				let charChange = lineChange.charChanges[j];
@@ -1788,8 +1811,16 @@ class InlineViewZonesComputer extends ViewZonesComputer {
 		}
 
 		let html: string[] = [];
+		let marginHTML: string[] = [];
+		let lineDecorationsWidth = this.modifiedEditorConfiguration.layoutInfo.decorationsWidth;
+		let lineHeight = this.modifiedEditorConfiguration.lineHeight;
 		for (let lineNumber = lineChange.originalStartLineNumber; lineNumber <= lineChange.originalEndLineNumber; lineNumber++) {
 			html = html.concat(this.renderOriginalLine(lineNumber - lineChange.originalStartLineNumber, this.originalModel, this.modifiedEditorConfiguration, this.modifiedEditorTabSize, lineNumber, decorations));
+
+			let index = lineNumber - lineChange.originalStartLineNumber;
+			marginHTML = marginHTML.concat([
+				`<div class="my-deleted" style="position:absolute;top:${index * lineHeight}px;width:${lineDecorationsWidth}px;height:${lineHeight}px;right:0;"></div>`
+			]);
 		}
 
 		let domNode = document.createElement('div');
@@ -1797,11 +1828,17 @@ class InlineViewZonesComputer extends ViewZonesComputer {
 		domNode.innerHTML = html.join('');
 		Configuration.applyFontInfoSlow(domNode, this.modifiedEditorConfiguration.fontInfo);
 
+		let marginDomNode = document.createElement('div');
+		marginDomNode.className = 'inline-deleted-margin-view-zone';
+		marginDomNode.innerHTML = marginHTML.join('');
+		Configuration.applyFontInfoSlow(marginDomNode, this.modifiedEditorConfiguration.fontInfo);
+
 		return {
 			shouldNotShrink: true,
 			afterLineNumber: (lineChange.modifiedEndLineNumber === 0 ? lineChange.modifiedStartLineNumber : lineChange.modifiedStartLineNumber - 1),
 			heightInLines: lineChangeOriginalLength,
-			domNode: domNode
+			domNode: domNode,
+			marginDomNode: marginDomNode
 		};
 	}
 

src/vs/editor/browser/widget/media/addition.svg

+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><title>Layer 1</title><rect height="11" width="3" y="3" x="7" fill="#424242"/><rect height="3" width="11" y="7" x="3" fill="#424242"/></svg>
\ No newline at end of file

src/vs/editor/browser/widget/media/deletion.svg

+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><title>Layer 1</title><rect height="3" width="11" y="7" x="3" fill="#424242"/></svg>
\ No newline at end of file

src/vs/editor/browser/widget/media/diffEditor.css

@@ -49,6 +49,22 @@
 .monaco-editor .char-insert {
 	background: rgba(155, 185, 85, 0.2);
 }
+
+.my-added, .my-deleted {
+	background-size: 100%;
+	background-repeat: no-repeat;
+	background-position: 0;
+}
+.inline-deleted-margin-view-zone {
+	text-align: right;
+}
+.my-added {
+	background-image: url('addition.svg');
+}
+.my-deleted {
+	background-image: url('deletion.svg');
+}
+
 .monaco-editor.hc-black .line-insert,
 .monaco-editor.hc-black .char-insert {
 	background: none;