Add icons for Markdown headers

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

@@ -73,3 +73,15 @@
 .monaco-workbench .codicon-colored.codicon.codicon-symbol-unit { color: var(--vscode-symbolIcon-unitForeground); }
 .monaco-editor .codicon.codicon-symbol-variable,
 .monaco-workbench .codicon-colored.codicon.codicon-symbol-variable { color: var(--vscode-symbolIcon-variableForeground); }
+.monaco-editor .codicon.codicon-symbol-header-one,
+.monaco-workbench .codicon-colored.codicon.codicon-symbol-header-one { color: var(--vscode-symbolIcon-headerOneForeground); }
+.monaco-editor .codicon.codicon-symbol-header-two,
+.monaco-workbench .codicon-colored.codicon.codicon-symbol-header-two { color: var(--vscode-symbolIcon-headerTwoForeground); }
+.monaco-editor .codicon.codicon-symbol-header-three,
+.monaco-workbench .codicon-colored.codicon.codicon-symbol-header-three { color: var(--vscode-symbolIcon-headerThreeForeground); }
+.monaco-editor .codicon.codicon-symbol-header-four,
+.monaco-workbench .codicon-colored.codicon.codicon-symbol-header-four { color: var(--vscode-symbolIcon-headerFourForeground); }
+.monaco-editor .codicon.codicon-symbol-header-five,
+.monaco-workbench .codicon-colored.codicon.codicon-symbol-header-five { color: var(--vscode-symbolIcon-headerFiveForeground); }
+.monaco-editor .codicon.codicon-symbol-header-six,
+.monaco-workbench .codicon-colored.codicon.codicon-symbol-header-six { color: var(--vscode-symbolIcon-headerSixForeground); }

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

@@ -122,3 +122,46 @@ export const SYMBOL_ICON_VARIABLE_FOREGROUND = registerColor('symbolIcon.variabl
 	hcDark: '#75BEFF',
 	hcLight: '#007ACC',
 }, localize('symbolIcon.variableForeground', 'The foreground color for variable symbols. These symbols appear in the outline, breadcrumb, and suggest widget.'));
+
+export const SYMBOL_ICON_HEADER_ONE_FOREGROUND = registerColor('symbolIcon.headerOneForeground', {
+	dark: '#D16D6A',
+	light: '#BB271A',
+	hcDark: '#D16D6A',
+	hcLight: '#BB271A'
+}, localize('symbolIcon.headerOneForeground', 'The foreground color for header level 1 symbols. These symbols appear in the outline, breadcrumb, and suggest widget.'));
+
+export const SYMBOL_ICON_HEADER_TWO_FOREGROUND = registerColor('symbolIcon.headerTwoForeground', {
+	dark: '#7CA7D8',
+	light: '#5084C1',
+	hcDark: '#7CA7D8',
+	hcLight: '#5084C1'
+}, localize('symbolIcon.headerTwoForeground', 'The foreground color for header level 2 symbols. These symbols appear in the outline, breadcrumb, and suggest widget.'));
+
+export const SYMBOL_ICON_HEADER_THREE_FOREGROUND = registerColor('symbolIcon.headerThreeForeground', {
+	dark: '#9DC384',
+	light: '#78A75A',
+	hcDark: '#9DC384',
+	hcLight: '#78A75A'
+}, localize('symbolIcon.headerThreeForeground', 'The foreground color for header level 3 symbols. These symbols appear in the outline, breadcrumb, and suggest widget.'));
+
+export const SYMBOL_ICON_HEADER_FOUR_FOREGROUND = registerColor('symbolIcon.headerFourForeground', {
+	dark: '#B87E9F',
+	light: '#9B5278',
+	hcDark: '#B87E9F',
+	hcLight: '#9B5278'
+}, localize('symbolIcon.headerFourForeground', 'The foreground color for header level 4 symbols. These symbols appear in the outline, breadcrumb, and suggest widget.'));
+
+export const SYMBOL_ICON_HEADER_FIVE_FOREGROUND = registerColor('symbolIcon.headerFiveForeground', {
+	dark: '#80A4AE',
+	light: '#54808C',
+	hcDark: '#80A4AE',
+	hcLight: '#54808C'
+}, localize('symbolIcon.headerFiveForeground', 'The foreground color for header level 5 symbols. These symbols appear in the outline, breadcrumb, and suggest widget.'));
+
+export const SYMBOL_ICON_HEADER_SIX_FOREGROUND = registerColor('symbolIcon.headerSixForeground', {
+	dark: '#F9DB78',
+	light: '#EAC452',
+	hcDark: '#F9DB78',
+	hcLight: '#EAC452'
+}, localize('symbolIcon.headerSixForeground', 'The foreground color for header level 6 symbols. These symbols appear in the outline, breadcrumb, and suggest widget.'));
+

src/vs/workbench/contrib/codeEditor/browser/outline/documentSymbolsOutline.ts

@@ -147,7 +147,7 @@ class DocumentSymbolsOutline implements IOutline<DocumentSymbolItem> {
 
 		this._breadcrumbsDataSource = new DocumentSymbolBreadcrumbsSource(_editor, textResourceConfigurationService);
 		const delegate = new DocumentSymbolVirtualDelegate();
-		const renderers = [new DocumentSymbolGroupRenderer(), instantiationService.createInstance(DocumentSymbolRenderer, true, target)];
+		const renderers = [new DocumentSymbolGroupRenderer(), instantiationService.createInstance(DocumentSymbolRenderer, true, target, () => this._editor.getModel()?.getLanguageId() ?? null)];
 		const treeDataSource: IDataSource<this, DocumentSymbolItem> = {
 			getChildren: (parent) => {
 				if (parent instanceof OutlineElement || parent instanceof OutlineGroup) {

src/vs/workbench/contrib/codeEditor/browser/outline/documentSymbolsTree.ts

@@ -30,6 +30,7 @@ import { listErrorForeground, listWarningForeground } from '../../../../../platf
 import { IThemeService } from '../../../../../platform/theme/common/themeService.js';
 import { fillEditorsDragData } from '../../../../browser/dnd.js';
 import { IOutlineComparator, OutlineConfigKeys, OutlineTarget } from '../../../../services/outline/browser/outline.js';
+import { getIconRegistry } from '../../../../../platform/theme/common/iconRegistry.js';
 import './documentSymbolsTree.css';
 
 export type DocumentSymbolItem = OutlineGroup | OutlineElement;
@@ -190,11 +191,15 @@ export class DocumentSymbolGroupRenderer implements ITreeRenderer<OutlineGroup,
 
 export class DocumentSymbolRenderer implements ITreeRenderer<OutlineElement, FuzzyScore, DocumentSymbolTemplate> {
 
+	private readonly _iconLevelMap = ['one', 'two', 'three', 'four', 'five', 'six'];
+	private readonly _iconExistsCache = new Map<string, boolean>();
+
 	readonly templateId: string = DocumentSymbolTemplate.id;
 
 	constructor(
 		private _renderMarker: boolean,
 		target: OutlineTarget,
+		private readonly _getLanguageId: () => string | null,
 		@IConfigurationService private readonly _configurationService: IConfigurationService,
 		@IThemeService private readonly _themeService: IThemeService,
 	) { }
@@ -219,9 +224,29 @@ export class DocumentSymbolRenderer implements ITreeRenderer<OutlineElement, Fuz
 			title: localize('title.template', "{0} ({1})", element.symbol.name, symbolKindNames[element.symbol.kind])
 		};
 		if (this._configurationService.getValue(OutlineConfigKeys.icons)) {
-			// add styles for the icons
 			template.iconClass.className = '';
-			template.iconClass.classList.add('outline-element-icon', 'inline', 'codicon-colored', ...ThemeIcon.asClassNameArray(SymbolKinds.toIcon(element.symbol.kind)));
+			template.iconClass.classList.add('outline-element-icon', 'inline', 'codicon-colored');
+
+			// feature: depth-based leveled icons. additional languages may opt into leveled icons via this branch.
+			const kindIcon = SymbolKinds.toIcon(element.symbol.kind);
+			let icon: ThemeIcon = kindIcon;
+			const languageId = this._getLanguageId();
+			if ((languageId === 'markdown' && element.symbol.kind === SymbolKind.String)) {
+				const depth = node.depth;
+				const level = Math.min(Math.max(depth, 1), this._iconLevelMap.length);
+				let iconId;
+				if (languageId === 'markdown') {
+					// patch: markdown (avoids modifications to the language server)
+					iconId = `symbol-header-${this._iconLevelMap[level - 1]}`;
+				} else {
+					iconId = `${kindIcon.id}-${this._iconLevelMap[level - 1]}`;
+				}
+				if (this._doesIconExist(iconId)) {
+					icon = ThemeIcon.fromId(iconId);
+				}
+			}
+
+			template.iconClass.classList.add(...ThemeIcon.asClassNameArray(icon));
 		}
 		if (element.symbol.tags.indexOf(SymbolTag.Deprecated) >= 0) {
 			extraClasses.push(`deprecated`);
@@ -280,6 +305,18 @@ export class DocumentSymbolRenderer implements ITreeRenderer<OutlineElement, Fuz
 		}
 	}
 
+	private _doesIconExist(iconId: string): boolean {
+		const cached = this._iconExistsCache.get(iconId);
+		if (cached !== undefined) {
+			return cached;
+		}
+		const exists = !!getIconRegistry().getIcon(iconId);
+		if (exists) {
+			this._iconExistsCache.set(iconId, true);
+		}
+		return exists;
+	}
+
 	disposeTemplate(_template: DocumentSymbolTemplate): void {
 		_template.iconLabel.dispose();
 	}