Firefox 141 beta Kontextmenu Symbolabstand

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.
Es gibt eine Ausnahme: Wenn man in ein Textfeld einen Rechtsklick
macht, im Kontextmenü die Rechtschreibprüfung aktiviert, dann mit
Rechtsklick das Menü noch mal öffnet dann sind die zwischen den Einträge
mehr Abstand und links zwischen den Symbolen und Text ist auch
mehr Abstand . Wie kann man mit CSS den Abstand zwischen Text
und Symbol nur in diesem Menü verringern?

Linkes Bild so ist es normal, rechtes Bild bei aktivierter Rechtschreibprüfung.
Rechtschreibprüfung Eintrag wird nur bei installiertem Wörterbuch angezeigt.

Mfg.
Endor

2002Andreas

Zitat von Endor

nur in diesem Menü verringern?

Hallo Endor.

Teste doch mal, ob es damit funktioniert, evtl. die Werte anpassen

CSS

#contentAreaContextMenu[needsgutter] {
  @media (-moz-platform: linux) or (-moz-platform: windows) {
    & >  menu > .menu-icon {
      margin-left: -9px !important;
	  margin-right: 14px !important;
    }
  }
}

#contentAreaContextMenu[needsgutter] {
  @media (-moz-platform: linux) or (-moz-platform: windows) {
    & > menuitem > .menu-icon {
      margin-left: -2px !important;
      margin-right: -8px !important;    
    }
  }
}

#spell-check-enabled[checked="false"] > label {
  margin-left: 13px !important;
}

#spell-check-enabled[checked="false"] > image {
  margin-left: -10px !important;
}

#spell-check-enabled[checked="true"] > label {
  margin-left: 15px !important;
}
#spell-check-enabled[checked="true"] > image {
  margin-left: -8px !important;
}

Alles anzeigen

Edit:

Evtl. nutzt du ja ein anderes Wörterbuch als ich zum Test.

Dann musst du das auch anpassen:

#spell-check-enabled

Endor

Hallo 2002Andreas
Mit Deinem obigen CSS Code sieht es schon besser aus.
Aber er spricht nicht alle Einträge an.
Alle die von Scripten eingefügt werden zbs. aber auch andere.

Trotzdem vielen Dank für Deine Mühe.
Mfg.
Endor

2002Andreas

Zitat von Endor

er spricht nicht alle Einträge an.

Ob es dafür einen pauschalen Code gibt kann ich nicht sagen

Ich habe hier alle Einträge einzeln angepasst.

Endor

Zitat von 2002Andreas

Ich habe hier alle Einträge einzeln angepasst.

Ja das möchte ich ja auch bloß wie, ohne dass es anderswo Auswirkungen hat.
Mfg.
Endor

2002Andreas

Zitat von Endor

dass es anderswo Auswirkungen hat.

Am besten keinen Eintrag so pauschal ansprechen:

menuitem[label="Kopieren"]

sondern immer mit der Bezeichnung, von wo du ihn bekommen hast.
Z.B. dann so:

[data-l10n-id="text-action-copy"]

Und nie 2 Einträge in einem Code zusammenfassen.

PS:

Ich habe fast einen halben Tag zwecks Umstellung/Anpassung gebraucht

Horstmann

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?

Endor

Horstmann
Bin mir nicht sicher ob das ein Bug ist.
Es verhält sich aber auch ohne CSS Codes usw. so.

2002Andreas

Zitat von Endor

ob das ein Bug ist.

Das liegt an:

Code

menupopup[needsgutter] {
  @media (-moz-platform: linux) or (-moz-platform: windows) {
    & > :is(menu, menuitem) > .menu-icon {
      display: revert;
    }
  }
}

.DeJaVu

Wenn ich das lösen müsste, würde ich bei deinen Anpassungen zum Bild anfangen, denn die Symbole bei den Erweiterungen stimmen ja, die wurden erst windschief durch das CSS von Andreas. Da ich keine eigenen Bilder nutze, sind die Einträge ohne Bilder auch entsprechend alle linksbündig und gleich ausgerichtet. Beta nutze ich so nicht, aber die Nightly macht es auch "richtig" bei Texteingabefeldern.

Mira_Belle

Endor Welches CSS nutzt Du um a. Symbole vor die Einträge einzufügen?
Bitte poste doch mal das ganze CSS.

Endor

Zitat von .DeJaVu

Nightly macht es auch "richtig" bei Texteingabefeldern.

Habe ich gerade mal getestet. Nightly von heute, selbes Verhalten.
Leider.

2002Andreas

teste das mal damit sieht es brauchbar aus

CSS

menupopup[needsgutter] {
  @media (-moz-platform: linux) or (-moz-platform: windows) {
    & > :is(menu, menuitem) > .menu-icon {
      display: none !important;
    }
  }
}

Nur bei den Erweiterungen hapert es noch.

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

CSS

#tabContextUndoList > menupopup:nth-child(4) > menuitem:nth-child(1),
	#ContextUndoList > menupopup:nth-child(4) > menuitem:nth-child(1){
	appearance: none !important;
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABeElEQVQ4jX2SP0vDUBTFT0oWU1sdVLAUsdIOXRIQaVEcnArN1s0xxU/i1K/gppsKAae+UruIVIfikLxV0EFFKBSR9B8meB2kr0mb9MAb8s67597fe5EYY4RoXei6Xl3gA4wxCpNt29Rut4kxdr6oPhZlKIqCQqGAZDJpmKYZGSIxxqhcLgMA3h6v8dS8QuX0Bo1GY1FjgSb7d4cfD9jYVMT3JNgvzjkcxzEYY9B1vSoC+oMRvPU9pLbi6A9Gka0VRUE+n0en0zFM05xOcHZ5i8/hKtxfQHu9Q2plWuRH6/V6AIBEIgHLsgxxiZn0GrqjGLrfP8jtpANd/WjFYhHZbBaqqsJxnOkEldI+KqVpUbP5Hoq2HF8KhIuAe+sllHkW7eQ4eLEy0f+PeKhuB4xW61mg2fYX3PEYuYMMJuclSQpOIMuBFxWaRZsL4JyDcz5XqGnaQrSj3WzovlC9XiciItd155bneUREVKvVKHxun6LQhB9lRKHN6g+C+M39afVRcgAAAABJRU5ErkJggg==") no-repeat !important;
	min-height: 24px!important;
	padding-left:36px!important;
	background-position:13px 9px!important;}
	
	#tabContextUndoList > menupopup:nth-child(4) > menuitem:nth-child(1):hover,
	#ContextUndoList > menupopup:nth-child(4) > menuitem:nth-child(1):hover{
	appearance: none !important; 
	background: #ecf0f6 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABeElEQVQ4jX2SP0vDUBTFT0oWU1sdVLAUsdIOXRIQaVEcnArN1s0xxU/i1K/gppsKAae+UruIVIfikLxV0EFFKBSR9B8meB2kr0mb9MAb8s67597fe5EYY4RoXei6Xl3gA4wxCpNt29Rut4kxdr6oPhZlKIqCQqGAZDJpmKYZGSIxxqhcLgMA3h6v8dS8QuX0Bo1GY1FjgSb7d4cfD9jYVMT3JNgvzjkcxzEYY9B1vSoC+oMRvPU9pLbi6A9Gka0VRUE+n0en0zFM05xOcHZ5i8/hKtxfQHu9Q2plWuRH6/V6AIBEIgHLsgxxiZn0GrqjGLrfP8jtpANd/WjFYhHZbBaqqsJxnOkEldI+KqVpUbP5Hoq2HF8KhIuAe+sllHkW7eQ4eLEy0f+PeKhuB4xW61mg2fYX3PEYuYMMJuclSQpOIMuBFxWaRZsL4JyDcz5XqGnaQrSj3WzovlC9XiciItd155bneUREVKvVKHxun6LQhB9lRKHN6g+C+M39afVRcgAAAABJRU5ErkJggg==") no-repeat !important;		
	min-height: 24px!important;
	padding-left:36px!important;
	background-position:13px 9px!important;}
	
	#context_moveTabToNewGroup{
	appearance: none !important;
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABeElEQVQ4jX2SP0vDUBTFT0oWU1sdVLAUsdIOXRIQaVEcnArN1s0xxU/i1K/gppsKAae+UruIVIfikLxV0EFFKBSR9B8meB2kr0mb9MAb8s67597fe5EYY4RoXei6Xl3gA4wxCpNt29Rut4kxdr6oPhZlKIqCQqGAZDJpmKYZGSIxxqhcLgMA3h6v8dS8QuX0Bo1GY1FjgSb7d4cfD9jYVMT3JNgvzjkcxzEYY9B1vSoC+oMRvPU9pLbi6A9Gka0VRUE+n0en0zFM05xOcHZ5i8/hKtxfQHu9Q2plWuRH6/V6AIBEIgHLsgxxiZn0GrqjGLrfP8jtpANd/WjFYhHZbBaqqsJxnOkEldI+KqVpUbP5Hoq2HF8KhIuAe+sllHkW7eQ4eLEy0f+PeKhuB4xW61mg2fYX3PEYuYMMJuclSQpOIMuBFxWaRZsL4JyDcz5XqGnaQrSj3WzovlC9XiciItd155bneUREVKvVKHxun6LQhB9lRKHN6g+C+M39afVRcgAAAABJRU5ErkJggg==") no-repeat !important;
	min-height: 24px!important;
	padding-left:28px!important;
	background-position:7px 9px!important;}	
	
	#context_moveTabToNewGroup:hover{
	appearance: none !important; 
	background: #ecf0f6 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABeElEQVQ4jX2SP0vDUBTFT0oWU1sdVLAUsdIOXRIQaVEcnArN1s0xxU/i1K/gppsKAae+UruIVIfikLxV0EFFKBSR9B8meB2kr0mb9MAb8s67597fe5EYY4RoXei6Xl3gA4wxCpNt29Rut4kxdr6oPhZlKIqCQqGAZDJpmKYZGSIxxqhcLgMA3h6v8dS8QuX0Bo1GY1FjgSb7d4cfD9jYVMT3JNgvzjkcxzEYY9B1vSoC+oMRvPU9pLbi6A9Gka0VRUE+n0en0zFM05xOcHZ5i8/hKtxfQHu9Q2plWuRH6/V6AIBEIgHLsgxxiZn0GrqjGLrfP8jtpANd/WjFYhHZbBaqqsJxnOkEldI+KqVpUbP5Hoq2HF8KhIuAe+sllHkW7eQ4eLEy0f+PeKhuB4xW61mg2fYX3PEYuYMMJuclSQpOIMuBFxWaRZsL4JyDcz5XqGnaQrSj3WzovlC9XiciItd155bneUREVKvVKHxun6LQhB9lRKHN6g+C+M39afVRcgAAAABJRU5ErkJggg==") no-repeat !important;		
	min-height: 24px!important;
	padding-left:28px!important;
	background-position:7px 9px!important;}
    
	menuitem[label="Kopieren"]{
	appearance: none !important;
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABeElEQVQ4jX2SP0vDUBTFT0oWU1sdVLAUsdIOXRIQaVEcnArN1s0xxU/i1K/gppsKAae+UruIVIfikLxV0EFFKBSR9B8meB2kr0mb9MAb8s67597fe5EYY4RoXei6Xl3gA4wxCpNt29Rut4kxdr6oPhZlKIqCQqGAZDJpmKYZGSIxxqhcLgMA3h6v8dS8QuX0Bo1GY1FjgSb7d4cfD9jYVMT3JNgvzjkcxzEYY9B1vSoC+oMRvPU9pLbi6A9Gka0VRUE+n0en0zFM05xOcHZ5i8/hKtxfQHu9Q2plWuRH6/V6AIBEIgHLsgxxiZn0GrqjGLrfP8jtpANd/WjFYhHZbBaqqsJxnOkEldI+KqVpUbP5Hoq2HF8KhIuAe+sllHkW7eQ4eLEy0f+PeKhuB4xW61mg2fYX3PEYuYMMJuclSQpOIMuBFxWaRZsL4JyDcz5XqGnaQrSj3WzovlC9XiciItd155bneUREVKvVKHxun6LQhB9lRKHN6g+C+M39afVRcgAAAABJRU5ErkJggg==") no-repeat !important;
	min-height: 24px!important;
	padding-left:28px!important;
	background-position:7px 9px!important;}

	menuitem[label="Kopieren"]:hover{
	appearance: none !important; 
	background: #ecf0f6 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABeElEQVQ4jX2SP0vDUBTFT0oWU1sdVLAUsdIOXRIQaVEcnArN1s0xxU/i1K/gppsKAae+UruIVIfikLxV0EFFKBSR9B8meB2kr0mb9MAb8s67597fe5EYY4RoXei6Xl3gA4wxCpNt29Rut4kxdr6oPhZlKIqCQqGAZDJpmKYZGSIxxqhcLgMA3h6v8dS8QuX0Bo1GY1FjgSb7d4cfD9jYVMT3JNgvzjkcxzEYY9B1vSoC+oMRvPU9pLbi6A9Gka0VRUE+n0en0zFM05xOcHZ5i8/hKtxfQHu9Q2plWuRH6/V6AIBEIgHLsgxxiZn0GrqjGLrfP8jtpANd/WjFYhHZbBaqqsJxnOkEldI+KqVpUbP5Hoq2HF8KhIuAe+sllHkW7eQ4eLEy0f+PeKhuB4xW61mg2fYX3PEYuYMMJuclSQpOIMuBFxWaRZsL4JyDcz5XqGnaQrSj3WzovlC9XiciItd155bneUREVKvVKHxun6LQhB9lRKHN6g+C+M39afVRcgAAAABJRU5ErkJggg==") no-repeat !important;		
	min-height: 24px!important;
	padding-left:28px!important;
	background-position:7px 9px!important;}

	menuitem[label="Einfügen"]{
	appearance: none !important;
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABnElEQVQ4jYWSz0sbQRTHP8rGH5fUmweRIk0o9NQEjKBCI0RK8if0kEY8FKR49BToJRgwXnPJRSH/gYUJ9KTH5LDirZR4UUqlh6U0qW7c3XkeYrYbdc0XhnnDm/eZ77yZMQIqlUoSXBeLxTFGyPhaSvhF1/E4yWQSANM0+ZyZkffpBaw/mo/7Z0/CDICVfBWA/NYu9XrdT64n3rL84QvV4na4g0Hwu/2NnfxrLi9+0vnb5bp7wz/rChDsnowG9Dq/eDEhTMwZWG+2/A3N7zarm3uoTQaUw1wutzEMEEFEA5qpyQgA2Wx26KRGo0Emk6HVahWUUgwg4wCCgHigdX8OUSQSIZVKEY1GC0qpgyEHaA/QIDoU0Gw2/di27QKwcQ/QoF3kAeDYbPvx9Gycm/s4vRSjUqkEeoBGtNMvDgDSyVioG8/zAgDRoG8RkaEeBB0EFQQb/XrN/OLg6YSrH33Iu8SrUAc+wHGEo4Mqvdv/n+Xl2icATk7PRzp4UkopERFxHOfRcF1XRETK5bL4Vwi1Zzyb5llArVbDsqyRgDvukMUKcpWeDwAAAABJRU5ErkJggg==") no-repeat !important;
	min-height: 24px!important;
	padding-left:28px!important;
	background-position:7px 9px!important;}

	menuitem[label="Einfügen"]:hover{
	appearance: none !important;
 	background: #ecf0f6 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABnElEQVQ4jYWSz0sbQRTHP8rGH5fUmweRIk0o9NQEjKBCI0RK8if0kEY8FKR49BToJRgwXnPJRSH/gYUJ9KTH5LDirZR4UUqlh6U0qW7c3XkeYrYbdc0XhnnDm/eZ77yZMQIqlUoSXBeLxTFGyPhaSvhF1/E4yWQSANM0+ZyZkffpBaw/mo/7Z0/CDICVfBWA/NYu9XrdT64n3rL84QvV4na4g0Hwu/2NnfxrLi9+0vnb5bp7wz/rChDsnowG9Dq/eDEhTMwZWG+2/A3N7zarm3uoTQaUw1wutzEMEEFEA5qpyQgA2Wx26KRGo0Emk6HVahWUUgwg4wCCgHigdX8OUSQSIZVKEY1GC0qpgyEHaA/QIDoU0Gw2/di27QKwcQ/QoF3kAeDYbPvx9Gycm/s4vRSjUqkEeoBGtNMvDgDSyVioG8/zAgDRoG8RkaEeBB0EFQQb/XrN/OLg6YSrH33Iu8SrUAc+wHGEo4Mqvdv/n+Xl2icATk7PRzp4UkopERFxHOfRcF1XRETK5bL4Vwi1Zzyb5llArVbDsqyRgDvukMUKcpWeDwAAAABJRU5ErkJggg==") no-repeat !important;		
	min-height: 24px!important;
	padding-left:28px!important;
	background-position:7px 9px!important;}

Alles anzeigen

Für das Forum zum testen Bilder als Base64
hier sonst als link zbs. "..//icons/Tabs.png" in Verwendung.

Mfg.
Endor

Mira_Belle

Zitat von Endor

Mein ganzes CSS für Kontextmenü Symbole sind fast 6000 Zeilen.
Willst Du Dir die wirklich im ernst antun?

Wow!
Selbst wenn ich die "Doppelten" wegen :hover abziehe, sind das noch eine ganze Menge.
Mein CSS für diesen Krempel sind gerade mal ca. 850 Zeilen.
DAS hätte ich mir noch angetan, aber DAS, ne, eher nicht.

2002Andreas

Zitat von Endor

den Abstand zwischen Text
und Symbol nur in diesem Menü verringern?

Hast du mal versucht nur diesen einen Eintrag anzusprechen?

Z.B. mit true/false, und dafür dann 2 Codes erstellen wie in Beitrag Nr. 2 ?

.DeJaVu

Warum formatierst du so unterschiedlich? min-heigth 24 bei einem 16x16 Image? warum kein max-height, oder min-/max-width? Warum kein width/height? padding-left auch unterschiedlich, background-position auch unterschiedliche.

Schau, dass du die Bilder alle auf 24x24 bekommst und einheitlich einfügst - ohne zu Verschieben und Skalieren.

Zudem hast du Performanceverluste durch base64, Sören hat's doch erklärt.

Warum eigentlich kein ::before?

Mira_Belle

.DeJaVu

Zitat von Endor

Für das Forum zum testen Bilder als Base64
hier sonst als link zbs. "..//icons/Tabs.png" in Verwendung.

Aber Deine Einwände sind schon begründet.

Könnte z.B. so aussehen:

CSS

	/* --- Hilfe --- */

	/* Hilfe erhalten */
	#menu_openHelp { background-image: url("../icons/help.svg"); padding-left: 36px;}
	/* Ideen und Feedback teilen... */
	#feedbackPage { background-image: url("../icons/send.svg"); padding-left: 36px;}
	/* Fehlerbehebungsmodus... */
	#helpSafeMode { background-image: url("../icons/debugging-workers.svg"); padding-left: 36px;}
	/* Weitere Informationen zur Fehlerbehebung */
	#troubleShooting { background-image: url("../icons/more.svg"); padding-left: 36px;}
	/* Betrügerische Website melden... */
	#menu_HelpPopup_reportPhishingtoolmenu { background-image: url("../icons/warning.svg"); padding-left: 36px;}
	/* Zu einem neuen Gerät wechseln */
	#helpSwitchDevice { background-image: url("../icons/send-to-device.svg"); padding-left: 36px;}
	/* Über Firefox */
	#aboutName { background-image: url("../icons/firefox.svg"); padding-left: 36px;}

Alles anzeigen

Wobei das mit dem ; padding-left: 36px;} eben die Fehlerkorrektur ist!
Da wurden die Symbole eben auch nicht an der richtigen Stelle angezeigt, bzw. die Menüeinträge.

Kann aber auch verstehen, wenn man so ein Monster von CSS nicht neu aufbauen möchte.

Horstmann

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.

grisu2099

Warum bindest du die Icons überhaupt per background ein? Wenn du .menu-icon anzeigen läßt, kannst du die Icons doch problemlos per list-style-image einbinden. Damit ersparst du dir die ganzen Positionsanpassungen.

Firefox 141 beta Kontextmenu Symbolabstand

Ähnliche Themen

Projektvorstellung WebLibre Browser Android

Problem mit Cloudflare