Custom color for skinny scrollbars. Fixes #97.

cxw42 · Dec 15, 2017 · 055e8e1 · 055e8e1
1 parent f595121
commit 055e8e1
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 10 deletions.
diff --git a/tabfern/assets/css/custom-scrollbars.css b/tabfern/assets/css/custom-scrollbars.css
@@ -29,12 +29,14 @@
   border: 0px none #ffffff;
   border-radius: 3px;
 }
+/*
 .skinny-scrollbar::-webkit-scrollbar-track:hover {
   background: #676767;
 }
 .skinny-scrollbar::-webkit-scrollbar-track:active {
   background: #333333;
 }
+*/
 .skinny-scrollbar::-webkit-scrollbar-corner {
   background: transparent;
 }

diff --git a/tabfern/src/common/common.js b/tabfern/src/common/common.js
@@ -73,6 +73,7 @@ const CFG_DEFAULTS = {
     [CFG_CONFIRM_DEL_OF_SAVED]: true,
     [CFG_CONFIRM_DEL_OF_UNSAVED]: false,
     [CFGS_THEME_NAME]: 'default-dark',
+    [CFGS_SCROLLBAR_COLOR]: '',     // none by default
 };
 
 //////////////////////////////////////////////////////////////////////////

diff --git a/tabfern/src/options_custom/manifest.js b/tabfern/src/options_custom/manifest.js
@@ -114,14 +114,14 @@
                 "group": i18n.get("Scrollbars"),
                 "name": CFG_HIDE_HORIZONTAL_SCROLLBARS,
                 "type": "checkbox",
-                "label": i18n.get('Hide horizontal scrollbar' + refresh_message),
+                "label": i18n.get('Hide horizontal scrollbar'),
             },
             {
                 "tab": i18n.get("Appearance"),
                 "group": i18n.get("Scrollbars"),
                 "name": CFG_SKINNY_SCROLLBARS,
                 "type": "checkbox",
-                "label": i18n.get('Skinny scrollbars' + refresh_message),
+                "label": i18n.get('Skinny scrollbars'),
             },
             {
                 "tab": i18n.get("Appearance"),
@@ -133,6 +133,12 @@
                     // placeholder - settings.js adds the actual control
                     // after this.
             },
+            {
+                "tab": i18n.get("Appearance"),
+                "group": i18n.get("Scrollbars"),
+                "type": "description",
+                "text": i18n.get("Refresh the TabFern window to apply changes to these options."),
+            },
             // Maybe add some theming options here?
             {
                 "tab": i18n.get("Appearance"),

diff --git a/tabfern/src/options_custom/settings.js b/tabfern/src/options_custom/settings.js
@@ -3,15 +3,35 @@ let settingsobj;
 
 function createPicker($$)
 {
-    let label = $$('#scrollbar-color-picker-label');
-    console.log(label);
-    $$(label).spectrum();
-    let newlabel =
-        $$('<span>').text(i18n.get('Skinny-scrollbar color: '))
-        .addClass('setting label');
-    $$(label).before(newlabel);
+    let picker = $$('#scrollbar-color-picker-label');
+
+    // Replace the manifest entry with the color picker
+    $$(picker).spectrum({
+        showInput: true,
+        allowEmpty:true,
+        showInitial: true,
+        color: getStringSetting(CFGS_SCROLLBAR_COLOR),
+    });
 
-    // TODO set up to save the color to CFGS_SCROLLBAR_COLOR on change.
+    // Add the text that would otherwise have gone in the manifest
+    let newlabel = $$('<span>').text(i18n.get(
+            'Skinny-scrollbar color ("X" for the default): '))
+        .addClass('setting label');
+    $$(picker).before(newlabel);
+
+    // Handle updates
+    $$(picker).on('change.spectrum', (e, newcolor)=>{
+        let colorstring;
+        if(!newcolor || !newcolor.toString) {
+            console.log('New color: default');
+            colorstring = CFG_DEFAULTS[CFGS_SCROLLBAR_COLOR];
+        } else {
+            console.log({'New color': newcolor.toString()});
+            colorstring = String(newcolor.toString());
+        }
+
+        setSetting(CFGS_SCROLLBAR_COLOR, colorstring);
+    });
 } //createPicker
 
 window.addEvent("domready", function () {

diff --git a/tabfern/src/view/tree.js b/tabfern/src/view/tree.js
@@ -2768,6 +2768,28 @@ function preLoadInit()
         document.querySelector('html').classList += ' skinny-scrollbar';
     }
 
+    //Custom skinny-scrollbar color
+    CSSC: if(getBoolSetting(CFG_SKINNY_SCROLLBARS) && document.styleSheets) {
+        let color = getStringSetting(CFGS_SCROLLBAR_COLOR);
+        color = Modules.tinycolor(color);
+        if(!color.isValid()) {
+            log.error({'Invalid custom color for skinny scrollbars':
+                                                color.getOriginalInput()});
+            break CSSC;
+        }
+
+        //log.info({'Custom scrollbar color': color.toString()});
+        let ss = document.styleSheets[document.styleSheets.length-1];
+        for(let state of ['', ':hover', ':active']) {
+            let newrule = 'html.skinny-scrollbar::-webkit-scrollbar-thumb' +
+                            `${state} { background: ${color.toRgbString()}; }`;
+            ss.insertRule(newrule);
+            // html.foo:: is more specific than the default .foo::, so the
+            // override works and we don't have to remove the existing rule.
+            // Note: color.toRgbString() for formatting consistency.
+        }
+    }
+
     let url = chrome.runtime.getURL(
                 `/assets/jstree-3.3.4/themes/${getThemeName()}/style.css`);
     let before = document.getElementById('last-stylesheet');
@@ -3150,6 +3172,7 @@ let dependencies = [
     'loglevel', 'hamburger', 'bypasser', 'multidex', 'justhtmlescape',
     'signals', 'local/fileops/export', 'local/fileops/import',
     'asynquence-contrib', 'asq-helpers', 'rmodal',
+    'tinycolor',
 
     // Modules for keyboard-shortcut handling.  Not really TabFern-specific,
     // but not yet disentangled fully.