Put .split-view-view's into a container

Fixes #44435

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

@@ -10,15 +10,20 @@
 	height: 100%;
 }
 
-.monaco-split-view2 > .split-view-view {
+.monaco-split-view2 > .split-view-container {
+	width: 100%;
+	height: 100%;
+}
+
+.monaco-split-view2 > .split-view-container > .split-view-view {
 	overflow: hidden;
 }
 
-.monaco-split-view2.vertical > .split-view-view {
+.monaco-split-view2.vertical > .split-view-container > .split-view-view {
 	width: 100%;
 }
 
-.monaco-split-view2.horizontal > .split-view-view {
+.monaco-split-view2.horizontal > .split-view-container > .split-view-view {
 	height: 100%;
 	display: inline-block;
 }

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

@@ -82,6 +82,7 @@ export class SplitView implements IDisposable {
 
 	private orientation: Orientation;
 	private el: HTMLElement;
+	private viewContainer: HTMLElement;
 	private size = 0;
 	private contentSize = 0;
 	private viewItems: IViewItem[] = [];
@@ -105,6 +106,10 @@ export class SplitView implements IDisposable {
 		dom.addClass(this.el, 'monaco-split-view2');
 		dom.addClass(this.el, this.orientation === Orientation.VERTICAL ? 'vertical' : 'horizontal');
 		container.appendChild(this.el);
+
+		this.viewContainer = document.createElement('div');
+		dom.addClass(this.viewContainer, 'split-view-container');
+		this.el.appendChild(this.viewContainer);
 	}
 
 	addView(view: IView, size: number, index = this.viewItems.length): void {
@@ -118,13 +123,13 @@ export class SplitView implements IDisposable {
 		const container = dom.$('.split-view-view');
 
 		if (index === this.viewItems.length) {
-			this.el.appendChild(container);
+			this.viewContainer.appendChild(container);
 		} else {
-			this.el.insertBefore(container, this.el.children.item(index));
+			this.viewContainer.insertBefore(container, this.viewContainer.children.item(index));
 		}
 
 		const onChangeDisposable = view.onDidChange(size => this.onViewChange(item, size));
-		const containerDisposable = toDisposable(() => this.el.removeChild(container));
+		const containerDisposable = toDisposable(() => this.viewContainer.removeChild(container));
 		const disposable = combinedDisposable([onChangeDisposable, containerDisposable]);
 
 		const layoutContainer = this.orientation === Orientation.VERTICAL
@@ -218,9 +223,9 @@ export class SplitView implements IDisposable {
 		this.viewItems.splice(to, 0, viewItem);
 
 		if (to + 1 < this.viewItems.length) {
-			this.el.insertBefore(viewItem.container, this.viewItems[to + 1].container);
+			this.viewContainer.insertBefore(viewItem.container, this.viewItems[to + 1].container);
 		} else {
-			this.el.appendChild(viewItem.container);
+			this.viewContainer.appendChild(viewItem.container);
 		}
 
 		this.layoutViews();

src/vs/workbench/parts/terminal/electron-browser/media/terminal.css

@@ -33,10 +33,10 @@
 	bottom: 2px; /* Matches padding-bottom on .terminal-outer-container */
 	top: 0;
 }
-.monaco-workbench .panel.integrated-terminal .monaco-split-view2.horizontal .split-view-view.first .terminal-wrapper {
+.monaco-workbench .panel.integrated-terminal .monaco-split-view2.horizontal .split-view-view:first-child .terminal-wrapper {
 	margin-left: 20px;
 }
-.monaco-workbench .panel.integrated-terminal .monaco-split-view2.horizontal .split-view-view.last .terminal-wrapper {
+.monaco-workbench .panel.integrated-terminal .monaco-split-view2.horizontal .split-view-view:last-child .terminal-wrapper {
 	margin-right: 20px;
 }
 
@@ -52,7 +52,7 @@
 .monaco-workbench .panel.integrated-terminal .xterm-viewport {
 	margin-right: -10px;
 }
-.monaco-workbench .panel.integrated-terminal .monaco-split-view2.horizontal .split-view-view.last .xterm-viewport {
+.monaco-workbench .panel.integrated-terminal .monaco-split-view2.horizontal .split-view-view:last-child .xterm-viewport {
 	margin-right: -20px;
 }
 
@@ -111,7 +111,7 @@
 	left: 0;
 	user-select: none;
 }
-.monaco-workbench .panel.integrated-terminal .monaco-split-view2.vertical .split-view-view:not(.last) .xterm {
+.monaco-workbench .panel.integrated-terminal .monaco-split-view2.vertical .split-view-view:not(:last-child) .xterm {
 	/* When vertical and NOT the bottom terminal, align to the top instead to prevent the output jumping around erratically */
 	top: 0;
 	bottom: auto;

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

@@ -130,7 +130,6 @@ class SplitPaneContainer {
 		this._withDisabledLayout(() => this._splitView.addView(child, size, index));
 
 		this.resetSize();
-		this._refreshOrderClasses();
 
 		this._onDidChange = anyEvent(...this._children.map(c => c.onDidChange));
 	}
@@ -146,19 +145,6 @@ class SplitPaneContainer {
 			this._children.splice(index, 1);
 			this._splitView.removeView(index);
 			this.resetSize();
-			this._refreshOrderClasses();
-		}
-	}
-
-	private _refreshOrderClasses(): void {
-		this._children.forEach((c, i) => {
-			c.setIsFirst(i === 0);
-			c.setIsLast(i === this._children.length - 1);
-		});
-		// HACK: Force another layout, this isn't ideal but terminal instance uses the first/last CSS
-		// rules for sizing the terminal and the layout is performed when the split view is added.
-		if (this._children.length > 0) {
-			this.layout(this._width, this._height);
 		}
 	}
 
@@ -217,7 +203,6 @@ class SplitPane implements IView {
 	public instance: ITerminalInstance;
 	public orientation: Orientation | undefined;
 	protected _size: number;
-	private _container: HTMLElement | undefined;
 
 	private _onDidChange: Event<number | undefined> = Event.None;
 	public get onDidChange(): Event<number | undefined> { return this._onDidChange; }
@@ -231,22 +216,9 @@ class SplitPane implements IView {
 		if (!container) {
 			return;
 		}
-		this._container = container;
 		this.instance.attachToElement(container);
 	}
 
-	public setIsFirst(isFirst: boolean): void {
-		if (this._container) {
-			this._container.classList.toggle('first', isFirst);
-		}
-	}
-
-	public setIsLast(isLast: boolean): void {
-		if (this._container) {
-			this._container.classList.toggle('last', isLast);
-		}
-	}
-
 	public layout(size: number): void {
 		// Only layout when both sizes are known
 		this._size = size;