Beiträge von Horstmann

Horstmann

Zitat von pupil

Mit diesem Zusatz wird der im CSS-Teil angesprochene obere rote Rand der Tab-Leiste durchgehend angezeigt. Der Rest wie gehabt.

Screenshots wären prima.

CSS

#TabsToolbar {
    z-index: 12 !important;
    background-color: var(--toolbar-bgcolor) !important;
}

Der Code aus #17 liesse sich auch umschreiben, aber der Anwendungsfall ist sehr speziell.

Horstmann

Zitat von Horstmann
Zitat von pupil
JavaScript
JS Code
#1 könnte evtl. auch die Tableiste unter den Browserinhalt setzen, was nochmal was anderes ist.

Solange die Zusatzleiste nicht komplett voll ist, kann man in deinem JS, im CSS Abschnitt, als visuellen Fix sowas probieren:

CSS

#TabsToolbar {
    z-index: 12 !important;
}

Horstmann

Zitat von pupil
JavaScript
JS Code

Zitat von milupo
Ich hatte vor langer Zeit mal ein kurzes Skript für die Tableiste ganz unten getestet. Da war in der Zeile mit navigator-toolbox (im vorstehenden Beitrag Zeile 8 ) doppeltes parentNode. Das wäre oben:
JavaScript
document.getElementById("navigator-toolbox").parentNode.parentNode.insertBefore( vbox, null);

Also, nur mal so gelesen und kurz getestet, und ohne ins Detail zu gehen - beide Codes scheinen die Tableiste ausserhalb der navigator-toolbox zu platzieren, #1 zumindest in aktuellen, #2 auch in alten Fx Versionen.
#1 könnte evtl. auch die Tableiste unter den Browserinhalt setzen, was nochmal was anderes ist.

Nix gut, so der Fachbegriff.

Kann in meinem Script und zusammen mit vermutlich vielen anderen nicht funktionieren.
In diesem Fall wird die Höhe der navigator-toolbox gelesen - was nicht drin ist wird nicht berücksichtigt.
Könnte man anpassen, aber wie gesagt sollte das via einem besseren Code für Tabs unten gelöst werden, imho.

Für Tabs unten gibt es hier im Forum ein Sticky, und wie so oft auch Lösungen bei MOG (tabs bottom).

Horstmann

Zitat von pupil

Ich habe das Script aus #17 ausprobiert. Finde ich gut. Hat jedoch ein kleines Manko. Die Tab-Leiste ist bei mir unten. Wenn die Leiste links ist, kein Problem. Ist sie jedoch auf der rechten Seite, wird die Tab-Leiste am rechten Rand verdeckt. Kann das ev. angepasst werden.

Das hängt davon ab, wie du die Tableiste nach unten gesetzt hast, den Code dafür müsste man sehen.
Und Screenshots helfen auch.

Mein Verdacht wäre, dass du evtl. ein altes CSS/JS benutzt, das die Tableiste auf position: fixed o.ä. setzt; das kann man hier im Prinzip anpassen, aber man sollte einen aktuelleren Code für den Zweck benutzen, falls das Obige zutrifft.

Horstmann

Zitat von Boersenfeger

Schließe mich an....

Zitat von Mira_Belle

Nachträglich noch alles Gute!

Zitat von BarbaraZ-

Auch von mir noch nachträglich alles gute.

Dankeschön!!!

Horstmann

Zitat von milupo

Hallo Horstmann, noch alles Gute zum Geburtstag! Habe gerade erst gesehen, dass du heute Geburtstag hast.

Zitat von Sören Hentzschel

Nachträglich alles Gute!

Vielen Dank!!!

Horstmann

Zitat von Mitleser

2002Andreas , in der Praxis ziehe ich oft Links von der Leiste ins Dropdown und wieder zurück, einfach weil ich das Lesezeichen für einen bestimmten Zeitraum häufiger/seltener benötige. Auf Linux behält das Lesezeichen mit definiertem Text nur sein Icon mit .bookmark-item[label$=".txt"] :is(img, image), jedoch nicht mit .bookmark-item[label$=".txt"] > img. Wie sich das in Windows verhält kann ich leider nicht testen.

Ich hab mir das mal in Fx 143 (! ), angeschaut.

Meine Vermutung, basierend darauf, es lässt sich ein Icon in der Lesezeichenleiste und im Popup zwar mit der Variable --bookmark-item-icon (ist ein --menuitem-icon) überschreiben, und auch Page Icons via content, die Leiste benutzt aber nach wie vor XUL image, und nicht Html img wie im Popup, s. auch Screenshots.

Daher braucht man beides image + img um Leiste und Popup abzudecken, ausser man benutzt --bookmark-item-icon, was aber wohl einen unpraktischen absoluten Dateipfad benötigt.

Soweit meine Theorie.

Horstmann

Zitat von .DeJaVu

Und ja, es wird im Dropdown der Lesezeichenleiste richtig angezeigt, aber nicht in der Sidenbar und nicht als Webseite
chrome://browser/content/places/bookmarksSidebar.xhtml
Ich vergesse nur immer, wie ich die Sidebar debuggen kann.

Schau mal hier nach, Mitleser hat da Einiges zusammengestellt.

Horstmann

Zitat von .DeJaVu
Code
.bookmark-item[label$=".txt"] > img
Ist aber nichts Neues im Forum, das hat Andreas jetzt so oft korrigiert.

Yupp, das kommt ursprünglich aber aus der oben verlinkten Thread, 2te Seite, wenn du die mal durchlesen willst.

Horstmann

Zitat von harff182

Zitat von Horstmann

Das wäre dann nur für die Icons im Popup aus deinem Screenshot.

Das Popup ist aus der Lesezeichenleiste, nicht dem Menü...

Nicht ganz klar, aber ich hab einen Fehler gemacht, oben jetzt evtl. korrigiert.

Horstmann

Zitat von harff182

Bleibt wie es ist.

Anstelle von deinem Code aus #1, probier mal:

CSS

.bookmark-item[label$=".txt"] img {
    content: url('../icons/text.png') !important;
}

Das wäre dann nur für die Icons aus deinem Screenshot, etwas allgemein gefasst.
Ansonsten hattest du die fast gleiche Frage schon mal gestellt, wenn ich mich nicht täusche.

Horstmann

Screenshots wären prima.
Und der seltsame Code hat mal funktioniert, wo kommt der denn her?

Es gibt auch viele aktuelle Themen zu Icons, gerade auch für bookmarks, schätze da wäre was dabei.

Horstmann

Zitat von Dato

wenn man Youtube Videos in Vollbild schaut, dann ist die Tableiste unten am Bildschirm sichtbar.
gibt es da eventl eine Lösung das die nicht im Vollbild zu sheen ist ?

Zitat von 2002Andreas

Also soll sie weg wie ich das verstanden habe.

So hab ich das das verstanden, nur speziell für YT Player etc., aber nur der OP kann das Rätsel lösen.

Horstmann

Zitat von 2002Andreas

Das Skript funktioniert einwandfrei, aber die Tableiste wird im Vollbildmodus auch nicht ausgeblendet.

Was ist mit Video-Vollbildmodus, also zB auf YT den Player auf Vollbildmodus setzen, nicht das Fx Fenster?
Solange Werkzeugleisten noch angezeigt werden, inkl. Fx Vollbildmodus, soll die Tableiste ja wohl auch nicht verschwinden.

Horstmann

Zitat von Dato

Frage zu diesem Scrip.
wenn man Youtube Videos in Vollbild schaut, dann ist die Tableiste unten am Bildschirm sichtbar.

gibt es da eventl eine Lösung das die nicht im Vollbild zu sheen ist ?

Was das angeht: vbox, document.getElementById("browser-bottombox"));.

Davon abesehen dass die Syntax seltsam aussieht, browser-bottombox gibt's schon eine Weile nicht mehr.
Poste evtl. dein aktuelles JS, und deine Fx Version.

Horstmann

Zitat von Dharkness

Letzten Endes wird alles gut, nun lässt sie sich bestücken und sie hält die bestückten Buttons auch nach Beenden oder Neustart, also alles gut.

Zitat von grisu2099

Die scheint es zu tun - Nightly und Release...
EDIT: Sie tut es auch, wenn der Name nicht mit 000 anfängt. Ich habe einfach mit Name "neu.js" getestet...

Danke!

Dann werd ich das Ganze bei Gelegenheit mal ordentlich und hübsch machen, es gibt ja zZ andere Leisten die funktionieren bzw. gefixt wurden; ausserdem gäbe es vermutlich noch viel zu testen für das Ding.
Ausser es hat jemand Eile.

Bzgl. 00 , deshalb.
Eigene Buttons können Probleme machen, wenn die Leiste nicht früher geladen wird.

Horstmann

Danke für's testen!

Scheint so als ob ein bestimmter Schlaumeier nicht die leere Leiste getestet hat...

Sorry, hier nochmal Einer:

JavaScript

//Toggle newtoolbar 8D Fix neu test browser

//Use filename starting with 000 !! =>
//000_extra_toolbars_test_D.uc.js

// TEST!!!

(function() {

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

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

        let new_tb_loc = 0;        //  Position: 0 Rechts , 1 Links , 2 Bottom
        let new_tb_off = 0;        //  0 Startzustand On , 1 Startzustand Off

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

        let browser_size = document.getElementById("browser");
        let rect = browser_size.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);

        document.getElementById('browser').parentNode.appendChild(toolbox_new);

        //geht height #2 not dynamic ???
        //document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.height + 'px');
        document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.top + '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");
       }
    else if (new_tb_loc === 2) {
         toolbox_new.classList.add("bottom_mode");
         browser.classList.add("bottom_mode_b");
       }

    // Startzustand
    if (new_tb_off === 1) {
        newtoolbar.classList.add("off-mode");
        browser.classList.add("off-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: 36px;
    --ug-newbar_bg_color: lightblue;
}

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

#newtoolbar > :is(.toolbarbutton-1, toolbaritem),
#newtoolbar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
    margin-block: 2px !important;
}

/*  Basis / Right */

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

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

#toolbox_new {
    position: fixed;
    z-index: 4 !important;
    display: flex;
    width: fit-content;
    bottom: 0;
    right: 0;
}

#newtoolbar {
    display: flex;
    flex-direction: column;
    min-width: 0 !important;
    width: var(--ug-newbar_width);
    height: calc(100vh - var(--height_newbar));
    padding-block: 8px;
    background-color: var(--ug-newbar_bg_color) !important;
    box-shadow: -1px 0 grey;
    transition: width 0.25s ease, margin 0.25s 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:not([customizing]) {
    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;
    width: fit-content;
}
.bottom_mode #newtoolbar:not([customizing]) {
    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:not([customizing]) > :is(.toolbarbutton-1, toolbaritem) {
    margin-block: 0 !important;
    margin-inline: 2px !important;
}

/*  customizing  */

:root[customizing] #toolbox_new {
    position: fixed !important;
    bottom: 0 !important;
    right: 0 !important;
    left: unset !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 Dharkness

Zitat von Horstmann

Und das hier: ?

Leider nicht, ist sichtbar, aber lässt sich nicht bestücken.

Den letzten Code habe ich gerade im aktuellsten Release 143.x und Nightly getestet, funktioniert prima.

Horstmann

Zitat von Dharkness

Zitat von Horstmann

Nur mal ganz schnell und grob, geht das hier generell? :

Ist sichtbar, aber lässt sich nicht mit Buttons belegen.

Schade, Danke für's testen!

Und das hier: ?

JavaScript

//Toggle newtoolbar 8C neu test browser

//Use filename starting with 000 !! =>
//000_extra_toolbars_test_B.uc.js

// TEST!!!

(function() {

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

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

        let new_tb_loc = 0;        //  Position: 0 Rechts , 1 Links , 2 Bottom
        let new_tb_off = 0;        //  0 Startzustand On , 1 Startzustand Off

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

        let browser_size = document.getElementById("browser");
        let rect = browser_size.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);

        document.getElementById('browser').parentNode.appendChild(toolbox_new);

        //geht height #2 not dynamic ???
        //document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.height + 'px');
        document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.top + '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");
       }
    else if (new_tb_loc === 2) {
         toolbox_new.classList.add("bottom_mode");
         browser.classList.add("bottom_mode_b");
       }

    // Startzustand
    if (new_tb_off === 1) {
        newtoolbar.classList.add("off-mode");
        browser.classList.add("off-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: 36px;
    --ug-newbar_bg_color: lightblue;
}

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

#newtoolbar > :is(.toolbarbutton-1, toolbaritem),
#newtoolbar toolbarpaletteitem > :is(.toolbarbutton-1, toolbaritem) {
    margin-block: 2px !important;
}

/*  Basis / Right */

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

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

#toolbox_new {
    position: fixed;
    z-index: 4 !important;
    display: flex;
    width: fit-content;
    bottom: 0;
    right: 0;
}

#newtoolbar {
    display: flex;
    flex-direction: column;
    width: var(--ug-newbar_width);
    height: calc(100vh - var(--height_newbar));
    padding-block: 8px;
    background-color: var(--ug-newbar_bg_color) !important;
    box-shadow: -1px 0 grey;
    transition: width 0.25s ease, margin 0.25s 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:not([customizing]) {
    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;
    width: fit-content;
}
.bottom_mode #newtoolbar:not([customizing]) {
    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:not([customizing]) > :is(.toolbarbutton-1, toolbaritem) {
    margin-block: 0 !important;
    margin-inline: 2px !important;
}

/*  customizing  */

:root[customizing] #toolbox_new {
    position: fixed !important;
    bottom: 0 !important;
    right: 0 !important;
    left: unset !important;
}

#newtoolbar[customizing] {
    min-width: 0 !important;
    width: fit-content !important;
    height: calc(100vh - var(--height_newbar) + 1px);
    padding-top: 9px;
}

/*
.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 Dharkness

Zitat von Horstmann

Kannst mal das hier testen, keine Garantie auf Funktion.

Erscheint leider auch nicht im Anpassen-Fenster.

Mist verdammter...

Nur mal ganz schnell und grob, geht das hier generell? :

Dateiname Script mit 00 beginnen:

JavaScript

//Toggle newtoolbar 8C test browser

(function() {

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

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

        let new_tb_loc = 0;        //  Position: 0 Rechts , 1 Links , 2 Bottom
        let new_tb_off = 0;        //  0 Startzustand On , 1 Startzustand Off

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

        let browser_size = document.getElementById("browser");
        let rect = browser_size.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);

        document.getElementById('browser').parentNode.appendChild(toolbox_new);

        //geht height #2 not dynamic ???
        //document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.height + 'px');
        document.getElementById('toolbox_new').style.setProperty('--height_newbar', rect.top + '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");
       }
    else if (new_tb_loc === 2) {
         toolbox_new.classList.add("bottom_mode");
         browser.classList.add("bottom_mode_b");
       }

    // Startzustand
    if (new_tb_off === 1) {
        newtoolbar.classList.add("off-mode");
        browser.classList.add("off-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;
}

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

#newtoolbar > :is(.toolbarbutton-1, toolbaritem) {
    margin-block: 2px !important;
}

/*  Basis / Right */

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

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

#toolbox_new {
    position: absolute;
    display: flex;
    width: fit-content;
    bottom: 0;
    right: 0;
}

#newtoolbar {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    /*z-index: 4 !important;*/
    width: var(--ug-newbar_width);
    height: calc(100vh - var(--height_newbar));
    padding-block: 8px;
    background-color: var(--ug-newbar_bg_color) !important;
    box-shadow: -1px 0 grey;
    transition: width 0.5s ease, margin 0.5s ease, height 0.75s 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 > :is(.toolbarbutton-1, toolbaritem) {
    margin-block: 0 !important;
    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

Beiträge von Horstmann

Eigene Zusatzleisten ab ff 143+

Eigene Zusatzleisten ab ff 143+

Eigene Zusatzleisten ab ff 143+

Eigene Zusatzleisten ab ff 143+

Der Glückwunsch-Thread

Der Glückwunsch-Thread

"visibility: hidden" ohne Funktion

"visibility: hidden" ohne Funktion

"visibility: hidden" ohne Funktion

"visibility: hidden" ohne Funktion

"visibility: hidden" ohne Funktion

"visibility: hidden" ohne Funktion

Tableiste GANZ unten Script funktioniert nicht mehr?

Tableiste GANZ unten Script funktioniert nicht mehr?

Tableiste GANZ unten Script funktioniert nicht mehr?

Vertikale Zusatzleiste

Vertikale Zusatzleiste

Vertikale Zusatzleiste

Vertikale Zusatzleiste

Vertikale Zusatzleiste