Skip to content

Commit 4070575

Browse files
alexdimaalexdima
authored
Move rules to CSS (microsoft#165169) (microsoft#166702)
1 parent da44da2 commit 4070575

File tree

6 files changed

+54
-52
lines changed

6 files changed

+54
-52
lines changed

‎src/vs/editor/browser/controller/textAreaHandler.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,4 +33,5 @@
3333
}*/
3434
.monaco-editor .inputarea.ime-input {
3535
z-index: 10;
36+
caret-color: var(--vscode-editorCursor-foreground);
3637
}

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,11 @@
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: 1 addition & 9 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 { editorActiveIndentGuides, editorBracketHighlightingForeground1, editorBracketHighlightingForeground2, editorBracketHighlightingForeground3, editorBracketHighlightingForeground4, editorBracketHighlightingForeground5, editorBracketHighlightingForeground6, editorBracketPairGuideActiveBackground1, editorBracketPairGuideActiveBackground2, editorBracketPairGuideActiveBackground3, editorBracketPairGuideActiveBackground4, editorBracketPairGuideActiveBackground5, editorBracketPairGuideActiveBackground6, editorBracketPairGuideBackground1, editorBracketPairGuideBackground2, editorBracketPairGuideBackground3, editorBracketPairGuideBackground4, editorBracketPairGuideBackground5, editorBracketPairGuideBackground6, editorIndentGuides } 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 } 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';
@@ -259,14 +259,6 @@ function transparentToUndefined(color: Color | undefined): Color | undefined {
259259
}
260260

261261
registerThemingParticipant((theme, collector) => {
262-
const editorIndentGuidesColor = theme.getColor(editorIndentGuides);
263-
if (editorIndentGuidesColor) {
264-
collector.addRule(`.monaco-editor .lines-content .core-guide-indent { box-shadow: 1px 0 0 0 ${editorIndentGuidesColor} inset; }`);
265-
}
266-
const editorActiveIndentGuidesColor = theme.getColor(editorActiveIndentGuides) || editorIndentGuidesColor;
267-
if (editorActiveIndentGuidesColor) {
268-
collector.addRule(`.monaco-editor .lines-content .core-guide-indent-active { box-shadow: 1px 0 0 0 ${editorActiveIndentGuidesColor} inset; }`);
269-
}
270262

271263
const colors = [
272264
{ bracketColor: editorBracketHighlightingForeground1, guideColor: editorBracketPairGuideBackground1, guideColorActive: editorBracketPairGuideActiveBackground1 },

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -375,7 +375,6 @@ registerThemingParticipant((theme, collector) => {
375375
if (!caretBackground) {
376376
caretBackground = caret.opposite();
377377
}
378-
collector.addRule(`.monaco-editor .inputarea.ime-input { caret-color: ${caret}; }`);
379378
collector.addRule(`.monaco-editor .cursors-layer .cursor { background-color: ${caret}; border-color: ${caret}; color: ${caretBackground}; }`);
380379
if (isHighContrast(theme.type)) {
381380
collector.addRule(`.monaco-editor .cursors-layer.has-selection .cursor { border-left: 1px solid ${caretBackground}; border-right: 1px solid ${caretBackground}; }`);

‎src/vs/editor/browser/widget/codeEditorWidget.ts

Lines changed: 2 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@ import { IWordAtPosition } from 'vs/editor/common/core/wordHelper';
3838
import { ClassName } from 'vs/editor/common/model/intervalTree';
3939
import { ModelDecorationOptions } from 'vs/editor/common/model/textModel';
4040
import { IModelContentChangedEvent, IModelDecorationsChangedEvent, IModelLanguageChangedEvent, IModelLanguageConfigurationChangedEvent, IModelOptionsChangedEvent, IModelTokensChangedEvent } from 'vs/editor/common/textModelEvents';
41-
import { editorUnnecessaryCodeBorder, editorUnnecessaryCodeOpacity } from 'vs/editor/common/core/editorColorRegistry';
42-
import { editorErrorBorder, editorErrorForeground, editorHintBorder, editorHintForeground, editorInfoBorder, editorInfoForeground, editorWarningBorder, editorWarningForeground, editorForeground, editorErrorBackground, editorInfoBackground, editorWarningBackground } from 'vs/platform/theme/common/colorRegistry';
41+
import { editorUnnecessaryCodeOpacity } from 'vs/editor/common/core/editorColorRegistry';
42+
import { editorErrorForeground, editorHintForeground, editorInfoForeground, editorWarningForeground } from 'vs/platform/theme/common/colorRegistry';
4343
import { VerticalRevealType } from 'vs/editor/common/viewEvents';
4444
import { ViewModel } from 'vs/editor/common/viewModel/viewModelImpl';
4545
import { ICommandService } from 'vs/platform/commands/common/commands';
@@ -2263,64 +2263,24 @@ function getDotDotDotSVGData(color: Color) {
22632263
}
22642264

22652265
registerThemingParticipant((theme, collector) => {
2266-
const errorBorderColor = theme.getColor(editorErrorBorder);
2267-
if (errorBorderColor) {
2268-
collector.addRule(`.monaco-editor .${ClassName.EditorErrorDecoration} { border-bottom: 4px double ${errorBorderColor}; }`);
2269-
}
22702266
const errorForeground = theme.getColor(editorErrorForeground);
22712267
if (errorForeground) {
22722268
collector.addRule(`.monaco-editor .${ClassName.EditorErrorDecoration} { background: url("data:image/svg+xml,${getSquigglySVGData(errorForeground)}") repeat-x bottom left; }`);
22732269
}
2274-
const errorBackground = theme.getColor(editorErrorBackground);
2275-
if (errorBackground) {
2276-
collector.addRule(`.monaco-editor .${ClassName.EditorErrorDecoration}::before { display: block; content: ''; width: 100%; height: 100%; background: ${errorBackground}; }`);
2277-
}
2278-
2279-
const warningBorderColor = theme.getColor(editorWarningBorder);
2280-
if (warningBorderColor) {
2281-
collector.addRule(`.monaco-editor .${ClassName.EditorWarningDecoration} { border-bottom: 4px double ${warningBorderColor}; }`);
2282-
}
22832270
const warningForeground = theme.getColor(editorWarningForeground);
22842271
if (warningForeground) {
22852272
collector.addRule(`.monaco-editor .${ClassName.EditorWarningDecoration} { background: url("data:image/svg+xml,${getSquigglySVGData(warningForeground)}") repeat-x bottom left; }`);
22862273
}
2287-
const warningBackground = theme.getColor(editorWarningBackground);
2288-
if (warningBackground) {
2289-
collector.addRule(`.monaco-editor .${ClassName.EditorWarningDecoration}::before { display: block; content: ''; width: 100%; height: 100%; background: ${warningBackground}; }`);
2290-
}
2291-
2292-
const infoBorderColor = theme.getColor(editorInfoBorder);
2293-
if (infoBorderColor) {
2294-
collector.addRule(`.monaco-editor .${ClassName.EditorInfoDecoration} { border-bottom: 4px double ${infoBorderColor}; }`);
2295-
}
22962274
const infoForeground = theme.getColor(editorInfoForeground);
22972275
if (infoForeground) {
22982276
collector.addRule(`.monaco-editor .${ClassName.EditorInfoDecoration} { background: url("data:image/svg+xml,${getSquigglySVGData(infoForeground)}") repeat-x bottom left; }`);
22992277
}
2300-
const infoBackground = theme.getColor(editorInfoBackground);
2301-
if (infoBackground) {
2302-
collector.addRule(`.monaco-editor .${ClassName.EditorInfoDecoration}::before { display: block; content: ''; width: 100%; height: 100%; background: ${infoBackground}; }`);
2303-
}
2304-
2305-
const hintBorderColor = theme.getColor(editorHintBorder);
2306-
if (hintBorderColor) {
2307-
collector.addRule(`.monaco-editor .${ClassName.EditorHintDecoration} { border-bottom: 2px dotted ${hintBorderColor}; }`);
2308-
}
23092278
const hintForeground = theme.getColor(editorHintForeground);
23102279
if (hintForeground) {
23112280
collector.addRule(`.monaco-editor .${ClassName.EditorHintDecoration} { background: url("data:image/svg+xml,${getDotDotDotSVGData(hintForeground)}") no-repeat bottom left; }`);
23122281
}
2313-
23142282
const unnecessaryForeground = theme.getColor(editorUnnecessaryCodeOpacity);
23152283
if (unnecessaryForeground) {
23162284
collector.addRule(`.monaco-editor.showUnused .${ClassName.EditorUnnecessaryInlineDecoration} { opacity: ${unnecessaryForeground.rgba.a}; }`);
23172285
}
2318-
2319-
const unnecessaryBorder = theme.getColor(editorUnnecessaryCodeBorder);
2320-
if (unnecessaryBorder) {
2321-
collector.addRule(`.monaco-editor.showUnused .${ClassName.EditorUnnecessaryDecoration} { border-bottom: 2px dashed ${unnecessaryBorder}; }`);
2322-
}
2323-
2324-
const deprecatedForeground = theme.getColor(editorForeground) || 'inherit';
2325-
collector.addRule(`.monaco-editor.showDeprecated .${ClassName.EditorDeprecatedInlineDecoration} { text-decoration: line-through; text-decoration-color: ${deprecatedForeground}}`);
23262286
});

‎src/vs/editor/browser/widget/media/editor.css

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,3 +40,45 @@
4040
opacity: 0.3;
4141
}
4242
*/
43+
44+
45+
.monaco-editor .squiggly-error {
46+
border-bottom: 4px double var(--vscode-editorError-border);
47+
}
48+
.monaco-editor .squiggly-error::before {
49+
display: block;
50+
content: '';
51+
width: 100%;
52+
height: 100%;
53+
background: var(--vscode-editorError-background);
54+
}
55+
.monaco-editor .squiggly-warning {
56+
border-bottom: 4px double var(--vscode-editorWarning-border);
57+
}
58+
.monaco-editor .squiggly-warning::before {
59+
display: block;
60+
content: '';
61+
width: 100%;
62+
height: 100%;
63+
background: var(--vscode-editorWarning-background);
64+
}
65+
.monaco-editor .squiggly-info {
66+
border-bottom: 4px double var(--vscode-editorInfo-border);
67+
}
68+
.monaco-editor .squiggly-info::before {
69+
display: block;
70+
content: '';
71+
width: 100%;
72+
height: 100%;
73+
background: var(--vscode-editorInfo-background);
74+
}
75+
.monaco-editor .squiggly-hint {
76+
border-bottom: 2px dotted var(--vscode-editorHint-border);
77+
}
78+
.monaco-editor.showUnused .squiggly-unnecessary {
79+
border-bottom: 2px dashed var(--vscode-editorUnnecessaryCode-border);
80+
}
81+
.monaco-editor.showDeprecated .squiggly-inline-deprecated {
82+
text-decoration: line-through;
83+
text-decoration-color: var(--vscode-editor-foreground, inherit);
84+
}

0 commit comments

Comments
 (0)