Merge from master

src/vs/base/browser/ui/splitview/panelview.css

@@ -60,7 +60,7 @@
 }
 
 /* TODO: actions should be part of the panel, but they aren't yet */
-.monaco-panel-view .panel > .panel-header > .actions .action-label {
+.monaco-panel-view .panel > .panel-header > .actions .action-label.icon {
 	width: 28px;
 	height: 22px;
 	background-size: 16px;
@@ -90,21 +90,13 @@
 
 .monaco-panel-view.animated .split-view-view {
 	transition-duration: 0.15s;
-	-webkit-transition-duration: 0.15s;
-	-moz-transition-duration: 0.15s;
 	transition-timing-function: ease-out;
-	-webkit-transition-timing-function: ease-out;
-	-moz-transition-timing-function: ease-out;
 }
 
 .monaco-panel-view.animated.vertical .split-view-view {
 	transition-property: height;
-	-webkit-transition-property: height;
-	-moz-transition-property: height;
 }
 
 .monaco-panel-view.animated.horizontal .split-view-view {
 	transition-property: width;
-	-webkit-transition-property: width;
-	-moz-transition-property: width;
 }

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

@@ -3,15 +3,13 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-'use strict';
-
 import 'vs/css!./panelview';
-import { IDisposable, dispose, combinedDisposable } from 'vs/base/common/lifecycle';
-import { Event, Emitter, chain } from 'vs/base/common/event';
+import { IDisposable, dispose, combinedDisposable, Disposable } from 'vs/base/common/lifecycle';
+import { Event, Emitter, chain, filterEvent } from 'vs/base/common/event';
 import { domEvent } from 'vs/base/browser/event';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { KeyCode } from 'vs/base/common/keyCodes';
-import { $, append, addClass, removeClass, toggleClass, trackFocus } from 'vs/base/browser/dom';
+import { $, append, addClass, removeClass, toggleClass, trackFocus, scheduleAtNextAnimationFrame } from 'vs/base/browser/dom';
 import { firstIndex } from 'vs/base/common/arrays';
 import { Color, RGBA } from 'vs/base/common/color';
 import { SplitView, IView } from './splitview';
@@ -27,7 +25,7 @@ export interface IPanelStyles {
 	dropBackground?: Color;
 	headerForeground?: Color;
 	headerBackground?: Color;
-	headerHighContrastBorder?: Color;
+	headerBorder?: Color;
 }
 
 /**
@@ -43,7 +41,11 @@ export abstract class Panel implements IView {
 
 	private static readonly HEADER_SIZE = 22;
 
+	readonly element: HTMLElement;
+
 	protected _expanded: boolean;
+	protected disposables: IDisposable[] = [];
+
 	private expandedSize: number | undefined = undefined;
 	private _headerVisible = true;
 	private _minimumBodySize: number;
@@ -51,9 +53,7 @@ export abstract class Panel implements IView {
 	private ariaHeaderLabel: string;
 	private styles: IPanelStyles = {};
 
-	readonly element: HTMLElement;
 	private header: HTMLElement;
-	protected disposables: IDisposable[] = [];
 
 	private _onDidChange = new Emitter<number | undefined>();
 	readonly onDidChange: Event<number | undefined> = this._onDidChange.event;
@@ -188,9 +188,9 @@ export abstract class Panel implements IView {
 
 	layout(size: number): void {
 		const headerSize = this.headerVisible ? Panel.HEADER_SIZE : 0;
-		this.layoutBody(size - headerSize);
 
 		if (this.isExpanded()) {
+			this.layoutBody(size - headerSize);
 			this.expandedSize = size;
 		}
 	}
@@ -216,7 +216,7 @@ export abstract class Panel implements IView {
 
 		this.header.style.color = this.styles.headerForeground ? this.styles.headerForeground.toString() : null;
 		this.header.style.backgroundColor = this.styles.headerBackground ? this.styles.headerBackground.toString() : null;
-		this.header.style.borderTop = this.styles.headerHighContrastBorder ? `1px solid ${this.styles.headerHighContrastBorder}` : null;
+		this.header.style.borderTop = this.styles.headerBorder ? `1px solid ${this.styles.headerBorder}` : null;
 		this._dropBackground = this.styles.dropBackground;
 	}
 
@@ -226,6 +226,8 @@ export abstract class Panel implements IView {
 
 	dispose(): void {
 		this.disposables = dispose(this.disposables);
+
+		this._onDidChange.dispose();
 	}
 }
 
@@ -233,28 +235,28 @@ interface IDndContext {
 	draggable: PanelDraggable | null;
 }
 
-class PanelDraggable implements IDisposable {
+class PanelDraggable extends Disposable {
 
 	private static readonly DefaultDragOverBackgroundColor = new Color(new RGBA(128, 128, 128, 0.5));
 
-	// see https://github.com/Microsoft/vscode/issues/14470
-	private dragOverCounter = 0;
-	private disposables: IDisposable[] = [];
+	private dragOverCounter = 0; // see https://github.com/Microsoft/vscode/issues/14470
 
-	private _onDidDrop = new Emitter<{ from: Panel, to: Panel }>();
+	private _onDidDrop = this._register(new Emitter<{ from: Panel, to: Panel }>());
 	readonly onDidDrop = this._onDidDrop.event;
 
 	constructor(private panel: Panel, private dnd: IPanelDndController, private context: IDndContext) {
+		super();
+
 		panel.draggableElement.draggable = true;
-		domEvent(panel.draggableElement, 'dragstart')(this.onDragStart, this, this.disposables);
-		domEvent(panel.dropTargetElement, 'dragenter')(this.onDragEnter, this, this.disposables);
-		domEvent(panel.dropTargetElement, 'dragleave')(this.onDragLeave, this, this.disposables);
-		domEvent(panel.dropTargetElement, 'dragend')(this.onDragEnd, this, this.disposables);
-		domEvent(panel.dropTargetElement, 'drop')(this.onDrop, this, this.disposables);
+		this._register(domEvent(panel.draggableElement, 'dragstart')(this.onDragStart, this));
+		this._register(domEvent(panel.dropTargetElement, 'dragenter')(this.onDragEnter, this));
+		this._register(domEvent(panel.dropTargetElement, 'dragleave')(this.onDragLeave, this));
+		this._register(domEvent(panel.dropTargetElement, 'dragend')(this.onDragEnd, this));
+		this._register(domEvent(panel.dropTargetElement, 'drop')(this.onDrop, this));
 	}
 
 	private onDragStart(e: DragEvent): void {
-		if (!this.dnd.canDrag(this.panel)) {
+		if (!this.dnd.canDrag(this.panel) || !e.dataTransfer) {
 			e.preventDefault();
 			e.stopPropagation();
 			return;
@@ -262,7 +264,7 @@ class PanelDraggable implements IDisposable {
 
 		e.dataTransfer.effectAllowed = 'move';
 
-		const dragImage = append(document.body, $('.monaco-panel-drag-image', {}, this.panel.draggableElement.textContent));
+		const dragImage = append(document.body, $('.monaco-panel-drag-image', {}, this.panel.draggableElement.textContent || ''));
 		e.dataTransfer.setDragImage(dragImage, -10, -10);
 		setTimeout(() => document.body.removeChild(dragImage), 0);
 
@@ -324,7 +326,7 @@ class PanelDraggable implements IDisposable {
 	}
 
 	private render(): void {
-		let backgroundColor: string = null;
+		let backgroundColor: string | null = null;
 
 		if (this.dragOverCounter > 0) {
 			backgroundColor = (this.panel.dropBackground || PanelDraggable.DefaultDragOverBackgroundColor).toString();
@@ -332,10 +334,6 @@ class PanelDraggable implements IDisposable {
 
 		this.panel.dropTargetElement.style.backgroundColor = backgroundColor;
 	}
-
-	dispose(): void {
-		this.disposables = dispose(this.disposables);
-	}
 }
 
 export interface IPanelDndController {
@@ -363,30 +361,38 @@ interface IPanelItem {
 	disposable: IDisposable;
 }
 
-export class PanelView implements IDisposable {
+export class PanelView extends Disposable {
 
-	private dnd: IPanelDndController | null;
+	private dnd: IPanelDndController | undefined;
 	private dndContext: IDndContext = { draggable: null };
 	private el: HTMLElement;
 	private panelItems: IPanelItem[] = [];
 	private splitview: SplitView;
 	private animationTimer: number | null = null;
 
-	private _onDidDrop = new Emitter<{ from: Panel, to: Panel }>();
+	private _onDidDrop = this._register(new Emitter<{ from: Panel, to: Panel }>());
 	readonly onDidDrop: Event<{ from: Panel, to: Panel }> = this._onDidDrop.event;
 
 	readonly onDidSashChange: Event<number>;
 
 	constructor(container: HTMLElement, options: IPanelViewOptions = {}) {
+		super();
+
 		this.dnd = options.dnd;
 		this.el = append(container, $('.monaco-panel-view'));
-		this.splitview = new SplitView(this.el);
+		this.splitview = this._register(new SplitView(this.el));
 		this.onDidSashChange = this.splitview.onDidSashChange;
 	}
 
 	addPanel(panel: Panel, size: number, index = this.splitview.length): void {
 		const disposables: IDisposable[] = [];
-		panel.onDidChange(this.setupAnimation, this, disposables);
+
+		// https://github.com/Microsoft/vscode/issues/59950
+		let shouldAnimate = false;
+		disposables.push(scheduleAtNextAnimationFrame(() => shouldAnimate = true));
+
+		filterEvent(panel.onDidChange, () => shouldAnimate)
+			(this.setupAnimation, this, disposables);
 
 		const panelItem = { panel, disposable: combinedDisposable(disposables) };
 		this.panelItems.splice(index, 0, panelItem);
@@ -463,7 +469,8 @@ export class PanelView implements IDisposable {
 	}
 
 	dispose(): void {
+		super.dispose();
+
 		this.panelItems.forEach(i => i.disposable.dispose());
-		this.splitview.dispose();
 	}
 }

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

@@ -38,6 +38,7 @@
 .monaco-split-view2 > .split-view-container > .split-view-view {
 	white-space: initial;
 	flex: none;
+	position: relative;
 }
 
 .monaco-split-view2.vertical > .split-view-container > .split-view-view {
@@ -49,10 +50,6 @@
 	display: inline-block;
 }
 
-.monaco-split-view2.separator-border > .split-view-container > .split-view-view {
-	position: relative;
-}
-
 .monaco-split-view2.separator-border > .split-view-container > .split-view-view:not(:first-child)::before {
 	content: ' ';
 	position: absolute;

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

@@ -3,10 +3,8 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-'use strict';
-
 import 'vs/css!./splitview';
-import { IDisposable, combinedDisposable, toDisposable } from 'vs/base/common/lifecycle';
+import { IDisposable, combinedDisposable, toDisposable, Disposable } from 'vs/base/common/lifecycle';
 import { Event, mapEvent, Emitter } from 'vs/base/common/event';
 import * as types from 'vs/base/common/types';
 import * as dom from 'vs/base/browser/dom';
@@ -31,6 +29,16 @@ export interface ISplitViewOptions {
 	orthogonalStartSash?: Sash;
 	orthogonalEndSash?: Sash;
 	inverseAltBehavior?: boolean;
+	proportionalLayout?: boolean; // default true
+}
+
+/**
+ * Only used when `proportionalLayout` is false.
+ */
+export const enum LayoutPriority {
+	Normal,
+	Low,
+	High
 }
 
 export interface IView {
@@ -38,6 +46,8 @@ export interface IView {
 	readonly minimumSize: number;
 	readonly maximumSize: number;
 	readonly onDidChange: Event<number | undefined>;
+	readonly priority?: LayoutPriority;
+	readonly snapSize?: number;
 	layout(size: number, orientation: Orientation): void;
 }
 
@@ -86,10 +96,9 @@ export namespace Sizing {
 	export function Split(index: number): SplitSizing { return { type: 'split', index }; }
 }
 
-export class SplitView implements IDisposable {
+export class SplitView extends Disposable {
 
 	readonly orientation: Orientation;
-	// TODO@Joao have the same pattern as grid here
 	readonly el: HTMLElement;
 	private sashContainer: HTMLElement;
 	private viewContainer: HTMLElement;
@@ -101,10 +110,12 @@ export class SplitView implements IDisposable {
 	private sashDragState: ISashDragState;
 	private state: State = State.Idle;
 	private inverseAltBehavior: boolean;
+	private proportionalLayout: boolean;
 
-	private _onDidSashChange = new Emitter<number>();
+	private _onDidSashChange = this._register(new Emitter<number>());
 	readonly onDidSashChange = this._onDidSashChange.event;
-	private _onDidSashReset = new Emitter<number>();
+
+	private _onDidSashReset = this._register(new Emitter<number>());
 	readonly onDidSashReset = this._onDidSashReset.event;
 
 	get length(): number {
@@ -144,8 +155,11 @@ export class SplitView implements IDisposable {
 	}
 
 	constructor(container: HTMLElement, options: ISplitViewOptions = {}) {
+		super();
+
 		this.orientation = types.isUndefined(options.orientation) ? Orientation.VERTICAL : options.orientation;
 		this.inverseAltBehavior = !!options.inverseAltBehavior;
+		this.proportionalLayout = types.isUndefined(options.proportionalLayout) ? true : !!options.proportionalLayout;
 
 		this.el = document.createElement('div');
 		dom.addClass(this.el, 'monaco-split-view2');
@@ -316,8 +330,10 @@ export class SplitView implements IDisposable {
 
 	private relayout(lowPriorityIndex?: number, highPriorityIndex?: number): void {
 		const contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
+		const lowPriorityIndexes = typeof lowPriorityIndex === 'number' ? [lowPriorityIndex] : undefined;
+		const highPriorityIndexes = typeof highPriorityIndex === 'number' ? [highPriorityIndex] : undefined;
 
-		this.resize(this.viewItems.length - 1, this.size - contentSize, undefined, lowPriorityIndex, highPriorityIndex);
+		this.resize(this.viewItems.length - 1, this.size - contentSize, undefined, lowPriorityIndexes, highPriorityIndexes);
 		this.distributeEmptySpace();
 		this.layoutViews();
 		this.saveProportions();
@@ -328,11 +344,15 @@ export class SplitView implements IDisposable {
 		this.size = size;
 
 		if (!this.proportions) {
-			this.resize(this.viewItems.length - 1, size - previousSize);
+			const indexes = range(this.viewItems.length);
+			const lowPriorityIndexes = indexes.filter(i => this.viewItems[i].view.priority === LayoutPriority.Low);
+			const highPriorityIndexes = indexes.filter(i => this.viewItems[i].view.priority === LayoutPriority.High);
+
+			this.resize(this.viewItems.length - 1, size - previousSize, undefined, lowPriorityIndexes, highPriorityIndexes);
 		} else {
 			for (let i = 0; i < this.viewItems.length; i++) {
 				const item = this.viewItems[i];
-				item.size = clamp(Math.round(this.proportions[i] * size), item.view.minimumSize, item.view.maximumSize);
+				item.size = SplitView.clamp(item, Math.round(this.proportions[i] * size));
 			}
 		}
 
@@ -341,7 +361,7 @@ export class SplitView implements IDisposable {
 	}
 
 	private saveProportions(): void {
-		if (this.contentSize > 0) {
+		if (this.proportionalLayout && this.contentSize > 0) {
 			this.proportions = this.viewItems.map(i => i.size / this.contentSize);
 		}
 	}
@@ -424,7 +444,7 @@ export class SplitView implements IDisposable {
 		}
 
 		size = typeof size === 'number' ? size : item.size;
-		size = clamp(size, item.view.minimumSize, item.view.maximumSize);
+		size = SplitView.clamp(item, size);
 
 		if (this.inverseAltBehavior && index > 0) {
 			// In this case, we want the view to grow or shrink both sides equally
@@ -499,8 +519,8 @@ export class SplitView implements IDisposable {
 		index: number,
 		delta: number,
 		sizes = this.viewItems.map(i => i.size),
-		lowPriorityIndex?: number,
-		highPriorityIndex?: number,
+		lowPriorityIndexes?: number[],
+		highPriorityIndexes?: number[],
 		overloadMinDelta: number = Number.NEGATIVE_INFINITY,
 		overloadMaxDelta: number = Number.POSITIVE_INFINITY
 	): number {
@@ -511,14 +531,18 @@ export class SplitView implements IDisposable {
 		const upIndexes = range(index, -1);
 		const downIndexes = range(index + 1, this.viewItems.length);
 
-		if (typeof highPriorityIndex === 'number') {
-			pushToStart(upIndexes, highPriorityIndex);
-			pushToStart(downIndexes, highPriorityIndex);
+		if (highPriorityIndexes) {
+			for (const index of highPriorityIndexes) {
+				pushToStart(upIndexes, index);
+				pushToStart(downIndexes, index);
+			}
 		}
 
-		if (typeof lowPriorityIndex === 'number') {
-			pushToEnd(upIndexes, lowPriorityIndex);
-			pushToEnd(downIndexes, lowPriorityIndex);
+		if (lowPriorityIndexes) {
+			for (const index of lowPriorityIndexes) {
+				pushToEnd(upIndexes, index);
+				pushToEnd(downIndexes, index);
+			}
 		}
 
 		const upItems = upIndexes.map(i => this.viewItems[i]);
@@ -527,27 +551,29 @@ export class SplitView implements IDisposable {
 		const downItems = downIndexes.map(i => this.viewItems[i]);
 		const downSizes = downIndexes.map(i => sizes[i]);
 
-		const minDeltaUp = upIndexes.reduce((r, i) => r + (this.viewItems[i].view.minimumSize - sizes[i]), 0);
+		const minDeltaUp = upIndexes.reduce((r, i) => r + ((typeof this.viewItems[i].view.snapSize === 'number' ? 0 : this.viewItems[i].view.minimumSize) - sizes[i]), 0);
 		const maxDeltaUp = upIndexes.reduce((r, i) => r + (this.viewItems[i].view.maximumSize - sizes[i]), 0);
-		const maxDeltaDown = downIndexes.length === 0 ? Number.POSITIVE_INFINITY : downIndexes.reduce((r, i) => r + (sizes[i] - this.viewItems[i].view.minimumSize), 0);
+		const maxDeltaDown = downIndexes.length === 0 ? Number.POSITIVE_INFINITY : downIndexes.reduce((r, i) => r + (sizes[i] - (typeof this.viewItems[i].view.snapSize === 'number' ? 0 : this.viewItems[i].view.minimumSize)), 0);
 		const minDeltaDown = downIndexes.length === 0 ? Number.NEGATIVE_INFINITY : downIndexes.reduce((r, i) => r + (sizes[i] - this.viewItems[i].view.maximumSize), 0);
 		const minDelta = Math.max(minDeltaUp, minDeltaDown, overloadMinDelta);
 		const maxDelta = Math.min(maxDeltaDown, maxDeltaUp, overloadMaxDelta);
 
-		delta = clamp(delta, minDelta, maxDelta);
+		const tentativeDelta = clamp(delta, minDelta, maxDelta);
+		let actualDelta = 0;
 
-		for (let i = 0, deltaUp = delta; i < upItems.length; i++) {
+		for (let i = 0, deltaUp = tentativeDelta; i < upItems.length; i++) {
 			const item = upItems[i];
-			const size = clamp(upSizes[i] + deltaUp, item.view.minimumSize, item.view.maximumSize);
+			const size = SplitView.clamp(item, upSizes[i] + deltaUp/* , upIndexes[i] === index */);
 			const viewDelta = size - upSizes[i];
 
+			actualDelta += viewDelta;
 			deltaUp -= viewDelta;
 			item.size = size;
 		}
 
-		for (let i = 0, deltaDown = delta; i < downItems.length; i++) {
+		for (let i = 0, deltaDown = actualDelta; i < downItems.length; i++) {
 			const item = downItems[i];
-			const size = clamp(downSizes[i] - deltaDown, item.view.minimumSize, item.view.maximumSize);
+			const size = SplitView.clamp(item, downSizes[i] - deltaDown);
 			const viewDelta = size - downSizes[i];
 
 			deltaDown += viewDelta;
@@ -557,13 +583,24 @@ export class SplitView implements IDisposable {
 		return delta;
 	}
 
+	private static clamp(item: IViewItem, size: number): number {
+		const result = clamp(size, item.view.minimumSize, item.view.maximumSize);
+
+		if (typeof item.view.snapSize !== 'number' || size >= item.view.minimumSize) {
+			return result;
+		}
+
+		const snapSize = Math.min(item.view.snapSize, item.view.minimumSize);
+		return size < snapSize ? 0 : item.view.minimumSize;
+	}
+
 	private distributeEmptySpace(): void {
 		let contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
 		let emptyDelta = this.size - contentSize;
 
 		for (let i = this.viewItems.length - 1; emptyDelta !== 0 && i >= 0; i--) {
 			const item = this.viewItems[i];
-			const size = clamp(item.size + emptyDelta, item.view.minimumSize, item.view.maximumSize);
+			const size = SplitView.clamp(item, item.size + emptyDelta);
 			const viewDelta = size - item.size;
 
 			emptyDelta -= viewDelta;
@@ -626,6 +663,8 @@ export class SplitView implements IDisposable {
 	}
 
 	dispose(): void {
+		super.dispose();
+
 		this.viewItems.forEach(i => i.disposable.dispose());
 		this.viewItems = [];