Beiträge von Horstmann

Horstmann

Bei Verläufen fange ich generell mit harten Übergängen an, um zu wissen was wo plaziert ist.
Spiel mal diese Varianten durch, vielleicht hilft das.

CSS

.tabbrowser-tab .tab-background {
    /*
    background-image: radial-gradient(circle, transparent 25%, #ddecab 85%) !important;
    background-image: radial-gradient( transparent 25%, #ddecab 85%) !important;
    background-image: linear-gradient(#ddecab 1%, transparent 50%, #ddecab 99%) !important;
    
    background-image: linear-gradient(#ddecab 1%, transparent 1% 50%, #ddecab 50% 99%) !important;
    background-image: radial-gradient( transparent 25%, #ddecab 25% 85%) !important;
    */
    
    background-image: radial-gradient(circle, transparent 25%, #ddecab 25% 85%) !important;
}

Alles anzeigen

Horstmann

Zitat von Mira_Belle

Brauchst Du was Neues? Ich hätte da eventuell was!
(Ich habe einen Wunsch)

Wenn mich ein Thema fesselt, fessel ich das Thema!
Wenn du einen Thread erstellst, und ich kann mit meinen - wirklich bescheidenen Mitteln aushelfen - mach ich das natürlich gerne.

Horstmann

Zitat von Mira_Belle

background-image: radial-gradient(circle, transparent 25%, #ddecab 85%) !important;
oder
background-image: linear-gradient(#ddecab 1%, transparent 50%, #ddecab 99%) !important;
sollten am ehesten deinem "alten" Beispiel entsprechen.

Bei einem länglichen Element, weshalb circle für den radial-gradient erzwingen, und wieso linear-gradient, was nur quasi bleeding erzeugt, falls der Verlauf soft ist?

Horstmann

Auf lautstarkes Verlangen der schweigenden Mehrheit - ein Update!

Alle eigenen Einstellungen/Anpassungen vom früheren Script können übernommen werden, nur das Verblassen bei 0 ist neu geregelt.
Ein paar Fehler sind korrigiert worden, und die Standard-Farben sollten besser mit Themes funktionieren.
Wie zuvor, sind in der Basiseinstellung keine eigenen Icons oder sonstige Anpassungen nötig.

JavaScript

//bookmark_count.uc.js, RC_5 Rudolf
//Ende Juni 2025
//Zeigt Anzahl der Lesezeichenordner und Links an in Lesezeichenpopups
//RC_5 R: Verblassen bei 0 leichter einstellbar, Fehlerkorrekturen, Standardfarben sollten sich jetzt an Themes anpassen, Aufraeumen
//basiert auf Script von BrokenHeart =>
//https://www.camp-firefox.de/forum/thema/136572-nur-die-anzeige-der-ordner-lesezeichenanzahl-in-einer-anderen-farbe-darstellen/?postID=1269879#post1269879
//Release Candidate 5.R =>
//https://www.camp-firefox.de/forum/thema/136572-nur-die-anzeige-der-ordner-lesezeichenanzahl-in-einer-anderen-farbe-darstellen/?postID=1274447#post1274447

(function() {
    if (!window.gBrowser)
        return;
    setTimeout(function() {
        setFunction();
    },50);

    //Einstellungen Javascript =>
    //Nach Script Aenderungen Neustart mit Start-Cache loeschen => about:support

    //Eigenes Icon erwartet in Profilordner/chrome/icons, icons Ordner falls noetig erstellen
    //Eigene Icons eintragen, falls vorhanden
    let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
    let bm_icon1 = 'YourFolderIcon.svg';        //  Custom  Folder Icon
    let bm_icon2 = 'YourLinkIcon.svg';          //  Custom  Link Icon
    //Variablen zur Auswahl der Icons; kein Auto Fallback falls eigenes Icon nicht vorhanden
    let bm_icon_folder = 0;      //  Ordner: 0 Firefox Fallback Icon / 1 eigenes Icon
    let bm_icon_link = 0;        //  Links:  0 Firefox Fallback Icon / 1 eigenes Icon

    //Variablen zur Auswahl der Klammern
    let bm_bracket = 0;           //  0 keine Klammern / 1 runde Klammern / 2 eckige Klammern
    //Variablen zur Auswahl der Reihenfolge
    let bm_order = 0;             //  0 Icons links Ziffern rechts / 1 Ziffern links Icons rechts

    //Variablen zur Auswahl der Farben
    let bm_colors = 0;            //  0 Standardfarben / 1 eigene Farben benutzen

    //Verblassen bei Zahl = 0
    let bm_opacity_null = 1;      //  0 kein Verblassen / 1 Verblassen Zahl, Icon, Trennlinie / 2 Verblassen nur Zahl

    //Variablen zur Auswahl der Trennlinie
    //  0 ohne Trennlinie
    //  1 ohne Trennlinie / Zaehler #1 = 0 => Zaehler #1 + Icon #2 wird versteckt
    //  2 mit Trennlinie
    //  3 mit Trennlinie nur bei Zaehler #1 > 0 / Zaehler #1 = 0 => Zaehler #1 + Icon #2 wird versteckt
    let trenner = 2;
    //  Trennlinie Inhalt, beliebige Textzeichen
    let trennzeichen = '|';

    function setFunction() {
        const css =`

       /*
       Einstellungen CSS , OPTIONAL =>
       #A Zaehler (Counter) anpassen,
       #B Feinabstimmung allgemein,
       #C Feinabstimmung Zentrierung Trennlinie,
       #D Eigene Farben, Verblassen,
       #E Allgemeines,
       #F Optionale Extras.
       */

       /*** User Einstellungen ***/

       /* ------ A ------ */

       /** Feste Breite der beiden Counter, abhaengig von Anzahl Ziffern, AUTO Anpassung für mit/ohne Klammern.
          Falls noetig => Werte erhoehen NUR bis Icons untereinander auf gleicher Hoehe sind **/

       /* Beispiel: 2 Ziffern plus Klammern, Systemfont Mac */
       #bmContent:is(
       [data-value1^='['],
       [data-value1^='(']) {
          --bm_width_one: 2.1em;
          --bm_width_two: 2.1em;
          }
       /* Beispiel: 2 Ziffern ohne Klammern, Systemfont Mac */
       #bmContent {
          --bm_width_one: 1.3em;
          --bm_width_two: 1.3em;

       /* ------ B ------ */

       /** Abstaende / Groessen fuer die Counter = Basisanpassungen **/

          /* Abstand mittig zwischen Counter #1 <=> Counter #2 / wird x2 benutzt */
          --bm_margin_mid: 8px;

          /* Groesse Icons = 16px Firefox Standard */
          --bm_icon_size: 16px;

          /* Abstand zwischen Icon und Ziffer */
          --bm_space: 4px;
          }

       /* ------ C ------ */

       /** Trennlinie , fuer trenner = 2/3 **/

       /* Feinabstimmung Zentrierung Mitte / Standard = 0px */
       #bmContent.trennclass {
          --bm_divider: 0px;
          }
       /* Fuer Reihenfolge/ Order = 1 */
       #bmContent.trennclass.order_2 {
          --bm_divider: 0.3em;
          }
       /* Element Trennlinie allgemein */
       #trennID {
          display: flex;
          align-items: center;
          font-size: calc(1em - 1px);        /* Hoehe, optional */
          padding-bottom: 1px;               /* ausrichten vertikal, optional */
          color: var(--trenn_color, currentColor);
          }

       /* ------ D ------ */

       /* Eigene Farben, fuer bm_colors = 1 */
       /* Farben Text / kompatible svg Icons aendern , anpassen nach Belieben */
       /* Info: HSL Farben: https://www.w3schools.com/css/css_colors_hsl.asp */
       /* Ordner Icon, Zahl / Links Icon, Zahl / Trennlinie */
       #bmContent.bm_my_colors {
          --folder_fill:  hsl(190, 60%, 20%, 1);
          --folder_color: hsl(190, 20%, 30%, 1);
          --link_fill:    hsl(35, 100%, 20%, 1);
          --link_color:   hsl(35, 60%, 30%, 1);
          --trenn_color:  hsl(250, 60%, 30%, 1);
          }

       /* Grad des Verblassens bei Zahl = 0, fuer bm_opacity_null = 1/2 */
       #bmContent {
          --bm_opacity: 50%;
          }

       /* ------ E ------ */

       /** Counter gesamt **/

       #bmContent {
          display: flex !important;
          -moz-context-properties: fill, fill-opacity;
          margin-left: auto !important;         /* Gesamt rechtsbuendig */
          /*margin-right: -8px !important;*/    /* Abstand rechts zu Pfeil > ist evtl. OS abhaengig, optional */
          height: var(--bm_icon_size);          /* Layout passt sich Icon Groesse an */
          padding-left: 8px;                    /* min. Abstand links Gesamt für enge Popups */

       /* Font Aenderungen , optional */
          /* font-family: Aenderungen nicht empfohlen => einheitlichen Standardfont behalten */
          /*font-size: 12px !important;*/       /* font-size */
          /*font-weight: 200 !important;*/      /* font-weight */
          }

       /* ------ F ------ */

       /** Optionale Extras **/

       /* Text vertikal ausrichten */
       /*
       #bmContent::after,
       #bmContent::before {
          padding-top: 3px;
          }
          */

       /* Pfeil rechts > bei Beidem = 0 */
       .bookmark-item.bm_chevron_00 > .menu-right,
       .bookmark-item.bm_chevron_00::after {
          fill: hsl(30, 100%, 50%, 1) !important;
          fill-opacity: 0.7 !important;
          }

       /* Hide empty Popup */
       .bookmark-item.bm_chevron_00 > menupopup[emptyplacesresult] {
          display: none !important;
          }

       /** Pfeil rechts > allgemein **/
       /*
       menu.bookmark-item .menu-right,
       menu.bookmark-item::after {
           fill: hsl(210, 100%, 50%, 1) !important;
           fill-opacity: 1 !important;
           }
           */

       /*** User Einstellungen Ende ***/


       /*** Feste Werte ***/

       /** Reihenfolge Varianten Icons / Ziffern **/
       /* order 0: Icons links / Ziffern rechts */
       #bmContent {
            --bm_padding_inline: calc(var(--bm_icon_size) + var(--bm_space)) 0;
            --bm_bg_position: center left;
            }
       /* order 1: Ziffern links / Icons rechts */
       #bmContent.order_2 {
            --bm_padding_inline: 0 calc(var(--bm_icon_size) + var(--bm_space));
            --bm_bg_position: center right;
            }

       /** Icons Varianten **/
       /* Eigene Icons, falls Icons existieren im icons Ordner */
       #bmContent {
            --bm_icon_image_1: url("${ProfilePath}/${bm_icon1}");
            --bm_icon_image_2: url("${ProfilePath}/${bm_icon2}");
            }
       /* Firefox Icons Fallback */
       #bmContent.icon_fallback_folder {
            --bm_icon_image_1: url("chrome://global/skin/icons/folder.svg");
            }
       #bmContent.icon_fallback_link {
            --bm_icon_image_2: url("chrome://browser/skin/bookmark-hollow.svg");
            }

       /** Anpassungen bei Zahl = 0 **/
       /* Verstecken #1 automatisch bei Trennlinie 1/3 , beides = 0 */
       #bmContent:is(.trennclass_1, .trennclass_3)::before {
            display: none !important;
            }
       /* Verstecken Icon #2 , Trennlinie 1/3 , beides = 0 */
       #bmContent.Null_1.Null_2:is(.trennclass_1, .trennclass_3)::after {
            /*content: "X";*/             /* eigener Inhalt */
            background-image: linear-gradient(transparent, transparent);
            }
       /* Verblassen Icon + Zahl, fuer #1 , #2 , Alles Zahl = 0 */
       #bmContent.opacity_Null:is(.Null_1:not(.Null_2), .Null_1.Null_2)::before,
       #bmContent.opacity_Null:is(.Null_2:not(.Null_1), .Null_1.Null_2)::after,
       #bmContent.opacity_Null:is(.Null_1, .Null_2) #trennID {
            filter: opacity(var(--bm_opacity));
            }
       /* Verblassen nur Zahl */
       #bmContent.opacity_Null_B:is(.Null_1:not(.Null_2), .Null_1.Null_2)::before {
            -webkit-text-fill-color: color-mix(in srgb, var(--folder_color, currentColor) var(--bm_opacity), transparent) !important;
            }
       #bmContent.opacity_Null_B:is(.Null_2:not(.Null_1), .Null_1.Null_2)::after {
            -webkit-text-fill-color: color-mix(in srgb, var(--link_color, currentColor) var(--bm_opacity), transparent) !important;
            }

       /** Counters (Zaehler) **/
       /* Counter #1 Ordner */
       #bmContent::before {
            content: attr(data-value1);
            display: flex;
            min-width: fit-content;
            width: var(--bm_width_one);
            padding-inline: var(--bm_padding_inline);
            align-items: center;
            justify-content: flex-end;
            margin-right: var(--bm_margin_mid);
            background-image: var(--bm_icon_image_1);
            background-position: var(--bm_bg_position);
            background-repeat: no-repeat;
            background-size: var(--bm_icon_size);
            color: var(--folder_color, currentColor) !important;
            fill: var(--folder_fill, currentColor) !important;
            }
       /* Counter #2 Links */
       #bmContent::after {
            content: attr(data-value2);
            display: flex;
            min-width: fit-content;
            width: var(--bm_width_two);
            padding-inline: var(--bm_padding_inline);
            align-items: center;
            justify-content: flex-end;
            margin-left: calc(var(--bm_margin_mid) - var(--bm_divider, 0px));
            background-image: var(--bm_icon_image_2);
            background-position: var(--bm_bg_position);
            background-repeat: no-repeat;
            background-size: var(--bm_icon_size);
            color: var(--link_color, currentColor) !important;
            fill: var(--link_fill, currentColor) !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);

        let bmbMenu = document.getElementById('bookmarks-menu-button');
        let bookMenu = document.getElementById('bookmarksMenu');
        let persToolBar = document.getElementById('PersonalToolbar');
        if(bmbMenu)
            bmbMenu.addEventListener('popupshowing', onPopupShowing );
        if(bookMenu)-
            bookMenu.addEventListener('popupshowing', onPopupShowing );
        if(persToolBar)
            persToolBar.addEventListener('popupshowing', onPopupShowing );
    }
    function onPopupShowing(aEvent) {
        let popup = aEvent.originalTarget;
        for (let item of popup.children) {
            if (item.localName != 'menu' || item.id?.startsWith('history'))
                continue;
            setTimeout(() => {
              let itemPopup = item.menupopup;
			        itemPopup.hidden = true;
			        itemPopup.collapsed = true;
              itemPopup.openPopup();
              itemPopup.hidePopup();
              let menuitemCount = 0;
              let menuCount = 0;
              for (let subitem of itemPopup.children) {
                if (subitem.classList.contains('bookmark-item') && !subitem.disabled && !subitem.hidden) {
                  if (subitem.localName == 'menuitem') {
                    menuitemCount++;
                  } else if (subitem.localName == 'menu') {
                    menuCount++;
                  }
                }
              }
			        itemPopup.hidden = false;
			        itemPopup.collapsed = false;
              //Eigenes Element für Zaehler
              let bmCounta = item.childNodes[1];
              bmCounta.innerHTML = '';
              let bmVario = document.createElement("bmElement");
              bmVario.id = "bmContent";
              bmCounta.appendChild(bmVario);
              //Zaehler Design Optionen =>  ohne/ mit: runde, eckige Klammern
              if (bm_bracket === 0) {
                  strCountOut1 = '' + menuCount + '';
                  strCountOut2 = '' + menuitemCount + '';
                  }
              if (bm_bracket === 1) {
                  strCountOut1 = '(' + menuCount + ')';
                  strCountOut2 = '(' + menuitemCount + ')';
                  }
              if (bm_bracket === 2) {
                  strCountOut1 = '[' + menuCount + ']';
                  strCountOut2 = '[' + menuitemCount + ']';
                  }
              bmVario.setAttribute('data-value1', strCountOut1);
              bmVario.setAttribute('data-value2', strCountOut2);
              // Trennlinie Element
              let trennelementVario = document.createElement("trennelement");
              trennelementVario.id = "trennID";
              // Trennlinie Varianten
              if (trenner === 2 || trenner === 3 && menuCount !== 0) {
                  bmVario.appendChild(trennelementVario);
                  trennelementVario.textContent = trennzeichen;
                  bmVario.classList.add('trennclass');
                  }
              if (trenner === 3 && menuCount === 0) {
                  bmVario.classList.add('trennclass_3');
                  }
              if (trenner === 1 && menuCount === 0) {
                  bmVario.classList.add('trennclass_1');
                  }
              // Extra class item / ganzes menu fuer 00
              if (menuCount === 0 && menuitemCount === 0) {
                  item.classList.add('bm_chevron_00');
                  } else {
                     item.classList.remove('bm_chevron_00');
                     }
              // Anpassungen fuer 00, #1 = 0, #2 = 0
              if (menuCount === 0) {
                  bmVario.classList.add('Null_1');
                  }
              if (menuitemCount === 0) {
                  bmVario.classList.add('Null_2');
                  }
              // Reihenfolge Varianten Icons / Ziffern
              if (bm_order === 1) {
                  bmVario.classList.add('order_2');
                  }
              // Icons Auswahl
              if (bm_icon_folder === 0) {
                  bmVario.classList.add('icon_fallback_folder');
                  }
              if (bm_icon_link === 0) {
                  bmVario.classList.add('icon_fallback_link');
                  }
              // Farben Auswahl
              if (bm_colors === 1) {
                  bmVario.classList.add('bm_my_colors');
                  }
              // Verblassen bei Anzeige = 0
              if (bm_opacity_null === 1) {
                  bmVario.classList.add('opacity_Null');
                  }
              if (bm_opacity_null === 2) {
                   bmVario.classList.add('opacity_Null_B');
                   }
            }, 100);
        }
    }
})();

Alles anzeigen

Horstmann

Ich kann dir nur empfehlen, zu lernen die Browser Werkzeuge zu benutzen, siehe hier, leicht verständlich, oder hier etwas umfangreicher.
Das erlaubt dir zu sehen, welche Werte wo und wie erzeugt werden.

Ansonsten noch mit einem Testprofil arbeiten, und CSS oder Scripts dort individuell testen.

Und * Selektoren , wenn möglich immer vermeiden.

Horstmann

moonson, Zeile 26 im CSS in deinem #15 könnte Ärger machen, vergleich mal damit.

Horstmann

Zitat von SuperDAU#0815

Ich verwende keinen weiteren Code, der in die "Geometrie" der Leisten etc eingreif

Wie von Mira erwähnt, den ganzen Code sollte man mal sehen.

ZB scheint es als hättest du einige Zeilen/Einträge in den Kontextmenus versteckt - und es gibt tatsächlich mindestens einen Unterschied zw. diesen beiden Kontextmenus, das vertikale ist übrigens der Overflow.

Horstmann

Zitat von SuperDAU#0815

Hallo, wie in #8 erwähnt, quetscht padding-block das Kontext-Menü im vertikalen Teil der LZ-Symbolleiste mehr als es das im horizontalen Bereich tut.

padding-block kann eigentlich nur die Höhe ändern, nicht die Breite.
Und die Höhe soll ja wohl kleiner werden?

Wenn du mehrere Codes für menu/menuitem verwendest, kommen die sich an bestimmten Stellen in die Quere.
Du könntest dein gesamtes CSS posten, mit den Schnipseln lässt sich nicht viel anfangen.
Deine Screenshots sind auch zu stark angeschnitten, den Kontext kann man nicht immer beurteilen.

Die Lesezeichen Symbolleiste ist eine Leiste, da sollten wir mit den Formulierungen genauer sein, evtl. auch eher Breite/Höhe benutzen statt vertikal/horizontal, das wird im CSS in anderen Zusammenhängen eingesetzt.

==> Lesezeichen Symbolleiste: blau.
Dunkel hinterlegtes Element im Kontextpopup: menuitem, die Dinger mit Pfeil sind menu; von mir aus Zeile oder Schaltfläche, aber keine Leisten.

Falls du evtl. auch über die Sidebar redest (2tes Bild, keine Leiste), das müsstest du klarer beschreiben und bebildern.
(Abbildungen aus altem Testprofil Mac).

Horstmann

Zitat von SuperDAU#0815

Das Höhenproblem ist noch ungelöst.
Evtl. gibts da noch Möglichkeiten.

Und evtl. gibt's auch noch viel mehr Code den keiner kennt.

Probier halt mal in deinem Code in #8 den padding-block Wert zu verringern, bis es passt,, scheint ja was zu bewegen.
In ganzen Pixel Schritten; padding-block ist padding oben + padding unten.

Was dann aber alle möglichen Menus betrifft und Pfusch ist; sinnvollerweise hättest du, je nach Bedarf, zB eine CSS Menu Regel(n) für alles komplett, plus Anpassungen für Einzelfälle, wie etwa Kontextmenus, die abhängig vom OS unterschiedlich aufgebaut sein können.

Falls aber dein Code eine Sammlung von über Jahre zusammengebastelten Einzelteilen ist, dann wäre ein Ausmisten und neu Aufbauen anzuraten.

Horstmann

Zitat von Mira_Belle

Und ja, mit max-height konnte ich die "Höhe" anpassen, bzw. verkleinern.

max-height wird allerdings von min-height überschrieben, sofern Letzteres gesetzt ist und einen höheren Wert hat.
Im Code vom OP würde dann max-height unter 20px wohl nichts bewirken.

Zitat von SuperDAU#0815

Edit: Es betrifft hauptsächlich den horizontalen Teil der Leiste.

Evtl. könntest du mal einen Screenshot vom Problem posten, dein Code betrifft nämlich keine Leiste, sondern Einträge im Popup.
Und am besten noch anderen CSS Code den du für #PlacesToolbar , .bookmark-item oder ähnliches benutzt.

Horstmann

Zitat von milupo

.... die Eigenschaft visibility: hidden verwendet. Irgendwie ist mir, dass diese Eigenschaft im Gegensatz zu display: none im Zusammenspiel mit ::before bzw. ::after nicht den Platz für das ersetzende Element freigibt.

Ist schon etwas älter und allgemeiner, aber im Prinzip so etwas.
Wie erwähnt von Sören, hat es nix mit Pseudoelementen zu tun.

Für Animation und Funktionalität gibt's auch die im Link beschriebenen zusätzlichen Unterschiede zw. display, visibility und opacity.
opacity macht zumindest auf meinem System ab und zu Ärger, weil nicht hardware-beschleunigt, aber selten.

Dann noch fill-opacity für kompatible .svg Icons wie Fx Icons, ein paar color-mix() Optionen, das evtl., plus filter: opacity() - für Profis.

Horstmann

Mein Fehler, hatte das Problem missverstanden, sorry.

Horstmann

Zitat von Mr. Cutty
Gerade nach dem Update auf FF 140 gesehen, dass dort nun in einer leeren Adresszeile statt der Weltkugel bei mnir nun dies zu sehen ist:
Die Adressleiste möchte ich nicht für die Suche verwenden.
Bisher verwendete ich das in der userChrome.css für die Weltkugel:
CSS
/* ------------------------------------------------------ */
/* Anderes Icon für die Adressleiste + Deckkraft für Icon */
/* in Adress- und Suchleiste auf .6 geändert              */
/* ------------------------------------------------------ */


#identity-box[pageproxystate="invalid"] {
  & #identity-icon {
  list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg") !important;
  fill-opacity: .6 !important;
}
}

.searchbar-search-icon {
  fill-opacity: .6 !important;
}
Alles anzeigen

Sowas hier, um mal beim Icon zu bleiben, und dem Code von dir?
Könnte evtl. nur an geändertem Nesting liegen.

CSS

#identity-box[pageproxystate="invalid"] #identity-icon {
  list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg") !important;
  fill-opacity: .6 !important;
}

Horstmann

Danke nochmal für die detaillierte Rückmeldung!

2 Dinge:

Meine Normalversion von FX ist zu alt um das im Detail weiter zu verfolgen, da müsste jemand anderes weiterbasteln bei Interesse.
Wusste nicht mal dass es jetzt Separatoren gibt für Toolbars, ausser Lesezeichen.
Oder auf einen Fix von Aris warten, bzw. den Fix von Brokenheart testen.

Zum zweiten könnten bei dir eventuell noch andere Scripts oder CSS in die Quere kommen, die ähnliche Funktionen bzw. optische Anpassungen erzeugen.

Horstmann

Zitat von lenny2

Horstmann
Bislang v140.0rc1
a\ Kein Konflikt mit Unified Extensions Button!
.....
Sie sind nach Aris-t2 die zweite Person, die die vertikale Symbolleiste erstellen konnte!

Das ist mal eine hilfreiche Rückmeldung, vielen Dank!
V.a. die Buttons waren mir wichtig, auch hier schon kurz angesprochen.

Wie erwähnt, das Script hier ist ein ganz grober Test; in dieser Form funktioniert es nur rechts, kann aber recht einfach mit weiteren Optionen versehen werden; viele kosmetische Anpassungen wären auch noch vorzunehmen, etc..

Es ist auch nicht von mir usprünglich, und basiert auf diesem Ansatz.

Noch ein grober Test mit Positionierungsoptionen:

JavaScript

//Toggle newtoolbar 8 test

(function() {

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

        // Eigenes Icon
        let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
        let icon1 = 'newtoolbar.png';
        let ImagePath = ProfilePath + icon1;

        let new_tb_loc = 1;        //  Position: 0 Rechts 1 Links 2 Bottom

        if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
        	Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
        }

        let toolbox_new = document.createXULElement('toolbox');
        toolbox_new.setAttribute('id','toolbox_new');

        const element = document.getElementById("navigator-toolbox");
        const rect = element.getBoundingClientRect();

        let ntb = document.createXULElement('toolbar');
        ntb.id = 'newtoolbar';
        ntb.setAttribute('customizable', true);
        ntb.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
        ntb.setAttribute('mode', 'icons');
        ntb.setAttribute('context', 'toolbar-context-menu');

	      toolbox_new.appendChild(ntb);

        //Geht
        document.getElementById('navigator-toolbox').appendChild(toolbox_new);
        //Geht
        //document.getElementById('nav-bar').appendChild(toolbox_new);

        //geht height #2 not dynamic ???
        document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.height + 'px');

        CustomizableUI.registerArea('newtoolbar', {legacy: true});
        CustomizableUI.registerToolbarNode(ntb);

   try {
        CustomizableUI.createWidget({
            id: 'NewToolbar_button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
                onBuild: function(aDocument) {
                    let toolbaritem = aDocument.createXULElement('toolbarbutton');
                    let props = {
                        id: 'NewToolbar_button',
                        class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                        removable: true,
                        label: 'Toggle New Toolbar',
                        tooltiptext: 'Toggle New toolbar',
                    };

                    for(let p in props)
                        toolbaritem.setAttribute(p, props[p]);
                    return toolbaritem;
                }
        });
    } catch(e) { };

    // Position
    if (new_tb_loc === 1) {
         toolbox_new.classList.add("left_mode");
         browser.classList.add("left_mode_b");
       }
    if (new_tb_loc === 2) {
         toolbox_new.classList.add("bottom_mode");
         browser.classList.add("bottom_mode_b");
       }

    // button
    document.getElementById('NewToolbar_button').addEventListener( "click", newTB );
        function newTB(aEvent, keyEvent=false) {
        if(!keyEvent && aEvent.button != 0) {
            return;
        }
        newtoolbar.classList.toggle("off-mode");
        browser.classList.toggle("off-mode_b");
        }

const css =`

:root {
    --ug-newbar_width: 42px;
    --ug-newbar_bg_color: lightblue;
}

#NewToolbar_button .toolbarbutton-icon {
    list-style-image: url("chrome://browser/skin/sidebars-right.svg") !important;
    /*list-style-image: url("${ImagePath}") !important;*/
}

#navigator-toolbox {
    z-index: 444 !important;
}
/*
#nav-bar {
    z-index: 4 !important;
}
*/

#browser {
    transition: padding 0.5s ease !important;
}

#newtoolbar .toolbarbutton-1 {
    margin-block: 2px !important;
}

/*
#newtoolbar .toolbarbutton-1 image {
    outline: 1px solid red !important;
}
#sidebar-box {
    outline: 4px solid red !important;
    outline-offset: -2px !important;
}
*/


/*  Basis / Right */

#browser:not(.off-mode_b) {
    padding-right: var(--ug-newbar_width) !important;
}
#toolbox_new {
    position: fixed;
    display: flex;
    flex-direction: column;
    width: var(--ug-newbar_width);
    bottom: 0;
    right: 0;
}
#newtoolbar {
    display: flex;
    flex-direction: column;
    /*z-index: 4 !important;*/
    width: var(--ug-newbar_width);
    padding-block: 8px;
    height: calc(100vh - var(--height_newbar));
    background-color: var(--ug-newbar_bg_color) !important;
    box-shadow: -1px 0 grey;
    border-top: 1px solid grey;
    transition: width 0.5s ease, margin 0.5s ease, height 0.5s ease;
}
#newtoolbar:not([customizing]).off-mode {
    margin-inline: 0 calc(0px - var(--ug-newbar_width));
    box-shadow: none;
}


/*  Left  */

#browser:not(.off-mode_b).left_mode_b {
    padding-inline: var(--ug-newbar_width) 0 !important;
}
#toolbox_new.left_mode {
    left: 0;
}
.left_mode #newtoolbar {
    box-shadow: 1px 0 grey;
}
.left_mode #newtoolbar:not([customizing]).off-mode {
    margin-inline: calc(0px - var(--ug-newbar_width)) 0;
}


/*  Bottom  */

#browser:not(.off-mode_b).bottom_mode_b {
    padding-inline: 0 !important;
    padding-bottom: var(--ug-newbar_width) !important;
}
#toolbox_new.bottom_mode {
    flex-direction: row !important;
    width: 100vw;
}
.bottom_mode #newtoolbar {
    flex-direction: row !important;
    height: var(--ug-newbar_width);
    width: 100vw;
    padding-block: 0;
    padding-inline: 8px;
    box-shadow: 0 -1px grey;
    border: none;
}
.bottom_mode #newtoolbar:not([customizing]).off-mode {
    margin-inline: 0;
    margin-block: 0 calc(0px - var(--ug-newbar_width)) !important;
}
.bottom_mode #newtoolbar .toolbarbutton-1 {
    margin-inline: 2px !important;
}


/*  customizing  */

#newtoolbar[customizing] {
    min-width: 0 !important;
    width: fit-content !important;
}
.bottom_mode #newtoolbar[customizing] {
    width: 100vw !important;
}

#customization-container {
    margin-inline: 0 var(--ug-newbar_width) !important;
}
#browser.left_mode_b + #customization-container {
    margin-inline: var(--ug-newbar_width) 0 !important;
}
#browser.bottom_mode_b + #customization-container {
    margin-inline: 0 !important;
    margin-bottom: var(--ug-newbar_width) !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

Horstmann

Zitat von lenny2

Alle zusätzlichen Toolbars aus Aris-t2 scheinen in v140.0rc1 Probleme zu haben.
.........
Alle Toolbars außer addonbar_vertical.uc.js haben Probleme mit der Ausführung einiger eingebauter Firefox-Funktionen.

Würde mich immer noch interessieren, ob sowas hier die Button Probleme evtl. zumindest teilweise löst, falls es im Nightly überhaupt funktioniert:
(Sehr grobe Test Datei!).

JavaScript

//Toggle newtoolbar 7D_b rechts nav-bar test 14

(function() {

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

        if (Services.prefs.getBoolPref('svg.context-properties.content.enabled') == false) {
        	Services.prefs.setBoolPref('svg.context-properties.content.enabled', true );
        }

        let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
        let icon1 = 'YourFolderIcon.svg';

        let ImagePath = ProfilePath + icon1;

        let toolbox_new = document.createXULElement('toolbox');
        //toolbox_new.setAttribute('orient','horizontal');
        toolbox_new.setAttribute('id','toolbox_new');

        const element = document.getElementById("navigator-toolbox");
        const rect = element.getBoundingClientRect();
        //console.log("Width: " + rect.width + "px");
        //console.log("Height: " + rect.height + "px");

        let tb = document.createXULElement('toolbar');
        //let tb_label = "New Toolbar";
        tb.id = 'newtoolbar';

        //tb.setAttribute("collapsed", "false");
        tb.setAttribute('customizable', true);
        tb.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
        //tb.setAttribute('orient', 'horizontal');
        tb.setAttribute('orient', 'vertical');
        tb.setAttribute('mode', 'icons');
        tb.setAttribute('context', 'toolbar-context-menu');
        //tb.setAttribute("toolbarname", tb_label);
        //tb.setAttribute("label", tb_label);

	      toolbox_new.appendChild(tb);

        //Geht
        document.getElementById('navigator-toolbox').appendChild(toolbox_new);

        //Geht
        //document.getElementById('nav-bar').appendChild(toolbox_new);

        //geht #2
        document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.height + 'px');

        CustomizableUI.registerArea('newtoolbar', {legacy: true});
        CustomizableUI.registerToolbarNode(tb);

   try {
        CustomizableUI.createWidget({
            id: 'NewToolbar_button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
                onBuild: function(aDocument) {
                    let currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
                    let buttonicon = "newtoolbar.png"
                    let toolbaritem = aDocument.createXULElement('toolbarbutton');
                    let props = {
                        id: 'NewToolbar_button',
                        class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                        removable: true,
                        label: 'Toggle New Toolbar',
                        tooltiptext: 'Toggle New toolbar',
                        //style: 'list-style-image: url("' + ("file:" + currentProfileDirectory + "/chrome/icons/" + buttonicon) + '");',
                        //style: 'list-style-image: url("chrome://browser/skin/sidebars-right.svg");',
                    };

                    for(let p in props)
                        toolbaritem.setAttribute(p, props[p]);
                    return toolbaritem;
                }
        });
    } catch(e) { };

    document.getElementById('NewToolbar_button').addEventListener( "click", newTB );
        function newTB(aEvent, keyEvent=false) {
        if(!keyEvent && aEvent.button != 0) {
            return;
        }
        newtoolbar.classList.toggle("off-mode");
        browser.classList.toggle("off-mode_b");

 };

const css =`

:root {
    --ug-newbar_width: 44px;
    --ug-newbar_bg_color: lightblue;
}

#navigator-toolbox {
    z-index: 444 !important;
}

/*
#nav-bar {
    z-index: 4 !important;
}
*/

#browser:not(.off-mode_b) {
    padding-right: var(--ug-newbar_width) !important;
}
#browser {
    transition: padding 0.5s ease !important;
}

#toolbox_new {
    position: fixed;
    display: flex;
    flex-direction: column;
    bottom: 0;
    /*left: 0;*/
    right: 0;
}

#newtoolbar {
    display: flex;
    z-index: 4 !important;
    width: var(--ug-newbar_width);
    padding-block: 8px;
    height: calc(100vh - var(--height_newbar));
    background-color: var(--ug-newbar_bg_color) !important;
    box-shadow: -1px 0 grey;
    border-top: 1px solid grey;
    transition: width 0.5s ease, margin 0.5s ease;
}

#newtoolbar:not([customizing]).off-mode {
    margin-inline: 0 calc(0px - var(--ug-newbar_width));
    box-shadow: none;
}

#newtoolbar .toolbarbutton-1 {
    margin-block: 2px !important;
    margin-inline: auto !important;
}

#NewToolbar_button .toolbarbutton-icon {
    list-style-image: url("chrome://browser/skin/sidebars-right.svg") !important;
}

#newtoolbar[customizing] {
    min-width: 0 !important;
}

#customization-container {
    margin-inline: 0 var(--ug-newbar_width) !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

Horstmann

Zitat von Speravir

Ich hab diesen Code (2 Zeilen) jedenfalls schon länger deaktiviert.
..........
Ich bin mir da nicht so sicher. Ich habe Aris öfter auf hiesige Beiträge und Diskussionen hingewiesen und er schien bis dahin nichts davon bemerkt zu haben … Und eben habe ich dasselbe für diese Diskussion gemacht.

Nur 2 Zeilen?
Aber unabhängig davon, Zusatzleisten sind halt oft etwas empfindlich - und wirklich zickig war ja schon immer der Extensions Button.
Hiesig war das generelle Thema kurz neu angeschnitten, aber nicht weiter verfolgt worden.

Danke dafür wieder mal die Frage im relevanten Github aufzuwerfen.

Horstmann

Nur zur Klarstellung: das Problem tritt auch dann auf, wenn der Unified Extensions Button nicht in der zusätzlichen Toolbar sitzt, sondern in der normalen Navbar, so wie es auch aussieht im Screenshot?

Falls ja, würde ich mal probieren, ab Zeile 358 den Code für fix for downloads button on add-on bar rauszunehmen; und dann am besten hier mal reinschauen, oder dort eine neue Issue eröffnen.

Horstmann

Zitat von Endor

Klammer weg und nun geht es auch.
Darf ich das bei mir auf Github hoch laden?

Darfst du?
Wenn du etwas für gut genug hältst, lad hoch!

Bei der Gelegenheit, und weil es nicht für selbstverständlich gehalten werden sollte: herzlichen Dank für deine unermüdlichen Bemühungen; was du in deiner Repo zusammen gestellt hast und unterhältst, ist nicht nur für mich seit Jahren eine unbezahlbare Quelle!

Horstmann

Zitat von Endor

Nur eine Frage
wo im Script kann ich die Farbe des Textes der Ordneranzahl ändern.

Habe es hier probiert, Absatz D ab Zeile 109, da wirkt es nur für die Lesezeichen.

Code

       /* D */
       /* Farben Text / svg! Icons aendern , anpassen nach Belieben */
       /* Info: HSL Farben: https://www.w3schools.com/css/css_colors_hsl.asp */
       /* Ordner Icon, Zahl / Links Icon, Zahl / Trennlinie */
       #bmContent.bm_my_colors {
          --folder_fill:  hsl(0, 100%, 50%, 1));
          --folder_color: hsl(0, 100%, 50%, 1));
          --link_fill:    hsl(0, 100%, 50%, 1);
          --link_color:   hsl(0, 100%, 50%, 1);
          --trenn_color:  hsl(250, 60%, 30%, 1);

Bei --folder_fill und --folder_color hast du zwei )) Klammern am Ende des HSL Codes, sollte nur eine sein jeweils.

Oder schreib einfach red statt hsl(0, 100%, 50%, 1), HSL ist nicht nötig, mag ich selber nur lieber.

Beiträge von Horstmann

„Tab neu laden per Doppelklick“ auf den Tabreiter funktioniert nicht mehr

Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen

„Tab neu laden per Doppelklick“ auf den Tabreiter funktioniert nicht mehr

Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen

individueller Abstand in Lesenzeichensymbolleiste-Kontextmenü seit Fx140 geändert

„Tab neu laden per Doppelklick“ auf den Tabreiter funktioniert nicht mehr

individueller Abstand in Lesenzeichensymbolleiste-Kontextmenü seit Fx140 geändert

individueller Abstand in Lesenzeichensymbolleiste-Kontextmenü seit Fx140 geändert

individueller Abstand in Lesenzeichensymbolleiste-Kontextmenü seit Fx140 geändert

individueller Abstand in Lesenzeichensymbolleiste-Kontextmenü seit Fx140 geändert

Adressleiste mit Suchfunktion statt mit Weltkugel

Adressleiste mit Suchfunktion statt mit Weltkugel

Adressleiste mit Suchfunktion statt mit Weltkugel

v140.0rc1 Konflikt mit dem Skript addonbar_vertical.uc.js von Aris-t2

v140.0rc1 Konflikt mit dem Skript addonbar_vertical.uc.js von Aris-t2

v140.0rc1 Konflikt mit dem Skript addonbar_vertical.uc.js von Aris-t2

v140.0rc1 Konflikt mit dem Skript addonbar_vertical.uc.js von Aris-t2

v140.0rc1 Konflikt mit dem Skript addonbar_vertical.uc.js von Aris-t2

Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen

Nur die Anzeige der Ordner/Lesezeichenanzahl in einer anderen Farbe darstellen