Fixes #37401: Render before/after decorations on their own <span> elements

src/vs/editor/browser/viewParts/lines/rangeUtil.ts

@@ -5,6 +5,7 @@
 'use strict';
 
 import { HorizontalRange } from 'vs/editor/common/view/renderingContext';
+import { Constants } from 'vs/editor/common/core/uint';
 
 class FloatHorizontalRange {
 	_floatHorizontalRangeBrand: void;
@@ -133,6 +134,18 @@ export class RangeUtil {
 		let startElement = domNode.children[startChildIndex].firstChild;
 		let endElement = domNode.children[endChildIndex].firstChild;
 
+		if (!startElement || !endElement) {
+			// When having an empty <span> (without any text content), try to move to the previous <span>
+			if (!startElement && startOffset === 0 && startChildIndex > 0) {
+				startElement = domNode.children[startChildIndex - 1].firstChild;
+				startOffset = Constants.MAX_SAFE_SMALL_INTEGER;
+			}
+			if (!endElement && endOffset === 0 && endChildIndex > 0) {
+				endElement = domNode.children[endChildIndex - 1].firstChild;
+				endOffset = Constants.MAX_SAFE_SMALL_INTEGER;
+			}
+		}
+
 		if (!startElement || !endElement) {
 			return null;
 		}

src/vs/editor/common/viewLayout/lineDecorations.ts

@@ -58,7 +58,7 @@ export class LineDecoration {
 				continue;
 			}
 
-			if (range.isEmpty()) {
+			if (range.isEmpty() && d.type === InlineDecorationType.Regular) {
 				// Ignore empty range decorations
 				continue;
 			}

src/vs/editor/common/viewLayout/viewLineRenderer.ts

@@ -569,6 +569,10 @@ function _applyInlineDecorations(lineContent: string, len: number, tokens: LineP
 		}
 	}
 
+	if (lineDecorationIndex < lineDecorationsLen && lineDecorations[lineDecorationIndex].startOffset === tokens[tokens.length - 1].endIndex) {
+		result[resultLen++] = new LinePart(lastResultEndIndex, lineDecorations[lineDecorationIndex].className);
+	}
+
 	return result;
 }
 

src/vs/editor/common/viewModel/viewModelDecorations.ts

@@ -133,7 +133,7 @@ export class ViewModelDecorations implements IDisposable {
 			if (decorationOptions.beforeContentClassName) {
 				if (startLineNumber <= viewRange.startLineNumber && viewRange.startLineNumber <= endLineNumber) {
 					let inlineDecoration = new InlineDecoration(
-						new Range(viewRange.startLineNumber, viewRange.startColumn, viewRange.startLineNumber, viewRange.startColumn + 1),
+						new Range(viewRange.startLineNumber, viewRange.startColumn, viewRange.startLineNumber, viewRange.startColumn),
 						decorationOptions.beforeContentClassName,
 						InlineDecorationType.Before
 					);
@@ -143,7 +143,7 @@ export class ViewModelDecorations implements IDisposable {
 			if (decorationOptions.afterContentClassName) {
 				if (startLineNumber <= viewRange.endLineNumber && viewRange.endLineNumber <= endLineNumber) {
 					let inlineDecoration = new InlineDecoration(
-						new Range(viewRange.endLineNumber, viewRange.endColumn - 1, viewRange.endLineNumber, viewRange.endColumn),
+						new Range(viewRange.endLineNumber, viewRange.endColumn, viewRange.endLineNumber, viewRange.endColumn),
 						decorationOptions.afterContentClassName,
 						InlineDecorationType.After
 					);

src/vs/editor/test/common/viewModel/viewModelDecorations.test.ts

@@ -109,7 +109,7 @@ suite('ViewModelDecorations', () => {
 					type: InlineDecorationType.Regular
 				},
 				{
-					range: new Range(2, 0, 2, 1),
+					range: new Range(2, 1, 2, 1),
 					inlineClassName: 'a-dec2',
 					type: InlineDecorationType.After
 				},
@@ -119,7 +119,7 @@ suite('ViewModelDecorations', () => {
 					type: InlineDecorationType.Regular
 				},
 				{
-					range: new Range(2, 1, 2, 2),
+					range: new Range(2, 2, 2, 2),
 					inlineClassName: 'a-dec3',
 					type: InlineDecorationType.After
 				},
@@ -139,12 +139,12 @@ suite('ViewModelDecorations', () => {
 					type: InlineDecorationType.Regular
 				},
 				{
-					range: new Range(2, 1, 2, 2),
+					range: new Range(2, 1, 2, 1),
 					inlineClassName: 'b-dec6',
 					type: InlineDecorationType.Before
 				},
 				{
-					range: new Range(2, 0, 2, 1),
+					range: new Range(2, 1, 2, 1),
 					inlineClassName: 'a-dec6',
 					type: InlineDecorationType.After
 				},
@@ -154,12 +154,12 @@ suite('ViewModelDecorations', () => {
 					type: InlineDecorationType.Regular
 				},
 				{
-					range: new Range(2, 1, 2, 2),
+					range: new Range(2, 1, 2, 1),
 					inlineClassName: 'b-dec7',
 					type: InlineDecorationType.Before
 				},
 				{
-					range: new Range(2, 2, 2, 3),
+					range: new Range(2, 3, 2, 3),
 					inlineClassName: 'a-dec7',
 					type: InlineDecorationType.After
 				},
@@ -169,7 +169,7 @@ suite('ViewModelDecorations', () => {
 					type: InlineDecorationType.Regular
 				},
 				{
-					range: new Range(2, 1, 2, 2),
+					range: new Range(2, 1, 2, 1),
 					inlineClassName: 'b-dec8',
 					type: InlineDecorationType.Before
 				},
@@ -179,7 +179,7 @@ suite('ViewModelDecorations', () => {
 					type: InlineDecorationType.Regular
 				},
 				{
-					range: new Range(2, 1, 2, 2),
+					range: new Range(2, 1, 2, 1),
 					inlineClassName: 'b-dec9',
 					type: InlineDecorationType.Before
 				},
@@ -189,12 +189,12 @@ suite('ViewModelDecorations', () => {
 					type: InlineDecorationType.Regular
 				},
 				{
-					range: new Range(2, 3, 2, 4),
+					range: new Range(2, 3, 2, 3),
 					inlineClassName: 'b-dec10',
 					type: InlineDecorationType.Before
 				},
 				{
-					range: new Range(2, 4, 2, 5),
+					range: new Range(2, 5, 2, 5),
 					inlineClassName: 'a-dec10',
 					type: InlineDecorationType.After
 				},
@@ -204,7 +204,7 @@ suite('ViewModelDecorations', () => {
 					type: InlineDecorationType.Regular
 				},
 				{
-					range: new Range(2, 3, 2, 4),
+					range: new Range(2, 3, 2, 3),
 					inlineClassName: 'b-dec11',
 					type: InlineDecorationType.Before
 				},
@@ -214,7 +214,7 @@ suite('ViewModelDecorations', () => {
 					type: InlineDecorationType.Regular
 				},
 				{
-					range: new Range(2, 3, 2, 4),
+					range: new Range(2, 3, 2, 3),
 					inlineClassName: 'b-dec12',
 					type: InlineDecorationType.Before
 				},
@@ -326,12 +326,12 @@ suite('ViewModelDecorations', () => {
 			).inlineDecorations;
 			assert.deepEqual(inlineDecorations, [
 				{
-					range: new Range(1, 1, 1, 2),
+					range: new Range(1, 1, 1, 1),
 					inlineClassName: 'before1',
 					type: InlineDecorationType.Before
 				},
 				{
-					range: new Range(1, 0, 1, 1),
+					range: new Range(1, 1, 1, 1),
 					inlineClassName: 'after1',
 					type: InlineDecorationType.After
 				}