Distinguish between vertical and horizontal scrollbars, add code for scrollcorner

[Speravir]

Feature request with suggested code

I locally enhanced custom_scrollbars.uc.js according to method 2 in the following way:

• In variable section I’ve split cs_background_image, cs_thumb_image, cs_thumb_hover_image, cs_buttons_image and cs_buttons_hover_image into vertical and horizontal versions.
• I added variables for scrollcorner:

  var cs_corner_background_color = "#CCCCCC"; /* default = #CCCCCC */
  var cs_corner_background_image = "linear-gradient(45deg,transparent 30%,rgba(255,255,240,0.5) 50%,transparent 70%),linear-gradient(-45deg,transparent 30%,rgba(255,255,240,0.5) 50%,transparent 70%)"; /* default = none */

  The background image code creates a cross. Maybe someone likes it more with only one diagonal line, then it should be

  var cs_corner_background_image = "linear-gradient(-45deg,transparent 30%,rgba(255,255,240,0.5) 50%,transparent 70%)"; /* default = none */

Of course, the CSS code has to be adapted, as well. Note, that I merged all -moz-appearance: none !important; into one.

Following all together starting from (in file version 1.0.2) line 42 until line 121 (there are no later changes) – the new code is about 30 lines longer:

// General scrollbar settings
var hide_scrollbars = false; /* default = false */
var hide_scrollbar_buttons = false; /* default = false */
var custom_scrollbar_width = true; /* default = false */
var custom_scrollbar_width_value = 17; /* 10-? // default = 17 (in px) */
var custom_scrollbar_opacity = false; /* default = false */
var custom_opacity_value = "1.0"; /* default = 1.0 */
var enable_floating_scrollbars = false; /* default = false // scrollbars on top of web content */

// Custom scrollbar appearance settings - "cs"
var enable_custom_scrollbars = true;
var cs_background_color = "#CCCCCC"; /* default = #CCCCCC */
var cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; /* default = none */
var cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; /* default = none */
var cs_corner_background_color = "#CCCCCC"; /* default = #CCCCCC */
var cs_corner_background_image = "linear-gradient(45deg,transparent 30%,rgba(255,255,240,0.5) 50%,transparent 70%),linear-gradient(-45deg,transparent 30%,rgba(255,255,240,0.5) 50%,transparent 70%)"; /* default = none */
var cs_thumb_color = "#33CCFF"; /* default = #33CCFF */
var cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; /* default = unset */
var cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; /* default = unset */
var cs_thumb_hover_color = "#66FFFF"; /* default = #66FFFF */
var cs_thumb_hover_image_vertical = cs_thumb_image_vertical; /* default = unset */
var cs_thumb_hover_image_horizontal = cs_thumb_image_horizontal; /* default = unset */
var cs_thumb_roundness = 0; /* default = 0 (in px) */
var cs_thumb_border = 1; /* default = 0 (in px) */
var cs_thumb_border_color = "#33CCFF"; /* default ##33CCFF */
var cs_buttons_color = "#000000"; /* default = #000000 */
var cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; /* default = unset */
var cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; /* default = unset */
var cs_buttons_hover_color = "#000066"; /* default = #000066 */
var cs_buttons_hover_image_vertical = cs_buttons_image_vertical; /* default = unset */
var cs_buttons_hover_image_horizontal = cs_buttons_image_horizontal; /* default = unset */
var cs_buttons_roundness = 0; /* default = 0 (in px) */

/* ******************************************************************************************** */
/* ******************************************************************************************** */
/* ******************************************************************************************** */

// Scrollbar code

Components.utils.import("resource://gre/modules/Services.jsm");
var ss =  Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);

var custom_scrollbars = {

    init: function() {

    var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
    @namespace html url("http://www.w3.org/1999/xhtml");\
    \
    scrollbar, scrollcorner, scrollbar thumb,\
    scrollbar thumb:hover, scrollbar thumb:active,\
    scrollbar scrollbarbutton, scrollbar scrollbarbutton:hover {\
        -moz-appearance: none !important;\
    }\
    scrollbar {\
        background-color: '+cs_background_color+' !important;\
    }\
    scrollbar[orient="vertical"] {\
        background-image: '+cs_background_image_vertical+' !important;\
    }\
    scrollbar[orient="horizontal"] {\
        background-image: '+cs_background_image_horizontal+' !important;\
    }\
    scrollcorner {\
        background-color: '+cs_corner_background_color+' !important;\
        background-image: '+cs_corner_background_image+' !important;\
    }\
    scrollbar thumb {\
        background-color: '+cs_thumb_color+' !important;\
        border-radius: '+cs_thumb_roundness+'px !important;\
        border: '+cs_thumb_border+'px solid '+cs_thumb_border_color+' !important;\
    }\
    scrollbar thumb[orient="vertical"] {\
        background-image: '+cs_thumb_image_vertical+' !important;\
    }\
    scrollbar thumb[orient="horizontal"] {\
        background-image: '+cs_thumb_image_horizontal+' !important;\
    }\
    scrollbar thumb:hover, scrollbar thumb:active {\
        background-color: '+cs_thumb_hover_color+' !important;\
    }\
    scrollbar thumb[orient="vertical"]:hover, scrollbar thumb[orient="vertical"]:active {\
        background-image: '+cs_thumb_hover_image_vertical+' !important;\
    }\
    scrollbar thumb[orient="horizontal"]:hover, scrollbar thumb[orient="horizontal"]:active {\
        background-image: '+cs_thumb_hover_image_horizontal+' !important;\
    }\
    scrollbar scrollbarbutton {\
        background-color: '+cs_buttons_color+' !important;\
        border-radius: '+cs_buttons_roundness+'px !important;\
    }\
    scrollbar[orient="vertical"] scrollbarbutton {\
        background-image: '+cs_buttons_image_vertical+' !important;\
    }\
    scrollbar[orient="horizontal"] scrollbarbutton {\
        background-image: '+cs_buttons_image_horizontal+' !important;\
    }\
    scrollbar scrollbarbutton:hover {\
        background-color: '+cs_buttons_hover_color+' !important;\
    }\
    scrollbar[orient="vertical"] scrollbarbutton:hover {\
        background-image: '+cs_buttons_hover_image_vertical+' !important;\
    }\
    scrollbar[orient="horizontal"] scrollbarbutton:hover {\
        background-image: '+cs_buttons_hover_image_horizontal+' !important;\
    }\
    \
    '), null, null);

    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

    }
};

[Aris-t2]

Thanks,

I will add your changes on next update.

[Aris-t2]

Now online in 1.0.3.

[Speravir]

Thanks, I will look at it.

[Speravir]

I do not know, how important you think it is to publish another update:

• Because my actual background colour for scrollbar and corner are yellowish tones I used very light yellow (ivory) for the linear gradients in the corner, but forgot to change it to let’s say white when publishing it above.
• You write the default scrollbar size is 17px. Not that I know it better, but at least in chrome://global/skin/scrollbars.css for scrollbarbutton and scrollcorner the value is 16px. Does the scrollbar not adapt to this value?
• When someone activates arrow tips wouldn’t it perhaps be useful to add an advice that the scrollbar width should be set to an even value? Or, if you know this, what happens in Firefox with odd broken number values for pixels.

[Aris-t2]

1. I don't mind uploading a new zip file or pushing new commits. Its not like this would require someones approval like on AMO ;-)

2. 16px are set inside CSS, but if you take a screenshot and zoom into it, you will see buttons and thumb are 15px wide having a 1px "space" left and right (Windows). I used 17px for wide scrollbars in NewScrollbars add-on back then and it "replaced" the default scrollbar without moving/jumping anything, if I remember correctly.

3. No need to worry about decimals. Pixel values get rounded automatically in Firefox and IE.

   10px = 10px
   10.1px = 10px
   ...
   10.5px = 11px
   ...
   10.9px = 11px
   11px = 11px

Chrome, Safari, Opera etc. just ignore everything after the dot . (e.g. 10.7px=10px).

[Speravir]

OK.