[Win] Improve design of the scrollbars (#982)

* [Win] Improve the design of the scrollbars

* Fix code style

* Apply `borderColor` as the `backgroundColor` for the scroll bars

lib/components/term-group.js

@@ -71,7 +71,8 @@ class TermGroup_ extends Component {
       onResize: this.bind(this.props.onResize, null, uid),
       onTitle: this.bind(this.props.onTitle, null, uid),
       onData: this.bind(this.props.onData, null, uid),
-      onURLAbort: this.bind(this.props.onURLAbort, null, uid)
+      onURLAbort: this.bind(this.props.onURLAbort, null, uid),
+      borderColor: this.props.borderColor
     });
 
     // This will create a new ref_ function for every render,

lib/components/term.js

@@ -204,7 +204,7 @@ export default class Term extends Component {
   }
 
   getStylesheet(css) {
-    const blob = new Blob([`
+    const hyperCaret = `
       .hyper-caret {
         outline: none;
         display: inline-block;
@@ -213,12 +213,28 @@ export default class Term extends Component {
         font-family: ${this.props.fontFamily};
         font-size: ${this.props.fontSize}px;
       }
+    `;
+    const osSpecificCss = process.platform === 'win32' ?
+      `::-webkit-scrollbar {
+            width: 5px;
+          }
+          ::-webkit-scrollbar-thumb {
+            -webkit-border-radius: 10px;
+            border-radius: 10px;
+            background: ${this.props.borderColor};
+          }
+          ::-webkit-scrollbar-thumb:window-inactive {
+            background: ${this.props.borderColor};
+          }` : ''
+    ;
+    return URL.createObjectURL(new Blob([`
       .cursor-node[focus="false"] {
          border-width: 1px !important;
       }
+      ${hyperCaret}
+      ${osSpecificCss}
       ${css}
-    `], {type: 'text/css'});
-    return URL.createObjectURL(blob);
+    `], {type: 'text/css'}));
   }
 
   validateColor(color, alternative = 'rgb(255,255,255)') {
@@ -381,5 +397,4 @@ export default class Term extends Component {
       }
     };
   }
-
 }