Add completion scrollbar settings.

qutebrowser/completion/completionwidget.py

@@ -81,10 +81,28 @@ class CompletionView(QTreeView):
         QTreeView:item::hover {
             border: 0px;
         }
-    """
 
-    # FIXME style scrollbar
+        QTreeView QScrollBar {
-    # https://github.com/The-Compiler/qutebrowser/issues/117
+            width: 12px;
+            {{ color['completion.scrollbar.bg'] }};
+        }
+
+        QTreeView QScrollBar::handle{
+            /**
+            This is done this way to evade 'magic'
+            ref: http://git.io/vCMqZ
+            Will need to be changed when we utilize jinja better.
+            **/
+            background: {{ config.get('colors', 'completion.scrollbar.fg') }};
+            border: 2px solid
+                    {{ config.get('colors', 'completion.scrollbar.bg') }};
+        }
+
+        QTreeView QScrollBar::sub-line, QScrollBar::add-line {
+            border: none;
+            background:none;
+        }
+    """
 
     resize_completion = pyqtSignal()
 

qutebrowser/config/configdata.py

@@ -414,6 +414,14 @@ def data(readonly=False):
              "Whether to shrink the completion to be smaller than the "
              "configured size if there are no scrollbars."),
 
+            ('scrollbar.width',
+             SettingValue(typ.Int(minval=0), '12'),
+             "Width of the scrollbar in the completion window (in px)."),
+
+            ('scrollbar.padding',
+             SettingValue(typ.Int(minval=0), '2'),
+             "Padding of scrollbar handle in completion window (in px)."),
+
             readonly=readonly
         )),
 
@@ -872,6 +880,14 @@ def data(readonly=False):
              SettingValue(typ.QssColor(), '#ff4444'),
              "Foreground color of the matched text in the completion."),
 
+            ('completion.scrollbar.fg',
+             SettingValue(typ.QssColor(), '${completion.fg}'),
+             "Color of the scrollbar handle in completion view."),
+
+            ('completion.scrollbar.bg',
+             SettingValue(typ.QssColor(), '${completion.bg}'),
+             "Color of the scrollbar in completion view"),
+
             ('statusbar.fg',
              SettingValue(typ.QssColor(), 'white'),
              "Foreground color of the statusbar."),