aux window - fix layout of quick pick (microsoft#204331)

Author: bpasero

src/vs/platform/quickinput/browser/quickInputController.ts

@@ -41,7 +41,9 @@ export class QuickInputController extends Disposable {
 
 	private controller: IQuickInput | null = null;
 
-	private parentElement: HTMLElement;
+	private _container: HTMLElement;
+	get container() { return this._container; }
+
 	private styles: IQuickInputStyles;
 
 	private onShowEmitter = this._register(new Emitter<void>());
@@ -54,10 +56,11 @@ export class QuickInputController extends Disposable {
 
 	constructor(private options: IQuickInputOptions,
 		private readonly themeService: IThemeService,
-		private readonly layoutService: ILayoutService) {
+		private readonly layoutService: ILayoutService
+	) {
 		super();
 		this.idPrefix = options.idPrefix;
-		this.parentElement = options.container;
+		this._container = options.container;
 		this.styles = options.styles;
 		this._register(Event.runAndSubscribe(dom.onDidRegisterWindow, ({ window, disposables }) => this.registerKeyModsListeners(window, disposables), { window: mainWindow, disposables: this._store }));
 		this._register(dom.onWillUnregisterWindow(window => {
@@ -67,6 +70,7 @@ export class QuickInputController extends Disposable {
 				// existing parent to not loose functionality.
 				// (https://github.com/microsoft/vscode/issues/195870)
 				this.reparentUI(this.layoutService.mainContainer);
+				this.layout(this.layoutService.mainContainerDimension, this.layoutService.mainContainerOffset.quickPickTop);
 			}
 		}));
 	}
@@ -87,15 +91,16 @@ export class QuickInputController extends Disposable {
 			// In order to support aux windows, re-parent the controller
 			// if the original event is from a different document
 			if (showInActiveContainer) {
-				if (this.parentElement.ownerDocument !== this.layoutService.activeContainer.ownerDocument) {
+				if (dom.getWindow(this._container) !== dom.getWindow(this.layoutService.activeContainer)) {
 					this.reparentUI(this.layoutService.activeContainer);
+					this.layout(this.layoutService.activeContainerDimension, this.layoutService.activeContainerOffset.quickPickTop);
 				}
 			}
 
 			return this.ui;
 		}
 
-		const container = dom.append(this.parentElement, $('.quick-input-widget.show-file-icons'));
+		const container = dom.append(this._container, $('.quick-input-widget.show-file-icons'));
 		container.tabIndex = -1;
 		container.style.display = 'none';
 
@@ -322,8 +327,8 @@ export class QuickInputController extends Disposable {
 
 	private reparentUI(container: HTMLElement): void {
 		if (this.ui) {
-			this.parentElement = container;
-			dom.append(this.parentElement, this.ui.container);
+			this._container = container;
+			dom.append(this._container, this.ui.container);
 		}
 	}
 

src/vs/platform/quickinput/browser/quickInputService.ts

@@ -22,6 +22,7 @@ import { IQuickInputOptions, IQuickInputStyles, QuickInputHoverDelegate } from '
 import { QuickInputController, IQuickInputControllerHost } from 'vs/platform/quickinput/browser/quickInputController';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
 import { IHoverService } from 'vs/platform/hover/browser/hover';
+import { getWindow } from 'vs/base/browser/dom';
 
 export class QuickInputService extends Themable implements IQuickInputService {
 
@@ -105,7 +106,11 @@ export class QuickInputService extends Themable implements IQuickInputService {
 		controller.layout(host.activeContainerDimension, host.activeContainerOffset.quickPickTop);
 
 		// Layout changes
-		this._register(host.onDidLayoutActiveContainer(dimension => controller.layout(dimension, host.activeContainerOffset.quickPickTop)));
+		this._register(host.onDidLayoutActiveContainer(dimension => {
+			if (getWindow(host.activeContainer) === getWindow(controller.container)) {
+				controller.layout(dimension, host.activeContainerOffset.quickPickTop);
+			}
+		}));
 		this._register(host.onDidChangeActiveContainer(() => {
 			if (controller.isVisible()) {
 				return;