Terminal tabs progress

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

@@ -3,18 +3,22 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-.monaco-workbench .integrated-terminal .tabs-container {
+.monaco-workbench .panel.integrated-terminal .tabs-outer-container {
+	flex-grow: 1;
+}
+
+.monaco-workbench .panel.integrated-terminal .tabs-container {
 	list-style: none;
 	margin: 0;
 	padding: 0;
 	display: flex;
+	background-color: rgba(128, 128, 128, 0.2);
 }
 
-.monaco-workbench .integrated-terminal .tab {
+.monaco-workbench .panel.integrated-terminal .tab {
 	display: flex;
 	width: 120px;
 	min-width: fit-content;
-	overflow: hidden;
 	white-space: nowrap;
 	cursor: pointer;
 	border-left: 1px solid hsla(0,0%,50%,.2);

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

@@ -3,35 +3,24 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-.monaco-workbench .integrated-terminal {
+.monaco-workbench .panel.integrated-terminal {
 	align-items: flex-start;
 	display: flex;
 	flex-direction: column;
-}
-
-.monaco-workbench .integrated-terminal {
 	background-color: transparent!important;
 	color: #333;
 	-webkit-user-select: initial;
 	overflow: hidden; /* prevents the terminal output being incorrectly placed over the title */
 	padding: 0 20px;
 }
+.vs-dark .monaco-workbench .panel.integrated-terminal { color: #CCC; }
+.hc-black .monaco-workbench .panel.integrated-terminal { color: #FFF; }
 
-.vs-dark .monaco-workbench .integrated-terminal {
-	color: #CCC;
-}
-
-.hc-black .monaco-workbench .integrated-terminal {
-	color: #FFF;
-}
-
-.monaco-workbench .integrated-terminal .terminal-wrapper {
+.monaco-workbench .panel.integrated-terminal .terminal-wrapper {
 	display: none;
 }
-
-.monaco-workbench .integrated-terminal .terminal-wrapper.active {
-	align-items: flex-end;
-	display: flex;
+.monaco-workbench .panel.integrated-terminal .terminal-wrapper.active {
+	display: block;
 }
 
 /* Terminal actions */

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

@@ -41,7 +41,6 @@ export class TerminalInstance {
 		this.wrapperElement.classList.add('terminal-wrapper');
 		this.ptyProcess = this.createTerminalProcess();
 		this.terminalDomElement = document.createElement('div');
-		this.parentDomElement.classList.add('integrated-terminal');
 		let terminalScrollbar = new DomScrollableElement(this.terminalDomElement, {
 			canUseTranslate3d: false,
 			horizontal: ScrollbarVisibility.Hidden,
@@ -105,6 +104,9 @@ export class TerminalInstance {
 		let cols = Math.floor(dimension.width / this.font.charWidth);
 		let rows = Math.floor(dimension.height / this.font.charHeight);
 		if (this.terminal) {
+			console.log('this.font', this.font);
+			console.log('cols: ' + cols);
+			console.log('rows: ' + rows);
 			this.terminal.resize(cols, rows);
 		}
 		if (this.ptyProcess.connected) {

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

@@ -29,9 +29,10 @@ export class TerminalPanel extends Panel {
 
 	private actions: IAction[];
 	private parentDomElement: HTMLElement;
+	private tabsOuterContainer: HTMLElement;
 	private tabsContainer: HTMLElement;
 	private tabScrollbar: ScrollableElement;
-	private terminalContainerElement: HTMLElement;
+	private terminalContainer: HTMLElement;
 	private themeStyleElement: HTMLElement;
 	private configurationHelper: TerminalConfigHelper;
 	private activeTerminalIndex: number;
@@ -53,10 +54,7 @@ export class TerminalPanel extends Panel {
 		}
 		if (this.terminalInstances.length > 0) {
 			let computedStyle = window.getComputedStyle(this.tabsContainer);
-			console.log(computedStyle.height);
 			let height = dimension.height - parseInt(computedStyle.height.replace(/px/, ''), 10);
-			console.log('dimension.height: ' + dimension.height);
-			console.log('height: ' + height);
 			let terminalContainerDimension = new Dimension(dimension.width, height);
 			this.terminalInstances[this.activeTerminalIndex].layout(terminalContainerDimension);
 		}
@@ -82,7 +80,10 @@ export class TerminalPanel extends Panel {
 	public create(parent: Builder): TPromise<void> {
 		super.create(parent);
 		this.parentDomElement = parent.getHTMLElement();
+		DOM.addClass(this.parentDomElement, 'integrated-terminal');
 		this.themeStyleElement = document.createElement('style');
+		this.tabsOuterContainer = document.createElement('div');
+		DOM.addClass(this.tabsOuterContainer, 'tabs-outer-container');
 		this.tabsContainer = document.createElement('ul');
 		DOM.addClass(this.tabsContainer, 'tabs-container');
 
@@ -95,20 +96,21 @@ export class TerminalPanel extends Panel {
 			canUseTranslate3d: true,
 			horizontalScrollbarSize: 3
 		});
-		this.tabsContainer.style.overflow = 'scroll'; // custom scrollbar is eager on removing this style but we want it for DND scroll feedback
 
 		this.tabScrollbar.onScroll(e => {
 			this.tabsContainer.scrollLeft = e.scrollLeft;
 		});
 
-		this.parentDomElement.appendChild(this.tabScrollbar.getDomNode());
+		this.tabsOuterContainer.appendChild(this.tabScrollbar.getDomNode());
 
-		this.terminalContainerElement = document.createElement('div');
+		// TODO: Move tabs to bottom
+		this.terminalContainer = document.createElement('div');
+		this.parentDomElement.appendChild(this.tabsOuterContainer);
 		this.parentDomElement.appendChild(this.themeStyleElement);
-		this.parentDomElement.appendChild(this.tabsContainer);
-		this.parentDomElement.appendChild(this.terminalContainerElement);
+		this.parentDomElement.appendChild(this.terminalContainer);
+
 		this.configurationHelper = new TerminalConfigHelper(platform.platform, this.configurationService, this.parentDomElement);
-		this.toDispose.push(DOM.addDisposableListener(this.parentDomElement, 'wheel', (event: WheelEvent) => {
+		this.toDispose.push(DOM.addDisposableListener(this.terminalContainer, 'wheel', (event: WheelEvent) => {
 			this.terminalInstances[this.activeTerminalIndex].dispatchEvent(new WheelEvent(event.type, event));
 		}));
 
@@ -146,7 +148,7 @@ export class TerminalPanel extends Panel {
 
 	private createTerminal(): TPromise<TerminalInstance> {
 		return new TPromise<TerminalInstance>(resolve => {
-			var terminalInstance = new TerminalInstance(this.configurationHelper.getShell(), this.parentDomElement, this.contextService, this.terminalService, this.onTerminalInstanceExit.bind(this));
+			var terminalInstance = new TerminalInstance(this.configurationHelper.getShell(), this.terminalContainer, this.contextService, this.terminalService, this.onTerminalInstanceExit.bind(this));
 			this.terminalInstances.push(terminalInstance);
 			this.setActiveTerminal(this.terminalInstances.length - 1);
 			this.toDispose.push(this.themeService.onDidThemeChange(this.updateTheme.bind(this)));
@@ -191,10 +193,10 @@ export class TerminalPanel extends Panel {
 		theme.forEach((color: string, index: number) => {
 			// TODO: The classes could probably be reduced, it's so long to beat the specificity of the general rule.
 			let rgba = this.convertHexCssColorToRgba(color, 0.996);
-			css += `.monaco-workbench .integrated-terminal .terminal .xterm-color-${index} { color: ${color}; }` +
-				`.monaco-workbench .integrated-terminal .terminal .xterm-color-${index}::selection { background-color: ${rgba}; }` +
-				`.monaco-workbench .integrated-terminal .terminal .xterm-bg-color-${index} { background-color: ${color}; }` +
-				`.monaco-workbench .integrated-terminal .terminal .xterm-bg-color-${index}::selection { color: ${color}; }`;
+			css += `.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-${index} { color: ${color}; }` +
+				`.monaco-workbench .panel.integrated-terminal .xterm .xterm-color-${index}::selection { background-color: ${rgba}; }` +
+				`.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-${index} { background-color: ${color}; }` +
+				`.monaco-workbench .panel.integrated-terminal .xterm .xterm-bg-color-${index}::selection { color: ${color}; }`;
 		});
 
 		this.themeStyleElement.innerHTML = css;