Select All checkbox

src/vs/workbench/browser/parts/quickinput/quickInput.css

@@ -17,12 +17,14 @@
 	padding: 6px;
 }
 
-.quick-input-box {
-	flex-grow: 1;
+.quick-input-select-all {
+	align-self: center;
+	margin: 0;
 }
 
-.quick-input-box .monaco-inputbox > .wrapper > .input {
-	padding-left: 15px;
+.quick-input-box {
+	flex-grow: 1;
+	margin-left: 5px;
 }
 
 .quick-input-action {
@@ -36,7 +38,6 @@
 }
 
 .quick-input-checkbox-list {
-	margin-left: 3px;
 	line-height: 22px;
 }
 
@@ -49,6 +50,7 @@
 	overflow: hidden;
 	display: flex;
 	height: 100%;
+	padding: 0 6px;
 }
 
 .quick-input-checkbox-list .quick-input-checkbox-list-label {
@@ -60,6 +62,7 @@
 
 .quick-input-checkbox-list .quick-input-checkbox-list-checkbox {
 	align-self: center;
+	margin: 0;
 	/* TODO */
 	/* margin-top: 5px; */
 }
@@ -71,7 +74,7 @@
 	flex-direction: column;
 	height: 100%;
 	flex: 1;
-	margin-left: 1px;
+	margin-left: 10px;
 }
 
 .quick-input-checkbox-list .quick-input-checkbox-list-rows > .quick-input-checkbox-list-row {

src/vs/workbench/browser/parts/quickinput/quickInput.ts

@@ -37,6 +37,7 @@ export class QuickInputService extends Component implements IQuickInputService {
 
 	private layoutDimensions: Dimension;
 	private container: HTMLElement;
+	private selectAll: HTMLInputElement;
 	private inputBox: QuickInputBox;
 	private checkboxList: QuickInputCheckboxList;
 
@@ -63,6 +64,13 @@ export class QuickInputService extends Component implements IQuickInputService {
 
 		const headerContainer = dom.append(this.container, $('.quick-input-header'));
 
+		this.selectAll = <HTMLInputElement>dom.append(headerContainer, $('input.quick-input-select-all'));
+		this.selectAll.type = 'checkbox';
+		this.toUnbind.push(dom.addStandardDisposableListener(this.selectAll, dom.EventType.CHANGE, e => {
+			const checked = this.selectAll.checked;
+			this.checkboxList.setAllSelected(checked);
+		}));
+
 		this.inputBox = new QuickInputBox(headerContainer);
 		this.toUnbind.push(this.inputBox);
 		this.inputBox.style(this.themeService.getTheme());
@@ -97,6 +105,9 @@ export class QuickInputService extends Component implements IQuickInputService {
 
 		this.checkboxList = this.instantiationService.createInstance(QuickInputCheckboxList, this.container);
 		this.toUnbind.push(this.checkboxList);
+		this.toUnbind.push(this.checkboxList.onSelectionChanged(() => {
+			this.selectAll.checked = this.checkboxList.getAllSelected();
+		}));
 
 		this.toUnbind.push(dom.addDisposableListener(this.container, 'focusout', (e: FocusEvent) => {
 			for (let element = <Element>e.relatedTarget; element; element = element.parentElement) {
@@ -150,6 +161,7 @@ export class QuickInputService extends Component implements IQuickInputService {
 		this.inputBox.setPlaceholder(options.placeHolder ? localize('quickInput.ctrlSpaceToSelectWithPlaceholder', "{1} ({0} to toggle)", 'Ctrl+Space', options.placeHolder) : localize('quickInput.ctrlSpaceToSelect', "{0} to toggle", 'Ctrl+Space'));
 		// TODO: Progress indication.
 		this.checkboxList.setElements(await picks);
+		this.selectAll.checked = this.checkboxList.getAllSelected();
 
 		this.container.style.display = null;
 		this.updateLayout();

src/vs/workbench/browser/parts/quickinput/quickInputCheckboxList.ts

@@ -15,7 +15,7 @@ import { IPickOpenEntry } from 'vs/platform/quickOpen/common/quickOpen';
 import { IMatch } from 'vs/base/common/filters';
 import { matchesFuzzyOcticonAware, parseOcticons } from 'vs/base/common/octicon';
 import { compareAnything } from 'vs/base/common/comparers';
-import { Emitter } from 'vs/base/common/event';
+import { Emitter, Event } from 'vs/base/common/event';
 import { assign } from 'vs/base/common/objects';
 import { KeyCode } from 'vs/base/common/keyCodes';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
@@ -103,7 +103,7 @@ class SelectedElementRenderer implements IRenderer<SelectableElement, ISelectedE
 	}
 
 	renderElement(element: SelectableElement, index: number, data: ISelectedElementTemplateData): void {
-		dispose(data.toDisposeElement);
+		data.toDisposeElement = dispose(data.toDisposeElement);
 		data.element = element;
 		data.checkbox.checked = element.selected;
 		data.toDisposeElement.push(element.onSelected(selected => data.checkbox.checked = selected));
@@ -122,7 +122,8 @@ class SelectedElementRenderer implements IRenderer<SelectableElement, ISelectedE
 	}
 
 	disposeTemplate(data: ISelectedElementTemplateData): void {
-		dispose(data.toDisposeTemplate);
+		data.toDisposeElement = dispose(data.toDisposeElement);
+		data.toDisposeTemplate = dispose(data.toDisposeTemplate);
 	}
 }
 
@@ -142,6 +143,9 @@ export class QuickInputCheckboxList {
 	private container: HTMLElement;
 	private list: WorkbenchList<SelectableElement>;
 	private elements: SelectableElement[] = [];
+	private _onSelectionChanged = new Emitter<IPickOpenEntry>();
+	onSelectionChanged: Event<IPickOpenEntry> = this._onSelectionChanged.event;
+	private elementDisposables: IDisposable[] = [];
 	private disposables: IDisposable[] = [];
 
 	constructor(
@@ -163,12 +167,24 @@ export class QuickInputCheckboxList {
 		}));
 	}
 
+	getAllSelected() {
+		return this.getSelectedElements().length === this.elements.length;
+	}
+
+	setAllSelected(select: boolean) {
+		this.elements.forEach(element => element.selected = select);
+	}
+
 	setElements(elements: IPickOpenEntry[]): void {
+		this.elementDisposables = dispose(this.elementDisposables);
 		this.elements = elements.map((item, index) => new SelectableElement({
 			index,
 			item,
 			selected: !!item.selected
 		}));
+		this.elementDisposables.push(...this.elements.map(element => element.onSelected(() => {
+			this._onSelectionChanged.fire(element.item);
+		})));
 		this.list.splice(0, this.list.length, this.elements);
 		this.list.setSelection([]);
 		this.list.focusFirst();
@@ -244,6 +260,7 @@ export class QuickInputCheckboxList {
 	}
 
 	dispose() {
+		this.elementDisposables = dispose(this.elementDisposables);
 		this.disposables = dispose(this.disposables);
 	}
 }