Schaltfläche um Lesezeichen Leiste ein/auszublenden ?

Mira_Belle

Update

Da mein Skript unter Version 116 nicht mehr funktioniert,

habe ich es umgeschrieben.

JavaScript

// Button_PersonalToolbar.uc.js
// Source file https://www.camp-firefox.de/forum/thema/134920/?postID=1213680#post1213680
// Source file https://www.camp-firefox.de/forum/thema/134920/?postID=1215809#post1215809
// Source file https://www.camp-firefox.de/forum/thema/134920/?postID=1232103#post1232103
// PersonalToolbar_ausblenden
// basierend auf den Ideen von BrokenHeart und visoer, Verbesserungen von Horstmann, Korrekturen von Sören und Anpassungen von Mira_Belle
(function ptbut() {              
    if (location.href !== 'chrome://browser/content/browser.xhtml') return;
       
    let startHeight = '0px';                // '24px' oder '0px' Der Startzustand wird definiert: '24px' startet mit sichtbarer Leiste
    let collapse = '0px';                   // Leiste nicht sichtbar
    let visible = '24px';                   // Leiste sichtbar
    let autoCloseTime = 5000;               // 0 = kein Auto-Close / >0 Zeit in Millisekunden /5000 => 5sec  
    let intervalID = 0;
    let persToolbar = document.getElementById('PersonalToolbar');
    try {
        CustomizableUI.createWidget({
            id: 'PersonalToolbar-button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
                onBuild: function(aDocument) {
                    let toolbaritem = aDocument.createXULElement('toolbarbutton');
                    let currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/"); // Pfadangabe zum Profilordner
                    let buttonicon = "bookmark-hollow.svg";  // Name & Dateiendung des anzuzeigenden Symbols
                    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;                
                }
        });
    } catch(e) { };
    //----------BEGINN----------------------
    // Funktion zum Abfragen der Tastatur ("belauscht" Eingaben)
    // Hinweis: Tasten, die anderweitig bereits "abgefangen" werden, ergeben keinen Event
    document.addEventListener('keydown', (event) => {
        let keyName = event.key;
            if (event.altKey && keyName == 'q') {   // Funktion wird ausgeführt, wenn "Alt & q gedrückt werden
//                onClick(event);
                onClick(event,true);  // ----geändert----
            }
        }, false
    );
    //----------ENDE------------------------
    // Anmerkungen und beispiele am Ende des Scriptes
    document.getElementById('PersonalToolbar').style.minHeight = '0';
    document.getElementById('PersonalToolbar').style.transition = 'all 0.3s steps(6, end)';
    if( startHeight === visible || startHeight === collapse ) {
        document.getElementById('PersonalToolbar').style.height = startHeight;
    }
    else {
        document.getElementById('PersonalToolbar').style.height = visible;
    }
    document.getElementById('PersonalToolbar-button').addEventListener( "click", onClick );
//    function onClick(aEvent) {
    function onClick(aEvent, keyEvent=false) {
        if(!keyEvent && aEvent.button != 0) {
            return;    
        }
        if (persToolbar.style.height == '') {
                persToolbar.style.height = collapse;
        }
        else if (persToolbar.style.height == visible) {
                persToolbar.style.height = collapse;
        }
        else if(persToolbar.style.height == collapse) {
            persToolbar.style.height = visible;
            if(!intervalID && autoCloseTime) {
                intervalID =  aEvent.target.ownerGlobal.setInterval( autoClose, autoCloseTime );
            }
        }
    }
    function autoClose() {
        if( intervalID ) {
            if( persToolbar.style.height == visible) {
                persToolbar.style.height = collapse;
                clearInterval(intervalID);
                intervalID=0;
            }
        }
    }
})();
// Funktion wird ausgeführt, wenn STRG + Alt + l gedrückt wird
//  if (event.ctrlKey && event.altKey && keyName == 'l') {      
// Funktion wird ausgeführt, wenn STRG + w gedrückt werden
    //if (event.ctrlKey && keyName == 'w') {
// PersonalToolbar.style.setProperty('min-height', '0', 'important' );
// PersonalToolbar.style.setProperty('transition', 'all 0.3s steps(6, end)', 'important' );

Alles anzeigen

Horstmann

Zitat von Mira_Belle

Update
Da mein Skript unter Version 116 nicht mehr funktioniert,
habe ich es umgeschrieben.

Nur aus Neugierde - welcher Teil hatte denn nicht mehr funktioniert mit Fx 116?

Kann meine Version nicht testen in der neusten Fx oder Nightly, mein OS ist zu alt und jetzt auf 115ESR ...

Selber habe ich meine alte, einfache JS/CSS Kombo am laufen, könnte ich bei Gelegenheit mal zusammenlegen im Script:

JavaScript

//Toggle PersonalToolbar v3 left click button

(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) {
                    var toolbaritem = aDocument.createXULElement('toolbarbutton');
                    var props = {
                        id: 'PersonalToolbar-button',
                        class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                        removable: true,
                        label: 'Toggle',
                        tooltiptext: 'Toggle Bookmarktoolbar',
                    };
                                   for(var p in props)
                        toolbaritem.setAttribute(p, props[p]);
                    return toolbaritem;
                }
        });
    } catch(e) { };
    
document.addEventListener('keydown', (event) => {
        var keyName = event.key;

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

document.getElementById('PersonalToolbar-button').addEventListener( "click", onClick );

        function onClick(aEvent, keyEvent=false) {          
        if(!keyEvent && aEvent.button != 0) {
            return;    
        }

       PersonalToolbar.classList.toggle("low-mode");
    }

})();

Alles anzeigen

CSS

/**  Bookmarks bar height Toggle  **/

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

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

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

Alles anzeigen

Mira_Belle

Zitat von Horstmann

Nur aus Neugierde - welcher Teil hatte denn nicht mehr funktioniert mit Fx 116?

Bei allen meinen Skripten wurden die Symbole,

die so:

JavaScript

let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
let buttonicon = "bookmark-hollow.svg";
let props = {
    style: "list-style-image: url('" + ProfilePath + buttonicon + "');"
};

eingebunden wurden nicht mehr angezeigt.

Daher musste ich das anpassen:

JavaScript

let currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
let buttonicon = "bookmark-hollow.svg";
let props = {
    style: 'list-style-image: url("' + ("file:" + currentProfileDirectory + "/chrome/icons/" + buttonicon) +'");',
};

Horstmann

Zitat von Mira_Belle

JavaScript

let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
let buttonicon = "bookmark-hollow.svg";
let props = {
    style: "list-style-image: url('" + ProfilePath + buttonicon + "');"
};

eingebunden wurden nicht mehr angezeigt.

Daher musste ich das anpassen:

JavaScript

let currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
let buttonicon = "bookmark-hollow.svg";
let props = {
    style: 'list-style-image: url("' + ("file:" + currentProfileDirectory + "/chrome/icons/" + buttonicon) +'");',
};

Danke!

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