wip: splitview without render

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

@@ -42,23 +42,19 @@ export abstract class Panel implements IView {
 	private ariaHeaderLabel: string;
 	private styles: IPanelStyles | undefined = undefined;
 
-	private el: HTMLElement;
+	readonly element: HTMLElement;
 	private header: HTMLElement;
 	protected disposables: IDisposable[] = [];
 
 	private _onDidChange = new Emitter<number | undefined>();
 	readonly onDidChange: Event<number | undefined> = this._onDidChange.event;
 
-	get element(): HTMLElement {
-		return this.el;
-	}
-
 	get draggableElement(): HTMLElement {
 		return this.header;
 	}
 
 	get dropTargetElement(): HTMLElement {
-		return this.el;
+		return this.element;
 	}
 
 	private _dropBackground: Color | undefined;
@@ -109,6 +105,9 @@ export abstract class Panel implements IView {
 		this.ariaHeaderLabel = options.ariaHeaderLabel || '';
 		this._minimumBodySize = typeof options.minimumBodySize === 'number' ? options.minimumBodySize : 120;
 		this._maximumBodySize = typeof options.maximumBodySize === 'number' ? options.maximumBodySize : Number.POSITIVE_INFINITY;
+
+		this.element = $('.panel');
+		this.render();
 	}
 
 	isExpanded(): boolean {
@@ -139,11 +138,9 @@ export abstract class Panel implements IView {
 		this._onDidChange.fire();
 	}
 
-	render(container: HTMLElement): void {
-		this.el = append(container, $('.panel'));
-
+	protected render(): void {
 		this.header = $('.panel-header');
-		append(this.el, this.header);
+		append(this.element, this.header);
 		this.header.setAttribute('tabindex', '0');
 		this.header.setAttribute('role', 'toolbar');
 		this.header.setAttribute('aria-label', this.ariaHeaderLabel);
@@ -177,7 +174,7 @@ export abstract class Panel implements IView {
 		// onHeaderKeyDown.filter(e => e.keyCode === KeyCode.DownArrow)
 		// 	.event(focusNext, this, this.disposables);
 
-		const body = append(this.el, $('.panel-body'));
+		const body = append(this.element, $('.panel-body'));
 		this.renderBody(body);
 	}
 

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

@@ -20,10 +20,10 @@ export interface ISplitViewOptions {
 }
 
 export interface IView {
+	readonly element: HTMLElement;
 	readonly minimumSize: number;
 	readonly maximumSize: number;
 	readonly onDidChange: Event<number | undefined>;
-	render(container: HTMLElement, orientation: Orientation): void;
 	layout(size: number, orientation: Orientation): void;
 }
 
@@ -169,7 +169,7 @@ export class SplitView implements IDisposable {
 			this.sashItems.splice(index - 1, 0, sashItem);
 		}
 
-		view.render(container, this.orientation);
+		container.appendChild(view.element);
 		this.relayout(index);
 		this.state = State.Idle;
 	}

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

@@ -19,8 +19,11 @@ class TestView implements IView {
 	get maximumSize(): number { return this._maximumSize; }
 	set maximumSize(size: number) { this._maximumSize = size; this._onDidChange.fire(); }
 
-	private _onDidRender = new Emitter<{ container: HTMLElement; orientation: Orientation }>();
-	readonly onDidRender = this._onDidRender.event;
+	private _element: HTMLElement = document.createElement('div');
+	get element(): HTMLElement { this._onDidGetElement.fire(); return this._element; }
+
+	private _onDidGetElement = new Emitter<void>();
+	readonly onDidGetElement = this._onDidGetElement.event;
 
 	private _size = 0;
 	get size(): number { return this._size; }
@@ -37,10 +40,6 @@ class TestView implements IView {
 		assert(_minimumSize <= _maximumSize, 'splitview view minimum size must be <= maximum size');
 	}
 
-	render(container: HTMLElement, orientation: Orientation): void {
-		this._onDidRender.fire({ container, orientation });
-	}
-
 	layout(size: number, orientation: Orientation): void {
 		this._size = size;
 		this._onDidLayout.fire({ size, orientation });
@@ -52,7 +51,7 @@ class TestView implements IView {
 
 	dispose(): void {
 		this._onDidChange.dispose();
-		this._onDidRender.dispose();
+		this._onDidGetElement.dispose();
 		this._onDidLayout.dispose();
 		this._onDidFocus.dispose();
 	}
@@ -136,7 +135,7 @@ suite('Splitview', () => {
 		const layoutDisposable = view.onDidLayout(() => didLayout = true);
 
 		let didRender = false;
-		const renderDisposable = view.onDidRender(() => didRender = true);
+		const renderDisposable = view.onDidGetElement(() => didRender = true);
 
 		splitview.addView(view, 20);
 
@@ -322,7 +321,7 @@ suite('Splitview', () => {
 		splitview.addView(view1, 142, 0);
 		assert.equal(view1.size, 986, 'first view is stretched');
 
-		view2.onDidRender(() => {
+		view2.onDidGetElement(() => {
 			assert.throws(() => splitview.resizeView(1, 922));
 			assert.throws(() => splitview.resizeView(1, 922));
 		});

src/vs/workbench/browser/parts/views/panelViewlet.ts

@@ -65,10 +65,10 @@ export abstract class ViewletPanel extends Panel {
 		this.actionRunner = options.actionRunner;
 	}
 
-	render(container: HTMLElement): void {
-		super.render(container);
+	protected render(): void {
+		super.render();
 
-		const focusTracker = trackFocus(container);
+		const focusTracker = trackFocus(this.element);
 		this.disposables.push(focusTracker);
 		this.disposables.push(focusTracker.onDidFocus(() => this._onDidFocus.fire()));
 	}

src/vs/workbench/parts/scm/electron-browser/scmViewlet.ts

@@ -768,8 +768,8 @@ export class RepositoryPanel extends ViewletPanel {
 		this.menus = instantiationService.createInstance(SCMMenus, repository.provider);
 	}
 
-	render(container: HTMLElement): void {
-		super.render(container);
+	protected render(): void {
+		super.render();
 		this.menus.onDidChangeTitle(this.updateActions, this, this.disposables);
 	}
 

src/vs/workbench/parts/terminal/browser/terminalTab.ts

@@ -115,9 +115,8 @@ class SplitPaneContainer {
 	}
 
 	private _addChild(size: number, instance: ITerminalInstance, index: number): void {
-		const child = new SplitPane(this.orientation === Orientation.HORIZONTAL ? this._height : this._width);
+		const child = new SplitPane(instance, this.orientation === Orientation.HORIZONTAL ? this._height : this._width);
 		child.orientation = this.orientation;
-		child.instance = instance;
 		if (typeof index === 'number') {
 			this._children.splice(index, 0, child);
 		} else {
@@ -197,23 +196,21 @@ class SplitPane implements IView {
 	public minimumSize: number = SPLIT_PANE_MIN_SIZE;
 	public maximumSize: number = Number.MAX_VALUE;
 
-	public instance: ITerminalInstance;
 	public orientation: Orientation | undefined;
 	protected _size: number;
 
 	private _onDidChange: Event<number | undefined> = Event.None;
 	public get onDidChange(): Event<number | undefined> { return this._onDidChange; }
 
+	readonly element: HTMLElement;
+
 	constructor(
+		readonly instance: ITerminalInstance,
 		public orthogonalSize: number
 	) {
-	}
-
-	public render(container: HTMLElement): void {
-		if (!container) {
-			return;
-		}
-		this.instance.attachToElement(container);
+		this.element = document.createElement('div');
+		this.element.className = 'terminal-split-pane';
+		this.instance.attachToElement(this.element);
 	}
 
 	public layout(size: number): void {