Refresh master with initial release/0.24 snapshot (#332)

* Initial port of release/0.24 source code

* Fix additional headers

* Fix a typo in launch.json

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

@@ -0,0 +1,109 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.monaco-panel-view {
+	width: 100%;
+	height: 100%;
+}
+
+.monaco-panel-view .panel {
+	overflow: hidden;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.monaco-panel-view .panel > .panel-header {
+	font-size: 11px;
+	font-weight: bold;
+	text-transform: uppercase;
+	padding-left: 20px;
+	overflow: hidden;
+	display: flex;
+	cursor: pointer;
+}
+
+.monaco-panel-view .panel > .panel-header {
+	background-image: url('arrow-collapse.svg');
+	background-position: 2px center;
+	background-repeat: no-repeat;
+}
+
+.monaco-panel-view .panel > .panel-header.expanded {
+	background-image: url('arrow-expand.svg');
+	background-position: 2px center;
+	background-repeat: no-repeat;
+}
+
+.vs-dark .monaco-panel-view .panel > .panel-header {
+	background-image: url('arrow-collapse-dark.svg');
+}
+
+.vs-dark .monaco-panel-view .panel > .panel-header.expanded {
+	background-image: url('arrow-expand-dark.svg');
+}
+
+/* TODO: actions should be part of the panel, but they aren't yet */
+.monaco-panel-view .panel > .panel-header > .actions {
+	display: none;
+	flex: 1;
+}
+
+/* TODO: actions should be part of the panel, but they aren't yet */
+.monaco-panel-view .panel:hover > .panel-header.expanded > .actions,
+.monaco-panel-view .panel > .panel-header.focused.expanded > .actions {
+	display: initial;
+}
+
+/* TODO: actions should be part of the panel, but they aren't yet */
+.monaco-panel-view .panel > .panel-header > .actions .action-label {
+	width: 28px;
+	height: 22px;
+	background-size: 16px;
+	background-position: center center;
+	background-repeat: no-repeat;
+	margin-right: 0;
+}
+
+/* Bold font style does not go well with CJK fonts */
+.monaco-panel-view:lang(zh-Hans) .panel > .panel-header,
+.monaco-panel-view:lang(zh-Hant) .panel > .panel-header,
+.monaco-panel-view:lang(ja) .panel > .panel-header,
+.monaco-panel-view:lang(ko) .panel > .panel-header {
+	font-weight: normal;
+}
+
+.monaco-panel-view .panel > .panel-header.hidden {
+	display: none;
+}
+
+.monaco-panel-view .panel > .panel-body {
+	overflow: hidden;
+	flex: 1;
+}
+
+/* Animation */
+
+.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

@@ -0,0 +1,430 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  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 { 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 { firstIndex } from 'vs/base/common/arrays';
+import { Color, RGBA } from 'vs/base/common/color';
+import { SplitView, IView } from './splitview';
+
+export interface IPanelOptions {
+	ariaHeaderLabel?: string;
+	minimumBodySize?: number;
+	maximumBodySize?: number;
+	expanded?: boolean;
+}
+
+export interface IPanelStyles {
+	dropBackground?: Color;
+	headerForeground?: Color;
+	headerBackground?: Color;
+	headerHighContrastBorder?: Color;
+}
+
+export abstract class Panel implements IView {
+
+	private static HEADER_SIZE = 22;
+
+	protected _expanded: boolean;
+	private expandedSize: number | undefined = undefined;
+	private _headerVisible = true;
+	private _minimumBodySize: number;
+	private _maximumBodySize: number;
+	private ariaHeaderLabel: string;
+	private styles: IPanelStyles | undefined = undefined;
+
+	private el: HTMLElement;
+	private header: HTMLElement;
+	protected disposables: IDisposable[] = [];
+
+	private _onDidChange = new Emitter<number | undefined>();
+	readonly onDidChange: Event<number | undefined> = this._onDidChange.event;
+
+	get draggableElement(): HTMLElement {
+		return this.header;
+	}
+
+	get dropTargetElement(): HTMLElement {
+		return this.el;
+	}
+
+	private _dropBackground: Color | undefined;
+	get dropBackground(): Color | undefined {
+		return this._dropBackground;
+	}
+
+	get minimumBodySize(): number {
+		return this._minimumBodySize;
+	}
+
+	set minimumBodySize(size: number) {
+		this._minimumBodySize = size;
+		this._onDidChange.fire();
+	}
+
+	get maximumBodySize(): number {
+		return this._maximumBodySize;
+	}
+
+	set maximumBodySize(size: number) {
+		this._maximumBodySize = size;
+		this._onDidChange.fire();
+	}
+
+	private get headerSize(): number {
+		return this.headerVisible ? Panel.HEADER_SIZE : 0;
+	}
+
+	get minimumSize(): number {
+		const headerSize = this.headerSize;
+		const expanded = !this.headerVisible || this.isExpanded();
+		const minimumBodySize = expanded ? this._minimumBodySize : 0;
+
+		return headerSize + minimumBodySize;
+	}
+
+	get maximumSize(): number {
+		const headerSize = this.headerSize;
+		const expanded = !this.headerVisible || this.isExpanded();
+		const maximumBodySize = expanded ? this._maximumBodySize : 0;
+
+		return headerSize + maximumBodySize;
+	}
+
+	constructor(options: IPanelOptions = {}) {
+		this._expanded = typeof options.expanded === 'undefined' ? true : !!options.expanded;
+		this.ariaHeaderLabel = options.ariaHeaderLabel || '';
+		this._minimumBodySize = typeof options.minimumBodySize === 'number' ? options.minimumBodySize : 120;
+		this._maximumBodySize = typeof options.maximumBodySize === 'number' ? options.maximumBodySize : Number.POSITIVE_INFINITY;
+	}
+
+	isExpanded(): boolean {
+		return this._expanded;
+	}
+
+	setExpanded(expanded: boolean): void {
+		if (this._expanded === !!expanded) {
+			return;
+		}
+
+		this._expanded = !!expanded;
+		this.updateHeader();
+		this._onDidChange.fire(expanded ? this.expandedSize : undefined);
+	}
+
+	get headerVisible(): boolean {
+		return this._headerVisible;
+	}
+
+	set headerVisible(visible: boolean) {
+		if (this._headerVisible === !!visible) {
+			return;
+		}
+
+		this._headerVisible = !!visible;
+		this.updateHeader();
+		this._onDidChange.fire();
+	}
+
+	render(container: HTMLElement): void {
+		this.el = append(container, $('.panel'));
+
+		this.header = $('.panel-header');
+		append(this.el, this.header);
+		this.header.setAttribute('tabindex', '0');
+		this.header.setAttribute('role', 'toolbar');
+		this.header.setAttribute('aria-label', this.ariaHeaderLabel);
+		this.renderHeader(this.header);
+
+		const focusTracker = trackFocus(this.header);
+		focusTracker.addFocusListener(() => addClass(this.header, 'focused'));
+		focusTracker.addBlurListener(() => removeClass(this.header, 'focused'));
+
+		this.updateHeader();
+
+		const onHeaderKeyDown = chain(domEvent(this.header, 'keydown'))
+			.map(e => new StandardKeyboardEvent(e));
+
+		onHeaderKeyDown.filter(e => e.keyCode === KeyCode.Enter || e.keyCode === KeyCode.Space)
+			.event(() => this.setExpanded(!this.isExpanded()), null, this.disposables);
+
+		onHeaderKeyDown.filter(e => e.keyCode === KeyCode.LeftArrow)
+			.event(() => this.setExpanded(false), null, this.disposables);
+
+		onHeaderKeyDown.filter(e => e.keyCode === KeyCode.RightArrow)
+			.event(() => this.setExpanded(true), null, this.disposables);
+
+		domEvent(this.header, 'click')
+			(() => this.setExpanded(!this.isExpanded()), null, this.disposables);
+
+		// TODO@Joao move this down to panelview
+		// onHeaderKeyDown.filter(e => e.keyCode === KeyCode.UpArrow)
+		// 	.event(focusPrevious, this, this.disposables);
+
+		// onHeaderKeyDown.filter(e => e.keyCode === KeyCode.DownArrow)
+		// 	.event(focusNext, this, this.disposables);
+
+		const body = append(this.el, $('.panel-body'));
+		this.renderBody(body);
+	}
+
+	layout(size: number): void {
+		const headerSize = this.headerVisible ? Panel.HEADER_SIZE : 0;
+		this.layoutBody(size - headerSize);
+
+		if (this.isExpanded()) {
+			this.expandedSize = size;
+		}
+	}
+
+	style(styles: IPanelStyles): void {
+		this.styles = styles;
+
+		if (!this.header) {
+			return;
+		}
+
+		this.updateHeader();
+	}
+
+	protected updateHeader(): void {
+		const expanded = !this.headerVisible || this.isExpanded();
+
+		this.header.style.height = `${this.headerSize}px`;
+		this.header.style.lineHeight = `${this.headerSize}px`;
+		toggleClass(this.header, 'hidden', !this.headerVisible);
+		toggleClass(this.header, 'expanded', expanded);
+		this.header.setAttribute('aria-expanded', String(expanded));
+
+		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._dropBackground = this.styles.dropBackground;
+	}
+
+	protected abstract renderHeader(container: HTMLElement): void;
+	protected abstract renderBody(container: HTMLElement): void;
+	protected abstract layoutBody(size: number): void;
+
+	dispose(): void {
+		this.disposables = dispose(this.disposables);
+	}
+}
+
+interface IDndContext {
+	draggable: PanelDraggable | null;
+}
+
+class PanelDraggable implements IDisposable {
+
+	private static 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 _onDidDrop = new Emitter<{ from: Panel, to: Panel }>();
+	readonly onDidDrop = this._onDidDrop.event;
+
+	constructor(private panel: Panel, private context: IDndContext) {
+		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);
+	}
+
+	private onDragStart(e: DragEvent): void {
+		e.dataTransfer.effectAllowed = 'move';
+
+		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);
+
+		this.context.draggable = this;
+	}
+
+	private onDragEnter(e: DragEvent): void {
+		if (!this.context.draggable || this.context.draggable === this) {
+			return;
+		}
+
+		this.dragOverCounter++;
+		this.render();
+	}
+
+	private onDragLeave(e: DragEvent): void {
+		if (!this.context.draggable || this.context.draggable === this) {
+			return;
+		}
+
+		this.dragOverCounter--;
+
+		if (this.dragOverCounter === 0) {
+			this.render();
+		}
+	}
+
+	private onDragEnd(e: DragEvent): void {
+		if (!this.context.draggable) {
+			return;
+		}
+
+		this.dragOverCounter = 0;
+		this.render();
+		this.context.draggable = null;
+	}
+
+	private onDrop(e: DragEvent): void {
+		if (!this.context.draggable) {
+			return;
+		}
+
+		this.dragOverCounter = 0;
+		this.render();
+
+		if (this.context.draggable !== this) {
+			this._onDidDrop.fire({ from: this.context.draggable.panel, to: this.panel });
+		}
+
+		this.context.draggable = null;
+	}
+
+	private render(): void {
+		let backgroundColor: string = null;
+
+		if (this.dragOverCounter > 0) {
+			backgroundColor = (this.panel.dropBackground || PanelDraggable.DefaultDragOverBackgroundColor).toString();
+		}
+
+		this.panel.dropTargetElement.style.backgroundColor = backgroundColor;
+	}
+
+	dispose(): void {
+		this.disposables = dispose(this.disposables);
+	}
+}
+
+export class IPanelViewOptions {
+	dnd?: boolean;
+}
+
+interface IPanelItem {
+	panel: Panel;
+	disposable: IDisposable;
+}
+
+export class PanelView implements IDisposable {
+
+	private dnd: boolean;
+	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 }>();
+	readonly onDidDrop: Event<{ from: Panel, to: Panel }> = this._onDidDrop.event;
+
+	readonly onDidSashChange: Event<void>;
+
+	constructor(private container: HTMLElement, options: IPanelViewOptions = {}) {
+		this.dnd = !!options.dnd;
+		this.el = append(container, $('.monaco-panel-view'));
+		this.splitview = 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);
+
+		const panelItem = { panel, disposable: combinedDisposable(disposables) };
+		this.panelItems.splice(index, 0, panelItem);
+		this.splitview.addView(panel, size, index);
+
+		if (this.dnd) {
+			const draggable = new PanelDraggable(panel, this.dndContext);
+			disposables.push(draggable);
+			draggable.onDidDrop(this._onDidDrop.fire, this._onDidDrop, disposables);
+		}
+	}
+
+	removePanel(panel: Panel): void {
+		const index = firstIndex(this.panelItems, item => item.panel === panel);
+
+		if (index === -1) {
+			return;
+		}
+
+		this.splitview.removeView(index);
+		const panelItem = this.panelItems.splice(index, 1)[0];
+		panelItem.disposable.dispose();
+	}
+
+	movePanel(from: Panel, to: Panel): void {
+		const fromIndex = firstIndex(this.panelItems, item => item.panel === from);
+		const toIndex = firstIndex(this.panelItems, item => item.panel === to);
+
+		if (fromIndex === -1 || toIndex === -1) {
+			return;
+		}
+
+		const [panelItem] = this.panelItems.splice(fromIndex, 1);
+		this.panelItems.splice(toIndex, 0, panelItem);
+
+		this.splitview.moveView(fromIndex, toIndex);
+	}
+
+	resizePanel(panel: Panel, size: number): void {
+		const index = firstIndex(this.panelItems, item => item.panel === panel);
+
+		if (index === -1) {
+			return;
+		}
+
+		this.splitview.resizeView(index, size);
+	}
+
+	getPanelSize(panel: Panel): number {
+		const index = firstIndex(this.panelItems, item => item.panel === panel);
+
+		if (index === -1) {
+			return -1;
+		}
+
+		return this.splitview.getViewSize(index);
+	}
+
+	layout(size: number): void {
+		this.splitview.layout(size);
+	}
+
+	private setupAnimation(): void {
+		if (typeof this.animationTimer === 'number') {
+			window.clearTimeout(this.animationTimer);
+		}
+
+		addClass(this.el, 'animated');
+
+		this.animationTimer = window.setTimeout(() => {
+			this.animationTimer = null;
+			removeClass(this.el, 'animated');
+		}, 200);
+	}
+
+	dispose(): void {
+		this.panelItems.forEach(i => i.disposable.dispose());
+		this.splitview.dispose();
+	}
+}

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

@@ -3,96 +3,21 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-.monaco-split-view {
+.monaco-split-view2 {
 	position: relative;
-}
-
-.monaco-split-view > .split-view-view {
 	overflow: hidden;
-}
-
-.monaco-split-view.vertical > .split-view-view {
 	width: 100%;
-}
-
-.monaco-split-view.horizontal > .split-view-view {
 	height: 100%;
 }
 
-.monaco-split-view > .split-view-view > .header {
-	position: relative;
-	line-height: 22px;
-	font-size: 11px;
-	font-weight: bold;
-	text-transform: uppercase;
-	padding-left: 20px;
+.monaco-split-view2 > .split-view-view {
 	overflow: hidden;
-	display: flex;
 }
 
-.monaco-split-view > .split-view-view > .header.hide {
-	display: none;
+.monaco-split-view2.vertical > .split-view-view {
+	width: 100%;
 }
 
-/* Bold font style does not go well with CJK fonts */
-.monaco-split-view:lang(zh-Hans) > .split-view-view > .header,
-.monaco-split-view:lang(zh-Hant) > .split-view-view > .header,
-.monaco-split-view:lang(ja) > .split-view-view > .header,
-.monaco-split-view:lang(ko) > .split-view-view > .header { font-weight: normal; }
-
-.monaco-split-view > .split-view-view > .header.collapsible {
-	cursor: pointer;
+.monaco-split-view2.horizontal > .split-view-view {
+	height: 100%;
 }
-
-.monaco-split-view > .split-view-view > .header.collapsible {
-	background-image: url('arrow-collapse.svg');
-	background-position: 2px center;
-	background-repeat: no-repeat;
-}
-
-.monaco-split-view > .split-view-view > .header.collapsible:not(.collapsed) {
-	background-image: url('arrow-expand.svg');
-	background-position: 2px center;
-	background-repeat: no-repeat;
-}
-
-.vs-dark .monaco-split-view > .split-view-view > .header.collapsible {
-	background-image: url('arrow-collapse-dark.svg');
-}
-
-.vs-dark .monaco-split-view > .split-view-view > .header.collapsible:not(.collapsed) {
-	background-image: url('arrow-expand-dark.svg');
-	background-position: 2px center;
-	background-repeat: no-repeat;
-}
-
-/* Animation */
-
-.monaco-split-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-split-view.vertical.animated > .split-view-view {
-	transition-property: height;
-	-webkit-transition-property: height;
-	-moz-transition-property: height;
-}
-
-.monaco-split-view.horizontal.animated > .split-view-view {
-	transition-property: width;
-	-webkit-transition-property: width;
-	-moz-transition-property: width;
-}
-
-.hc-black .split-view-view .action-label {
-	background: none;
-}
-
-.hc-black .split-view-view > .header .action-label:before {
-	top: 4px !important;
-}