Last active
July 28, 2026 12:54
-
-
Save emvaized/a379d61ed8970e5711ca7278a39c1895 to your computer and use it in GitHub Desktop.
Iconic Firefox — userChrome CSS snippet which adds back icons for context and popup menus in Firefox. It uses only built-in icons for optimal performance and design consistency.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Iconic Firefox (https://gist.github.com/emvaized/a379d61ed8970e5711ca7278a39c1895/) */ | |
| /* Author (c) 2025 emvaized */ | |
| /* Based on https://gist.github.com/qaz69wsx/83a90423163b65a8344b2e60fc356a58 (no longer available) */ | |
| /* For better compatibility with dark mode, enable `svg.context-properties.content.enabled` in `about:config` */ | |
| :root{ | |
| --uc-popup-menu-icon-color: color-mix(in srgb, currentColor 75%, transparent); | |
| } | |
| .subviewbutton:not(.subviewbutton-iconic, [checked="true"], [targetURI])>.toolbarbutton-icon, | |
| .subviewbutton:not(.subviewbutton-iconic, [checked="true"], [targetURI])>.protections-popup-footer-icon, | |
| menuitem[data-l10n-id="text-action-redo"]:before{ | |
| width:16px; | |
| height:16px; | |
| margin-inline-end:8px !important; | |
| -moz-context-properties:fill, fill-opacity; | |
| fill:var(--uc-popup-menu-icon-color); | |
| } | |
| menupopup:not(.in-menulist)>menu:not(.menu-iconic), | |
| menupopup:not(.in-menulist, [aria-label])>menuitem:not(.menuitem-iconic, [type="radio"], [type="checkbox"]), | |
| toolbarbutton[data-l10n-id*="-manage-"], | |
| menuitem[data-l10n-id*="-manage-"], | |
| #downloadsHistory, | |
| #appMenu-zoom-controls{ | |
| 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:var(--uc-popup-menu-icon-color) !important; | |
| } | |
| #fxa-manage-account-button>vbox>label{ | |
| margin-inline-start:24px !important; | |
| } | |
| .PanelUI-remotetabs-notabsforclient-label{ | |
| margin-inline-start:40px !important; | |
| } | |
| .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined)>.toolbarbutton-text, | |
| toolbarbutton[data-l10n-id*="-manage-"]{ | |
| padding-inline-start:8px !important; | |
| } | |
| #appMenu-fxa-label2::before, | |
| #fxa-manage-account-button::after{ | |
| content:""; | |
| display:-moz-box; | |
| border-radius:50%; | |
| background:var(--avatar-image-url) no-repeat center/contain; | |
| -moz-context-properties:fill, fill-opacity; | |
| fill:var(--uc-popup-menu-icon-color); | |
| } | |
| #appMenu-fxa-label2::before{ | |
| width:16px; | |
| height:16px; | |
| margin-inline-end:8px; | |
| } | |
| #fxa-manage-account-button::after{ | |
| width:32px; | |
| height:32px; | |
| } | |
| .syncNowBtn{ | |
| visibility:visible !important; | |
| -moz-box-ordinal-group:0 !important; | |
| margin-inline-end:8px; | |
| order:0 !important; | |
| } | |
| menupopup[needsgutter] { | |
| @media (-moz-platform: linux) or (-moz-platform: windows) { | |
| > :is(menu, menuitem):not([image], [checked="true"], [type="checkbox"], [type="radio"]) > .menu-icon { | |
| display: none !important; | |
| } | |
| } | |
| } | |
| #PanelUI-fxa-menu-setup-sync-button{ | |
| list-style-image:url("chrome://browser/skin/sync.svg"); | |
| } | |
| .subviewbutton[data-l10n-id$="-settings"]:not([data-l10n-id*="-manage-"]){ | |
| list-style-image:url("chrome://global/skin/icons/settings.svg"); | |
| } | |
| .subviewbutton[data-l10n-id="fxa-menu-connect-another-device"]{ | |
| list-style-image:url("chrome://global/skin/icons/plus.svg"); | |
| } | |
| #appMenu-new-tab-button2{ | |
| list-style-image:url("chrome://browser/skin/new-tab.svg"); | |
| } | |
| #appMenu-new-window-button2, | |
| #appMenuRecentlyClosedWindows{ | |
| list-style-image:url("chrome://browser/skin/window.svg"); | |
| } | |
| #appMenu-new-private-window-button2{ | |
| list-style-image:url("chrome://browser/skin/privateBrowsing.svg"); | |
| } | |
| .subviewbutton[data-l10n-id="library-bookmarks-menu"], | |
| #panelMenuBookmarkThisPage[starred], | |
| #sidebar-switcher-bookmarks{ | |
| list-style-image:url("chrome://browser/skin/bookmark-hollow.svg"); | |
| } | |
| #panelMenuBookmarkThisPage{ | |
| list-style-image:url("chrome://browser/skin/bookmark-hollow.svg"); | |
| } | |
| #panelMenu_searchBookmarks, | |
| #appMenu-find-button2, | |
| #appMenuSearchHistory, | |
| #allTabsMenu-searchTabs{ | |
| list-style-image:url("chrome://global/skin/icons/search-glass.svg"); | |
| } | |
| #panelMenu_viewBookmarksToolbar{ | |
| list-style-image:url("chrome://browser/skin/bookmark-star-on-tray.svg"); | |
| } | |
| .subviewbutton[id$="-history-button"], | |
| #sidebar-switcher-history{ | |
| list-style-image:url("chrome://browser/skin/history.svg"); | |
| } | |
| #appMenuRecentlyClosedTabs{ | |
| list-style-image:url("chrome://browser/skin/tabs.svg"); | |
| } | |
| #appMenuClearRecentHistory, | |
| toolbarbutton.restoreallitem{ | |
| list-style-image:url("chrome://browser/skin/forget.svg"); | |
| } | |
| .subviewbutton[id$="-downloads-button"]{ | |
| list-style-image:url("chrome://browser/skin/downloads/downloads.svg"); | |
| } | |
| #appMenu-passwords-button{ | |
| list-style-image:url("chrome://browser/skin/login.svg"); | |
| } | |
| #appMenu-extensions-themes-button{ | |
| list-style-image:url("chrome://mozapps/skin/extensions/extension.svg"); | |
| } | |
| #appMenu-print-button2{ | |
| list-style-image:url("chrome://global/skin/icons/print.svg"); | |
| } | |
| #appMenu-save-file-button2{ | |
| list-style-image:url("chrome://browser/skin/downloads/downloads.svg"); | |
| } | |
| .subviewbutton[command="cmd_CustomizeToolbars"]{ | |
| list-style-image:url("chrome://browser/skin/customize.svg"); | |
| } | |
| .subviewbutton[oncommand="switchToTabHavingURI('about:performance', true)"]{ | |
| list-style-image:url("chrome://global/skin/icons/performance.svg"); | |
| } | |
| .subviewbutton[key="key_browserToolbox"]{ | |
| list-style-image:url("chrome://devtools/skin/images/tool-inspector.svg"); | |
| } | |
| .subviewbutton[key="key_aboutProcesses"]{ | |
| list-style-image:url("chrome://devtools/skin/images/tool-profiler.svg"); | |
| } | |
| .subviewbutton[key="key_aboutProcesses"] + .subviewbutton{ | |
| list-style-image:url("chrome://global/skin/icons/developer.svg"); | |
| } | |
| .subviewbutton[key="key_browserConsole"]{ | |
| list-style-image:url("chrome://devtools/skin/images/tool-webconsole.svg"); | |
| } | |
| .subviewbutton[key="key_toggleToolbox"]{ | |
| list-style-image:url("resource://devtools-shared-images/command-pick.svg"); | |
| } | |
| .subviewbutton[key="key_viewSource"]{ | |
| list-style-image:url("chrome://devtools/skin/images/tool-styleeditor.svg"); | |
| } | |
| .subviewbutton[key="key_responsiveDesignMode"]:not([checked="true"]){ | |
| list-style-image:url("chrome://devtools/skin/images/command-responsivemode.svg"); | |
| fill-opacity:0; | |
| } | |
| .subviewbutton[key="key_responsiveDesignMode"]+.subviewbutton{ | |
| list-style-image:url("chrome://devtools/skin/images/command-eyedropper.svg"); | |
| } | |
| .subviewbutton[data-l10n-id="appmenu-developer-tools-extensions"]{ | |
| list-style-image:url("chrome://activity-stream/content/data/content/assets/glyph-webextension-16.svg"); | |
| } | |
| #appMenu-help-button2, | |
| #appMenu_menu_openHelp | |
| { | |
| list-style-image:url("chrome://global/skin/icons/help.svg"); | |
| } | |
| #appMenu_menu_HelpPopup_reportPhishingtoolmenu{ | |
| list-style-image:url("chrome://global/skin/icons/warning.svg"); | |
| } | |
| #appMenu_feedbackPage{ | |
| list-style-image:url("chrome://global/skin/icons/lightbulb.svg"); | |
| } | |
| #appMenu_troubleShooting{ | |
| list-style-image:url("chrome://devtools/skin/images/browsers/firefox.svg"); | |
| } | |
| #appMenu_helpSafeMode{ | |
| list-style-image:url("chrome://global/skin/icons/security.svg"); | |
| } | |
| #appMenu_helpSwitchDevice { | |
| list-style-image:url("chrome://browser/skin/import.svg"); | |
| } | |
| #appMenu_aboutName{ | |
| list-style-image:url("chrome://global/skin/icons/info.svg"); | |
| } | |
| #appMenu-quit-button2{ | |
| list-style-image:url('chrome://browser/skin/sync-off.svg'); | |
| } | |
| #sidebar-switcher-tabs{ | |
| list-style-image:url("chrome://browser/skin/tab.svg"); | |
| } | |
| #sidebar-reverse-position[label="Move Sidebar to Right"]{ | |
| list-style-image:url("chrome://browser/skin/sidebars-right.svg"); | |
| } | |
| #sidebar-reverse-position[label="Move Sidebar to Left"]{ | |
| list-style-image:url("chrome://browser/skin/sidebars.svg"); | |
| } | |
| .subviewbutton[data-l10n-id="sidebar-menu-close"]{ | |
| list-style-image:url("chrome://global/skin/icons/close.svg"); | |
| } | |
| #BMB_bookmarksPopup menuitem:not(.menuitem-iconic), | |
| #PlacesToolbar .openintabs-menuitem{ | |
| padding-inline-start:32px !important; | |
| background-position-x:8px; | |
| } | |
| #menu_newNavigatorTab, | |
| menuitem[id$="openANewTab"]{ | |
| background-image:url("chrome://browser/skin/new-tab.svg"); | |
| } | |
| #menu_newNavigator, | |
| #historyUndoWindowMenu, | |
| #context_openTabInWindow, | |
| menuitem[data-l10n-id*="-open-"][data-l10n-id$="-window"]{ | |
| background-image:url("chrome://browser/skin/window.svg"); | |
| } | |
| menuitem[data-l10n-id$="-private-window"]{ | |
| background-image:url("chrome://browser/skin/privateBrowsing.svg") !important; | |
| } | |
| #menu_openFile{ | |
| background-image:url("chrome://browser/skin/open.svg"); | |
| } | |
| #menu_savePage, | |
| #context-saveimage, | |
| #context-savelink, | |
| #context-saveframe, | |
| #context-savevideo, | |
| #context-savepage{ | |
| background-image:url("chrome://browser/skin/downloads/downloads.svg"); | |
| } | |
| menuitem[data-l10n-id$="-email"], | |
| menuitem[data-l10n-id$="-email-link"]{ | |
| background-image:url("chrome://browser/skin/mail.svg"); | |
| } | |
| menuitem[data-l10n-id*="-print"]{ | |
| background-image:url("chrome://global/skin/icons/print.svg"); | |
| } | |
| #menu_importFromAnotherBrowser, | |
| #browserImport{ | |
| background-image:url("chrome://browser/skin/import.svg"); | |
| } | |
| #menu_FileQuitItem{ | |
| background-image:url('chrome://browser/skin/sync-off.svg'); | |
| } | |
| menuitem[data-l10n-id="text-action-undo"], | |
| menuitem[data-l10n-id$="-reopen-closed-tabs"]{ | |
| background-image:url("chrome://global/skin/icons/undo.svg"); | |
| } | |
| menuitem[data-l10n-id="text-action-redo"]:before{ | |
| background-image:url("chrome://global/skin/icons/undo.svg"); | |
| transform:scaleX(-1) !important; | |
| content: ""; | |
| position: absolute; | |
| left: 16px; | |
| } | |
| menuitem[data-l10n-id="text-action-cut"]{ | |
| background-image:url("chrome://browser/skin/edit-cut.svg"); | |
| } | |
| menuitem[data-l10n-id="text-action-copy"], | |
| #context-copyimage-contents, | |
| #syncedTabsCopySelected{ | |
| background-image:url("chrome://global/skin/icons/edit-copy.svg"); | |
| } | |
| #context-stripOnShareLink, | |
| menuitem[data-l10n-id="text-action-strip-on-share"]{ | |
| background-image:url("chrome://browser/skin/fingerprint.svg"); | |
| } | |
| menuitem[data-l10n-id="text-action-paste"]{ | |
| background-image:url("chrome://browser/skin/edit-paste.svg"); | |
| } | |
| menuitem[data-l10n-id="text-action-paste-no-formatting"]{ | |
| background-image:url("chrome://browser/skin/edit-paste.svg"); | |
| } | |
| menuitem[data-l10n-id="text-action-delete"], | |
| #toolbar-context-remove-extension, | |
| .downloadDeleteFileMenuItem, | |
| menuitem[id^="placesContext_delete"], | |
| #unified-extensions-context-menu-remove-extension, | |
| #pageActionContextMenuRemoveExtension, | |
| #context_moveTabToSavedGroup{ | |
| background-image:url("chrome://global/skin/icons/delete.svg"); | |
| } | |
| #menu_find, | |
| #BMB_searchBookmarks, | |
| #context-searchselect-private, | |
| #context-searchselect, | |
| #context-keywordfield, | |
| #context-visual-search{ | |
| background-image:url("chrome://global/skin/icons/search-glass.svg"); | |
| } | |
| #toggle_PersonalToolbar, | |
| #BMB_viewBookmarksToolbar{ | |
| background-image:url("chrome://browser/skin/bookmarks-toolbar.svg"); | |
| } | |
| #menu_customizeToolbars, | |
| #toolbar-context-customize{ | |
| background-image:url("chrome://browser/skin/customize.svg"); | |
| } | |
| #viewSidebarMenuMenu, | |
| #BMB_viewBookmarksSidebar{ | |
| background-image:url("chrome://browser/skin/sidebars.svg"); | |
| } | |
| #menu_bookmarksSidebar:not([checked="true"]), | |
| menuitem[data-l10n-id="menu-bookmark-edit"]{ | |
| background-image:url("chrome://browser/skin/bookmark.svg") !important; | |
| } | |
| #menu_historySidebar:not([checked="true"]){ | |
| background-image:url("chrome://browser/skin/history.svg"); | |
| } | |
| #menu_tabsSidebar:not([checked="true"]), | |
| #sync-tabs-menuitem{ | |
| background-image:url("chrome://browser/skin/tab.svg"); | |
| } | |
| #menu_zoomEnlarge{ | |
| background-image:url("chrome://browser/skin/add-circle-fill.svg"); | |
| } | |
| #menu_zoomReduce{ | |
| background-image:url("chrome://browser/skin/subtract-circle-fill.svg"); | |
| } | |
| #repair-text-encoding{ | |
| background-image:url("chrome://browser/skin/characterEncoding.svg"); | |
| } | |
| #fullScreenItem:not([checked="true"]){ | |
| background-image:url("chrome://browser/skin/fullscreen.svg"); | |
| } | |
| #menu_readerModeItem{ | |
| background-image:url("chrome://browser/skin/reader-mode.svg"); | |
| } | |
| #sanitizeItem, | |
| #placesContext_deleteHost, | |
| menuitem[data-l10n-id="downloads-cmd-clear-list"]{ | |
| background-image:url("chrome://browser/skin/forget.svg"); | |
| } | |
| #historyUndoMenu{ | |
| background-image:url("chrome://devtools/skin/images/debugging-tabs.svg"); | |
| } | |
| menuitem[data-l10n-id*="bookmark-"]:not(.menuitem-iconic), | |
| #context-bookmarkframe, | |
| #placesContext_createBookmark{ | |
| background-image:url("chrome://browser/skin/bookmark-hollow.svg"); | |
| } | |
| #menu_openDownloads{ | |
| background-image:url("chrome://browser/skin/downloads/downloads.svg"); | |
| } | |
| #menu_openAddons{ | |
| background-image:url("chrome://mozapps/skin/extensions/extension.svg"); | |
| } | |
| #sync-setup{ | |
| background-image:var(--avatar-image-url); | |
| } | |
| menuitem[data-l10n-id$="-sync-now"]{ | |
| background-image:url("chrome://browser/skin/sync.svg"); | |
| } | |
| #webDeveloperMenu{ | |
| background-image:url("chrome://browser/skin/developer.svg"); | |
| } | |
| #menu_taskManager{ | |
| background-image:url("chrome://global/skin/icons/performance.svg"); | |
| } | |
| #menu_browserToolbox{ | |
| background-image:url("chrome://devtools/skin/images/fox-smiling.svg"); | |
| } | |
| #menu_responsiveUI:not([checked="true"]){ | |
| background-image:url("chrome://devtools/skin/images/command-responsivemode.svg"); | |
| fill-opacity:0; | |
| } | |
| #menu_eyedropper{ | |
| background-image:url("chrome://devtools/skin/images/command-eyedropper.svg"); | |
| } | |
| #extensionsForDevelopers{ | |
| background-image:url("chrome://activity-stream/content/data/content/assets/glyph-webextension-16.svg"); | |
| } | |
| #menu_pageInfo, | |
| #context-viewimageinfo, | |
| #context-viewframeinfo{ | |
| background-image:url("chrome://global/skin/icons/info.svg"); | |
| } | |
| #menu_preferences, | |
| #openSettingsMenuItem, | |
| #toolbar-context-customize-sidebar{ | |
| background-image:url("chrome://global/skin/icons/settings.svg"); | |
| } | |
| #menu_HelpPopup_reportPhishingtoolmenu{ | |
| background-image:url("chrome://global/skin/icons/lightbulb.svg"); | |
| } | |
| #aboutName{ | |
| background-image:url("chrome://devtools/skin/images/browsers/firefox.svg"); | |
| } | |
| #context_reloadTab, | |
| #context_reloadSelectedTabs, | |
| #context-reloadframe{ | |
| background-image:url("chrome://global/skin/icons/reload.svg"); | |
| } | |
| menuitem[id^="context_toggleMute"]:not([soundplaying], [muted]), | |
| menuitem[id^="context_toggleMute"][soundplaying]:not([muted]), | |
| #context-media-mute{ | |
| background-image:url("chrome://global/skin/media/audio-muted.svg"); | |
| } | |
| menuitem[id^="context_toggleMute"][muted], | |
| #context-media-unmute{ | |
| background-image:url("chrome://global/skin/media/audio.svg"); | |
| } | |
| menuitem[data-l10n-id^="pin-"], | |
| .customize-context-moveToPanel{ | |
| background-image:url("chrome://browser/skin/pin-12.svg"); | |
| } | |
| menuitem[data-l10n-id^="unpin-"], | |
| .customize-context-moveToToolbar{ | |
| background-image:url("chrome://browser/skin/pin.svg"); | |
| } | |
| menuitem.sendtab-target[clientType="desktop"]{ | |
| background-image:url("chrome://browser/skin/device-desktop.svg"); | |
| } | |
| menuitem.sendtab-target[clientType="phone"]{ | |
| background-image:url("chrome://browser/skin/device-phone.svg"); | |
| } | |
| menuitem.sendtab-target[clientType="tablet"]{ | |
| background-image:url("chrome://browser/skin/device-tablet.svg"); | |
| } | |
| menuitem.sendtab-target[clientType="tv"]{ | |
| background-image:url("chrome://browser/skin/device-tv.svg"); | |
| } | |
| menuitem.sendtab-target[clientType="vr"]{ | |
| background-image:url("chrome://browser/skin/device-vr.svg"); | |
| } | |
| menuitem[data-l10n-id="full-screen-exit"]{ | |
| background-image:url("chrome://browser/skin/fullscreen-exit.svg"); | |
| } | |
| #paste-and-go{ | |
| background-image:url("chrome://browser/skin/forward.svg"); | |
| } | |
| .customize-context-reportExtension{ | |
| background-image:url("chrome://global/skin/icons/warning.svg"); | |
| } | |
| .downloadShowMenuItem, | |
| #placesContext_showInFolder, | |
| [data-l10n-id="places-add-folder-contextmenu"]{ | |
| background-image:url("chrome://global/skin/icons/folder.svg"); | |
| } | |
| .openintabs-menuitem, | |
| menuitem[id^="context-open"]:is([id$="intab"], [id$="incontainertab"]), | |
| menuitem[data-l10n-id$="-view-new-tab"], | |
| menuitem[data-l10n-id$="-open-in-tab"]{ | |
| background-image:url("chrome://global/skin/icons/open-in-new.svg"); | |
| } | |
| #context-pocket, | |
| #context-savelinktopocket{ | |
| background-image:url("chrome://global/skin/icons/pocket-outline.svg"); | |
| } | |
| menuitem[data-l10n-id$="-screenshot"]{ | |
| background-image:url("chrome://browser/skin/screenshot.svg"); | |
| } | |
| menuitem[data-l10n-id*="-copy-"][data-l10n-id*="-link"]:not(.menuitem-iconic){ | |
| background-image:url("chrome://global/skin/icons/link.svg"); | |
| } | |
| #context-searchselect[label*="Google"]{ | |
| background-image:url("chrome://activity-stream/content/data/content/tippytop/favicons/google-com.ico"); | |
| } | |
| #context-searchselect[label*="Bing"]{ | |
| background-image:url("chrome://activity-stream/content/data/content/tippytop/favicons/bing-com.ico"); | |
| } | |
| #context-searchselect[label*="DuckDuckGo"]{ | |
| background-image:url("chrome://activity-stream/content/data/content/tippytop/favicons/duckduckgo-com.ico"); | |
| } | |
| #context-inspect-a11y{ | |
| background-image:url("chrome://devtools/skin/images/tool-accessibility.svg"); | |
| } | |
| #context-inspect{ | |
| background-image:url("resource://devtools-shared-images/command-pick.svg"); | |
| } | |
| #context-media-play{ | |
| background-image:url("chrome://global/skin/media/play-fill.svg"); | |
| } | |
| #context-media-pause, | |
| #doNotDisturbMenuItem{ | |
| background-image:url("chrome://global/skin/media/pause-fill.svg"); | |
| } | |
| #context-video-fullscreen{ | |
| background-image:url("chrome://browser/skin/fullscreen.svg"); | |
| } | |
| #context-leave-dom-fullscreen{ | |
| background-image:url("chrome://browser/skin/fullscreen-exit.svg"); | |
| } | |
| #context-video-saveimage{ | |
| background-image:url("chrome://browser/skin/screenshot.svg"); | |
| } | |
| #disableForOriginMenuItem{ | |
| background-image:url("chrome://browser/skin/notification-icons/desktop-notification-blocked.svg"); | |
| } | |
| menuitem[data-l10n-id^="places-edit-"]{ | |
| background-image:url("chrome://global/skin/icons/edit.svg"); | |
| } | |
| #context-translate-selection{ | |
| background-image:url("chrome://browser/skin/translations.svg"); | |
| } | |
| #appMenu-translate-button, | |
| #appmenu-abouttranslations-button{ | |
| list-style-image:url("chrome://browser/skin/translations.svg"); | |
| } | |
| #appMenu-more-button2, | |
| #identity-popup-more-info{ | |
| list-style-image:url("chrome://global/skin/icons/more.svg"); | |
| } | |
| #context-viewsource, | |
| #context-viewframesource, | |
| #context-viewpartialsource-selection{ | |
| background-image:url("chrome://devtools/skin/images/tool-styleeditor.svg"); | |
| } | |
| #context-selectall, | |
| menuitem[data-l10n-id="text-action-select-all"]{ | |
| /* background-image:url("resource:///chrome/devtools/skin/images/highlight-selector.svg"); */ | |
| background-image:url("chrome://global/skin/reader/align-left-20.svg"); | |
| } | |
| #unified-extensions-context-menu-move-widget-up{ | |
| background-image:url("chrome://global/skin/icons/arrow-up.svg"); | |
| } | |
| #unified-extensions-context-menu-move-widget-down{ | |
| background-image:url("chrome://global/skin/icons/arrow-down.svg"); | |
| } | |
| .customize-context-manageExtension, | |
| #unified-extensions-context-menu-manage-extension{ | |
| background-image:url("chrome://global/skin/icons/settings.svg"); | |
| } | |
| #unified-extensions-context-menu-report-extension{ | |
| background-image:url("chrome://global/skin/icons/warning.svg"); | |
| } | |
| #context-setDesktopBackground{ | |
| background-image:url("chrome://browser/skin/canvas.svg"); | |
| } | |
| #appMenu-zoom-controls{ | |
| background-image:url("chrome://global/skin/media/fullscreenEnterButton.svg"); | |
| margin-inline-start:4px !important; | |
| } | |
| menu#frame{ | |
| background-image:url("chrome://browser/skin/window.svg"); | |
| } | |
| #context_moveToStart, | |
| #context_closeTabsToTheStart{ | |
| background-image:url("chrome://global/skin/icons/arrow-left.svg"); | |
| } | |
| #context_moveToEnd, | |
| #context_closeTabsToTheEnd{ | |
| background-image:url("chrome://global/skin/icons/arrow-right.svg"); | |
| } | |
| #context-media-playbackrate{ | |
| background-image:url("chrome://global/skin/icons/performance.svg"); | |
| } | |
| #identity-popup-clear-sitedata-button{ | |
| list-style-image:url("chrome://global/skin/icons/delete.svg"); | |
| } | |
| #toolbar-context-remove-from-toolbar, | |
| #customizationPanelItemContextMenuRemove, | |
| .downloadRemoveFromHistoryMenuItem, | |
| #context_closeTab, | |
| #orgClose{ | |
| background-image:url("chrome://global/skin/icons/close.svg"); | |
| } | |
| #context-showonlythisframe, | |
| #context-media-showcontrols, | |
| #context-previewlink{ | |
| background-image:url('chrome://global/skin/icons/eye.svg'); | |
| } | |
| #context-media-hidecontrols{ | |
| background-image:url('chrome://global/skin/icons/eye-slash.svg'); | |
| } | |
| /* Needs a fix for checkbox items rendered incorrectly with styles applied | |
| #context-video-pictureinpicture:not([checked="true"]){ | |
| background-image:url("chrome://global/skin/media/picture-in-picture-open.svg"); | |
| fill: var(--uc-popup-menu-icon-color) !important; | |
| } | |
| */ | |
| #spell-dictionaries{ | |
| background-image:url("chrome://devtools/skin/images/globe.svg"); | |
| } | |
| #spell-add-dictionaries, | |
| [data-l10n-id="places-add-bookmark"], | |
| #context_moveTabToGroupNewGroup{ | |
| background-image:url("chrome://global/skin/icons/plus.svg"); | |
| } | |
| toolbarbutton[data-l10n-id*="-manage-"], | |
| menuitem[data-l10n-id*="-manage-"], | |
| #manage-saved-logins{ | |
| background-image:url("chrome://browser/skin/menu.svg"); | |
| } | |
| #context-sendpagetodevice-popup menuseparator + menuitem, | |
| #context_sendTabToDevicePopupMenu menuseparator + menuitem, | |
| #context-sendlinktodevice-popup menuseparator + menuitem{ | |
| background-image:url("chrome://global/skin/icons/chevron.svg"); | |
| } | |
| #downloadsHistory{ | |
| background-image:url("chrome://browser/skin/downloads/downloads.svg"); | |
| } | |
| .downloadOpenReferrerMenuItem{ | |
| background-image:url("chrome://global/skin/icons/defaultFavicon.svg") | |
| } | |
| #protections-popup-settings-button{ | |
| list-style-image:url("chrome://global/skin/icons/settings.svg"); | |
| } | |
| #protections-popup-show-report-button{ | |
| list-style-image:url("chrome://browser/skin/controlcenter/dashboard.svg"); | |
| } | |
| toolbarbutton.restoreallitem > .toolbarbutton-icon{ | |
| transform:scaleX(-1); | |
| } | |
| #appMenu-report-broken-site-button, | |
| #protections-popup-report-broken-site-button{ | |
| list-style-image:url("chrome://global/skin/icons/lightbulb.svg"); | |
| } | |
| #context-ask-chat, | |
| #context_askChat{ | |
| background-image:url("chrome://global/skin/icons/highlights.svg"); | |
| } | |
| #fill-login{ | |
| background-image:url("chrome://browser/skin/login.svg"); | |
| } | |
| menuitem[id="context-openlinkinsidebar"][label="Open Link in Second Sidebar"]{ | |
| background-image:url("chrome://userscripts/content/second_sidebar/icons/sidebar-right.svg"); | |
| } | |
| #allTabsMenu-closeDuplicateTabs{ | |
| list-style-image:url('chrome://browser/content/firefoxview/view-recentlyclosed.svg'); | |
| } | |
| [data-l10n-id="places-add-separator"] { | |
| background-image:url("chrome://global/skin/reader/content-width-20.svg"); | |
| } | |
| #context-sendpagetodevice, | |
| #context-sendlinktodevice, | |
| #context_sendTabToDevice{ | |
| background-image:url("chrome://browser/skin/synced-tabs.svg"); | |
| } | |
| #context_moveTabToSplitView, | |
| #context-openlinkinsplitview{ | |
| background-image:url("chrome://browser/skin/split-view-left-16.svg"); | |
| } | |
| menu.share-tab-url-item{ | |
| background-image:url("chrome://browser/skin/share.svg"); | |
| } | |
| #context_addNote, | |
| #context_editNote{ | |
| background-image:url("chrome://global/skin/icons/tab-notes.svg"); | |
| } | |
| #context_moveTabOptions{ | |
| background-image:url("chrome://browser/skin/taskbar-tabs-move-tab.svg"); | |
| } | |
| #context_moveTabToGroup, | |
| #context_moveTabToNewGroup{ | |
| background-image:url("chrome://browser/skin/tabbrowser/tab-groups.svg"); | |
| } | |
| #context_reopenInContainer, | |
| #context-openlinkinusercontext-menu, | |
| [data-l10n-id="places-open-in-container-tab"]{ | |
| background-image:url("chrome://browser/skin/topsites.svg"); | |
| } | |
| #context_duplicateTab, | |
| #context_duplicateTabs{ | |
| background-image:url("chrome://browser/skin/tabs.svg"); | |
| } | |
| #context_selectAllTabs{ | |
| background-image:url("chrome://global/skin/reader/align-right-20.svg"); | |
| } | |
| #context_closeTabOptions{ | |
| background-image:url("chrome://browser/content/firefoxview/view-recentlyclosed.svg"); | |
| } | |
| /* Checkboxes */ | |
| menupopup:not([needsgutter]) > menuitem[type="checkbox"]:not([checked]){ | |
| padding-inline-start:calc(1em + 24px) !important; | |
| } | |
| menuitem[type="radio"], | |
| menuitem[type="checkbox"] { | |
| position: relative; | |
| } | |
| menuitem[type="checkbox"]:before, | |
| menuitem[type="radio"]:before{ | |
| content: ""; position: absolute; | |
| width: 16px; height: 16px; | |
| border: 1px solid color-mix(in srgb, var(--uc-popup-menu-icon-color) 50%, transparent); | |
| left: 10px; top: 6px; | |
| border-radius: 3px; | |
| } |
Author
@ChasCB
I use list-style-image for popup menu items from the navbar (like .subviewbutton), and just assign images as background-image to regular context menu items. I experimented with content approach for context menus, but found that it has no advantages over the currently used approach.
Fair enough.
I spent the afternoon in the browser toolbox trying to solve the issue I raised 4 days ago. Using all sorts of esoteric code I found there and throwing in @media (-moz-platform: macos) etc still no go.
Mystery 🤔
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
You are correct. What I forgot was that ****-inline-end etc was designed for multiple languages especially those that read right to left, whilst just ****-end etc is mainly for English languages. My boo boo.
As for
list-style-image:vs content: Thiscontent:targets the browser icon container which in your case relevant. I started a discussion here 1 year ago: https://www.reddit.com/r/FirefoxCSS/comments/1mfdq1y/firefox_css_property_liststyleimage_to_change_to/cheers.