From b988befea4e9012875dcd26b04b9b30380f393a1 Mon Sep 17 00:00:00 2001
From: Stefan Ivic <nightwalkerkg@gmail.com>
Date: Sat, 19 Nov 2016 18:51:01 +0100
Subject: [PATCH] [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 |  3 ++-
 lib/components/term.js       | 25 ++++++++++++++++++++-----
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/lib/components/term-group.js b/lib/components/term-group.js
index c1affeca..d5d6a97a 100644
--- a/lib/components/term-group.js
+++ b/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,
diff --git a/lib/components/term.js b/lib/components/term.js
index 43b7f3f2..fa0269e1 100644
--- a/lib/components/term.js
+++ b/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;
+         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 {
       }
     };
   }
-
 }