Fixes #4153: Leave a 1px gap between distinct selections

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

@@ -285,10 +285,12 @@ export class SelectionsOverlay extends ViewEventHandler implements IDynamicViewO
 		return linesVisibleRanges;
 	}
 
-	private _createSelectionPiece(lineOutput:string[], height:string, className:string, left:number, width:number): void {
+	private _createSelectionPiece(lineOutput:string[], top:number, height:string, className:string, left:number, width:number): void {
 		lineOutput.push('<div class="cslr ');
 		lineOutput.push(className);
-		lineOutput.push('" style="left:');
+		lineOutput.push('" style="top:');
+		lineOutput.push(top.toString());
+		lineOutput.push('px;left:');
 		lineOutput.push(left.toString());
 		lineOutput.push('px;width:');
 		lineOutput.push(width.toString());
@@ -302,20 +304,28 @@ export class SelectionsOverlay extends ViewEventHandler implements IDynamicViewO
 			lineVisibleRanges:LineVisibleRangesWithStyle,
 			lineOutput: string[],
 			className:string,
-			lineHeight = this._context.configuration.editor.lineHeight.toString(),
+			fullLineHeight = (this._context.configuration.editor.lineHeight).toString(),
+			reducedLineHeight = (this._context.configuration.editor.lineHeight - 1).toString(),
 			i:number, len:number,
 			j:number, lenJ:number,
 			piecesCount = 0,
 			visibleRange:HorizontalRangeWithStyle;
 
+		let firstLineNumber = (visibleRanges.length > 0 ? visibleRanges[0].lineNumber : 0);
+		let lastLineNumber = (visibleRanges.length > 0 ? visibleRanges[visibleRanges.length - 1].lineNumber : 0);
+
 		for (i = 0, len = visibleRanges.length; i < len; i++) {
 			lineVisibleRanges = visibleRanges[i];
+			let lineNumber = lineVisibleRanges.lineNumber;
+
+			let lineHeight = (lineNumber === lastLineNumber || lineNumber === firstLineNumber ? reducedLineHeight : fullLineHeight);
+			let top = (lineNumber === firstLineNumber ? 1 : 0);
 
-			if (output.hasOwnProperty(lineVisibleRanges.lineNumber.toString())) {
-				lineOutput = output[lineVisibleRanges.lineNumber.toString()];
+			if (output.hasOwnProperty(lineNumber.toString())) {
+				lineOutput = output[lineNumber.toString()];
 			} else {
 				lineOutput = [];
-				output[lineVisibleRanges.lineNumber.toString()] = lineOutput;
+				output[lineNumber.toString()] = lineOutput;
 			}
 
 			for (j = 0, lenJ = lineVisibleRanges.ranges.length; j < lenJ; j++) {
@@ -327,7 +337,7 @@ export class SelectionsOverlay extends ViewEventHandler implements IDynamicViewO
 
 						// First comes the selection (blue layer)
 						piecesCount++;
-						this._createSelectionPiece(lineOutput, lineHeight, SelectionsOverlay.SELECTION_CLASS_NAME, visibleRange.left - SelectionsOverlay.ROUNDED_PIECE_WIDTH, SelectionsOverlay.ROUNDED_PIECE_WIDTH);
+						this._createSelectionPiece(lineOutput, top, lineHeight, SelectionsOverlay.SELECTION_CLASS_NAME, visibleRange.left - SelectionsOverlay.ROUNDED_PIECE_WIDTH, SelectionsOverlay.ROUNDED_PIECE_WIDTH);
 
 						// Second comes the background (white layer) with inverse border radius
 						className = SelectionsOverlay.EDITOR_BACKGROUND_CLASS_NAME;
@@ -338,14 +348,14 @@ export class SelectionsOverlay extends ViewEventHandler implements IDynamicViewO
 							className += ' ' + SelectionsOverlay.SELECTION_BOTTOM_RIGHT;
 						}
 						piecesCount++;
-						this._createSelectionPiece(lineOutput, lineHeight, className, visibleRange.left - SelectionsOverlay.ROUNDED_PIECE_WIDTH, SelectionsOverlay.ROUNDED_PIECE_WIDTH);
+						this._createSelectionPiece(lineOutput, top, lineHeight, className, visibleRange.left - SelectionsOverlay.ROUNDED_PIECE_WIDTH, SelectionsOverlay.ROUNDED_PIECE_WIDTH);
 					}
 					if (visibleRange.endStyle.top === CornerStyle.INTERN || visibleRange.endStyle.bottom === CornerStyle.INTERN) {
 						// Reverse rounded corner to the right
 
 						// First comes the selection (blue layer)
 						piecesCount++;
-						this._createSelectionPiece(lineOutput, lineHeight, SelectionsOverlay.SELECTION_CLASS_NAME, visibleRange.left + visibleRange.width, SelectionsOverlay.ROUNDED_PIECE_WIDTH);
+						this._createSelectionPiece(lineOutput, top, lineHeight, SelectionsOverlay.SELECTION_CLASS_NAME, visibleRange.left + visibleRange.width, SelectionsOverlay.ROUNDED_PIECE_WIDTH);
 
 						// Second comes the background (white layer) with inverse border radius
 						className = SelectionsOverlay.EDITOR_BACKGROUND_CLASS_NAME;
@@ -356,7 +366,7 @@ export class SelectionsOverlay extends ViewEventHandler implements IDynamicViewO
 							className += ' ' + SelectionsOverlay.SELECTION_BOTTOM_LEFT;
 						}
 						piecesCount++;
-						this._createSelectionPiece(lineOutput, lineHeight, className, visibleRange.left + visibleRange.width, SelectionsOverlay.ROUNDED_PIECE_WIDTH);
+						this._createSelectionPiece(lineOutput, top, lineHeight, className, visibleRange.left + visibleRange.width, SelectionsOverlay.ROUNDED_PIECE_WIDTH);
 					}
 				}
 
@@ -376,7 +386,7 @@ export class SelectionsOverlay extends ViewEventHandler implements IDynamicViewO
 					}
 				}
 				piecesCount++;
-				this._createSelectionPiece(lineOutput, lineHeight, className, visibleRange.left, visibleRange.width);
+				this._createSelectionPiece(lineOutput, top, lineHeight, className, visibleRange.left, visibleRange.width);
 			}
 		}