Fixes microsoft#32436: Emit whitespace's width for non monospace fonts even if the line contains foreign elements, but they are not placed on the whitespace itself

alexdima · alexdima · commit da62840a7acc · 2017-09-27T09:59:47.000+02:00
diff --git a/src/vs/editor/common/viewLayout/viewLineRenderer.ts b/src/vs/editor/common/viewLayout/viewLineRenderer.ts
@@ -636,10 +636,13 @@ function _renderLine(input: ResolvedRenderLineInput, sb: IStringBuilder): Render
 				}
 			}
 
-			if (!fontIsMonospace && !containsForeignElements) {
-				sb.appendASCIIString(' style="width:');
-				sb.appendASCIIString(String(spaceWidth * partContentCnt));
-				sb.appendASCIIString('px"');
+			if (!fontIsMonospace) {
+				const partIsOnlyWhitespace = (partType === 'vs-whitespace');
+				if (partIsOnlyWhitespace || !containsForeignElements) {
+					sb.appendASCIIString(' style="width:');
+					sb.appendASCIIString(String(spaceWidth * partContentCnt));
+					sb.appendASCIIString('px"');
+				}
 			}
 			sb.appendASCII(CharCode.GreaterThan);
 
diff --git a/src/vs/editor/test/common/viewLayout/viewLineRenderer.test.ts b/src/vs/editor/test/common/viewLayout/viewLineRenderer.test.ts
@@ -1052,6 +1052,36 @@ suite('viewLineRenderer.renderLine 2', () => {
 		assert.deepEqual(actual.html, expected);
 	});
 
+	test('issue #32436: Non-monospace font + visible whitespace + After decorator causes line to "jump"', () => {
+
+		let lineContent = '\tbla';
+
+		let actual = renderViewLine(new RenderLineInput(
+			false,
+			lineContent,
+			false,
+			0,
+			[createPart(4, 3)],
+			[new LineDecoration(2, 3, 'before', true)],
+			4,
+			10,
+			-1,
+			'all',
+			false,
+			true
+		));
+
+		let expected = [
+			'<span>',
+			'<span class="vs-whitespace" style="width:40px">\u2192\u00a0\u00a0\u00a0</span>',
+			'<span class="mtk3 before">b</span>',
+			'<span class="mtk3">la</span>',
+			'</span>'
+		].join('');
+
+		assert.deepEqual(actual.html, expected);
+	});
+
 	test('issue #30133: Empty lines don\'t render inline decorations', () => {
 
 		let lineContent = '';

Original file line number	Diff line number	Diff line change
`@@ -636,10 +636,13 @@ function _renderLine(input: ResolvedRenderLineInput, sb: IStringBuilder): Render`
`636`	`636`	`}`
`637`	`637`	`}`
`638`	`638`
`639`		`- if (!fontIsMonospace && !containsForeignElements) {`
`640`		`- sb.appendASCIIString(' style="width:');`
`641`		`- sb.appendASCIIString(String(spaceWidth * partContentCnt));`
`642`		`- sb.appendASCIIString('px"');`
	`639`	`+ if (!fontIsMonospace) {`
	`640`	`+ const partIsOnlyWhitespace = (partType === 'vs-whitespace');`
	`641`	`+ if (partIsOnlyWhitespace \|\| !containsForeignElements) {`
	`642`	`+ sb.appendASCIIString(' style="width:');`
	`643`	`+ sb.appendASCIIString(String(spaceWidth * partContentCnt));`
	`644`	`+ sb.appendASCIIString('px"');`
	`645`	`+ }`
`643`	`646`	`}`
`644`	`647`	`sb.appendASCII(CharCode.GreaterThan);`
`645`	`648`