Add setting to force native scrollbars on webkit/blink

Closes #601.

assets/javascripts/app/app.coffee

@@ -185,6 +185,7 @@
     return
 
   hideLoading: ->
+    document.body.classList.add '_overlay-scrollbars' if $.overlayScrollbarsEnabled()
     document.body.classList.remove '_booting'
     document.body.classList.remove '_loading'
     return

assets/javascripts/lib/util.coffee

@@ -357,6 +357,15 @@ isIOS = null
 $.isIOS = ->
   isIOS ?= navigator.userAgent?.indexOf('iPhone') >= 0 || navigator.userAgent?.indexOf('iPad') >= 0
 
+$.overlayScrollbarsEnabled = ->
+  return false unless $.isMac()
+  div = document.createElement('div')
+  div.setAttribute('style', 'width: 100px; height: 100px; overflow: scroll; position: absolute')
+  document.body.appendChild(div)
+  result = div.offsetWidth is div.clientWidth
+  document.body.removeChild(div)
+  result
+
 HIGHLIGHT_DEFAULTS =
   className: 'highlight'
   delay: 1000

assets/javascripts/templates/pages/settings_tmpl.coffee

@@ -25,6 +25,9 @@ app.templates.settingsPage = (settings) -> """
       <label class="_settings-label">
         <input type="checkbox" form="settings" name="smoothScroll" value="1"#{if settings.smoothScroll then ' checked' else ''}>Use smooth scrolling
       </label>
+      <label class="_settings-label _setting-native-scrollbar">
+        <input type="checkbox" form="settings" name="layout" value="_native-scrollbars"#{if settings['_native-scrollbars'] then ' checked' else ''}>Use native scrollbars
+      </label>
       <label class="_settings-label">
         <input type="checkbox" form="settings" name="arrowScroll" value="1"#{if settings.arrowScroll then ' checked' else ''}>Use arrow keys to scroll the main content area
         <small>With this checked, use <code class="_label">alt</code> + <code class="_label">&uarr;</code><code class="_label">&darr;</code><code class="_label">&larr;</code><code class="_label">&rarr;</code> to navigate the sidebar.</small>

assets/javascripts/views/content/settings_page.coffee

@@ -1,5 +1,5 @@
 class app.views.SettingsPage extends app.View
-  LAYOUTS = ['_max-width', '_sidebar-hidden']
+  LAYOUTS = ['_max-width', '_sidebar-hidden', '_native-scrollbars']
   SIDEBAR_HIDDEN_LAYOUT = '_sidebar-hidden'
 
   @className: '_static'
@@ -33,6 +33,7 @@ class app.views.SettingsPage extends app.View
 
   toggleLayout: (layout, enable) ->
     document.body.classList[if enable then 'add' else 'remove'](layout) unless layout is SIDEBAR_HIDDEN_LAYOUT
+    document.body.classList[if $.overlayScrollbarsEnabled() then 'add' else 'remove']('_overlay-scrollbars')
     app.settings.setLayout(layout, enable)
     app.appCache?.updateInBackground()
     return

assets/stylesheets/components/_content.scss

@@ -8,12 +8,12 @@
   height: 100%;
   margin-left: $sidebarWidth;
   pointer-events: none;
-  -webkit-margin-end: -1px;
   @extend %border-box;
 
   @media #{$mediumScreen} { margin-left: $sidebarMediumWidth; }
 
   ._sidebar-hidden & { margin-left: 0; }
+  body:not(._native-scrollbars) & { -webkit-margin-end: -1px; }
 }
 
 ._content {
@@ -27,50 +27,19 @@
   -webkit-overflow-scrolling: touch;
   @extend %border-box;
 
-  -webkit-padding-start: .625rem;
-  -webkit-padding-end: .75rem;
-
-  @media (-moz-overlay-scrollbars) { padding-left: .625rem; }
-  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { margin-left: 0; }
-  @supports (-ms-overflow-style: none) { margin-left: 0; }
-
   ._sidebar-hidden &:before {
     content: '';
     display: block;
     margin-top: $headerHeight;
   }
 
-  &::-webkit-scrollbar { -webkit-appearance: none; }
+  ._overlay-scrollbars & { padding-left: .625rem; }
-  &::-webkit-scrollbar:vertical { width: 16px; }
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { margin-left: 0; }
-  &::-webkit-scrollbar:horizontal { height: 16px; }
+  @supports (-ms-overflow-style: none) { margin-left: 0; }
-  &::-webkit-scrollbar-button,
-  &::-webkit-scrollbar-corner { display: none; }
-  &::-webkit-scrollbar-track {
-    background: $contentBackground;
-    border: 1px solid $contentBackground;
-
-    &:hover {
-      background: $sidebarBackground;
-      border-color: $sidebarBorder;
-    }
-
-    &:vertical { border-width: 0 0 0 1px; }
-    &:vertical:corner-present { border-width: 0 0 1px 1px; border-radius: 0 0 0 2px; }
-    &:horizontal { border-width: 1px 1px 0 1px; border-radius: 2px 2px 0 0; }
-  }
 
-  &::-webkit-scrollbar-thumb {
+  body:not(._native-scrollbars) & {
-    min-height: 2rem;
+    -webkit-padding-start: .625rem;
-    background: $scrollbarColor;
+    -webkit-padding-end: .75rem;
-    background-clip: padding-box;
-    border: 5px solid rgba(black, 0);
-    border-radius: 10px;
-
-    &:hover,
-    &:active {
-      background-color: $scrollbarColorHover;
-      border-width: 4px;
-    }
   }
 }
 

assets/stylesheets/components/_settings.scss

@@ -71,6 +71,9 @@
   ._setting-max-width { display: none; }
 }
 
+._setting-native-scrollbar { display: none; }
+@supports (-webkit-margin-end: 1px) { ._setting-native-scrollbar { display: block; } }
+
 ._reset-link {
   color: $textColorRed;
 }

assets/stylesheets/components/_sidebar.scss

@@ -18,25 +18,20 @@
   @extend %border-box;
   @extend %user-select-none;
 
-  @media (-moz-overlay-scrollbars) {
+  ._overlay-scrollbars & {
     padding-top: 0;
     top: $headerHeight;
   }
 
-  &::-webkit-scrollbar { -webkit-appearance: none; width: 10px; }
+  body:not(._native-scrollbars) & {
-  &::-webkit-scrollbar-button { display: none; }
+    &::-webkit-scrollbar { width: 10px; }
-  &::-webkit-scrollbar-track { background: $contentBackground; }
+    &::-webkit-scrollbar-track {
-  &::-webkit-scrollbar-thumb {
+      background: $contentBackground;
-    min-height: 2rem;
+      border: 0;
-    background: $scrollbarColor;
+    }
-    background-clip: padding-box;
+    &::-webkit-scrollbar-thumb {
-    border: 3px solid $contentBackground;
+      border-width: 3px;
-    border-radius: 5px;
+      &:hover, &:active { border-width: 2px; }
-
-    &:hover,
-    &:active {
-      background-color: $scrollbarColorHover;
-      border-width: 2px;
     }
   }
 

assets/stylesheets/global/_base.scss

@@ -228,3 +228,48 @@ input[type="search"]::-webkit-search-decoration {
 ::-webkit-input-placeholder { color: $textColorLighter; }
 ::-moz-placeholder          { color: $textColorLighter; opacity: 1; }
 :-ms-input-placeholder      { color: $textColorLighter; }
+
+body:not(._native-scrollbars) {
+  *::-webkit-scrollbar { -webkit-appearance: none; }
+  *::-webkit-scrollbar:vertical { width: 16px; }
+  *::-webkit-scrollbar:horizontal { height: 16px; }
+
+  *::-webkit-scrollbar-button,
+  *::-webkit-scrollbar-corner { display: none; }
+
+  *::-webkit-scrollbar-track {
+    background: $contentBackground;
+    border: 1px solid $contentBackground;
+
+    &:hover {
+      background: $sidebarBackground;
+      border-color: $sidebarBorder;
+    }
+
+    &:vertical { border-width: 0 0 0 1px; }
+
+    &:vertical:corner-present {
+      border-width: 0 0 1px 1px;
+      border-radius: 0 0 0 2px;
+    }
+
+    &:horizontal {
+      border-width: 1px 1px 0 1px;
+      border-radius: 2px 2px 0 0;
+    }
+  }
+
+  *::-webkit-scrollbar-thumb {
+    min-height: 2rem;
+    background: $scrollbarColor;
+    background-clip: padding-box;
+    border: 5px solid rgba(black, 0);
+    border-radius: 10px;
+
+    &:hover,
+    &:active {
+      background-color: $scrollbarColorHover;
+      border-width: 4px;
+    }
+  }
+}