scrollbars.uc.js anpassen - geschafft und erledigt!

Mira_Belle

Das mit den var, const und let irritiert mich und ich verstehen tu ich es auch nicht!

Mein Englich ist da dann doch leider nicht besonders,

oder doch? Besonders schlecht!

Selbst die Übersetzung mittels Firefox Translations bring nur Gestammel zustande.

Zumindest habe ich kapiert, dass var Fehler verursachen kann,

also so grundsätzlich, nicht aber hier bei nur einem Script.

Aber ich vermute, dass let die bessere, bzw, richtigere Deklaration gewesen ist/wäre.

Punkt ist korrigiert.

Danke.

Sören Hentzschel

Zitat von Mira_Belle

Selbst die Übersetzung mittels Firefox Translations bring nur Gestammel zustande.

Ich habe es nicht mit Firefox Translations getestet, aber ich glaube, dass technische Themen nicht gerade als Stärke von Firefox Translations gelten. Das ist für einen Übersetzer generell schwieriger als im Alltag gesprochene Sprache und war im Training von Firefox Translations (Sprachmodelle werden tatsächlich trainiert, es handelt sich dabei ja um eine künstliche Intelligenz) bisher auch kein Fokus. Insofern wundert es mich nicht, wenn das nur noch mehr Verwirrung verursacht.

Eine vereinfachte Erklärung, ohne ins Detail zu gehen: Es gibt zwischen var auf der einen und let/const auf der anderen Seite Unterschiede, wo die Variablen gültig sind. Die Verwendung von var ist nicht per se falsch und konkret in deinem Script macht es auch keinen Unterschied im Verhalten, aber das Verhalten von var begünstigt quasi naturbedingt Fehler, wenn man nicht aufpasst.

Wieso gibt es das dann? Nunja, var war bereits Bestandteil der ersten Version von JavaScript im Jahr 1995, als Mozilla-Gründer Brendan Eich JavaScript erfunden hat - in nur zehn Tagen! Dementsprechend auch mit ein paar konzeptionellen Schwächen. Es war damals natürlich auch noch nicht einmal ansatzweise zu vermuten, welche Bedeutung JavaScript einmal haben wird und was daraus für Anwendungsfälle entstehen. Und wenn ein Webstandard erst einmal verbreitet ist, ist der Zug für Veränderungen abgefahren, das ist bei HTTP, HTML und CSS ja auch so. Fehler wie der berühmte referer-Rechtschreibfehler im HTTP-Header oder konzeptionelle Schwächen wie das var in JavaScript müssen für immer mitgeschleppt werden, wenn nicht das halbe Web kaputt gehen soll. JavaScript hält historisch bedingt deswegen auch heute noch so manche Kuriosität bereit, die es so niemals geben würde, würde die Sprache heute neu erdacht werden. Was die Deklaration von Variablen betriffft, gab es einfach lange Zeit nicht anderes, let und const wurden erst 20 Jahre später mit ECMAScript 6 als Alternative eingeführt.

Wenn man noch auf alte Browser Rücksicht nehmen muss, kann var nicht vollständig eliminiert werden. Der Internet Explorer 11 beispielsweise hat noch eine fehlerhafte Implementierung von let. Aber in Code, der nur von Firefox verstanden werden muss, kann man natürlich von allem Gebrauch machen, was Firefox unterstützt. Insofern kann man hier var komplett ignorieren und vollständig auf let und const setzen.

harff182

Huch

Was geht denn hier ab?

Wieder mal Weiterbildung a la Sören Hentzschel .

Danke dafür, auch wenn ichs zum Verstehen ersma bookmarken muß.

Mira_Belle:

(Wo) Gibts einen aktuellen Code?

Ich glaube nämlich (mal wieder), einen Weg ohne absolute Pfade gefunden zu haben und würde den mit Deinem Code gerne mal testen und dann beisteuern...

Mira_Belle

Zitat von harff182

Mira_Belle:
(Wo) Gibts einen aktuellen Code?
Ich glaube nämlich (mal wieder), einen Weg ohne absolute Pfade gefunden zu haben und würde den mit Deinem Code gerne mal testen und dann beisteuern...

Na dann lass sehen!

Hier das derzeitige JavaScript.

JavaScript

"use strict";
/* Firefox 57+ userChrome.js tweaks - SCROLLBARS ********************************************** */
/* Original by Aris (aris-addons@gmx.net)****************************************************** */
/* Github: https://github.com/aris-t2/customscrollbarsforfx *********************************** */
/* ******************************************************************************************** */
/* Customized by Mira************************************************************************** */
/* version 3 nach (ECMAScript 2015) *********************************************************** */
/* https://www.camp-firefox.de/forum/thema/135133-custom-scrollbars-uc-js-anpassen/ *********** */
/* ******************************************************************************************** */
/* Custom Scrollbars for Firefox ************************************************************** */
/* version 1.0.6 ****************************************************************************** */
/* ***********************************************************************************************
 README
 
 !!! Wichtig !!!

 Die Einstellungen müssen auf 'false' gesetzt werden, damit dies auf aktuellen Firefox-Builds (102+) funktioniert

 about:config >
 widget.windows.overlay-scrollbars.enabled > false (Windows)
 widget.gtk.overlay-scrollbars.enabled > false (Linux/MacOSX)

 [!] 'Methode 2' ist erforderlich, um Firefox für benutzerdefinierte JavaScript-Dateien vorzubereiten
 [!] Die Datei 'custom_scrollbars.uc.js' gehört in den Firefox-Profilordner 'chrome'!
 -> Profilordner finden: Adressleiste > about:profiles > Wurzelordner > Ordner öffnen
 -> Datei zum Ordner \chrome\ hinzufügen (ggf. einen Ordner mit Namen "chrome" erstellen)

 [!] DER STARTUP-CACHE MUSS NACH JEDER ÄNDERUNG GELÖSCHT WERDEN!
 -> Ordner 'startupCache' finden: Adressleiste > about:profiles > Lokales Verzeichnis > Ordner öffnen > startupCache
 -> Firefox schließen
 -> Inhalt des 'startupCache'-Ordners löschen

Alternativ mit einem JavaScipt!
 -> https://github.com/Endor8/userChrome.js/blob/master/Firefox%2087/RestartFirefoxButtonM.uc.js

 Aktivieren einer Einstellung > let ... auf 'true' setzen
 Deaktivieren einer Einstellung > let ... auf 'false' setzen
 Anpassungen vornehmen > Werte ändern
 - Farbe - Name: red, blue, transparent / Hexcode: #33CCFF, #FFF
 - Farbe - rgb(a): rgba(0,0,255,0.8) / hsl(a): hsla(240,100%,50%,0.8) // a = Sichtbarkeit (transparenz)
 - Zahlen: 1, 2, 3 ... 10, 11, 12 ...
 - Deckkraft (in Dezimalzahlen): 0.0 bis 1.0 z.B. 1.4 oder 1.75
 - Farbverläufe: linear-gradient(direction, color, color, color)
 - Beispiel für Farbverläufe: linear-gradient(to right, blue, #33CCFF, rgba(0,0,255,0.8))

 HINWEIS
 - Zu kleine Werte für die Scrollbar-Breite werden sich negativ auf einige Oberflaechenelemente auswirken!
 
*********************************************************************************************** */

// GENERAL SCROLLBAR SETTINGS
let custom_scrollbar_size_value = 16; // in px // default: custom_scrollbar_size_value = 17
// CUSTOM SCROLLBAR SETTINGS ("custom_scrollbar_" --> "cs_")
let cs_thumb_border = 1; // in px // default: cs_thumb_border = 0 // Rahmen des Sliders
let cs_thumb_roundness = 7; // in px // default: cs_thumb_roundness = 0 // Rundung des Sliders
let cs_thumb_minimal_size = 200; // in px
// CUSTOM SCROLLBAR COLORS/GRADIENTS
// - background
let cs_background_color = "#5b5b66"; // default: cs_background_color = "#DDDDDD"
let cs_background_image_vertical = "unset"; // default: cs_background_image_vertical = "unset"
let cs_background_image_horizontal = "unset"; // default: cs_background_image_horizontal = "unset"
// - corner
let cs_corner_background_color = "#bfbfbf"; // default: cs_corner_background_color = "#DDDDDD"
let cs_corner_background_image = "unset"; // default: cs_corner_background_image = "unset"
// - thumb/slider
let cs_thumb_color = "#bfbfbf"; // default: cs_thumb_color = "#33CCFF"
let cs_thumb_image_vertical = "unset"; // default: cs_thumb_image_vertical = "unset"
let cs_thumb_image_horizontal = "unset"; // default: cs_thumb_image_horizontal = "unset"
let cs_thumb_hover_color = "orange"; // default: cs_thumb_hover_color = "#66FFFF"
let cs_thumb_hover_image_vertical = "unset"; // default: cs_thumb_hover_image_vertical = "unset"
let cs_thumb_border_color = "#5b5b66"; // default: cs_thumb_border_color = "#33CCFF" "#5b5b66"
// - buttons

let cs_color_arrow = "#bfbfbf";
let cs_color_arrow_hover = "orange";
let cs_width = 16;
let cs_height = 16;

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

// Scrollbar code

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

let custom_scrollbars = {

  init: function() {

    let 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[orient="vertical"] scrollbarbutton[type="increment"], 
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"], 
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"], 
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {
        -moz-appearance: none !important;
        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;
        min-height: ${(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)}px !important;
      }
      scrollbar thumb[orient="horizontal"] {
      background-image: ${cs_thumb_image_horizontal} !important;
      min-width: ${(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)}px !important;
      }
      scrollbar thumb:hover, scrollbar thumb:active {
        background-color: ${cs_thumb_hover_color} !important;
      }
      scrollbar thumb[orient="vertical"]:hover, scrollbar thumb[orient="vertical"]:active,
      scrollbar thumb[orient="horizontal"]:hover, scrollbar thumb[orient="horizontal"]:active {
        background-image: ${cs_thumb_hover_image_vertical} !important;
      }
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"] {
        mask-image: url("file:///C:/Users/.../chrome/icons/Chevron-up,_12.svg") !important;
      }
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"] {
        mask-image: url("file:///C:/Users/.../chrome/icons/Chevron-down,_12.svg") !important;
      }
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"] {
        mask-image: url("file:///C:/Users/.../chrome/icons/Chevron-right,_12.svg") !important;
      }
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {
        mask-image: url("file:///C:/Users/.../chrome/icons/Chevron-left,_12.svg") !important;
      }
      scrollbarbutton[type="increment"],
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"],
      scrollbarbutton[type="increment"],
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {
        
        mask-repeat: no-repeat;
        mask-position: center;
        background-color: ${cs_color_arrow};
        width: ${cs_width}px !important;
        height: ${cs_height}px !important;
      }
      scrollbarbutton[type="increment"]:hover,
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"]:hover,
      scrollbarbutton[type="increment"]:hover,
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"]:hover {
        background-color: ${cs_color_arrow_hover} !important;
      }
      
      scrollbar[orient="vertical"] {
        background-image: ${cs_background_image_vertical} !important;
        width: ${custom_scrollbar_size_value}px !important;
      }
      scrollbar[orient="horizontal"] {
        background-image: ${cs_background_image_horizontal} !important;
        height: ${custom_scrollbar_size_value}px !important;
      }
      scrollcorner {
        background-color: ${cs_corner_background_color} !important;
        background-image: url("file:///C:/Users/.../chrome/icons/resizer.svg") !important;
        width: ${custom_scrollbar_size_value}px !important;
      }
    `), null, null);

    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

// enable settings as configured above
custom_scrollbars.init();

Alles anzeigen

Zitat von Sören Hentzschel

...

Es ist wohl so, wie ich es mir gedacht habe,

nur der historische Hintergrund war/ist mir unbekannt.

Danke für die Erklärung.

harff182

Zitat von Mira_Belle

Na dann lass sehen!

Tja, war wieder 'n Satz mit X , weil ich mit Deinem Neuen Code nicht zurechtkomme und isn bischen spät für mich heute/jetzt noch was zu testen...

Das ist mein Versuch mit Deinem aktuellen Code, wo es nicht funzt:

CSS

"use strict";
/* Firefox 57+ userChrome.js tweaks - SCROLLBARS ********************************************** */
/* Original by Aris (aris-addons@gmx.net)****************************************************** */
/* Github: https://github.com/aris-t2/customscrollbarsforfx *********************************** */
/* ******************************************************************************************** */
/* Customized by Mira************************************************************************** */
/* version 3 nach (ECMAScript 2015) *********************************************************** */
/* https://www.camp-firefox.de/forum/thema/135133-custom-scrollbars-uc-js-anpassen/ *********** */
/* ******************************************************************************************** */
/* Custom Scrollbars for Firefox ************************************************************** */
/* version 1.0.6 ****************************************************************************** */
/* ***********************************************************************************************
 README
 
 !!! Wichtig !!!

 Die Einstellungen müssen auf 'false' gesetzt werden, damit dies auf aktuellen Firefox-Builds (102+) funktioniert

 about:config >
 widget.windows.overlay-scrollbars.enabled > false (Windows)
 widget.gtk.overlay-scrollbars.enabled > false (Linux/MacOSX)

 [!] 'Methode 2' ist erforderlich, um Firefox für benutzerdefinierte JavaScript-Dateien vorzubereiten
 [!] Die Datei 'custom_scrollbars.uc.js' gehört in den Firefox-Profilordner 'chrome'!
 -> Profilordner finden: Adressleiste > about:profiles > Wurzelordner > Ordner öffnen
 -> Datei zum Ordner \chrome\ hinzufügen (ggf. einen Ordner mit Namen "chrome" erstellen)

 [!] DER STARTUP-CACHE MUSS NACH JEDER ÄNDERUNG GELÖSCHT WERDEN!
 -> Ordner 'startupCache' finden: Adressleiste > about:profiles > Lokales Verzeichnis > Ordner öffnen > startupCache
 -> Firefox schließen
 -> Inhalt des 'startupCache'-Ordners löschen

Alternativ mit einem JavaScipt!
 -> https://github.com/Endor8/userChrome.js/blob/master/Firefox%2087/RestartFirefoxButtonM.uc.js

 Aktivieren einer Einstellung > let ... auf 'true' setzen
 Deaktivieren einer Einstellung > let ... auf 'false' setzen
 Anpassungen vornehmen > Werte ändern
 - Farbe - Name: red, blue, transparent / Hexcode: #33CCFF, #FFF
 - Farbe - rgb(a): rgba(0,0,255,0.8) / hsl(a): hsla(240,100%,50%,0.8) // a = Sichtbarkeit (transparenz)
 - Zahlen: 1, 2, 3 ... 10, 11, 12 ...
 - Deckkraft (in Dezimalzahlen): 0.0 bis 1.0 z.B. 1.4 oder 1.75
 - Farbverläufe: linear-gradient(direction, color, color, color)
 - Beispiel für Farbverläufe: linear-gradient(to right, blue, #33CCFF, rgba(0,0,255,0.8))

 HINWEIS
 - Zu kleine Werte für die Scrollbar-Breite werden sich negativ auf einige Oberflaechenelemente auswirken!
 
*********************************************************************************************** */
// "berechneten" Path ermöglichen
let scrollerProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");


// GENERAL SCROLLBAR SETTINGS
let custom_scrollbar_size_value = 16; // in px // default: custom_scrollbar_size_value = 17
// CUSTOM SCROLLBAR SETTINGS ("custom_scrollbar_" --> "cs_")
let cs_thumb_border = 1; // in px // default: cs_thumb_border = 0 // Rahmen des Sliders
let cs_thumb_roundness = 7; // in px // default: cs_thumb_roundness = 0 // Rundung des Sliders
let cs_thumb_minimal_size = 200; // in px
// CUSTOM SCROLLBAR COLORS/GRADIENTS
// - background
let cs_background_color = "#5b5b66"; // default: cs_background_color = "#DDDDDD"
let cs_background_image_vertical = "unset"; // default: cs_background_image_vertical = "unset"
let cs_background_image_horizontal = "unset"; // default: cs_background_image_horizontal = "unset"
// - corner
let cs_corner_background_color = "beige"; // default: cs_corner_background_color = "#DDDDDD"
let cs_corner_background_image = "unset"; // default: cs_corner_background_image = "unset"
// - thumb/slider
let cs_thumb_color = "#bfbfbf"; // default: cs_thumb_color = "#33CCFF"
let cs_thumb_image_vertical = "unset"; // default: cs_thumb_image_vertical = "unset"
let cs_thumb_image_horizontal = "unset"; // default: cs_thumb_image_horizontal = "unset"
let cs_thumb_hover_color = "orange"; // default: cs_thumb_hover_color = "#66FFFF"
let cs_thumb_hover_image_vertical = "unset"; // default: cs_thumb_hover_image_vertical = "unset"
let cs_thumb_border_color = "#5b5b66"; // default: cs_thumb_border_color = "#33CCFF" "#5b5b66"
// - buttons

let cs_color_arrow = "white";
let cs_color_arrow_hover = "orange";
let cs_width = 16;
let cs_height = 16;

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

// Scrollbar code

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

let custom_scrollbars = {

  init: function() {

    let 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[orient="vertical"] scrollbarbutton[type="increment"], 
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"], 
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"], 
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {
        -moz-appearance: none !important;
        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;
        min-height: ${(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)}px !important;
      }
      scrollbar thumb[orient="horizontal"] {
      background-image: ${cs_thumb_image_horizontal} !important;
      min-width: ${(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)}px !important;
      }
      scrollbar thumb:hover, scrollbar thumb:active {
        background-color: ${cs_thumb_hover_color} !important;
      }
      scrollbar thumb[orient="vertical"]:hover, scrollbar thumb[orient="vertical"]:active,
      scrollbar thumb[orient="horizontal"]:hover, scrollbar thumb[orient="horizontal"]:active {
        background-image: ${cs_thumb_hover_image_vertical} !important;
      }
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"] {
        mask-image: url("file:///C:/Users/.../chrome/icons/Chevron-up,_12.svg") !important;
      }
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"] {
        mask-image: url("file:///C:/Users/.../chrome/icons/Chevron-down,_12.svg") !important;
      }
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"] {
        mask-image: url("file:///C:/Users/.../chrome/icons/Chevron-right,_12.svg") !important;
      }
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {
        mask-image: url("file:" + ${scrollerProfileDirectory} + "/chrome/icons/Chevron-left,_12.svg") !important;
      }
      scrollbarbutton[type="increment"],
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"],
      scrollbarbutton[type="increment"],
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {
        
        mask-repeat: no-repeat;
        mask-position: center;
        background-color: ${cs_color_arrow};
        width: ${cs_width}px !important;
        height: ${cs_height}px !important;
      }
      scrollbarbutton[type="increment"]:hover,
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"]:hover,
      scrollbarbutton[type="increment"]:hover,
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"]:hover {
        background-color: ${cs_color_arrow_hover} !important;
      }
      
      scrollbar[orient="vertical"] {
        background-image: ${cs_background_image_vertical} !important;
        width: ${custom_scrollbar_size_value}px !important;
      }
      scrollbar[orient="horizontal"] {
        background-image: ${cs_background_image_horizontal} !important;
        height: ${custom_scrollbar_size_value}px !important;
      }
      scrollcorner {
        background-color: ${cs_corner_background_color} !important;
        background-image: url("file:" + ${scrollerProfileDirectory} + "/chrome/icons/resizer.svg") !important;
        width: ${custom_scrollbar_size_value}px !important;
      }
    `), null, null);

    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

// enable settings as configured above
custom_scrollbars.init();

Alles anzeigen

Mit Deinem älteren Code klappt es:

CSS

"use strict";
/* Firefox 57+ userChrome.js tweaks - SCROLLBARS ********************************************** */
/* by Aris (aris-addons@gmx.net)*************************************************************** */
/* Github: https://github.com/aris-t2/customscrollbarsforfx *********************************** */
/* ******************************************************************************************** */
/* ******************************************************************************************** */
/* Custom Scrollbars for Firefox ************************************************************** */
/* version 1.0.6 ****************************************************************************** */
/* ******************************************************************************************** */
/* ***********************************************************************************************
 README
 
 !!! Important !!!
 
 Preferences have to be set to false, for this to work on recent Firefox builds (102+)
 
 about:config >
 widget.windows.overlay-scrollbars.enabled > false (Windows)
 widget.gtk.overlay-scrollbars.enabled > false (Linux/MacOSX)
  
 [!] 'Method 2' is required to prepare Firefox for custom JavaScript files
 [!] 'custom_scrollbars.uc.js' file belongs into Firefox profiles 'chrome' folder!
 -> finding profile folder: address bar > about:profiles > Root Directory > Open Folder
 -> add file to \chrome\ folder (create one, if needed)
 [!] STARTUP CACHE HAS TO BE DEconstED AFTER EVERY CHANGE!
 -> finding 'startupCache' folder: address bar > about:profiles > Local Directory > Open Folder > startupCache
 -> close Firefox
 -> deconste 'startupCache' folders content
 ENABLING options > set const to true
 DISABLING options > set const to false
 Modifying appearance > change values
 - color - name: red, fuchsia, transparent / hex code: #33CCFF, #FFF
 - color - rgb(a): rgba(0,0,255,0.8) / hsl(a): hsla(240,100%,50%,0.8)
 - numbers: 1, 2, 3 ... 10, 11, 12 ...
 - opacity: 0.0 to 1.0 e.g. 1.4, 1,75
 - gradients: linear-gradient(direction, color, color, color)
 - gradients example: linear-gradient(to right, fuchsia, #33CCFF, rgba(0,0,255,0.8))
 - predefined gradients: transparent,rgba(255,255,255,0.5),transparent -> transparent,rgba(255,255,255,0.0),transparent
 - button size with arrow (descriptions for vertical scrollbars - analogous for horizontal scrollbars)
 -- 1: space above arrow = arrow height
 -- 1.5: space above arrow = 0.5 * arrow height
 -- 2: no space above arrow
 
 NOTE
 - This is a tiny collection of scrollbar tweaks, not a port of 'NewScrollbars' add-on!
 - Small scrollbar width values will corrupt some parts of the ui!
 
*********************************************************************************************** */
// "berechneten" Path ermöglichen
const scrollerProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");

// GENERAL SCROLLBAR SETTINGS
const hide_scrollbars = false; // default: hide_scrollbars = false
const hide_scrollbar_buttons = false; // default: hide_scrollbar_buttons = false
const custom_scrollbar_size = true; // default: custom_scrollbar_size = false
const custom_scrollbar_size_value = 22; // in px // default: custom_scrollbar_size_value = 17
const custom_scrollbar_opacity = false; // default: custom_scrollbar_opacity = false

// floating scrollbars
const enable_scrollbars_on_top_of_webcontent = false; // default: enable_scrollbars_on_top_of_webcontent = false // uses 'custom_scrollbar_size_value' inside its code

// custom scrollbars
const enable_custom_scrollbars = true; // default: enable_custom_scrollbars = true

// CUSTOM SCROLLBAR SETTINGS ("custom_scrollbar_" --> "cs_")
const cs_thumb_border = 3; // in px // default: cs_thumb_border = 0
const cs_thumb_roundness = 80; // in px // default: cs_thumb_roundness = 0
const cs_buttons_roundness = 0; // in px // default: cs_buttons_roundness = 0
const cs_buttons_as_arrows = false; // default: cs_buttons_as_arrows = false // uses 'custom_scrollbar_size_value' inside its code
const cs_arrows_on_buttons = true; // default: cs_arrows_on_buttons = true // uses 'custom_scrollbar_size_value' inside its code

// button size with arrow - 1: space above arrow = arrow height // 1.5: space above arrow = 0.5 * arrow height // 2: no space above arrow
const cs_arrows_on_buttons_buttons_size = 1.5; // default: cs_arrows_on_buttons_buttons_size = 1.5

// 'flat' scrollbars
// const cs_ignore_color_gradients = false; // default: cs_ignore_color_gradients = false
const cs_thumb_minimal_size = 12; // in px

// CUSTOM SCROLLBAR COLORS/GRADIENTS
// - background
const cs_background_color = "yellow"; // default: cs_background_color = "#DDDDDD"
const cs_background_image_vertical = "unset"; // default: cs_background_image_vertical = "unset"
const cs_background_image_horizontal = "unset"; // default: cs_background_image_horizontal = "unset"

// - corner
const cs_corner_background_color = "beige"; // default: cs_corner_background_color = "#DDDDDD"
//const cs_corner_background_image = "unset"; // default: cs_corner_background_image = "unset"

// - thumb/slider
const cs_thumb_color = "cornflowerblue"; // default: cs_thumb_color = "#33CCFF"            //von mir ?
const cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_thumb_image_vertical = "unset"
const cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_thumb_image_horizontal = "unset"
const cs_thumb_hover_color = "coral"; // default: cs_thumb_hover_color = "#66FFFF"        //von mir ?
const cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_thumb_hover_image_vertical = "unset"
const cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_thumb_hover_image_horizontal = "unset"
const cs_thumb_border_color = "black"; // default: cs_thumb_border_color = "#33CCFF"        //von mir ?

// - buttons
const cs_buttons_color = "yellow"; // default: cs_buttons_color = "#66FFFF"                //von mir ?
//const cs_buttons_image_vertical = "unset"; // default: cs_buttons_image_vertical = "unset"
//const cs_buttons_image_horizontal = "unset"; // default: cs_buttons_image_horizontal = "unset"
const cs_buttons_hover_color = "gainsboro"; // default: cs_buttons_hover_color = "#33CCFF"    //von mir ?
//const cs_buttons_hover_image_vertical = "unset"; // default: cs_buttons_hover_image_vertical = "unset"
//const cs_buttons_hover_image_horizontal = "unset"; // default: cs_buttons_hover_image_horizontal = "unset"

// unset background image color gradients -> flat scrollbars
// if(cs_ignore_color_gradients==true)
//   cs_background_image_vertical
//     =cs_background_image_horizontal
//     =cs_corner_background_image=cs_thumb_image_vertical
//     =cs_thumb_image_horizontal
//     =cs_thumb_hover_image_vertical
//     =cs_thumb_hover_image_horizontal
//     =cs_buttons_image_vertical
//     =cs_buttons_image_horizontal
//     =cs_buttons_hover_image_vertical
//     =cs_buttons_hover_image_horizontal
//     ="unset";

/* ******************************************************************************************** */
/* scrollcornerimage von harff **************************************************************** */
/* ******************************************************************************************** */
// Scrollbar code
Components.utils.import("resource://gre/modules/Services.jsm");
const ss =  Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);
const custom_scrollbars = {
  init: function() {

    
    const 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 scrollbarbutton[type="increment"], scrollbar scrollbarbutton[type="decrement"] {\
        -moz-appearance: none !important;\
        appearance: none !important;\
      }\
      scrollbar {\
        background-color: '+cs_background_color+' !important;\
      }\
      scrollbar[orient="vertical"] {\
        background-image: '+cs_background_image_vertical+' !important;\
        width: '+custom_scrollbar_size_value+'px !important;\
      }\
      scrollbar[orient="horizontal"] {\
        background-image: '+cs_background_image_horizontal+' !important;\
        height: '+custom_scrollbar_size_value+'px !important;\
      }\
      scrollcorner {\
        background-color: '+cs_corner_background_color+' !important;\
        background-image: url("' + ("file:" + scrollerProfileDirectory + "/chrome/icons/fux2.svg") + '"); !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;\
        min-height: '+(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)+'px !important;\
      }\
      scrollbar thumb[orient="horizontal"] {\
      background-image: '+cs_thumb_image_horizontal+' !important;\
      min-width: '+(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)+'px !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[orient="vertical"] scrollbarbutton[type="increment"] {\
        mask-image: url("' + ("file:" + scrollerProfileDirectory + "/chrome/icons/Chevron-down,_12.svg") + '"); !important;\
        mask-repeat: no-repeat;\
        mask-position: center;\
        display: block !important;\
        background-color: black !important;\
        content: url("' + ("file:" + scrollerProfileDirectory + "/chrome/icons/Chevron-down,_12.svg") + '"); !important;\
        width: 16px !important;\
        height: 16px !important;\
      }\
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"] {\
        mask-image: url("' + ("file:" + scrollerProfileDirectory + "/chrome/icons/Chevron-up,_12.svg") + '"); !important;\
        mask-repeat: no-repeat;\
        mask-position: center;\
        display: block !important;\
        background-color: fuchsia !important;\
        content: url("' + ("file:" + scrollerProfileDirectory + "/chrome/icons/Chevron-up,_12.svg") + '"); !important;\
        width: 16px !important;\
        height: 16px !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"] {\
        mask-image: url("' + ("file:" + scrollerProfileDirectory + "/chrome/icons/Chevron-right,_12.svg") + '"); !important;\
        mask-repeat: no-repeat;\
        mask-position: center;\
        display: block !important;\
        background-color: black !important;\
        content: url("' + ("file:" + scrollerProfileDirectory + "/chrome/icons/Chevron-right,_12.svg") + '"); !important;\
        width: 16px !important;\
        height: 16px !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {\
        mask-image: url("' + ("file:" + scrollerProfileDirectory + "/chrome/icons/Chevron-left,_12.svg") + '"); !important;\
        mask-repeat: no-repeat;\
        mask-position: center;\
        display: block !important;\
        background-color: fuchsia !important;\
        content: url("' + ("file:" + scrollerProfileDirectory + "/chrome/icons/Chevron-left,_12.svg") + '"); !important;\
        width: 16px !important;\
        height: 16px !important;\
      }\
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"]:hover {\
        background-color: lime !important;\
      }\
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"]:hover {\
        background-color: lime !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"]:hover {\
        background-color: lime !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"]:hover {\
        background-color: lime !important;\
      }\
    '), null, null);
    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);
  }
};
const cs_scrollbars_scrollbar_button_arrows = {
  init: function() {
    const uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      \
      @namespace html url("http://www.w3.org/1999/xhtml");\
      \
      scrollbar scrollbarbutton, \
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"],\
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"],\
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"],\
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"],\
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"]:hover,\
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"]:hover,\
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"]:hover,\
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"]:hover {\
        background-color: unset !important;\
        background-image: unset !important;\
        border-radius: 0px !important;\
      }\
      scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {\
        height: 16px !important;\
        width: 16px !important;\
      }\
        scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]{\
        height: 16px !important;\
        width: 16px !important;\
      }\
      scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {\
        height: 16px !important;\
        width: 16px !important;\
      }\
      scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {\
        height: 16px !important;\
        width: 16px !important;\
      }\
      \
    '), null, null);
    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);
  }
};
const cs_scrollbars_arrows_on_buttons = {
  init: function() {
    const uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      \
      @namespace html url("http://www.w3.org/1999/xhtml");\
      \
      scrollbar scrollbarbutton, \
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"],\
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"],\
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"],\
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"],\
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"]:hover,\
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"]:hover,\
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"]:hover,\
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"]:hover {\
        border-radius: 0px !important;\
      }\
      \
      scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {\
        height: 16px !important;\
        width: 16px !important;\
      }\
      scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {\
        height: 16px !important;\
        width: 16px !important;\
      }\
      scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {\
        height: 16px !important;\
        width: 16px !important;\
      }\
      scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {\
        height: 16px !important;\
        width: 16px !important;\
      }\
    '), null, null);
    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);
  }
};
const scrollbar_buttons = {
  init: function() {
    const uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      \
      @namespace html url("http://www.w3.org/1999/xhtml");\
      \
      scrollbar scrollbarbutton {\
        opacity: 0 !important;\
      }\
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"] {\
        min-height: 1px !important;\
        height: 1px !important;\
        max-height: 1px !important;\
      }\
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"] {\
        min-height: 1px !important;\
        height: 1px !important;\
        max-height: 1px !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"] {\
        min-width: 1px !important;\
        width: 1px !important;\
        max-width: 1px !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {\
        min-width: 1px !important;\
        width: 1px !important;\
        max-width: 1px !important;\
      }\
      \
    '), null, null);
    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);
  }
};
const scrollbar_size = {
  init: function() {
    const uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      \
      @namespace html url("http://www.w3.org/1999/xhtml");\
      \
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"] {\
        min-width: 0 !important;\
        width: 16px !important;\
      }\
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"] {\
        min-width: 0 !important;\
        width: 16px !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"] {\
        min-height: 0 !important;\
        height: 16px !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {\
        min-height: 0 !important;\
        height: 16px !important;\
      }\
      \
    '), null, null);
    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);
  }
};
const floating_scrollbars = {
  init: function() {
    const uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      \
      @namespace html url("http://www.w3.org/1999/xhtml");\
      \
      scrollbar {\
        position: relative !important;\
        z-index: 1000000000 !important;\
      }\
      scrollbar[orient="vertical"],\
      scrollbar[orient="horizontal"],\
      scrollbar, scrollcorner {\
        background-color: transparent !important; \
        background-image: unset !important; \
      }\
      scrollbar[orient="vertical"] {\
        margin-inline-start: -0px !important;\
        width: 16px !important;\
      }\
      scrollbar[orient="horizontal"] {\
        margin-top: -0px !important;\
        height: 16px !important;\
      }\
      \
    '), null, null);
    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);
  }
};
const scrollbar_opacity = {
  init: function() {
    const uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      \
      @namespace html url("http://www.w3.org/1999/xhtml");\
      \
      scrollbar {\
        opacity: 0.5 !important;\
      }\
      \
    '), null, null);
    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);
  }
};
const remove_scrollbars = {
  init: function() {
    const uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      \
      @namespace html url("http://www.w3.org/1999/xhtml");\
      \
      scrollbar, scrollcorner {\
        display: none !important;\
        visibility: collapse !important;\
      }\
      \
    '), null, null);
    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);
  }
};
// enable settings as configured above
if(enable_custom_scrollbars==true) custom_scrollbars.init();
if(cs_buttons_as_arrows==true && hide_scrollbars==false) cs_scrollbars_scrollbar_button_arrows.init();
if(cs_arrows_on_buttons==true && cs_buttons_as_arrows==false && hide_scrollbars==false) cs_scrollbars_arrows_on_buttons.init();
if(hide_scrollbar_buttons==true) scrollbar_buttons.init();
if(custom_scrollbar_size==true) scrollbar_size.init();
if(enable_scrollbars_on_top_of_webcontent==true) floating_scrollbars.init();
if(custom_scrollbar_opacity==true) scrollbar_opacity.init();
if(hide_scrollbars==true) remove_scrollbars.init();

Alles anzeigen

Schade... aber jezz bin ich und muß

bis mogghän...

Mira_Belle

Wow, echt klasse

Es geht doch.

Habe const scrollerProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");

hinzugefügt!

Denn ich muss ja die Variable definieren.

Und dann einfach

CSS

scrollbar[orient="vertical"] scrollbarbutton[type="decrement"] {
        mask-image: url("file:${scrollerProfileDirectory}/chrome/icons/Chevron-up,_12.svg") !important;
      }
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"] {
        mask-image: url("file:${scrollerProfileDirectory}/chrome/icons/Chevron-down,_12.svg") !important;
      }
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"] {
        mask-image: url("file:${scrollerProfileDirectory}/chrome/icons/Chevron-right,_12.svg") !important;
      }
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {
        mask-image: url("file:${scrollerProfileDirectory}/chrome/icons/Chevron-left,_12.svg") !important;
      }

Alles anzeigen

Siehst Du den Fehler? Blöde Frage, bist ja nicht blind.

CSS

        mask-image: url("file:" + ${scrollerProfileDirectory} + "/chrome/icons/Chevron-left,_12.svg") !important;

Echt klasse! Danke dafür.

Speravir

Zitat von Mira_Belle

Verstehe ich das richtig?

Hätte ich das usercssloader.uc.js Monster gehabt,

hätte ich ein ganz normales CSS schreiben können?

Genau das war die Intention hinter meiner Frage …

Zitat von Endor

Aber Deine Version die Du gemacht hast ist definitiv die bessere
Variante, da sie unabhängig von anderen Scripten funktioniert.

Allerdings muss man dann erneut viel Arbeit hineinstecken, wenn eine neue Version des Orignalskripts erscheinen sollte. Das würde man mit dem UserCSSLoader umgehen.

Wobei ein Diff-Programm schon sehr hilfreich ist, den Aufwand in Grenzen zu halten. Wie ich eben an anderer Stelle bemerkt habe, hat Mira Belle anscheinend bei mir über die Schulter gesehen ( ) und setzt wie ich Winmerge ein.

Zitat von Sören Hentzschel

Die Funktionsweise sogenannter Template Literals ist wie folgt:

~~Ich will mich ja nicht selber loben~~, Eigenlob stinkt, aber trotzdem: Am 12. August 2022 hatte ich auch schon mal darauf hingewiesen, nur nicht so hllfreich wie Du.

Mira_Belle

Zitat von Speravir

Zitat von Endor

Aber Deine Version die Du gemacht hast ist definitiv die bessere
Variante, da sie unabhängig von anderen Scripten funktioniert.

Allerdings muss man dann erneut viel Arbeit hineinstecken, wenn eine neue Version des Orignalskripts erscheinen sollte. Das würde man mit dem UserCSSLoader umgehen.

Meinst Du?

Das user_scrollbar.uc.js, so habe ich es nun genannt, wegen der doch nicht wenigen Veränderungen,

ist doch recht einfach gestrickt, denke ich jetzt wo ich so einigermaßen verstehe wie es funktioniert.

Zitat von Speravir

Wobei ein Diff-Programm schon sehr hilfreich ist, den Aufwand in Grenzen zu halten. Wie ich eben an anderer Stelle bemerkt habe, hat Mira Belle anscheinend bei mir über die Schulter gesehen ( ) und setzt wie ich Winmerge ein.

Uhh, Winmerge kannte ich schon, .... 2015 oder so, da nutzte ich noch Win 98 SE, oder vielleicht doch schon Win XP

Oder doch noch 'ne Schreibmaschine?

Auf jeden Fall schon ewig, es ist halt einfach ein klasse Tool, z.B. auch um Verzeichnisse abzugleichen.

harff182

Zitat von Mira_Belle

Siehst Du den Fehler? Blöde Frage, bist ja nicht blind.

Zitat von Mira_Belle

Echt klasse! Danke dafür.

Das "Verfahren" hab ich vor 3 Jahren bei jemandem im TB-Forum abgeguckt und nutze es seitdem.

Durch diesen Thread hier hab ich gut dazugelernt.

War mal wieder ne nette "Lehrstunde" hier im Thread.

Ich werde nach und nach meine Scripte mal checken, wo ich jetzt was verbessern kann.

Schönes/trockenes/unwetterfreies Wochenende für alle Beteiligten...

omar1979

Hallo allen..

ich wollte grad das Javascript von Mira_Belle im Beitrag:

#67

testen. Hat jemand evtl. die Icons: Chevron-up,_12.svg, Chevron-down,_12.svg, Chevron-right,_12.svg und Chevron-left,_12.svg in der Hand❓ Würde mich sehr freuen, wenn jemand sie hier zum Download bereitstellen könnte. Besten Dank im Voraus.

2002Andreas

Zitat von omar1979

hier zum Download bereitstellen könnte.

Sind im Beitrag Nr. 1

Beitrag

scrollbars.uc.js anpassen - geschafft und erledigt!

Wie schon hier angesprochen, möchte ich, dass

Chevron-up für Hoch

Chevron-down für Runter

&

Chevron-left für Links

Chevron-right für Rechts

anstatt der "Dreiecke" erscheint.

Egal was ich bisher versucht habe, es geht in die Hose.

Ich schaffe es einfach nicht den eingebetteten CSS-Code so abzuändern, dass gewünschtes Resultat erfolgt.

Das Script schaut so aus.

(Quelltext, 489 Zeilen)

Ich erbitte inständig Hilfe.

Mira_Belle

13. August 2022 um 15:13

omar1979

Zitat von 2002Andreas

Sind im Beitrag Nr. 1

Dankeschön. Hab das garnicht bemerkt.

Mira_Belle

Es gibt was Neues!

Habe die Variable

let scrollerProfileDirectory = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));

geändert und auch gleich in den entsprechenden Ordner "verlinkt".

Somit müssen auch Anpassungen am CSS-Code vorgenommen werden.

Z.B. aus background-image: url("file:${scrollerProfileDirectory}/chrome/icons/resizer.svg") !important;

wird background-image: url("${scrollerProfileDirectory}/resizer.svg") !important;

JavaScript

"use strict";
/* Firefox 57+ userChrome.js tweaks - SCROLLBARS ***************************************************************************** */
/* Original by Aris (aris-addons@gmx.net)************************************************************************************* */
/* Github: https://github.com/aris-t2/customscrollbarsforfx ****************************************************************** */
/* *************************************************************************************************************************** */
/* Customized by Mira********************************************************************************************************* */
/* version 2 nach (ECMAScript 2015) ****************************************************************************************** */
/* https://www.camp-firefox.de/forum/thema/135133-custom-scrollbars-uc-js-anpassen/ ****************************************** */
/* https://www.camp-firefox.de/forum/thema/135133-scrollbars-uc-js-anpassen-geschafft-und-erledigt/?postID=1216934#post1216934 */
/* *************************************************************************************************************************** */
/* Custom Scrollbars for Firefox ********************************************************************************************* */
/* version 1.0.7 ************************************************************************************************************* */
/* ******************************************************************************************************************************
 README
 
 !!! Wichtig !!!

 Die Einstellungen müssen auf 'false' gesetzt werden, damit dies auf aktuellen Firefox-Builds (102+) funktioniert

 about:config >
 widget.windows.overlay-scrollbars.enabled > false (Windows)
 widget.gtk.overlay-scrollbars.enabled > false (Linux/MacOSX)

 [!] 'Methode 2' ist erforderlich, um Firefox für benutzerdefinierte JavaScript-Dateien vorzubereiten
 [!] Die Datei 'custom_scrollbars.uc.js' gehört in den Firefox-Profilordner 'chrome'!
 -> Profilordner finden: Adressleiste > about:profiles > Wurzelordner > Ordner öffnen
 -> Datei zum Ordner \chrome\ hinzufügen (ggf. einen Ordner mit Namen "chrome" erstellen)

 [!] DER STARTUP-CACHE MUSS NACH JEDER ÄNDERUNG GELÖSCHT WERDEN!
 -> Ordner 'startupCache' finden: Adressleiste > about:profiles > Lokales Verzeichnis > Ordner öffnen > startupCache
 -> Firefox schließen
 -> Inhalt des 'startupCache'-Ordners löschen

Alternativ mit einem JavaScipt!
 -> https://github.com/Endor8/userChrome.js/blob/master/Firefox%2087/RestartFirefoxButtonM.uc.js

 Aktivieren einer Einstellung > let ... auf 'true' setzen
 Deaktivieren einer Einstellung > let ... auf 'false' setzen
 Anpassungen vornehmen > Werte ändern
 - Farbe - Name: red, blue, transparent / Hexcode: #33CCFF, #FFF
 - Farbe - rgb(a): rgba(0,0,255,0.8) / hsl(a): hsla(240,100%,50%,0.8) // a = Sichtbarkeit (transparenz)
 - Zahlen: 1, 2, 3 ... 10, 11, 12 ...
 - Deckkraft (in Dezimalzahlen): 0.0 bis 1.0 z.B. 1.4 oder 1.75
 - Farbverläufe: linear-gradient(direction, color, color, color)
 - Beispiel für Farbverläufe: linear-gradient(to right, blue, #33CCFF, rgba(0,0,255,0.8))

 HINWEIS
 - Zu kleine Werte für die Scrollbar-Breite werden sich negativ auf einige Oberflaechenelemente auswirken!
 
/* *************************************************************************************************************************** */
/* *************************************************************************************************************************** */
/* *************************************************************************************************************************** */

// Path "berechneten" !
let scrollerProfileDirectory = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
// GENERAL SCROLLBAR SETTINGS
let custom_scrollbar_size_value = 16;                 // in px // default: custom_scrollbar_size_value = 17
// CUSTOM SCROLLBAR SETTINGS ("custom_scrollbar_" --> "cs_")
let cs_thumb_border = 1;                              // in px // default: cs_thumb_border = 0 // Rahmen des Sliders
let cs_thumb_roundness = 7;                           // in px // default: cs_thumb_roundness = 0 // Rundung des Sliders
let cs_thumb_minimal_size = 200;                      // in px
// CUSTOM SCROLLBAR COLORS/GRADIENTS
// - background
let cs_background_color = "#5b5b66";                  // default: cs_background_color = "#DDDDDD"
let cs_background_image_vertical = "unset";           // default: cs_background_image_vertical = "unset"
let cs_background_image_horizontal = "unset";         // default: cs_background_image_horizontal = "unset"
// - corner
let cs_corner_background_color = "#bfbfbf";           // default: cs_corner_background_color = "#DDDDDD"
let cs_corner_background_image = "unset";             // default: cs_corner_background_image = "unset"
// - thumb/slider
let cs_thumb_color = "#bfbfbf";                       // default: cs_thumb_color = "#33CCFF"
let cs_thumb_image_vertical = "unset";                // default: cs_thumb_image_vertical = "unset"
let cs_thumb_image_horizontal = "unset";              // default: cs_thumb_image_horizontal = "unset"
let cs_thumb_hover_color = "orange";                  // default: cs_thumb_hover_color = "#66FFFF"
let cs_thumb_hover_image_vertical = "unset";          // default: cs_thumb_hover_image_vertical = "unset"
let cs_thumb_border_color = "#5b5b66";                // default: cs_thumb_border_color = "#33CCFF" "#5b5b66"
// - buttons
let cs_color_arrow = "#bfbfbf";
let cs_color_arrow_hover = "orange";
let cs_width = 16;
let cs_height = 16;

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

// Scrollbar code

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

let custom_scrollbars = {

  init: function() {

    let 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[orient="vertical"] scrollbarbutton[type="increment"], 
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"], 
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"], 
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {
        -moz-appearance: none !important;
        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;
        min-height: ${(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)}px !important;
      }
      scrollbar thumb[orient="horizontal"] {
      background-image: ${cs_thumb_image_horizontal} !important;
      min-width: ${(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)}px !important;
      }
      scrollbar thumb:hover, scrollbar thumb:active {
        background-color: ${cs_thumb_hover_color} !important;
      }
      scrollbar thumb[orient="vertical"]:hover, scrollbar thumb[orient="vertical"]:active,
      scrollbar thumb[orient="horizontal"]:hover, scrollbar thumb[orient="horizontal"]:active {
        background-image: ${cs_thumb_hover_image_vertical} !important;
      }
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"] {
        mask-image: url("${scrollerProfileDirectory}/Chevron-up,_12.svg") !important;
      }
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"] {
        mask-image: url("${scrollerProfileDirectory}/Chevron-down,_12.svg") !important;
      }
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"] {
        mask-image: url("${scrollerProfileDirectory}/Chevron-right,_12.svg") !important;
      }
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {
        mask-image: url("${scrollerProfileDirectory}/Chevron-left,_12.svg") !important;
      }
      scrollbarbutton[type="increment"],
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"],
      scrollbarbutton[type="increment"],
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {
        
        mask-repeat: no-repeat;
        mask-position: center;
        background-color: ${cs_color_arrow};
        width: ${cs_width}px !important;
        height: ${cs_height}px !important;
      }
      scrollbarbutton[type="increment"]:hover,
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"]:hover,
      scrollbarbutton[type="increment"]:hover,
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"]:hover {
        background-color: ${cs_color_arrow_hover} !important;
      }
      
      scrollbar[orient="vertical"] {
        background-image: ${cs_background_image_vertical} !important;
        width: ${custom_scrollbar_size_value}px !important;
      }
      scrollbar[orient="horizontal"] {
        background-image: ${cs_background_image_horizontal} !important;
        height: ${custom_scrollbar_size_value}px !important;
      }
      scrollcorner {
        background-color: ${cs_corner_background_color} !important;
        background-image: url("${scrollerProfileDirectory}/resizer.svg") !important;
        width: ${custom_scrollbar_size_value}px !important;
      }
    `), null, null);

    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);

  }
};

// enable settings as configured above
custom_scrollbars.init();

Alles anzeigen

Speravir

Zitat von Mira_Belle

${scrollerProfileDirectory}

Wow, daran hab ich selbst nicht gedacht. Für alle: siehe unter Template literals (Template strings) (MDN).

scrollbars.uc.js anpassen - geschafft und erledigt!

scrollbars.uc.js anpassen - geschafft und erledigt!

Ähnliche Themen

Scrollbar im Firefox ändern

Farbe des Scrollbalkens ändern