From 730e26c5c53995ad83b70f739b6cfd800f679b64 Mon Sep 17 00:00:00 2001
From: Johannes Rieken <johannes.rieken@gmail.com>
Date: Thu, 12 Jul 2018 19:09:36 +0200
Subject: [PATCH] reveal then select, box input & tree in their own containers
 to prevent screen cheese

---
 .../browser/parts/editor/breadcrumbsControl.ts | 18 ++++++++++++------
 .../parts/editor/media/breadcrumbscontrol.css  | 12 ++++++++++--
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/vs/workbench/browser/parts/editor/breadcrumbsControl.ts b/src/vs/workbench/browser/parts/editor/breadcrumbsControl.ts
index a8b35ddb8bc..1cdd60daadd 100644
--- a/src/vs/workbench/browser/parts/editor/breadcrumbsControl.ts
+++ b/src/vs/workbench/browser/parts/editor/breadcrumbsControl.ts
@@ -309,25 +309,31 @@ export abstract class BreadcrumbsPicker {
 		this._focus = dom.trackFocus(this._domNode);
 		this._focus.onDidBlur(_ => this._onDidPickElement.fire(undefined), undefined, this._disposables);
 
-		this._input = new InputBox(this._domNode, undefined, { placeholder: localize('placeholder', "Find") });
+		const inputContainer = document.createElement('div');
+		inputContainer.className = 'breadcrumbs-picker-input';
+		this._domNode.appendChild(inputContainer);
+		this._input = new InputBox(inputContainer, undefined, { placeholder: localize('placeholder', "Find") });
 		this._input.setEnabled(false);
 		this._disposables.push(attachListStyler(this._input, this._themeService));
 
-		let treeConifg = this._completeTreeConfiguration({ dataSource: undefined, renderer: undefined });
-		this._tree = this._instantiationService.createInstance(WorkbenchTree, this._domNode, treeConifg, {});
+		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(WorkbenchTree, treeContainer, treeConifg, {});
 		this._disposables.push(this._tree.onDidChangeSelection(e => {
 			if (e.payload !== this) {
 				setTimeout(_ => this._onDidChangeSelection(e)); // need to debounce here because this disposes the tree and the tree doesn't like to be disposed on click
 			}
 		}));
 
-		this._tree.setInput(this._getInput(input)).then(_ => {
+		this._tree.setInput(this._getInput(input)).then(async _ => {
 
 			let selection = this._getInitialSelection(this._tree, input);
 			if (selection) {
+				await this._tree.reveal(selection);
 				this._tree.setSelection([selection], this);
 				this._tree.setFocus(selection);
-				this._tree.reveal(selection);
 			}
 
 			// input - interact with tree
@@ -361,7 +367,7 @@ export abstract class BreadcrumbsPicker {
 					this._tree.refresh(element).then(undefined, onUnexpectedError);
 				}
 				if (topElement) {
-					this._tree.reveal(topElement);
+					await this._tree.reveal(topElement);
 					this._tree.setFocus(topElement);
 					this._tree.setSelection([topElement], this);
 				}
diff --git a/src/vs/workbench/browser/parts/editor/media/breadcrumbscontrol.css b/src/vs/workbench/browser/parts/editor/media/breadcrumbscontrol.css
index 0df02e5269a..295029396a1 100644
--- a/src/vs/workbench/browser/parts/editor/media/breadcrumbscontrol.css
+++ b/src/vs/workbench/browser/parts/editor/media/breadcrumbscontrol.css
@@ -28,10 +28,18 @@
 
 .monaco-workbench .monaco-breadcrumbs-picker {
 	overflow: hidden;
+	display: flex;
+	flex-direction: column;
 }
 
-.monaco-workbench .monaco-breadcrumbs-picker .monaco-inputbox {
-	margin: 5px 9px;
+.monaco-workbench .monaco-breadcrumbs-picker .breadcrumbs-picker-input {
+	padding: 5px 9px;
+	position: relative;
+	box-sizing: border-box;
+}
+
+.monaco-workbench .monaco-breadcrumbs-picker .breadcrumbs-picker-tree {
+	height: 100%;
 }
 
 .monaco-workbench .monaco-breadcrumbs-picker .monaco-highlighted-label .highlight{
-- 
GitLab