Skip to content

Commit d49c5f3

Browse files
alexdimaalexdima
committed
Use mtkz for whitespace parts that define a width
1 parent 310c969 commit d49c5f3

4 files changed

Lines changed: 52 additions & 49 deletions

File tree

‎src/vs/editor/browser/viewParts/lines/viewLines.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,10 @@
3737
width: 100%;
3838
}
3939

40+
.monaco-editor .mtkz {
41+
display: inline-block;
42+
}
43+
4044
/* TODO@tokenization bootstrap fix */
4145
/*.monaco-editor .view-line > span > span {
4246
float: none;

‎src/vs/editor/common/view/editorColorRegistry.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,5 +88,6 @@ registerThemingParticipant((theme, collector) => {
8888
const invisibles = theme.getColor(editorWhitespaces);
8989
if (invisibles) {
9090
collector.addRule(`.monaco-editor .mtkw { color: ${invisibles} !important; }`);
91+
collector.addRule(`.monaco-editor .mtkz { color: ${invisibles} !important; }`);
9192
}
9293
});

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

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -764,10 +764,11 @@ function _renderLine(input: ResolvedRenderLineInput, sb: IStringBuilder): Render
764764
const partEndIndex = part.endIndex;
765765
const partType = part.type;
766766
const partRendersWhitespace = (renderWhitespace !== RenderWhitespace.None && (partType.indexOf('mtkw') >= 0));
767+
const partRendersWhitespaceWithWidth = partRendersWhitespace && !fontIsMonospace && (partType === 'mtkw'/*only whitespace*/ || !containsForeignElements);
767768
charOffsetInPart = 0;
768769

769770
sb.appendASCIIString('<span class="');
770-
sb.appendASCIIString(partType);
771+
sb.appendASCIIString(partRendersWhitespaceWithWidth ? 'mtkz' : partType);
771772
sb.appendASCII(CharCode.DoubleQuote);
772773

773774
if (partRendersWhitespace) {
@@ -787,13 +788,10 @@ function _renderLine(input: ResolvedRenderLineInput, sb: IStringBuilder): Render
787788
}
788789
}
789790

790-
if (!fontIsMonospace) {
791-
const partIsOnlyWhitespace = (partType === 'mtkw');
792-
if (partIsOnlyWhitespace || !containsForeignElements) {
793-
sb.appendASCIIString(' style="display:inline-block;width:');
794-
sb.appendASCIIString(String(spaceWidth * partContentCnt));
795-
sb.appendASCIIString('px"');
796-
}
791+
if (partRendersWhitespaceWithWidth) {
792+
sb.appendASCIIString(' style="width:');
793+
sb.appendASCIIString(String(spaceWidth * partContentCnt));
794+
sb.appendASCIIString('px"');
797795
}
798796
sb.appendASCII(CharCode.GreaterThan);
799797

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

Lines changed: 41 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -195,8 +195,8 @@ suite('viewLineRenderer.renderLine', () => {
195195
createPart(48, 12),
196196
]);
197197
let expectedOutput = [
198-
'<span class="mtkw" style="display:inline-block;width:40px">\u2192\u00a0\u00a0\u00a0</span>',
199-
'<span class="mtkw" style="display:inline-block;width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
198+
'<span class="mtkz" style="width:40px">\u2192\u00a0\u00a0\u00a0</span>',
199+
'<span class="mtkz" style="width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
200200
'<span class="mtk2">export</span>',
201201
'<span class="mtk3">\u00a0</span>',
202202
'<span class="mtk4">class</span>',
@@ -207,8 +207,8 @@ suite('viewLineRenderer.renderLine', () => {
207207
'<span class="mtk9">\u00a0</span>',
208208
'<span class="mtk10">//\u00a0</span>',
209209
'<span class="mtk11">http://test.com</span>',
210-
'<span class="mtkw" style="display:inline-block;width:20px">\u00b7\u00b7</span>',
211-
'<span class="mtkw" style="display:inline-block;width:30px">\u00b7\u00b7\u00b7</span>'
210+
'<span class="mtkz" style="width:20px">\u00b7\u00b7</span>',
211+
'<span class="mtkz" style="width:30px">\u00b7\u00b7\u00b7</span>'
212212
].join('');
213213
let expectedOffsetsArr = [
214214
[0],
@@ -897,10 +897,10 @@ suite('viewLineRenderer.renderLine 2', () => {
897897
null,
898898
[
899899
'<span>',
900-
'<span class="mtkw" style="display:inline-block;width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
900+
'<span class="mtkz" style="width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
901901
'<span class="mtk2">He</span>',
902902
'<span class="mtk3">llo\u00a0world!</span>',
903-
'<span class="mtkw" style="display:inline-block;width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
903+
'<span class="mtkz" style="width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
904904
'</span>',
905905
].join('')
906906
);
@@ -919,12 +919,12 @@ suite('viewLineRenderer.renderLine 2', () => {
919919
null,
920920
[
921921
'<span>',
922-
'<span class="mtkw" style="display:inline-block;width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
923-
'<span class="mtkw" style="display:inline-block;width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
922+
'<span class="mtkz" style="width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
923+
'<span class="mtkz" style="width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
924924
'<span class="mtk2">He</span>',
925925
'<span class="mtk3">llo\u00a0world!</span>',
926-
'<span class="mtkw" style="display:inline-block;width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
927-
'<span class="mtkw" style="display:inline-block;width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
926+
'<span class="mtkz" style="width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
927+
'<span class="mtkz" style="width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
928928
'</span>',
929929
].join('')
930930
);
@@ -943,11 +943,11 @@ suite('viewLineRenderer.renderLine 2', () => {
943943
null,
944944
[
945945
'<span>',
946-
'<span class="mtkw" style="display:inline-block;width:40px">\u2192\u00a0\u00a0\u00a0</span>',
947-
'<span class="mtkw" style="display:inline-block;width:40px">\u2192\u00a0\u00a0\u00a0</span>',
946+
'<span class="mtkz" style="width:40px">\u2192\u00a0\u00a0\u00a0</span>',
947+
'<span class="mtkz" style="width:40px">\u2192\u00a0\u00a0\u00a0</span>',
948948
'<span class="mtk2">He</span>',
949949
'<span class="mtk3">llo\u00a0world!</span>',
950-
'<span class="mtkw" style="display:inline-block;width:40px">\u2192\u00a0\u00a0\u00a0</span>',
950+
'<span class="mtkz" style="width:40px">\u2192\u00a0\u00a0\u00a0</span>',
951951
'</span>',
952952
].join('')
953953
);
@@ -966,15 +966,15 @@ suite('viewLineRenderer.renderLine 2', () => {
966966
null,
967967
[
968968
'<span>',
969-
'<span class="mtkw" style="display:inline-block;width:40px">\u00b7\u00b7\u2192\u00a0</span>',
970-
'<span class="mtkw" style="display:inline-block;width:40px">\u2192\u00a0\u00a0\u00a0</span>',
971-
'<span class="mtkw" style="display:inline-block;width:20px">\u00b7\u00b7</span>',
969+
'<span class="mtkz" style="width:40px">\u00b7\u00b7\u2192\u00a0</span>',
970+
'<span class="mtkz" style="width:40px">\u2192\u00a0\u00a0\u00a0</span>',
971+
'<span class="mtkz" style="width:20px">\u00b7\u00b7</span>',
972972
'<span class="mtk2">He</span>',
973973
'<span class="mtk3">llo\u00a0world!</span>',
974-
'<span class="mtkw" style="display:inline-block;width:20px">\u00b7\uffeb</span>',
975-
'<span class="mtkw" style="display:inline-block;width:40px">\u00b7\u00b7\u2192\u00a0</span>',
976-
'<span class="mtkw" style="display:inline-block;width:40px">\u00b7\u00b7\u00b7\uffeb</span>',
977-
'<span class="mtkw" style="display:inline-block;width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
974+
'<span class="mtkz" style="width:20px">\u00b7\uffeb</span>',
975+
'<span class="mtkz" style="width:40px">\u00b7\u00b7\u2192\u00a0</span>',
976+
'<span class="mtkz" style="width:40px">\u00b7\u00b7\u00b7\uffeb</span>',
977+
'<span class="mtkz" style="width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
978978
'</span>',
979979
].join('')
980980
);
@@ -995,13 +995,13 @@ suite('viewLineRenderer.renderLine 2', () => {
995995
[
996996
'<span>',
997997
'<span class="">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0</span>',
998-
'<span class="mtkw" style="display:inline-block;width:20px">\u00b7\u00b7</span>',
998+
'<span class="mtkz" style="width:20px">\u00b7\u00b7</span>',
999999
'<span class="mtk2">He</span>',
10001000
'<span class="mtk3">llo\u00a0world!</span>',
1001-
'<span class="mtkw" style="display:inline-block;width:20px">\u00b7\uffeb</span>',
1002-
'<span class="mtkw" style="display:inline-block;width:40px">\u00b7\u00b7\u2192\u00a0</span>',
1003-
'<span class="mtkw" style="display:inline-block;width:40px">\u00b7\u00b7\u00b7\uffeb</span>',
1004-
'<span class="mtkw" style="display:inline-block;width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
1001+
'<span class="mtkz" style="width:20px">\u00b7\uffeb</span>',
1002+
'<span class="mtkz" style="width:40px">\u00b7\u00b7\u2192\u00a0</span>',
1003+
'<span class="mtkz" style="width:40px">\u00b7\u00b7\u00b7\uffeb</span>',
1004+
'<span class="mtkz" style="width:40px">\u00b7\u00b7\u00b7\u00b7</span>',
10051005
'</span>',
10061006
].join('')
10071007
);
@@ -1046,11 +1046,11 @@ suite('viewLineRenderer.renderLine 2', () => {
10461046
[
10471047
'<span>',
10481048
'<span class="mtk1">it</span>',
1049-
'<span class="mtkw" style="display:inline-block;width:20px">\u00b7\u00b7</span>',
1049+
'<span class="mtkz" style="width:20px">\u00b7\u00b7</span>',
10501050
'<span class="mtk1">it</span>',
10511051
'<span class="mtk2">\u00a0</span>',
10521052
'<span class="mtk3">it</span>',
1053-
'<span class="mtkw" style="display:inline-block;width:20px">\u00b7\u00b7</span>',
1053+
'<span class="mtkz" style="width:20px">\u00b7\u00b7</span>',
10541054
'<span class="mtk3">it</span>',
10551055
'</span>',
10561056
].join('')
@@ -1071,12 +1071,12 @@ suite('viewLineRenderer.renderLine 2', () => {
10711071
null,
10721072
[
10731073
'<span>',
1074-
'<span class="mtkw" style="display:inline-block;width:10px">\u00b7</span>',
1074+
'<span class="mtkz" style="width:10px">\u00b7</span>',
10751075
'<span class="mtk0">Hel</span>',
10761076
'<span class="mtk1">lo</span>',
1077-
'<span class="mtkw" style="display:inline-block;width:10px">\u00b7</span>',
1077+
'<span class="mtkz" style="width:10px">\u00b7</span>',
10781078
'<span class="mtk2">world!</span>',
1079-
'<span class="mtkw" style="display:inline-block;width:30px">\u2192\u00a0\u00a0</span>',
1079+
'<span class="mtkz" style="width:30px">\u2192\u00a0\u00a0</span>',
10801080
'</span>',
10811081
].join('')
10821082
);
@@ -1118,12 +1118,12 @@ suite('viewLineRenderer.renderLine 2', () => {
11181118
[new LineRange(0, 14)],
11191119
[
11201120
'<span>',
1121-
'<span class="mtkw" style="display:inline-block;width:10px">\u00b7</span>',
1121+
'<span class="mtkz" style="width:10px">\u00b7</span>',
11221122
'<span class="mtk0">Hel</span>',
11231123
'<span class="mtk1">lo</span>',
1124-
'<span class="mtkw" style="display:inline-block;width:10px">\u00b7</span>',
1124+
'<span class="mtkz" style="width:10px">\u00b7</span>',
11251125
'<span class="mtk2">world!</span>',
1126-
'<span class="mtkw" style="display:inline-block;width:30px">\u2192\u00a0\u00a0</span>',
1126+
'<span class="mtkz" style="width:30px">\u2192\u00a0\u00a0</span>',
11271127
'</span>',
11281128
].join('')
11291129
);
@@ -1143,7 +1143,7 @@ suite('viewLineRenderer.renderLine 2', () => {
11431143
[new LineRange(0, 5)],
11441144
[
11451145
'<span>',
1146-
'<span class="mtkw" style="display:inline-block;width:10px">\u00b7</span>',
1146+
'<span class="mtkz" style="width:10px">\u00b7</span>',
11471147
'<span class="mtk0">Hel</span>',
11481148
'<span class="mtk1">lo</span>',
11491149
'<span class="mtk2">\u00a0world!\u00a0\u00a0\u00a0</span>',
@@ -1167,11 +1167,11 @@ suite('viewLineRenderer.renderLine 2', () => {
11671167
[new LineRange(0, 5), new LineRange(9, 14)],
11681168
[
11691169
'<span>',
1170-
'<span class="mtkw" style="display:inline-block;width:10px">\u00b7</span>',
1170+
'<span class="mtkz" style="width:10px">\u00b7</span>',
11711171
'<span class="mtk0">Hel</span>',
11721172
'<span class="mtk1">lo</span>',
11731173
'<span class="mtk2">\u00a0world!</span>',
1174-
'<span class="mtkw" style="display:inline-block;width:30px">\u2192\u00a0\u00a0</span>',
1174+
'<span class="mtkz" style="width:30px">\u2192\u00a0\u00a0</span>',
11751175
'</span>',
11761176
].join('')
11771177
);
@@ -1192,11 +1192,11 @@ suite('viewLineRenderer.renderLine 2', () => {
11921192
[new LineRange(9, 14), new LineRange(0, 5)],
11931193
[
11941194
'<span>',
1195-
'<span class="mtkw" style="display:inline-block;width:10px">\u00b7</span>',
1195+
'<span class="mtkz" style="width:10px">\u00b7</span>',
11961196
'<span class="mtk0">Hel</span>',
11971197
'<span class="mtk1">lo</span>',
11981198
'<span class="mtk2">\u00a0world!</span>',
1199-
'<span class="mtkw" style="display:inline-block;width:30px">\u2192\u00a0\u00a0</span>',
1199+
'<span class="mtkz" style="width:30px">\u2192\u00a0\u00a0</span>',
12001200
'</span>',
12011201
].join('')
12021202
);
@@ -1214,9 +1214,9 @@ suite('viewLineRenderer.renderLine 2', () => {
12141214
[new LineRange(0, 1), new LineRange(1, 2), new LineRange(2, 3)],
12151215
[
12161216
'<span>',
1217-
'<span class="mtkw" style="display:inline-block;width:10px">\u00b7</span>',
1217+
'<span class="mtkz" style="width:10px">\u00b7</span>',
12181218
'<span class="mtk0">*</span>',
1219-
'<span class="mtkw" style="display:inline-block;width:10px">\u00b7</span>',
1219+
'<span class="mtkz" style="width:10px">\u00b7</span>',
12201220
'<span class="mtk0">S</span>',
12211221
'</span>',
12221222
].join('')
@@ -1329,7 +1329,7 @@ suite('viewLineRenderer.renderLine 2', () => {
13291329

13301330
let expected = [
13311331
'<span>',
1332-
'<span class="mtkw" style="display:inline-block;width:40px">\u2192\u00a0\u00a0\u00a0</span>',
1332+
'<span class="mtkz" style="width:40px">\u2192\u00a0\u00a0\u00a0</span>',
13331333
'<span class="mtk3 before">b</span>',
13341334
'<span class="mtk3">la</span>',
13351335
'</span>'

0 commit comments

Comments
 (0)