Implement terminal scroll bar

npm-shrinkwrap.json

@@ -429,8 +429,8 @@
     },
     "xterm": {
       "version": "1.0.0",
-      "from": "git+https://github.com/sourcelair/xterm.js.git#65b2be7",
-      "resolved": "git+https://github.com/sourcelair/xterm.js.git#65b2be78315e0c83defb7d8358eb0282a18024a0"
+      "from": "git+https://github.com/sourcelair/xterm.js.git#e7c7160",
+      "resolved": "git+https://github.com/sourcelair/xterm.js.git#e7c7160f8549eede0f069d3b8512642f3498f9fe"
     },
     "yauzl": {
       "version": "2.3.1",

package.json

@@ -30,7 +30,7 @@
     "vscode-debugprotocol": "1.11.0",
     "vscode-textmate": "2.0.1",
     "winreg": "1.2.0",
-    "xterm": "git+https://github.com/sourcelair/xterm.js.git#65b2be7",
+    "xterm": "git+https://github.com/sourcelair/xterm.js.git#e7c7160",
     "yauzl": "2.3.1"
   },
   "devDependencies": {

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

@@ -0,0 +1,40 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.monaco-workbench .panel.integrated-terminal .xterm-viewport {
+	/* Use the hack presented in http://stackoverflow.com/a/38748186/1156119 to get opacity transitions working on the scrollbar */
+	background-color: rgba(121, 121, 121, 0);
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	transition: background-color 800ms linear;
+}
+
+.monaco-workbench .panel.integrated-terminal .xterm-viewport::-webkit-scrollbar {
+	width: 10px;
+}
+
+.monaco-workbench .panel.integrated-terminal .xterm-viewport::-webkit-scrollbar-track {
+	opacity: 0;
+}
+
+.monaco-workbench .panel.integrated-terminal .xterm-viewport::-webkit-scrollbar-thumb {
+	background-color: inherit;
+}
+
+.monaco-workbench .panel.integrated-terminal .xterm.focus .xterm-viewport,
+.monaco-workbench .panel.integrated-terminal .xterm:focus .xterm-viewport,
+.monaco-workbench .panel.integrated-terminal .xterm:hover .xterm-viewport {
+	transition: opacity 100ms linear;
+	background-color: rgba(121, 121, 121, 0.4);
+}
+
+.monaco-workbench .panel.integrated-terminal .xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
+	transition: opacity 0ms linear;
+	background-color: rgba(100, 100, 100, .7);
+}
+
+.monaco-workbench .panel.integrated-terminal .xterm .xterm-viewport::-webkit-scrollbar-thumb:window-inactive {
+	background-color: inherit;
+}

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

@@ -119,6 +119,27 @@
 	}
 }
 
+.monaco-workbench .panel.integrated-terminal .xterm .xterm-viewport {
+	overflow-y: scroll;
+}
+
+.monaco-workbench .panel.integrated-terminal .xterm .xterm-rows {
+	position: absolute;
+	left: 0;
+	bottom: 0;
+}
+
+.monaco-workbench .panel.integrated-terminal .xterm .xterm-scroll-area {
+	visibility: hidden;
+}
+
+.monaco-workbench .panel.integrated-terminal .xterm .xterm-char-measure-element {
+	display: inline-block;
+	visibility: hidden;
+	position: absolute;
+	left: -9999em;
+}
+
 .monaco-workbench .panel.integrated-terminal .xterm .xterm-bold {
 	font-weight: bold;
 }

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

@@ -3,6 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+import 'vs/css!./media/scrollbar';
 import 'vs/css!./media/terminal';
 import 'vs/css!./media/xterm';
 import * as panel from 'vs/workbench/browser/panel';

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

@@ -135,10 +135,13 @@ export class TerminalInstance {
 		if (!dimension.height) { // Minimized
 			return;
 		}
-		let cols = Math.floor(dimension.width / this.font.charWidth);
+		let leftPadding = parseInt(getComputedStyle(document.querySelector('.terminal-outer-container')).paddingLeft.split('px')[0], 10);
+		let innerWidth = dimension.width - leftPadding;
+		let cols = Math.floor(innerWidth / this.font.charWidth);
 		let rows = Math.floor(dimension.height / this.font.charHeight);
 		if (this.xterm) {
 			this.xterm.resize(cols, rows);
+			this.xterm.element.style.width = innerWidth + 'px';
 		}
 		if (this.terminalProcess.process.connected) {
 			this.terminalProcess.process.send({