Skip to content

Commit b3523bc

Browse files
jriekenjrieken
authored
joh/external marlin (microsoft#165336)
* move typeHierarchyPeek onto CSS variables * move symbolIcons onto CSS variables * move markerHoverParticipant onto CSS variables
1 parent e9db45a commit b3523bc

File tree

6 files changed

+71
-229
lines changed

6 files changed

+71
-229
lines changed

‎src/vs/base/browser/ui/hover/hover.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,11 @@
137137
/** Hack to force underline to show **/
138138
border-bottom: 1px solid transparent;
139139
text-underline-position: under;
140+
color: var(--vscode-textLink-foreground);
141+
}
142+
143+
.monaco-hover .hover-contents a.code-link > span:hover {
144+
color: var(--vscode-textLink-activeForeground);
140145
}
141146

142147
/** Spans in markdown hovers need a margin-bottom to avoid looking cramped: https://github.com/microsoft/vscode/issues/101496 **/

‎src/vs/editor/contrib/hover/browser/markerHoverParticipant.ts

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,6 @@ import { ITextEditorOptions } from 'vs/platform/editor/common/editor';
2525
import { IMarker, IMarkerData, MarkerSeverity } from 'vs/platform/markers/common/markers';
2626
import { IOpenerService } from 'vs/platform/opener/common/opener';
2727
import { Progress } from 'vs/platform/progress/common/progress';
28-
import { textLinkActiveForeground, textLinkForeground } from 'vs/platform/theme/common/colorRegistry';
29-
import { registerThemingParticipant } from 'vs/platform/theme/common/themeService';
3028
import { ILanguageFeaturesService } from 'vs/editor/common/services/languageFeatures';
3129

3230
const $ = dom.$;
@@ -253,14 +251,3 @@ export class MarkerHoverParticipant implements IEditorHoverParticipant<MarkerHov
253251
});
254252
}
255253
}
256-
257-
registerThemingParticipant((theme, collector) => {
258-
const linkFg = theme.getColor(textLinkForeground);
259-
if (linkFg) {
260-
collector.addRule(`.monaco-hover .hover-contents a.code-link span { color: ${linkFg}; }`);
261-
}
262-
const activeLinkFg = theme.getColor(textLinkActiveForeground);
263-
if (activeLinkFg) {
264-
collector.addRule(`.monaco-hover .hover-contents a.code-link span:hover { color: ${activeLinkFg}; }`);
265-
}
266-
});

‎src/vs/editor/contrib/symbolIcons/browser/symbolIcons.css

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/*---------------------------------------------------------------------------------------------
2+
* Copyright (c) Microsoft Corporation. All rights reserved.
3+
* Licensed under the MIT License. See License.txt in the project root for license information.
4+
*--------------------------------------------------------------------------------------------*/
5+
6+
.codicon.codicon-symbol-array { color: var(--vscode-symbolIcon-arrayForeground); }
7+
.codicon.codicon-symbol-boolean { color: var(--vscode-symbolIcon-booleanForeground); }
8+
.codicon.codicon-symbol-class { color: var(--vscode-symbolIcon-classForeground); }
9+
.codicon.codicon-symbol-method { color: var(--vscode-symbolIcon-methodForeground); }
10+
.codicon.codicon-symbol-color { color: var(--vscode-symbolIcon-colorForeground); }
11+
.codicon.codicon-symbol-constant { color: var(--vscode-symbolIcon-constantForeground); }
12+
.codicon.codicon-symbol-constructor { color: var(--vscode-symbolIcon-constructorForeground); }
13+
.codicon.codicon-symbol-value,
14+
.codicon.codicon-symbol-enum { color: var(--vscode-symbolIcon-enumeratorForeground); }
15+
.codicon.codicon-symbol-enum-member { color: var(--vscode-symbolIcon-enumeratorMemberForeground); }
16+
.codicon.codicon-symbol-event { color: var(--vscode-symbolIcon-eventForeground); }
17+
.codicon.codicon-symbol-field { color: var(--vscode-symbolIcon-fieldForeground); }
18+
.codicon.codicon-symbol-file { color: var(--vscode-symbolIcon-fileForeground); }
19+
.codicon.codicon-symbol-folder { color: var(--vscode-symbolIcon-folderForeground); }
20+
.codicon.codicon-symbol-function { color: var(--vscode-symbolIcon-functionForeground); }
21+
.codicon.codicon-symbol-interface { color: var(--vscode-symbolIcon-interfaceForeground); }
22+
.codicon.codicon-symbol-key { color: var(--vscode-symbolIcon-keyForeground); }
23+
.codicon.codicon-symbol-keyword { color: var(--vscode-symbolIcon-keywordForeground); }
24+
.codicon.codicon-symbol-module { color: var(--vscode-symbolIcon-moduleForeground); }
25+
.codicon.codicon-symbol-namespace { color: var(--vscode-symbolIcon-namespaceForeground); }
26+
.codicon.codicon-symbol-null { color: var(--vscode-symbolIcon-nullForeground); }
27+
.codicon.codicon-symbol-number { color: var(--vscode-symbolIcon-numberForeground); }
28+
.codicon.codicon-symbol-object { color: var(--vscode-symbolIcon-objectForeground); }
29+
.codicon.codicon-symbol-operator { color: var(--vscode-symbolIcon-operatorForeground); }
30+
.codicon.codicon-symbol-package { color: var(--vscode-symbolIcon-packageForeground); }
31+
.codicon.codicon-symbol-property { color: var(--vscode-symbolIcon-propertyForeground); }
32+
.codicon.codicon-symbol-reference { color: var(--vscode-symbolIcon-referenceForeground); }
33+
.codicon.codicon-symbol-snippet { color: var(--vscode-symbolIcon-snippetForeground); }
34+
.codicon.codicon-symbol-string { color: var(--vscode-symbolIcon-stringForeground); }
35+
.codicon.codicon-symbol-struct { color: var(--vscode-symbolIcon-structForeground); }
36+
.codicon.codicon-symbol-text { color: var(--vscode-symbolIcon-textForeground); }
37+
.codicon.codicon-symbol-type-parameter { color: var(--vscode-typeParameterForeground); }
38+
.codicon.codicon-symbol-unit { color: var(--vscode-symbolIcon-unitForeground); }
39+
.codicon.codicon-symbol-variable { color: var(--vscode-symbolIcon-variableForeground); }

‎src/vs/editor/contrib/symbolIcons/browser/symbolIcons.ts

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

6-
import { Codicon } from 'vs/base/common/codicons';
6+
import 'vs/css!./symbolIcons';
77
import { localize } from 'vs/nls';
88
import { foreground, registerColor } from 'vs/platform/theme/common/colorRegistry';
9-
import { IColorTheme, ICssStyleCollector, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
109

1110
export const SYMBOL_ICON_ARRAY_FOREGROUND = registerColor('symbolIcon.arrayForeground', {
1211
dark: foreground,
@@ -238,172 +237,3 @@ export const SYMBOL_ICON_VARIABLE_FOREGROUND = registerColor('symbolIcon.variabl
238237
hcDark: '#75BEFF',
239238
hcLight: '#007ACC',
240239
}, localize('symbolIcon.variableForeground', 'The foreground color for variable symbols. These symbols appear in the outline, breadcrumb, and suggest widget.'));
241-
242-
registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
243-
244-
const symbolIconArrayColor = theme.getColor(SYMBOL_ICON_ARRAY_FOREGROUND);
245-
if (symbolIconArrayColor) {
246-
collector.addRule(`${Codicon.symbolArray.cssSelector} { color: ${symbolIconArrayColor}; }`);
247-
}
248-
249-
const symbolIconBooleanColor = theme.getColor(SYMBOL_ICON_BOOLEAN_FOREGROUND);
250-
if (symbolIconBooleanColor) {
251-
collector.addRule(`${Codicon.symbolBoolean.cssSelector} { color: ${symbolIconBooleanColor}; }`);
252-
}
253-
254-
const symbolIconClassColor = theme.getColor(SYMBOL_ICON_CLASS_FOREGROUND);
255-
if (symbolIconClassColor) {
256-
collector.addRule(`${Codicon.symbolClass.cssSelector} { color: ${symbolIconClassColor}; }`);
257-
}
258-
259-
const symbolIconMethodColor = theme.getColor(SYMBOL_ICON_METHOD_FOREGROUND);
260-
if (symbolIconMethodColor) {
261-
collector.addRule(`${Codicon.symbolMethod.cssSelector} { color: ${symbolIconMethodColor}; }`);
262-
}
263-
264-
const symbolIconColorColor = theme.getColor(SYMBOL_ICON_COLOR_FOREGROUND);
265-
if (symbolIconColorColor) {
266-
collector.addRule(`${Codicon.symbolColor.cssSelector} { color: ${symbolIconColorColor}; }`);
267-
}
268-
269-
const symbolIconConstantColor = theme.getColor(SYMBOL_ICON_CONSTANT_FOREGROUND);
270-
if (symbolIconConstantColor) {
271-
collector.addRule(`${Codicon.symbolConstant.cssSelector} { color: ${symbolIconConstantColor}; }`);
272-
}
273-
274-
const symbolIconConstructorColor = theme.getColor(SYMBOL_ICON_CONSTRUCTOR_FOREGROUND);
275-
if (symbolIconConstructorColor) {
276-
collector.addRule(`${Codicon.symbolConstructor.cssSelector} { color: ${symbolIconConstructorColor}; }`);
277-
}
278-
279-
const symbolIconEnumeratorColor = theme.getColor(SYMBOL_ICON_ENUMERATOR_FOREGROUND);
280-
if (symbolIconEnumeratorColor) {
281-
collector.addRule(`
282-
${Codicon.symbolValue.cssSelector},${Codicon.symbolEnum.cssSelector} { color: ${symbolIconEnumeratorColor}; }`);
283-
}
284-
285-
const symbolIconEnumeratorMemberColor = theme.getColor(SYMBOL_ICON_ENUMERATOR_MEMBER_FOREGROUND);
286-
if (symbolIconEnumeratorMemberColor) {
287-
collector.addRule(`${Codicon.symbolEnumMember.cssSelector} { color: ${symbolIconEnumeratorMemberColor}; }`);
288-
}
289-
290-
const symbolIconEventColor = theme.getColor(SYMBOL_ICON_EVENT_FOREGROUND);
291-
if (symbolIconEventColor) {
292-
collector.addRule(`${Codicon.symbolEvent.cssSelector} { color: ${symbolIconEventColor}; }`);
293-
}
294-
295-
const symbolIconFieldColor = theme.getColor(SYMBOL_ICON_FIELD_FOREGROUND);
296-
if (symbolIconFieldColor) {
297-
collector.addRule(`${Codicon.symbolField.cssSelector} { color: ${symbolIconFieldColor}; }`);
298-
}
299-
300-
const symbolIconFileColor = theme.getColor(SYMBOL_ICON_FILE_FOREGROUND);
301-
if (symbolIconFileColor) {
302-
collector.addRule(`${Codicon.symbolFile.cssSelector} { color: ${symbolIconFileColor}; }`);
303-
}
304-
305-
const symbolIconFolderColor = theme.getColor(SYMBOL_ICON_FOLDER_FOREGROUND);
306-
if (symbolIconFolderColor) {
307-
collector.addRule(`${Codicon.symbolFolder.cssSelector} { color: ${symbolIconFolderColor}; }`);
308-
}
309-
310-
const symbolIconFunctionColor = theme.getColor(SYMBOL_ICON_FUNCTION_FOREGROUND);
311-
if (symbolIconFunctionColor) {
312-
collector.addRule(`${Codicon.symbolFunction.cssSelector} { color: ${symbolIconFunctionColor}; }`);
313-
}
314-
315-
const symbolIconInterfaceColor = theme.getColor(SYMBOL_ICON_INTERFACE_FOREGROUND);
316-
if (symbolIconInterfaceColor) {
317-
collector.addRule(`${Codicon.symbolInterface.cssSelector} { color: ${symbolIconInterfaceColor}; }`);
318-
}
319-
320-
const symbolIconKeyColor = theme.getColor(SYMBOL_ICON_KEY_FOREGROUND);
321-
if (symbolIconKeyColor) {
322-
collector.addRule(`${Codicon.symbolKey.cssSelector} { color: ${symbolIconKeyColor}; }`);
323-
}
324-
325-
const symbolIconKeywordColor = theme.getColor(SYMBOL_ICON_KEYWORD_FOREGROUND);
326-
if (symbolIconKeywordColor) {
327-
collector.addRule(`${Codicon.symbolKeyword.cssSelector} { color: ${symbolIconKeywordColor}; }`);
328-
}
329-
330-
const symbolIconModuleColor = theme.getColor(SYMBOL_ICON_MODULE_FOREGROUND);
331-
if (symbolIconModuleColor) {
332-
collector.addRule(`${Codicon.symbolModule.cssSelector} { color: ${symbolIconModuleColor}; }`);
333-
}
334-
335-
const outlineNamespaceColor = theme.getColor(SYMBOL_ICON_NAMESPACE_FOREGROUND);
336-
if (outlineNamespaceColor) {
337-
collector.addRule(`${Codicon.symbolNamespace.cssSelector} { color: ${outlineNamespaceColor}; }`);
338-
}
339-
340-
const symbolIconNullColor = theme.getColor(SYMBOL_ICON_NULL_FOREGROUND);
341-
if (symbolIconNullColor) {
342-
collector.addRule(`${Codicon.symbolNull.cssSelector} { color: ${symbolIconNullColor}; }`);
343-
}
344-
345-
const symbolIconNumberColor = theme.getColor(SYMBOL_ICON_NUMBER_FOREGROUND);
346-
if (symbolIconNumberColor) {
347-
collector.addRule(`${Codicon.symbolNumber.cssSelector} { color: ${symbolIconNumberColor}; }`);
348-
}
349-
350-
const symbolIconObjectColor = theme.getColor(SYMBOL_ICON_OBJECT_FOREGROUND);
351-
if (symbolIconObjectColor) {
352-
collector.addRule(`${Codicon.symbolObject.cssSelector} { color: ${symbolIconObjectColor}; }`);
353-
}
354-
355-
const symbolIconOperatorColor = theme.getColor(SYMBOL_ICON_OPERATOR_FOREGROUND);
356-
if (symbolIconOperatorColor) {
357-
collector.addRule(`${Codicon.symbolOperator.cssSelector} { color: ${symbolIconOperatorColor}; }`);
358-
}
359-
360-
const symbolIconPackageColor = theme.getColor(SYMBOL_ICON_PACKAGE_FOREGROUND);
361-
if (symbolIconPackageColor) {
362-
collector.addRule(`${Codicon.symbolPackage.cssSelector} { color: ${symbolIconPackageColor}; }`);
363-
}
364-
365-
const symbolIconPropertyColor = theme.getColor(SYMBOL_ICON_PROPERTY_FOREGROUND);
366-
if (symbolIconPropertyColor) {
367-
collector.addRule(`${Codicon.symbolProperty.cssSelector} { color: ${symbolIconPropertyColor}; }`);
368-
}
369-
370-
const symbolIconReferenceColor = theme.getColor(SYMBOL_ICON_REFERENCE_FOREGROUND);
371-
if (symbolIconReferenceColor) {
372-
collector.addRule(`${Codicon.symbolReference.cssSelector} { color: ${symbolIconReferenceColor}; }`);
373-
}
374-
375-
const symbolIconSnippetColor = theme.getColor(SYMBOL_ICON_SNIPPET_FOREGROUND);
376-
if (symbolIconSnippetColor) {
377-
collector.addRule(`${Codicon.symbolSnippet.cssSelector} { color: ${symbolIconSnippetColor}; }`);
378-
}
379-
380-
const symbolIconStringColor = theme.getColor(SYMBOL_ICON_STRING_FOREGROUND);
381-
if (symbolIconStringColor) {
382-
collector.addRule(`${Codicon.symbolString.cssSelector} { color: ${symbolIconStringColor}; }`);
383-
}
384-
385-
const symbolIconStructColor = theme.getColor(SYMBOL_ICON_STRUCT_FOREGROUND);
386-
if (symbolIconStructColor) {
387-
collector.addRule(`${Codicon.symbolStruct.cssSelector} { color: ${symbolIconStructColor}; }`);
388-
}
389-
390-
const symbolIconTextColor = theme.getColor(SYMBOL_ICON_TEXT_FOREGROUND);
391-
if (symbolIconTextColor) {
392-
collector.addRule(`${Codicon.symbolText.cssSelector} { color: ${symbolIconTextColor}; }`);
393-
}
394-
395-
const symbolIconTypeParameterColor = theme.getColor(SYMBOL_ICON_TYPEPARAMETER_FOREGROUND);
396-
if (symbolIconTypeParameterColor) {
397-
collector.addRule(`${Codicon.symbolTypeParameter.cssSelector} { color: ${symbolIconTypeParameterColor}; }`);
398-
}
399-
400-
const symbolIconUnitColor = theme.getColor(SYMBOL_ICON_UNIT_FOREGROUND);
401-
if (symbolIconUnitColor) {
402-
collector.addRule(`${Codicon.symbolUnit.cssSelector} { color: ${symbolIconUnitColor}; }`);
403-
}
404-
405-
const symbolIconVariableColor = theme.getColor(SYMBOL_ICON_VARIABLE_FOREGROUND);
406-
if (symbolIconVariableColor) {
407-
collector.addRule(`${Codicon.symbolVariable.cssSelector} { color: ${symbolIconVariableColor}; }`);
408-
}
409-
});

‎src/vs/workbench/contrib/typeHierarchy/browser/media/typeHierarchy.css

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,16 @@
2525
height: 100%;
2626
}
2727

28+
.monaco-editor .type-hierarchy .tree {
29+
background-color: var(--vscode-peekViewResult-background);
30+
color: var(--vscode-peekViewResult-fileForeground);
31+
}
32+
33+
.monaco-editor .type-hierarchy .tree .monaco-list:focus .monaco-list-rows > .monaco-list-row.selected:not(.highlighted) {
34+
background-color: var(--vscode-peekViewResult-selectionBackground);
35+
color: var(--vscode-peekViewResult-selectionForeground) !important;
36+
}
37+
2838
.monaco-workbench .type-hierarchy .tree .typehierarchy-element {
2939
display: flex;
3040
flex: 1;
@@ -35,3 +45,18 @@
3545
.monaco-workbench .type-hierarchy .tree .typehierarchy-element .monaco-icon-label {
3646
padding-left: 4px;
3747
}
48+
49+
.monaco-editor .type-hierarchy .type-decoration {
50+
background-color: var(--vscode-peekViewEditor-matchHighlightBackground);
51+
border: 2px solid var(--vscode-peekViewEditor-matchHighlightBorder);
52+
box-sizing: border-box;
53+
}
54+
55+
.monaco-editor .type-hierarchy .editor .monaco-editor .monaco-editor-background,
56+
.monaco-editor .type-hierarchy .editor .monaco-editor .inputarea.ime-input {
57+
background-color: var(--vscode-peekViewEditor-background);
58+
}
59+
60+
.monaco-editor .type-hierarchy .editor .monaco-editor .margin {
61+
background-color: var(--vscode-peekViewEditorGutter-background);
62+
}

‎src/vs/workbench/contrib/typeHierarchy/browser/typeHierarchyPeek.ts

Lines changed: 1 addition & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
3030
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
3131
import { IWorkbenchAsyncDataTreeOptions, WorkbenchAsyncDataTree } from 'vs/platform/list/browser/listService';
3232
import { IStorageService, StorageScope, StorageTarget } from 'vs/platform/storage/common/storage';
33-
import { IColorTheme, IThemeService, registerThemingParticipant, themeColorFromId } from 'vs/platform/theme/common/themeService';
33+
import { IColorTheme, IThemeService, themeColorFromId } from 'vs/platform/theme/common/themeService';
3434
import * as typeHTree from 'vs/workbench/contrib/typeHierarchy/browser/typeHierarchyTree';
3535
import { TypeHierarchyDirection, TypeHierarchyModel } from 'vs/workbench/contrib/typeHierarchy/common/typeHierarchy';
3636
import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
@@ -421,47 +421,3 @@ export class TypeHierarchyTreePeekWidget extends peekView.PeekViewWidget {
421421
}
422422
}
423423
}
424-
425-
registerThemingParticipant((theme, collector) => {
426-
const referenceHighlightColor = theme.getColor(peekView.peekViewEditorMatchHighlight);
427-
if (referenceHighlightColor) {
428-
collector.addRule(`.monaco-editor .type-hierarchy .type-decoration { background-color: ${referenceHighlightColor}; }`);
429-
}
430-
const referenceHighlightBorder = theme.getColor(peekView.peekViewEditorMatchHighlightBorder);
431-
if (referenceHighlightBorder) {
432-
collector.addRule(`.monaco-editor .type-hierarchy .type-decoration { border: 2px solid ${referenceHighlightBorder}; box-sizing: border-box; }`);
433-
}
434-
const resultsBackground = theme.getColor(peekView.peekViewResultsBackground);
435-
if (resultsBackground) {
436-
collector.addRule(`.monaco-editor .type-hierarchy .tree { background-color: ${resultsBackground}; }`);
437-
}
438-
const resultsMatchForeground = theme.getColor(peekView.peekViewResultsFileForeground);
439-
if (resultsMatchForeground) {
440-
collector.addRule(`.monaco-editor .type-hierarchy .tree { color: ${resultsMatchForeground}; }`);
441-
}
442-
const resultsSelectedBackground = theme.getColor(peekView.peekViewResultsSelectionBackground);
443-
if (resultsSelectedBackground) {
444-
collector.addRule(`.monaco-editor .type-hierarchy .tree .monaco-list:focus .monaco-list-rows > .monaco-list-row.selected:not(.highlighted) { background-color: ${resultsSelectedBackground}; }`);
445-
}
446-
const resultsSelectedForeground = theme.getColor(peekView.peekViewResultsSelectionForeground);
447-
if (resultsSelectedForeground) {
448-
collector.addRule(`.monaco-editor .type-hierarchy .tree .monaco-list:focus .monaco-list-rows > .monaco-list-row.selected:not(.highlighted) { color: ${resultsSelectedForeground} !important; }`);
449-
}
450-
const editorBackground = theme.getColor(peekView.peekViewEditorBackground);
451-
if (editorBackground) {
452-
collector.addRule(
453-
`.monaco-editor .type-hierarchy .editor .monaco-editor .monaco-editor-background,` +
454-
`.monaco-editor .type-hierarchy .editor .monaco-editor .inputarea.ime-input {` +
455-
` background-color: ${editorBackground};` +
456-
`}`
457-
);
458-
}
459-
const editorGutterBackground = theme.getColor(peekView.peekViewEditorGutterBackground);
460-
if (editorGutterBackground) {
461-
collector.addRule(
462-
`.monaco-editor .type-hierarchy .editor .monaco-editor .margin {` +
463-
` background-color: ${editorGutterBackground};` +
464-
`}`
465-
);
466-
}
467-
});

0 commit comments

Comments
 (0)