Skip to content

Commit 17db07b

Browse files
author
Miguel Solorio
committed
Adopt icon font in problems panel and error peek view
1 parent 9a8f867 commit 17db07b

6 files changed

Lines changed: 60 additions & 66 deletions

File tree

‎src/vs/editor/contrib/gotoError/gotoErrorWidget.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -283,7 +283,7 @@ export class MarkerNavigationWidget extends PeekViewWidget {
283283
: nls.localize('change', "{0} of {1} problem", markerIdx, markerCount);
284284
this.setTitle(basename(model.uri), detail);
285285
}
286-
this._icon.className = SeverityIcon.className(MarkerSeverity.toSeverity(this._severity));
286+
this._icon.className = 'codicon ' + SeverityIcon.className(MarkerSeverity.toSeverity(this._severity));
287287

288288
this.editor.revealPositionInCenter(position, ScrollType.Smooth);
289289
}

‎src/vs/platform/severityIcon/common/severityIcon.ts‎

Lines changed: 37 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -4,70 +4,55 @@
44
*--------------------------------------------------------------------------------------------*/
55

66
import Severity from 'vs/base/common/severity';
7-
import { registerThemingParticipant, ITheme, LIGHT } from 'vs/platform/theme/common/themeService';
8-
import { Color } from 'vs/base/common/color';
9-
10-
const errorStart = encodeURIComponent(`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.58318 2.02842C9.96435 2.16331 11.2561 2.77279 12.2383 3.75307C13.3643 4.87923 13.9978 6.40584 14 7.99829C14.0004 9.38617 13.5196 10.7313 12.6396 11.8045C11.7595 12.8778 10.5345 13.6127 9.17333 13.8841C7.81215 14.1556 6.39895 13.9467 5.1745 13.2931C3.95005 12.6394 2.99008 11.5815 2.45814 10.2995C1.92619 9.0175 1.85517 7.59072 2.25717 6.26222C2.65917 4.93373 3.50933 3.7857 4.66282 3.0137C5.8163 2.24171 7.20177 1.89351 8.58318 2.02842ZM8.68038 1.03316C10.292 1.19055 11.7993 1.90184 12.9453 3.04585C14.2587 4.35938 14.9976 6.14013 15 7.99764C15.0005 9.61695 14.4396 11.1864 13.4129 12.4385C12.3861 13.6907 10.9569 14.5482 9.36889 14.8648C7.78084 15.1815 6.13211 14.9378 4.70359 14.1752C3.27506 13.4127 2.1551 12.1784 1.53449 10.6828C0.913887 9.18708 0.831027 7.52251 1.30003 5.97259C1.76903 4.42268 2.76089 3.08331 4.10662 2.18265C5.45236 1.28199 7.06873 0.875761 8.68038 1.03316ZM5.52498 5L8.00004 7.47506L10.4751 5L11.1822 5.70711L8.70714 8.18217L11.1818 10.6569L10.4747 11.364L8.00004 8.88927L5.52535 11.364L4.81824 10.6569L7.29293 8.18217L4.81787 5.70711L5.52498 5Z" fill="`);
11-
const errorEnd = encodeURIComponent(`"/></svg>`);
12-
const errorDarkStart = encodeURIComponent(`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.58318 2.02842C9.96435 2.16331 11.2561 2.77279 12.2383 3.75307C13.3643 4.87923 13.9978 6.40584 14 7.99829C14.0004 9.38617 13.5196 10.7313 12.6396 11.8045C11.7595 12.8778 10.5345 13.6127 9.17333 13.8841C7.81215 14.1556 6.39895 13.9467 5.1745 13.2931C3.95005 12.6394 2.99008 11.5815 2.45814 10.2995C1.92619 9.0175 1.85517 7.59072 2.25717 6.26222C2.65917 4.93373 3.50933 3.7857 4.66282 3.0137C5.8163 2.24171 7.20177 1.89351 8.58318 2.02842ZM8.68038 1.03316C10.292 1.19055 11.7993 1.90184 12.9453 3.04585C14.2587 4.35938 14.9976 6.14013 15 7.99764C15.0005 9.61695 14.4396 11.1864 13.4129 12.4385C12.3861 13.6907 10.9569 14.5482 9.36889 14.8648C7.78084 15.1815 6.13211 14.9378 4.70359 14.1752C3.27506 13.4127 2.1551 12.1784 1.53449 10.6828C0.913887 9.18708 0.831027 7.52251 1.30003 5.97259C1.76903 4.42268 2.76089 3.08331 4.10662 2.18265C5.45236 1.28199 7.06873 0.875761 8.68038 1.03316ZM5.52498 5L8.00004 7.47506L10.4751 5L11.1822 5.70711L8.70714 8.18217L11.1818 10.6569L10.4747 11.364L8.00004 8.88927L5.52535 11.364L4.81824 10.6569L7.29293 8.18217L4.81787 5.70711L5.52498 5Z" fill="`);
13-
const errorDarkEnd = encodeURIComponent(`"/></svg>`);
14-
15-
const warningStart = encodeURIComponent(`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.12 13.9725L15 12.5L9.37927 2H7.61924L1.9985 12.5L2.87852 13.9725H14.12ZM2.87852 12.9725L8.49925 2.47249L14.12 12.9725H2.87852ZM7.98952 6H8.98802V10H7.98952V6ZM7.98952 11H8.98802V12H7.98952V11Z" fill="`);
16-
const warningEnd = encodeURIComponent(`"/></svg>`);
17-
const warningDarkStart = encodeURIComponent(`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.12 13.9725L15 12.5L9.37927 2H7.61924L1.9985 12.5L2.87852 13.9725H14.12ZM2.87852 12.9725L8.49925 2.47249L14.12 12.9725H2.87852ZM7.98952 6H8.98802V10H7.98952V6ZM7.98952 11H8.98802V12H7.98952V11Z" fill="`);
18-
const warningDarkEnd = encodeURIComponent(`"/></svg>`);
19-
20-
const infoStart = encodeURIComponent(`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 7.5C3 4.46243 5.46243 2 8.5 2C11.5376 2 14 4.46243 14 7.5C14 10.5376 11.5376 13 8.5 13C5.46243 13 3 10.5376 3 7.5ZM2 7.5C2 3.91015 4.91015 1 8.5 1C12.0899 1 15 3.91015 15 7.5C15 11.0899 12.0899 14 8.5 14C4.91015 14 2 11.0899 2 7.5ZM8 4V5H9V4H8ZM8 6L8 10H9L9 6H8Z" fill="`);
21-
const infoEnd = encodeURIComponent(`"/></svg>`);
22-
const infoDarkStart = encodeURIComponent(`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 7.5C3 4.46243 5.46243 2 8.5 2C11.5376 2 14 4.46243 14 7.5C14 10.5376 11.5376 13 8.5 13C5.46243 13 3 10.5376 3 7.5ZM2 7.5C2 3.91015 4.91015 1 8.5 1C12.0899 1 15 3.91015 15 7.5C15 11.0899 12.0899 14 8.5 14C4.91015 14 2 11.0899 2 7.5ZM8 4V5H9V4H8ZM8 6L8 10H9L9 6H8Z" fill="`);
23-
const infoDarkEnd = encodeURIComponent(`"/></svg>`);
7+
import { registerThemingParticipant } from 'vs/platform/theme/common/themeService';
8+
import { problemsErrorIconForeground, problemsInfoIconForeground, problemsWarningIconForeground } from 'vs/platform/theme/common/colorRegistry';
249

2510
export namespace SeverityIcon {
2611

27-
export function getSVGData(severity: Severity, theme: ITheme): string {
28-
switch (severity) {
29-
case Severity.Ignore:
30-
const ignoreColor = theme.type === LIGHT ? Color.fromHex('#75BEFF') : Color.fromHex('#007ACC');
31-
return theme.type === LIGHT ? infoStart + encodeURIComponent(ignoreColor.toString()) + infoEnd
32-
: infoDarkStart + encodeURIComponent(ignoreColor.toString()) + infoDarkEnd;
33-
case Severity.Info:
34-
const infoColor = theme.type === LIGHT ? Color.fromHex('#007ACC') : Color.fromHex('#75BEFF');
35-
return theme.type === LIGHT ? infoStart + encodeURIComponent(infoColor.toString()) + infoEnd
36-
: infoDarkStart + encodeURIComponent(infoColor.toString()) + infoDarkEnd;
37-
case Severity.Warning:
38-
const warningColor = theme.type === LIGHT ? Color.fromHex('#DDB100') : Color.fromHex('#fc0');
39-
return theme.type === LIGHT ? warningStart + encodeURIComponent(warningColor.toString()) + warningEnd
40-
: warningDarkStart + encodeURIComponent(warningColor.toString()) + warningDarkEnd;
41-
case Severity.Error:
42-
const errorColor = theme.type === LIGHT ? Color.fromHex('#A1260D') : Color.fromHex('#F48771');
43-
return theme.type === LIGHT ? errorStart + encodeURIComponent(errorColor.toString()) + errorEnd
44-
: errorDarkStart + encodeURIComponent(errorColor.toString()) + errorDarkEnd;
45-
}
46-
return '';
47-
}
48-
4912
export function className(severity: Severity): string {
5013
switch (severity) {
5114
case Severity.Ignore:
52-
return 'severity-icon severity-ignore';
15+
return 'severity-ignore codicon-info';
5316
case Severity.Info:
54-
return 'severity-icon severity-info';
17+
return 'codicon-info';
5518
case Severity.Warning:
56-
return 'severity-icon severity-warning';
19+
return 'codicon-warning';
5720
case Severity.Error:
58-
return 'severity-icon severity-error';
21+
return 'codicon-error';
5922
}
6023
return '';
6124
}
6225
}
6326

64-
function getCSSRule(severity: Severity, theme: ITheme): string {
65-
return `.${SeverityIcon.className(severity).split(' ').join('.')} { background: url("data:image/svg+xml,${SeverityIcon.getSVGData(severity, theme)}") center center no-repeat; height: 16px; width: 16px; }`;
66-
}
27+
registerThemingParticipant((thme, collector) => {
6728

68-
registerThemingParticipant((theme, collector) => {
69-
collector.addRule(getCSSRule(Severity.Error, theme));
70-
collector.addRule(getCSSRule(Severity.Warning, theme));
71-
collector.addRule(getCSSRule(Severity.Info, theme));
72-
collector.addRule(getCSSRule(Severity.Ignore, theme));
73-
});
29+
const errorIconForeground = theme.getColor(problemsErrorIconForeground);
30+
if (errorIconForeground) {
31+
collector.addRule(`
32+
.monaco-workbench .zone-widget .codicon-error,
33+
.monaco-workbench .markers-panel .marker-icon.codicon-error {
34+
color: ${errorIconForeground};
35+
}
36+
`);
37+
}
38+
39+
const warningIconForeground = theme.getColor(problemsWarningIconForeground);
40+
if (errorIconForeground) {
41+
collector.addRule(`
42+
.monaco-workbench .zone-widget .codicon-warning,
43+
.monaco-workbench .markers-panel .marker-icon.codicon-warning {
44+
color: ${warningIconForeground};
45+
}
46+
`);
47+
}
48+
49+
const infoIconForeground = theme.getColor(problemsInfoIconForeground);
50+
if (errorIconForeground) {
51+
collector.addRule(`
52+
.monaco-workbench .zone-widget .codicon-info,
53+
.monaco-workbench .markers-panel .marker-icon.codicon-info {
54+
color: ${infoIconForeground};
55+
}
56+
`);
57+
}
58+
});

‎src/vs/platform/theme/common/colorRegistry.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -406,6 +406,9 @@ export const overviewRulerSelectionHighlightForeground = registerColor('editorOv
406406
export const minimapFindMatch = registerColor('minimap.findMatchHighlight', { light: '#d18616', dark: '#d18616', hc: '#AB5A00' }, nls.localize('minimapFindMatchHighlight', 'Minimap marker color for find matches.'), true);
407407
export const minimapSelection = registerColor('minimap.selectionHighlight', { light: '#ADD6FF', dark: '#264F78', hc: '#ffffff' }, nls.localize('minimapSelectionHighlight', 'Minimap marker color for the editor selection.'), true);
408408

409+
export const problemsErrorIconForeground = registerColor('problemsErrorIcon.foreground', { dark: editorErrorForeground, light: editorErrorForeground, hc: editorErrorForeground }, nls.localize('problemsErrorIconForeground', "The color used for the problems error icon."));
410+
export const problemsWarningIconForeground = registerColor('problemsWarningIcon.foreground', { dark: editorWarningForeground, light: editorWarningForeground, hc: editorWarningForeground }, nls.localize('problemsWarningIconForeground', "The color used for the problems warning icon."));
411+
export const problemsInfoIconForeground = registerColor('problemsInfoIcon.foreground', { dark: editorInfoForeground, light: editorInfoForeground, hc: editorInfoForeground }, nls.localize('problemsInfoIconForeground', "The color used for the problems info icon."));
409412

410413
// ----- color functions
411414

‎src/vs/workbench/common/theme.ts‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
*--------------------------------------------------------------------------------------------*/
55

66
import * as nls from 'vs/nls';
7-
import { registerColor, editorBackground, contrastBorder, transparent, editorWidgetBackground, textLinkForeground, lighten, darken, focusBorder, activeContrastBorder, editorWidgetForeground } from 'vs/platform/theme/common/colorRegistry';
7+
import { registerColor, editorBackground, contrastBorder, transparent, editorWidgetBackground, textLinkForeground, lighten, darken, focusBorder, activeContrastBorder, editorWidgetForeground, editorErrorForeground, editorWarningForeground, editorInfoForeground } from 'vs/platform/theme/common/colorRegistry';
88
import { Disposable } from 'vs/base/common/lifecycle';
99
import { IThemeService, ITheme } from 'vs/platform/theme/common/themeService';
1010
import { Color } from 'vs/base/common/color';
@@ -560,21 +560,21 @@ export const NOTIFICATIONS_BORDER = registerColor('notifications.border', {
560560
}, nls.localize('notificationsBorder', "Notifications border color separating from other notifications in the notifications center. Notifications slide in from the bottom right of the window."));
561561

562562
export const NOTIFICATIONS_ERROR_ICON_FOREGROUND = registerColor('notificationsErrorIcon.foreground', {
563-
dark: '#F48771',
564-
light: '#A1260D',
565-
hc: '#F48771'
563+
dark: editorErrorForeground,
564+
light: editorErrorForeground,
565+
hc: editorErrorForeground
566566
}, nls.localize('notificationsErrorIconForeground', "The color used for the notification error icon."));
567567

568568
export const NOTIFICATIONS_WARNING_ICON_FOREGROUND = registerColor('notificationsWarningIcon.foreground', {
569-
dark: '#FFCC00',
570-
light: '#DDB100',
571-
hc: '#FFCC00'
569+
dark: editorWarningForeground,
570+
light: editorWarningForeground,
571+
hc: editorWarningForeground
572572
}, nls.localize('notificationsWarningIconForeground', "The color used for the notification warning icon."));
573573

574574
export const NOTIFICATIONS_INFO_ICON_FOREGROUND = registerColor('notificationsInfoIcon.foreground', {
575-
dark: '#75BEFF',
576-
light: '#007ACC',
577-
hc: '#75BEFF'
575+
dark: editorInfoForeground,
576+
light: editorInfoForeground,
577+
hc: editorInfoForeground
578578
}, nls.localize('notificationsInfoIconForeground', "The color used for the notification info icon."));
579579

580580
/**

‎src/vs/workbench/contrib/markers/browser/markersTreeViewer.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -267,7 +267,7 @@ class MarkerWidget extends Disposable {
267267
this.disposables.clear();
268268
dom.clearNode(this.messageAndDetailsContainer);
269269

270-
this.icon.className = `marker-icon ${SeverityIcon.className(MarkerSeverity.toSeverity(element.marker.severity))}`;
270+
this.icon.className = `marker-icon codicon ${SeverityIcon.className(MarkerSeverity.toSeverity(element.marker.severity))}`;
271271
this.renderQuickfixActionbar(element);
272272
this.renderMultilineActionbar(element);
273273

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -132,9 +132,15 @@
132132
margin-left: 6px;
133133
}
134134

135-
.markers-panel .monaco-tl-contents .marker-icon,
136-
.markers-panel .monaco-tl-contents .actions .action-item {
135+
.markers-panel .monaco-tl-contents .marker-icon {
137136
margin-right: 6px;
137+
display: flex;
138+
align-items: center;
139+
justify-content: center;
140+
}
141+
142+
.markers-panel .monaco-tl-contents .actions .action-item {
143+
margin-right: 2px;
138144
}
139145

140146
.markers-panel .markers-panel-container .tree-container .monaco-tl-contents .marker-source,

0 commit comments

Comments
 (0)