💄

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

@@ -61,7 +61,6 @@ export class KeybindingsEditor extends BaseEditor implements IKeybindingsEditor
 	private overlayContainer: HTMLElement;
 	private defineKeybindingWidget: DefineKeybindingWidget;
 
-	private keybindingsListHeader: HTMLElement;
 	private keybindingsListContainer: HTMLElement;
 	private unAssignedKeybindingItemToRevealAndFocus: IKeybindingItemEntry;
 	private listEntries: IListEntry[];
@@ -392,20 +391,24 @@ export class KeybindingsEditor extends BaseEditor implements IKeybindingsEditor
 
 	private createBody(parent: HTMLElement): void {
 		const bodyContainer = DOM.append(parent, $('.keybindings-body'));
+		this.createListHeader(bodyContainer);
 		this.createList(bodyContainer);
 	}
 
-	private createList(parent: HTMLElement): void {
-		this.keybindingsListContainer = DOM.append(parent, $('.keybindings-list-container'));
-
-		this.keybindingsListHeader = DOM.append(this.keybindingsListContainer, $('.keybindings-list-header'));
-		DOM.append(this.keybindingsListHeader,
+	private createListHeader(parent: HTMLElement): void {
+		const keybindingsListHeader = DOM.append(parent, $('.keybindings-list-header'));
+		keybindingsListHeader.style.height = '30px';
+		keybindingsListHeader.style.lineHeight = '30px';
+		DOM.append(keybindingsListHeader,
 			$('.header.actions'),
 			$('.header.command', null, localize('command', "Command")),
 			$('.header.keybinding', null, localize('keybinding', "Keybinding")),
 			$('.header.source', null, localize('source', "Source")),
 			$('.header.when', null, localize('when', "When")));
+	}
 
+	private createList(parent: HTMLElement): void {
+		this.keybindingsListContainer = DOM.append(parent, $('.keybindings-list-container'));
 		this.keybindingsList = this._register(this.instantiationService.createInstance(WorkbenchList, this.keybindingsListContainer, new Delegate(), [new KeybindingItemRenderer(this, this.keybindingsService)],
 			{ identityProvider: { getId: e => e.id }, ariaLabel: localize('keybindingsLabel', "Keybindings"), setRowLineHeight: false })) as WorkbenchList<IListEntry>;
 		this._register(this.keybindingsList.onContextMenu(e => this.onContextMenu(e)));
@@ -507,7 +510,7 @@ export class KeybindingsEditor extends BaseEditor implements IKeybindingsEditor
 	}
 
 	private layoutKeybindingsList(): void {
-		const listHeight = this.dimension.height - (DOM.getDomNodePagePosition(this.headerContainer).height + 12 /*padding*/ + DOM.getDomNodePagePosition(this.keybindingsListHeader).height);
+		const listHeight = this.dimension.height - (DOM.getDomNodePagePosition(this.headerContainer).height + 12 /*padding*/ + 30 /*list header*/);
 		this.keybindingsListContainer.style.height = `${listHeight}px`;
 		this.keybindingsList.layout(listHeight);
 	}

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

@@ -93,36 +93,32 @@
 
 /** List based styling **/
 
+.keybindings-editor > .keybindings-body > .keybindings-list-header,
 .keybindings-editor > .keybindings-body .keybindings-list-container {
 	width: 100%;
 	border-spacing: 0;
 	border-collapse: separate;
 }
 
-.keybindings-editor > .keybindings-body > .keybindings-list-container .keybindings-list-header {
-	height: 30px;
-	line-height: 30px;
-}
-
-.keybindings-editor > .keybindings-body > .keybindings-list-container .keybindings-list-header,
+.keybindings-editor > .keybindings-body > .keybindings-list-header,
 .keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list-row {
 	cursor: default;
 	display: flex;
 }
 
-.keybindings-editor > .keybindings-body > .keybindings-list-container .keybindings-list-header,
+.keybindings-editor > .keybindings-body > .keybindings-list-header,
 .keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list-row.odd:not(.focused):not(.selected):not(:hover),
 .keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list:not(:focus) .monaco-list-row.focused.odd:not(.selected):not(:hover),
 .keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list:not(.focused) .monaco-list-row.focused.odd:not(.selected):not(:hover) {
 	background-color: rgba(130, 130, 130, 0.04);
 }
 
-.keybindings-editor > .keybindings-body > .keybindings-list-container .keybindings-list-header > .header {
+.keybindings-editor > .keybindings-body > .keybindings-list-header > .header {
 	text-align: left;
 	font-weight: bold;
 }
 
-.keybindings-editor > .keybindings-body > .keybindings-list-container .keybindings-list-header > .header,
+.keybindings-editor > .keybindings-body > .keybindings-list-header > .header,
 .keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list-row .column {
 	align-items: center;
 	display: flex;
@@ -130,13 +126,13 @@
 	margin-right: 6px;
 }
 
-.keybindings-editor > .keybindings-body > .keybindings-list-container .keybindings-list-header > .actions,
+.keybindings-editor > .keybindings-body > .keybindings-list-header > .actions,
 .keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list-row .actions {
 	width: 24px;
 	padding-right: 2px;
 }
 
-.keybindings-editor > .keybindings-body > .keybindings-list-container .keybindings-list-header > .command,
+.keybindings-editor > .keybindings-body > .keybindings-list-header > .command,
 .keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list-row .command {
 	flex: 0.75;
 }
@@ -152,7 +148,7 @@
 	margin-top: 2px;
 }
 
-.keybindings-editor > .keybindings-body > .keybindings-list-container .keybindings-list-header > .keybinding,
+.keybindings-editor > .keybindings-body > .keybindings-list-header > .keybinding,
 .keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list-row .keybinding {
 	flex: 0.5;
 }
@@ -161,12 +157,12 @@
 	padding-left: 10px;
 }
 
-.keybindings-editor > .keybindings-body > .keybindings-list-container .keybindings-list-header > .source,
+.keybindings-editor > .keybindings-body > .keybindings-list-header > .source,
 .keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list-row .source {
 	flex: 0 0 100px;
 }
 
-.keybindings-editor > .keybindings-body > .keybindings-list-container .keybindings-list-header > .when,
+.keybindings-editor > .keybindings-body > .keybindings-list-header > .when,
 .keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list-row .when {
 	flex: 1;
 }