define find widget codicons

src/vs/editor/contrib/find/findWidget.ts

@@ -39,7 +39,15 @@ import { INotificationService } from 'vs/platform/notification/common/notificati
 import { IStorageKeysSyncRegistryService } from 'vs/platform/userDataSync/common/storageKeys';
 import { Codicon, registerIcon } from 'vs/base/browser/ui/codicons/codicons';
 
-export const findSelectionIcon = registerIcon('find-selection', Codicon.selection);
+const findSelectionIcon = registerIcon('find-selection', Codicon.selection);
+const findCollapsedIcon = registerIcon('find-collapsed', Codicon.chevronRight);
+const findExpandedIcon = registerIcon('find-expanded', Codicon.chevronDown);
+
+export const findCloseIcon = registerIcon('find-close', Codicon.close);
+export const findReplaceIcon = registerIcon('find-replace', Codicon.replace);
+export const findReplaceAllIcon = registerIcon('find-replace-all', Codicon.replaceAll);
+export const findPreviousMatchIcon = registerIcon('find-previous-match', Codicon.arrowUp);
+export const findNextMatchIcon = registerIcon('find-next-match', Codicon.arrowDown);
 
 export interface IFindController {
 	replace(): void;
@@ -470,8 +478,6 @@ export class FindWidget extends Widget implements IOverlayWidget, IHorizontalSas
 		this._replaceAllBtn.setEnabled(this._isVisible && this._isReplaceVisible && findInputIsNonEmpty);
 
 		dom.toggleClass(this._domNode, 'replaceToggled', this._isReplaceVisible);
-		this._toggleReplaceBtn.toggleClass('codicon-chevron-right', !this._isReplaceVisible);
-		this._toggleReplaceBtn.toggleClass('codicon-chevron-down', this._isReplaceVisible);
 		this._toggleReplaceBtn.setExpanded(this._isReplaceVisible);
 
 		let canReplace = !this._codeEditor.getOption(EditorOption.readOnly);
@@ -993,7 +999,7 @@ export class FindWidget extends Widget implements IOverlayWidget, IHorizontalSas
 		// Previous button
 		this._prevBtn = this._register(new SimpleButton({
 			label: NLS_PREVIOUS_MATCH_BTN_LABEL + this._keybindingLabelFor(FIND_IDS.PreviousMatchFindAction),
-			className: 'codicon codicon-arrow-up',
+			className: findPreviousMatchIcon.classNames,
 			onTrigger: () => {
 				this._codeEditor.getAction(FIND_IDS.PreviousMatchFindAction).run().then(undefined, onUnexpectedError);
 			}
@@ -1002,7 +1008,7 @@ export class FindWidget extends Widget implements IOverlayWidget, IHorizontalSas
 		// Next button
 		this._nextBtn = this._register(new SimpleButton({
 			label: NLS_NEXT_MATCH_BTN_LABEL + this._keybindingLabelFor(FIND_IDS.NextMatchFindAction),
-			className: 'codicon codicon-arrow-down',
+			className: findNextMatchIcon.classNames,
 			onTrigger: () => {
 				this._codeEditor.getAction(FIND_IDS.NextMatchFindAction).run().then(undefined, onUnexpectedError);
 			}
@@ -1046,7 +1052,7 @@ export class FindWidget extends Widget implements IOverlayWidget, IHorizontalSas
 		// Close button
 		this._closeBtn = this._register(new SimpleButton({
 			label: NLS_CLOSE_BTN_LABEL + this._keybindingLabelFor(FIND_IDS.CloseFindWidgetCommand),
-			className: 'codicon codicon-close',
+			className: findCloseIcon.classNames,
 			onTrigger: () => {
 				this._state.change({ isRevealed: false, searchScope: null }, false);
 			},
@@ -1109,7 +1115,7 @@ export class FindWidget extends Widget implements IOverlayWidget, IHorizontalSas
 		// Replace one button
 		this._replaceBtn = this._register(new SimpleButton({
 			label: NLS_REPLACE_BTN_LABEL + this._keybindingLabelFor(FIND_IDS.ReplaceOneAction),
-			className: 'codicon codicon-replace',
+			className: findReplaceIcon.classNames,
 			onTrigger: () => {
 				this._controller.replace();
 			},
@@ -1124,7 +1130,7 @@ export class FindWidget extends Widget implements IOverlayWidget, IHorizontalSas
 		// Replace all button
 		this._replaceAllBtn = this._register(new SimpleButton({
 			label: NLS_REPLACE_ALL_BTN_LABEL + this._keybindingLabelFor(FIND_IDS.ReplaceAllAction),
-			className: 'codicon codicon-replace-all',
+			className: findReplaceAllIcon.classNames,
 			onTrigger: () => {
 				this._controller.replaceAll();
 			}
@@ -1154,8 +1160,6 @@ export class FindWidget extends Widget implements IOverlayWidget, IHorizontalSas
 				this._showViewZone();
 			}
 		}));
-		this._toggleReplaceBtn.toggleClass('codicon-chevron-down', this._isReplaceVisible);
-		this._toggleReplaceBtn.toggleClass('codicon-chevron-right', !this._isReplaceVisible);
 		this._toggleReplaceBtn.setExpanded(this._isReplaceVisible);
 
 		// Widget
@@ -1298,10 +1302,13 @@ export class SimpleButton extends Widget {
 
 	public setExpanded(expanded: boolean): void {
 		this._domNode.setAttribute('aria-expanded', String(!!expanded));
-	}
-
-	public toggleClass(className: string, shouldHaveIt: boolean): void {
-		dom.toggleClass(this._domNode, className, shouldHaveIt);
+		if (expanded) {
+			dom.removeClasses(this._domNode, findCollapsedIcon.classNames);
+			dom.addClasses(this._domNode, findExpandedIcon.classNames);
+		} else {
+			dom.removeClasses(this._domNode, findExpandedIcon.classNames);
+			dom.addClasses(this._domNode, findCollapsedIcon.classNames);
+		}
 	}
 }
 

src/vs/workbench/contrib/codeEditor/browser/find/simpleFindReplaceWidget.ts

@@ -12,7 +12,7 @@ import { Delayer } from 'vs/base/common/async';
 import { KeyCode } from 'vs/base/common/keyCodes';
 import { FindReplaceState, FindReplaceStateChangedEvent } from 'vs/editor/contrib/find/findState';
 import { IMessage as InputBoxMessage } from 'vs/base/browser/ui/inputbox/inputBox';
-import { SimpleButton } from 'vs/editor/contrib/find/findWidget';
+import { SimpleButton, findCloseIcon, findNextMatchIcon, findPreviousMatchIcon, findReplaceIcon, findReplaceAllIcon } from 'vs/editor/contrib/find/findWidget';
 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { editorWidgetBackground, inputActiveOptionBorder, inputActiveOptionBackground, inputBackground, inputBorder, inputForeground, inputValidationErrorBackground, inputValidationErrorBorder, inputValidationErrorForeground, inputValidationInfoBackground, inputValidationInfoBorder, inputValidationInfoForeground, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationWarningForeground, widgetShadow, editorWidgetForeground } from 'vs/platform/theme/common/colorRegistry';
@@ -90,8 +90,6 @@ export abstract class SimpleFindReplaceWidget extends Widget {
 				}
 			}
 		}));
-		this._toggleReplaceBtn.toggleClass('codicon-chevron-down', this._isReplaceVisible);
-		this._toggleReplaceBtn.toggleClass('codicon-chevron-right', !this._isReplaceVisible);
 		this._toggleReplaceBtn.setExpanded(this._isReplaceVisible);
 		this._domNode.appendChild(this._toggleReplaceBtn.domNode);
 
@@ -147,7 +145,7 @@ export abstract class SimpleFindReplaceWidget extends Widget {
 
 		this.prevBtn = this._register(new SimpleButton({
 			label: NLS_PREVIOUS_MATCH_BTN_LABEL,
-			className: 'codicon codicon-arrow-up',
+			className: findPreviousMatchIcon.classNames,
 			onTrigger: () => {
 				this.find(true);
 			}
@@ -155,7 +153,7 @@ export abstract class SimpleFindReplaceWidget extends Widget {
 
 		this.nextBtn = this._register(new SimpleButton({
 			label: NLS_NEXT_MATCH_BTN_LABEL,
-			className: 'codicon codicon-arrow-down',
+			className: findNextMatchIcon.classNames,
 			onTrigger: () => {
 				this.find(false);
 			}
@@ -163,7 +161,7 @@ export abstract class SimpleFindReplaceWidget extends Widget {
 
 		const closeBtn = this._register(new SimpleButton({
 			label: NLS_CLOSE_BTN_LABEL,
-			className: 'codicon codicon-close',
+			className: findCloseIcon.classNames,
 			onTrigger: () => {
 				this.hide();
 			}
@@ -221,7 +219,7 @@ export abstract class SimpleFindReplaceWidget extends Widget {
 
 		this._replaceBtn = this._register(new SimpleButton({
 			label: NLS_REPLACE_BTN_LABEL,
-			className: 'codicon codicon-replace',
+			className: findReplaceIcon.classNames,
 			onTrigger: () => {
 				this.replaceOne();
 			}
@@ -230,7 +228,7 @@ export abstract class SimpleFindReplaceWidget extends Widget {
 		// Replace all button
 		this._replaceAllBtn = this._register(new SimpleButton({
 			label: NLS_REPLACE_ALL_BTN_LABEL,
-			className: 'codicon codicon-replace-all',
+			className: findReplaceAllIcon.classNames,
 			onTrigger: () => {
 				this.replaceAll();
 			}
@@ -315,8 +313,6 @@ export abstract class SimpleFindReplaceWidget extends Widget {
 		this._replaceAllBtn.setEnabled(this._isVisible && this._isReplaceVisible && findInputIsNonEmpty);
 
 		dom.toggleClass(this._domNode, 'replaceToggled', this._isReplaceVisible);
-		this._toggleReplaceBtn.toggleClass('codicon-chevron-right', !this._isReplaceVisible);
-		this._toggleReplaceBtn.toggleClass('codicon-chevron-down', this._isReplaceVisible);
 		this._toggleReplaceBtn.setExpanded(this._isReplaceVisible);
 	}