Scroll Bars can now be hidden (#2713)

* Scroll Bars can now be hidden

* Fix lint problems

* fix lint errors

* Fix lint

* Fix lint

* Change scrollBar to showScrollBar

browser/main/index.js

@@ -4,6 +4,7 @@ import { store, history } from './store'
 import React, { Fragment } from 'react'
 import ReactDOM from 'react-dom'
 require('!!style!css!stylus?sourceMap!./global.styl')
+import config from 'browser/main/lib/ConfigManager'
 import { Route, Switch, Redirect } from 'react-router-dom'
 import { ConnectedRouter } from 'connected-react-router'
 import DevTools from './DevTools'
@@ -77,6 +78,16 @@ document.addEventListener('click', function(e) {
   if (infoPanel) infoPanel.style.display = 'none'
 })
 
+if (!config.get().ui.showScrollBar) {
+  document.styleSheets[54].insertRule('::-webkit-scrollbar {display: none}')
+  document.styleSheets[54].insertRule(
+    '::-webkit-scrollbar-corner {display: none}'
+  )
+  document.styleSheets[54].insertRule(
+    '::-webkit-scrollbar-thumb {display: none}'
+  )
+}
+
 const el = document.getElementById('content')
 
 function notify(...args) {

browser/main/lib/ConfigManager.js

@@ -49,6 +49,7 @@ export const DEFAULT_CONFIG = {
     theme: 'default',
     showCopyNotification: true,
     disableDirectWrite: false,
+    showScrollBar: true,
     defaultNote: 'ALWAYS_ASK', // 'ALWAYS_ASK', 'SNIPPET_NOTE', 'MARKDOWN_NOTE'
     showMenuBar: false
   },

browser/main/modals/PreferencesModal/UiTab.js

@@ -94,6 +94,7 @@ class UiTab extends React.Component {
         showTagsAlphabetically: this.refs.showTagsAlphabetically.checked,
         saveTagsAlphabetically: this.refs.saveTagsAlphabetically.checked,
         enableLiveNoteCounts: this.refs.enableLiveNoteCounts.checked,
+        showScrollBar: this.refs.showScrollBar.checked,
         showMenuBar: this.refs.showMenuBar.checked,
         disableDirectWrite:
           this.refs.uiD2w != null ? this.refs.uiD2w.checked : false
@@ -351,9 +352,21 @@ class UiTab extends React.Component {
               </label>
             </div>
           ) : null}
-
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input
+                onChange={e => this.handleUIChange(e)}
+                checked={this.state.config.ui.showScrollBar}
+                ref='showScrollBar'
+                type='checkbox'
+              />
+              &nbsp;
+              {i18n.__(
+                'Show the scroll bars in the editor and in the markdown preview (It will be applied after restarting)'
+              )}
+            </label>
+          </div>
           <div styleName='group-header2'>Tags</div>
-
           <div styleName='group-checkBoxSection'>
             <label>
               <input