initially hide filter box and reveal it when starting to type, #9418

microsoft · Jul 17, 2018 · 226c49d · 226c49d
1 parent d1272ff
commit 226c49d
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 6 deletions.
diff --git a/src/vs/platform/list/browser/listService.ts b/src/vs/platform/list/browser/listService.ts
@@ -23,12 +23,12 @@ import { DefaultController, IControllerOptions, OpenMode, ClickBehavior, Default
 import { isUndefinedOrNull } from 'vs/base/common/types';
 import { IEditorOptions } from 'vs/platform/editor/common/editor';
 import { Event, Emitter } from 'vs/base/common/event';
-import { createStyleSheet, addStandardDisposableListener, getTotalHeight } from 'vs/base/browser/dom';
+import { createStyleSheet, addStandardDisposableListener, getTotalHeight, removeClass, addClass } from 'vs/base/browser/dom';
 import { ScrollbarVisibility } from 'vs/base/common/scrollable';
 import { InputBox, IInputOptions } from 'vs/base/browser/ui/inputbox/inputBox';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { TPromise } from 'vs/base/common/winjs.base';
-import { onUnexpectedError } from 'vs/base/common/errors';
+import { onUnexpectedError, canceled } from 'vs/base/common/errors';
 import { KeyCode } from 'vs/base/common/keyCodes';
 import { IKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 
@@ -605,6 +605,7 @@ export class HighlightingTreeController extends WorkbenchTreeController {
 
 export class HighlightingWorkbenchTree extends WorkbenchTree {
 
+	protected readonly domNode: HTMLElement;
 	protected readonly inputContainer: HTMLElement;
 	protected readonly input: InputBox;
 
@@ -634,10 +635,13 @@ export class HighlightingWorkbenchTree extends WorkbenchTree {
 		parent.appendChild(container);
 
 		// create tree
-		treeConfiguration.controller = treeConfiguration.controller || instantiationService.createInstance(HighlightingTreeController, {}, () => this.input.focus());
+		treeConfiguration.controller = treeConfiguration.controller || instantiationService.createInstance(HighlightingTreeController, {}, () => this.onTypeInTree());
 		super(treeContainer, treeConfiguration, treeOptions, contextKeyService, listService, themeService, instantiationService, configurationService);
 		this.renderer = treeConfiguration.renderer;
 
+		this.domNode = container;
+		addClass(this.domNode, 'inactive');
+
 		// create input
 		this.inputContainer = inputContainer;
 		this.input = new InputBox(inputContainer, contextViewService, listOptions);
@@ -665,6 +669,10 @@ export class HighlightingWorkbenchTree extends WorkbenchTree {
 	setInput(element: any): TPromise<any> {
 		this.input.setEnabled(false);
 		return super.setInput(element).then(value => {
+			if (!this.input.inputElement) {
+				// has been disposed in the meantime -> cancel
+				return Promise.reject(canceled());
+			}
 			this.input.setEnabled(true);
 			return value;
 		});
@@ -675,6 +683,12 @@ export class HighlightingWorkbenchTree extends WorkbenchTree {
 		super.layout(isNaN(height) ? height : height - getTotalHeight(this.inputContainer), width);
 	}
 
+	private onTypeInTree(): void {
+		removeClass(this.domNode, 'inactive');
+		this.input.focus();
+		this.layout();
+	}
+
 	private lastSelection: any[];
 
 	private updateHighlights(pattern: string): void {
@@ -693,6 +707,7 @@ export class HighlightingWorkbenchTree extends WorkbenchTree {
 		if (topElement && pattern) {
 			this.reveal(topElement).then(_ => {
 				this.setSelection([topElement], this);
+				this.setFocus(topElement, this);
 				return this.refresh();
 			}, onUnexpectedError);
 		} else {

diff --git a/src/vs/workbench/browser/parts/editor/breadcrumbsPicker.ts b/src/vs/workbench/browser/parts/editor/breadcrumbsPicker.ts
@@ -56,9 +56,6 @@ export abstract class BreadcrumbsPicker {
 		this._focus = dom.trackFocus(this._domNode);
 		this._focus.onDidBlur(_ => this._onDidPickElement.fire(undefined), undefined, this._disposables);
 
-		const treeContainer = document.createElement('div');
-		treeContainer.className = 'breadcrumbs-picker-tree';
-		this._domNode.appendChild(treeContainer);
 		const treeConifg = this._completeTreeConfiguration({ dataSource: undefined, renderer: undefined });
 		this._tree = this._instantiationService.createInstance(HighlightingWorkbenchTree, this._domNode, treeConifg, {}, { placeholder: localize('placeholder', "Find") });
 		this._disposables.push(this._tree.onDidChangeSelection(e => {

diff --git a/src/vs/workbench/browser/parts/editor/media/breadcrumbscontrol.css b/src/vs/workbench/browser/parts/editor/media/breadcrumbscontrol.css
@@ -24,9 +24,18 @@
 	padding: 5px 9px;
 	position: relative;
 	box-sizing: border-box;
+	height: 36px;
 }
 
 .monaco-workbench .monaco-breadcrumbs-picker .highlighting-tree>.tree {
+	height: calc(100% - 36px);
+}
+
+.monaco-workbench .monaco-breadcrumbs-picker .highlighting-tree.inactive>.input {
+	display: none;
+}
+
+.monaco-workbench .monaco-breadcrumbs-picker .highlighting-tree.inactive>.tree {
 	height: 100%;
 }