Merge pull request #9266 from Microsoft/aeschli/div-per-linedecoration

Folding icon collides with git decorations: Create a div per linedecoration

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

@@ -27,12 +27,12 @@ export class DecorationToRender {
 
 export abstract class DedupOverlay extends DynamicViewOverlay {
 
-	protected _render(visibleStartLineNumber:number, visibleEndLineNumber:number, decorations:DecorationToRender[]): string[] {
+	protected _render(visibleStartLineNumber:number, visibleEndLineNumber:number, decorations:DecorationToRender[]): string[][] {
 
-		let output: string[] = [];
+		let output: string[][] = [];
 		for (let lineNumber = visibleStartLineNumber; lineNumber <= visibleEndLineNumber; lineNumber++) {
 			let lineIndex = lineNumber - visibleStartLineNumber;
-			output[lineIndex] = '';
+			output[lineIndex] = [];
 		}
 
 		if (decorations.length === 0) {
@@ -66,7 +66,7 @@ export abstract class DedupOverlay extends DynamicViewOverlay {
 			}
 
 			for (let i = startLineIndex; i <= prevEndLineIndex; i++) {
-				output[i] += ' ' + prevClassName;
+				output[i].push(prevClassName);
 			}
 		}
 
@@ -189,8 +189,8 @@ export class GlyphMarginOverlay extends DedupOverlay {
 				output[lineIndex] = '';
 			} else {
 				output[lineIndex] = (
-					'<div class="cgmr'
-					+ classNames
+					'<div class="cgmr '
+					+ classNames.join(' ')
 					+ common
 				);
 			}

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

@@ -112,16 +112,11 @@ export class LinesDecorationsOverlay extends DedupOverlay {
 		for (let lineNumber = visibleStartLineNumber; lineNumber <= visibleEndLineNumber; lineNumber++) {
 			let lineIndex = lineNumber - visibleStartLineNumber;
 			let classNames = toRender[lineIndex];
-
-			if (classNames.length === 0) {
-				output[lineIndex] = '';
-			} else {
-				output[lineIndex] = (
-					'<div class="cldr'
-					+ classNames
-					+ common
-				);
+			let lineOutput = '';
+			for (let i = 0, len = classNames.length; i < len; i++) {
+				lineOutput += '<div class="cldr ' + classNames[i] + common;
 			}
+			output[lineIndex] = lineOutput;
 		}
 
 		this._renderResult = output;

src/vs/editor/contrib/folding/browser/folding.css

@@ -6,40 +6,31 @@
 .monaco-editor .margin-view-overlays .folding {
 	margin-left: 5px;
 	cursor: pointer;
-}
-
-.monaco-editor .margin-view-overlays .folding::after {
 	background-repeat: no-repeat;
 	background-origin: border-box;
 	background-position: 3px center;
 	background-size: 15px;
-	position: absolute;
-	top: 0;
-	left:0;
-	right: 0;
-	bottom: 0;
-	content: "";
 	opacity: 0;
 	transition: opacity 0.5s;
 }
 
-.monaco-editor .margin-view-overlays:hover .folding::after {
+.monaco-editor .margin-view-overlays:hover .folding {
 	background-image: url('arrow-expand.svg');
 	opacity: 1;
 }
 
-.monaco-editor .margin-view-overlays .folding.collapsed::after {
+.monaco-editor .margin-view-overlays .folding.collapsed {
 	background-image: url('arrow-collapse.svg');
 	opacity: 1;
 }
 
-.monaco-editor.hc-black .margin-view-overlays:hover .folding::after,
-.monaco-editor.vs-dark .margin-view-overlays:hover .folding::after {
+.monaco-editor.hc-black .margin-view-overlays:hover .folding,
+.monaco-editor.vs-dark .margin-view-overlays:hover .folding {
 	background-image: url('arrow-expand-dark.svg');
 }
 
-.monaco-editor.hc-black .margin-view-overlays .folding.collapsed::after,
-.monaco-editor.vs-dark .margin-view-overlays .folding.collapsed::after {
+.monaco-editor.hc-black .margin-view-overlays .folding.collapsed,
+.monaco-editor.vs-dark .margin-view-overlays .folding.collapsed {
 	background-image: url('arrow-collapse-dark.svg');
 }