Fix: Toolbar-Buttons reagieren nicht mehr ab FF 134

Horstmann

Also, wenn ich mal davon ausgehe, daß man das im ersten Beitrag indirekt verlinkte Toolbar Script benutzt, dann funktioniert das hier bei mir am Mac im aktuellen Nightly, mit dem Button in der zusätzlichen Toolbar, und in allen Szenarien was die Fenster angeht (Icon im Anhang, muss in einen chrome/icons Ordner, oder ändern; Testscript):

JavaScript

//  About_Translations.uc.js Test 1

  (function() {
   if (location != 'chrome://browser/content/browser.xhtml') return;
    try {
        CustomizableUI.createWidget({
            id: 'abouttrans_button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
            onBuild: function(aDocument) {
            let currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
            let buttonicon = "Letterst-2a.png"
            let toolbaritem = aDocument.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbarbutton');
                var props = {
                    id: 'abouttrans_button',
                    class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                    label: 'About:Translate',
                    tooltiptext: 'About:Translations',
                    style: 'list-style-image: url("' + ("file:" + currentProfileDirectory + "/chrome/icons/" + buttonicon) + '");'

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

    document.getElementById('abouttrans_button').addEventListener('click', event => {
    if (event.button === 0) {
         openTrustedLinkIn("about:translations", "tab");
        }
    });

})();

Alles anzeigen

Wie geht das denn hier mit den Dateianhängen aktuell ?
Hoffe eins davon klappt.

Mitleser

Zitat von BrokenHeart

Aktuellste Version: 02.02.2025 v0.2

ucjs_unified-extensions-button + 'Verschiebe'-Script funzt leider nicht mehr.

BrokenHeart

Zitat von Mitleser

ucjs_unified-extensions-button + 'Verschiebe'-Script funzt leider nicht mehr.

Schau bitte in Zeile 14, ob dort die richtige Toolbar-ID im Array steht. Falls du das nicht korrigiert hast, steht da nämlich jetzt eine andere drin, als vorher ('addonbar' -> 'bottom-toolbar' ).

Ich werde das Array im Code mal leer lassen, da ja hier zwingend eine vorhandene Toolbar-ID eingetragen werden muss und ich nicht weiß, welche Toolbar genutzt wird. Vielleicht kann man das ohne großen Aufwand auch "programmatisch" lösen...

Edit: Noch als Hinweis: In der Konsole sollte bei nicht vorhandener Toolbar eine Warnung ausgegeben worden sein.

Mitleser

Zitat von BrokenHeart

die richtige Toolbar-ID im Array

Genau das war mein Fehler! Vielen Dank für die neue Version und den Tipp.
EDIT:

Zitat von BrokenHeart

Edit: Noch als Hinweis: In der Konsole sollte bei nicht vorhandener Toolbar eine Warnung ausgegeben worden sein.

Habe ich nicht drauf geachtet. Oder als zusätzliche, gut sichtbare Warnung könnte ein alert( "Warning: Toolbar [" + toolbarID + "] unknown! File: 'FixToolbarButtons.uc.js'"); hilfreich sein?

BrokenHeart

Zitat von Mitleser

Oder als zusätzliche, gut sichtbare Warnung könnte ein alert( "Warning: Toolbar [" + toolbarID + "] unknown! File: 'FixToolbarButtons.uc.js'"); hilfreich sein?

Hatte ich mir zuerst auch überlegt, aber ich bin eigentlich kein Freund von aufpoppenden Meldungen, die ich quittieren muss. Es passiert bei fehlerhafter Angabe der ID ja nichts, was sich in irgendeiner Weise auf das Gesamtverhalten des Browsers auswirken würde (auch nicht auf die Performance). Der einzige Effekt, der dann eintritt ist, dass die Buttons nicht mehr funktionieren. Und wenn ein Skript nicht mehr läuft, dann sollte man sowieso mal in der Konsole nachschauen, ob da eine Meldung vorliegt. Bleibt natürlich jedem selbst überlassen, die Zeile mit 'console.log' nach deinem Vorschlag anzupassen...

Aber wie gesagt, ich möchte wenigstens den Versuch starten, die Angabe im Skript überflüssig zu machen, also das Skript automatisch nach allen betroffenen Toolbars suchen zu lassen und diese dann automatisch eintragen zu lassen. Aber keine Ahnung, ob das trivial und sicher ist...

Mitleser

Zitat von BrokenHeart

Und wenn ein Skript nicht mehr läuft, dann sollte man sowieso mal in der Konsole nachschauen, ob da eine Meldung vorliegt.

Sehe ich genauso (Wenn man wie ich die Konsole gerade 'nicht auf dem Zettel' hat, könnten auch die 'grauen Zellen' helfen).

Zitat von BrokenHeart

Bleibt natürlich jedem selbst überlassen, die Zeile mit 'console.log' nach deinem Vorschlag anzupassen...

Ist hier schon erweitert (Version für Dummies). Danke nochmal!

Horstmann

Zitat von BrokenHeart

Hier das versprochene Skript, welches die vorherige Funktionalität für alle Buttons wiederherstellt, welche ab FF134 nicht mehr auf einen Mausklick reagiert haben, wenn sie außerhalb des Bereichs der navigator-toolbox verschoben wurden.

Nur mal aus Neugierde: wenn jemand dieses Script mal in die aktuelle FX oder Nightly packen möchte, funktionieren dann die strittigen Buttons?

Es ist hier ein Sonderfall, weil diese Toolbar mit position: fixed plaziert wird, also schwebt.
Falls die Buttons hier aber funktionieren, könnte man allerdings darüber nachdenken, eine floating Toolbar dieser Art, plus einem korrespondierenden leeren Platzhalter für die Anpassung des Browserfensters zu basteln.

Etwas hackig, aber eine potentiell einfachere Angelegenheit als ein Script für alle einzelnen System Buttons - falls diese Buttons mit dem Script unten funktionieren.

JavaScript

//Toggle newtoolbar 7D_b rechts nav-bar test

(function() {

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

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

        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', 'vertical');
        tb.setAttribute('mode', 'icons');
        tb.setAttribute("toolboxid","navigator-toolbox");
        tb.setAttribute('context', 'toolbar-context-menu');
        tb.setAttribute("toolbarname", tb_label);
        tb.setAttribute("label", tb_label);

	      toolbox_new.appendChild(tb);

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

        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", onClick );
        function onClick(aEvent, keyEvent=false) {
        if(!keyEvent && aEvent.button != 0) {
            return;
        }
        newtoolbar.classList.toggle("off-mode");
 };

const css =`

:root {
    --ug-newbar_width: 44px;
    --ug-newbar_max_width: 166px;
    --ug-newbar_bg_color: lightblue;
    --ug-newbar_radius: 8px;
}

#toolbox_new {
    position: fixed;
    display: flex;
    top: 50%;
    /*left: 0;*/
    right: 0;
    transform: translateY(-50%);
    z-index: 4 !important;
    height: fit-content;
    width: fit-content;
}

#newtoolbar {
    display: flex;
    width: var(--ug-newbar_width);
    padding: 4px !important;
    background-color: var(--ug-newbar_bg_color) !important;
    /*border-radius: 0 var(--ug-newbar_radius) var(--ug-newbar_radius) 0;*/
    border-radius: var(--ug-newbar_radius) 0 0 var(--ug-newbar_radius);
    transition: width 0.5s ease, margin 0.5s ease !important;
}

#newtoolbar:not([customizing]):hover {
    width: var(--ug-newbar_max_width);
}

#newtoolbar:not([customizing]).off-mode {
    /*margin-left: calc(0px - var(--ug-newbar_width));*/
    margin-right: calc(0px - var(--ug-newbar_width));
}

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

#newtoolbar:not([customizing]):hover .toolbarbutton-1 .toolbarbutton-icon {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

#newtoolbar:not([customizing]):hover .toolbarbutton-1 .toolbarbutton-text {
    display: flex !important;
    text-align: start !important;
    padding-left: 0px !important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

#newtoolbar[customizing] {
    min-width: var(--ug-newbar_width) !important;
    padding-bottom: 48px !important;
    background: var(--ug-newbar_bg_color) !important;
}

#customization-content-container {
    /*margin-left: var(--ug-newbar_width) !important;*/
    margin-right: 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

Hier grob etwas weiter gedacht, passt halbwegs sogar ohne Platzhalter Element, nur mit CSS.
Man müsste noch die Höhe/Breite vom Browserinhalt auslesen und im CSS oder sonstwie dynamisch einsetzen können, um die Position der Leiste genau zu bestimmen.

Aber wie gesagt, die Übung macht nur Sinn, wenn die Systembuttons in so einer Leiste funktionieren; meine aktuelle Fx und Nightly Installation läuft auf einem anderen Rechner mit Dampfantrieb, daher für mich aufwendig zu testen.

JavaScript

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

(function() {

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

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

        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', 'vertical');
        tb.setAttribute('mode', 'icons');
        tb.setAttribute("toolboxid","navigator-toolbox");
        tb.setAttribute('context', 'toolbar-context-menu');
        tb.setAttribute("toolbarname", tb_label);
        tb.setAttribute("label", tb_label);

	      toolbox_new.appendChild(tb);

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

        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", onClick );
        function onClick(aEvent, keyEvent=false) {
        if(!keyEvent && aEvent.button != 0) {
            return;
        }
        newtoolbar.classList.toggle("off-mode");
        browser.classList.toggle("off-mode");


        // window height
        // const height = window.innerHeight;
        // window width
        // const width = window.innerWidth;
        // console.log(height, width); // 711 1440

        //offsetHeight

        // window height
        let height_b = document.getElementById('appcontent').clientHeight;
        // window width
        let width_b = document.getElementById('appcontent').clientWidth;
        console.log(height_b, width_b);

 };

const css =`

:root {
    --ug-newbar_width: 44px;
    --ug-newbar_max_width: 166px;
    --ug-newbar_bg_color: lightblue;
    --ug-newbar_radius: 8px;
}

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

#toolbox_new {
    position: fixed;
    display: flex;
    bottom: 0;
    /*left: 0;*/
    right: 0;
    /*transform: translateY(-50%);*/
    z-index: 4 !important;
    height: calc(100vh - 155px);
    width: fit-content;
}

#newtoolbar {
    display: flex;
    width: var(--ug-newbar_width);
    padding: 4px !important;
    background-color: var(--ug-newbar_bg_color) !important;
    transition: width 0.5s ease, margin 0.5s ease !important;
}
/*
#newtoolbar:not([customizing]):hover {
    width: var(--ug-newbar_max_width);
}
*/

#newtoolbar:not([customizing]).off-mode {
    /*margin-left: calc(0px - var(--ug-newbar_width));*/
    margin-right: calc(0px - var(--ug-newbar_width));
}

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

#newtoolbar:not([customizing]):hover .toolbarbutton-1 .toolbarbutton-icon {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

#newtoolbar:not([customizing]):hover .toolbarbutton-1 .toolbarbutton-text {
    display: flex !important;
    text-align: start !important;
    padding-left: 0px !important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

#newtoolbar[customizing] {
    min-width: var(--ug-newbar_width) !important;
    background: var(--ug-newbar_bg_color) !important;
    margin-bottom: 49px !important;
}

#customization-content-container {
    /*margin-left: var(--ug-newbar_width) !important;*/
    margin-right: 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

BrokenHeart

Zitat von Horstmann

Nur mal aus Neugierde: wenn jemand dieses Script mal in die aktuelle FX oder Nightly packen möchte, funktionieren dann die strittigen Buttons?

Ja, die betroffenen Buttons funktionieren auch in der Release und der Nightly, aber auch ohne das Skript aus #1!

Da du die Erzeugung der 'toolbox' in deinem Skript direkt als Kind der 'navigator-toolbox' ausführst, ist auch die neue 'toolbar' mit samt der Buttons wieder Teil der Navigator-Toolbox und damit fällt der Anwendungsfall für das FixToolbarButton-Skript weg. Man braucht es schlicht und einfach in diesem Fall nicht.

Hier liegt der Hund begraben: document.getElementById('navigator-toolbox').appendChild(toolbox_new);

Was tb.setAttribute("toolboxid","navigator-toolbox"); bewirken soll, verstehe ich nicht?

Mit der Positionierung und Sichtbarkeit scheint es (zumindest hier) nicht vernünftig zu funktionieren. Die toolbar wird nur innerhalb der 'navigator-toolbox' sichtbar...

Horstmann

Zitat von BrokenHeart

Zitat von Horstmann

Nur mal aus Neugierde: wenn jemand dieses Script mal in die aktuelle FX oder Nightly packen möchte, funktionieren dann die strittigen Buttons?

Ja, die betroffenen Buttons funktionieren auch in der Release und der Nightly, aber auch ohne das Skript aus #1!
Hier liegt der Hund begraben: document.getElementById('navigator-toolbox').appendChild(toolbox_new);
Was tb.setAttribute("toolboxid","navigator-toolbox"); bewirken soll, verstehe ich nicht?
Mit der Positionierung und Sichtbarkeit scheint es (zumindest hier) nicht vernünftig zu funktionieren. Die toolbar wird nur innerhalb der 'navigator-toolbox' sichtbar...

Danke für's Testen.

Nur um sicher zu gehen: mit diesem (sehr groben Versuchs-) Script funktionieren die fraglichen Buttons also ohne Zusatzscript, im Gegensatz zu anderen Versionen von Zusatzleisten, die das Zusatzscript von dir benötigen würden?

Was das tb.setAttribute("toolboxid","navigator-toolbox"); angeht, das ist mir tatsächlich erst vor kurzem aufgefallen - ein Überbleipsel vermutlich, und macht tatsächlich keinen Sinn (und noch ein paar mehr Einträge) - das Script ist nicht von mir, das hatte ich hierfür vor langem mal gebastelt, basierend auf irgendwas noch älterem, ich glaube von Aris.

Bzgl. der Sichtbarkeit - du hast da anscheinend ein Mehrzeilen-Tabs Script mit am laufen, das ist nicht fair!
Da das Ding ein im Fenster schwebendes Element ist, müsste man das eigentlich in den Vordergrund bekommen können; in der navigator-toolbox soll es sowieso nicht auftauchen, daher müsste man die Höhe der Leiste auf das #browser Fenster beschränken.

Meine einzige Frage ist momentan aber eigentlich nur die oben erwähnte - lässt sich die Benutzung von deinem - wie immer grossartigen! - Zusatzscript generell und eventuell für eine gewisse Art von Zusatzleiste vermeiden.
Was ja nett wäre, weil es halt eine Menge extra Code ist.
Nicht dass ich Ahnung davon hätte, du hast hier die Expertise.

Wie man das dann am besten anwendbar umsetzt, falls möglich, das ist eine andere Frage ; mein extrem grobes Script hier ist nur zum Testen des Prinzips gedacht.

Fix: Toolbar-Buttons reagieren nicht mehr ab FF 134

BrokenHeart 2. Februar 2025 um 18:11

Ähnliche Themen

Mehrzeilige Tableiste für aktuelle Firefox-Versionen

Problem mit Darstellung Lesezeichen Symbolleiste

Jetzt geht kein Script mehr.