Symbole in den Kontextmenüs [ Update ]

mkpcxxl

Mira_Belle , kannst du mir bitte sagen, wo die Dateien hin müssen, einfach in den Chrome Ordner oder in die userchrome.css kopieren ?

Hatte bisher die JavaScript Datei von dir und daher blicke ich jetzt noch nicht so ganz durch.

Danke und Gruß

Michael

Mira_Belle

mkpcxxl Nutzt Du überhaupt schon CSS, um Deinen Firefox irgendwie anzupassen?
Ich vermute nein, oder?
Dann warte einfach noch ein wenig, denn noch ist der ganze "Krempel" ja nicht fertig
und es gibt noch viel zu tun.

Horstmann

Zitat von mkpcxxl

Mira_Belle , kannst du mir bitte sagen, wo die Dateien hin müssen, einfach in den Chrome Ordner oder in die userchrome.css kopieren ?
Hatte bisher die JavaScript Datei von dir und daher blicke ich jetzt noch nicht so ganz durch.
Danke und Gruß
Michael

Du kannst die Codes in die userChrome.css kopieren, oder zur Übersichtlichkeit für jeden Code eine eigene CSS Datei erstellen, und dann via userChrome.css importieren.

ZB. hast du eine Datei 07_Extras.css (s. Mira's Codes in #200) mit dem entsprechenden CSS Code erzeugt, und im gleichen Ordner wie die userChrome.css liegen.

Dann kannst du in der userChrome.css die Zeile @import url("07_Extras.css"); einfügen - ganz oben, vor den CSS Regeln.

Das kannst du für beliebig viele CSS Dateien wiederholen.

Mira_Belle

Zitat von Horstmann

und im gleichen Ordner wie die userChrome.css liegen.

In die userChrome.css @import url("./css/07_Extras.css"); eintragen.
Natürlich muss es dann auch den Unterordner css geben, in dem dann die Datei 07_Extras.css zu finden ist.
Genau so, wie der Unterordner icons vorhanden sein muss, in dem die ganzen Symbole sein sollten.

Horstmann

Mira_Belle , mal wieder diese Frage: in deinen Dateipfaden benutzt du sowas: background-image: url("../icons/toolbar.svg"), mit den zwei führenden Punkten ../.
Das suggeriert doch eigentlich, dass dein icons Ordner nicht im chrome Ordner liegt, sondern ein Ordner darüber im Profilordner sein muss?

Falls ja, könnte das verwirrend/inkompatibel sein für viele Leute, weil wir doch eigentlich immer predigen als Quasi-Standard einen icons Ordner in chrome anzulegen (angenommen dort liegen die relevanten CSS Dateien), oder bin ich da hinterher?

Bei mir sind die CSS Dateien und der icons Ordner zusammen im chrome Ordner, und als Dateipfad (am Mac) funktioniert dann eben nur background-image: url("./icons/toolbar.svg") oder auch background-image: url("icons/toolbar.svg").

Zitat von Mira_Belle

In die userChrome.css @import url("./css/07_Extras.css"); eintragen.
Natürlich muss es dann auch den Unterordner css geben, in dem dann die Datei 07_Extras.css zu finden ist.

Kann auch man machen, wenn man unbedingt will.

Aber siehe die Frage oben: es ist nicht intuitiv verständlich oder allgemein kompatibel, davon auszugehen dass Leute genau so ihren chrome Ordner mit einem extra Ordner css organisiert haben.

Mira_Belle

OK, wenn es einen Ordner css parallel zu dem Ordner icons gibt, dann url("../icons/toolbar.svg"),
wenn die CSS-Datei direkt im Ordner chrome liegt, dann nur url("./icons/toolbar.svg").

Denke halt nur, es wird recht viel wenn am Schluss dann noch ca. 15 andere CSS-Dateien auch noch im Ordner chrome liegen.

Und wenn dann jemand auch noch JS nutzt und diese Dateien auch noch da rumlungern, ist das Chaos perfekt.

mkpcxxl

Zitat von Mira_Belle

mkpcxxl Nutzt Du überhaupt schon CSS, um Deinen Firefox irgendwie anzupassen?
Ich vermute nein, oder?
Dann warte einfach noch ein wenig, denn noch ist der ganze "Krempel" ja nicht fertig
und es gibt noch viel zu tun.

Ja natürlich benutze ich CSS und wie in meinem Beitrag geschrieben auch Scripte.

Und ja, ich werde dann warten bis du fertig bist, da ja das Script "Symbole.uc.js" bei mir funktioniert.

Gruß

Michael

Mira_Belle

@Horstmann Ich hätte da mal eine Frage an Dich!

Also, einerseits ist es ja schon ganz schön bestimmte "Einstellungen" in den einzelnen CSS-Dateien zu haben.
Ich denke da an die Symbolabstände oder auch an die Zeilenabstände.
Hinzu kämen aber noch viel weitere "Einstellungen"!
Die Platzierung der Popups (Untermenüs), oder Rahmen und alles was damit zusammen hängt.

Ich bin echt am Überlegen, ob ich mir DAS antun soll, da allgemeiner Code ja vorhanden ist,
den ich in einer eigenen Datei zusammen führen könnte.

Nachteil, der Code wirkt dann überall und nicht immer NUR da, wo er wirken soll!

Was denkst Du?

Okay, die Frage geht auch an alle anderen, die eigene Symbole im Firefox nutzen

Horstmann

Zitat von Mira_Belle

Was denkst Du?

Von mir dazu ein entschiedenes: Kommt drauf an!

Du weisst ja besser als ich, Fx benutzt verschiedene Arten Icons einzubinden, mit content, list-style-image, background-image, und was weiss ich. Am Mac sind Checkmarks in Menüs nochmal anders.

Selber versuche ich so generell zu bleiben wie ich die Zusammenhänge und den Originalcode verstehe, aber nicht mehr, und in dem Kontext mit Fx- und eigenen Variablen zu arbeiten.

Wenn ich dann mehr verstehe, werd ich genereller, um den Code zu vereinfachen, und mehr Einstellungen zentral ändern zu können.

In diesem Fall könnte man schauen, welche Menüs die gleichen Eigenschaften bzw. Aufbau haben, und dann für jeden Satz einen Basiscode für die wichtigsten Parameter zu erstellen, in einer zentralen CSS Datei.

Die spezifischen Menüs/Selektoren würde man dann in eine/mehrere separate CSS Dateien aufteilen (optional, nur zur Übersicht), und im Fall der Icons sollte man dort fast nur diese individuell ändern müssen.

ZB sowas mein Code in #119 könnte für diverse Kontextmenüs passen, wenn man statt nur #placesContext den/die relevanten Selektoren für diese Art Popups in den Basisregeln benutzt, und separat nur die Icons mit ihren spezifischen Selektoren setzt, wie etwa [data-l10n-id="places-add-folder-contextmenu"] { background-image:.... .

Dazu kommt, das der sich Fx Code natürlich immer im Wandel befindet, und gerade mit den Menü Icons sieht es für mich zZ wie ein Spielplatz aus.
Wobei dabei ein schlauer Basiscode zwar schaden, aber auch eine Menge Detailanpassungen sparen kann.

Macht das irgendwie Sinn?

Ich fürchte nicht, aber es ist schon ein sehr umfassendes Thema.

Mira_Belle

Zitat von Horstmann

Macht das irgendwie Sinn?

Irgendwie ja.

Ich verstehe Deine Antwort so,
Wenn z.B. so etwas in den Dateien vorkommt:

CSS

	/* ----------------------------------------------- */
	/* -------- Zeilenabstände in diesem Menü -------- */
    /* ----------------------------------------------- */

    #tools-menu menupopup > menuitem,
    #tools-menu menupopup > menu {
        padding-block: 2px !important;
    }

oder

CSS

	/* ----------------------------------------------- */
	/* -------- Zeilenabstände in diesem Menü -------- */
    /* ----------------------------------------------- */

    #view-menu menupopup > menuitem,
    #view-menu menupopup > menu {
        padding-block: 2px !important;
    }

und das kommt in allen acht CSS-Dateien vor,
dann lieber verallgemeinern und in eine "Zentrale" CSS-Datei auslagern.
Zum Bleistift so:

CSS

	/* ---------------------------------------------- */
	/* *** Zeilenabstände aller Einträge in ********* */
    /* *** allen Menüs und allen Popups geringer **** */
	/* ---------------------------------------------- */

    menupopup > menuitem,
    menupopup > menu {
        padding-block: 2px !important;
    }

Und so auch mit anderen Elementen, die sich immer wiederholen, so machen.
Als da wären z.B. die Abstände der Symbole zum dahinter liegenden Text!

Also so dann:

CSS

    /* ---------------------------------------------- */
	/* **** Abstände für alle Icons in den Menüa **** */
    /* ---------------------------------------------- */
	
	menupopup:not(.in-menulist) > menu:not(.menu-iconic),
	menupopup:not(.in-menulist, [aria-label]) > menuitem:not(.menuitem-iconic, [checked="true"]) {
		padding-inline-start: calc(1em + 24px) !important;
		background-position: left 1em center;
		background-repeat: no-repeat;
		background-size: 16px;
		-moz-context-properties: fill, fill-opacity;
		fill: #E0E0E0 !important;
	}

Alles anzeigen

Und damit wären dann auch noch die anderen Parameter zentral abgelegt.

Horstmann

Zitat von Mira_Belle

und das kommt in allen acht CSS-Dateien vor,
dann lieber verallgemeinern und in eine "Zentrale" CSS-Datei auslagern.
Zum Bleistift so:

menupopup > menuitem,
menupopup > menu {
padding-block: 2px !important;
}

Alles anzeigen

menupopup kommt aber nicht nur da vor im Fx Code - also sachte mit sowas, sonst hackt man schnell ungewollt in was rein.

In dem Fall zb als ganz grobe Zusammenfassung:

CSS

:is(#view-menu, #tools-menu) menupopup > menuitem,
:is(#view-menu, #tools-menu) menupopup > menu {
        padding-block: 2px !important;
    }

Und dann eben die anderen Selektoren hinzufügen, oder einen übergeordneten Selektor finden, hier zb #main-menubar.
==>

CSS

#main-menubar menu menupopup > menuitem,
#main-menubar menu menupopup > menu {
        padding-block: 2px !important;
    }

Was man deutlich straffen kann, zB mit nesting, aber nur mal grob als Beispiel.
Wirklich wichtig mE dafür: die Browserwerkzeuge, sonst fliegst du blind und verschwendest eine Menge Zeit.
Und was du bestimmt sowieso kennst, MDN und searchfox.

Ein kleiner ähnlicher Beispielcode für ein paar Kontextmenüs, falls das funktioniert:

CSS

/* Universelle Variablen, ueberall benutzbar */
:root {
    --ug-base_distance: 8px;
    --ug-base_buffer: calc(16px + 2*var(--ug-base_distance));  
}

/* Basiscode für diese 3 Toolbar Kontextmenues */    
:is(#placesContext, #toolbar-context-menu, #tabContextMenu) :is(menuitem, menu) {
    -moz-context-properties: fill, fill-opacity !important;             
    background-repeat: no-repeat;        
    background-position: left var(--ug-base_distance) center;
    background-size: 16px;
  	padding-left: var(--ug-base_buffer) !important;    
}

:is(#placesContext, #toolbar-context-menu, #tabContextMenu) menuitem:is([type="checkbox"], [type="radio"], [checked]) {
    background-image: url("chrome://global/skin/icons/plus.svg");
    fill: green !important;
}

:is(#placesContext, #toolbar-context-menu, #tabContextMenu) menuitem[checked="false"] {
    background-image: url("chrome://global/skin/icons/close.svg");
    fill: red !important;    
}

:is(#placesContext, #toolbar-context-menu, #tabContextMenu) menu menuitem[checked="false"] {
    background-image: none !important;    
  	padding-left: var(--ug-base_distance) !important;
}

/* nur Platzhalter Icons */
:is(#placesContext, #toolbar-context-menu, #tabContextMenu) menu {
    background-image: url("chrome://global/skin/icons/chevron.svg");
}
:is(#placesContext, #toolbar-context-menu, #tabContextMenu) menuitem {
    background-image: url("chrome://browser/skin/window.svg");
}

/* spezifische Icons für alle Menues */
#toggle_PersonalToolbar {
    background-image: url("chrome://browser/skin/library.svg") !important;
}
[data-l10n-id="places-add-bookmark"] {
    background-image: url("chrome://global/skin/icons/plus.svg") !important;
}
[data-l10n-id="places-add-folder-contextmenu"] {
    background-image: url("chrome://global/skin/icons/folder.svg") !important;
}

Alles anzeigen

Oder allgemeiner, müsste man halt durchtesten:

CSS

:root {
    --ug-base_distance: 8px;
    --ug-base_buffer: calc(16px + 2*var(--ug-base_distance));  
}

/* Basiscode für alle Kontextmenues */     
#mainPopupSet menupopup :is(menuitem, menu) {
    -moz-context-properties: fill, fill-opacity !important;             
    background-repeat: no-repeat;        
    /*appearance: none !important;*/
    background-position: left var(--ug-base_distance) center !important; 
    background-size: 16px !important; 
  	padding-left: var(--ug-base_buffer) !important;    
}

/* Falls ein Fx Icon existiert */
#mainPopupSet menuitem.menuitem-iconic {
    background-image: none !important;    
    padding-left: var(--ug-base_distance) !important;
}

#mainPopupSet menupopup menuitem:is([type="checkbox"], [type="radio"], [checked]) {
    background-image: url("chrome://global/skin/icons/plus.svg");
    fill: green !important;
}
#mainPopupSet menupopup menuitem[checked="false"] {
    background-image: url("chrome://global/skin/icons/close.svg");
    fill: red !important;    
}
#mainPopupSet menupopup menu menuitem[checked="false"] {
    background-image: none !important;    
  	padding-left: var(--ug-base_distance) !important;
}

/* nur Platzhalter Icons */
#mainPopupSet menupopup menu {
    background-image: url("chrome://global/skin/icons/chevron.svg");
}
#mainPopupSet menupopup menuitem {
    background-image: url("chrome://browser/skin/window.svg");
}

/* spezifische Icons für alle Menues */
#toggle_PersonalToolbar {
    background-image: url("chrome://browser/skin/library.svg") !important;
}
[data-l10n-id="places-add-bookmark"] {
    background-image: url("chrome://global/skin/icons/plus.svg") !important;
}
[data-l10n-id="places-add-folder-contextmenu"] {
    background-image: url("chrome://global/skin/icons/folder.svg") !important;
}

Alles anzeigen

Horstmann

Zitat von Endor

Nur dann gibt es bei aktiviert eben diesen Abstand den ich
auch schon mal gemeldet hatte. Dafür habe ich bis jetzt auch
noch keine Lösung gefunden.
Genau dieses Problem habe ich hier in jedem Kontextmenü wo eine checkbox
vorhanden ist. Sobald der Haken gesetzt ist, also auf true gesetzt, ist dieser
Abstand im Kontextmenü.

Links Rechtschreibung prüfen nicht aktiviert
Rechts aktiviert. Prompt ist der Abstand vorhanden.

Würd mich brennend interessieren, ob du das Problem auch hast, wenn du spasseshalber mal den letzten (Test) Code von #212 probierst, anstelle von deinem alten Code für Kontextmenüs.

Die Checkboxen gibt es zB auch in Lesezeichenleiste Kontextmenüs, für "Weitere Lesezeichen".

Endor

Ja genau so ist es.

Mit diesem Code :

CSS

@media (-moz-platform: windows) {
	menupopup[needsgutter] > menuitem:not([type="checkbox"], [class="menuitem-iconic"] ,[type="radio"], [checked]) > .menu-icon {
			display: none !important;
		}
	}

Sieht es hier so aus:

Nur da wo ein Pfeil rechts auf Popupmenü hinweist passt es noch nicht.
Welchen der drei Codes in Deinem Beitrag soll ich testen?
Denn ich habe hier für alles eigene CSS Dateien.

Mfg.
Endor

Horstmann

Zitat von Endor

Nur da wo ein Pfeil rechts auf Popupmenü hinweist passt es noch nicht.
Welchen der drei Codes in Deinem Beitrag soll ich testen?
Denn ich habe hier für alles eigene CSS Dateien.

Idealerweise sowas; das ist nur ein Testcode mit Platzhalter Icons aus Fx, und würde wenn überhaupt nur ohne anderen Code für Menüs funktionieren, ist gedacht um alle Kontextmenüs abzudecken:

CSS

:root {
    --ug-base_distance: 8px;
    --ug-base_buffer: calc(16px + 2*var(--ug-base_distance));  
}

/* Basiscode für alle Kontextmenues */     
#mainPopupSet menupopup :is(menuitem, menu) {
    -moz-context-properties: fill, fill-opacity !important;             
    background-repeat: no-repeat;        
    /*appearance: none !important;*/
    background-position: left var(--ug-base_distance) center !important; 
    background-size: 16px !important; 
  	padding-left: var(--ug-base_buffer) !important;    
}

#mainPopupSet menupopup menuitem:is([type="checkbox"], [type="radio"], [checked]) {
    background-image: url("chrome://global/skin/icons/plus.svg");
    fill: green !important;
}
#mainPopupSet menupopup menuitem[checked="false"] {
    background-image: url("chrome://global/skin/icons/close.svg");
    fill: red !important;    
}
#mainPopupSet menupopup menu menuitem[checked="false"] {
    background-image: none !important;    
  	padding-left: var(--ug-base_distance) !important;
}

/* nur Platzhalter Icons */
#mainPopupSet menupopup menu {
    background-image: url("chrome://global/skin/icons/chevron.svg");
}
#mainPopupSet menupopup menuitem {
    background-image: url("chrome://browser/skin/window.svg");
}

/* spezifische Icons für alle Menues */
#toggle_PersonalToolbar {
    background-image: url("chrome://browser/skin/library.svg") !important;
}
[data-l10n-id="places-add-bookmark"] {
    background-image: url("chrome://global/skin/icons/plus.svg") !important;
}
[data-l10n-id="places-add-folder-contextmenu"] {
    background-image: url("chrome://global/skin/icons/folder.svg") !important;
}

/* Evtl. unnoetig? */

#placesContext :is(menuitem, menu) label {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

Alles anzeigen

Zitat von Endor

CSS

@media (-moz-platform: windows) {
	menupopup[needsgutter] > menuitem:not([type="checkbox"], [class="menuitem-iconic"] ,[type="radio"], [checked]) > .menu-icon {
			display: none !important;
		}
	}

Nur da wo ein Pfeil rechts auf Popupmenü hinweist passt es noch nicht.

Da ist auch menu nicht berücksichtigt.

Wenn du deinen bisherigen CSS Code damit benutzt, evtl. das noch hinzufügen, ist aber sehr grob:

CSS

menupopup[needsgutter] > menu > .menu-icon {
    display: none !important;
}

Mira_Belle

Wenn mir jetzt jemand verrät, welches Kontextmenü, das genau ist, würde ich mich freuen.

Endor

Mira_Belle

Rechtsklick zbs. hier im Forum im Feld zum schreiben eines neuen Beitrags.
oder da wo man Passwort und Benutzernahme zum Anmelden im Forum
eingibt usw.

Mira_Belle

OK, hat sich erledigt!

Nein, doch nicht!
Das schaut bei mir ganz anders aus!
Folgende Einträge sind bei mir gar nicht vorhanden:

1. mit Rahmen und einiges andere!
2. ohne
3. erste Versuche für das Textfeldkontextmenü.css , noch ohne Symbole!

Die Symbole für DeepL und Google kommen von den jeweiligen Skripten,
das Symbol für "Ausgewählten Text übersetzen" entweder auch von einem Skript
oder von einer Erweiterung!

Ich bin noch nicht soweit!
Z.Z. kämpfe ich mit dem Kontextmenü der Tabs herum.

Endor

@Horstmann.

Zitat von Horstmann

CSS menupopup[needsgutter] > menu > .menu-icon { display: none !important; }

Ist schon mal nicht schlecht. Aber:

Bei Menüeinträgen von einigen Erweiterungen und Scripten wird so nun kein Symbol
mehr angezeigt. Auch in der Menüleiste bei Lesezeichen sind die Ordnersymbole weg.

Mira_Belle

Rechtschreibung prüfen und Sprachen werden nur angezeigt wenn ein oder
mehrere Wörterbücher installiert sind. Bei mir kommen noch durch Erweiterungen
und Scripte einige Einträge dazu.

Mfg.
Endor

Horstmann

Zitat von Endor

@Horstmann.

Zitat von Horstmann

CSS menupopup[needsgutter] > menu > .menu-icon { display: none !important; }

Ist schon mal nicht schlecht. Aber:
Bei Menüeinträgen von einigen Erweiterungen und Scripten wird so nun kein Symbol
mehr angezeigt. Auch in der Menüleiste bei Lesezeichen sind die Ordnersymbole weg.

War wohl etwas zu locker, sorry.
Sowas evtl.?

CSS

#mainPopupSet menu menupopup > menu:not(.menu-iconic) > .menu-icon {
    display: none !important;
}

Endor

Leider nein.
Der tut gar nichts.

Symbole in den Kontextmenüs [ Update ]

Ähnliche Themen

Symbole in Menüs

Browser-Werkzeuge / Popups nicht automatisch ausblenden

SUCHE Addon für den Verlauf

Suche in Adressleiste mit nur einem Klick starten

FF92: Probleme in Folder-PopUps

Nach Update auf 91.0 SSL Zertifikat kann nicht mehr hinterlegt werden und PopUps werden gesperrt trotz Freigabe

Ähnliche Themen

Symbole in Menüs

Browser-Werkzeuge / Popups nicht automatisch ausblenden

*SUCHE* Addon für den Verlauf

Suche in Adressleiste mit nur einem Klick starten

FF92: Probleme in Folder-PopUps

Nach Update auf 91.0 SSL Zertifikat kann nicht mehr hinterlegt werden und PopUps werden gesperrt trotz Freigabe

SUCHE Addon für den Verlauf