Skip to content

Commit

Permalink
use an object for Codicon (#171254)
Browse files Browse the repository at this point in the history 
* remove codicon as class

* use an Object for Codicon
  • Loading branch information
@aeschli
aeschli committed Jan 13, 2023
1 parent 9bcc577 commit 081f3ed
Show file tree
Hide file tree
Showing 54 changed files with 728 additions and 716 deletions.
5 changes: 0 additions & 5 deletions src/vs/base/browser/ui/codicons/codiconStyles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,5 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/

import { Codicon } from 'vs/base/common/codicons';
import 'vs/css!./codicon/codicon';
import 'vs/css!./codicon/codicon-modifiers';

export function formatRule(c: Codicon) {
return `.codicon-${c.id}:before { content: '${c.fontCharacter}'; }`;
}
18 changes: 9 additions & 9 deletions src/vs/base/browser/ui/dialog/dialog.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ 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 { Codicon } from 'vs/base/common/codicons';
import { CSSIcon, Codicon } from 'vs/base/common/codicons';
import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';
import { mnemonicButtonLabel } from 'vs/base/common/labels';
import { Disposable } from 'vs/base/common/lifecycle';
Expand All @@ -33,7 +33,7 @@ export interface IDialogOptions {
readonly inputs?: IDialogInputOptions[];
readonly keyEventProcessor?: (event: StandardKeyboardEvent) => void;
readonly renderBody?: (container: HTMLElement) => void;
readonly icon?: Codicon;
readonly icon?: CSSIcon;
readonly buttonDetails?: string[];
readonly disableCloseAction?: boolean;
readonly disableDefaultAction?: boolean;
Expand Down Expand Up @@ -358,26 +358,26 @@ export class Dialog extends Disposable {

const spinModifierClassName = 'codicon-modifier-spin';

this.iconElement.classList.remove(...Codicon.dialogError.classNamesArray, ...Codicon.dialogWarning.classNamesArray, ...Codicon.dialogInfo.classNamesArray, ...Codicon.loading.classNamesArray, spinModifierClassName);
this.iconElement.classList.remove(...CSSIcon.asClassNameArray(Codicon.dialogError), ...CSSIcon.asClassNameArray(Codicon.dialogWarning), ...CSSIcon.asClassNameArray(Codicon.dialogInfo), ...CSSIcon.asClassNameArray(Codicon.loading), spinModifierClassName);

if (this.options.icon) {
this.iconElement.classList.add(...this.options.icon.classNamesArray);
this.iconElement.classList.add(...CSSIcon.asClassNameArray(this.options.icon));
} else {
switch (this.options.type) {
case 'error':
this.iconElement.classList.add(...Codicon.dialogError.classNamesArray);
this.iconElement.classList.add(...CSSIcon.asClassNameArray(Codicon.dialogError));
break;
case 'warning':
this.iconElement.classList.add(...Codicon.dialogWarning.classNamesArray);
this.iconElement.classList.add(...CSSIcon.asClassNameArray(Codicon.dialogWarning));
break;
case 'pending':
this.iconElement.classList.add(...Codicon.loading.classNamesArray, spinModifierClassName);
this.iconElement.classList.add(...CSSIcon.asClassNameArray(Codicon.loading), spinModifierClassName);
break;
case 'none':
case 'info':
case 'question':
default:
this.iconElement.classList.add(...Codicon.dialogInfo.classNamesArray);
this.iconElement.classList.add(...CSSIcon.asClassNameArray(Codicon.dialogInfo));
break;
}
}
Expand All @@ -386,7 +386,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"), Codicon.dialogClose.classNames, true, async () => {
const action = this._register(new Action('dialog.close', nls.localize('dialogClose', "Close Dialog"), CSSIcon.asClassName(Codicon.dialogClose), true, async () => {
resolve({
button: this.options.cancelId || 0,
checkboxChecked: this.checkbox ? this.checkbox.checked : undefined
Expand Down
4 changes: 2 additions & 2 deletions src/vs/base/browser/ui/dropdown/dropdownActionViewItem.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ 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 { Codicon } from 'vs/base/common/codicons';
import { CSSIcon, Codicon } from 'vs/base/common/codicons';
import { Emitter } from 'vs/base/common/event';
import { KeyCode } from 'vs/base/common/keyCodes';
import { ResolvedKeybinding } from 'vs/base/common/keybindings';
Expand Down Expand Up @@ -200,7 +200,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', ...Codicon.dropDownButton.classNamesArray, ...menuActionClassNames] });
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.render(this.element);

this._register(addDisposableListener(this.element, EventType.KEY_DOWN, e => {
Expand Down
12 changes: 8 additions & 4 deletions src/vs/base/browser/ui/menu/menu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,11 @@ import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { StandardMouseEvent } from 'vs/base/browser/mouseEvent';
import { ActionBar, ActionsOrientation, IActionViewItemProvider } from 'vs/base/browser/ui/actionbar/actionbar';
import { ActionViewItem, BaseActionViewItem, IActionViewItemOptions } from 'vs/base/browser/ui/actionbar/actionViewItems';
import { formatRule } from 'vs/base/browser/ui/codicons/codiconStyles';
import { AnchorAlignment, layout, LayoutAnchorPosition } from 'vs/base/browser/ui/contextview/contextview';
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 { Codicon } from 'vs/base/common/codicons';
import { CSSIcon, Codicon, getCodiconFontCharacters } from 'vs/base/common/codicons';
import { Color } from 'vs/base/common/color';
import { Event } from 'vs/base/common/event';
import { stripIcons } from 'vs/base/common/iconLabels';
Expand Down Expand Up @@ -525,7 +524,7 @@ class BaseMenuActionViewItem extends BaseActionViewItem {
}
}

this.check = append(this.item, $('span.menu-item-check' + Codicon.menuSelection.cssSelector));
this.check = append(this.item, $('span.menu-item-check' + CSSIcon.asCSSSelector(Codicon.menuSelection)));
this.check.setAttribute('role', 'none');

this.label = append(this.item, $('span.action-label'));
Expand Down Expand Up @@ -756,7 +755,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' + Codicon.menuSubmenu.cssSelector));
this.submenuIndicator = append(this.item, $('span.submenu-indicator' + CSSIcon.asCSSSelector(Codicon.menuSubmenu)));
this.submenuIndicator.setAttribute('aria-hidden', 'true');
}

Expand Down Expand Up @@ -1002,6 +1001,11 @@ export function cleanMnemonic(label: string): string {
return label.replace(regex, mnemonicInText ? '$2$3' : '').trim();
}

export function formatRule(c: CSSIcon) {
const fontCharacter = getCodiconFontCharacters()[c.id];
return `.codicon-${c.id}:before { content: '\\${fontCharacter.toString(16)}'; }`;
}

function getMenuWidgetCSS(style: IMenuStyles, isForShadowDom: boolean): string {
let result = /* css */`
.monaco-menu {
Expand Down
4 changes: 2 additions & 2 deletions src/vs/base/browser/ui/menu/menubar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ 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 { Codicon } from 'vs/base/common/codicons';
import { CSSIcon, Codicon } from 'vs/base/common/codicons';
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';
Expand Down Expand Up @@ -314,7 +314,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' + Codicon.menuBarMore.cssSelector, { 'role': 'none', 'aria-hidden': true });
const titleElement = $('div.menubar-menu-title.toolbar-toggle-more' + CSSIcon.asCSSSelector(Codicon.menuBarMore), { 'role': 'none', 'aria-hidden': true });

buttonElement.appendChild(titleElement);
this.container.appendChild(buttonElement);
Expand Down
6 changes: 3 additions & 3 deletions src/vs/base/browser/ui/scrollbar/scrollbarArrow.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 { Codicon } from 'vs/base/common/codicons';
import { CSSIcon } from 'vs/base/common/codicons';
import * as dom from 'vs/base/browser/dom';

/**
Expand All @@ -17,7 +17,7 @@ export const ARROW_IMG_SIZE = 11;
export interface ScrollbarArrowOptions {
onActivate: () => void;
className: string;
icon: Codicon;
icon: CSSIcon;

bgWidth: number;
bgHeight: number;
Expand Down Expand Up @@ -61,7 +61,7 @@ export class ScrollbarArrow extends Widget {

this.domNode = document.createElement('div');
this.domNode.className = opts.className;
this.domNode.classList.add(...opts.icon.classNamesArray);
this.domNode.classList.add(...CSSIcon.asClassNameArray(opts.icon));

this.domNode.style.position = 'absolute';
this.domNode.style.width = ARROW_IMG_SIZE + 'px';
Expand Down
6 changes: 3 additions & 3 deletions src/vs/base/browser/ui/tree/abstractTree.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ 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 { Codicon } from 'vs/base/common/codicons';
import { CSSIcon, Codicon } from 'vs/base/common/codicons';
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';
Expand Down Expand Up @@ -455,7 +455,7 @@ class TreeRenderer<T, TFilterData, TRef, TTemplateData> implements IListRenderer
templateData.container.removeAttribute('aria-expanded');
}

templateData.twistie.classList.remove(...Codicon.treeItemExpanded.classNamesArray);
templateData.twistie.classList.remove(...CSSIcon.asClassNameArray(Codicon.treeItemExpanded));

let twistieRendered = false;

Expand All @@ -465,7 +465,7 @@ class TreeRenderer<T, TFilterData, TRef, TTemplateData> implements IListRenderer

if (node.collapsible && (!this.hideTwistiesOfChildlessElements || node.visibleChildrenCount > 0)) {
if (!twistieRendered) {
templateData.twistie.classList.add(...Codicon.treeItemExpanded.classNamesArray);
templateData.twistie.classList.add(...CSSIcon.asClassNameArray(Codicon.treeItemExpanded));
}

templateData.twistie.classList.add('collapsible');
Expand Down
10 changes: 5 additions & 5 deletions src/vs/base/browser/ui/tree/asyncDataTree.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { getVisibleState, isFilterResult } from 'vs/base/browser/ui/tree/indexTr
import { CompressibleObjectTree, ICompressibleKeyboardNavigationLabelProvider, ICompressibleObjectTreeOptions, ICompressibleTreeRenderer, IObjectTreeOptions, IObjectTreeSetChildrenOptions, ObjectTree } from 'vs/base/browser/ui/tree/objectTree';
import { IAsyncDataSource, ICollapseStateChangeEvent, ITreeContextMenuEvent, ITreeDragAndDrop, ITreeElement, ITreeEvent, ITreeFilter, ITreeMouseEvent, ITreeNode, ITreeRenderer, ITreeSorter, TreeError, TreeFilterResult, TreeVisibility, WeakMapper } from 'vs/base/browser/ui/tree/tree';
import { CancelablePromise, createCancelablePromise, Promises, timeout } from 'vs/base/common/async';
import { Codicon } from 'vs/base/common/codicons';
import { CSSIcon, Codicon } from 'vs/base/common/codicons';
import { isCancellationError, onUnexpectedError } from 'vs/base/common/errors';
import { Emitter, Event } from 'vs/base/common/event';
import { Iterable } from 'vs/base/common/iterator';
Expand Down Expand Up @@ -110,10 +110,10 @@ class AsyncDataTreeRenderer<TInput, T, TFilterData, TTemplateData> implements IT

renderTwistie(element: IAsyncDataTreeNode<TInput, T>, twistieElement: HTMLElement): boolean {
if (element.slow) {
twistieElement.classList.add(...Codicon.treeItemLoading.classNamesArray);
twistieElement.classList.add(...CSSIcon.asClassNameArray(Codicon.treeItemLoading));
return true;
} else {
twistieElement.classList.remove(...Codicon.treeItemLoading.classNamesArray);
twistieElement.classList.remove(...CSSIcon.asClassNameArray(Codicon.treeItemLoading));
return false;
}
}
Expand Down Expand Up @@ -1105,10 +1105,10 @@ class CompressibleAsyncDataTreeRenderer<TInput, T, TFilterData, TTemplateData> i

renderTwistie(element: IAsyncDataTreeNode<TInput, T>, twistieElement: HTMLElement): boolean {
if (element.slow) {
twistieElement.classList.add(...Codicon.treeItemLoading.classNamesArray);
twistieElement.classList.add(...CSSIcon.asClassNameArray(Codicon.treeItemLoading));
return true;
} else {
twistieElement.classList.remove(...Codicon.treeItemLoading.classNamesArray);
twistieElement.classList.remove(...CSSIcon.asClassNameArray(Codicon.treeItemLoading));
return false;
}
}
Expand Down

0 comments on commit 081f3ed

Please sign in to comment.