Scrollbar.uc.js funktioniert hier im Nightly nicht mehr

2002Andreas

Zitat von ArisCTR

Die "bereinigte Version" ist jetzt auch online.

Hallo Aris..

ganz herzlichen Dank dafür

Sören Hentzschel

ArisCTR: Top. Wenn du schon hier bist, hätte ich noch etwas Feedback zur Verbesserung. Es gibt noch ein paar Themen mehr, die man verbessern könnte (var vs. const/let, === vs. ==, etwas konsistenterer Code-Stil, Linting sehr empfohlen! Dazu bekomme ich hier in diesem Forum wohl niemanden mehr… ). Aber meine zwei wichtigsten Punkte sind:

Zitat

widget.gtk.overlay-scrollbars.enabled > false (Linux/MacOSX)

Mal abgesehen davon, dass das Betriebssystem seit mittlerweile sieben Jahren macOS heißt und es überhaupt keine aktuelle Firefox-Version gibt, die Mac OS X noch unterstützt, hat Firefox unter macOS glücklicherweise auch noch nie GTK verwendet. Der Kommentar stimmt also auf gleich zwei Ebenen sicher nicht.

Und zwecks Wartbarkeit empfehle ich wirklich die Verwendung von Template Literals für die CSS-Blöcke. Das hat nämlich den Vorteil, dass du nicht in jeder (!) Zeile ein ·\ hinten ranschreiben musst. Sowas ist nicht nur lästig, sondern auch fehleranfällig. Sowas wird ja schnell mal übersehen.

ArisCTR

Die Datei wurde grundsätzlich überarbeitet und der Code sollte nur um einiges sauberer sein.

Auch die Scrollbuttons mit Pfeilen sind zurück, diesmal als SVG Bilder eingebettet in den Code.

CustomJSforFx/custom_scrollbars.uc.js at master · Aris-t2/CustomJSforFx

custom scripts. Contribute to Aris-t2/CustomJSforFx development by creating an account on GitHub.

github.com

Sören Hentzschel

Auch wenn ich das Script selbst nicht nutze, freue ich mich immer, wenn Code besser wird. In diesem Sinne Danke für die Umsetzung des Feedbacks!

2002Andreas

Zitat von ArisCTR

Die Datei wurde grundsätzlich überarbeitet

Funktioniert einwandfrei, vielen Dank dafür

Boersenfeger

... auch von meiner Seite...

Dharkness

Zitat von ArisCTR

Die Datei wurde grundsätzlich überarbeitet und der Code sollte nur um einiges sauberer sein.

Meinem Empfinden entsprechend angepasst funktioniert und passt es, super.

grisu2099

Auch von mir herzlichen Dank - sieht wieder hübsch aus.

2002Andreas

Ergänzend:

Dieses Skript funktioniert auch in der Release und Beta einwandfrei.

Dharkness

Zitat von 2002Andreas

Dieses Skript funktioniert auch in der Release und Beta einwandfrei.

Erledigt, so muss ich mich dann darum nicht mehr kümmern.

2002Andreas

Zitat von Dharkness

so muss ich mich dann darum nicht mehr kümmern.

Das habe ich mir auch so gedacht, und darum getestet, und gleich übernommen

milupo

Zitat von milupo

Ich habe das Skript ebenfalls und gestern ist mir aufgefallen, dass ich im Fenster vom Wetterfuchs nicht mehr richtig scrollen kann. Oben ist ein Anzeigebereich, dessen Inhalt ich ausgeblendet habe. Die Scrollleiste ist da, wenn ich sie aber bewege, zieht es diesen Anzeigebereich runter über den Inhalt des Fensters.

Zitat von Endor

Ich verwende es auch und auch hier geht es schon seit gestern nicht mehr.
Neuste Version von Aris ändert auch hier nichts daran.

Auch mit Aris' neuester Version aus Beitrag #27 ist das Problem mit dem Wetterfuchs-Skript nicht behoben. Dann ist es wahrscheinlich doch so, dass das mit Aris' Skript nicht (unmittelbar) zusammenhängt.

Äh, ansonsten: Auch von mir vielen Dank, Aris.

grisu2099

Ich habe mich mal an dem Skript aus #27 versucht...

Für alle, die gerne eine andere Farbe beim Hovern der Pfeile hätten, hier mein Ergebnis:

JavaScript

"use strict";

/* Firefox userChrome.js tweaks - 'Custom Scrollbars' for Firefox
   https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/custom_scrollbars.uc.js

   Version: 2.0.1 for Firefox 111+
   
   NOTE: 'non-compatible options' from earlier versions were removed

   README
  
   about:config >
       widget.windows.overlay-scrollbars.enabled > false (Windows)
       widget.gtk.overlay-scrollbars.enabled > false (Linux)
   [!] The above preferences have to be set to 'false' for this code to work
 
   [!] STARTUP CACHE HAS TO BE DELETED AFTER EVERY CHANGE!
   -> finding 'startupCache' folder: address bar > about:profiles > Local Directory > Open Folder > startupCache
   -> close Firefox
   -> delete 'startupCache' folders content
 
   Modifying appearance > change values
   - enable/disable options: true <-> false
   - color
     - name: red, blue, transparent 
     - hex code: #33CCFF, #FFF
     - 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, blue, #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
   - no color or no color value -> use "unset"
 
*/

(function() {


  /* General scrollbar settings *******************************************************/

  // default: hide_scrollbars = false
  const hide_scrollbars = false;

  // default: hide_scrollbar_buttons = false
  const hide_scrollbar_buttons = false;

  // default: thin_scrollbars = false / browsers own way to show thin scrollbars
  const thin_scrollbars = false;

  // default: custom_scrollbar_opacity = false
  const custom_scrollbar_opacity = false;

  // default: custom_opacity_value = "1.0"
  const custom_opacity_value = "1.0";


  /* Custom scrollbar settings ("custom_scrollbar_" --> "cs_") ************************/
  
  // default: custom_scrollbars = true
  const custom_scrollbars = true;
  
  // default: custom_scrollbar_arrows = true
  const custom_scrollbar_arrows = true;
  
  // default: custom_scrollbar_arrows_color = "grey"; / # ==> %23 e.g. #33CCFF ==> %2333CCFF
  const custom_scrollbar_arrows_color = "green";

  //definiert die Hoverfarbe für die Scrollbuttons
  const custom_scrollbar_arrows_hover_color = "red";

  // default: cs_thumb_border = 0 / in px
  const cs_thumb_border = 1;
  
  // default: cs_thumb_roundness = 0 / in px
  const cs_thumb_roundness = 5;
 
  // default: cs_buttons_border = 0 / in px
  const cs_buttons_border = 0;

  // default: cs_buttons_roundness = 0 / in px
  const cs_buttons_roundness = 0;

  // default: cs_ignore_color_gradients = false / 'flat' scrollbars
  const cs_ignore_color_gradients = true; 
  

  /* Custom scrollbar colors and gradients ********************************************/
  
  // default: cs_background_color = "#DDDDDD"
  const cs_background_color = "#171717";

  // default: cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";
  
  // default: cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";
  
  // default: cs_corner_background_color = "#DDDDDD" / - corner
  const cs_corner_background_color = "#171717";
  
  // default: cs_corner_background_image = "linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%),linear-gradient(-45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%)"
  let cs_corner_background_image = "linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%),linear-gradient(-45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%)";

  // default: cs_thumb_color = "#33CCFF" / thumb/slider
  const cs_thumb_color = "rgb(80,80,80)";
  
  // default: cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; 
  
  // default: cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; 
  
  // default: cs_thumb_hover_color = "#66FFFF"
  const cs_thumb_hover_color = "rgb(50,50,52)";
  
  // default: cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";
  
  // default: cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";
  
  // default: cs_thumb_border_color = "#33CCFF"
  const cs_thumb_border_color = "rgb(0,200,0)";
  
  // default: cs_buttons_color = "#66FFFF" / buttons
  const cs_buttons_color = "#171717";
  
  // default: cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";

  // default: cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";
  
  // default: cs_buttons_hover_color = "#33CCFF"
  const cs_buttons_hover_color = "#171717";
  
  // default: cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)";
  
  // default: cs_buttons_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_buttons_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)";
  
  // default: cs_buttons_border_color = "#33CCFF"
  const cs_buttons_border_color = "#33CCFF";


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


  // 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";


  let custom_scrollbars_code='';
  let custom_scrollbar_arrows_code='';
  let hide_scrollbar_buttons_code='';
  let custom_scrollbar_opacity_code='';
  let hide_scrollbars_code='';
  let thin_scrollbars_code='';
  
  if(custom_scrollbars === true)
    custom_scrollbars_code=`
        slider, scrollcorner, scrollbar thumb, scrollbar scrollbarbutton {
          appearance: auto;
          -moz-default-appearance: none !important;
        }
        slider {
          background-color: `+cs_background_color+` !important;
        }
        scrollbar[orient="vertical"] slider {
          background-image: `+cs_background_image_vertical+` !important;
        }
        scrollbar[orient="horizontal"] slider {
          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;
          box-shadow: inset 0 0 0 `+cs_thumb_border+`px `+cs_thumb_border_color+` !important;
        }
        scrollbar thumb[orient="vertical"] {
          background-image: `+cs_thumb_image_vertical+` !important;
          min-height: `+(12+cs_thumb_roundness+cs_thumb_border)+`px !important;
        }
        scrollbar thumb[orient="horizontal"] {
          background-image: `+cs_thumb_image_horizontal+` !important;
          min-width: `+(12+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 scrollbarbutton {
          background-color: `+cs_buttons_color+` !important;
          border-radius: `+cs_buttons_roundness+`px !important;
          box-shadow: inset 0 0 0 `+cs_buttons_border+`px `+cs_buttons_border_color+` !important;
          height: 15px !important;
          width: 15px !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;
        }
    `;
    
  if(custom_scrollbar_arrows === true)
    custom_scrollbar_arrows_code=`
        scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_color+`' %3E%3Cpath d='m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/%3E%3C/svg%3E ") !important;
          background-repeat: no-repeat !important;
          background-position: center center !important;
        }

        scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_color+`' %3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E ") !important;
          background-repeat: no-repeat !important;
          background-position: center center !important;
        }

        scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_color+`' %3E%3Cpath d='m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z'/%3E%3C/svg%3E ") !important;
          background-repeat: no-repeat !important;
          background-position: center center !important;
        }

        scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_color+`' %3E%3Cpath d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z'/%3E%3C/svg%3E ") !important;
          background-repeat: no-repeat !important;
          background-position: center center !important;
        }


        scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]:hover {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_hover_color+`' %3E%3Cpath d='m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/%3E%3C/svg%3E ") !important;
          background-repeat: no-repeat !important;
          background-position: center center !important;
        }

        scrollbar[orient="vertical"] > scrollbarbutton[type="increment"]:hover {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_hover_color+`' %3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E ") !important;
          background-repeat: no-repeat !important;
          background-position: center center !important;
        }

        scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"]:hover {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_hover_color+`' %3E%3Cpath d='m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z'/%3E%3C/svg%3E ") !important;
          background-repeat: no-repeat !important;
          background-position: center center !important;
        }

        scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"]:hover {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='`+custom_scrollbar_arrows_hover_color+`' %3E%3Cpath d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z'/%3E%3C/svg%3E ") !important;
          background-repeat: no-repeat !important;
          background-position: center center !important;
        }
    `;

  if(hide_scrollbar_buttons === true)
    hide_scrollbar_buttons_code=`
        scrollbar scrollbarbutton {
          opacity: 0 !important;
        }
        scrollbar[orient="vertical"] scrollbarbutton {
          min-height: 1px !important;
          height: 1px !important;
          max-height: 1px !important;
        }
        scrollbar[orient="horizontal"] scrollbarbutton {
          min-width: 1px !important;
          width: 1px !important;
          max-width: 1px !important;
        }
    `;
    
  if(custom_scrollbar_opacity === true)
    custom_scrollbar_opacity_code=`
        scrollbar {
          opacity: `+custom_opacity_value+` !important;
        }
    `;
  
  if(hide_scrollbars === true)
    hide_scrollbars_code=`
        scrollbar, scrollcorner {
          display: none !important;
          visibility: collapse !important;
        }
    `;
  
  if(thin_scrollbars === true)
    thin_scrollbars_code=`
        :root{
          scrollbar-width: thin !important;
        }
    `;

  Components.classes["@mozilla.org/content/style-sheet-service;1"]
    .getService(Components.interfaces.nsIStyleSheetService)
      .loadAndRegisterSheet(Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`
        `+custom_scrollbars_code+`
        `+custom_scrollbar_arrows_code+`
        `+hide_scrollbar_buttons_code+`
        `+custom_scrollbar_opacity_code+`
        `+hide_scrollbars_code+`
        `+thin_scrollbars_code+`
  `), null, null),
  Components.classes["@mozilla.org/content/style-sheet-service;1"]
    .getService(Components.interfaces.nsIStyleSheetService).AGENT_SHEET);


})();

Alles anzeigen

Keine Ahnung, ob das eleganter zu lösen geht - ich bin froh, es überhaupt hingekriegt zu haben!

2002Andreas

Zitat von grisu2099

ob das eleganter zu lösen geht

Ist doch genau richtig so

Hier kann/soll man das selber anpassen:

Code

  // default: custom_scrollbar_arrows_color = "grey"; / # ==> %23 e.g. #33CCFF ==> %2333CCFF
  const custom_scrollbar_arrows_color = "green";

  //definiert die Hoverfarbe für die Scrollbuttons
  const custom_scrollbar_arrows_hover_color = "red";

grisu2099

Klar, die Zeilen 4+5 sind ja von mir...

2002Andreas

Zitat von grisu2099

die Zeilen 4+5 sind ja von mir.

Ich weiß, und genau da im oberen Bereich kann man alles selber ändern.

grisu2099

Ich mußte aber auch weiter unten noch was einbauen - speziell das meinte ich mit dem "ob das eleganter zu lösen geht"...

2002Andreas

Zitat von grisu2099

Ich mußte aber auch weiter unten noch was einbauen

In welcher Zeile?

Zitat von grisu2099

speziell das meinte ich

Ich bezog mich auf:

Zitat von grisu2099

eine andere Farbe beim Hovern der Pfeile hätten

Und dafür reicht es oben die Farbe zu ändern.

grisu2099

Zitat von 2002Andreas

In welcher Zeile?

Zeilen 267-289

Ohne die geht es nicht - oder doch?

Ich sag ja: Anfänger mit Null-Ahnung von Java-Script...

2002Andreas

Zitat von grisu2099

Anfänger mit Null-Ahnung von Java-Script

Willkommen im Club

Zitat von grisu2099

Zeilen 267-289

Hast du doch gut gelöst so

Scrollbar.uc.js funktioniert hier im Nightly nicht mehr

2002Andreas 2. April 2023 um 16:40

Ähnliche Themen

Seit kurzem arbeitet die Erweiterung Default Bookmark Folder im Nightly nicht mehr wie bisher gewohnt

browser.warnOnQuit Skript funktioniert im aktuellem Nightly nicht mehr

Vor und Zurück Schaltfläche CSS funktioniert nicht mehr richtig

Alle Tabs als Lesezeichen funktioniert nicht mehr

Skript für Bottom-Toolbar funktioniert im aktuellem Nightly nicht mehr

Script für vertikale Toolbar funktioniert in der Nightly nicht mehr