#18095 Keybindings Editor

- Use List widget to render keybindings

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

@@ -16,17 +16,6 @@
 
 .keybindings-editor > .keybindings-header {
 	padding: 0px 10px 11px 0;
-	border-bottom: 1px solid #efeff2;
-	display: flex;
-	flex-wrap: wrap;
-}
-
-.vs-dark .keybindings-editor > .keybindings-header {
-	border-bottom: 1px solid #2d2d2d;
-}
-
-.keybindings-editor > .keybindings-header .search-container {
-	flex: 1;
 }
 
 .keybindings-editor > .keybindings-header .search-container > .settings-search-input {
@@ -46,254 +35,92 @@
 	padding-left:10px;
 }
 
-/* body styling */
-
-.keybindings-editor > .keybindings-body .open-keybindings-container {
+.keybindings-editor > .keybindings-header .open-keybindings-container {
 	margin-top: 10px;
 	color: #aaa;
 }
 
-.keybindings-editor > .keybindings-body .open-keybindings-container > .file-name {
+.keybindings-editor > .keybindings-header .open-keybindings-container > .file-name {
 	text-decoration: underline;
 	cursor: pointer;
 }
 
-.keybindings-editor > .keybindings-body > .monaco-scrollable-element {
-	height: 100%;
-	overflow: hidden;
-}
-
-.keybindings-editor > .keybindings-body > .monaco-scrollable-element > .keybindings-scroll-container {
-	height: 100%;
-	overflow-y: scroll;
-	box-sizing: border-box;
-	margin-right: 10px;
-}
-
-.keybindings-editor > .keybindings-body .content details > summary {
-	cursor: pointer;
-	margin-bottom: 10px;
-	font-weight: bold;
-	font-size: 120%;
-	border-bottom: 1px solid rgba(128, 128, 128, 0.22);
-	padding: 6px 4px;
-}
-
-.keybindings-editor > .keybindings-body .content table {
-	width: 100%;
-	border-spacing: 0;
-	border-collapse: separate;
-	margin-top: 10px;
-}
-
-.keybindings-editor > .keybindings-body .content table tr {
-	display: flex;
-}
-
-.keybindings-editor > .keybindings-body .content table tr:focus {
-	outline: none;
-}
-
-.keybindings-editor > .keybindings-body .content table tr:nth-child(odd) {
-	background-color: rgba(130, 130, 130, 0.04);
-}
-
-.keybindings-editor > .keybindings-body .content details > summary:focus,
-.keybindings-editor > .keybindings-body .content table tr:not(:first-child).focussed,
-.keybindings-editor > .keybindings-body .content table tr:not(:first-child):hover {
-	background-color: rgba(128, 128, 128, 0.15);
-}
-
-.keybindings-editor > .keybindings-body .content .empty-message {
-	margin-left: 40px;
-}
-
-.keybindings-editor > .keybindings-body .content table th,
-.keybindings-editor > .keybindings-body .content table td {
-	padding: 2px 16px 2px 4px;
-	align-items: center;
-	display: flex;
-	overflow: hidden;
-}
-
-.keybindings-editor > .keybindings-body .content table th.actions,
-.keybindings-editor > .keybindings-body .content table td.actions {
-	width: 25px;
-	padding: 0px;
-}
-
-.keybindings-editor > .keybindings-body .content table th.command,
-.keybindings-editor > .keybindings-body .content table td.command {
-	flex: 2.5;
-	flex-wrap: wrap;
-}
-
-.keybindings-editor > .keybindings-body .content table th.keybinding,
-.keybindings-editor > .keybindings-body .content table td.keybinding {
-	flex: 2;
-}
-
-.keybindings-editor > .keybindings-body .content table th.when,
-.keybindings-editor > .keybindings-body .content table td.when {
-	flex: 2;
-}
-
-.keybindings-editor > .keybindings-body .content table th.source,
-.keybindings-editor > .keybindings-body .content table td.source {
-	flex: 0.5;
-}
-
-.keybindings-editor > .keybindings-body .content table th:last-child,
-.keybindings-editor > .keybindings-body .content table td:last-child {
-	padding: 2px 4px;
-}
-
-.keybindings-editor > .keybindings-body .content table th {
-	text-align: left;
-}
-
-.keybindings-editor > .keybindings-body .content details {
-	margin-top: 20px;
-}
-
-.keybindings-editor > .keybindings-body .content table td .empty {
-	padding-left: 4px;
-}
-
-.keybindings-editor > .keybindings-body .content table > tr > td > .code {
-	font-family: Monaco, Menlo, Consolas, "Droid Sans Mono", "Inconsolata", "Courier New", monospace, "Droid Sans Fallback";
-	font-size: 90%;
-	padding: 1px 4px;
-	opacity: 0.8;
-}
-
-.keybindings-editor > .keybindings-body .content table > tr > td > .code.strong {
-	background-color: rgba(128, 128, 128, 0.17);
-	border-radius: 4px;
-}
-
-.keybindings-editor > .keybindings-body .content table > tr > td > .code:not(:first-child) {
-	margin-left: 0.5em;
-}
-
-.keybindings-editor > .keybindings-body .content table td .highlight {
-	color: #007ACC;
-	font-weight: bold;
-}
-
-.vs-dark .keybindings-editor > .keybindings-body .content table td .highlight {
-	color: #0097FB;
-}
-
-.keybindings-editor > .keybindings-body .content table > tr > td .monaco-action-bar {
-	display: none;
-	flex: 1;
-}
-
-.keybindings-editor > .keybindings-body .content table > tr.focussed > td.actions .monaco-action-bar,
-.keybindings-editor > .keybindings-body .content table > tr:hover > td .monaco-action-bar {
-	display: flex;
-}
-
-.keybindings-editor > .keybindings-body .content table > tr > td .monaco-action-bar .action-item > .icon {
-	width:16px;
-	height: 16px;
-	cursor: pointer;
-	margin-right: 4px;
-}
-
-.keybindings-editor > .keybindings-body .content table > tr > td .monaco-action-bar .action-item > .icon.edit {
-	background: url('edit.svg') center center no-repeat;
-	transform: rotate(-90deg);
-}
-
-.hc-black .keybindings-editor > .keybindings-body .content table > tr > td .monaco-action-bar .action-item > .icon.edit,
-.vs-dark .keybindings-editor > .keybindings-body .content table > tr > td .monaco-action-bar .action-item > .icon.edit {
-	background: url('edit_inverse.svg') center center no-repeat;
-}
+/* body styling */
 
-.keybindings-editor > .keybindings-body .content table > tr > td .monaco-action-bar .action-item > .icon.add {
-	background: url('add.svg') center center no-repeat;
+.keybindings-editor > .keybindings-body {
+	border-top: 1px solid #efeff2;
 }
 
-.hc-black .keybindings-editor > .keybindings-body .content table > tr > td .monaco-action-bar .action-item > .icon.add,
-.vs-dark .keybindings-editor > .keybindings-body .content table > tr > td .monaco-action-bar .action-item > .icon.add {
-	background: url('add_inverse.svg') center center no-repeat;
+.vs-dark .keybindings-editor > .keybindings-body {
+	border-top: 1px solid #2d2d2d;
 }
 
 
 /** 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-header {
-	margin-top: 10px;
-}
-
-.keybindings-editor > .keybindings-body > .keybindings-list-header,
 .keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list-row {
 	display: flex;
 }
 
-.keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list-row:focus {
-	outline:none;
-}
-
-.keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list-row:nth-child(odd) {
+.keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list-row.keybindings-list-header,
+.keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list-row.even {
 	background-color: rgba(130, 130, 130, 0.04);
 }
 
-.keybindings-editor > .keybindings-body .keybindings-list-container .monaco-list-row:not(:first-child).focussed,
-.keybindings-editor > .keybindings-body .keybindings-list-container .monaco-list-row:not(:first-child):hover {
-	background-color: rgba(128, 128, 128, 0.15);
+.keybindings-editor > .keybindings-body .keybindings-list-container .monaco-list-row.keybindings-list-header {
+	cursor: default;
 }
 
-.keybindings-editor > .keybindings-body .keybindings-list-header > .header:last-child,
-.keybindings-editor > .keybindings-body .keybindings-list-container .monaco-list-row > .column:last-child {
-	padding: 2px 4px;
+.keybindings-editor > .keybindings-body .keybindings-list-container .monaco-list-row.keybindings-list-header.focused,
+.keybindings-editor > .keybindings-body .keybindings-list-container .monaco-list-row.keybindings-list-header.selected,
+.keybindings-editor > .keybindings-body .keybindings-list-container .monaco-list-row.keybindings-list-header:hover {
+	background-color: transparent;
 }
 
-.keybindings-editor > .keybindings-body .keybindings-list-header > .header {
+.keybindings-editor > .keybindings-body .keybindings-list-container .monaco-list-row > .header {
 	text-align: left;
 	font-weight: bold;
 }
 
-.keybindings-editor > .keybindings-body > .keybindings-list-header .header,
+.keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list-row .header,
 .keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list-row .column {
-	padding: 2px 16px 2px 4px;
 	align-items: center;
 	display: flex;
 	overflow: hidden;
 }
 
-.keybindings-editor > .keybindings-body > .keybindings-list-header .actions,
 .keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list-row .actions {
-	width: 25px;
-	padding: 0px;
+	width: 24px;
+	padding-right: 2px;
 }
 
-.keybindings-editor > .keybindings-body > .keybindings-list-header .command,
 .keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list-row .command {
-	flex: 3;
+	flex: 1;
+}
+
+.keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list-row .command-id-label {
+	flex-direction: column;
+	align-items: flex-start;
 }
 
-.keybindings-editor > .keybindings-body > .keybindings-list-header .keybinding,
 .keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list-row .keybinding {
-	flex: 2;
+	flex: 1;
+}
+
+.keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list-row .keybinding .monaco-highlighted-label {
+	padding-left: 10px;
 }
 
-.keybindings-editor > .keybindings-body > .keybindings-list-header .source,
 .keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list-row .source {
 	flex: 0.5;
 }
 
-.keybindings-editor > .keybindings-body > .keybindings-list-header .when,
 .keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list-row .when {
 	flex: 1;
 }
@@ -305,19 +132,15 @@
 .keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list-row > .column > .code {
 	font-family: Monaco, Menlo, Consolas, "Droid Sans Mono", "Inconsolata", "Courier New", monospace, "Droid Sans Fallback";
 	font-size: 90%;
-	padding: 1px 4px;
 	opacity: 0.8;
 }
 
 .keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list-row > .column > .code.strong {
+	padding: 1px 4px;
 	background-color: rgba(128, 128, 128, 0.17);
 	border-radius: 4px;
 }
 
-.keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list-row > .column > .code:not(:first-child) {
-	margin-left: 0.5em;
-}
-
 .keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list-row > .column .highlight {
 	color: #007ACC;
 	font-weight: bold;
@@ -332,7 +155,8 @@
 	flex: 1;
 }
 
-.keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list-row.focussed > .column.actions .monaco-action-bar,
+.keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list-row.selected > .column.actions .monaco-action-bar,
+.keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list-row.focused > .column.actions .monaco-action-bar,
 .keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list-row:hover > .column.actions .monaco-action-bar {
 	display: flex;
 }
@@ -341,7 +165,7 @@
 	width:16px;
 	height: 16px;
 	cursor: pointer;
-	margin-right: 4px;
+	margin-top: 3px;
 }
 
 .keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list-row > .column .monaco-action-bar .action-item > .icon.edit {
@@ -361,4 +185,4 @@
 .hc-black .keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list-row > .column .monaco-action-bar .action-item > .icon.add,
 .vs-dark .keybindings-editor > .keybindings-body > .keybindings-list-container .monaco-list-row > .column .monaco-action-bar .action-item > .icon.add {
 	background: url('add_inverse.svg') center center no-repeat;
-}*/
+}

src/vs/workbench/parts/preferences/common/keybindingsEditorModel.ts

@@ -14,8 +14,15 @@ import { EditorModel } from 'vs/workbench/common/editor';
 import { IExtensionService } from 'vs/platform/extensions/common/extensions';
 import { IKeybindingService, IKeybindingItem2, KeybindingSource } from 'vs/platform/keybinding/common/keybinding';
 
-export interface IKeybindingItemEntry {
+export const KEYBINDING_ENTRY_TEMPLATE_ID = 'keybinding.entry.template';
+export const KEYBINDING_HEADER_TEMPLATE_ID = 'keybinding.header.template';
+
+export interface IListEntry {
 	id: string;
+	templateId: string;
+}
+
+export interface IKeybindingItemEntry extends IListEntry {
 	keybindingItem: IKeybindingItem;
 	commandIdMatches?: IMatch[];
 	commandLabelMatches?: IMatch[];
@@ -42,7 +49,7 @@ export class KeybindingsEditorModel extends EditorModel {
 	public fetch(searchValue: string): IKeybindingItemEntry[] {
 		searchValue = searchValue.trim();
 		return searchValue ? this.fetchKeybindingItems(searchValue) :
-			this._keybindingItems.map(keybindingItem => ({ id: KeybindingsEditorModel.getId(keybindingItem), keybindingItem }));
+			this._keybindingItems.map(keybindingItem => ({ id: KeybindingsEditorModel.getId(keybindingItem), keybindingItem, templateId: KEYBINDING_ENTRY_TEMPLATE_ID }));
 	}
 
 	private fetchKeybindingItems(searchValue: string): IKeybindingItemEntry[] {
@@ -54,6 +61,7 @@ export class KeybindingsEditorModel extends EditorModel {
 			if (keybindingMatches || commandIdMatches || commandLabelMatches) {
 				result.push({
 					id: KeybindingsEditorModel.getId(keybindingItem),
+					templateId: KEYBINDING_ENTRY_TEMPLATE_ID,
 					commandLabelMatches,
 					keybindingItem,
 					keybindingMatches,