#57935 Show recording badge

src/vs/workbench/parts/preferences/browser/keybindingsEditor.ts

@@ -36,7 +36,7 @@ import { IThemeService, registerThemingParticipant, ITheme, ICssStyleCollector }
 import { IContextKeyService, IContextKey } from 'vs/platform/contextkey/common/contextkey';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { KeyCode, ResolvedKeybinding } from 'vs/base/common/keyCodes';
-import { listHighlightForeground } from 'vs/platform/theme/common/colorRegistry';
+import { listHighlightForeground, badgeBackground, contrastBorder, badgeForeground } from 'vs/platform/theme/common/colorRegistry';
 import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
 import { EditorExtensionsRegistry } from 'vs/editor/browser/editorExtensions';
 import { WorkbenchList } from 'vs/platform/list/browser/listService';
@@ -44,6 +44,7 @@ import { INotificationService } from 'vs/platform/notification/common/notificati
 import { IPreferencesService } from 'vs/workbench/services/preferences/common/preferences';
 import { KeybindingsEditorInput } from 'vs/workbench/services/preferences/common/preferencesEditorInput';
 import { CancellationToken } from 'vs/base/common/cancellation';
+import { attachStylerCallback } from 'vs/platform/theme/common/styler';
 
 let $ = DOM.$;
 
@@ -127,7 +128,7 @@ export class KeybindingsEditor extends BaseEditor implements IKeybindingsEditor
 
 	layout(dimension: DOM.Dimension): void {
 		this.dimension = dimension;
-		this.searchWidget.layout(dimension);
+		this.layoutSearchWidget(dimension);
 
 		this.overlayContainer.style.width = dimension.width + 'px';
 		this.overlayContainer.style.height = dimension.height + 'px';
@@ -300,7 +301,7 @@ export class KeybindingsEditor extends BaseEditor implements IKeybindingsEditor
 	private createHeader(parent: HTMLElement): void {
 		this.headerContainer = DOM.append(parent, $('.keybindings-header'));
 		const fullTextSearchPlaceholder = localize('SearchKeybindings.FullTextSearchPlaceholder', "Type to search in keybindings");
-		const keybindingsSearchPlaceholder = localize('SearchKeybindings.KeybindingsSearchPlaceholder', "Type keybindings to search, press Escape to exit");
+		const keybindingsSearchPlaceholder = localize('SearchKeybindings.KeybindingsSearchPlaceholder', "Recording Keys. Press Escape to exit");
 
 		const searchContainer = DOM.append(this.headerContainer, $('.search-container'));
 		this.searchWidget = this._register(this.instantiationService.createInstance(KeybindingsSearchWidget, searchContainer, <KeybindingsSearchOptions>{
@@ -313,6 +314,9 @@ export class KeybindingsEditor extends BaseEditor implements IKeybindingsEditor
 		this._register(this.searchWidget.onDidChange(searchValue => this.delayedFiltering.trigger(() => this.filterKeybindings())));
 		this._register(this.searchWidget.onEscape(() => this.recordKeysAction.checked = false));
 
+		const actionsContainer = DOM.append(searchContainer, DOM.$('.keybindings-search-actions-container'));
+		const recordingBadge = this.createRecordingBadge(actionsContainer);
+
 		const sortByPrecedenceActionKeybinding = this.keybindingsService.lookupKeybinding(KEYBINDINGS_EDITOR_COMMAND_SORTBY_PRECEDENCE);
 		const sortByPrecedenceActionLabel = localize('sortByPrecedeneLabel', "Sort by Precedence");
 		this.sortByPrecedenceAction = new Action('keybindings.editor.sortByPrecedence', sortByPrecedenceActionKeybinding ? localize('sortByPrecedeneLabelWithKeybinding', "{0} ({1})", sortByPrecedenceActionLabel, sortByPrecedenceActionKeybinding.getLabel()) : sortByPrecedenceActionLabel, 'sort-by-precedence');
@@ -329,6 +333,7 @@ export class KeybindingsEditor extends BaseEditor implements IKeybindingsEditor
 		this.recordKeysAction.checked = false;
 		this._register(this.recordKeysAction.onDidChange(e => {
 			if (e.checked !== void 0) {
+				DOM.toggleClass(recordingBadge, 'disabled', !e.checked);
 				if (e.checked) {
 					this.searchWidget.inputBox.setPlaceHolder(keybindingsSearchPlaceholder);
 					this.searchWidget.inputBox.setAriaLabel(keybindingsSearchPlaceholder);
@@ -343,7 +348,7 @@ export class KeybindingsEditor extends BaseEditor implements IKeybindingsEditor
 			}
 		}));
 
-		this.actionBar = this._register(new ActionBar(searchContainer, {
+		this.actionBar = this._register(new ActionBar(actionsContainer, {
 			animated: false,
 			actionItemProvider: (action: Action) => {
 				if (action.id === this.sortByPrecedenceAction.id) {
@@ -361,6 +366,32 @@ export class KeybindingsEditor extends BaseEditor implements IKeybindingsEditor
 		this.createOpenKeybindingsElement(this.headerContainer);
 	}
 
+	private createRecordingBadge(container: HTMLElement): HTMLElement {
+		const recordingBadge = DOM.append(container, DOM.$('.recording-badge.disabled'));
+		recordingBadge.textContent = localize('recording', "Recording Keys");
+		this._register(attachStylerCallback(this.themeService, { badgeBackground, contrastBorder, badgeForeground }, colors => {
+			const background = colors.badgeBackground ? colors.badgeBackground.toString() : null;
+			const border = colors.contrastBorder ? colors.contrastBorder.toString() : null;
+			const color = colors.badgeForeground ? colors.badgeForeground.toString() : null;
+
+			recordingBadge.style.backgroundColor = background;
+			recordingBadge.style.borderWidth = border ? '1px' : null;
+			recordingBadge.style.borderStyle = border ? 'solid' : null;
+			recordingBadge.style.borderColor = border;
+			recordingBadge.style.color = color ? color.toString() : null;
+		}));
+		return recordingBadge;
+	}
+
+	private layoutSearchWidget(dimension: DOM.Dimension): void {
+		this.searchWidget.layout(dimension);
+		DOM.toggleClass(this.headerContainer, 'small', dimension.width < 400);
+		this.searchWidget.inputBox.inputElement.style.paddingRight = '60px';
+		if (dimension.width > 400 && this.recordKeysAction.checked) {
+			this.searchWidget.inputBox.inputElement.style.paddingRight = '180px';
+		}
+	}
+
 	private createOpenKeybindingsElement(parent: HTMLElement): void {
 		const openKeybindingsContainer = DOM.append(parent, $('.open-keybindings-container'));
 		DOM.append(openKeybindingsContainer, $('', null, localize('header-message', "For advanced customizations open and edit")));

src/vs/workbench/parts/preferences/browser/media/keybindingsEditor.css

@@ -17,37 +17,36 @@
 	position: relative;
 }
 
-.keybindings-editor > .keybindings-header > .search-container > .monaco-action-bar {
+.keybindings-editor > .keybindings-header > .search-container > .keybindings-search-actions-container {
 	position: absolute;
 	top: 0;
 	right: 10px;
 	margin-top: 5px;
+	display: flex;
 }
 
-.keybindings-editor > .keybindings-header > .search-container > .monaco-action-bar .action-item {
-	width: 28px;
-}
-
-.keybindings-editor > .keybindings-header > .search-container > .monaco-action-bar .action-item > .sort-by-precedence {
-	background: url('sort_precedence.svg') center center no-repeat;
+.keybindings-editor > .keybindings-header > .search-container > .keybindings-search-actions-container > .recording-badge {
+	margin-right: 8px;
+	padding: 0px 8px;
+	border-radius: 2px;
 }
 
-.hc-black .keybindings-editor > .keybindings-header > .search-container > .monaco-action-bar .action-item > .sort-by-precedence,
-.vs-dark .keybindings-editor > .keybindings-header > .search-container > .monaco-action-bar .action-item > .sort-by-precedence {
-	background: url('sort_precedence_inverse.svg') center center no-repeat;
+.keybindings-editor > .keybindings-header.small > .search-container > .keybindings-search-actions-container > .recording-badge,
+.keybindings-editor > .keybindings-header > .search-container > .keybindings-search-actions-container > .recording-badge.disabled {
+	display: none;
 }
 
-.keybindings-editor > .keybindings-header .search-container > .settings-search-input {
-	vertical-align: middle;
+.keybindings-editor > .keybindings-header > .search-container > .keybindings-search-actions-container > .monaco-action-bar .action-item {
+	margin-right: 4px;
 }
 
-.keybindings-editor > .keybindings-header .search-container > .settings-search-input > .monaco-inputbox {
-	height: 30px;
+.keybindings-editor > .keybindings-header > .search-container > .keybindings-search-actions-container > .monaco-action-bar .action-item > .sort-by-precedence {
+	background: url('sort_precedence.svg') center center no-repeat;
 }
 
-.keybindings-editor > .keybindings-header .search-container > .settings-search-input > .monaco-inputbox .input {
-	font-size: 14px;
-	padding-left:10px;
+.hc-black .keybindings-editor > .keybindings-header > .search-container > .keybindings-search-actions-container > .monaco-action-bar .action-item > .sort-by-precedence,
+.vs-dark .keybindings-editor > .keybindings-header > .search-container > .keybindings-search-actions-container > .monaco-action-bar .action-item > .sort-by-precedence {
+	background: url('sort_precedence_inverse.svg') center center no-repeat;
 }
 
 .keybindings-editor > .keybindings-header .open-keybindings-container {