Beiträge von Horstmann

Horstmann

Zitat von Mira_Belle

Ja, kenne ich. Solche Flüchtigkeitsfehler passieren mir auch oft, gerade wenn es nur mal eben schnell gehen soll.

Tja...

Übrigens, mir kam das dann doch etwas bekannt vor, hier eine alte Thread zum Thema.

Falls deine Pfeile alle gleich sind, reichen auch 2, evtl. sowas, nur grob angetestet:

CSS

arrowscrollbox[orient="horizontal"] {
    --custom-arrow-image: url("icons/pfeiltest-links.png");
}

arrowscrollbox {
    --custom-arrow-image: url("icons/pfeiltest-down.png");
}

:is(#scrollbutton-down, #scrollbutton-up) > .toolbarbutton-icon {
    list-style-image: var(--custom-arrow-image) !important;
}

Alles anzeigen

Bezgl. Dateipfaden, bei mir am Mac geht das url("icons/pfeiltest-links.png"), oder das url("./icons/pfeiltest-links.png"), aber nicht das url("../icons/pfeiltest-links.png") ("icons" Ordner im "chrome" Ordner).

Hier auch noch ein aktueller Fx Code dazu.

Test Icons: pfeiltest.zip

Horstmann

Zitat von Mira_Belle

Wenn dieses interne Symbol geladen wird, liegt es wahrscheinlich am falschen Pfad.

Ich Schlaumeier hatte vergessen, die Icons auch für die Tableiste einzutragen, jetzt geht alles prima ....

Horstmann

Zitat von Mira_Belle

So, jetzt aber!

Damit sind bei mir diese Scroll-Buttons in der Tableiste bei Overflow weg, und nur noch in Lesezeichen Popups vorhanden (aktuelles Fx am Mac, Icons installiert und angezeigt in Lesezeichenpopups).

Horstmann

Zitat von FuchsFan
Aber damit klappt es jetzt.
CSS
#scrollbutton-down > image, #scrollbutton-up > image {
	background-color: transparent !important;
}

Da hat Mozilla schon wieder was geändert, ohne mich vorher anzurufen.
Der Code von Andreas in #29 ist vermutlich besser, aber gibt sich uU nicht viel.

Horstmann

Zitat von FuchsFan
das musste ich von deinem gestrigen Code in der userChromeShadow.css bestehen lassen.
Code
#tabbrowser-arrowscrollbox, #pinned-tabs-container {
  &::part(scrollbutton-up), &::part(scrollbutton-down) {
....
Den heutigen Code hatte ich schon angepasst, funktionierte auch, musste dafür aber das Shadow-Script an die erste Startposition setzen.

Sauber gemacht!

Du könntest auch noch versuchen, statt das Shadow-Script zu benutzen die Selektoren #tabbrowser-arrowscrollbox, #pinned-tabs-container mit in das normale CSS zu packen:

CSS

#navigator-toolbox {
    --ug-scroller_bgcolor: lightgrey;
    ... etc...
    
==>     

#navigator-toolbox, #tabbrowser-arrowscrollbox, #pinned-tabs-container {
    --ug-scroller_bgcolor: lightgrey;
    ... etc...

Ist in dem Beispiel nicht sehr elegant, und #navigator-toolbox kannste dir vermutlich sparen, aber meine Fx Version ist minimal zu alt zum sauber testen...

Das Prinzip ist, wie von Mitleser beschrieben, dass man halt einen Satz Variablen für jeden gewünschten Bereich erstellt, mit der gleichen Bezeichnung, aber verschiedenen Werten, und die dann universell an das zu verändernde Element packt, welches dann je nach Bereich die entsprechenden Werte benutzt.

Dann würde ich noch ein Auge auf diese Scrollbuttons in anderen Bereichen halten - viele gibt's nicht, aber kann immer sein dass man was übersieht mit diesem Variablen Ansatz.
Wir hatten dazu mal eine gute Diskussion auch mit Sören, find ich aber leider grade nicht.

Horstmann

Zitat von juras

Sören Hentzschel
Das beobachte Verhalten ist wirklich nicht nice.
In dieser Version prüfe ich ob die Maus das Fenster verläßt oder von außen ins Fenster kommt.
"Fliegt" die Maus ins Fenster (<50ms im Triggerbereich) öffnet die Sidebar nicht.
Wird die Maus aus dem Fenster bewegt öffnet die Sidebar auch nicht. Ist die Sidebar bereits offen so schließt sie sich.

Mein Eindruck wäre, dass dein Script viele native Fx Funktionen erst ausschaltet, und dann neu erfindet.
Das ist meiner beschränkten Erfahrung nach eine typische Eigenheit von AI, va wenn man Problemlösungen basierend auf einem existierenden Code sucht - Pflaster über Pflaster über Pflaster.

Ich glaube auch nicht dass AI den Fx Code an sich analysiert (oder analysieren darf), sondern va online Beiträge zum Code zusammenbastelt. Daher verwende ich wenn überhaupt AI als Richtgebung, und lösche dann soviel wie möglich wieder raus, auch unter Verwendung von searchfox, MDN und anderen Quellen.

Ich will das Thema nicht an mich reissen, aber in meinem groben Code scheint ein kleiner transition-delay beim Öffnen das aus dem Fenster Hover Problem zu lösen, solange man die Maus nicht seeeehr langsam über die Aktivierungsfläche bewegt.
In deiner letzten Version dauert es auch sehr lange bis das Ding überhaupt mal ausklappt.

Horstmann

Zitat von Mitleser

Zitat von FuchsFan

Das sind für mich "Böhmische Wälder".

Ich meinte diese Möglichkeit (gehört in die userChrome.css):

In dem Sinne auch sowas; das Problem ist, dass initial nicht greift (den nativen Wert benutzt), wenn eine Variable nicht ausdrücklich gesetzt ist, zB wenn man --ug-scroller_hoverbgcolor: orange; ganz oben löscht.
Evtl. sollte man über die internen Fx Variablen gehen?

CSS

#navigator-toolbox {
    --ug-scroller_bgcolor: green;
    --ug-scroller_border: 2px solid red;  
    --ug-scroller_hoverbgcolor: orange;
    --ug-scroller_border_hover: 2px solid purple
}

/*menupopup,*/
toolbarbutton.bookmark-item {
    --ug-scroller_bgcolor: lightgrey;
    --ug-scroller_border: 1px solid grey;  
    --ug-scroller_hoverbgcolor: yellow;
    --ug-scroller_border_hover: 1px solid red;         
}

:is(#scrollbutton-down, #scrollbutton-up) {
    background-color: var(--ug-scroller_bgcolor, initial) !important;    
    border: var(--ug-scroller_border, initial) !important; 
}

:is(#scrollbutton-down, #scrollbutton-up):is(:hover, :active) {
    background-color: var(--ug-scroller_hoverbgcolor, initial) !important;    
    border: var(--ug-scroller_border_hover, initial) !important; 
}

Alles anzeigen

Hat es übrigens jemand geschafft, ::part(scrollbutton-up) etc. für die Lesezeichen Popups mit der userChromeShadow.css zu manipulieren?

Fuchsfan hat so viele spezifische Regeln, der Umweg über Variablen wird da schnell mühsam.

Horstmann

Zitat von Mira_Belle

Horstmann Nur über die userChromeShadow.css!

Das ist nicht der Tenor hier, weder die Frage noch die akzeptierten Lösungen haben diesen Umweg erwähnt.
Mitleser hat es zumindest teilweise erklärt.

Horstmann

Zitat von 2002Andreas
Wenn du magst, dann kannst du das auch mal testen:
Code
#tabbrowser-arrowscrollbox, #pinned-tabs-container {
  &::part(scrollbutton-up), &::part(scrollbutton-down) {

....

Also ::part lässt sich jetzt ohne JS direkt mit CSS ansprechen?

Horstmann

Zitat von Mitleser

Was hat das denn mit dem originalen Script zu tun? Eigenes Thema?

Es hat mE tatsächlich mit dem Thema zu tun, und dem Script, und allen Kommentaren dazu, was ja nicht immer der Fall ist.

Horstmann

Zitat von Mira_Belle

Funktioniert.

Danke für's testen!

Nur um sicher zu gehen:

- Sidebar rechts/links setzen,
- mit/ohne diesen Einstellungen bzw. Buttonaktivierungen (bei hidden ist die Sidebar hidden),
- die sidebar.revamp ist immer noch auf true,
- die Breite der Sidebar wird gespeichert nach Verstellen und bleibt auch nach Neustart,
- Die Tastaturkürzel für die Sidebar (zB cmd + b am Mac zum Verstecken/Zeigen),
- Sidebar hover wird nicht aktiviert ausserhalb des Browserfenster, solange man die Maus nicht über die Aktivierungsfläche zieht
- Idealerweise auch dann nicht.

Alles klappt generell?

Vertikale Tabs hab ich allerdings offengestanden nicht getestet, und in dieser Testkonfiguration verdeckt die Aktivierungsfläche einen Teil der Sidebar Zusatzleiste etc..

Horstmann

Zitat von Mira_Belle

2002Andreas Erklärst Du mir, was an meinem Code nicht stimmt?
Bzw. Warum das ganze Konstrukt besser ist?
Denn ich habe das mit Absicht weggelassen.

Nichts stimmt nicht mit deinem Code; ich denke nur es ist oft besser den nativen Fx Code so wenig wie möglich zu manipulieren, s. #8 .
Wenn es also nur um die Border Farbe an einer bestimmten Stelle, und nur an einer Seite der Border geht, kann es Sinn machen nur das zu ändern, um ungewollte Änderungen an anderer Stelle zu vermeiden.

Horstmann

Falls das mal jemand testen möchte; das wäre nur als grober Test gedacht für das Prinzip.

Die Idee wäre, dass das Script möglichst wenig an Fx Code und nativer Funktion überschreibt; die Aktivierungsfläche ist für eben den Test sichtbar und recht gross, und agiert auch als Resizer.
Kann verschoben und verkleinert werden.

Ein Teil vom JS Code ist teils vom OP übernommen, teils mit freundlicher Hilfe von Perplexity AI entstanden, aber generell manuell angepasst. CSS ist 100% by Horst-I.

JavaScript

// floating hover sidebar Test

(function() {

    if (location.href !== 'chrome://browser/content/browser.xhtml')
        return;

    // adjust height to browser window
    let brow_size = document.getElementById("browser");
    let observer = new ResizeObserver(() => {
    let rect = brow_size.getBoundingClientRect();
    document.getElementById('sidebar-box').style.setProperty('--height_sidebar', rect.height + 'px');
    //document.getElementById('sidebar-box').style.setProperty('--height_sidebar_top', rect.top + 'px');
    });
    observer.observe(brow_size);

    let floater = document.getElementById('sidebar-box');

    // keep sidebar open when open popup is hovered
    window.addEventListener("popupshowing", (e) => {
        if (e.target.id === "sidebarMenu-popup" || e.target.getAttribute("viewid")?.startsWith("sidebar-")) {
          floater.classList.add("menu_up");
        }
        else {
          floater.classList.remove("menu_up");
        }
    });

    // resizer
    let resizer = document.createElement("div");
    resizer.id = "sidebar_resizer";
    floater.appendChild(resizer);

    let isResizing = false;
    let startX, startWidth;
    let isRight;

    resizer.addEventListener("mousedown", e => {
      isResizing = true;
      startX = e.clientX;
      startWidth = floater.getBoundingClientRect().width;
      isRight = floater.hasAttribute("positionend") || floater.hasAttribute("sidebar-positionend");

      e.preventDefault();
    });

    window.addEventListener("mousemove", e => {
      if (!isResizing) return;

      let delta;
      if (isRight) {
        delta = startX - e.clientX;
      } else {
        delta = e.clientX - startX;
      }

      let newWidth = startWidth + delta;
      floater.style.width = newWidth + "px";
    });

    window.addEventListener("mouseup", () => {
      isResizing = false;
    });

let css =`

#sidebar-box {
    --ug-handle_size: 32px;
    --ug-trans_delay_out: 0.25s;
    --ug-trans_delay_in: 1s;
    position: fixed !important;
    /*max-width: unset !important;*/
    right: 0px;
    left: unset;
    bottom: 0px;
    height: var(--height_sidebar);
    z-index: 99999 !important;
    transform: translateX(0%);
    transition: transform 0.5s ease !important;
    transition-delay: var(--ug-trans_delay_out) !important;
}

#sidebar-box:not([positionend],[sidebar-positionend]) {
    right: unset;
    left: 0px;
}

/*  Resizer  */

#sidebar_resizer {
    position: absolute;
    top: 0;
    right: unset;
    left: calc(-1*var(--ug-handle_size));
    width: var(--ug-handle_size);
    height: 64px;
    cursor: ew-resize;
    background: hsla(35, 0%, 50%, 0.25);
    outline: 2px solid lightblue;
    outline-offset: -2px;
}

#sidebar-box:not([positionend],[sidebar-positionend])  #sidebar_resizer {
    right: calc(-1*var(--ug-handle_size));
    left: unset;
}

/*   hide   */

#sidebar-box:not(:hover, .menu_up) {
    transform: translateX(100%);
    transition-delay: var(--ug-trans_delay_in) !important;
}

#sidebar-box:not([positionend],[sidebar-positionend]):not(:hover, .menu_up) {
    transform: translateX(-100%);
}

/*   stuff   */

#sidebar,
#sidebar-header {
  background-color: whitesmoke !important;
  border-inline: 1px solid grey;
  border-inline-width: 1px 0px;
}

#sidebar-box:not([positionend],[sidebar-positionend]) :is(#sidebar, #sidebar-header) {
  border-inline-width: 0px 1px;
}

#sidebar-splitter {
    display: none !important;
}

 `;

  const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
  const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
  sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

})();

Alles anzeigen

Test 3:

JavaScript

// floating_autohide_sidebar_test3.uc.js

// floating autohide hover sidebar Test 3
// Hover/resizer handle options for position and width
// Additional hover area in toolbar option
// User settings at the start of JS and CSS code blocks

(function() {

    if (location.href !== 'chrome://browser/content/browser.xhtml')
        return;

// User settings JS

    // true = enabled, false = disabled

    // Additional hover area in toolbar
    let hover_button = true;
    // Hover/resizer handle narrow and full height
    let full_height = false;
    // Test colors
    let test_colors = false;

// User settings JS end

    // adjust height to browser window
    let brow_size = document.getElementById("browser");
    let observer = new ResizeObserver(() => {
    let rect = brow_size.getBoundingClientRect();
    document.getElementById('sidebar-box').style.setProperty('--height_sidebar', rect.height + 'px');
    //document.getElementById('sidebar-box').style.setProperty('--height_sidebar_top', rect.top + 'px');
    });
    observer.observe(brow_size);

    let floater = document.getElementById('sidebar-box');

    // keep sidebar open when open popup is hovered
    window.addEventListener("popupshowing", (e) => {
        if (e.target.id === "sidebarMenu-popup" || e.target.getAttribute("viewid")?.startsWith("sidebar-")) {
          floater.classList.add("menu_up");
        }
        else {
          floater.classList.remove("menu_up");
        }
    });

// Hover button

  if (hover_button) {
    try {
      CustomizableUI.createWidget({
        id: 'sb_hover_button',
        defaultArea: CustomizableUI.AREA_NAVBAR,
        label: 'Sidebar Hover',
        tooltiptext: 'Sidebar Hover',
      });
    } catch (e) {}

    let hover_btn = document.getElementById("sb_hover_button");

    hover_btn.addEventListener('mouseover',function(){
          floater.classList.add("hover_that");
    })
    hover_btn.addEventListener('mouseleave',function(){
          floater.classList.remove("hover_that");
    });
    // prevent click
    hover_btn.onmousedown = function(event) {
        event.preventDefault();
    }
   };

// Resizer
    let resizer = document.createElement("div");
    resizer.id = "sidebar_resizer";

    floater.appendChild(resizer);

    let isResizing = false;
    let startX, startWidth;
    let isRight;

    resizer.addEventListener("mousedown", e => {
      isResizing = true;
      startX = e.clientX;
      startWidth = floater.getBoundingClientRect().width;
      isRight = floater.hasAttribute("positionend") || floater.hasAttribute("sidebar-positionend");

      floater.classList.add("resizinger");

      let rect_r = resizer.getBoundingClientRect();
      offsetX = rect_r.width / 2;
      offsetY = rect_r.height / 2;
      floater.style.transition = "none";

      e.preventDefault();
    });

    window.addEventListener("mousemove", e => {
      if (!isResizing) return;

      let delta;
      if (isRight) {
        delta = startX - e.clientX;
      } else {
        delta = e.clientX - startX;
      }
      let newWidth = startWidth + delta;
      floater.style.width = newWidth + "px";
      //floater.style.setProperty('--end_width_sidebar', newWidth + 'px');
    });

    window.addEventListener("mouseup", () => {
      isResizing = false;
      floater.classList.remove("resizinger");
    });

let css =`

#sidebar-box {

/*--  User settings CSS  --*/

    --ug-handle_height: 64px;
    --ug-handle_width: 32px;
    --ug-handle_distance_top: 0px;
    --ug-handle_width_fullheight: 16px;

    --ug-trans_duration: 0.35s;
    --ug-trans_delay_out: 0.25s;
    --ug-trans_delay_in: 1s;

/*--  User settings CSS end --*/

    --ug-handle_position: calc(-1*var(--ug-handle_width) + 5px);
    --ug-handle_width_resize: calc(100% + var(--ug-handle_width));

    position: fixed !important;
    /*max-width: unset !important;*/
    left: 0px;
    right: unset;
    bottom: 0px;
    height: var(--height_sidebar);
    z-index: 99999 !important;
    transform: translateX(-100%);
    transition: transform var(--ug-trans_duration) ease !important;
    transition-delay: var(--ug-trans_delay_in) !important;
}

#sidebar-box:is([positionend],[sidebar-positionend]) {
    transform: translateX(100%);
    left: unset;
    right: 0px;
}

/*   show   */

#sidebar-box:is(:hover, .menu_up, .hover_that) {
    transform: translateX(0%);
    transition-delay: var(--ug-trans_delay_out) !important;
}

/*  Resizer  */

#sidebar_resizer {
    position: absolute;
    top: var(--ug-handle_distance_top);
    left: unset;
    right: var(--ug-handle_position);
    width: var(--ug-handle_width);
    height: var(--ug-handle_height);
    cursor: ew-resize;
}

#sidebar-box:is([positionend],[sidebar-positionend]) #sidebar_resizer {
    left: var(--ug-handle_position);
    right: unset;
}

#sidebar-box.resizinger #sidebar_resizer {
    width: var(--ug-handle_width_resize);
    background-color: var(--sidebar-border-color);
    outline: 1px solid var(--sidebar-border-color);
    outline-offset: -1px;
}

#sidebar_resizer::after {
    content: "";
    position: absolute;
    z-index: -1 !important;
    width: var(--ug-handle_width);
    height: 100%;
    background-color: transparent;
    outline: 0px solid var(--sidebar-border-color);
    outline-offset: -1px;
    transition: background-color var(--ug-trans_duration) ease, outline-width var(--ug-trans_duration) ease !important;
    transition-delay: var(--ug-trans_delay_in) !important;
}

#sidebar-box:is(:hover, .menu_up, .hover_that) #sidebar_resizer::after {
    background-color: var(--sidebar-background-color);
    outline-width: 1px;
    transition-delay: var(--ug-trans_delay_out) !important;
}

/*  Hover buton  */

#sb_hover_button > .toolbarbutton-icon {
    height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
    width: 64px !important;
    background-image: url(chrome://global/skin/icons/arrow-right.svg), url(chrome://global/skin/icons/arrow-left.svg) !important;
    background-position: center left 20%, center right 20% !important;
    background-size: 50% 50% !important;
    background-repeat: no-repeat !important;
}

#sb_hover_button  {
    padding: 0px 2px !important;
}

/*   colors, border   */

#sidebar,
#sidebar-header {
    background-color: var(--sidebar-background-color) !important;
    border-inline: 1px solid var(--sidebar-border-color);
    border-inline-width: 1px 0px;
}

#sidebar-box:not([positionend],[sidebar-positionend]) :is(#sidebar, #sidebar-header) {
  border-inline-width: 0px 1px;
}

#sidebar-splitter {
    display: none !important;
}

 `;

if (full_height) {
css += `

/*   full height   */

 #sidebar-box {
    --ug-handle_height: 100%;
    --ug-handle_distance_top: 0px;
    --ug-handle_width: var(--ug-handle_width_fullheight);
    --ug-handle_position: calc(-1*var(--ug-handle_width) /2);
}
 `;
}

if (test_colors) {
css += `

/*   Test colors   */

#sidebar_resizer {
    background: hsla(35, 0%, 50%, 0.25);
    outline: 2px solid lightblue;
    outline-offset: -2px;
}

#sidebar-box.resizinger #sidebar_resizer {
    background: hsla(35, 50%, 50%, 0.5);
    outline: 2px solid blue;
    outline-offset: -2px;
}


 `;
}

  const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
  const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
  sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

})();

Alles anzeigen

Horstmann

Zitat von BrokenHeart

OK, alles klar. Ich hatte nur das Gefühl, dass in diesem Thread eine gewisse Abneigung dem Skript gegenüber herrscht und da habe ich mich eben gefragt, warum? Aber wenn ich falsch lag, umso besser...

Keine Abneigung meinerseits.

In meinen eigenen - sehr bescheidenen - Script Beiträge bettle ich regelmässig darum dass mir Leute Fehler und Optimierungsmöglichkeiten zeigen, und davon gibt es auf jeden Fall viele, aber oft kommt wenig ...
Wobei gerade du mir in der Vergangenheit sehr oft weitergeholfen hattest.

Im übrigen benutze ich in letzter Zeit auch öfters mal KI, aber idR zum Feinschliff oder Fx Anpassung von vor-recherchiertem Code.

Horstmann

Übrigens, wenn diese Sidebar rechts sitzt, und eine Webseite mit einer Scrollbar rechts angezeigt ist, wird die Scrollbar teils verdeckt von der Aktivierungsfläche.

Man könnte eine kleinere Hover Aktivierungsfläche zB oben in einer Ecke benutzen, oder eine Aktivierungsfläche in die Toolbars integrieren, quasi ein Hover-Button.
Oder man kann einfach den normalen Button zum Ein/Ausblenden benutzen.

Zitat von BrokenHeart

Ich verstehe diese offensichtliche Häme nicht?

Das hast du missverstanden, es gibt hier keine Häme meinerseits, das war als Scherzchen gemeint.
Diese Hovergeschichten über ganze Leisten sind halt komplex, und bringen immer Anwendungs Probleme mit sich.

Horstmann

Zitat von Sören Hentzschel

Der nächste Fehler, der mir gerade neben dem bereits in Beitrag #28 erwähnten Fehler aufgefallen ist, betrifft die Nutzung mehrerer Bildschirme. Bewege ich die Maus auf meinem Hauptbildschirm seitlich heraus, um auf den zweiten Bildschirm zu kommen, öffnet die Sidebar auf dem Hauptbildschirm, in dem sich der Mauszeiger überhaupt nicht mehr befindet.

Das liegt in der Natur jeder Hoveraktivierung; wenn man die Aktivierungsfläche mit der Maus überfährt, wird hier eben das Ausklappen aktiviert. Es braucht auch keinen 2ten Bildschirm für das Problem, nur freien Raum neben dem Browserfenster, auf der Seite der Sidebarplatzierung.

Das Script hat schon eine Verzögerung eingebaut, die scheinbar zumindest das Ausklappen in einer Richtung eingrenzt.
Wenn man die Maus sehr schnell bewegt, gibt es das Problem hier zumindest nicht - also einfach hektisch werden, oder nur mit maximiertem Browserfenster arbeiten, und weitere Bildschirme abstöpseln - ist doch nur eine minimale Anpassung für den User.

Horstmann

Zitat von Alexandriaa

ich würde gerne meine Lesezeichensymbolleiste auf den rechten Rand meines Firefox Bildschirms verlegen und brauche bitte dafür eure Hilfe.

Hallo, du müsstest zunächstmal unterscheiden zwischen der Sidebar und der Lesezeichensymbolleiste.
Die Sidebar ist die seitliche Leiste die man auf und einklappen kann, diese kann man horizontal verschieben, indem man ganz oben auf (zB) Lesezeichen klickt, und dann die Position auswählt.

Die Lesezeichensymbolleiste ist eine horizontale Leiste, die oben (idR) fest angebracht ist.

Horstmann

Zitat von .DeJaVu

Ich hatte das letzte Woche hinter mir, jenes Menü ist mir einfach zu voll geworden und habe "ausgemistet". Die Reihenfolge ist übrigens genau so in Firefox, ohne Einträge von Erweiterungen.

Siehe auch hier, da ist das Ganze ordentlich aufgelistet.
Mit den Browser Werkzeugen kann man die Einträge natürlich leicht selber finden, eigene CSS Dateien modifizieren, direkt Ergebnisse sehen und speichern.

Sehr praktisch.

Horstmann

Im Falle das juras das Thema noch verfolgt:
Sowas mit in den CSS Block zu packen könnte grob helfen mit der leer angezeigten Sidebar, aber eine saubere Lösung ist das nicht.

CSS

#sidebar-box[hidden="true"] {
    display: none !important;
}

hidden dürfte der Status sein, wenn die Sidebar Anzeige ausgeschaltet ist, und scheint vom Script ignoriert/überschrieben zu werden.

Horstmann

Zitat von Mitleser

Knapp 1000 Zeilen für eine Leiste? Geht auch kürzer (CSS muss angepasst werden):

Die beiden Scripts kann man nicht so ganz direkt vergleichen.

Optimieren könnte man bei mir vieles, wie so oft erwähnt, aber du weisst besser als ich, dass die ganzen Optionen und Features nicht von alleine auftauchen.

Wenn es aber schon ein Script sein soll, das mit dem hier quasi nix zu tun hat - kein hover Gedöns in diesem Ding - dann muss man das nicht so aufblähen:

JavaScript

(function() {

    if (location.href !== 'chrome://browser/content/browser.xhtml')
        return;

    let null_box = document.createXULElement('toolbox');
    null_box.id = 'nullbox_new';
    null_box.setAttribute('orient','horizontal');

    let nulltb = document.createXULElement('toolbar');
    nulltb.id = 'Null_toolbar';
    nulltb.setAttribute('customizable', true);
    nulltb.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
    nulltb.setAttribute('mode', 'icons');
    nulltb.setAttribute('context', 'toolbar-context-menu');
    nulltb.setAttribute('label', 'New Toolbar');
    nulltb.setAttribute('orient', 'horizontal');
    nulltb.setAttribute("accesskey","");

    null_box.appendChild(nulltb);
    document.getElementById('browser').parentNode.appendChild(null_box);

    CustomizableUI.registerArea('Null_toolbar', {legacy: true});
    CustomizableUI.registerToolbarNode(nulltb);

let css =`

#nullbox_new {
    --base_height: 32px;
    --extra_height: 1px;
}

#Null_toolbar {
    z-index: 4 !important;
    overflow: hidden !important;
    background-color: lightblue !important;
    min-width: 64px !important;
    width: 100% !important;
    min-height: var(--base_height) !important;
    height: calc(var(--base_height) + 2*var(--extra_height)) !important;
    align-items: center !important;
    padding-block: var(--extra_height);
    padding-inline: 8px;
    border-style: solid !important;
    border-color: grey;
    border-width: 0px;
    border-top-width: 1px;
    opacity: 1 !important;
 	  margin-bottom: 0px !important;
    transition: height 0.3s ease, min-height 0.3s ease,
                opacity 0.3s ease,
                margin-bottom 0.3s ease,
                border-color 0.3s ease !important;
}

#Null_toolbar:not(:hover, [customizing]) {
    min-height: 0px !important;
    height: 0px !important;
    max-height: 0px !important;
    border-color: transparent !important;
    opacity: 0 !important;
    margin-bottom: calc(-2*var(--extra_height)) !important;
}

#Null_toolbar::before {
    content:"";
    position: absolute;
    background-color: transparent;
    bottom: 0px;
    left: 0px;
    height: 12px;
    width: 100%;
    z-index: -1 !important;
    -moz-window-dragging: no-drag;
}

#Null_toolbar[customizing] {
    transition: none !important;
}

 `;

  const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
  const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
  sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

})();

Alles anzeigen

Simple Versionen gibt's ja auch schon ein paar in dieser Thread, aber wenn du die aktuelle optimieren willst, hau rein.

Beiträge von Horstmann

Scrollbutton in Lesezeichen-Ordnern und Lesezeichen-Symbolleiste anpassen

Scrollbutton in Lesezeichen-Ordnern und Lesezeichen-Symbolleiste anpassen

Scrollbutton in Lesezeichen-Ordnern und Lesezeichen-Symbolleiste anpassen

Scrollbutton in Lesezeichen-Ordnern und Lesezeichen-Symbolleiste anpassen

Scrollbutton in Lesezeichen-Ordnern und Lesezeichen-Symbolleiste anpassen

Sidebar für FF 146 - Erster Versuch

Scrollbutton in Lesezeichen-Ordnern und Lesezeichen-Symbolleiste anpassen

Scrollbutton in Lesezeichen-Ordnern und Lesezeichen-Symbolleiste anpassen

Scrollbutton in Lesezeichen-Ordnern und Lesezeichen-Symbolleiste anpassen

Sidebar für FF 146 - Erster Versuch

Sidebar für FF 146 - Erster Versuch

Benutzerdefinierte Farbe per Hover zuweisen

Sidebar für FF 146 - Erster Versuch

Sidebar für FF 146 - Erster Versuch

Sidebar für FF 146 - Erster Versuch

Sidebar für FF 146 - Erster Versuch

Second Sidebar right

TabKontextMenü im Nightly

Sidebar für FF 146 - Erster Versuch

Eigene Zusatzleisten