Merge pull request #84771 from microsoft/misolori/icon-font-breakpoints

Adopt icon font in debug breakpoints and toolbar

src/vs/base/browser/ui/codiconLabel/codicon/codicon.css

@@ -5,7 +5,7 @@
 
 @font-face {
 	font-family: "codicon";
-	src: url("./codicon.ttf?72bd9e6bbf1e48287bcb9a9e4babeb28") format("truetype");
+	src: url("./codicon.ttf?b035097bd976825411d2c57142be0530") format("truetype");
 }
 
 .codicon[class*='codicon-'] {
@@ -69,6 +69,9 @@
 .codicon-eye-watch:before { content: "\ea70" }
 .codicon-circle-filled:before { content: "\ea71" }
 .codicon-primitive-dot:before { content: "\ea71" }
+.codicon-debug-breakpoint:before { content: "\ea71" }
+.codicon-debug-breakpoint-disabled:before { content: "\ea71" }
+.codicon-debug-hint:before { content: "\ea71" }
 .codicon-primitive-square:before { content: "\ea72" }
 .codicon-edit:before { content: "\ea73" }
 .codicon-pencil:before { content: "\ea73" }
@@ -162,12 +165,15 @@
 .codicon-bold:before { content: "\eaa3" }
 .codicon-book:before { content: "\eaa4" }
 .codicon-bookmark:before { content: "\eaa5" }
-.codicon-breakpoint-conditional-unverified:before { content: "\eaa6" }
-.codicon-breakpoint-conditional:before { content: "\eaa7" }
-.codicon-breakpoint-data-unverified:before { content: "\eaa8" }
-.codicon-breakpoint-data:before { content: "\eaa9" }
-.codicon-breakpoint-log-unverified:before { content: "\eaaa" }
-.codicon-breakpoint-log:before { content: "\eaab" }
+.codicon-debug-breakpoint-conditional-unverified:before { content: "\eaa6" }
+.codicon-debug-breakpoint-conditional:before { content: "\eaa7" }
+.codicon-debug-breakpoint-conditional-disabled:before { content: "\eaa7" }
+.codicon-debug-breakpoint-data-unverified:before { content: "\eaa8" }
+.codicon-debug-breakpoint-data:before { content: "\eaa9" }
+.codicon-debug-breakpoint-data-disabled:before { content: "\eaa9" }
+.codicon-debug-breakpoint-log-unverified:before { content: "\eaaa" }
+.codicon-debug-breakpoint-log:before { content: "\eaab" }
+.codicon-debug-breakpoint-log-disabled:before { content: "\eaab" }
 .codicon-briefcase:before { content: "\eaac" }
 .codicon-broadcast:before { content: "\eaad" }
 .codicon-browser:before { content: "\eaae" }
@@ -185,6 +191,7 @@
 .codicon-chrome-minimize:before { content: "\eaba" }
 .codicon-chrome-restore:before { content: "\eabb" }
 .codicon-circle-outline:before { content: "\eabc" }
+.codicon-debug-breakpoint-unverified:before { content: "\eabc" }
 .codicon-circle-slash:before { content: "\eabd" }
 .codicon-circuit-board:before { content: "\eabe" }
 .codicon-clear-all:before { content: "\eabf" }
@@ -198,8 +205,6 @@
 .codicon-comment-discussion:before { content: "\eac7" }
 .codicon-compare-changes:before { content: "\eac8" }
 .codicon-credit-card:before { content: "\eac9" }
-.codicon-current-and-breakpoint:before { content: "\eaca" }
-.codicon-current:before { content: "\eacb" }
 .codicon-dash:before { content: "\eacc" }
 .codicon-dashboard:before { content: "\eacd" }
 .codicon-database:before { content: "\eace" }
@@ -387,3 +392,12 @@
 .codicon-list-selection:before { content: "\eb85" }
 .codicon-selection:before { content: "\eb85" }
 .codicon-list-tree:before { content: "\eb86" }
+.codicon-debug-breakpoint-function-unverified:before { content: "\eb87" }
+.codicon-debug-breakpoint-function:before { content: "\eb88" }
+.codicon-debug-breakpoint-function-disabled:before { content: "\eb88" }
+.codicon-debug-breakpoint-stackframe-active:before { content: "\eb89" }
+.codicon-debug-breakpoint-stackframe-dot:before { content: "\eb8a" }
+.codicon-debug-breakpoint-stackframe:before { content: "\eb8b" }
+.codicon-debug-breakpoint-stackframe-focused:before { content: "\eb8b" }
+.codicon-debug-breakpoint-unsupported:before { content: "\eb8c" }
+.codicon-debug-step-back:before { content: "\f101" }

src/vs/code/electron-main/window.ts

@@ -1089,7 +1089,7 @@ export class CodeWindow extends Disposable implements ICodeWindow {
 	private createTouchBarGroupSegments(items: ISerializableCommandAction[] = []): ITouchBarSegment[] {
 		const segments: ITouchBarSegment[] = items.map(item => {
 			let icon: NativeImage | undefined;
-			if (item.iconLocation && item.iconLocation.dark.scheme === 'file') {
+			if (item.iconLocation && item.iconLocation?.dark?.scheme === 'file') {
 				icon = nativeImage.createFromPath(URI.revive(item.iconLocation.dark).fsPath);
 				if (icon.isEmpty()) {
 					icon = undefined;

src/vs/editor/browser/viewParts/glyphMargin/glyphMargin.ts

@@ -177,7 +177,7 @@ export class GlyphMarginOverlay extends DedupOverlay {
 				output[lineIndex] = '';
 			} else {
 				output[lineIndex] = (
-					'<div class="cgmr '
+					'<div class="cgmr codicon '
 					+ classNames.join(' ')
 					+ common
 				);

src/vs/platform/actions/browser/menuEntryActionViewItem.ts

@@ -236,28 +236,52 @@ export class MenuEntryActionViewItem extends ActionViewItem {
 	_updateItemClass(item: ICommandAction): void {
 		this._itemClassDispose.value = undefined;
 
-		if (item.iconLocation) {
-			let iconClass: string;
-
-			const iconPathMapKey = item.iconLocation.dark.toString();
-
-			if (MenuEntryActionViewItem.ICON_PATH_TO_CSS_RULES.has(iconPathMapKey)) {
-				iconClass = MenuEntryActionViewItem.ICON_PATH_TO_CSS_RULES.get(iconPathMapKey)!;
-			} else {
-				iconClass = ids.nextId();
-				createCSSRule(`.icon.${iconClass}`, `background-image: ${asCSSUrl(item.iconLocation.light || item.iconLocation.dark)}`);
-				createCSSRule(`.vs-dark .icon.${iconClass}, .hc-black .icon.${iconClass}`, `background-image: ${asCSSUrl(item.iconLocation.dark)}`);
-				MenuEntryActionViewItem.ICON_PATH_TO_CSS_RULES.set(iconPathMapKey, iconClass);
-			}
+		// icon class
+		if (item.iconClassName) {
+			let iconClass = item.iconClassName;
 
 			if (this.label) {
-				addClasses(this.label, 'icon', iconClass);
+				addClasses(this.label, 'codicon', iconClass);
 				this._itemClassDispose.value = toDisposable(() => {
 					if (this.label) {
-						removeClasses(this.label, 'icon', iconClass);
+						removeClasses(this.label, 'codicon', iconClass);
 					}
 				});
 			}
+
+		}
+
+		// icon path
+		else if (item.iconLocation) {
+			let iconClass: string;
+
+			if (item.iconLocation?.dark?.scheme) {
+
+				const iconPathMapKey = item.iconLocation.dark.toString();
+
+				if (MenuEntryActionViewItem.ICON_PATH_TO_CSS_RULES.has(iconPathMapKey)) {
+					iconClass = MenuEntryActionViewItem.ICON_PATH_TO_CSS_RULES.get(iconPathMapKey)!;
+				} else {
+					iconClass = ids.nextId();
+					createCSSRule(`.icon.${iconClass}`, `background-image: ${asCSSUrl(item.iconLocation.light || item.iconLocation.dark)}`);
+					createCSSRule(`.vs-dark .icon.${iconClass}, .hc-black .icon.${iconClass}`, `background-image: ${asCSSUrl(item.iconLocation.dark)}`);
+					MenuEntryActionViewItem.ICON_PATH_TO_CSS_RULES.set(iconPathMapKey, iconClass);
+				}
+
+				if (this.label) {
+
+					addClasses(this.label, 'icon', iconClass);
+					this._itemClassDispose.value = toDisposable(() => {
+						if (this.label) {
+							removeClasses(this.label, 'icon', iconClass);
+						}
+					});
+				}
+
+			}
+
+
+
 		}
 	}
 }

src/vs/platform/actions/common/actions.ts

@@ -22,7 +22,8 @@ export interface ICommandAction {
 	id: string;
 	title: string | ILocalizedString;
 	category?: string | ILocalizedString;
-	iconLocation?: { dark: URI; light?: URI; };
+	iconClassName?: string;
+	iconLocation?: { dark?: URI; light?: URI; };
 	precondition?: ContextKeyExpr;
 	toggled?: ContextKeyExpr;
 }

src/vs/workbench/contrib/debug/browser/breakpointEditorContribution.ts

@@ -43,7 +43,7 @@ interface IBreakpointDecoration {
 }
 
 const breakpointHelperDecoration: IModelDecorationOptions = {
-	glyphMarginClassName: 'debug-breakpoint-hint',
+	glyphMarginClassName: 'codicon-debug-hint',
 	stickiness: TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges
 };
 
@@ -91,7 +91,7 @@ function getBreakpointDecorationOptions(model: ITextModel, breakpoint: IBreakpoi
 	}
 
 	return {
-		glyphMarginClassName: className,
+		glyphMarginClassName: `${className}`,
 		glyphMarginHoverMessage,
 		stickiness: TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges,
 		beforeContentClassName: breakpoint.column ? `debug-breakpoint-placeholder` : undefined,
@@ -344,7 +344,7 @@ class BreakpointEditorContribution implements IBreakpointEditorContribution {
 		const decorations = this.editor.getLineDecorations(line);
 		if (decorations) {
 			for (const { options } of decorations) {
-				if (options.glyphMarginClassName && options.glyphMarginClassName.indexOf('debug') === -1) {
+				if (options.glyphMarginClassName && options.glyphMarginClassName.indexOf('codicon-') === -1) {
 					return false;
 				}
 			}
@@ -422,7 +422,7 @@ class BreakpointEditorContribution implements IBreakpointEditorContribution {
 			// Candidate decoration has a breakpoint attached when a breakpoint is already at that location and we did not yet set a decoration there
 			// In practice this happens for the first breakpoint that was set on a line
 			// We could have also rendered this first decoration as part of desiredBreakpointDecorations however at that moment we have no location information
-			const cssClass = candidate.breakpoint ? getBreakpointMessageAndClassName(this.debugService, candidate.breakpoint).className : 'debug-breakpoint-disabled';
+			const cssClass = candidate.breakpoint ? getBreakpointMessageAndClassName(this.debugService, candidate.breakpoint).className : 'codicon-debug-breakpoint-disabled';
 			const contextMenuActions = () => this.getContextMenuActions(candidate.breakpoint ? [candidate.breakpoint] : [], activeCodeEditor.getModel().uri, candidate.range.startLineNumber, candidate.range.startColumn);
 			const inlineWidget = new InlineBreakpointWidget(activeCodeEditor, decorationId, cssClass, candidate.breakpoint, this.debugService, this.contextMenuService, contextMenuActions);
 
@@ -543,6 +543,7 @@ class InlineBreakpointWidget implements IContentWidget, IDisposable {
 
 	private create(cssClass: string | null | undefined): void {
 		this.domNode = $('.inline-breakpoint-widget');
+		this.domNode.classList.add('codicon');
 		if (cssClass) {
 			this.domNode.classList.add(cssClass);
 		}

src/vs/workbench/contrib/debug/browser/breakpointsView.ts

@@ -346,7 +346,7 @@ class BreakpointsRenderer implements IListRenderer<IBreakpoint, IBreakpointTempl
 		data.checkbox.checked = breakpoint.enabled;
 
 		const { message, className } = getBreakpointMessageAndClassName(this.debugService, breakpoint);
-		data.icon.className = className + ' icon';
+		data.icon.className = `codicon ${className}`;
 		data.breakpoint.title = breakpoint.message || message || '';
 
 		const debugActive = this.debugService.state === State.Running || this.debugService.state === State.Stopped;
@@ -441,7 +441,7 @@ class FunctionBreakpointsRenderer implements IListRenderer<FunctionBreakpoint, I
 		data.context = functionBreakpoint;
 		data.name.textContent = functionBreakpoint.name;
 		const { className, message } = getBreakpointMessageAndClassName(this.debugService, functionBreakpoint);
-		data.icon.className = className + ' icon';
+		data.icon.className = `codicon ${className}`;
 		data.icon.title = message ? message : '';
 		data.checkbox.checked = functionBreakpoint.enabled;
 		data.breakpoint.title = message ? message : '';
@@ -496,7 +496,7 @@ class DataBreakpointsRenderer implements IListRenderer<DataBreakpoint, IBaseBrea
 		data.context = dataBreakpoint;
 		data.name.textContent = dataBreakpoint.label;
 		const { className, message } = getBreakpointMessageAndClassName(this.debugService, dataBreakpoint);
-		data.icon.className = className + ' icon';
+		data.icon.className = `codicon ${className}`;
 		data.icon.title = message ? message : '';
 		data.checkbox.checked = dataBreakpoint.enabled;
 		data.breakpoint.title = message ? message : '';
@@ -587,7 +587,7 @@ class FunctionBreakpointInputRenderer implements IListRenderer<IFunctionBreakpoi
 		data.reactedOnEvent = false;
 		const { className, message } = getBreakpointMessageAndClassName(this.debugService, functionBreakpoint);
 
-		data.icon.className = className + ' icon';
+		data.icon.className = `codicon ${className}`;
 		data.icon.title = message ? message : '';
 		data.checkbox.checked = functionBreakpoint.enabled;
 		data.checkbox.disabled = true;
@@ -638,7 +638,7 @@ export function getBreakpointMessageAndClassName(debugService: IDebugService, br
 
 	if (!breakpoint.enabled || !debugService.getModel().areBreakpointsActivated()) {
 		return {
-			className: breakpoint instanceof DataBreakpoint ? 'debug-data-breakpoint-disabled' : breakpoint instanceof FunctionBreakpoint ? 'debug-function-breakpoint-disabled' : breakpoint.logMessage ? 'debug-breakpoint-log-disabled' : 'debug-breakpoint-disabled',
+			className: breakpoint instanceof DataBreakpoint ? 'codicon-debug-breakpoint-data-disabled' : breakpoint instanceof FunctionBreakpoint ? 'codicon-debug-breakpoint-function-disabled' : breakpoint.logMessage ? 'codicon-debug-breakpoint-log-disabled' : 'codicon-debug-breakpoint-disabled',
 			message: breakpoint.logMessage ? nls.localize('disabledLogpoint', "Disabled Logpoint") : nls.localize('disabledBreakpoint', "Disabled Breakpoint"),
 		};
 	}
@@ -648,35 +648,35 @@ export function getBreakpointMessageAndClassName(debugService: IDebugService, br
 	};
 	if (debugActive && !breakpoint.verified) {
 		return {
-			className: breakpoint instanceof DataBreakpoint ? 'debug-data-breakpoint-unverified' : breakpoint instanceof FunctionBreakpoint ? 'debug-function-breakpoint-unverified' : breakpoint.logMessage ? 'debug-breakpoint-log-unverified' : 'debug-breakpoint-unverified',
+			className: breakpoint instanceof DataBreakpoint ? 'codicon-debug-breakpoint-data-unverified' : breakpoint instanceof FunctionBreakpoint ? 'codicon-debug-breakpoint-function-unverified' : breakpoint.logMessage ? 'codicon-debug-breakpoint-log-unverified' : 'codicon-debug-breakpoint-unverified',
 			message: breakpoint.message || (breakpoint.logMessage ? nls.localize('unverifiedLogpoint', "Unverified Logpoint") : nls.localize('unverifiedBreakopint', "Unverified Breakpoint")),
 		};
 	}
 
 	if (breakpoint instanceof FunctionBreakpoint) {
 		if (!breakpoint.supported) {
 			return {
-				className: 'debug-function-breakpoint-unverified',
+				className: 'codicon-debug-breakpoint-function-unverified',
 				message: nls.localize('functionBreakpointUnsupported', "Function breakpoints not supported by this debug type"),
 			};
 		}
 
 		return {
-			className: 'debug-function-breakpoint',
+			className: 'codicon-debug-breakpoint-function',
 			message: breakpoint.message || nls.localize('functionBreakpoint', "Function Breakpoint")
 		};
 	}
 
 	if (breakpoint instanceof DataBreakpoint) {
 		if (!breakpoint.supported) {
 			return {
-				className: 'debug-data-breakpoint-unverified',
+				className: 'codicon-debug-breakpoint-data-unverified',
 				message: nls.localize('dataBreakpointUnsupported', "Data breakpoints not supported by this debug type"),
 			};
 		}
 
 		return {
-			className: 'debug-data-breakpoint',
+			className: 'codicon-debug-breakpoint-data',
 			message: breakpoint.message || nls.localize('dataBreakpoint', "Data Breakpoint")
 		};
 	}
@@ -686,7 +686,7 @@ export function getBreakpointMessageAndClassName(debugService: IDebugService, br
 
 		if (!breakpoint.supported) {
 			return {
-				className: 'debug-breakpoint-unsupported',
+				className: 'codicon-debug-breakpoint-unsupported',
 				message: nls.localize('breakpointUnsupported', "Breakpoints of this type are not supported by the debugger"),
 			};
 		}
@@ -702,7 +702,7 @@ export function getBreakpointMessageAndClassName(debugService: IDebugService, br
 		}
 
 		return {
-			className: breakpoint.logMessage ? 'debug-breakpoint-log' : 'debug-breakpoint-conditional',
+			className: breakpoint.logMessage ? 'codicon-debug-breakpoint-log' : 'codicon-debug-breakpoint-conditional',
 			message: appendMessage(messages.join('\n'))
 		};
 	}
@@ -714,20 +714,20 @@ export function getBreakpointMessageAndClassName(debugService: IDebugService, br
 		if (topStackFrame && topStackFrame.source.uri.toString() === breakpoint.uri.toString() && topStackFrame.range.startLineNumber === breakpoint.lineNumber) {
 			if (topStackFrame.range.startColumn === breakpoint.column) {
 				return {
-					className: 'debug-breakpoint-and-top-stack-frame-at-column',
+					className: 'codicon-debug-breakpoint-stackframe-dot',
 					message: breakpoint.message || nls.localize('breakpoint', "Breakpoint")
 				};
 			} else if (breakpoint.column === undefined) {
 				return {
-					className: 'debug-breakpoint-and-top-stack-frame',
+					className: 'codicon-debug-breakpoint',
 					message: breakpoint.message || nls.localize('breakpoint', "Breakpoint")
 				};
 			}
 		}
 	}
 
 	return {
-		className: 'debug-breakpoint',
+		className: 'codicon-debug-breakpoint',
 		message: breakpoint.message || nls.localize('breakpoint', "Breakpoint")
 	};
 }