Editors: have a new auto option for workbench.editor.splitSizing (microsoft#185761)

* splitview, grid AutoSizing

* adjust editor setting for new `auto` option

---------

Co-authored-by: Benjamin Pasero <[email protected]>

Author: joaomoreno

src/vs/base/browser/ui/grid/grid.ts

@@ -10,8 +10,7 @@ import { Disposable } from 'vs/base/common/lifecycle';
 import 'vs/css!./gridview';
 import { Box, GridView, IGridViewOptions, IGridViewStyles, IView as IGridViewView, IViewSize, orthogonal, Sizing as GridViewSizing } from './gridview';
 import type { GridLocation } from 'vs/base/browser/ui/grid/gridview';
-///@ts-ignore
-import type { SplitView } from 'vs/base/browser/ui/splitview/splitview';
+import type { SplitView, AutoSizing as SplitViewAutoSizing } from 'vs/base/browser/ui/splitview/splitview';
 
 export { IViewSize, LayoutPriority, Orientation, orthogonal } from './gridview';
 
@@ -197,12 +196,14 @@ function getGridLocation(element: HTMLElement): GridLocation {
 
 export type DistributeSizing = { type: 'distribute' };
 export type SplitSizing = { type: 'split' };
+export type AutoSizing = { type: 'auto' };
 export type InvisibleSizing = { type: 'invisible'; cachedVisibleSize: number };
-export type Sizing = DistributeSizing | SplitSizing | InvisibleSizing;
+export type Sizing = DistributeSizing | SplitSizing | AutoSizing | InvisibleSizing;
 
 export namespace Sizing {
 	export const Distribute: DistributeSizing = { type: 'distribute' };
 	export const Split: SplitSizing = { type: 'split' };
+	export const Auto: AutoSizing = { type: 'auto' };
 	export function Invisible(cachedVisibleSize: number): InvisibleSizing { return { type: 'invisible', cachedVisibleSize }; }
 }
 
@@ -403,6 +404,9 @@ export class Grid<T extends IView = IView> extends Disposable {
 			viewSize = GridViewSizing.Split(index);
 		} else if (size.type === 'distribute') {
 			viewSize = GridViewSizing.Distribute;
+		} else if (size.type === 'auto') {
+			const [, index] = tail(referenceLocation);
+			viewSize = GridViewSizing.Auto(index);
 		} else {
 			viewSize = size;
 		}
@@ -445,7 +449,16 @@ export class Grid<T extends IView = IView> extends Disposable {
 		}
 
 		const location = this.getViewLocation(view);
-		this.gridview.removeView(location, (sizing && sizing.type === 'distribute') ? GridViewSizing.Distribute : undefined);
+
+		let gridViewSizing: DistributeSizing | SplitViewAutoSizing | undefined;
+
+		if (sizing?.type === 'distribute') {
+			gridViewSizing = GridViewSizing.Distribute;
+		} else if (sizing?.type === 'auto') {
+			gridViewSizing = GridViewSizing.Auto(0);
+		}
+
+		this.gridview.removeView(location, gridViewSizing);
 		this.views.delete(view);
 	}
 

src/vs/base/browser/ui/grid/gridview.ts

@@ -5,7 +5,7 @@
 
 import { $ } from 'vs/base/browser/dom';
 import { IBoundarySashes, Orientation, Sash } from 'vs/base/browser/ui/sash/sash';
-import { DistributeSizing, ISplitViewStyles, IView as ISplitView, LayoutPriority, Sizing, SplitView } from 'vs/base/browser/ui/splitview/splitview';
+import { DistributeSizing, ISplitViewStyles, IView as ISplitView, LayoutPriority, Sizing, AutoSizing, SplitView } from 'vs/base/browser/ui/splitview/splitview';
 import { equals as arrayEquals, tail2 as tail } from 'vs/base/common/arrays';
 import { Color } from 'vs/base/common/color';
 import { Emitter, Event, Relay } from 'vs/base/common/event';
@@ -1227,7 +1227,7 @@ export class GridView implements IDisposable {
 	 * @param location The {@link GridLocation location} of the {@link IView view}.
 	 * @param sizing Whether to distribute other {@link IView view}'s sizes.
 	 */
-	removeView(location: GridLocation, sizing?: DistributeSizing): IView {
+	removeView(location: GridLocation, sizing?: DistributeSizing | AutoSizing): IView {
 		this.disposable2x2.dispose();
 		this.disposable2x2 = Disposable.None;
 

src/vs/base/browser/ui/splitview/splitview.ts

@@ -343,6 +343,12 @@ export type DistributeSizing = { type: 'distribute' };
  */
 export type SplitSizing = { type: 'split'; index: number };
 
+/**
+ * When adding a view, use DistributeSizing when all pre-existing views are
+ * distributed evenly, otherwise use SplitSizing.
+ */
+export type AutoSizing = { type: 'auto'; index: number };
+
 /**
  * When adding or removing views, assume the view is invisible.
  */
@@ -352,7 +358,7 @@ export type InvisibleSizing = { type: 'invisible'; cachedVisibleSize: number };
  * When adding or removing views, the sizing provides fine grained
  * control over how other views get resized.
  */
-export type Sizing = DistributeSizing | SplitSizing | InvisibleSizing;
+export type Sizing = DistributeSizing | SplitSizing | AutoSizing | InvisibleSizing;
 
 export namespace Sizing {
 
@@ -368,6 +374,12 @@ export namespace Sizing {
 	 */
 	export function Split(index: number): SplitSizing { return { type: 'split', index }; }
 
+	/**
+	 * When adding a view, use DistributeSizing when all pre-existing views are
+	 * distributed evenly, otherwise use SplitSizing.
+	 */
+	export function Auto(index: number): AutoSizing { return { type: 'auto', index }; }
+
 	/**
 	 * When adding or removing views, assume the view is invisible.
 	 */
@@ -646,6 +658,14 @@ export class SplitView<TLayoutContext = undefined> extends Disposable {
 			throw new Error('Index out of bounds');
 		}
 
+		if (sizing?.type === 'auto') {
+			if (this.areViewsDistributed()) {
+				sizing = { type: 'distribute' };
+			} else {
+				sizing = undefined;
+			}
+		}
+
 		// Remove view
 		const viewItem = this.viewItems.splice(index, 1)[0];
 		const view = viewItem.dispose();
@@ -1054,12 +1074,22 @@ export class SplitView<TLayoutContext = undefined> extends Disposable {
 
 		if (typeof size === 'number') {
 			viewSize = size;
-		} else if (size.type === 'split') {
-			viewSize = this.getViewSize(size.index) / 2;
-		} else if (size.type === 'invisible') {
-			viewSize = { cachedVisibleSize: size.cachedVisibleSize };
 		} else {
-			viewSize = view.minimumSize;
+			if (size.type === 'auto') {
+				if (this.areViewsDistributed()) {
+					size = { type: 'distribute' };
+				} else {
+					size = { type: 'split', index: size.index };
+				}
+			}
+
+			if (size.type === 'split') {
+				viewSize = this.getViewSize(size.index) / 2;
+			} else if (size.type === 'invisible') {
+				viewSize = { cachedVisibleSize: size.cachedVisibleSize };
+			} else {
+				viewSize = view.minimumSize;
+			}
 		}
 
 		const item = this.orientation === Orientation.VERTICAL
@@ -1382,6 +1412,21 @@ export class SplitView<TLayoutContext = undefined> extends Disposable {
 		return undefined;
 	}
 
+	private areViewsDistributed() {
+		let min = undefined, max = undefined;
+
+		for (const view of this.viewItems) {
+			min = min === undefined ? view.size : Math.min(min, view.size);
+			max = max === undefined ? view.size : Math.max(max, view.size);
+
+			if (max - min > 2) {
+				return false;
+			}
+		}
+
+		return true;
+	}
+
 	override dispose(): void {
 		this.sashDragState?.disposable.dispose();
 

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

@@ -39,7 +39,7 @@ export const DEFAULT_EDITOR_PART_OPTIONS: IEditorPartOptions = {
 	openSideBySideDirection: 'right',
 	closeEmptyGroups: true,
 	labelFormat: 'default',
-	splitSizing: 'distribute',
+	splitSizing: 'auto',
 	splitOnDragAndDrop: true,
 	centeredLayoutFixedWidth: false,
 };

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

@@ -554,7 +554,14 @@ export class EditorPart extends Part implements IEditorGroupsService, IEditorGro
 	}
 
 	private getSplitSizingStyle(): Sizing {
-		return this._partOptions.splitSizing === 'split' ? Sizing.Split : Sizing.Distribute;
+		switch (this._partOptions.splitSizing) {
+			case 'distribute':
+				return Sizing.Distribute;
+			case 'split':
+				return Sizing.Split;
+			default:
+				return Sizing.Auto;
+		}
 	}
 
 	private doCreateGroupView(from?: IEditorGroupView | ISerializedEditorGroupModel | null): IEditorGroupView {

src/vs/workbench/browser/workbench.contribution.ts

@@ -169,9 +169,10 @@ const registry = Registry.as<IConfigurationRegistry>(ConfigurationExtensions.Con
 			},
 			'workbench.editor.splitSizing': {
 				'type': 'string',
-				'enum': ['distribute', 'split'],
-				'default': 'distribute',
+				'enum': ['auto', 'distribute', 'split'],
+				'default': 'auto',
 				'enumDescriptions': [
+					localize('workbench.editor.splitSizingAuto', "Splits all the editor groups to equal parts unless a part has been changed in size."),
 					localize('workbench.editor.splitSizingDistribute', "Splits all the editor groups to equal parts."),
 					localize('workbench.editor.splitSizingSplit', "Splits the active editor group to equal parts.")
 				],

src/vs/workbench/common/editor.ts

@@ -1113,7 +1113,7 @@ interface IEditorPartConfiguration {
 	labelFormat?: 'default' | 'short' | 'medium' | 'long';
 	restoreViewState?: boolean;
 	splitInGroupLayout?: 'vertical' | 'horizontal';
-	splitSizing?: 'split' | 'distribute';
+	splitSizing?: 'auto' | 'split' | 'distribute';
 	splitOnDragAndDrop?: boolean;
 	centeredLayoutFixedWidth?: boolean;
 	limit?: {