added Center Mode (#15684)

src/vs/code/electron-main/menus.ts

@@ -688,6 +688,7 @@ export class CodeMenu {
 
 		const fullscreen = new MenuItem(this.withKeybinding('workbench.action.toggleFullScreen', { label: this.mnemonicLabel(nls.localize({ key: 'miToggleFullScreen', comment: ['&& denotes a mnemonic'] }, "Toggle &&Full Screen")), click: () => this.windowsMainService.getLastActiveWindow().toggleFullScreen(), enabled: this.windowsMainService.getWindowCount() > 0 }));
 		const toggleZenMode = this.createMenuItem(nls.localize('miToggleZenMode', "Toggle Zen Mode"), 'workbench.action.toggleZenMode');
+		const toggleCenteredLayout = this.createMenuItem(nls.localize('miToggleCenteredLayout', "Toggle centered Layout"), 'workbench.action.toggleCenteredLayout');
 		const toggleMenuBar = this.createMenuItem(nls.localize({ key: 'miToggleMenuBar', comment: ['&& denotes a mnemonic'] }, "Toggle Menu &&Bar"), 'workbench.action.toggleMenuBar');
 		const splitEditor = this.createMenuItem(nls.localize({ key: 'miSplitEditor', comment: ['&& denotes a mnemonic'] }, "Split &&Editor"), 'workbench.action.splitEditor');
 		const toggleEditorLayout = this.createMenuItem(nls.localize({ key: 'miToggleEditorLayout', comment: ['&& denotes a mnemonic'] }, "Toggle Editor Group &&Layout"), 'workbench.action.toggleEditorGroupLayout');
@@ -747,6 +748,7 @@ export class CodeMenu {
 			__separator__(),
 			fullscreen,
 			toggleZenMode,
+			toggleCenteredLayout,
 			isWindows || isLinux ? toggleMenuBar : void 0,
 			__separator__(),
 			splitEditor,

src/vs/workbench/browser/actions/toggleCenteredLayout.ts

@@ -0,0 +1,36 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { TPromise } from 'vs/base/common/winjs.base';
+import nls = require('vs/nls');
+import { Action } from 'vs/base/common/actions';
+import { KeyCode, KeyMod, KeyChord } from 'vs/base/common/keyCodes';
+import { Registry } from 'vs/platform/registry/common/platform';
+import { SyncActionDescriptor } from 'vs/platform/actions/common/actions';
+import { IWorkbenchActionRegistry, Extensions } from 'vs/workbench/common/actions';
+import { IPartService } from 'vs/workbench/services/part/common/partService';
+
+class ToggleCenteredLayout extends Action {
+
+	public static readonly ID = 'workbench.action.toggleCenteredLayout';
+	public static readonly LABEL = nls.localize('toggleCenteredLayout', "Toggle Centered Layout");
+
+	constructor(
+		id: string,
+		label: string,
+		@IPartService private partService: IPartService
+	) {
+		super(id, label);
+		this.enabled = !!this.partService;
+	}
+
+	public run(): TPromise<any> {
+		this.partService.toggleCenteredLayout();
+		return TPromise.as(null);
+	}
+}
+
+const registry = Registry.as<IWorkbenchActionRegistry>(Extensions.WorkbenchActions);
+registry.registerWorkbenchAction(new SyncActionDescriptor(ToggleCenteredLayout, ToggleCenteredLayout.ID, ToggleCenteredLayout.LABEL, { primary: KeyChord(KeyMod.CtrlCmd | KeyCode.KEY_K, KeyCode.KEY_T) }), 'View: Toggle Centered Layout', nls.localize('view', "View"));

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

@@ -37,6 +37,8 @@ import { attachProgressBarStyler } from 'vs/platform/theme/common/styler';
 import { IDisposable, combinedDisposable } from 'vs/base/common/lifecycle';
 import { ResourcesDropHandler, LocalSelectionTransfer, DraggedEditorIdentifier } from 'vs/workbench/browser/dnd';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
+import { IPartService } from 'vs/workbench/services/part/common/partService';
+import { TextResourceEditor } from 'vs/workbench/browser/parts/editor/textResourceEditor';
 
 export enum Rochade {
 	NONE,
@@ -101,6 +103,8 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro
 
 	private static readonly EDITOR_TITLE_HEIGHT = 35;
 
+	private static readonly CENTERED_EDITOR_MIN_MARGIN = 10;
+
 	private static readonly SNAP_TO_MINIMIZED_THRESHOLD_WIDTH = 50;
 	private static readonly SNAP_TO_MINIMIZED_THRESHOLD_HEIGHT = 20;
 
@@ -125,6 +129,22 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro
 	private sashTwo: Sash;
 	private startSiloThreeSize: number;
 
+	// if the centered layout is activated, the editor inside of silo ONE is centered
+	// the silo will then contain:
+	// [left margin]|[editor]|[right margin]
+	// - The size of the editor is defined by centeredEditorSize
+	// - The position is defined by the ratio centeredEditorLeftMarginRatio = left-margin/(left-margin + editor + right-margin).
+	// - The two sashes can be used to control the size and position of the editor inside of the silo.
+	// - In order to seperate the two sashes from the sashes that control the size of bordering widgets
+	//   CENTERED_EDITOR_MIN_MARGIN is forced as a minimum size for the two margins.
+	private centeredEditorActive: boolean;
+	private centeredEditorSashLeft: Sash;
+	private centeredEditorSashRight: Sash;
+	private centeredEditorPreferedSize: number;
+	private centeredEditorLeftMarginRatio: number;
+	private centeredEditorDragStartPosition: number;
+	private centeredEditorDragStartSize: number;
+
 	private visibleEditors: BaseEditor[];
 
 	private lastActiveEditor: BaseEditor;
@@ -144,6 +164,7 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro
 		groupOrientation: GroupOrientation,
 		@IWorkbenchEditorService private editorService: IWorkbenchEditorService,
 		@IEditorGroupService private editorGroupService: IEditorGroupService,
+		@IPartService private partService: IPartService,
 		@IContextKeyService private contextKeyService: IContextKeyService,
 		@IExtensionService private extensionService: IExtensionService,
 		@IInstantiationService private instantiationService: IInstantiationService,
@@ -193,6 +214,10 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro
 		return this.layoutVertically ? EditorGroupsControl.MIN_EDITOR_WIDTH : EditorGroupsControl.MIN_EDITOR_HEIGHT;
 	}
 
+	private get visibleSilos(): number {
+		return this.visibleEditors.reduce((acc, min) => min ? acc + 1 : acc, 0);
+	}
+
 	private isSiloMinimized(position: number): boolean {
 		return this.silosSize[position] === this.minSize && this.silosMinimized[position];
 	}
@@ -209,6 +234,22 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro
 		});
 	}
 
+	private get centeredEditorAvailableSize(): number {
+		return this.silosSize[0] - EditorGroupsControl.CENTERED_EDITOR_MIN_MARGIN * 2;
+	}
+
+	private get centeredEditorSize(): number {
+		return Math.min(this.centeredEditorAvailableSize, this.centeredEditorPreferedSize);
+	}
+
+	private get centeredEditorPosition(): number {
+		return EditorGroupsControl.CENTERED_EDITOR_MIN_MARGIN + this.centeredEditorLeftMarginRatio * (this.centeredEditorAvailableSize - this.centeredEditorSize);
+	}
+
+	private get centeredEditorEndPosition(): number {
+		return this.centeredEditorPosition + this.centeredEditorSize;
+	}
+
 	private get snapToMinimizeThresholdSize(): number {
 		return this.layoutVertically ? EditorGroupsControl.SNAP_TO_MINIMIZED_THRESHOLD_WIDTH : EditorGroupsControl.SNAP_TO_MINIMIZED_THRESHOLD_HEIGHT;
 	}
@@ -969,6 +1010,23 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro
 		// Silo Three
 		this.silos[Position.THREE] = $(this.parent).div({ class: 'one-editor-silo editor-three' });
 
+		// Center Layout stuff
+		this.centeredEditorSashLeft = new Sash(this.parent.getHTMLElement(), this, { baseSize: 5, orientation: Orientation.VERTICAL });
+		this.toUnbind.push(this.centeredEditorSashLeft.onDidStart(() => this.onCenterSashLeftDragStart()));
+		this.toUnbind.push(this.centeredEditorSashLeft.onDidChange((e: ISashEvent) => this.onCenterSashLeftDrag(e)));
+		this.toUnbind.push(this.centeredEditorSashLeft.onDidEnd(() => this.onCenterSashLeftDragEnd()));
+		this.toUnbind.push(this.centeredEditorSashLeft.onDidReset(() => this.resetCenteredEditor()));
+
+		this.centeredEditorSashRight = new Sash(this.parent.getHTMLElement(), this, { baseSize: 5, orientation: Orientation.VERTICAL });
+		this.toUnbind.push(this.centeredEditorSashRight.onDidStart(() => this.onCenterSashRightDragStart()));
+		this.toUnbind.push(this.centeredEditorSashRight.onDidChange((e: ISashEvent) => this.onCenterSashRightDrag(e)));
+		this.toUnbind.push(this.centeredEditorSashRight.onDidEnd(() => this.onCenterSashRightDragEnd()));
+		this.toUnbind.push(this.centeredEditorSashRight.onDidReset(() => this.resetCenteredEditor()));
+
+		this.centeredEditorActive = false;
+		this.centeredEditorLeftMarginRatio = 0.5;
+		this.centeredEditorPreferedSize = -1; // set this later if we know the container size
+
 		// For each position
 		POSITIONS.forEach(position => {
 			const silo = this.silos[position];
@@ -1858,12 +1916,70 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro
 		this.sashTwo.layout();
 	}
 
+	private setCenteredEditorPositionAndSize(pos: number, size: number): void {
+		this.centeredEditorPreferedSize = Math.max(this.minSize, size);
+		pos -= EditorGroupsControl.CENTERED_EDITOR_MIN_MARGIN;
+		pos = Math.min(pos, this.centeredEditorAvailableSize - this.centeredEditorSize);
+		pos = Math.max(0, pos);
+		this.centeredEditorLeftMarginRatio = pos / (this.centeredEditorAvailableSize - this.centeredEditorSize);
+
+		this.layoutContainers();
+	}
+
+	private onCenterSashLeftDragStart(): void {
+		this.centeredEditorDragStartPosition = this.centeredEditorPosition;
+		this.centeredEditorDragStartSize = this.centeredEditorSize;
+	}
+
+	private onCenterSashLeftDrag(e: ISashEvent): void {
+		const minMargin = EditorGroupsControl.CENTERED_EDITOR_MIN_MARGIN;
+		const diffPos = e.currentX - e.startX;
+		const diffSize = -diffPos;
+
+		const pos = this.centeredEditorDragStartPosition + diffPos;
+		const size = this.centeredEditorDragStartSize + diffSize;
+		this.setCenteredEditorPositionAndSize(pos, pos <= minMargin ? size + pos - minMargin : size);
+	}
+
+	private onCenterSashLeftDragEnd(): void {
+		this.layoutContainers();
+	}
+
+	private onCenterSashRightDragStart(): void {
+		this.centeredEditorDragStartPosition = this.centeredEditorPosition;
+		this.centeredEditorDragStartSize = this.centeredEditorSize;
+	}
+
+	private onCenterSashRightDrag(e: ISashEvent): void {
+		const diffPos = e.currentX - e.startX;
+		const diffSize = diffPos;
+
+		const pos = this.centeredEditorDragStartPosition;
+		const maxSize = this.centeredEditorAvailableSize - this.centeredEditorDragStartPosition;
+		const size = Math.min(maxSize, this.centeredEditorDragStartSize + diffSize);
+		this.setCenteredEditorPositionAndSize(size < this.minSize ? pos + (size - this.minSize) : pos, size);
+	}
+
+	private onCenterSashRightDragEnd(): void {
+	}
+
 	public getVerticalSashTop(sash: Sash): number {
 		return 0;
 	}
 
 	public getVerticalSashLeft(sash: Sash): number {
-		return sash === this.sashOne ? this.silosSize[Position.ONE] : this.silosSize[Position.TWO] + this.silosSize[Position.ONE];
+		switch (sash) {
+			case this.sashOne:
+				return this.silosSize[Position.ONE];
+			case this.sashTwo:
+				return this.silosSize[Position.TWO] + this.silosSize[Position.ONE];
+			case this.centeredEditorSashLeft:
+				return this.centeredEditorPosition;
+			case this.centeredEditorSashRight:
+				return this.centeredEditorEndPosition;
+			default:
+				return 0;
+		}
 	}
 
 	public getVerticalSashHeight(sash: Sash): number {
@@ -2013,6 +2129,32 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro
 			}
 		});
 
+		// Layout centered Editor
+		const doCentering =
+			this.layoutVertically &&
+			this.visibleSilos === 1 &&
+			this.partService.isCenteredLayoutActive() &&
+			this.visibleEditors[Position.ONE] instanceof TextResourceEditor;
+
+		if (doCentering && !this.centeredEditorActive) {
+			this.centeredEditorSashLeft.show();
+			this.centeredEditorSashRight.show();
+
+			// no size set yet. Calculate a default value
+			if (this.centeredEditorPreferedSize === -1) {
+				this.resetCenteredEditor(false);
+			}
+		} else if (!doCentering && this.centeredEditorActive) {
+			this.centeredEditorSashLeft.hide();
+			this.centeredEditorSashRight.hide();
+		}
+		this.centeredEditorActive = doCentering;
+
+		if (this.centeredEditorActive) {
+			this.centeredEditorSashLeft.layout();
+			this.centeredEditorSashRight.layout();
+		}
+
 		// Layout visible editors
 		POSITIONS.forEach(position => {
 			this.layoutEditor(position);
@@ -2031,10 +2173,18 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro
 
 	private layoutEditor(position: Position): void {
 		const editorSize = this.silosSize[position];
-		if (editorSize && this.visibleEditors[position]) {
+		const editor = this.visibleEditors[position];
+		if (editorSize && editor) {
 			let editorWidth = this.layoutVertically ? editorSize : this.dimension.width;
 			let editorHeight = (this.layoutVertically ? this.dimension.height : this.silosSize[position]) - EditorGroupsControl.EDITOR_TITLE_HEIGHT;
 
+			let editorPosition = 0;
+
+			if (this.centeredEditorActive) {
+				editorWidth = this.centeredEditorSize;
+				editorPosition = this.centeredEditorPosition;
+			}
+
 			if (position !== Position.ONE) {
 				if (this.layoutVertically) {
 					editorWidth--; // accomodate for 1px left-border in containers TWO, THREE when laying out vertically
@@ -2043,7 +2193,16 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro
 				}
 			}
 
-			this.visibleEditors[position].layout(new Dimension(editorWidth, editorHeight));
+			editor.getContainer().style({ 'margin-left': editorPosition + 'px', 'width': editorWidth + 'px' });
+			editor.layout(new Dimension(editorWidth, editorHeight));
+		}
+	}
+
+	private resetCenteredEditor(layout: boolean = true) {
+		this.centeredEditorLeftMarginRatio = 0.5;
+		this.centeredEditorPreferedSize = Math.floor(this.dimension.width * 0.5);
+		if (layout) {
+			this.layoutContainers();
 		}
 	}
 

src/vs/workbench/electron-browser/workbench.ts

@@ -155,6 +155,7 @@ export class Workbench implements IPartService {
 	private static readonly sidebarRestoreStorageKey = 'workbench.sidebar.restore';
 	private static readonly panelHiddenStorageKey = 'workbench.panel.hidden';
 	private static readonly zenModeActiveStorageKey = 'workbench.zenmode.active';
+	private static readonly centeredLayoutActiveStorageKey = 'workbench.centeredlayout.active';
 	private static readonly panelPositionStorageKey = 'workbench.panel.location';
 	private static readonly defaultPanelPositionStorageKey = 'workbench.panel.defaultLocation';
 
@@ -213,6 +214,7 @@ export class Workbench implements IPartService {
 		wasSideBarVisible: boolean;
 		wasPanelVisible: boolean;
 	};
+	private centeredLayoutActive: boolean;
 
 	constructor(
 		parent: HTMLElement,
@@ -379,6 +381,11 @@ export class Workbench implements IPartService {
 			this.toggleZenMode(true);
 		}
 
+		// Restore Forced Center Mode
+		if (this.storageService.getBoolean(Workbench.centeredLayoutActiveStorageKey, StorageScope.GLOBAL, false)) {
+			this.centeredLayoutActive = true;
+		}
+
 		const onRestored = (error?: Error): IWorkbenchStartedInfo => {
 			this.workbenchCreated = true;
 
@@ -660,6 +667,9 @@ export class Workbench implements IPartService {
 			wasSideBarVisible: false,
 			wasPanelVisible: false
 		};
+
+		// Centered Layout
+		this.centeredLayoutActive = false;
 	}
 
 	private setPanelPositionFromStorageOrConfig() {
@@ -1313,6 +1323,22 @@ export class Workbench implements IPartService {
 		}
 	}
 
+	public isCenteredLayoutActive(): boolean {
+		return this.centeredLayoutActive;
+	}
+
+	public toggleCenteredLayout(): void {
+		this.centeredLayoutActive = !this.centeredLayoutActive;
+
+		if (this.centeredLayoutActive) {
+			this.storageService.store(Workbench.centeredLayoutActiveStorageKey, 'true', StorageScope.GLOBAL);
+		} else {
+			this.storageService.remove(Workbench.centeredLayoutActiveStorageKey, StorageScope.GLOBAL);
+		}
+
+		this.layout();
+	}
+
 	// Resize requested part along the main axis
 	// layout will do all the math for us and adjusts the other Parts
 	public resizePart(part: Parts, sizeChange: number): void {

src/vs/workbench/services/part/common/partService.ts

@@ -129,6 +129,16 @@ export interface IPartService {
 	 */
 	toggleZenMode(): void;
 
+	/**
+	 * Returns whether the centered layout is active.
+	 */
+	isCenteredLayoutActive(): boolean;
+
+	/**
+	 * Toggles the workbench in and out of centered layout.
+	 */
+	toggleCenteredLayout(): void;
+
 	/**
 	 * Resizes currently focused part on main access
 	 */

src/vs/workbench/test/workbenchTestServices.ts

@@ -429,6 +429,10 @@ export class TestPartService implements IPartService {
 
 	public toggleZenMode(): void { }
 
+	public isCenteredLayoutActive(): boolean { return false; }
+	public toggleCenteredLayout(): void { }
+
+
 	public resizePart(part: Parts, sizeChange: number): void { }
 }