Symbole in den Kontextmenüs [ Update ]

Mira_Belle

Update

12.09.2023

Version 2.0

Beitrag

RE: Symbole in den Kontextmenüs [ Update ]

Tada

Es ist so weit!

Es gibt "neue" Symbole in Form von Vektorgrafiken.

Außerdem habe ich ausgemistet!

Der Code des JavaSkripts wurde schon angepasst,

das CSS liefere ich hier noch nach.

Auch das CSS für die Symbole in der Bibliothek ist fertig.

(Quelltext, 836 Zeilen)

Und hier das CSS für die Bibliothek:

(Quelltext, 82 Zeilen)

Und die "neuen" Grafiken dürfen auch nicht fehlen!

icons.zip

Mira_Belle

12. September 2023 um 10:33

Ursprung

-------------------------------------------------------------------------------------------------------------------------------------------------------

So, es geht los!

Hier erst einmal die Pop-ups, die ich gefunden habe als Bildchen.

Wenn man ins leere klickt.

Wenn ein Text markiert wurde.

Wenn eine Internetadresse markiert wurde.

Wenn eine Grafik angeklickt wurde.

Wenn ein Link angeklickt wurde.

Wenn ich jetzt nix vergessen habe, kann es losgehen.

Jetzt gilt es, die Einträge zu finden.

Gruß

Mira

Sören Hentzschel

Damit man diesen Thread auch über die Suchfunktion findet, wenn man nach dem richtigen Begriff sucht: Du sprichst vom Kontextmenü.

2002Andreas

Zitat von Mira_Belle

Wenn ich jetzt nix vergessen habe

usw. usw.

dann viel Spaß dabei, wird eine ganze Weile dann dauern

PS:

Allein mein Code für das Kontextmenü hat rund 1300 Zeilen:

Und das, obwohl ich in meinem Hauptprofil reichlich Einträge ausgeblendet habe:

Mira_Belle

Zitat von 2002Andreas

Zitat von Mira_Belle

Wenn ich jetzt nix vergessen habe

...
usw. usw.
dann viel Spaß dabei, wird eine ganze Weile dann dauern
...

Mal schauen, ob ich den haben werde.

Und Danke für die Hinweise auf die anderen Kontextmenüs.

Gruß

Mira

2002Andreas

Zitat von Mira_Belle

ob ich den haben werde.

Ich würde mir Tage mit (schlechtem Wetter) dafür aussuchen

Zitat von Mira_Belle

Und Danke für die Hinweise

Gerne doch, wobei es ja oben unter den Menüs noch weitere Untermenüs gibt.

Mira_Belle

Der erste Teil ist geschafft!

Wenn man ins Leere klickt.

Wenn ein Text markiert wurde.

Wenn eine Internetadresse markiert wurde.

Wenn eine Grafik angeklickt wurde

Wenn ein Link angeklickt wurde.

Hier habe ich dem "Background-tab Link" auch noch ein Icon spendiert.

Der Code:

CSS

  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 3px center;
    background-repeat: no-repeat;
    background-size: 16px;
    -moz-context-properties: fill, fill-opacity;
    fill: currentColor;
}

#context-savepage { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/save.svg"); }
#context-pocket { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/pocket-outline.svg"); }
#context-selectall { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/select-all-on.svg"); }
#context-take-screenshot { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/screenshot.svg"); }
#context-viewsource { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/document-search.svg"); }
#context-inspect-a11y { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/tool-accessibility.svg"); }
#context-inspect { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/command-pick.svg"); }
#context-copy { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/edit-copy.svg"); }

#context-searchselect { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/search-glass.svg"); }
#context-viewpartialsource-selection { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/document-search.svg"); }

#context-openlinkincurrent { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/link-square.svg"); }
#context-openlinkintab { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/new-tab.svg"); }
#context-openlink { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/window.svg"); }
#context-openlinkprivate { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/privateBrowsing.svg"); }
#context-bookmarklink { background-image: url("chrome://browser/skin/save.svg"); }
#context-savelink { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/image-add.svg"); }
#context-print-selection { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/print.svg"); }

#context-savelinktopocket { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/image.svg"); }
#context-copylink { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/link.svg"); }
#context-viewimage { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/image-add.svg"); }
#context-saveimage { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/image.svg"); }
#context-copyimage-contents  { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/image-copy.svg"); }
#context-copyimage { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/resize-image.svg"); }
#context-sendimage { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/link.svg"); }
#context-setDesktopBackground { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/resize-image.svg"); }

#_36bde3a5-9f17-4ad9-a587-d4a3c8e8d200_-menuitem-_background-tab_link { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACcklEQVRYR8WWzVEbQRBGtRHYHHy2iAAIgEJkIEdgcfbBEAEiAhcXrogITAbI5QAMVQ5gdfYBiEB8b6uHaq1md2ZXBk3VlHa0/fOmu6dni8GWR7Fl/4NWgOVyeSvAz5rHRVE8xWAls6//P7h3C8mWuRtLASzN0L2HkNOPWn/XnGgOI86QnwnkMgWSC4CdCkKTHf/UBCI1iMQXgaAbHV0AMIBBv+OF1qQJB7wDamwzpIXUnQgCubXRFcAbuJDRacyopYh3pIkBBHW0Fom+AHMZIx2tQyATCVybUCmd3bpCXwDsUGQnGRBE4tzkSMXM62wCkAVh6SglTE3cC+DgfwJgiyqPFlhwJIhTPf+w9a7vE6kIUDR7iTA3FqMDGOn5ztYU4zy8SwFwrDj3TeOp7Yx7JUUhNLUV4He7CzYGkIGhdsS9kDMe/N1hhfhoit0iYJcN+ctpvR5upsUZILJBd6R9MzrVALv+08N5ALkRwEQAwHzlT61X0p4qwql0QhO50PM8J/6SmQSH+j3U/G16FZC3kQIoJUzef0lxlOl8UMv5P+l9Mt2D+qlJAUSPTg6IIIjWkZO9lHMa0spoBJABdhxtHpkAPn1/SYU/GcFGG0Bj+8wE8Bv4JudXMb02gNCGn6Xc9QhWvlzz4a7gJlz7rnwFsMLhqEBO+x0acTR3mVGYSa46fhqlzbl+sVnBeAAvHOzzybUfI88EIHJEst5BXzflAULF4xRaFKd9nQdAiyz1RFSZwHCJ7dQj0PvI5UQDGcFM9VM1ttARYxEgR8y3GCMZZUYBCHvubbcp3EIRGNZTQH44Lm8NQY2NQ0t+tw+SppBtHeAFE7gPMJeICC4AAAAASUVORK5CYII="); }

Alles anzeigen

Jetzt geht es an die anderen Kontextmenüs.

Werde also hier, in diesem Thread weiter machen.

Wenn jemand noch Kontextmenüs findet, auf die Andreas mich nicht hingewiesen hat, nur her damit.

Gruß

Mira

grisu2099

Na dann:

- Rechtsklick in leeren Bereich der Menüleiste/Navigationsleiste

- Rechtsklick PopUp Downloads

- Rechtsklick Suchleiste

- Rechtsklick Adreßleiste

- Klick auf Schloßsymbol/Schildsymbol

- Rechtsklick Lesezeichen und Lesezeichensymbolleiste

- Rechtsklick Tab/Tableiste

- Rechtsklick auf Video

- Rechtsklick Kennwortfelder

- Rechtsklick Textfelder (z.B. hier im Editor)

- Rechtsklick Seitenframes

dazu die normalen Menüeinträge...

...ohne Anspruch auf Vollständigkeit...

Mira_Belle

Zitat von grisu2099

Na dann:
...

dazu die normalen Menüeinträge...
...ohne Anspruch auf Vollständigkeit...

Moin und DANKE.

Die Liste bin ich gerade mal durchgegangen.

Da sind ja Menüs dabei, die habe ich ja noch nie genutzt, geschweige denn gesehen.

Ob ich die ALLE dann auch anpassen werde?

Adressleiste, ja, aber nur die Subs.

Tableiste, ja.

Menüleiste, glaub' ich auch, wahrscheinlich aber nicht alles.

Rechtsklick Adress- und Suchfeld, wahrscheinlich.

Gruß

Mira

2002Andreas

Zitat von Mira_Belle

Der erste Teil ist geschafft!

Laut deinen Screenshots haben die Icons von Erweiterungen einen anderen Abstand als deine neuen.

Soll das so sein/bleiben?

Ansonsten:

Den Wert musst du dir dann anpassen:

CSS

/*Abstände pauschal für alle Icons von Erweiterungen im Kontextmenü*/

#contentAreaContextMenu .menu-iconic > .menu-iconic-left,
#contentAreaContextMenu .menuitem-iconic > .menu-iconic-left {
  margin-inline-end: 0.4em !important;
  margin-left: -9px !important;
}

Mira_Belle

Zitat von 2002Andreas

Laut deinen Screenshots haben die Icons von Erweiterungen einen anderen Abstand als deine neuen.
Soll das so sein/bleiben?
...

Nein, natürlich nicht.

Danke für den Hinweis.

Habe es erst einmal so korrigiert!

CSS

  menupopup:not(.in-menulist) > menu:not(.menu-iconic),
  menupopup:not(.in-menulist, [aria-label]) > menuitem:not(.menuitem-iconic, [checked="true"]) {
    margin-left: 7px !important;
    background-position: left 0 center;
    background-repeat: no-repeat;
    background-size: 16px;
    -moz-context-properties: fill, fill-opacity;       
    fill: currentColor;          
}

Aber da scheint mir noch der Wurm drinne zu sein.

background-position: left 0 center; muss sein, weil sonst die Symbole wegspringen.

Muss ich noch testen, ob ich das left 0 weg lassen kann.

CSS

#contentAreaContextMenu .menu-iconic > .menu-iconic-left,
#contentAreaContextMenu .menuitem-iconic > .menu-iconic-left {

spricht nicht an!

Liegt aber vielleicht an weiterem Code.

Muss ich auch noch testen.

Gruß

Mira

2002Andreas

Zitat von Mira_Belle

weil sonst die Symbole wegspringen.

Ich habe das mal so gemacht:

Dann funktioniert auch mein Code aus Beitrag Nr. 9

CSS

  menupopup:not(.in-menulist) > menu:not(.menu-iconic),
  menupopup:not(.in-menulist, [aria-label]) > menuitem:not(.menuitem-iconic, [checked="true"]) {
    padding-left: 25px !important;
    background-position: 5px 12px !important;
    background-repeat: no-repeat;  
    -moz-context-properties: fill, fill-opacity;
    fill: currentColor;
}

/*Abstände pauschal für alle Icons von Erweiterungen im Kontextmenü*/

#contentAreaContextMenu .menu-iconic > .menu-iconic-left,
#contentAreaContextMenu .menuitem-iconic > .menu-iconic-left {
  margin-inline-end: 0.4em !important;
  margin-left: -9px !important;
}

Alles anzeigen

Mira_Belle

Zitat von 2002Andreas

Ich habe das mal so gemacht:
...

Vielen, vielen Dank!

CSS

  menupopup:not(.in-menulist) > menu:not(.menu-iconic),
  menupopup:not(.in-menulist, [aria-label]) > menuitem:not(.menuitem-iconic, [checked="true"]) {
    margin-left: 7px !important;
    background-position: 0 center !important;
    background-repeat: no-repeat;
    background-size: 16px;
    -moz-context-properties: fill, fill-opacity;
    fill: currentColor;
}

/*Abstände pauschal für alle Icons von Erweiterungen im Kontextmenü*/

#contentAreaContextMenu .menu-iconic > .menu-iconic-left,
#contentAreaContextMenu .menuitem-iconic > .menu-iconic-left {
  margin-inline-end: 0.5em !important;
  margin-left: -15px !important;
}

Alles anzeigen

Muss aber noch mit den Werten:

CSS

  margin-inline-end: 0.5em !important;
  margin-left: -15px !important;

Herum experimentieren, so stimmt es noch nicht ganz.

Warum verhält es sich anders, wenn der Code per CSS eingebunden

oder per Stildingens verarbeitet wird?

Oder kommt es mir nur so vor?

Egal, bekomme das noch hin.

Gruß

Mira

2002Andreas

Zitat von Mira_Belle

bekomme das noch hin.

Mira_Belle

Jetzt passts!

CSS

    margin-inline-end: 9px !important;
    margin-left: -18px !important;

Gruß

Mira

Mira_Belle

Tabskontextmenüs

CSS

/* ========== Tabs ========== */

/* Neuer Tab */
#context_openANewTab { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/new-tab.svg"); }
/* Tab neu laden */
#context_reloadTab { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/reload.svg"); }
/* Tab stummschalten */
#context_toggleMuteTab { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/audio-muted.svg"); }
/* Stummschaltung für Tab aufheben */
#context_toggleMuteTab[muted] { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/audio.svg"); }
/* Tab anheften */
#context_pinTab { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/glyph-pin-16.svg"); }
/* Tab klonen */
#context_duplicateTab { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/duplicat.svg"); }
/* Tab als Lesezeichen hinzufügen */
#context_bookmarkTab { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/bookmark-hollow.svg"); }
/* Tab verschieben */
#context_moveTabOptions { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/move.svg"); }
/* Alle Tabs auswählen */
#context_selectAllTabs { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/tab-multiple.svg"); }
/* Tab schließen */
#context_closeTab { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/close.svg"); }
/*Mehrere Tabs schließen */
#context_closeTabOptions { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/close-more.svg"); }
/* Geschlossenen Tab wieder öffnen */
#context_undoCloseTab { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/undo.svg"); }

/* Add Tab to... */
#_fbcbdc47-ebd2-42f0-b2bb-7cc902ec2f40_-menuitem-_add-current-tab-menu > hbox:nth-child(1) {
  margin-left: -17px !important;
}

/* ================================================================ */

/* Neuer Tab */
#toolbar-context-openANewTab { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/new-tab.svg"); }
/* Ausgewählten Tab neu laden */
#toolbar-context-reloadSelectedTab { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/reload.svg"); }
/* Ausgewählten Tab als Lesezeichen hinzufügen... */
#toolbar-context-bookmarkSelectedTab { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/bookmark-hollow.svg"); }
/* Alle Tabs auswählen */
#toolbar-context-selectAllTabs { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/tab-multiple.svg"); }
/* Geschlossene Tabs wieder öffnen */
#toolbar-context-undoCloseTab { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/undo.svg"); }

/* Menüleiste */

/*
    .menu-iconic-left { margin-inline-end: 0 !important; }
    menuitem[checked="true"] > .menu-iconic-left { margin-inline-end: -8px !important; }
/*
#toggle_toolbar-menubar {
  background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/calendar-agenda.svg");
}
*/




/* Lesezeichen-Symbolleiste */
#toggle_PersonalToolbar { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/bookmarks-toolbar.svg"); }
/* Symbolleiste anpassen… */
menuitem.viewCustomizeToolbar { background-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/customize.svg"); }

Alles anzeigen

Was mir so gar nicht gelingen will,

ist das "Menüleiste" an gleicher Stelle steht, egal ob aktiviert oder deaktiviert.

Gruß

Mira

2002Andreas

Zitat von Mira_Belle

das "Menüleiste" an gleicher Stelle steht, egal ob aktiviert oder deaktiviert.

Teste bitte, den Wert evtl. noch anpassen.

CSS

/* Menüleiste */
   
 #toggle_toolbar-menubar[checked="true"] > .menu-iconic-text { 
   margin-left: 11px !important; 
}

Mira_Belle

Danke Andreas.

Nun ja, mit

CSS

    menupopup > menuitem,
    menupopup > menu {
        appearance: none !important;
        padding-block: 2px !important;
        padding-inline-start: 25px !important;
    }

in meiner Lesezeichen.css

und

CSS

    /*Abstände für alle Icons im Kontextmenü*/
    
  menupopup:not(.in-menulist) > menu:not(.menu-iconic),
  menupopup:not(.in-menulist, [aria-label]) > menuitem:not(.menuitem-iconic, [checked="true"]) {
    margin-left: 25px !important;
    background-position: 0 center !important;
    background-repeat: no-repeat;
    background-size: 16px;
    -moz-context-properties: fill, fill-opacity;
    fill: currentColor;
}



/* Menüleiste */

 #toggle_toolbar-menubar[checked="true"] > .menu-iconic-text { 
   margin-left: 2px !important; 
}

Alles anzeigen

Habe ich jetzt "alles" auf Linie,

aber ...

es sieht bescheiden aus!

Add Tabs wäre dann normal, so wie ich es gerne hätte!

In diesem CSS hat der Autor es hinbekommen. => menu_icons.zip

Ich habe nur noch nicht rausgefunden, wie!

Gruß

Mira

grisu2099

Teste mit einem kleineren Wert bei margin-left...

Mira_Belle

Zitat von grisu2099

Teste mit einem kleineren Wert bei margin-left...

Ja, das ist möglich und die Icons samt Beschriftung wandern wieder näher an den Rand, aber

dann habe ich ja wieder das Problem mit .... margin-left: 2px !important;

... dem Eintag "Menüleiste".

Wie ich schon schrieb, der Autor der menu_icons.css hat es ja auch irgendwie hinbekommen.

Halt ohne diesen Code, irgendwie anders.

Gruß

Mira

Und so schauts mit margin-left: 25px !important; aus.

2002Andreas

Zitat von Mira_Belle

hat es ja auch irgendwie hinbekommen.

Naja, er hat ja auch einige unterschiedliche Abstände in seinem Code.

Symbole in den Kontextmenüs [ Update ]

Update

RE: Symbole in den Kontextmenüs [ Update ]

Mira_Belle 5. Juli 2022 um 12:44

Ä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

Update

RE: Symbole in den Kontextmenüs [ Update ]

Mira_Belle 5. Juli 2022 um 12:44

Ä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