Beiträge von Horstmann

Horstmann

Zitat von 2002Andreas

Zitat von nierewa

Den Eintrag Weitere Lesezeichen gibt es bei mir nicht.

Ohne den Eintrag funktioniert das Skript aus Beitrag Nr.1 hier ohne Probleme.
Mit dem Eintrag muss ich die Änderung in dem Skript machen.

Moment, hier hast Du das Skript aus der ersten Post aber erfolgreich am Laufen - mit aktivierten Weitere Lesezeichen .

Zitat von Mira_Belle

Zitat von nierewa

Den Eintrag Weitere Lesezeichen gibt es bei mir nicht.
Den hatte ich bereits aus der Lesezeichensymbolleite gelöscht.

Du nutzt weiteren CSS-Code?
Oder wie ist das zu verstehen?

Gute Frage !

Horstmann

Zitat von nierewa

Was mir jetzt aufgefallen ist, die Leiste ist doch nicht ganz leer.
Ganz am rechten Rand sieht man dieses: >> und wenn man da drauf klickt kommen alle Lesezeichen.
Es scheint also so, als würde nur etwas vor allen richtigen Lesezeichen eingefügt:

Aha, also doch .

Das ist der Overflow, wie oben schon erwähnt .

Aber eigentlich sollten vor dem Overflow Button alle Lesezeichen die in die Leiste passen angezeigt werden, und nur der Rest in diesem Überhangfenster angelegt werden .

Bei mir funktioniert Dein Skript in einem sonst leeren Profil problemlos, auch wenn ich die Lesezeichenleiste vollpacke bis sie überläuft .

Das ist in FF 108.01 ( Mac ) .

Horstmann

Zitat von 2002Andreas

Zitat von Stoiker

Danke fürs testen

Gehört hier im Forum zum Service

Bei Gelegenheit .

Horstmann

Zitat von nierewa

Mir ist gerade aufgefallen, dass der Button "Toggle Bookmartoolbar" bei nir nicht funktioniert

Hmm, schwieriger Kunde ; hast Du schon mal über about:support den Start Cache gelöscht ?

Wenn ein Theme oder userChrome.css benutzt wird, vielleicht mal ohne probieren ?

Und wenn die offene Lesezeichenleiste leer ist, ist sie komplett leer, ohne irgendwelche Buttons oder Icons ?

Horstmann

Zitat von nierewa

Die Leiste ist beim Start erst mal ausgeblendet. Wenn ich sie brauche drücke ich eben AltGr+l
Das funktioniert auch so weit. Doch seit kurzem ist die Lesezeichensymbolleiste leer.
Ich muß erst über Ansicht -> Symbolleisten -> Lesezeichen-Symbolleiste von "Immer anzeigen" auf "Nie anzeigen" stellen und wieder zurück.
Dann werden die Lesezeichen in der Symbolleiste wieder angezeigt.
Weiß jemand wo der Fehler liegt und wie ich das script ändern muß, wenn es denn daran liegt?

Dieses Verhalten mit dem Script kenne ich eigentlich nur, wenn man FF startet und Lesezeichen-Symbolleiste beim Start auf Nie anzeigen steht .

Oder auch wenn man im Betrieb auf Nie anzeigen wechselt und wieder zurück, also genau anders herum als Du es beschreibst .

Das Script funktioniert ( bei mir ) eigentlich nur, wenn Lesezeichen-Symbolleiste dauerhaft auf Immer anzeigen steht .

Bei leerer Lesezeichenleiste, siehst Du dann einen Text , sowas wie Lesezeichen hier ablegen oder etwas in der Art, oder ?

Horstmann

Zitat von Mira_Belle
Zitat von Mira_Belle

Besteht die Möglichkeit, diesen CSS-Code irgendwie in dem Script unter zubekommen?

Des Rätsels Lösung:
JavaScript
    document.getElementById('PersonalToolbar').style.minHeight = '0';

Freut mich dass es klappt .

Nur eines mit Deiner min-heightt im Script statt CSS :

Damit wird beim Verwenden einer transition beim Öffnen von FF diese Animation abgespielt .

D.h. trotz geschlossener Lesezeichenleiste als Anfangszustand im Script, wird FF mit offener Leiste gestartet, und die Leiste schliesst sich dann aber selbstständig und sofort entprechend der Animation .

Kannst mal testen mit z.B. :

CSS

#PersonalToolbar {
    transition: all 0.5s ease !important;
}

Ich selber wollte unbedingt die Animation , das ein Mitgrund für die Übung, aber ohne die scheint es keinen Unterschied zu machen .

Gleiches Problem wenn ich beides ins Script packe statt in CSS, etwas so :

JavaScript

PersonalToolbar.style.setProperty('min-height', '0', 'important' );    
PersonalToolbar.style.setProperty('transition', 'all 0.5s steps(6, end)', 'important' );

Und damit Sören nicht moppert , es scheint auch alternativ zu deinem Code das zu reichen :

JavaScript

PersonalToolbar.style.minHeight = '0';

Horstmann

Zitat von Mira_Belle

Leiste ist immer sichtbar!
Beim Start "breit", nach klick auf Symbol etwas "schmaler".
Bei weiterem klick auf das Symbol wieder "breit".

Es kann auch sein dass nur ein CSS Eintrag fehlt, dann passiert was Du beschreibst auch :

CSS

#PersonalToolbar {
    min-height: 0 !important;
}

Horstmann

Zitat von Mira_Belle

Leiste ist immer sichtbar!
Beim Start "breit", nach klick auf Symbol etwas "schmaler".
Bei weiterem klick auf das Symbol wieder "breit".
Bekomme das mit ...

Zitat von Horstmann

... mit style.visibility mit zB style.height und Pixelwerten arbeitet , ...

... einfach nicht auf die Kette.
Kann mir bitte jemand aufzeigen, wo genau der Fehler liegt?

Alles anzeigen

Das ursprüngliche Script von Brokenheart - hier - hatte ich zum Testen mal so auf height Funktion umgestellt, und funktioniert bei mir auch .

Die Einträge fürs Icon müsstest Du für dich anpassen bzw aus Deinem Script übernehmen , und die Pixelwerte nach Wusch ändern .

JavaScript

// JavaScript Document
//Button_PersonalToolbar.uc.js

(function ptbut() {
    
            
    if (location != 'chrome://browser/content/browser.xul' && location != 'chrome://browser/content/browser.xhtml')
       return;

const startHeight = '0px'; //'0px' oder '24px' Hoehe Leiste

    let autoCloseTime = 8000; // 0 = kein Auto-Close / >0 Zeit in Millisekunden
        
    let intervalID = 0;

   try {
        CustomizableUI.createWidget({
            id: 'PersonalToolbar-button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
                onBuild: function(aDocument) {
                    var toolbaritem = aDocument.createXULElement('toolbarbutton');
                    var currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
                    var buttonicon = "toolbar.png"
                    var props = {
                        id: 'PersonalToolbar-button',
                        class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                        removable: true,
                        label: 'Toggle',
                        tooltiptext: 'Toggle Bookmarktoolbar',
                        style: 'list-style-image: url("' + ("file:" + currentProfileDirectory + "/chrome/icons/" + buttonicon) +'");',
                    };
                    
                    for(var p in props)
                        toolbaritem.setAttribute(p, props[p]);
                    return toolbaritem;
                    
                }
        });
    } catch(e) { };

   if( startHeight === '24px' || startHeight === '0px' ) {
        document.getElementById('PersonalToolbar').style.height = startHeight;
   }
    else {
        document.getElementById('PersonalToolbar').style.height = '24px';
    }

document.getElementById('PersonalToolbar-button').addEventListener( "click", onClick );
    
document.addEventListener('keydown', (event) => {
        var keyName = event.key;

       // Mac : Funktion wird ausgeführt, wenn Cmd + < gedrückt wird
        if (event.metaKey && keyName == '<') {
           onClick(event);        
        }
    }, false
);

    function onClick(aEvent) {

        var d2 = document.getElementById('PersonalToolbar');
        
        if (d2.style.height == "") {
            d2.style.height = "0px";
        } else if (d2.style.height == "24px") {
            d2.style.height = "0px";
        } else if (d2.style.height == "0px") {
            d2.style.height = "24px";
            if(!intervalID && autoCloseTime) {
                intervalID =  aEvent.target.ownerGlobal.setInterval( autoClose, autoCloseTime ); 
            }
        }
      }
      
    function autoClose() {
        if( intervalID ) {
            let d2 = document.getElementById('PersonalToolbar');
            if( d2.style.height == "24px") {
                d2.style.height = "0px";
                clearInterval(intervalID); 
                intervalID=0;
            }
        }
    }

})();

Alles anzeigen

In der CSS braucht's dazu noch :

CSS

#PersonalToolbar {
    min-height: 0 !important;
}

Horstmann

Zitat von Speravir
Ein Ansatz wäre, toolbaritem statt toolbarbutton in die Regel zu setzen. Aber ich wollte nur auf diesen neuen Umstand hinweisen. Ich schrieb doch, dass ich mir die Stile nicht näher angesehen habe.
Alternativ nimmt man einen Klassennamen (toolbaritem könnte zu allgemein sein), wie es visoer gemacht hat:

Zitat von visoer

#nav-bar .toolbaritem-combined-buttons.unified-extensions-item.chromeclass-toolbar-additional {

Eine Klasse sollte aber völlig ausreichen. Bei mir sieht es so aus:
CSS
/* Symbole enger zusammen */
#nav-bar .toolbaritem-combined-buttons {
  margin-inline: -2px !important;
}
Das ist ein Abwandlung der Originalregel, die auf alle Toolbars wirkt und einen zusätzlichen Abstand von 2px vorschreibt.

Beides spricht bei mir nur Extension Buttons an, in einem sonst blanken Profil, und hat keine Auswirkungen auf die restlichen Buttons in der Navbar .

Sind da evtl. noch andere CSS Regeln mit im Spiel ?

Ebenfalls im blanke Profil probiert, wäre hier noch ein Vorschlag für Separatoren mit dem ::after Dingens ; das scheint alle Buttons abzudecken die ich finden konnte , bitte mal testen .

Mit den auskommentierten margins kann man noch spielen .

CSS

#nav-bar toolbarbutton:not(.unified-extensions-item-action, #PanelUI-menu-button)::after, toolbaritem.unified-extensions-item::after {
   content: "|" !important;
   display: flex !important;
   color: red !important;
   /*margin-left: -3px !important; 
   margin-right: -4px !important;
   margin-inline: 0px !important;*/
}


#nav-bar toolbarbutton:not(.unified-extensions-item-action, #PanelUI-menu-button), toolbaritem.unified-extensions-item {
  padding-inline: 0px !important;
  margin-inline: 0px !important;
}

#nav-bar {
  padding-inline: var(--toolbarbutton-outer-padding) !important;
}

Alles anzeigen

Horstmann

Zitat von 2002Andreas

Vorweg, danke für den Gegentest.
Es ging mir mehr um den Vergleich der Abstände, ob sie auch so weit auseinander liegen wie bei Barbara auf ihrem Screenshot.
Mit deinem Code sind sie so wie auf meinen Screenshots zu sehen ist.
Also nicht die weiten Abstände.
Dann weiß ich es auch nicht, an was es liegen könnte

Immer ein Vergnügen, wenn ich mal was beitragen kann .

Die 'weiten' Abstände sehe ich eigentlich auch mit keinem der CSS Codes von oben - sehe sie allerdings schon in einem komplett unveränderten 108.1er Profil ( dann natürlich ohne Trenner ) , was ja aber normal ist .

Daher die Vermutung dass da bei Barbara immer noch was am Laufen ist das querschlägt .

Eine kurze, grobe Test CSS noch dazu, Erweiterungen sind dabei halbwegs mit berücksichtigt, vielleicht hilft's ja jemand :

CSS

#nav-bar toolbarbutton > .toolbarbutton-icon, #nav-bar .unified-extensions-item-action {
    box-shadow: 1px 0px 0px rgba(255, 0, 0, 1) !important;
}

#nav-bar toolbarbutton, #nav-bar .toolbarbutton-1 {
  padding-left: 0 !important;
}

Horstmann

Zitat von 2002Andreas

//
Es wäre ja sehr freundlich, wenn andere User den Code auch mal testen würden.
Nicht das es an mir liegt, und ich etwas übersehen habe

Getestet, und den Code für schlecht befunden .

Sogar in Deinen Screenshots sieht man dass die Separatoren teils gar nicht auftauchen, oder teils nicht sauber an beiden Button Enden anliegen .

Man könnte sowas probieren :

CSS

#nav-bar toolbarbutton::after {
   content: "|" !important;
   display: flex !important;
   color: red !important;
   margin-left: -3px !important; 
   margin-right: -4px !important;
  }
  

#nav-bar .toolbarbutton-1 {
   --toolbarbutton-outer-padding: 0px !important;
}

Alles anzeigen

Oder nur mit den margin Werten im ersten Teil rumspielen, und den 2ten Teil mit dem padding weglassen .

Die Buttons lassen sich so eigentlich recht beliebig zwischen den und über die Separatoren verschieben .

So oder so ist es nicht perfekt, v.a. Separatoren für die Extension Buttons werden gar nicht oder nicht sauber dargestellt , was evtl. mit 108 zusammenhängt ; und was ausgehend von der OP der eigentliche Grund für die Anpassungsarie sein könnte .

Dazu gibt es noch unerwünschte Quasi-Separatoren im Bibliothek-Button Popup .

Horstmann

Zitat von BarbaraZ-

Es funkt kein anderer Code dazwischen. Das war das erste, was ich ausprobiert hatte, alle Codes zu deaktivieren. Nur mit diesem Code klappt es auch nicht. Vor allem, weil ich diese Unstimmigkeit vor dem Update nicht hatte.

Ohne irgendein Script oder eigenes CSS zu verwenden, ist das Problem auch da ?

Falls nicht, könnte es sein dass alle Codes deaktivieren vielleicht nicht ganz geklappt hat ?

Horstmann

Zitat von Mira_Belle

Schon komisch!
Woran es gelegen hat, ....
Hatte einige Lesezeichen auf der Leiste und davon waren viele in dem "Überhangmenü".
All jene habe ich nun in einen anderen Ordner verschoben und siehe da, die Leiste funktioniert genauso wie sie soll.
Ob es an den "unsichtbaren" Trennlinien" liegt? Wenn ich mal Muße habe, gehe ich der Sache auf den Grund.

Screenshots würden schon helfen in so einem Fall , und evtl. die CSS für deine Lesezeichenleiste ; so ist das alles nicht ganz nachvollziehbar .

Mit 108 haben sich ein paar mehr Dinge als üblich verändert ; habe auch gerade den Lesezeichen Overflow Button in einem Testprofil anpassen müssen, weil sich die Einbindung von dem Ding geändert hat .

Meine eigene Version vom Script funktioniert allerdings weiterhin ohne Probleme .

Die neue Eieruhr Variante hatte ich auch mal getestet, ist aber sofort rausgeflogen - unglaublich irritierend .

Horstmann

Zitat von Sören Hentzschel
Probier es damit:
JavaScript
document.getElementById('customizationui-widget-panel').classList.toggle('wider-cui');

Nochmal Dankeschön Sören , aufgrund von deinem Hinweis hat's jetzt geklappt .

Letztendlich musste ich nur statt customizationui-widget-panel das übergeordnete Element(?) benutzen, was nav-bar ist .

Ich vermute customizationui-widget-panel existiert quasi nicht vor dem Öffnen des Popup Panels, und kann deswegen nicht angesprochen werden, deshalb wohl auch der Error .

Damit sind jetzt die Positionen der Popups für (hoffentlich) alle möglichen Buttons in meiner vertikalen Lesezeichenleiste an die veränderbare Breite der Leiste angepasst .

Das funktionierende Script sieht jetzt so aus :

JavaScript

//Toggle PersonalToolbar + Browser + Popups Test

(function ptbut() {
    
            
    if (location != 'chrome://browser/content/browser.xul' && location != 'chrome://browser/content/browser.xhtml')
       return;

    try {
        CustomizableUI.createWidget({
            id: 'PersonalToolbar-button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
                onBuild: function(aDocument) {
                    var toolbaritem = aDocument.createXULElement('toolbarbutton');
                    var props = {
                        id: 'PersonalToolbar-button',
                        class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                        removable: true,
                        label: 'Toggle Bookmarks',
                        tooltiptext: 'Toggle Bookmarktoolbar',
                    };
               
                    for(var p in props)
                        toolbaritem.setAttribute(p, props[p]);
                    return toolbaritem;
                    
                }
        });
    } catch(e) { };


document.getElementById('PersonalToolbar-button').addEventListener( "click", onClick );
    
document.addEventListener('keydown', (event) => {
        var keyName = event.key;

        // Mac keyboard shortcut German Cmd + < 
        if (event.metaKey && keyName == '<') {
           onClick(event);        
        }
    }, false
);
    function onClick(aEvent) {

        PersonalToolbar.classList.toggle("wide-mode");
        browser.classList.toggle("margin");
        document.getElementById('nav-bar').classList.toggle('wider-cui');

     }
})();

Alles anzeigen

Die entsprechend korrigierte CSS wäre dann diese :

CSS

@-moz-document url(chrome://browser/content/browser.xhtml) {


/***  Adjust Widths , Margins custom  ***/

:root:not([inDOMFullscreen]) {
    --uc-toggle-narrow: 40px;
    --uc-toggle-wide: 130px;
}

#PersonalToolbar:not([customizing]) {
    position: fixed;
    display: flex;
    flex-direction: column;
    left: 0;
    min-width: 0px !important;
    width: var(--uc-personalbar-width);
    height: 100vh;
    max-height: 100vh !important; 
    transition: all 0.4s ease !important;
}

:root:not([chromehidden~="toolbar"]):not([customizing]) body > #browser,
:root:not([chromehidden~="toolbar"]):not([customizing]) body > #browser-bottombox,
:root:not([chromehidden~="toolbar"]):not([customizing]) #customization-container {
    margin-left: var(--uc-personalbar-width);
    transition: all 0.4s ease !important;
}




/**  Toggle narrow / wide / flip for startup state **/

#PersonalToolbar, #browser {
    --uc-personalbar-width: var(--uc-toggle-narrow) !important;
}

#PersonalToolbar.wide-mode, #browser.margin {
    --uc-personalbar-width: var(--uc-toggle-wide) !important;
}

#nav-bar {
    --uc-personalbar-width: var(--uc-toggle-narrow) !important;

}

#nav-bar.wider-cui {
    --uc-personalbar-width: var(--uc-toggle-wide) !important;

}

/*  Popups position  */

#PlacesToolbarItems > .bookmark-item >  menupopup, #OtherBookmarks #OtherBookmarksPopup {
    margin-inline-start: calc(var(--uc-personalbar-width) - 8px) !important;
    margin-top: -25px  !important;
}


#PersonalToolbar .cui-widget-panel {
    margin-right: calc(var(--uc-personalbar-width) - 8px) !important;
    margin-top: -25px  !important;
}

#nav-bar #customizationui-widget-panel.bookmarks-toolbar {
    margin-right: calc(var(--uc-personalbar-width) - 13px) !important;
    margin-top: -21px  !important;
    transition: all 0.4s ease !important;
}


/**  Bookmarks Toggle button **/

#PersonalToolbar-button .toolbarbutton-icon {
    list-style-image: url("toolbar.png") !important;
}

/*  Bookmarks vertical  */

#personal-bookmarks {
    overflow-y: auto; scrollbar-width: none;
}

#PersonalToolbar >  #personal-bookmarks > #PlacesToolbar > hbox {
     -moz-box-orient: vertical !important;
}

#PersonalToolbar #PlacesToolbarItems {
    display: flex;
    flex-direction: column;
}


/*  Extra buttons adjustments  */

#PersonalToolbar > .toolbarbutton-1 {
    padding-block: 4px !important;
}

#PersonalToolbar > .toolbarbutton-1 > .toolbarbutton-text {
    display: -moz-box !important;
    visibility: hidden !important;
    text-align: start !important;
}

/*  Bookmarks adjustments  */

#PersonalToolbar #PlacesToolbarItems > .bookmark-item {
    padding-block: 4px !important;
}

/*  Bookmarks text left  */

#PlacesToolbarItems > .bookmark-item > .toolbarbutton-text {
    text-align: start !important;
    padding-left: 6px !important;
}

/*  Separator adjust Seite  */

#PlacesToolbarItems > toolbarseparator {
    margin-inline: 5px 7px !important;
}

}

Alles anzeigen

Horstmann

Zitat von Sören Hentzschel

Hallo,

Das kann technisch überhaupt nicht funktionieren, da ein - in einem Variablen-Namen nicht möglich ist. Das siehst du ja auch in der Fehlermeldung, dass davon nur customizationui übrig bleibt und bemängelt wird, dass das nicht definiert ist.
Probier es damit:

Vielen Dank Sören, damit tut sich was ; ich bekomme immer noch einen Error im Editor, und die toggle Funktion funktioniert nur bei schon offenem Popup .

Aber immerhin wird wider-cui generell erkannt .

Ich muss mich da nochmal weiter einlesen und rumtesten .

Benutzt habe ich deinen Code so :

JavaScript

//Toggle PersonalToolbar + Browser Test

(function ptbut() {
    
            
    if (location != 'chrome://browser/content/browser.xul' && location != 'chrome://browser/content/browser.xhtml')
       return;

    try {
        CustomizableUI.createWidget({
            id: 'PersonalToolbar-button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
                onBuild: function(aDocument) {
                    var toolbaritem = aDocument.createXULElement('toolbarbutton');
                    var props = {
                        id: 'PersonalToolbar-button',
                        class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                        removable: true,
                        label: 'Toggle Bookmarks',
                        tooltiptext: 'Toggle Bookmarktoolbar',
                    };
               
                    for(var p in props)
                        toolbaritem.setAttribute(p, props[p]);
                    return toolbaritem;
                    
                }
        });
    } catch(e) { };


document.getElementById('PersonalToolbar-button').addEventListener( "click", onClick );
    
document.addEventListener('keydown', (event) => {
        var keyName = event.key;

        // Mac keyboard shortcut German Cmd + < 
        if (event.metaKey && keyName == '<') {
           onClick(event);        
        }
    }, false
);
    function onClick(aEvent) {

        PersonalToolbar.classList.toggle("wide-mode");
        browser.classList.toggle("margin");
        document.getElementById('customizationui-widget-panel').classList.toggle('wider-cui');


     }
})();

Alles anzeigen

Die relevante CSS ist diese :

CSS

@-moz-document url(chrome://browser/content/browser.xhtml) {


/***  Adjust Widths , Margins custom  ***/

:root:not([inDOMFullscreen]) {
    --uc-toggle-narrow: 40px;
    --uc-toggle-wide: 130px;
}

#PersonalToolbar:not([customizing]) {
    position: fixed;
    display: flex;
    flex-direction: column;
    left: 0;
    min-width: 0px !important;
    width: var(--uc-personalbar-width);
    height: 100vh;
    max-height: 100vh !important; 
    transition: all 0.4s ease !important;
}

:root:not([chromehidden~="toolbar"]):not([customizing]) body > #browser,
:root:not([chromehidden~="toolbar"]):not([customizing]) body > #browser-bottombox,
:root:not([chromehidden~="toolbar"]):not([customizing]) #customization-container {
    margin-left: var(--uc-personalbar-width);
    transition: all 0.4s ease !important;
}




/**  Toggle narrow / wide / flip for startup state **/

#PersonalToolbar, #browser {
    --uc-personalbar-width: var(--uc-toggle-narrow) !important;
}

#PersonalToolbar.wide-mode, #browser.margin {
    --uc-personalbar-width: var(--uc-toggle-wide) !important;
}

#customizationui-widget-panel.bookmarks-toolbar {
    --uc-personalbar-width: var(--uc-toggle-narrow) !important;
    background-color: green !important;
}

#customizationui-widget-panel.bookmarks-toolbar.wider-cui {
    --uc-personalbar-width: var(--uc-toggle-wide) !important;
    background-color: red !important;
}


/*  Popups position  */

#PlacesToolbarItems > .bookmark-item >  menupopup, #OtherBookmarks #OtherBookmarksPopup {
    margin-inline-start: calc(var(--uc-personalbar-width) - 8px) !important;
    margin-top: -25px  !important;
}


#PersonalToolbar .cui-widget-panel {
    margin-right: calc(var(--uc-personalbar-width) - 8px) !important;
    margin-top: -25px  !important;
}

#customizationui-widget-panel.bookmarks-toolbar {
    margin-right: calc(var(--uc-personalbar-width) - 13px) !important;
    margin-top: -21px  !important;
}


/**  Bookmarks Toggle button **/

#PersonalToolbar-button .toolbarbutton-icon {
    list-style-image: url("toolbar.png") !important;
}

/*  Bookmarks vertical  */

#personal-bookmarks {
    overflow-y: auto; scrollbar-width: none;
}

#PersonalToolbar >  #personal-bookmarks > #PlacesToolbar > hbox {
     -moz-box-orient: vertical !important;
}

#PersonalToolbar #PlacesToolbarItems {
    display: flex;
    flex-direction: column;
}


/*  Extra buttons adjustments  */

#PersonalToolbar > .toolbarbutton-1 {
    padding-block: 4px !important;
}

#PersonalToolbar > .toolbarbutton-1 > .toolbarbutton-text {
    display: -moz-box !important;
    visibility: hidden !important;
    text-align: start !important;
}

/*  Bookmarks adjustments  */

#PersonalToolbar #PlacesToolbarItems > .bookmark-item {
    padding-block: 4px !important;
}

/*  Bookmarks text left  */

#PlacesToolbarItems > .bookmark-item > .toolbarbutton-text {
    text-align: start !important;
    padding-left: 6px !important;
}

/*  Separator adjust Seite  */

#PlacesToolbarItems > toolbarseparator {
    margin-inline: 5px 7px !important;
}

}

Alles anzeigen

Horstmann

Im Zusammenhang mit einem kleinen Entwurf für eine anpassbare vertikale Lesezeichenleiste, habe ich ein einfaches Script in Benutzung .

Es erzeugt einen Button , der die seitliche Lesezeichenleiste ein und ausklappt ( im Zusammenhang mit etwas CSS ), und das Script erzeugt auch gültige class names die dann im CSS wieterbenutzt werden können .

Siehe unterer Abschnitt, für PersonalToolbar die class wide-mode , für browser margin, und nach dem Prinzip funktionieren auch einige andere Elemente prima .

Was leider nicht funktioniert ist das gleiche Vorgehen für #customizationui-widget-panel, die Popup Fenster für einige der Toolbar Buttons .

Der Class Code wider-cui wird in CSS ignoriert, taucht nicht wie die oben genannten in den Browser Tools auf als zusätzliche class , und generiert einen Error in der Toolbox .

Einige Screenshots anbei ;

JavaScript

//Toggle PersonalToolbar + Browser Test

(function ptbut() {
    
            
    if (location != 'chrome://browser/content/browser.xul' && location != 'chrome://browser/content/browser.xhtml')
       return;

    try {
        CustomizableUI.createWidget({
            id: 'PersonalToolbar-button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
                onBuild: function(aDocument) {
                    var toolbaritem = aDocument.createXULElement('toolbarbutton');
                    var props = {
                        id: 'PersonalToolbar-button',
                        class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                        removable: true,
                        label: 'Toggle Bookmarks',
                        tooltiptext: 'Toggle Bookmarktoolbar',
                    };
               
                    for(var p in props)
                        toolbaritem.setAttribute(p, props[p]);
                    return toolbaritem;
                    
                }
        });
    } catch(e) { };

document.getElementById('PersonalToolbar-button').addEventListener( "click", onClick );
    
document.addEventListener('keydown', (event) => {
        var keyName = event.key;

        // Mac keyboard shortcut German Cmd + < 
        if (event.metaKey && keyName == '<') {
           onClick(event);        
        }
    }, false
);
    function onClick(aEvent) {

        PersonalToolbar.classList.toggle("wide-mode");
        browser.classList.toggle("margin");
        customizationui-widget-panel.classList.toggle("wider-cui");

    }
})();

Alles anzeigen

Für jede Hilfe wäre ich sehr dankbar .

Die schaltbare seitliche Lesezeichenleiste funktioniert ansonsten prima - nur die Position dieser paar Popups schaffe ich nicht an die wechselnden Breiten anzupassen .

Horstmann

Zitat von 2002Andreas

Das sieht nach Sidebar aus, und nicht die Lesezeichensymbolleiste

Wollen wir mal nicht gleich das Schlimmste annehmen , man bekommt Lesezeichen auch anders vertikal angezeigt als das Teufelszeug Sidebar zu benutzen .

Liegt aber nahe .

Horstmann

Zitat von BarbaraZ-

Moin,
ich möchte gerne die Symbole in der LZ-Symbolleiste individuell anpassen.

Die "Ordner gelb" habe ich mittlerweile deaktiviert.
Die Unterordner folgen im zweiten Schritt. Erst mal eine Fleißarbeit für mich die Buchstaben hier individuell zuzuordnen.

Nur mal als schneller Test funktioniert das hier bei mir, mit dem P Icon das Du angehängt hast :

CSS

#PlacesToolbarItems > .bookmark-item[label="Privat"] {
    list-style-image: url("letter-p-icon.png") !important;
}

Dabei ist das obige CSS direkt in der userChrome.css eingetragen, das Icon liegt im selben Ordner wie eben diese userChrome.css, und das war's schon .

Pseudoelemente (::before) und background-image würde ich selber nicht benutzen, wenn nicht nötig für den Zweck - das kann je nach sonstiger Konstellation Ärger geben . ( Anfänger hier allerdings )

Das geht aber auch nur für Symbole direkt in der Lesezeichen Symbolleiste ; dein Screenshot sieht so aus als wären die Lesezeichen, die Du ändern willst, evtl. anderweitig untergebracht .

In dem Fall, oder einfach generell, könntest Du mal das hier testen :

CSS

.bookmark-item[label="Privat"] {
    list-style-image: url("letter-p-icon.png") !important;
}

Das sollte auch die meisten Unterordner mit diesem Label abdecken .

Horstmann

Danke für Eure geduldigen Erklärungen, und sorry für die - im Nachhinein betrachtet - nicht besonders schlauen Fragen ...

Horstmann

Zitat von milupo

Zitat von Horstmann

Hat die Benutzung von Grossbuchstaben einen Einfluss auf CSS oder Dateipfade ?

Schaue dir mal als Beispiel den Selektor #PlacesToolbarItems im Code von BarbaraZ- an. Du siehst, hier wechseln Groß- und Kleinschreibung einander ab. Würdest du jetzt z. B. denken, das ist ein Substantiv, ich schreibe den Selektor nur mit großem Anfangsbuchstaben, würde der Code nicht mehr funktionieren, denn den Selektor #Placestoolbaritems gibt es nicht.

Das ist schon klar, die Gross/Kleinschreibung bestehender Bezeichnungen , Referenzen, Dateinamen etc. muss man natürlich exakt einhalten , oder zumindest in den meisten Fällen .

Es hatte sich für mich in der Diskussion oben nur so angehört, als ob man Grossbuchstaben vermeiden sollte , wenn man selber Selektoren, Variablen etc. festlegt ; da war ich kurz verwirrt .

Zitat von Sören Hentzschel

Ja, das kann Einfluss haben.

Inwiefern ?

Wenn ich zB eine Variable festlege :

CSS

:root {
   --Meine-Eigene-Farbe: rgb(220, 220, 220) !important;
}

Dann sollten Gross/Kleinschreibung doch eigentlich keinen Unterschied machen ?

Bei der weiteren Verwendung muss ich dann natürlich --Meine-Eigene-Farbe benutzen, und nicht etwa --meine-eigene-farbe .

Beiträge von Horstmann

Lesezeichensymbolleiste leer

Lesezeichensymbolleiste leer

Mehrzeilige Tableiste für aktuelle Firefox-Versionen

Lesezeichensymbolleiste leer

Lesezeichensymbolleiste leer

Schaltfläche um Lesezeichen Leiste ein/auszublenden ?

Schaltfläche um Lesezeichen Leiste ein/auszublenden ?

Schaltfläche um Lesezeichen Leiste ein/auszublenden ?

Icons und Separatoren seit Update auf Version 108 verstellt

Icons und Separatoren seit Update auf Version 108 verstellt

Icons und Separatoren seit Update auf Version 108 verstellt

Icons und Separatoren seit Update auf Version 108 verstellt

Schaltfläche um Lesezeichen Leiste ein/auszublenden ?

Class Hinzufügen mit classList klappt nicht für bestimmte Popups

Class Hinzufügen mit classList klappt nicht für bestimmte Popups

Class Hinzufügen mit classList klappt nicht für bestimmte Popups

Symbole Individuell anpassen in der LZ-Sidebar

Symbole Individuell anpassen in der LZ-Sidebar

Groß- und Kleinschreibung bei CSS-Codes

Groß- und Kleinschreibung bei CSS-Codes