merge ThemeIcon and CSSIcon

build/monaco/monaco.d.ts.recipe

@@ -68,7 +68,7 @@ export interface ICommandHandler {
 #include(vs/platform/markers/common/markers): IMarker, IMarkerData, IRelatedInformation
 #include(vs/editor/standalone/browser/colorizer): IColorizerOptions, IColorizerElementOptions
 #include(vs/base/common/scrollable): ScrollbarVisibility
-#include(vs/platform/theme/common/themeService): ThemeColor
+#include(vs/base/common/themables): ThemeColor
 #include(vs/editor/common/core/editOperation): ISingleEditOperation
 #include(vs/editor/common/core/wordHelper): IWordAtPosition
 #includeAll(vs/editor/common/model): IScrollEvent

src/vs/base/browser/ui/breadcrumbs/breadcrumbsWidget.ts

@@ -7,7 +7,7 @@ import * as dom from 'vs/base/browser/dom';
 import { IMouseEvent } from 'vs/base/browser/mouseEvent';
 import { DomScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement';
 import { commonPrefixLength } from 'vs/base/common/arrays';
-import { CSSIcon } from 'vs/base/common/codicons';
+import { ThemeIcon } from 'vs/base/common/themables';
 import { Emitter, Event } from 'vs/base/common/event';
 import { DisposableStore, dispose, IDisposable } from 'vs/base/common/lifecycle';
 import { ScrollbarVisibility } from 'vs/base/common/scrollable';
@@ -51,7 +51,7 @@ export class BreadcrumbsWidget {
 	private readonly _items = new Array<BreadcrumbsItem>();
 	private readonly _nodes = new Array<HTMLDivElement>();
 	private readonly _freeNodes = new Array<HTMLDivElement>();
-	private readonly _separatorIcon: CSSIcon;
+	private readonly _separatorIcon: ThemeIcon;
 
 	private _enabled: boolean = true;
 	private _focusedItemIdx: number = -1;
@@ -63,7 +63,7 @@ export class BreadcrumbsWidget {
 	constructor(
 		container: HTMLElement,
 		horizontalScrollbarSize: number,
-		separatorIcon: CSSIcon,
+		separatorIcon: ThemeIcon,
 		styles: IBreadcrumbsWidgetStyles
 	) {
 		this._domNode = document.createElement('div');
@@ -340,7 +340,7 @@ export class BreadcrumbsWidget {
 		container.tabIndex = -1;
 		container.setAttribute('role', 'listitem');
 		container.classList.add('monaco-breadcrumb-item');
-		const iconContainer = dom.$(CSSIcon.asCSSSelector(this._separatorIcon));
+		const iconContainer = dom.$(ThemeIcon.asCSSSelector(this._separatorIcon));
 		container.appendChild(iconContainer);
 	}
 

src/vs/base/browser/ui/button/button.ts

@@ -9,7 +9,8 @@ import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { EventType as TouchEventType, Gesture } from 'vs/base/browser/touch';
 import { renderLabelWithIcons } from 'vs/base/browser/ui/iconLabel/iconLabels';
 import { Action, IAction, IActionRunner } from 'vs/base/common/actions';
-import { Codicon, CSSIcon } from 'vs/base/common/codicons';
+import { Codicon } from 'vs/base/common/codicons';
+import { ThemeIcon } from 'vs/base/common/themables';
 import { Color } from 'vs/base/common/color';
 import { Emitter, Event as BaseEvent } from 'vs/base/common/event';
 import { KeyCode } from 'vs/base/common/keyCodes';
@@ -50,7 +51,7 @@ export interface IButton extends IDisposable {
 	readonly element: HTMLElement;
 	readonly onDidClick: BaseEvent<Event | undefined>;
 	label: string;
-	icon: CSSIcon;
+	icon: ThemeIcon;
 	enabled: boolean;
 	focus(): void;
 	hasFocus(): boolean;
@@ -215,8 +216,8 @@ export class Button extends Disposable implements IButton {
 		}
 	}
 
-	set icon(icon: CSSIcon) {
-		this._element.classList.add(...CSSIcon.asClassNameArray(icon));
+	set icon(icon: ThemeIcon) {
+		this._element.classList.add(...ThemeIcon.asClassNameArray(icon));
 	}
 
 	set enabled(value: boolean) {
@@ -313,7 +314,7 @@ export class ButtonWithDropdown extends Disposable implements IButton {
 		this.action.label = value;
 	}
 
-	set icon(icon: CSSIcon) {
+	set icon(icon: ThemeIcon) {
 		this.button.icon = icon;
 	}
 
@@ -366,7 +367,7 @@ export class ButtonWithDescription implements IButtonWithDescription {
 		this._button.label = value;
 	}
 
-	set icon(icon: CSSIcon) {
+	set icon(icon: ThemeIcon) {
 		this._button.icon = icon;
 	}
 

src/vs/base/browser/ui/dialog/dialog.ts

@@ -10,7 +10,8 @@ import { ButtonBar, ButtonWithDescription, IButtonStyles } from 'vs/base/browser
 import { ICheckboxStyles, Checkbox } from 'vs/base/browser/ui/toggle/toggle';
 import { IInputBoxStyles, InputBox } from 'vs/base/browser/ui/inputbox/inputBox';
 import { Action } from 'vs/base/common/actions';
-import { CSSIcon, Codicon } from 'vs/base/common/codicons';
+import { Codicon } from 'vs/base/common/codicons';
+import { ThemeIcon } from 'vs/base/common/themables';
 import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';
 import { mnemonicButtonLabel } from 'vs/base/common/labels';
 import { Disposable } from 'vs/base/common/lifecycle';
@@ -33,7 +34,7 @@ export interface IDialogOptions {
 	readonly inputs?: IDialogInputOptions[];
 	readonly keyEventProcessor?: (event: StandardKeyboardEvent) => void;
 	readonly renderBody?: (container: HTMLElement) => void;
-	readonly icon?: CSSIcon;
+	readonly icon?: ThemeIcon;
 	readonly buttonDetails?: string[];
 	readonly disableCloseAction?: boolean;
 	readonly disableDefaultAction?: boolean;
@@ -358,26 +359,26 @@ export class Dialog extends Disposable {
 
 			const spinModifierClassName = 'codicon-modifier-spin';
 
-			this.iconElement.classList.remove(...CSSIcon.asClassNameArray(Codicon.dialogError), ...CSSIcon.asClassNameArray(Codicon.dialogWarning), ...CSSIcon.asClassNameArray(Codicon.dialogInfo), ...CSSIcon.asClassNameArray(Codicon.loading), spinModifierClassName);
+			this.iconElement.classList.remove(...ThemeIcon.asClassNameArray(Codicon.dialogError), ...ThemeIcon.asClassNameArray(Codicon.dialogWarning), ...ThemeIcon.asClassNameArray(Codicon.dialogInfo), ...ThemeIcon.asClassNameArray(Codicon.loading), spinModifierClassName);
 
 			if (this.options.icon) {
-				this.iconElement.classList.add(...CSSIcon.asClassNameArray(this.options.icon));
+				this.iconElement.classList.add(...ThemeIcon.asClassNameArray(this.options.icon));
 			} else {
 				switch (this.options.type) {
 					case 'error':
-						this.iconElement.classList.add(...CSSIcon.asClassNameArray(Codicon.dialogError));
+						this.iconElement.classList.add(...ThemeIcon.asClassNameArray(Codicon.dialogError));
 						break;
 					case 'warning':
-						this.iconElement.classList.add(...CSSIcon.asClassNameArray(Codicon.dialogWarning));
+						this.iconElement.classList.add(...ThemeIcon.asClassNameArray(Codicon.dialogWarning));
 						break;
 					case 'pending':
-						this.iconElement.classList.add(...CSSIcon.asClassNameArray(Codicon.loading), spinModifierClassName);
+						this.iconElement.classList.add(...ThemeIcon.asClassNameArray(Codicon.loading), spinModifierClassName);
 						break;
 					case 'none':
 					case 'info':
 					case 'question':
 					default:
-						this.iconElement.classList.add(...CSSIcon.asClassNameArray(Codicon.dialogInfo));
+						this.iconElement.classList.add(...ThemeIcon.asClassNameArray(Codicon.dialogInfo));
 						break;
 				}
 			}
@@ -386,7 +387,7 @@ export class Dialog extends Disposable {
 			if (!this.options.disableCloseAction) {
 				const actionBar = this._register(new ActionBar(this.toolbarContainer, {}));
 
-				const action = this._register(new Action('dialog.close', nls.localize('dialogClose', "Close Dialog"), CSSIcon.asClassName(Codicon.dialogClose), true, async () => {
+				const action = this._register(new Action('dialog.close', nls.localize('dialogClose', "Close Dialog"), ThemeIcon.asClassName(Codicon.dialogClose), true, async () => {
 					resolve({
 						button: this.options.cancelId || 0,
 						checkboxChecked: this.checkbox ? this.checkbox.checked : undefined

src/vs/base/browser/ui/dropdown/dropdownActionViewItem.ts

@@ -12,7 +12,8 @@ import { ActionViewItem, BaseActionViewItem, IActionViewItemOptions, IBaseAction
 import { AnchorAlignment } from 'vs/base/browser/ui/contextview/contextview';
 import { DropdownMenu, IActionProvider, IDropdownMenuOptions, ILabelRenderer } from 'vs/base/browser/ui/dropdown/dropdown';
 import { Action, IAction, IActionRunner } from 'vs/base/common/actions';
-import { CSSIcon, Codicon } from 'vs/base/common/codicons';
+import { Codicon } from 'vs/base/common/codicons';
+import { ThemeIcon } from 'vs/base/common/themables';
 import { Emitter } from 'vs/base/common/event';
 import { KeyCode } from 'vs/base/common/keyCodes';
 import { ResolvedKeybinding } from 'vs/base/common/keybindings';
@@ -200,7 +201,7 @@ export class ActionWithDropdownActionViewItem extends ActionViewItem {
 			separator.classList.toggle('prominent', menuActionClassNames.includes('prominent'));
 			append(this.element, separator);
 
-			this.dropdownMenuActionViewItem = new DropdownMenuActionViewItem(this._register(new Action('dropdownAction', nls.localize('moreActions', "More Actions..."))), menuActionsProvider, this.contextMenuProvider, { classNames: ['dropdown', ...CSSIcon.asClassNameArray(Codicon.dropDownButton), ...menuActionClassNames] });
+			this.dropdownMenuActionViewItem = new DropdownMenuActionViewItem(this._register(new Action('dropdownAction', nls.localize('moreActions', "More Actions..."))), menuActionsProvider, this.contextMenuProvider, { classNames: ['dropdown', ...ThemeIcon.asClassNameArray(Codicon.dropDownButton), ...menuActionClassNames] });
 			this.dropdownMenuActionViewItem.render(this.element);
 
 			this._register(addDisposableListener(this.element, EventType.KEY_DOWN, e => {

src/vs/base/browser/ui/iconLabel/iconLabels.ts

@@ -4,9 +4,9 @@
  *--------------------------------------------------------------------------------------------*/
 
 import * as dom from 'vs/base/browser/dom';
-import { CSSIcon } from 'vs/base/common/codicons';
+import { ThemeIcon } from 'vs/base/common/themables';
 
-const labelWithIconsRegex = new RegExp(`(\\\\)?\\$\\((${CSSIcon.iconNameExpression}(?:${CSSIcon.iconModifierExpression})?)\\)`, 'g');
+const labelWithIconsRegex = new RegExp(`(\\\\)?\\$\\((${ThemeIcon.iconNameExpression}(?:${ThemeIcon.iconModifierExpression})?)\\)`, 'g');
 export function renderLabelWithIcons(text: string): Array<HTMLSpanElement | string> {
 	const elements = new Array<HTMLSpanElement | string>();
 	let match: RegExpExecArray | null;
@@ -29,8 +29,8 @@ export function renderLabelWithIcons(text: string): Array<HTMLSpanElement | stri
 	return elements;
 }
 
-export function renderIcon(icon: CSSIcon): HTMLSpanElement {
+export function renderIcon(icon: ThemeIcon): HTMLSpanElement {
 	const node = dom.$(`span`);
-	node.classList.add(...CSSIcon.asClassNameArray(icon));
+	node.classList.add(...ThemeIcon.asClassNameArray(icon));
 	return node;
 }

src/vs/base/browser/ui/menu/menu.ts

@@ -14,7 +14,8 @@ import { AnchorAlignment, layout, LayoutAnchorPosition } from 'vs/base/browser/u
 import { DomScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement';
 import { EmptySubmenuAction, IAction, IActionRunner, Separator, SubmenuAction } from 'vs/base/common/actions';
 import { RunOnceScheduler } from 'vs/base/common/async';
-import { CSSIcon, Codicon, getCodiconFontCharacters } from 'vs/base/common/codicons';
+import { Codicon, getCodiconFontCharacters } from 'vs/base/common/codicons';
+import { ThemeIcon } from 'vs/base/common/themables';
 import { Color } from 'vs/base/common/color';
 import { Event } from 'vs/base/common/event';
 import { stripIcons } from 'vs/base/common/iconLabels';
@@ -524,7 +525,7 @@ class BaseMenuActionViewItem extends BaseActionViewItem {
 			}
 		}
 
-		this.check = append(this.item, $('span.menu-item-check' + CSSIcon.asCSSSelector(Codicon.menuSelection)));
+		this.check = append(this.item, $('span.menu-item-check' + ThemeIcon.asCSSSelector(Codicon.menuSelection)));
 		this.check.setAttribute('role', 'none');
 
 		this.label = append(this.item, $('span.action-label'));
@@ -755,7 +756,7 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
 			this.item.tabIndex = 0;
 			this.item.setAttribute('aria-haspopup', 'true');
 			this.updateAriaExpanded('false');
-			this.submenuIndicator = append(this.item, $('span.submenu-indicator' + CSSIcon.asCSSSelector(Codicon.menuSubmenu)));
+			this.submenuIndicator = append(this.item, $('span.submenu-indicator' + ThemeIcon.asCSSSelector(Codicon.menuSubmenu)));
 			this.submenuIndicator.setAttribute('aria-hidden', 'true');
 		}
 
@@ -1001,7 +1002,7 @@ export function cleanMnemonic(label: string): string {
 	return label.replace(regex, mnemonicInText ? '$2$3' : '').trim();
 }
 
-export function formatRule(c: CSSIcon) {
+export function formatRule(c: ThemeIcon) {
 	const fontCharacter = getCodiconFontCharacters()[c.id];
 	return `.codicon-${c.id}:before { content: '\\${fontCharacter.toString(16)}'; }`;
 }

src/vs/base/browser/ui/menu/menubar.ts

@@ -12,7 +12,8 @@ import { cleanMnemonic, Direction, IMenuOptions, IMenuStyles, Menu, MENU_ESCAPED
 import { ActionRunner, IAction, IActionRunner, Separator, SubmenuAction } from 'vs/base/common/actions';
 import { asArray } from 'vs/base/common/arrays';
 import { RunOnceScheduler } from 'vs/base/common/async';
-import { CSSIcon, Codicon } from 'vs/base/common/codicons';
+import { Codicon } from 'vs/base/common/codicons';
+import { ThemeIcon } from 'vs/base/common/themables';
 import { Emitter, Event } from 'vs/base/common/event';
 import { KeyCode, KeyMod, ScanCode, ScanCodeUtils } from 'vs/base/common/keyCodes';
 import { ResolvedKeybinding } from 'vs/base/common/keybindings';
@@ -314,7 +315,7 @@ export class MenuBar extends Disposable {
 	createOverflowMenu(): void {
 		const label = this.isCompact ? nls.localize('mAppMenu', 'Application Menu') : nls.localize('mMore', 'More');
 		const buttonElement = $('div.menubar-menu-button', { 'role': 'menuitem', 'tabindex': this.isCompact ? 0 : -1, 'aria-label': label, 'aria-haspopup': true });
-		const titleElement = $('div.menubar-menu-title.toolbar-toggle-more' + CSSIcon.asCSSSelector(Codicon.menuBarMore), { 'role': 'none', 'aria-hidden': true });
+		const titleElement = $('div.menubar-menu-title.toolbar-toggle-more' + ThemeIcon.asCSSSelector(Codicon.menuBarMore), { 'role': 'none', 'aria-hidden': true });
 
 		buttonElement.appendChild(titleElement);
 		this.container.appendChild(buttonElement);

src/vs/base/browser/ui/scrollbar/scrollbarArrow.ts

@@ -6,7 +6,7 @@
 import { GlobalPointerMoveMonitor } from 'vs/base/browser/globalPointerMoveMonitor';
 import { Widget } from 'vs/base/browser/ui/widget';
 import { IntervalTimer, TimeoutTimer } from 'vs/base/common/async';
-import { CSSIcon } from 'vs/base/common/codicons';
+import { ThemeIcon } from 'vs/base/common/themables';
 import * as dom from 'vs/base/browser/dom';
 
 /**
@@ -17,7 +17,7 @@ export const ARROW_IMG_SIZE = 11;
 export interface ScrollbarArrowOptions {
 	onActivate: () => void;
 	className: string;
-	icon: CSSIcon;
+	icon: ThemeIcon;
 
 	bgWidth: number;
 	bgHeight: number;
@@ -61,7 +61,7 @@ export class ScrollbarArrow extends Widget {
 
 		this.domNode = document.createElement('div');
 		this.domNode.className = opts.className;
-		this.domNode.classList.add(...CSSIcon.asClassNameArray(opts.icon));
+		this.domNode.classList.add(...ThemeIcon.asClassNameArray(opts.icon));
 
 		this.domNode.style.position = 'absolute';
 		this.domNode.style.width = ARROW_IMG_SIZE + 'px';

src/vs/base/browser/ui/toggle/toggle.ts

@@ -7,14 +7,15 @@ import { IKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { BaseActionViewItem, IActionViewItemOptions } from 'vs/base/browser/ui/actionbar/actionViewItems';
 import { Widget } from 'vs/base/browser/ui/widget';
 import { IAction } from 'vs/base/common/actions';
-import { Codicon, CSSIcon } from 'vs/base/common/codicons';
+import { Codicon } from 'vs/base/common/codicons';
+import { ThemeIcon } from 'vs/base/common/themables';
 import { Emitter, Event } from 'vs/base/common/event';
 import { KeyCode } from 'vs/base/common/keyCodes';
 import 'vs/css!./toggle';
 
 export interface IToggleOpts extends IToggleStyles {
 	readonly actionClassName?: string;
-	readonly icon?: CSSIcon;
+	readonly icon?: ThemeIcon;
 	readonly title: string;
 	readonly isChecked: boolean;
 	readonly notFocusable?: boolean;
@@ -101,7 +102,7 @@ export class Toggle extends Widget {
 	readonly onKeyDown: Event<IKeyboardEvent> = this._onKeyDown.event;
 
 	private readonly _opts: IToggleOpts;
-	private _icon: CSSIcon | undefined;
+	private _icon: ThemeIcon | undefined;
 	readonly domNode: HTMLElement;
 
 	private _checked: boolean;
@@ -115,7 +116,7 @@ export class Toggle extends Widget {
 		const classes = ['monaco-custom-toggle'];
 		if (this._opts.icon) {
 			this._icon = this._opts.icon;
-			classes.push(...CSSIcon.asClassNameArray(this._icon));
+			classes.push(...ThemeIcon.asClassNameArray(this._icon));
 		}
 		if (this._opts.actionClassName) {
 			classes.push(...this._opts.actionClassName.split(' '));
@@ -180,13 +181,13 @@ export class Toggle extends Widget {
 		this.applyStyles();
 	}
 
-	setIcon(icon: CSSIcon | undefined): void {
+	setIcon(icon: ThemeIcon | undefined): void {
 		if (this._icon) {
-			this.domNode.classList.remove(...CSSIcon.asClassNameArray(this._icon));
+			this.domNode.classList.remove(...ThemeIcon.asClassNameArray(this._icon));
 		}
 		this._icon = icon;
 		if (this._icon) {
-			this.domNode.classList.add(...CSSIcon.asClassNameArray(this._icon));
+			this.domNode.classList.add(...ThemeIcon.asClassNameArray(this._icon));
 		}
 	}
 

src/vs/base/browser/ui/toolbar/toolbar.ts

@@ -8,7 +8,8 @@ import { ActionBar, ActionsOrientation, IActionViewItemProvider } from 'vs/base/
 import { AnchorAlignment } from 'vs/base/browser/ui/contextview/contextview';
 import { DropdownMenuActionViewItem } from 'vs/base/browser/ui/dropdown/dropdownActionViewItem';
 import { Action, IAction, IActionRunner, SubmenuAction } from 'vs/base/common/actions';
-import { Codicon, CSSIcon } from 'vs/base/common/codicons';
+import { Codicon } from 'vs/base/common/codicons';
+import { ThemeIcon } from 'vs/base/common/themables';
 import { EventMultiplexer } from 'vs/base/common/event';
 import { ResolvedKeybinding } from 'vs/base/common/keybindings';
 import { Disposable, DisposableStore } from 'vs/base/common/lifecycle';
@@ -27,7 +28,7 @@ export interface IToolBarOptions {
 	toggleMenuTitle?: string;
 	anchorAlignmentProvider?: () => AnchorAlignment;
 	renderDropdownAsChildElement?: boolean;
-	moreIcon?: CSSIcon;
+	moreIcon?: ThemeIcon;
 	allowContextMenu?: boolean;
 }
 
@@ -75,7 +76,7 @@ export class ToolBar extends Disposable {
 							actionViewItemProvider: this.options.actionViewItemProvider,
 							actionRunner: this.actionRunner,
 							keybindingProvider: this.options.getKeyBinding,
-							classNames: CSSIcon.asClassNameArray(options.moreIcon ?? Codicon.toolBarMore),
+							classNames: ThemeIcon.asClassNameArray(options.moreIcon ?? Codicon.toolBarMore),
 							anchorAlignmentProvider: this.options.anchorAlignmentProvider,
 							menuAsChild: !!this.options.renderDropdownAsChildElement
 						}

src/vs/base/browser/ui/tree/abstractTree.ts

@@ -20,7 +20,8 @@ import { ICollapseStateChangeEvent, ITreeContextMenuEvent, ITreeDragAndDrop, ITr
 import { Action } from 'vs/base/common/actions';
 import { distinct, equals, firstOrDefault, range } from 'vs/base/common/arrays';
 import { disposableTimeout, timeout } from 'vs/base/common/async';
-import { CSSIcon, Codicon } from 'vs/base/common/codicons';
+import { Codicon } from 'vs/base/common/codicons';
+import { ThemeIcon } from 'vs/base/common/themables';
 import { SetMap } from 'vs/base/common/collections';
 import { Emitter, Event, EventBufferer, Relay } from 'vs/base/common/event';
 import { fuzzyScore, FuzzyScore } from 'vs/base/common/filters';
@@ -455,7 +456,7 @@ class TreeRenderer<T, TFilterData, TRef, TTemplateData> implements IListRenderer
 			templateData.container.removeAttribute('aria-expanded');
 		}
 
-		templateData.twistie.classList.remove(...CSSIcon.asClassNameArray(Codicon.treeItemExpanded));
+		templateData.twistie.classList.remove(...ThemeIcon.asClassNameArray(Codicon.treeItemExpanded));
 
 		let twistieRendered = false;
 
@@ -465,7 +466,7 @@ class TreeRenderer<T, TFilterData, TRef, TTemplateData> implements IListRenderer
 
 		if (node.collapsible && (!this.hideTwistiesOfChildlessElements || node.visibleChildrenCount > 0)) {
 			if (!twistieRendered) {
-				templateData.twistie.classList.add(...CSSIcon.asClassNameArray(Codicon.treeItemExpanded));
+				templateData.twistie.classList.add(...ThemeIcon.asClassNameArray(Codicon.treeItemExpanded));
 			}
 
 			templateData.twistie.classList.add('collapsible');