Schaltfläche um Lesezeichen Leiste ein/auszublenden ?

BrokenHeart

Code

if( startVisibility === true || startVisibility === false ) {     
    document.getElementById('PersonalToolbar').style.height = startVisibility;
}
else {  
       document.getElementById('PersonalToolbar').style.height = '22px';   
}

Habe mir nicht alles angeschaut, aber diese Abfrage ist absolut sinnlos.

Wie Sören schon geschrieben hat:

In startVisibility speicherst du ausschließlich boolsche-Werte und dann fragst du mit 'logischem oder' beide Werte ab. Also ist die Bedingung immer(!) erfüllt und dann setzt du als Höhe auch noch 'true' oder 'false', was dann natürlich nicht funktioniert. In den else-Zweig wird er nie kommen. Wenn die Sichtbarkeit 'false' ist, dann musst du als Höhe '0px' setzen und sonst (else) '22px', wie es ja auch schon dasteht.

Also etwas so:

JavaScript

if( startVisibility === false ) {     
    document.getElementById('PersonalToolbar').style.height = '0px';
}
else {  
       document.getElementById('PersonalToolbar').style.height = '22px';   
}

Mira_Belle

Verstehe nur Bahnhof.

Ich habe doch nur ...

JavaScript

    if( startVisibility === 'visible' || startVisibility === 'collapse' ) {
        document.getElementById('PersonalToolbar').style.visibility = startVisibility;
   }

... ändern wollen, d.h. 'visible' duch ? ersetzen, z.b. true oder '22px' und 'collapse' z.B. false oder '0px'.

Aber weder noch funktioniert.

Da funktioniert der Code doch genau so.

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 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;
}

Mira_Belle

Zitat von Horstmann
Es kann auch sein dass nur ein CSS Eintrag fehlt, dann passiert was Du beschreibst auch :
CSS
#PersonalToolbar {
    min-height: 0 !important;
}

DAS war es

Danke.

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

Hier das JavaScript, welches ich nach Deinem Muster geändert habe und wie ich es z.Z. nutze :

JavaScript

let startHeight = '0px'; //'0px' oder '24px' Hoehe Leiste
let autoCloseTime = 5000; // 0 = kein Auto-Close / >0 Zeit in Millisekunden /5000 => 5sec
let intervalID = 0;
let currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/"); // Die Pfadangabe zu dem Profilordner
let buttonicon = "bookmark-hollow.svg" // Name & Dateiendung des anzuzeigenden Symbols
let persToolbar = document.getElementById('PersonalToolbar');
(function ptbut() {              
    if (location.href !== 'chrome://browser/content/browser.xul' && location.href !== 'chrome://browser/content/browser.xhtml') return;
    try {
        CustomizableUI.createWidget({
            id: 'PersonalToolbar-button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
                onBuild: function(aDocument) {
                    let toolbaritem = aDocument.createXULElement('toolbarbutton');                  
                    let props = {
                        id: 'PersonalToolbar-button',
                        class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                        removable: true,
                        label: 'Toggle',
                        tooltiptext: 'Lesezeichenleiste ein-/ausblenden',
                        style: 'list-style-image: url("' + ("file:" + currentProfileDirectory + "/chrome/icons/" + buttonicon) +'");',
                    };                  
                    for(var p in props)
                        toolbaritem.setAttribute(p, props[p]);
                    return toolbaritem;                
                }
        });
        CustomizableUI.registerToolbarNode(tb);
    } 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 );
 
    function onClick(aEvent) {  
        if (persToolbar.style.height == '') {
            persToolbar.style.height = '0px';    }
        else if (persToolbar.style.height == '24px') {
            persToolbar.style.height = '0px'; }
        else if(persToolbar.style.height == '0px') {
            persToolbar.style.height = '24px';
            if(!intervalID && autoCloseTime) {
                intervalID =  aEvent.target.ownerGlobal.setInterval( autoClose, autoCloseTime );
            }
        }
      }
     
    function autoClose() {
        if( intervalID ) {
            if( persToolbar.style.height == '24px') {
                persToolBar.style.height = '0px';
                clearInterval(intervalID);
                intervalID=0;
            }
        }
    }
})();

Alles anzeigen

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';

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';

visoer

Ich habe mir mal die Freiheit genommen und diese tolle Arbeit zu einem Code zusammengefügt, vielleicht kann's ja jemand brauchen. Ob das allerdings noch mit dem Update auf 109 funktioniert, weiss ich nicht.

Für die PersonalToolbar:

Code

(function ptbut() {
let startHeight = '0px'; //'0px' oder Hoehe der Leiste in px im Startzustand
let Height = '22px'; //normal ist '36px' (Hoehe der Leiste im ausgeklappten Zustand).
// ACHTUNG: es darf keine Höhe der Leiste in der css definiert sein.
let autoCloseTime = 0; // 0 = kein Auto-Close / >0 Zeit in Millisekunden /5000 => 5sec
let intervalID = 0;
let currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/"); // Die Pfadangabe zu dem Profilordner
let buttonicon = "beispiel.svg" // Name & Dateiendung des anzuzeigenden Symbols im Ordner: /chrome/css/image/ Pfad kann hier geändert werden: Zeile 25/26
let d2 = document.getElementById('PersonalToolbar');
              
    if (location.href !== 'chrome://browser/content/browser.xul' && location.href !== 'chrome://browser/content/browser.xhtml') return;
    try {
        CustomizableUI.createWidget({
            id: 'PersonalToolbar-button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
                onBuild: function(aDocument) {
                    let toolbaritem = aDocument.createXULElement('toolbarbutton');                  
                    let props = {
                        id: 'PersonalToolbar-button',
                        class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                        removable: true,
                        label: 'PersonalToolbar on/off (Strg+y)',
                        tooltiptext: 'PersonalToolbar on/off (Strg+y)',
                        style: 'list-style-image: url("' + ("file:" + currentProfileDirectory + "/chrome/css/image/" + buttonicon) +'");',
                    };                  
                    for(var p in props)
                        toolbaritem.setAttribute(p, props[p]);
                    return toolbaritem;                
                }
        });
        CustomizableUI.registerToolbarNode(tb);
    } catch(e) { };

// Tastenkombi Windows und Linux
document.addEventListener('keydown', (event) => {
        var keyName = event.key;
//STRG + y
        if (event.ctrlKey && keyName == 'y') {
           onClick();        
        }
    }, false
);

document.getElementById('PersonalToolbar').style.minHeight = '0';
    if( startHeight === Height || startHeight === '0px' ) {
        document.getElementById('PersonalToolbar').style.height = startHeight;
   }
    else {
        document.getElementById('PersonalToolbar').style.height = Height;
    }
    document.getElementById('PersonalToolbar-button').addEventListener( "click", onClick );
    function onClick(aEvent) {
        if (d2.style.height == '') {
            d2.style.height = '0px';
            }
        else if (d2.style.height == Height) {
            d2.style.height = '0px';
            }
        else if(d2.style.height == '0px') {
            d2.style.height = Height;
            if(!intervalID && autoCloseTime) {
                intervalID =  aEvent.target.ownerGlobal.setInterval( autoClose, autoCloseTime );
            }
        }
      }
     
    function autoClose() {
        if( intervalID ) {
            if( d2.style.height == Height) {
                d2.style.height = '0px';
                clearInterval(intervalID);
                intervalID=0;
            }
        }
    }
})();

Alles anzeigen

und hier für die nav-bar:

Code

(function nbbut() {
let startHeight = '0px'; //'0px' oder Hoehe der Leiste in px im Startzustand
let Height = '22px'; //normal ist '36px' (Hoehe der Leiste im ausgeklappten Zustand).
// ACHTUNG: es darf keine Höhe der Leiste in der css definiert sein.
let autoCloseTime = 0; // 0 = kein Auto-Close / >0 Zeit in Millisekunden /5000 => 5sec
let intervalID = 0;
let currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/"); // Die Pfadangabe zu dem Profilordner
let buttonicon = "beispiel.svg" // Name & Dateiendung des anzuzeigenden Symbols im Ordner: /chrome/css/image/ Pfad kann hier geändert werden: Zeile 25/26
let d1 = document.getElementById('nav-bar');
              
    if (location.href !== 'chrome://browser/content/browser.xul' && location.href !== 'chrome://browser/content/browser.xhtml') return;
    try {
        CustomizableUI.createWidget({
            id: 'nav-bar-button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
                onBuild: function(aDocument) {
                    let toolbaritem = aDocument.createXULElement('toolbarbutton');                  
                    let props = {
                        id: 'nav-bar-button',
                        class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                        removable: true,
                        label: 'NavBar on/off (Strg+w)',
                        tooltiptext: 'NavBar on/off (Strg+w)',
                        style: 'list-style-image: url("' + ("file:" + currentProfileDirectory + "/chrome/css/image/" + buttonicon) +'");',
                    };                  
                    for(var p in props)
                        toolbaritem.setAttribute(p, props[p]);
                    return toolbaritem;                
                }
        });
        CustomizableUI.registerToolbarNode(tb);
    } catch(e) { };

// Tastenkombi Windows und Linux
document.addEventListener('keydown', (event) => {
        var keyName = event.key;
//STRG + w 
        if (event.ctrlKey && keyName == 'w') {
           onClick();        
        }
    }, false
);

document.getElementById('nav-bar').style.minHeight = '0';
    if( startHeight === Height || startHeight === '0px' ) {
        document.getElementById('nav-bar').style.height = startHeight;
   }
    else {
        document.getElementById('nav-bar').style.height = Height;
    }
    document.getElementById('nav-bar-button').addEventListener( "click", onClick );
    function onClick(aEvent) {
        if (d1.style.height == '') {
            d1.style.height = '0px';
             }
        else if (d1.style.height == Height) {
            d1.style.height = '0px';
             }
        else if(d1.style.height == '0px') {
            d1.style.height = Height;
            if(!intervalID && autoCloseTime) {
                intervalID =  aEvent.target.ownerGlobal.setInterval( autoClose, autoCloseTime );
            }
        }
      }
     
    function autoClose() {
        if( intervalID ) {
            if( d1.style.height == Height) {
                d1.style.height = '0px';
                clearInterval(intervalID);
                intervalID=0;
            }
        }
    }
})();

Alles anzeigen

Horstmann

Zitat von visoer

Ich habe mir mal die Freiheit genommen und diese tolle Arbeit zu einem Code zusammengefügt, vielleicht kann's ja jemand brauchen. Ob das allerdings noch mit dem Update auf 109 funktioniert, weiss ich nicht.

Danke , macht einen guten Eindruck !

Selber benutze ich für diverse Versionen zum Einklappen der Lesezeichenleiste nur noch das hier , bzw Varianten davon .

Mit der vorrangig CSS basierten Rangehensweise bekommt man eine Menge Kontrolle über alle relevanten Elemente , was v.a. Sinn macht wenn man vertikal geht mit der Leiste .

Nur eines in deinen Scripts : sollten b1 und b2 nicht jeweils d1 und d2 heissen ?

visoer

Ja, das habe ich bereits wieder gelöscht.

War überflüssig, kommt von diesem Relikt hier:

Code

    function onClick(aEvent) {
let b1 = document.getElementById('nav-bar-button');  
        if (d1.style.height == '') {
            d1.style.height = '0px';
            b1.style.backgroundColor = '#72a572'; }
        else if (d1.style.height == '22px') {
            d1.style.height = '0px';
            b1.style.backgroundColor = '#72a572'; }
        else if(d1.style.height == '0px') {
            d1.style.height = '22px';
            b1.style.backgroundColor = '#323232';

Alles anzeigen

Ein persönlicher Touch.

Danke fürs Testen und selbstverständlich für die tolle Leistung!

Horstmann

Zitat von visoer

Ja, das habe ich bereits wieder gelöscht.

War überflüssig, kommt von diesem Relikt hier:

Code

    function onClick(aEvent) {
let b1 = document.getElementById('nav-bar-button');  
        if (d1.style.height == '') {
            d1.style.height = '0px';
            b1.style.backgroundColor = '#72a572'; }
        else if (d1.style.height == '22px') {
            d1.style.height = '0px';
            b1.style.backgroundColor = '#72a572'; }
        else if(d1.style.height == '0px') {
            d1.style.height = '22px';
            b1.style.backgroundColor = '#323232';

Alles anzeigen

Ein persönlicher Touch.

Danke fürs Testen und selbstverständlich für die tolle Leistung!

Ah, verstehe .

Und so sehr ich mich über Komplimente freue - es ist etwas unverdient, und sollte an BrokenHeart gehen, der ( mindestens ) den Grossteil der Arbeit gemacht hat .

visoer

Wer weiß schon woher die merkwürdigen Variablennamen d1 d2 oder die Funkktionsnamen ntbut/btbut kommen.

Dieser Namensgeber war sicherlich der Urheber des Ganzen.

Der Dank gebührt Allen, die daran beteiligt waren.

Für mich zählt nur das: Bis zum nächsten Update ist das Problem gelöst!

Horstmann

Aus Gründen der Aktualität , hier noch ein kurzer Hinweis zu einem dem Thema verwandten Thread .

Diverse Lösungen zu Problemen, Updates und/oder Erweiterungen zu den hier aktuellen Scripts finden sich auch dort, teils mit Erläuterungen .

Im Sinne der Forenhygiene hier nur Links zu den wesentlichen Scriptvarianten , in chronologischer Reihenfolge :

- Scriptvariante von Andreas ; benutzt altes Konzept mit visibility plus simple CSS Regel ; elegant einfach, wenn auch eher sparsam erläutert .

- Eine weitere Scriptvariante von visoer , der so langsam im Verdacht steht sich mit Javascript auszukennen .

- Die neuste(?) Variante von Mira , mit Anregungungen für zusätzliche Komponenten im Script; erfreulich enthusiastisch wie immer .

2002Andreas

Zitat von Horstmann

wenn auch eher sparsam erläutert .

Ein Blick in das Skript, und schon sieht man genau was jetzt anders ist.

Und ich denke auch, dem User war es egal was ich geändert habe, ihn interessiert nur dass das Skript wieder funktioniert, und die Lesezeichensybolleiste wieder kompl. mit Inhalt angezeigt wird.

Ansonsten hätte er nachgefragt.

Horstmann

Eine Frage stellt sich mir noch zu diesem Script, und ähnlichen .

Der im Script eingebundene Mausklick ruft die Funktion(Ein-/Ausblenden der Leiste) mit jedem Mausklick auf, egal ob die linke, mittlere oder rechte Maustaste benutzt wird .

Der Rechtsklick (Kontextmenu) des Buttons bleibt als Funktion erhalten, nur wird gleichzeitig bei Rechtsklick auch die Lesezeichenleiste geschaltet .

Kein Drama, aber netter wäre wenn nur der linke Mausklick die Lesezeichenleiste ein- und ausklappen würde .

Ich benutze diese Version , die auch mit einigem CSS verknüpft ist, aktuell mit dem Javascript hier :

JavaScript

//Toggle PersonalToolbar

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

    try {
        CustomizableUI.createWidget({
            id: 'PersonalToolbar-button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
                onBuild: function(aDocument) {
                    let toolbaritem = aDocument.createXULElement('toolbarbutton');
                    let 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) => {
        let keyName = event.key;

       // Mac German keyboard shortcut Cmd + < 
        if (event.metaKey && keyName == '<') {
           onClick(event);        
        }
    }, false
);
    function onClick(aEvent) {
       PersonalToolbar.classList.toggle("low-mode");
    }

})();

Alles anzeigen

Das Prinzip ist bei den anderen Scripts hier gleich eingebunden - die sind evtl. zum Testen einfacher , ohne sich um meinen CSS Kram kümmern zu müssen.

Ein Beispiel für getrennte Funktion der einzelnen Maustasten hatte ich hier gesehen und benutzte diese Script auch; schaffe es aber nicht die entsprechenden Einträge in das Lesezeichenleiste Script zu integrieren .

BrokenHeart

Zitat von Horstmann

Kein Drama, aber netter wäre wenn nur der linke Mausklick die Lesezeichenleiste ein- und ausklappen würde .

Wenn nur die linke Maustaste abgefragt werden soll:

JavaScript

function onClick(aEvent) {
    if( aEvent.button == 0 ) {
        PersonalToolbar.classList.toggle("low-mode");
    }
}

Info zum MouseButton-Event:

MouseEvent.button - Web APIs | MDN

The MouseEvent.button read-only property indicates which button was pressed on the mouse to trigger the event.

developer.mozilla.org

Horstmann

Zitat von BrokenHeart

Wenn nur die linke Maustaste abgefragt werden soll:

~~Herzlichen Dank, funktioniert perfekt !~~

Die MDN Seiten hatte ich mir schon angeschaut, aber zur Umsetzung in Code fehlen mir die Basis Javascript Kentnisse - copy & paste kann ich aber gut .

Edit: Leider zu früh gefreut - mit der Änderung im Code funktioniert das Tastaturkürzel nicht mehr , nur noch der Button .

So sieht das im Ganzen aus :

JavaScript

//Toggle PersonalToolbar

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

    try {
        CustomizableUI.createWidget({
            id: 'PersonalToolbar-button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
                onBuild: function(aDocument) {
                    let toolbaritem = aDocument.createXULElement('toolbarbutton');
                    let 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) => {
        let keyName = event.key;

       // Mac German keyboard shortcut Cmd + < 
        if (event.metaKey && keyName == '<') {
           onClick(event);        
        }
    }, false
);
    function onClick(aEvent) {
                 if (aEvent.button == 0) {
       PersonalToolbar.classList.toggle("low-mode");
    }
}

})();

Alles anzeigen

BrokenHeart

Zitat von Horstmann

Edit: Leider zu früh gefreut - mit der Änderung im Code funktioniert das Tastaturkürzel nicht mehr , nur noch der Button .

Abgesehen davon, dass bei mir dein Script überhaupt nicht funktioniert, kannst du das mal testen:

JavaScript

//Toggle PersonalToolbar

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

    try {
        CustomizableUI.createWidget({
            id: 'PersonalToolbar-button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
                onBuild: function(aDocument) {
                    let toolbaritem = aDocument.createXULElement('toolbarbutton');
                    let 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) => {
        let keyName = event.key;

       // Mac German keyboard shortcut Cmd + < 
        if (event.metaKey && keyName == '<') {
           PersonalToolbar.classList.toggle("low-mode");
        }
    }, false
);
    function onClick(aEvent) {
                 if (aEvent.button == 0) {
                     console.log("Click");
       PersonalToolbar.classList.toggle("low-mode");
    }
}

})();

Alles anzeigen

Horstmann

Zitat von BrokenHeart

Abgesehen davon, dass bei mir dein Script überhaupt nicht funktioniert, kannst du das mal testen:

JavaScript

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

       // Mac German keyboard shortcut Cmd + < 
        if (event.metaKey && keyName == '<') {
           PersonalToolbar.classList.toggle("low-mode");
        }
    }, false
);
    function onClick(aEvent) {
                 if (aEvent.button == 0) {
                     console.log("Click");
       PersonalToolbar.classList.toggle("low-mode");
    }
}

})();

Alles anzeigen

Nochmals vielen Dank, mit den Änderungen klappt das jetzt !

Das Script funktioniert nur zusammen mit CSS Regeln , zB so etwas :

CSS

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

#PersonalToolbar:not([customizing]) {
    --uc-personalbar-height: 24px !important;
    height: var(--uc-personalbar-height) !important;
    min-height: 0 !important;
    transition: all 0.25s ease !important;
}

#PersonalToolbar.low-mode {
    --uc-personalbar-height: 0px !important;
}

Alles anzeigen

Ohne CSS macht es nix; ist so gewollt v.a. für einige andere Experimente mit vertikalen Toolbars etc., wo dann noch mehrere andere selbstdefinierte .class Attribute zusätzlich verwendet werden .

BrokenHeart

Zitat von Horstmann

Ohne CSS macht es nix; ist so gewollt v.a. für einige andere Experimente mit vertikalen Toolbars etc., wo dann noch mehrere andere selbstdefinierte .class Attribute zusätzlich verwendet werden .

Ok, alles klar!

Schaltfläche um Lesezeichen Leiste ein/auszublenden ?

Ähnliche Themen

Lesezeichen Symbolleiste mehrzeilig

Symbolleiste leer, erstellt keine neuen Wiederherstellungspunkte und manuelle Speicherung nicht mehr möglich

Fontspielereien in der Lesezeichen-Symbolleiste

Mehrzeilige Lesezeichensymbolleiste

Mit "google" suchen

rechts klick in LZ Leiste - Umbennen oder bearbeiten