Skip to content

Commit 6bbb128

Browse files
hediethediet
authored
Merge pull request microsoft#178112 from mwerschy/rainbow-indent
Implement indent guide colorization options.
2 parents e195ed8 + 4613252 commit 6bbb128

File tree

6 files changed

+79
-25
lines changed

6 files changed

+79
-25
lines changed

‎build/lib/stylelint/vscode-known-variables.json

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -211,8 +211,18 @@
211211
"--vscode-editorHoverWidget-foreground",
212212
"--vscode-editorHoverWidget-highlightForeground",
213213
"--vscode-editorHoverWidget-statusBarBackground",
214-
"--vscode-editorIndentGuide-activeBackground",
215-
"--vscode-editorIndentGuide-background",
214+
"--vscode-editorIndentGuide-activeBackground1",
215+
"--vscode-editorIndentGuide-activeBackground2",
216+
"--vscode-editorIndentGuide-activeBackground3",
217+
"--vscode-editorIndentGuide-activeBackground4",
218+
"--vscode-editorIndentGuide-activeBackground5",
219+
"--vscode-editorIndentGuide-activeBackground6",
220+
"--vscode-editorIndentGuide-background1",
221+
"--vscode-editorIndentGuide-background2",
222+
"--vscode-editorIndentGuide-background3",
223+
"--vscode-editorIndentGuide-background4",
224+
"--vscode-editorIndentGuide-background5",
225+
"--vscode-editorIndentGuide-background6",
216226
"--vscode-editorInfo-background",
217227
"--vscode-editorInfo-border",
218228
"--vscode-editorInfo-foreground",

‎src/vs/editor/browser/viewParts/indentGuides/indentGuides.css

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,3 @@
77
position: absolute;
88
box-sizing: border-box;
99
}
10-
11-
.monaco-editor .lines-content .core-guide-indent {
12-
box-shadow: 1px 0 0 0 var(--vscode-editorIndentGuide-background) inset;
13-
}
14-
15-
.monaco-editor .lines-content .core-guide-indent-active {
16-
box-shadow: 1px 0 0 0 var(--vscode-editorIndentGuide-activeBackground, --vscode-editorIndentGuide-background) inset;
17-
}

‎src/vs/editor/browser/viewParts/indentGuides/indentGuides.ts

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
import 'vs/css!./indentGuides';
77
import { DynamicViewOverlay } from 'vs/editor/browser/view/dynamicViewOverlay';
8-
import { editorBracketHighlightingForeground1, editorBracketHighlightingForeground2, editorBracketHighlightingForeground3, editorBracketHighlightingForeground4, editorBracketHighlightingForeground5, editorBracketHighlightingForeground6, editorBracketPairGuideActiveBackground1, editorBracketPairGuideActiveBackground2, editorBracketPairGuideActiveBackground3, editorBracketPairGuideActiveBackground4, editorBracketPairGuideActiveBackground5, editorBracketPairGuideActiveBackground6, editorBracketPairGuideBackground1, editorBracketPairGuideBackground2, editorBracketPairGuideBackground3, editorBracketPairGuideBackground4, editorBracketPairGuideBackground5, editorBracketPairGuideBackground6 } from 'vs/editor/common/core/editorColorRegistry';
8+
import { editorBracketHighlightingForeground1, editorBracketHighlightingForeground2, editorBracketHighlightingForeground3, editorBracketHighlightingForeground4, editorBracketHighlightingForeground5, editorBracketHighlightingForeground6, editorBracketPairGuideActiveBackground1, editorBracketPairGuideActiveBackground2, editorBracketPairGuideActiveBackground3, editorBracketPairGuideActiveBackground4, editorBracketPairGuideActiveBackground5, editorBracketPairGuideActiveBackground6, editorBracketPairGuideBackground1, editorBracketPairGuideBackground2, editorBracketPairGuideBackground3, editorBracketPairGuideBackground4, editorBracketPairGuideBackground5, editorBracketPairGuideBackground6, editorIndentGuide1, editorIndentGuide2, editorIndentGuide3, editorIndentGuide4, editorIndentGuide5, editorIndentGuide6, editorActiveIndentGuide1, editorActiveIndentGuide2, editorActiveIndentGuide3, editorActiveIndentGuide4, editorActiveIndentGuide5, editorActiveIndentGuide6 } from 'vs/editor/common/core/editorColorRegistry';
99
import { RenderingContext } from 'vs/editor/browser/view/renderingContext';
1010
import { ViewContext } from 'vs/editor/common/viewModel/viewContext';
1111
import * as viewEvents from 'vs/editor/common/viewEvents';
@@ -224,7 +224,7 @@ export class IndentGuidesOverlay extends DynamicViewOverlay {
224224
new IndentGuide(
225225
indentGuide,
226226
-1,
227-
isActive ? 'core-guide-indent-active' : 'core-guide-indent',
227+
`core-guide-indent lvl-${(indentLvl - 1) % 30}` + (isActive ? ' indent-active' : ''),
228228
null,
229229
-1,
230230
-1,
@@ -270,6 +270,14 @@ registerThemingParticipant((theme, collector) => {
270270
];
271271
const colorProvider = new BracketPairGuidesClassNames();
272272

273+
const indentColors = [
274+
{ indentColor: editorIndentGuide1, indentColorActive: editorActiveIndentGuide1 },
275+
{ indentColor: editorIndentGuide2, indentColorActive: editorActiveIndentGuide2 },
276+
{ indentColor: editorIndentGuide3, indentColorActive: editorActiveIndentGuide3 },
277+
{ indentColor: editorIndentGuide4, indentColorActive: editorActiveIndentGuide4 },
278+
{ indentColor: editorIndentGuide5, indentColorActive: editorActiveIndentGuide5 },
279+
{ indentColor: editorIndentGuide6, indentColorActive: editorActiveIndentGuide6 },
280+
];
273281

274282
const colorValues = colors
275283
.map(c => {
@@ -291,6 +299,25 @@ registerThemingParticipant((theme, collector) => {
291299
})
292300
.filter(isDefined);
293301

302+
const indentColorValues = indentColors
303+
.map(c => {
304+
const indentColor = theme.getColor(c.indentColor);
305+
const indentColorActive = theme.getColor(c.indentColorActive);
306+
307+
const effectiveIndentColor = transparentToUndefined(indentColor);
308+
const effectiveIndentColorActive = transparentToUndefined(indentColorActive);
309+
310+
if (!effectiveIndentColor || !effectiveIndentColorActive) {
311+
return undefined;
312+
}
313+
314+
return {
315+
indentColor: effectiveIndentColor,
316+
indentColorActive: effectiveIndentColorActive,
317+
};
318+
})
319+
.filter(isDefined);
320+
294321
if (colorValues.length > 0) {
295322
for (let level = 0; level < 30; level++) {
296323
const colors = colorValues[level % colorValues.length];
@@ -305,4 +332,14 @@ registerThemingParticipant((theme, collector) => {
305332
collector.addRule(`.monaco-editor .horizontal-top.${colorProvider.activeClassName} { border-top: 1px solid var(--guide-color-active); }`);
306333
collector.addRule(`.monaco-editor .horizontal-bottom.${colorProvider.activeClassName} { border-bottom: 1px solid var(--guide-color-active); }`);
307334
}
335+
336+
if (indentColorValues.length > 0) {
337+
for (let level = 0; level < 30; level++) {
338+
const colors = indentColorValues[level % indentColorValues.length];
339+
collector.addRule(`.monaco-editor .lines-content .core-guide-indent.lvl-${level} { --indent-color: ${colors.indentColor}; --indent-color-active: ${colors.indentColorActive}; }`);
340+
}
341+
342+
collector.addRule(`.monaco-editor .lines-content .core-guide-indent { box-shadow: 1px 0 0 0 var(--indent-color) inset; }`);
343+
collector.addRule(`.monaco-editor .lines-content .core-guide-indent.indent-active { box-shadow: 1px 0 0 0 var(--indent-color-active) inset; }`);
344+
}
308345
});

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

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,25 @@ export const editorSymbolHighlightBorder = registerColor('editor.symbolHighlight
2121
export const editorCursorForeground = registerColor('editorCursor.foreground', { dark: '#AEAFAD', light: Color.black, hcDark: Color.white, hcLight: '#0F4A85' }, nls.localize('caret', 'Color of the editor cursor.'));
2222
export const editorCursorBackground = registerColor('editorCursor.background', null, nls.localize('editorCursorBackground', 'The background color of the editor cursor. Allows customizing the color of a character overlapped by a block cursor.'));
2323
export const editorWhitespaces = registerColor('editorWhitespace.foreground', { dark: '#e3e4e229', light: '#33333333', hcDark: '#e3e4e229', hcLight: '#CCCCCC' }, nls.localize('editorWhitespaces', 'Color of whitespace characters in the editor.'));
24-
export const editorIndentGuides = registerColor('editorIndentGuide.background', { dark: editorWhitespaces, light: editorWhitespaces, hcDark: editorWhitespaces, hcLight: editorWhitespaces }, nls.localize('editorIndentGuides', 'Color of the editor indentation guides.'));
25-
export const editorActiveIndentGuides = registerColor('editorIndentGuide.activeBackground', { dark: editorWhitespaces, light: editorWhitespaces, hcDark: editorWhitespaces, hcLight: editorWhitespaces }, nls.localize('editorActiveIndentGuide', 'Color of the active editor indentation guides.'));
2624
export const editorLineNumbers = registerColor('editorLineNumber.foreground', { dark: '#858585', light: '#237893', hcDark: Color.white, hcLight: '#292929' }, nls.localize('editorLineNumbers', 'Color of editor line numbers.'));
2725

26+
export const deprecatedEditorIndentGuides = registerColor('editorIndentGuide.background', { dark: editorWhitespaces, light: editorWhitespaces, hcDark: editorWhitespaces, hcLight: editorWhitespaces }, nls.localize('editorIndentGuides', 'Color of the editor indentation guides.'), false, nls.localize('deprecatedEditorIndentGuides', '\'editorIndentGuide.background\' is deprecated. Use \'editorIndentGuide.background1\' instead.'));
27+
export const deprecatedEditorActiveIndentGuides = registerColor('editorIndentGuide.activeBackground', { dark: editorWhitespaces, light: editorWhitespaces, hcDark: editorWhitespaces, hcLight: editorWhitespaces }, nls.localize('editorActiveIndentGuide', 'Color of the active editor indentation guides.'), false, nls.localize('deprecatedEditorActiveIndentGuide', '\'editorIndentGuide.activeBackground\' is deprecated. Use \'editorIndentGuide.activeBackground1\' instead.'));
28+
29+
export const editorIndentGuide1 = registerColor('editorIndentGuide.background1', { dark: deprecatedEditorIndentGuides, light: deprecatedEditorIndentGuides, hcDark: deprecatedEditorIndentGuides, hcLight: deprecatedEditorIndentGuides }, nls.localize('editorIndentGuides1', 'Color of the editor indentation guides (1).'));
30+
export const editorIndentGuide2 = registerColor('editorIndentGuide.background2', { dark: '#00000000', light: '#00000000', hcDark: '#00000000', hcLight: '#00000000' }, nls.localize('editorIndentGuides2', 'Color of the editor indentation guides (2).'));
31+
export const editorIndentGuide3 = registerColor('editorIndentGuide.background3', { dark: '#00000000', light: '#00000000', hcDark: '#00000000', hcLight: '#00000000' }, nls.localize('editorIndentGuides3', 'Color of the editor indentation guides (3).'));
32+
export const editorIndentGuide4 = registerColor('editorIndentGuide.background4', { dark: '#00000000', light: '#00000000', hcDark: '#00000000', hcLight: '#00000000' }, nls.localize('editorIndentGuides4', 'Color of the editor indentation guides (4).'));
33+
export const editorIndentGuide5 = registerColor('editorIndentGuide.background5', { dark: '#00000000', light: '#00000000', hcDark: '#00000000', hcLight: '#00000000' }, nls.localize('editorIndentGuides5', 'Color of the editor indentation guides (5).'));
34+
export const editorIndentGuide6 = registerColor('editorIndentGuide.background6', { dark: '#00000000', light: '#00000000', hcDark: '#00000000', hcLight: '#00000000' }, nls.localize('editorIndentGuides6', 'Color of the editor indentation guides (6).'));
35+
36+
export const editorActiveIndentGuide1 = registerColor('editorIndentGuide.activeBackground1', { dark: deprecatedEditorActiveIndentGuides, light: deprecatedEditorActiveIndentGuides, hcDark: deprecatedEditorActiveIndentGuides, hcLight: deprecatedEditorActiveIndentGuides }, nls.localize('editorActiveIndentGuide1', 'Color of the active editor indentation guides (1).'));
37+
export const editorActiveIndentGuide2 = registerColor('editorIndentGuide.activeBackground2', { dark: '#00000000', light: '#00000000', hcDark: '#00000000', hcLight: '#00000000' }, nls.localize('editorActiveIndentGuide2', 'Color of the active editor indentation guides (2).'));
38+
export const editorActiveIndentGuide3 = registerColor('editorIndentGuide.activeBackground3', { dark: '#00000000', light: '#00000000', hcDark: '#00000000', hcLight: '#00000000' }, nls.localize('editorActiveIndentGuide3', 'Color of the active editor indentation guides (3).'));
39+
export const editorActiveIndentGuide4 = registerColor('editorIndentGuide.activeBackground4', { dark: '#00000000', light: '#00000000', hcDark: '#00000000', hcLight: '#00000000' }, nls.localize('editorActiveIndentGuide4', 'Color of the active editor indentation guides (4).'));
40+
export const editorActiveIndentGuide5 = registerColor('editorIndentGuide.activeBackground5', { dark: '#00000000', light: '#00000000', hcDark: '#00000000', hcLight: '#00000000' }, nls.localize('editorActiveIndentGuide5', 'Color of the active editor indentation guides (5).'));
41+
export const editorActiveIndentGuide6 = registerColor('editorIndentGuide.activeBackground6', { dark: '#00000000', light: '#00000000', hcDark: '#00000000', hcLight: '#00000000' }, nls.localize('editorActiveIndentGuide6', 'Color of the active editor indentation guides (6).'));
42+
2843
const deprecatedEditorActiveLineNumber = registerColor('editorActiveLineNumber.foreground', { dark: '#c6c6c6', light: '#0B216F', hcDark: activeContrastBorder, hcLight: activeContrastBorder }, nls.localize('editorActiveLineNumber', 'Color of editor active line number'), false, nls.localize('deprecatedEditorActiveLineNumber', 'Id is deprecated. Use \'editorLineNumber.activeForeground\' instead.'));
2944
export const editorActiveLineNumber = registerColor('editorLineNumber.activeForeground', { dark: deprecatedEditorActiveLineNumber, light: deprecatedEditorActiveLineNumber, hcDark: deprecatedEditorActiveLineNumber, hcLight: deprecatedEditorActiveLineNumber }, nls.localize('editorActiveLineNumber', 'Color of editor active line number'));
3045
export const editorDimmedLineNumber = registerColor('editorLineNumber.dimmedForeground', { dark: null, light: null, hcDark: null, hcLight: null }, nls.localize('editorDimmedLineNumber', 'Color of the final editor line when editor.renderFinalNewline is set to dimmed.'));

‎src/vs/editor/standalone/common/themes.ts

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* Licensed under the MIT License. See License.txt in the project root for license information.
44
*--------------------------------------------------------------------------------------------*/
55

6-
import { editorActiveIndentGuides, editorIndentGuides } from 'vs/editor/common/core/editorColorRegistry';
6+
import { editorActiveIndentGuide1, editorIndentGuide1 } from 'vs/editor/common/core/editorColorRegistry';
77
import { IStandaloneThemeData } from 'vs/editor/standalone/common/standaloneTheme';
88
import { editorBackground, editorForeground, editorInactiveSelection, editorSelectionHighlight } from 'vs/platform/theme/common/colorRegistry';
99

@@ -71,8 +71,8 @@ export const vs: IStandaloneThemeData = {
7171
[editorBackground]: '#FFFFFE',
7272
[editorForeground]: '#000000',
7373
[editorInactiveSelection]: '#E5EBF1',
74-
[editorIndentGuides]: '#D3D3D3',
75-
[editorActiveIndentGuides]: '#939393',
74+
[editorIndentGuide1]: '#D3D3D3',
75+
[editorActiveIndentGuide1]: '#939393',
7676
[editorSelectionHighlight]: '#ADD6FF4D'
7777
}
7878
};
@@ -142,8 +142,8 @@ export const vs_dark: IStandaloneThemeData = {
142142
[editorBackground]: '#1E1E1E',
143143
[editorForeground]: '#D4D4D4',
144144
[editorInactiveSelection]: '#3A3D41',
145-
[editorIndentGuides]: '#404040',
146-
[editorActiveIndentGuides]: '#707070',
145+
[editorIndentGuide1]: '#404040',
146+
[editorActiveIndentGuide1]: '#707070',
147147
[editorSelectionHighlight]: '#ADD6FF26'
148148
}
149149
};
@@ -204,8 +204,8 @@ export const hc_black: IStandaloneThemeData = {
204204
colors: {
205205
[editorBackground]: '#000000',
206206
[editorForeground]: '#FFFFFF',
207-
[editorIndentGuides]: '#FFFFFF',
208-
[editorActiveIndentGuides]: '#FFFFFF',
207+
[editorIndentGuide1]: '#FFFFFF',
208+
[editorActiveIndentGuide1]: '#FFFFFF',
209209
}
210210
};
211211
/* -------------------------------- End hc-black theme -------------------------------- */
@@ -263,8 +263,8 @@ export const hc_light: IStandaloneThemeData = {
263263
colors: {
264264
[editorBackground]: '#FFFFFF',
265265
[editorForeground]: '#292929',
266-
[editorIndentGuides]: '#292929',
267-
[editorActiveIndentGuides]: '#292929',
266+
[editorIndentGuide1]: '#292929',
267+
[editorActiveIndentGuide1]: '#292929',
268268
}
269269
};
270270
/* -------------------------------- End hc-light theme -------------------------------- */

‎src/vs/workbench/services/themes/common/themeCompatibility.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,8 @@ addSettingMapping('lineHighlight', editorColorRegistry.editorLineHighlight);
6464
addSettingMapping('rangeHighlight', editorColorRegistry.editorRangeHighlight);
6565
addSettingMapping('caret', editorColorRegistry.editorCursorForeground);
6666
addSettingMapping('invisibles', editorColorRegistry.editorWhitespaces);
67-
addSettingMapping('guide', editorColorRegistry.editorIndentGuides);
68-
addSettingMapping('activeGuide', editorColorRegistry.editorActiveIndentGuides);
67+
addSettingMapping('guide', editorColorRegistry.editorIndentGuide1);
68+
addSettingMapping('activeGuide', editorColorRegistry.editorActiveIndentGuide1);
6969

7070
const ansiColorMap = ['ansiBlack', 'ansiRed', 'ansiGreen', 'ansiYellow', 'ansiBlue', 'ansiMagenta', 'ansiCyan', 'ansiWhite',
7171
'ansiBrightBlack', 'ansiBrightRed', 'ansiBrightGreen', 'ansiBrightYellow', 'ansiBrightBlue', 'ansiBrightMagenta', 'ansiBrightCyan', 'ansiBrightWhite'

0 commit comments

Comments
 (0)