Beiträge von Horstmann

Zitat von grisu2099

Zitat von harff182

Es taucht nirgendwo was auf

Komisch - hier funktioniert das Skript einwandfrei - in der Release und im Nightly...

Hat evtl. damit zu tun?

Und, was ist diese ominöse CSS Zeile, die das dort erwähnte Script bei dir an's Laufen gebracht hat?

Zitat von Mitleser

Zeitgleicher Post, siehe EDIT in #34.

Hab auch gerade gesehen, dass .DeJaVu das Thema auch schon angegangen hatte, ging wohl nur etwas unter.

Zitat von Mitleser

Könnte sein, hier handelt es sich allerdings um --bookmark-item-icon.

Ausgehend von den Codes in den Links in #31, sieht es für mich so aus als wäre --bookmark-item-icon nur eine via CSS umbenannte --menuitem-icon Variable.

Edit: haben uns überschnitten mit den Antworten.

Zitat von Mitleser

Die kürzeste Version ever! .... Version 1!
Vers. 2 funzt nicht.

Super, danke für's testen!
Das war aber v.a. auch inspiriert durch deine Benutzung von img weiter oben.

Das Prinzip sollte/könnte auch für andere Stellen klappen, die --menuitem-icon als Variable benutzen.

Einen Vorschlag hätte ich noch, basierend auf Link, Link, Link.

menu.bookmark-item[container] > img {
	content: url("../css/image/14folder/14folder03-031-orange.svg") !important;
}

Oder:

menu.bookmark-item[container] > [image] {
	content: url("../css/image/14folder/14folder03-031-orange.svg") !important;
}

Dateipfad dann anpassen, und das CSS alleine statt eurem Code probieren.
Ich glaube auch [container="true"] wird nicht mehr verwendet, stattdessen [container].

Zitat von Mira_Belle

Wobei auch das eben auch kein allgemein gültiges CSS ist!
Auch da muss mit dem absoluten Pfad gearbeitet werden.

Grrrr, das ist doch

Für den spezifischen Zweck könnte man evtl. auch ein background-image oder ::before Element als Ersatz benutzen, oder sogar das img direkt via content angehen; aber mit meinem antiken Fx kann ich momentan dazu nichts anbieten.

Zitat von 2002Andreas

teste bitte:

JavaScript

// Profilordner.uc.js

(function() {

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

	try {

             CustomizableUI.createWidget({
             id: 'Profilordner',
             type: 'custom',
             defaultArea: CustomizableUI.AREAS,
             onBuild: function(aDocument) {         
                var toolbaritem = aDocument.createXULElement('toolbarbutton');
                var props = {
                   id: 'Profilordner',
                   class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                   removable: true,
                   label: 'Profil Button"',
                   tooltiptext: '',
                   style: 'list-style-image: url("data:image/gif;base64,R0lGODlhEAAQAOZMAP/////MAF06AJhlAJNgAP//AP/lAP/UAJViAP/JANShAJRhAP/OAJRgAOy5AMaSAP/nAMyZAP/IAP/NAOazAP/RAMmVALaAAH5TAJNfAM2aAP/dT//XOv/KAOPOkMeRAP/nhOSxAOu4AP3KAOrTkv/nrv//1c6bAKdyAP/TAP/bPdWsMr6LA7iCALqGALiEAJNeAMCMAP/gcv/eYdGdAP/TEP/mgv/2y//gg/3JAP/ila97AP/aKsWPAJFbAJZgALeBAMiVAPC9AP/rOum2AHlQAP/4zP//z//jPpNdAP/LANixNP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAEwALAAAAAAQABAAAAefgEyCg4SFhoeFDQ0LjIiCCyU5IwEBBAiXCAOEBDohFBREIg6jQgibODQKqgonDz0fPkkwDQMEMhYRERpBMUsAv8C1Mw8uLUAXKwA2EgkJDJoEGy8swAAgCZQMz0wEKigkN8wJHZQBFZrcPDsAHErllBMT6AQ1HkYVKQf6++hMGUgAhhgYSBAChH4/TBwpwLAhw35MMAiYSLFiEUcYmQQCADs=")',
                 
                };            
                for (var p in props)
                toolbaritem.setAttribute(p, props[p]); 
			    toolbaritem.addEventListener('command', () => {
                Services.dirsvc.get('ProfD', Ci.nsIFile).launch();
        });

                return toolbaritem;
                }      
        });
                CustomizableUI.registerToolbarNode(tb);
        }       catch(e) { };
        }) ();

Alles anzeigen

Räusper.

Mein Vorschlag:

// Profilordner.uc.js V2

(function() {

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

	     try {
             CustomizableUI.createWidget({
             id: 'Profilordner',
             type: 'custom',
             defaultArea: CustomizableUI.AREAS,
             onBuild: function(aDocument) {
                let toolbaritem = aDocument.createXULElement('toolbarbutton');
                let props = {
                   id: 'Profilordner',
                   class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                   removable: true,
                   label: 'Profilordner Button"',
                   tooltiptext: '',
                   style: 'list-style-image: url("data:image/gif;base64,R0lGODlhEAAQAOZMAP/////MAF06AJhlAJNgAP//AP/lAP/UAJViAP/JANShAJRhAP/OAJRgAOy5AMaSAP/nAMyZAP/IAP/NAOazAP/RAMmVALaAAH5TAJNfAM2aAP/dT//XOv/KAOPOkMeRAP/nhOSxAOu4AP3KAOrTkv/nrv//1c6bAKdyAP/TAP/bPdWsMr6LA7iCALqGALiEAJNeAMCMAP/gcv/eYdGdAP/TEP/mgv/2y//gg/3JAP/ila97AP/aKsWPAJFbAJZgALeBAMiVAPC9AP/rOum2AHlQAP/4zP//z//jPpNdAP/LANixNP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAEwALAAAAAAQABAAAAefgEyCg4SFhoeFDQ0LjIiCCyU5IwEBBAiXCAOEBDohFBREIg6jQgibODQKqgonDz0fPkkwDQMEMhYRERpBMUsAv8C1Mw8uLUAXKwA2EgkJDJoEGy8swAAgCZQMz0wEKigkN8wJHZQBFZrcPDsAHErllBMT6AQ1HkYVKQf6++hMGUgAhhgYSBAChH4/TBwpwLAhw35MMAiYSLFiEUcYmQQCADs=")',
                };
                for (let p in props)
                toolbaritem.setAttribute(p, props[p]);
			    //toolbaritem.addEventListener('command', () => {
                //Services.dirsvc.get('ProfD', Ci.nsIFile).launch();
                //});
                return toolbaritem;
                }
             });
          } catch(e) { };

	          document.getElementById('Profilordner').addEventListener('command', () => {
            Services.dirsvc.get('ProfD', Ci.nsIFile).launch();
            });

        }) ();

Zitat von Mira_Belle

Horstmann Das mit der Variabel habe ich auch schon ausprobiert,
doch leider gibt es in CSS keine Möglichkeit, Variablen zu verketten oder Pfade dynamisch zu ergänzen.
url(var(--xxx) + "icons/folder_10.png") oder ähnliche Konstruktionen sind in CSS nicht gültig.

Wäre echt gut gewesen.
Bleibt also nur interne Symbole zu verwenden oder halt den absoluten Pfad zu nutzen. Echt doof.
Oder mit Kanonen auf Spatzen ..., aber das würde ja viel zu weit gehen und für User ohne JS ...
Ach was, lassen wir das.

Das Problem hatte ich auch schon, ähnlich wie hier diskutiert.

Zitat von Mira_Belle

Zitat von Horstmann

Aber - es geht um eigene Icons mit relativem Dateipfad,

Ich weiß und bin noch am Testen.

Sorry, geht wohl nicht!
Mir fiele da nur noch der Weg über JS dann ein.

Danke nochmal; schade, dachte es liegt an var(xxx) / Variablen mit Url Dingens (Fachbegriff), und man könnte das umgehen.

Muss ich mir nochmal anschauen wenn mein FX irgendwann aktuell ist , absolute Dateipfade sind mE eine massive Pest.
Du hast ja schon sehr viel dazu beigetragen das in JS zu lösen, blöd dass das jetzt in CSS auch hochkommt.

Nicht nur braucht dann jeder User seinen eigenen Dateipfad in reinem CSS, und für jedes Profil und Version wie Nightly einen angepassten CSS Code, der Dateipfad ist auch noch OS abhängig.

Zitat von Mira_Belle

... funktioniert!

Vielen Dank für's testen!

Aber - es geht um eigene Icons mit relativem Dateipfad, wäre nett wenn man zB Icons in Profilordner/chrome/icons ohne vollen Dateipfad wie bisher benutzen könnte (in CSS).

Zitat von harff182

Es geht um die Zuweisung des Standard-Folder-Icons in den Unterordnern der Lesezeichen-Symbolleiste.

Aktueller Code:

CSS

/*	31_standardfoldericon.css*/
/* 	mein Standard-Ordner-Icon festlegen */

treechildren::-moz-tree-image(container),
.bookmark-item[container="true"] {
	list-style-image: url('../icons/folder_10.png') !important;
}

Hmm, relativer Dateipfad wäre aber schon netter.

Will sowas hier evtl. mal jemand testen, Icon dann halt anzupassen ? :

/* Standard-Ordner-Icon festlegen */

.bookmark-item[container] {
	--menuitem-icon: url('../icons/folder_10.png') !important;
}

Basierend darauf, kann aber grob falsch liegen.

Zitat von juzzlukin

I believe there is a way to edit the buttons to point towards a desired icon, but I can't figure our how to do it.

For most uses, you can find the buttons ID, and via userChome.css apply an Icon like so:

#Yourbutton_button {
    list-style-image: url("icons/Yourbutton_Icon.png") !important;
    }

The icon would need to be in a folder called icons, inside your profile's chrome folder.

Zitat von Mira_Belle

Um die Codierungsprobleme zu umgehen, sollten wir, wen wieder einmal so ein Problem auftritt,
das Skript dann nicht per Code weiter geben, sondern direkt als gepackte Datei.

Was mich persönlich seeehr nerven würde.

Die Option zum Code einstellen hier im Forum und anderswo gibt's ja nicht nur zum Spass.

Ich hatte auch einige Schwierigkeiten mit den Scripts von Mira und Andreas beim Testen, glaube es war CSS für die #PersonalToolbar Höhe an anderer Stelle.

Hier etwas in der Art wie ich es selber benutze; irgendwo früher im Thread steht evtl. warum ich auf die classList.toggle Methode umgestellt habe, kann mich aber nicht erinnern.

Wobei ich das CSS nicht im Script, sondern separat in einer externen, reinen CSS Datei habe.

Dadurch wird bei mir - bei einer versteckten PersonalToolbar als Ausgangszustand - diese Leiste sofort beim Öffnen von Fx versteckt, mit dem CSS im Script wird die Leiste kurz angezeigt bei Programmstart.
Gleiches bei den oben erwähnten Scripts.

Tastaturkürzel hier für Mac, eigenes Icon mit auskommentierter Option für Fx Icon.

//Toggle PersonalToolbar v4
//Die Lesezeichenleiste muss auf Immer anzeigen stehen / Mira

(function () {
    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 ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
                    let buttonicon = "toolbar12up.png";
                    let props = {
                        id: 'PersonalToolbar_button',
                        class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                        label: 'Toggle Bookmarks',
                        tooltiptext: 'Toggle Bookmarktoolbar',
                        //style: 'list-style-image: url("chrome://browser/skin/fullscreen.svg");',
                        style: 'list-style-image: url("' + ProfilePath +'/'+ buttonicon + '");'
                    };
                    for(let p in props)
                        toolbaritem.setAttribute(p, props[p]);
                        return toolbaritem;
                    }
        });
    } catch(e) { }

   document.addEventListener('keydown', (event) => {
        let keyName = event.key;

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

   document.getElementById('PersonalToolbar_button').addEventListener( "click", ptToggle );

        function ptToggle(aEvent, keyEvent=false) {
        if(!keyEvent && aEvent.button != 0) {
            return;
        }
        PersonalToolbar.classList.toggle("toggle_mode");
    }

    const css =`

    /**  Bookmarks bar height Toggle  **/

    #PersonalToolbar:not([customizing]) {
        --uc-personalbar-height_1: 0;        /* default value */
        --uc-personalbar-height_2: 24px;     /* toggle value */
        }

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

    #PersonalToolbar.toggle_mode {
        height: var(--uc-personalbar-height_2) !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);

})();

toolbar12up.png.zip

Zitat von Mira_Belle

Zitat von Horstmann

Nur aus Neugierde: was ist die nötige Änderung(en) von 142 => 143, ist as das [vertical] statt [orient="vertical"] etc. ?

So ist es im wesentlichem.

Dankeschön.

Zitat von Mira_Belle

Zitat von Boersenfeger

Allerdings sehe ich die Pfeile in 142.0.1 oben nach links und unten nach rechts zeigend

Äh, steht nich im Skript, dass dieses erst ab Firefox Version 143 funktioniert?
Bzw. ist der Hinweis so missverständlich?
Das ist eine ernst gemeinte Frage!!
Wenn dem so ist, muss ich da was machen!
Bis zum Firefox 142 besteht kein Grund, das Skript zu wechseln!

Ich seh da nicht in der Script Beschreibung, ab welcher Fx Version die Scriptversion geändert werden muss, das wäre evtl. gut zu wissen.
Die letzte Scriptversion steht auch schon einige Seiten zuvor, mein Vorschlag wäre das ab und zu mal zu verlinken.

Nur aus Neugierde: was ist die nötige Änderung(en) von 142 => 143, ist as das [vertical] statt [orient="vertical"] etc. ?

Zitat von Mira_Belle

Das kann so aber nicht sein!
Der Firefox 142 hat mit SVG ohne fill-opacity='context-fill-opacity' im Code, absolut keine Probleme.

Sagt ja auch keiner, dass das dieses Problem erzeugt, oder jemals erzeugt hat.
fill-opacity ist und war dann halt einfach nicht nutzbar, soweit ich es übersehe - kann aber falsch liegen.

Vermutlich liegt das ominöse Problem mit den Farben jedoch an anderer Stelle.

Zitat von Mira_Belle

Verstehe ich Dich richtig?
Wenn ich z.B. Aris Skript nehme:

XML

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
  <path fill='context-fill' fill-opacity='context-fill-opacity' d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/>
</svg>

Was mir nur nicht klar dabei ist, warum dann der Fehler nur bei einigen Usern auftritt, aber bei vielen anderen nicht.

Und was würde das für das CSS bedeuten?
Dort könnte ja dann die Zeile mit fill-opacity: 1 !important; gelöscht werden.

Aber das Ganze würde noch nicht erklären, warum das inline-svg ohne Probleme zu machen funktioniert,
da in der ganzen Zeile nicht einmal fill-opacity=xxx auftaucht!

Also, wie von Mitleser schon erklärt, eine svg Grafik ohne fill-opacity='x' im Code benutzt generell den default Wert 1.
Was fill-opacity macht ist schon klar, oder?

Um in Firefox via CSS fill-opacity: x !important; benutzen zu können, muss im svg Code fill-opacity='context-fill-opacity' gesetzt sein.
Das Gleiche sorgt auch dafür, dass diese CSS Property von Fx intern angesprochen/manipuliert werden kann, zB für verschiedene Zustände wie active, hover etc..
Mit der Farbe hat es aber nix zu tun.

Das hier hilft evtl. zum Verständnis.

Was die Darstellungsprobleme angeht, habe ich etwas die Übersicht darüber verloren, welches Problem gerade diskutiert wird, und in welcher Scriptversion.

Wenn bei gleichem OS, Fx Version, Scriptversion und Config Anpassungen, sowie vorhandenem Icon, manche User Probleme haben und manche nicht, kann man evtl. mal schauen, ob man auch wirklich in einem sauberen Testprofil testet.

Zitat von Mira_Belle

Mitleser

Zitat von Mitleser

Deine .svg-Icons haben kein fill-opacity.

Richtig, aber das wird ja im CSS nachgeholt!

Das CSS hat keine Wirkung, wenn im svg code fill-opacity nicht gesetzt ist: fill-opacity="context-fill-opacity".
Wenn nicht gesetzt im svg, sollte fill-opacity im CSS aber eigentlich nur ignoriert werden.

Bei der komplizierten Verschachtelung in deinem JS/CSS Monster steig ich da aber nicht durch; die Pfeile kann ich eh nicht sehen, ist aber auch ein Mac Dingens.

Zitat von Mira_Belle

Für "dodgerblue" kann man auch Werte, was ich persönlich besser finde, nemen,
z.B. #1e90ff oder rgb(31, 143, 255).

Warum ich Werte bevorzuge? Weil man in einem gescheiten Editor die Farben angezeigt bekommt
und es einefunktion gibt, diese per "Schieber" zu verändern.
Also benutze ich immer "#ff8c00" anstatt "orange".

Ich grätsche mal kurz rein:

Selber benutze ich fast nur noch HSL, s.a. hier.

Orange wäre dann hsl(32, 100%, 50%, 1) - #ff8c00 ist übrigens DarkOrange - und lässt sich kinderleicht in Nuancen anpassen.