Beiträge von Horstmann

Horstmann

Zitat von Mira_Belle
JavaScript
 

Dankeschön!

Zitat von Mitleser
Oder so mit 2 Icons:
JavaScript
2

Horstmann

Zitat von 2002Andreas

Evtl. kann dir Horstmann ja sein angepasstes Skript bezüglich der Pfade geben.

Kanner, wenn's denn auch klappt.

Ich habe am Script von 2002Andreas etwas herumgepfuscht, scheint soweit zu funktionieren.
Das Icon (eines hängt wieder unten an) wird wieder in Profilname/chrome/icons erwartet, der Pfad ist im Script eingebunden, wie von Mira_Belle mal ausgetüftelt.

Die CSS zur Anpassung der Zustände Ein/Aus ist ausgelagert in eine externe CSS Datei, mach ich selber meist so, und war jetzt zu faul wieder nachzuschauen wie man das noch ins Script packt.

In der CSS kann man beliebig Anpassungen vornehmen, hier ist jetzt nur das Icon bzw. Label im Aus Zustand bleicher gemacht.

Script:

JavaScript

// https://www.camp-firefox.de/forum/thema/136599-tooltips-nur-f%C3%BCr-die-bedienoberfl%C3%A4che-ausschalten/?postID=1249369#post1249369

// tooltip-toggle_5.uc.js raus#1


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

    try {
        CustomizableUI.createWidget({
            id: 'tooltip_button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
                onBuild: function(aDocument) {
                var currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
                var buttonicon = "LettersT-2.png";      
                    var toolbaritem = aDocument.createXULElement('toolbarbutton');
                    var props = {
                        id: 'tooltip_button',
                        class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                        removable: true,
                        label: 'Tooltip Toggle',
                        tooltiptext: "toggle tooltips",
                        style: 'list-style-image: url("' + ("file:" + currentProfileDirectory + "/chrome/icons/" + buttonicon) + '");',
                        background: Services.prefs.getBoolPref('browser.chrome.toolbar_tips') ?
                  'red' : 'cyan',
                        oncommand: '(' + onCommand.toString() + ')()'
                };
                for (var p in props)
                    toolbaritem.setAttribute(p, props[p]);
                return toolbaritem;
            }
        });
       } catch(e) { };  

    function onCommand() {

               var prefs = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefBranch);

               var isEnabled = !prefs.getBoolPref('browser.chrome.toolbar_tips');
               prefs.setBoolPref('browser.chrome.toolbar_tips', isEnabled);

               if (isEnabled)
                     tooltip_button.setAttribute('background', 'red')
               else
                     tooltip_button.setAttribute('background', 'cyan');
    };

})();

Alles anzeigen

CSS:

CSS

/* tooltips OFF adjustments */
/* button in toolbar */
toolbar:not([customizing]) #tooltip_button[background ="cyan"]:not(:hover, :active) .toolbarbutton-icon {
    opacity: 0.5 !important;
}

/* button in overflow menu */
:root:not([customizing]) #tooltip_button[background ="cyan"] label {
    opacity: 0.5 !important;
}


/* tooltips on adjustments, optional */
/*
#tooltip_button[background ="red"]:not(:hover, :active) .toolbarbutton-icon {
    outline: 2px solid green !important;
    outline-offset: -1px !important;
}
*/

Alles anzeigen

Horstmann

Zitat von 2002Andreas

Zitat von lenny2

Da es sich um eine button mit zwei Positionen handelt

Ich kann nur ein völlig anderes Skript geben.
Wenn du/jemand testen möchte:

Klappt soweit prima, Dankeschön!

Für die Icons hab ich zum Testen auf die Schnelle noch etwas in einer CSS Datei dazu gepackt, um mich nicht mit den Dateipfaden rumärgern zu müssen; die Icons hier wieder in chrome/icons.

CSS

#Tooltip-button[tooltiptext="Tooltip gesperrt"] {
    list-style-image: url("icons/T rot.svg") !important;
}

#Tooltip-button[tooltiptext="Tooltip frei"] {
    list-style-image: url("icons/T grün.svg") !important;
}

Horstmann

Zitat von grisu2099

Vielleicht kannst du aus folgendem Skript die nötigen Infos ziehen. Damit wird eine vertikale Toolbar aus/eingeschaltet und jeweils ein anderes Icon erscheint.

Danke, aber ich weiss nicht wie ich in dem speziellen Fall den Status false oder true angeben kann/sollte, dazu sind meine Javascript Kenntnisse zu rudimentär.

Ich habe schon Stunden gebraucht, um nur das Umschalten zwischen false und true hinzubekommen.
Dem Button kann ich recht einfach umschaltbare Attribute und Klassen bei Mausklick zuweisen, aber halt nicht bezogen auf einen spezifischen Status.

Wenn ich zB das obige Script so ändere, mit dem tooltip_button.classList.toggle Eintrag in Zeile 44:

JavaScript

// tooltip-toggle_1b.uc.js


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

    try {
        CustomizableUI.createWidget({
            id: 'tooltip_button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
                onBuild: function(aDocument) {
                var currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
                var buttonicon = "LettersT-2.png";      
                    var toolbaritem = aDocument.createXULElement('toolbarbutton');
                    var props = {
                        id: 'tooltip_button',
                        class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                        removable: true,
                        label: 'tooltip toggle',
                        tooltiptext: "tooltip toggle",
                    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('tooltip_button').addEventListener( "click", onClick );

    let prefs = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefBranch);

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

        prefs.setBoolPref("browser.chrome.toolbar_tips", !prefs.getBoolPref("browser.chrome.toolbar_tips"));
        tooltip_button.classList.toggle("tooltips_off");
  }

})();

Alles anzeigen

Dann schaltet der Button um mit etwa so einem CSS:

CSS

#tooltip_button.tooltips_off {
    background-color: red !important;
}

Aber abhängig davon was der Ausgangswert war, ist der Button Hintergrung dann entweder Rot bei false, oder bei true.

Die Lösung mag in dem dem von Dir zitierten Code stecken, aber für ein JS Amateur wie mich wäre es zuviel Aufwand das herrauszufinden.

Für einen Experten aber sicher ein Klacks.

Horstmann

Zitat von lenny2

Die Taste funktioniert. Da es sich um eine button mit zwei Positionen handelt, wäre es gut, wenn die Position der Taste angegeben würde, z. B. T und ein diagonal gekreuztes T

Danke für's Testen.

Und das ist eine gute Idee, aber ich weiss nicht wie ich die beiden Zustände true/false als Attribute oder Class einfügen kann.

Falls man eines der beiden hätte, könnte man mit CSS die Icons, den Text etc. für den Status manipulieren.

Horstmann

Nachdem die obigen Lösungen bei mir ein paar Probleme machten, habe ich mal ein Script gebastelt, um die Tooltips per Button ein- und auszublenden.

Könnt Ihr ja mal probieren; es spart den Umweg über about:config, und scheint hier zu funktionieren.
Das Icon wird in einem Ordner namens icons erwartet, im chrome Ordner, ein Icon zum Testen hängt bei.

JavaScript

// tooltip-toggle_1c.uc.js


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

    try {
        CustomizableUI.createWidget({
            id: 'tooltip_button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
                onBuild: function(aDocument) {
                var currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
                var buttonicon = "LettersT-2.png";      
                    var toolbaritem = aDocument.createXULElement('toolbarbutton');
                    var props = {
                        id: 'tooltip_button',
                        class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                        removable: true,
                        label: 'Tooltip Toggle',
                        tooltiptext: "toggle tooltips",
                    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('tooltip_button').addEventListener( "click", onClick );

    let prefs = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefBranch);

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

        prefs.setBoolPref("browser.chrome.toolbar_tips", !prefs.getBoolPref("browser.chrome.toolbar_tips"));
  }


})();

Alles anzeigen

Horstmann

Danke für den Artikel!

Hört sich interessant an, werde ich mal antesten.

Horstmann

Zitat von Endor

funktioniert

Horstmann

Zitat von Endor

Teste mal ob das so passt.
Vielleicht hat ja jemand eine Idee wie man das Symbol auch noch fett kriegt.

Man könnte stroke hinzufügen, evtl. sowas:

Code

<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="#d90000" fill-opacity="1.0" stroke="#d90000" stroke-width="1">
  <path d="m9.108 7.776 4.709-4.709a.626.626 0 0 0-.884-.885L8.244 6.871l-.488 0-4.689-4.688a.625.625 0 1 0-.884.885L6.87 7.754l0 .491-4.687 4.687a.626.626 0 0 0 .884.885L7.754 9.13l.491 0 4.687 4.687a.627.627 0 0 0 .885 0 .626.626 0 0 0 0-.885L9.108 8.223l0-.447z"/>
</svg>

Den stroke-width Wert kann man dann anpassen nach Gusto.

Horstmann

Zitat von bluuubb33

Hallo, ich wollte:
1) Höhe der Tabs verkleinern: Wie auf dem Screenshot zu sehen ist der Tab kleiner geworden, jedoch entsteht unter dem Tab ein Leerraum. Wie bekomme ich diesen weg?
2) Webseite Icon nach oben verschieben: Auf dem Screnshot kann man erkennen das das Webseiten-Icon (in diesem Fall von Firefox) zu weit unten ist. Wie kann ich das beheben?

Als ersten Schritt würde ich den Code für die Tabs nehmen, und in die Tonne klopfen.
Die Farben könntest du evtl. behalten, ist aber auch nicht das Wahre; die Positionierung der Elemente geht so aber nicht.

Danach kommt es darauf an, wie du die Tabs haben möchtest: nur die Höhe (der Leiste oder der Tabs?) geringer, mit oder ohne Abstand oben/unten und seitlich, und jeweils wieviel.

Das kann man alles anpassen, nur müsstest du genauer beschreiben was du haben möchtest.

Horstmann

Verstehe, danke für die Erklärung.

Wenn ich endlich einen neuen Mac habe und aus meiner ESR Hölle rauskomme, gehe ich das Nesting an, scheint ja relativ einfach zu sein.

Und ja, CSS hübscher machen ist immer nett.

Horstmann

Zitat von Sören Hentzschel

.... Dafür gibt es keinen :is()-Selektor mehr, der durch die Verschachtelung nicht mehr notwendig ist,

Moment - heisst das :is funktioniert nicht mehr mit Firefox, oder wird der Selektor nur nicht mehr benutzt im CSS Code?
Ich vermute ja eher Letzteres, wollte aber mal nachfragen.

Horstmann

Zitat von Firefox_94.0.1

Zitat von Horstmann

Zitat von Firefox_94.0.1

Wie würdest du das überdenken? Woran erkenne ich, ob der Code nichts macht bzw falsch ist?

.... Der Übersicht halber habe ich oben nur den Code für die hier relevante Lesezeichenleiste eingestellt. Daher macht die Farbgebung von nur dem geposteten Code tatsächlich keinen Sinn.

Dann gibt's dazu nichts weiter zu sagen von meiner Seite - ohne Code kein Brot! (ahem; reimt sich aber )

Anscheinend haben sich ein paar Properties geändert für die Bookmark Icons, der Code von weiter oben sollte eine Weile halten.

Horstmann

Zitat von Firefox_94.0.1

Wie würdest du das überdenken? Woran erkenne ich, ob der Code nichts macht bzw falsch ist?

Da würde ich gerne helfen, weiss aber nicht was dein Code genau machen soll.

Wenn ich den bei mir reinstelle, macht farblich kaum was Sinn, auch bei verschiedenen Themes.
Man müsste noch wissen welches Theme du benutzt, ob noch anderen CSS Code, oder evtl. Erweiterungen wie Firefox Color.

Den ::part Part hat Milupo ja schon erwähnt.

Aber wenn's jetzt wieder klappt, dann ist ja gut.

Horstmann

Zitat von Firefox_94.0.1

... , funktioniert wie gewünscht.

Den Code würde ich bei Gelegenheit mal überdenken; der ist überladen und unnötig komplex, macht teilweise gar nix oder ist schlicht falsch, und adaptiert sich nicht sauber für viele Themes.

Zitat von 2002Andreas
Teste bitte mal:
Code
....

Hilfreicher wäre es generell schon, die Lösung auch einfach mit dazu zu anzugeben und kurz tz beschreiben, dann haben auch noch andere was davon.

Den gesamten Codeschlamassel sollte wohl keiner übernehmen.

Horstmann

Zitat von Dicken

Falls doch irgendwer noch einen Tipp für mich hat, ...

Du könntest noch sowas hier probieren, ist eine Variante der klassischen Zusatzleiste, davon gibt es hier noch viele weitere Beispiele; der Klassiker ist wohl eine von Aris.

Mit dem Hinzufügen von Links kenne ich mich noch weniger aus als mit dem Rest von Javascript, aber hab mal ein extra Script für zumindest einen Linkbutton gebastelt. Es geht bestimmt eleganter, aber das Forum hier scheint zZ etwas beratungsmüde.

Die Icons hängen unten an, kannst natürlich eigene benutzen; diese Scripts gehen davon aus, dass diese Icons in einem Ordner namens icons im chrome Ordner sind.

Ein Button zum komplett ausblenden ist auch integriert.

JavaScript

//Toggle newtoolbar 7D


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

        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) + '");',
                    };

                    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;
    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;
    transition: width 0.5s ease, margin-left 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));
}

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

        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

Link Button:

JavaScript

//  link button
  
  (function() {

   if (location != 'chrome://browser/content/browser.xhtml') return;
    
    try {
        CustomizableUI.createWidget({
            id: 'Link1_Button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
            onBuild: function(aDocument) {            
                let currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
                let buttonicon = "google1px.png"
                let toolbaritem = aDocument.createXULElement('toolbarbutton');
                let props = {
                    id: 'Link1_Button',
                    class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                    label: 'Google',
                    tooltiptext: 'Link1_Button Tip',
                    style: 'list-style-image: url("' + ("file:" + currentProfileDirectory + "/chrome/icons/" + buttonicon) + '");',

                    onclick: 'if (event.button == 0) { \
                                        openTrustedLinkIn("https://www.google.com/", "tab");\
                                 }; '
                };
                for (let p in props)
                    toolbaritem.setAttribute(p, props[p]);
                return toolbaritem;
            }
        });
    } catch(e) { };
   
})();

Alles anzeigen

Horstmann

Zitat von lenny2

Ist es Ihr Ziel, Ihr eigenes vertikales Paneel zu entwerfen...

Genau; die Leisten von Aris kenne ich, sind mir aber zu überfrachtet und unflexibel.

Horstmann

Ich bastle zum xten Mal an einer zusätzlichen Toolbar rum.

Ein wiederkehrendes Problem ist, dass diese Toolbar je nach Konfiguration nicht im Anpassen Fenster angezeigt wird.

Was funktioniert ist zB dieser (sehr grobe Test-) Code; der benutzt document.getElementById('browser').parentNode.appendChild(tb);:

JavaScript

//Toggle newtoolbar


(function() {

    if (location.href !== 'chrome://browser/content/browser.xhtml')
        return;
    
    setTimeout(function() {
        setFunction();
    },50);

    function setFunction() {

        const css =`

#newtoolbar3 {
    position: absolute;
    display: flex;
    top: 310px;
    z-index: 444 !important;
    left: 0;
    min-width: unset !important;
    width: 36px;
    height: 50%;
    max-height: 100% !important; 
    background-color: powderblue !important;
}

#newtoolbar3.wide-mode {
    width: 136px;
    background-color: orange !important;
}

#newtoolbar3[customizing] {
    background-color: pink !important;
}

#NewToolbar-button .toolbarbutton-icon {
    list-style-image: url("chrome://browser/skin/bookmark-hollow.svg") !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);
}

        var tb = document.createXULElement('toolbar');
        var tb_label = "New Toolbar";
        tb.id = 'newtoolbar3';

        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);
        //tb.setAttribute('insertbefore','appcontent');


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

        //document.getElementById('appcontent').parentNode.appendChild(tb);   

        CustomizableUI.registerArea('newtoolbar3', {legacy: true});
        CustomizableUI.registerToolbarNode(tb);


   try {
        CustomizableUI.createWidget({
            id: 'NewToolbar-button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
                onBuild: function(aDocument) {
                    var toolbaritem = aDocument.createXULElement('toolbarbutton');
                    var props = {
                        id: 'NewToolbar-button',
                        class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                        removable: true,
                        label: 'Toggle New Toolbar',
                        tooltiptext: 'Toggle New toolbar',
                    };
                    
                    for(var 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;    
        }

        newtoolbar3.classList.toggle("wide-mode");
     }

})();

Alles anzeigen

Was nicht funktioniert für das Anapssen Fenster, ist dieser Code, mit document.getElementById('appcontent').parentNode.appendChild(tb);

CSS

//Toggle newtoolbar


(function() {

    if (location.href !== 'chrome://browser/content/browser.xhtml')
        return;
    
    setTimeout(function() {
        setFunction();
    },50);

    function setFunction() {

        const css =`

#newtoolbar3 {
    position: absolute;
    display: flex;
    top: 310px;
    z-index: 444 !important;
    left: 0;
    min-width: unset !important;
    width: 36px;
    height: 50%;
    max-height: 100% !important; 
    background-color: powderblue !important;
}

#newtoolbar3.wide-mode {
    width: 136px;
    background-color: orange !important;
}

#newtoolbar3[customizing] {
    background-color: pink !important;
}

#NewToolbar-button .toolbarbutton-icon {
    list-style-image: url("chrome://browser/skin/bookmark-hollow.svg") !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);
}

        var tb = document.createXULElement('toolbar');
        var tb_label = "New Toolbar";
        tb.id = 'newtoolbar3';

        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);
        //tb.setAttribute('insertbefore','appcontent');


        //document.getElementById('browser').parentNode.appendChild(tb);   

        document.getElementById('appcontent').parentNode.appendChild(tb);   

        CustomizableUI.registerArea('newtoolbar3', {legacy: true});
        CustomizableUI.registerToolbarNode(tb);


   try {
        CustomizableUI.createWidget({
            id: 'NewToolbar-button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
                onBuild: function(aDocument) {
                    var toolbaritem = aDocument.createXULElement('toolbarbutton');
                    var props = {
                        id: 'NewToolbar-button',
                        class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                        removable: true,
                        label: 'Toggle New Toolbar',
                        tooltiptext: 'Toggle New toolbar',
                    };
                    
                    for(var 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;    
        }

        newtoolbar3.classList.toggle("wide-mode");
     }

})();

Alles anzeigen

Im Prinzip sind mir die Abhängigkeiten unklar, die ein Element im Anpassen Fenster auftauchen lassen und ein anderes nicht; unklar ist mir auch alles was Javascript angeht.

Ideen und Vorschläge willkommen!

Horstmann

Das exakt gleiche Problem habe ich schon lange, mindestens seit einem Jahr; manchmal will die DHL Seite einfach nicht.

Auch nach vielen Versuchen die genaue Ursache zu finden - kein Erfolg.
Es scheint als ob die DHL Website oft ein Problem mit egal welchen vorhandenen Firefox Modifikationen hat, oft aber auch nicht.

Direkte Links zu zB Sendungsverfolgungen funktionieren aber eigentlich immer, auch wenn der Login spinnt.
Hier ist das auf einem Mac.

Horstmann

Zitat von Mira_Belle

Aber auch als ich meinen Fehler bemerkte und in meinem Testprofil ohne andern CSS ausprobierte
funktionierte er nicht.

Schade, aber Danke für's probieren!

Beiträge von Horstmann

Tooltips nur für die Bedienoberfläche ausschalten?

Tooltips nur für die Bedienoberfläche ausschalten?

Tooltips nur für die Bedienoberfläche ausschalten?

Tooltips nur für die Bedienoberfläche ausschalten?

Tooltips nur für die Bedienoberfläche ausschalten?

Tooltips nur für die Bedienoberfläche ausschalten?

Website-Builder Solo von Mozilla: Website kann jetzt mit eigener Domain genutzt werden

userChrome.js Scripte für den Fuchs (Diskussion)

userChrome.js Scripte für den Fuchs (Diskussion)

Höhe Tabs reduzieren / Webseite Icon verschieben / Schriftgröße Webadresse vergrößern

CSS-Style für die Button [Visit from clipboard]

CSS-Style für die Button [Visit from clipboard]

Standard-Favicon ("Weltkugel") in Lesezeichenleiste Farbe ändern

Standard-Favicon ("Weltkugel") in Lesezeichenleiste Farbe ändern

Standard-Favicon ("Weltkugel") in Lesezeichenleiste Farbe ändern

Seitennavigation - Fly Out Menü

Skript für zusätzliche Toolbar, nicht angezeigt im Anpassen Fenster

Skript für zusätzliche Toolbar, nicht angezeigt im Anpassen Fenster

dhl.de: keine EInloggen möglich, Seite wechselt ständig

Kleiner Testcode für flexiblen Oneliner