Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

aux window - adjust to a full flex layout #203669

Merged
merged 1 commit into from
Jan 29, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
31 changes: 7 additions & 24 deletions src/vs/workbench/browser/parts/editor/auxiliaryEditorPart.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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();
}
Expand Down Expand Up @@ -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
Expand All @@ -140,7 +121,7 @@ export class AuxiliaryEditorPart {
if (titlebarPart && oldTitlebarPartVisible !== titlebarPartVisible) {
titlebarPart.container.style.display = titlebarPartVisible ? '' : 'none';

updateEditorPartHeight(true);
auxiliaryWindow.layout();
}
}));
} else {
Expand Down Expand Up @@ -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);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -46,6 +46,7 @@ export interface IAuxiliaryWindowService {

export interface IAuxiliaryWindow extends IDisposable {

readonly onWillLayout: Event<Dimension>;
readonly onDidLayout: Event<Dimension>;

readonly onBeforeUnload: Event<void>;
Expand All @@ -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;

Expand Down Expand Up @@ -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);
}

Expand Down Expand Up @@ -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
Expand Down