aux window - adjust to a full flex layout (microsoft#203669)

Author: bpasero

src/vs/workbench/browser/parts/editor/auxiliaryEditorPart.ts

@@ -3,7 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { isFullscreen, onDidChangeFullscreen, onDidChangeZoomLevel } from 'vs/base/browser/browser';
+import { isFullscreen, onDidChangeFullscreen } from 'vs/base/browser/browser';
 import { hide, show } from 'vs/base/browser/dom';
 import { Emitter, Event } from 'vs/base/common/event';
 import { DisposableStore } from 'vs/base/common/lifecycle';
@@ -77,12 +77,6 @@ export class AuxiliaryEditorPart {
 				hide(statusbarPart.container);
 			}
 
-			updateEditorPartHeight(fromEvent);
-		}
-
-		function updateEditorPartHeight(fromEvent: boolean): void {
-			editorPartContainer.style.height = `calc(100% - ${computeEditorPartHeightOffset()}px)`;
-
 			if (fromEvent) {
 				auxiliaryWindow.layout();
 			}
@@ -112,20 +106,7 @@ export class AuxiliaryEditorPart {
 			titlebarPart = disposables.add(this.titleService.createAuxiliaryTitlebarPart(auxiliaryWindow.container, editorPart));
 			titlebarPartVisible = true;
 
-			disposables.add(titlebarPart.onDidChange(() => updateEditorPartHeight(true)));
-			disposables.add(onDidChangeZoomLevel(targetWindowId => {
-				if (auxiliaryWindow.window.vscodeWindowId === targetWindowId && titlebarPartVisible) {
-
-					// This is a workaround for https://github.com/microsoft/vscode/issues/202377
-					// The title bar part prevents zooming in certain cases and when doing so,
-					// adjusts its size accordingly. This is however not reported from the
-					// `onDidchange` event that we listen to above, so we manually update the
-					// editor part height here.
-
-					updateEditorPartHeight(true);
-				}
-			}));
-
+			disposables.add(titlebarPart.onDidChange(() => auxiliaryWindow.layout()));
 			disposables.add(onDidChangeFullscreen(windowId => {
 				if (windowId !== auxiliaryWindow.window.vscodeWindowId) {
 					return; // ignore all but our window
@@ -140,7 +121,7 @@ export class AuxiliaryEditorPart {
 				if (titlebarPart && oldTitlebarPartVisible !== titlebarPartVisible) {
 					titlebarPart.container.style.display = titlebarPartVisible ? '' : 'none';
 
-					updateEditorPartHeight(true);
+					auxiliaryWindow.layout();
 				}
 			}));
 		} else {
@@ -173,8 +154,10 @@ export class AuxiliaryEditorPart {
 		}));
 		disposables.add(Event.once(this.lifecycleService.onDidShutdown)(() => disposables.dispose()));
 
-		// Layout
-		disposables.add(auxiliaryWindow.onDidLayout(dimension => {
+		// Layout: specifically `onWillLayout` to have a chance
+		// to build the aux editor part before other components
+		// have a chance to react.
+		disposables.add(auxiliaryWindow.onWillLayout(dimension => {
 			const titlebarPartHeight = titlebarPart?.height ?? 0;
 			titlebarPart?.layout(dimension.width, titlebarPartHeight, 0, 0);
 

src/vs/workbench/services/auxiliaryWindow/browser/auxiliaryWindowService.ts

@@ -6,7 +6,7 @@
 import { localize } from 'vs/nls';
 import { mark } from 'vs/base/common/performance';
 import { Emitter, Event } from 'vs/base/common/event';
-import { Dimension, EventHelper, EventType, ModifierKeyEmitter, addDisposableListener, cloneGlobalStylesheets, copyAttributes, createLinkElement, createMetaElement, getActiveWindow, getClientArea, getWindowId, isGlobalStylesheet, position, registerWindow, sharedMutationObserver, size, trackAttributes } from 'vs/base/browser/dom';
+import { Dimension, EventHelper, EventType, ModifierKeyEmitter, addDisposableListener, cloneGlobalStylesheets, copyAttributes, createLinkElement, createMetaElement, getActiveWindow, getClientArea, getWindowId, isGlobalStylesheet, position, registerWindow, sharedMutationObserver, trackAttributes } from 'vs/base/browser/dom';
 import { CodeWindow, ensureCodeWindow, mainWindow } from 'vs/base/browser/window';
 import { Disposable, DisposableStore, IDisposable, toDisposable } from 'vs/base/common/lifecycle';
 import { InstantiationType, registerSingleton } from 'vs/platform/instantiation/common/extensions';
@@ -46,6 +46,7 @@ export interface IAuxiliaryWindowService {
 
 export interface IAuxiliaryWindow extends IDisposable {
 
+	readonly onWillLayout: Event<Dimension>;
 	readonly onDidLayout: Event<Dimension>;
 
 	readonly onBeforeUnload: Event<void>;
@@ -61,6 +62,9 @@ export interface IAuxiliaryWindow extends IDisposable {
 
 export class AuxiliaryWindow extends BaseWindow implements IAuxiliaryWindow {
 
+	private readonly _onWillLayout = this._register(new Emitter<Dimension>());
+	readonly onWillLayout = this._onWillLayout.event;
+
 	private readonly _onDidLayout = this._register(new Emitter<Dimension>());
 	readonly onDidLayout = this._onDidLayout.event;
 
@@ -136,10 +140,16 @@ export class AuxiliaryWindow extends BaseWindow implements IAuxiliaryWindow {
 	}
 
 	layout(): void {
-		const dimension = getClientArea(this.window.document.body, this.container);
-		position(this.container, 0, 0, 0, 0, 'relative');
-		size(this.container, dimension.width, dimension.height);
 
+		// Split layout up into two events so that downstream components
+		// have a chance to participate in the beginning or end of the
+		// layout phase.
+		// This helps to build the auxiliary window in another component
+		// in the `onWillLayout` phase and then let other compoments
+		// react when the overall layout has finished in `onDidLayout`.
+
+		const dimension = getClientArea(this.window.document.body, this.container);
+		this._onWillLayout.fire(dimension);
 		this._onDidLayout.fire(dimension);
 	}
 
@@ -418,6 +428,10 @@ export class BrowserAuxiliaryWindowService extends Disposable implements IAuxili
 		// Create workbench container and apply classes
 		const container = document.createElement('div');
 		container.setAttribute('role', 'application');
+		position(container, 0, 0, 0, 0, 'relative');
+		container.style.display = 'flex';
+		container.style.height = '100%';
+		container.style.flexDirection = 'column';
 		auxiliaryWindow.document.body.append(container);
 
 		// Track attributes