Merge from master

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();
 	}
 }