Beiträge von Horstmann

Zitat von Mitleser

Wenn der Code nicht im .svg enthalten ist kann das css den entsprechenden Code einfügen.

Nein.

CSS kann nur - falls nötig - einem Element die Fähigkeit den im .svg enthaltenen Code zu benutzen hinzufügen (-moz-context-properties), oder eben via fill/stroke etc. diesen enthaltenen Code manipulieren - falls context-etc. im .svg gesetzt ist.
Und wie in deinem Script enthalten, muss in wenigen Fällen auch svg.context-properties.content.enabled gesetzt werden.

CSS kann aber nichts in einen .svg Code hinein schreiben.

Zitat von Mitleser

Zitat von Horstmann

Und wie gesagt, color zu setzen kann Nebenwirkungen haben, deshalb ist currentColor oft keine Lösung.

Könntest Du diese Aussage präzisieren?

Color wird in Fx für alles Mögliche benutzt, für Text natürlich, dann oft für den Hintergrund, oder auch nur für Hover, und eben auch für farblich undefinierte .svgs, via diversen internen Codes.

Der Punkt ist, dass man die .svg Iconfarbe innerhalb eines Elements nicht trennen kann von dem oben erwähnten potentiellen Einfluss den CSS color allgemein hat, wenn man fill/stroke etc. nicht konkret im .svg definiert - oder eben im .svg fill="context-fill" (etc.) einträgt, um dann via CSS separat darauf zugreifen zu können.

Zitat von Mitleser

Zitat von Horstmann

Dann dürften aber in Fx CSS sowohl fill als auch fill-opacity nicht mehr funktionieren, oder?

Warum testest Du es nicht einfach selbst und postest dann hier die Antwort?

Es war nicht wirklich eine Frage, wollte nur höflich auf deinen Irrtum hinweisen.
Ohne context-fill etc. sind svg icons nicht vollständig Fx kompatibel.

Und wie gesagt, color zu setzen kann Nebenwirkungen haben, deshalb ist currentColor oft keine Lösung.

Zitat von Mira_Belle

Nur bei den Checkboxen unter Ansicht/Symbolleisten/Lesezeichen-Symbolleiste

... bekomme ich es einfach nicht hin!

Und dann wäre da nur noch ein :nth-child... im CSS (Code) welches ich auskommentiert habe.
Kann wohl zukünftig weg.

Andreas ist mir zuvorgekommen, die Dinger haben ihre eigene ID.

Statt negativen Margins würde ich selber aber immer erstmal das Element anschaunen - deshalb hat uns Baby Jesus ja die Browser Werkzeuge gegeben - und evtl. padding-left: 0 !important; setzen, dann schauen ob 4px noch fehlen.

Edit: altes FX und Mac, aber kannst ja mal testen:

[data-l10n-id="toolbar-context-menu-bookmarks-toolbar-always-show-2"]:not([checked="true"]) {
    padding-left: 4px !important;
    color: cyan !important;
}

[data-l10n-id="toolbar-context-menu-bookmarks-toolbar-on-new-tab-2"]:not([checked="true"]) {
    padding-left: 4px !important;
    color: blue !important;
}

[data-l10n-id="toolbar-context-menu-bookmarks-toolbar-never-show-2"]:not([checked="true"]) {
    padding-left: 4px !important;
    color: red !important;
}

Zitat von Mitleser

Zitat von lenny2

entferne ich immer den Code
fill-opacity:context-fill-opacity; aus dem Icon.

Danke für den Tipp! Funzt das auch, wenn du fill:context-fill;fill-opacity:context-fill-opacity; komplett entfernst (Bin auf Linux; deshalb die Frage)? Und funzt das mouseover im Script dann trotzdem?

Dann dürften aber in Fx CSS sowohl fill als auch fill-opacity nicht mehr funktionieren, oder?
Und color, falls es als Ersatz dienen kann, sollte man mE eher sparsam benutzen.

Dass context-xxx in svg Code nur begrenzt mit dem OS harmoniert ist bekannt, aber svgs müssen ja nur mit Fx kompatibel sein.

Zitat von Mira_Belle

Schau noch mal

Schau auch nochmal => hier, und darüber und darunter.

Und noch ein Vorschlag: alles mit :nth-child... vermeiden, das ist OS abhänging und ändert sich dauernd.

Weiss nicht genau wie das Script im Detail funktionieren soll, aber geht sowas?

 //  Undo Close Tab Test

  (function() {
  if (!window.gBrowser) return;
    try {
        CustomizableUI.createWidget({
            id: 'uc_undo_closetab_button',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
            onBuild: function(aDocument) {
                let toolbaritem = aDocument.createXULElement('toolbarbutton');
                let props = {
                    id: 'uc_undo_closetab_button',
                    class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                    label: 'Undo Close',
                    tooltiptext: 'Undo Close Tab',
                    style: 'list-style-image: url(chrome://global/skin/icons/reload.svg)',
                };
                for (let p in props)
                    toolbaritem.setAttribute(p, props[p]);
                return toolbaritem;
            }
        });
    } catch(e) { }

    document.getElementById('uc_undo_closetab_button').addEventListener('click', event => {
    if (event.button === 0) {
       undoCloseTab();
      }
    });

  })();

Zitat von lenny2

Ich verwende General padding. Relative Pfad- oder Ressourcen Icons.

Yup, genau sowas.
Nur benutzt es kein Padding, aber das ist Semantik.

Ich vermute das ist nur ein Ausschnitt aus deinem Kontextmenü Code, korrekt?
Würde mich sehr interessieren was du mit --content-type anstellst, ich kann die Variable nicht im aktuellen Firefox Code finden.

Für die Icons sollte eigentlich auch sowas klappen, und damit für diverse OS (?):

/*background-image: url("..//icons//paste16.png");  ==> */

background-image: url("icons/paste16.png");

Das wäre dann für den icons Ordner im gleichen Ordner wie die CSS Datei.

Zitat von Endor

Mein ganzes CSS für Kontextmenü Symbole sind fast 6000 Zeilen.
Willst Du Dir die wirklich im ernst antun?
Hier mal ein ausschnitt davon:

Oje...
Und also doch extra Code im Spiel?

In den meisten Fällen kann man Basiscode für bestimmte Elemente einmal zusammengefasst eingeben, via den allgemeinen IDs, Tags, Classes und evtl. übergeordneten Elementen zur Eingrenzung.
Zentral gesammelt aufbauen, evtl. ein paar Variablen dazu, und das Troubleshooting wird unendlich einfacher.

Ich war schon lange nicht mehr in den Kontextmenüs unterwegs, aber mehr als eine Handvoll Basiselemente/Klassen relevant für die Icons wird's vermutlich nicht geben.

Spezifische Einträge, für einzelne Schaltflächen, braucht es nur für das Icon an sich, alles andere macht keinen Sinn zu wiederholen, oder wie von Dejavu erwähnt mehrfach und unterschiedlich aufzubauen.

Im Zweifel immer mal bei Aris oder MOG reinschauen, wie die sowas angehen.

Was dir im Moment nicht weiterhilft, aber das sieht aus wie ein Fall von suboptimalem CSS plus altersbedingter Codeblähung.

Zitat von Mira_Belle

Wobei das mit dem ; padding-left: 36px;} eben die Fehlerkorrektur ist!

Was man für alle betroffenen Elemente entweder als Variable anlegen, oder besser noch einmal direkt festlegen kann.
Wenn sich mehrere solcher wiederholten Regeln über 1000de Zeilen Code ziehen, auch für nur wenige Elemente die leicht unterschiedlich gehandhabt werden müssen, dann hat man Ärger vorprogrammiert.

Zitat von Endor

Hallo zusammen.
In Firefox 141 beta da sind fast überall die Abstände im Kontextmenü
bei den Symbolen zum Text wieder richtig im Vergleich zu Firefox 140.

Nur aus Neugier: meinst du einen generellen Firefox Bug, oder entsteht das Problem im Zusammenhang mit eigenen CSS Codes, JS Scripts, oder Erweiterungen?

Zitat von Sören Hentzschel

Aber wieso Schweiz? Das interessiert mich wirklich, denn bei mir klingelt da nichts.

Mist, Österreich sollte das heissen!

Zitat von Sören Hentzschel

Zitat von Horstmann

direkte Bildanhänge im Forum werden bei mir generell als webp Dateien angezeigt, die funktionieren nur in der Schweiz.

Was genau ist der Zusammenhang zwischen WebP und der Schweiz?

Nur ein kleiner Scherz bzgl. irgendeiner Konversation die wir mal hatten über webp Umwandlung im Forum und allgemeine weitere Nutzbarkeit, weiss nicht wo oder warum ich mich daran erinnere.

Zitat von lenny2

Jetzt ist alles gut.

Prima!

Fyi: direkte Bildanhänge im Forum werden bei mir generell als webp Dateien angezeigt, die funktionieren nur in der Schweiz.

Zitat von Mira_Belle

Horstmann Das ist alles

Mit dieser kleinen Korrektur funktioniert Dein Skript tadellos!!
Bitte vielmals um Entschuldigung

Wofür?
Deine Codes benutze ich schon ewig mit Erfolg.

Danke für's Testen, uuuuund noch mehr dazugelernt, dank Mitleser - der Mann, der Mythos!

Zitat von Mitleser

Horstmann , es fehlt - damit es in neueren Firefoxversionen funzt - ein Slash nach der Angabe des Profilpfades. Den könnte man z.B. hier einfügen:

style: 'list-style-image: url("' + ProfilePath +'/'+ buttonicon + '");'

Das is alles?

Also würde das evtl. funktionieren - ohne meine dampfbetriebene Teststation anwerfen zu müssen (Iconname anpassen oder das im Anhang nehmen):

//tabsInTitlebar_toggle.uc.js
//Icon erwartet in Profilordner/chrome/icons, icons Ordner falls noetig erstellen, buttonicon Dateinamen anpassen
//https://www.camp-firefox.de/forum/thema/139604-v141-suche-nach-einem-skript-zum-show-hide-title-bar/?postID=1275461#post1275461

  (function() {
  if (!window.gBrowser) return;
    const prefs = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefBranch);
    try {
        CustomizableUI.createWidget({
            id: 'title_toggle',
            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 = 'Letterst-2a.png';
                let props = {
                    id: 'title_toggle',
                    class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                    label: 'Titlebar Tabs',
                    tooltiptext: 'Tabs in Titlebar',
                    style: 'list-style-image: url("' + ProfilePath +'/'+ buttonicon + '");'
                };
                for (let p in props)
                    toolbaritem.setAttribute(p, props[p]);
                return toolbaritem;
            }
        });
    } catch(e) { }

    document.getElementById('title_toggle').addEventListener('click', event => {
        if (event.button === 0) {
           tabsTitlebar();
          }
    });

    function tabsTitlebar() {
        if (prefs.getIntPref("browser.tabs.inTitlebar") === 0) {
           prefs.setIntPref("browser.tabs.inTitlebar", 1);
        }
        else {
           prefs.setIntPref("browser.tabs.inTitlebar", 0);
        }
     };

  })();

Letterst-2a.png.zip

Zitat von lenny2

Mira_Belle Ihrer Erklärung entnehme ich, dass der relative Pfad funktioniert, wenn Sie das Symbol per CSS hinzufügen. Derzeit funktioniert das Skript es mit einem Ressourcen Icon oder mit einem Icon mit einem physischen Pfad

Wie von Mira und Andreas erklärt, war mein Dateipfad veraltet für diese Anwendung.

Sowas sollte hoffentlich klappen, Icon entspechend anpassen:

//tabsInTitlebar_toggle.uc.js
//Icon erwartet in Profilordner/chrome/icons, icons Ordner falls noetig erstellen, buttonIcon Dateinamen anpassen

  (function() {
  if (!window.gBrowser) return;
    const prefs = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefBranch);
    try {
        CustomizableUI.createWidget({
            id: 'title_toggle',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
            onBuild: function(aDocument) {
                let toolbaritem = aDocument.createXULElement('toolbarbutton');
                let currentProfileDirectory = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");
                let buttonIcon = 'Letterst-2a.png';
                let props = {
                    id: 'title_toggle',
                    class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                    label: 'Titlebar Tabs',
                    tooltiptext: 'Tabs in Titlebar',
                    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('title_toggle').addEventListener('click', event => {
        if (event.button === 0) {
           tabsTitlebar();
          }
    });

    function tabsTitlebar() {
        if (prefs.getIntPref("browser.tabs.inTitlebar") === 0) {
           prefs.setIntPref("browser.tabs.inTitlebar", 1);
        }
        else {
           prefs.setIntPref("browser.tabs.inTitlebar", 0);
        }
     };

  })();

Zitat von Mira_Belle

Hi, die Variante mit :"let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir'));"
funktioniert nur, wenn der Pfad in CSS gebraucht wird.
Andi's Skript verwendet aber: "let ProfilePath = Services.dirsvc.get("ProfD", Ci.nsIFile).path.replace(/\\/g, "/");"
So kann die Variabel direkt in JS verwendet werden.

Ergo, Andi's Skript erzeugt einen Button mit Symbol, Horstmann's Skript nicht.

Kleiner Nachtrag!
Wenn ein "SVG" verwendet wird, kann dieses aber per CSS angepasst werden,
und wenn man das will, muss man die "erste" Variante nutzen.

Alles anzeigen

Ahh, vielen Dank, wieder was dazugelernt!

Zitat von 2002Andreas

Sein Skript funktioniert in Fx 115, aber danach in keiner Fx Version mehr.

Danke, gut zu wissen!

Zitat von lenny2

Aber das Icon wird nicht angezeigt, weder Ihres noch meines. Das Icon befindet sich in /chrome/icons/.

Hmm, klappt hier mit den Icons.
Evtl. könnte unsere hiesige JS Icon Expertin Mira_Belle sich das mal anschauen.

Falls du nach einem Button gesucht hast, funktioniert sowas evtl.?

 //  titlebar tabs

  (function() {

  if (!window.gBrowser) return;

    const prefs = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefBranch);
    let ProfilePath = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));

    try {
        CustomizableUI.createWidget({
            id: 'title_toggle',
            type: 'custom',
            defaultArea: CustomizableUI.AREA_NAVBAR,
            onBuild: function(aDocument) {
                let toolbaritem = aDocument.createXULElement('toolbarbutton');
                let buttonicon = "Letterst-2a.png"
                let props = {
                    id: 'title_toggle',
                    class: 'toolbarbutton-1 chromeclass-toolbar-additional',
                    label: 'Titlebar Tabs',
                    tooltiptext: 'Tabs in Titlebar',
                    style: 'list-style-image: url("' + ProfilePath + buttonicon + '");'
                };
                for (let p in props)
                    toolbaritem.setAttribute(p, props[p]);
                return toolbaritem;
            }
        });
    } catch(e) { }

      document.getElementById('title_toggle').addEventListener('click', event => {
          if (event.button === 0) {
             tabsTitlebar();
            }
    });

    function tabsTitlebar() {
        if (prefs.getIntPref("browser.tabs.inTitlebar") === 0) {
           prefs.setIntPref("browser.tabs.inTitlebar", 1);
        }
        else {
           prefs.setIntPref("browser.tabs.inTitlebar", 0);
        }
     };

  })();

Icon: Letterst-2a.png.zip

Danke für's Nachschauen.

Ich glaube fast dass es tatsächlich ein Mac, und evtl. auch ein Linux spezifisches Problem ist, s. hier.
Mac Fx hat ein eigenes inline Margin für diesen Pfeil, war schon lange so, und das wird anscheinend zu spät oder gar nicht dazugelesen mit dem in #636 erwähnten Code.

Edit: meine aktuelle Version hier und eine BrokenHeart Variante hier, nur zur besseren Übersicht.

Kann a) am Mac liegen, oder wahrscheinlicher b) mein Fx ist endgültig zu alt.

Wenn sonst niemand das Problem beobachten kann, können wir das ignorieren.