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

Firefox 141 beta Kontextmenu Symbolabstand

Ähnliche Themen

Projektvorstellung WebLibre Browser Android

Problem mit Cloudflare