fx153: Set menu icons via --menuitem-icon for in-content menus

The menu icon element is now an <html:img> that renders the 'image'
attribute or 'content: var(--menuitem-icon)', and 'list-style-image' is
ignored, so iconic menuitems showed broken-image placeholders on
Windows and Linux. list-style-image is kept for native macOS menus,
which still read it.
This commit is contained in:
Dan Stillman 2026-08-04 13:19:04 -04:00
parent 97de8858fe
commit 300305a9fb
4 changed files with 10 additions and 5 deletions

View file

@ -24,7 +24,9 @@
@mixin svgicon-menu($icon, $color, $size: "16", $prefix: false, $has2x: false, $light-dark: false) {
// Disable 2x because list-style-image doesn't support image-set
// list-style-image is used by native macOS menus, --menuitem-icon by in-content menus
list-style-image: -make-icon-background($icon, $color, $size, $prefix, false);
--menuitem-icon: #{-make-icon-background($icon, $color, $size, $prefix, false)};
@if ($color == 'universal') {
@if ($light-dark) {
@include light-dark(fill, nth($light-dark, 1), nth($light-dark, 2));

View file

@ -89,7 +89,7 @@ $menu-icons: (
@include macOS-hide-menu-icons;
}
menupopup image {
menupopup :is(image, .menu-icon) {
-moz-context-properties: fill, fill-opacity;
fill: var(--fill-secondary);
@ -103,9 +103,11 @@ menu {
&.zotero-custom-menu-item {
@media (prefers-color-scheme: light) {
list-style-image: var(--custom-menu-icon-light, none);
--menuitem-icon: var(--custom-menu-icon-light, none);
}
@media (prefers-color-scheme: dark) {
list-style-image: var(--custom-menu-icon-dark, none);
--menuitem-icon: var(--custom-menu-icon-dark, none);
}
}
}

View file

@ -1,6 +1,6 @@
menu,
menuitem {
.menu-icon[src] {
.menu-icon[srcset] {
-moz-default-appearance: none;
}
}

View file

@ -26,7 +26,7 @@ menupopup {
}
menuitem:is([checked]):is([type="radio"]) > .menu-icon {
list-style-image: url("chrome://zotero/skin/win/menu-radio.svg");
content: url("chrome://zotero/skin/win/menu-radio.svg");
}
menulist {
@ -45,10 +45,11 @@ menulist {
& > .menu-icon {
display: revert;
visibility: inherit;
-moz-context-properties: fill, fill-opacity;
fill: currentColor;
fill-opacity: var(--menu-icon-opacity);
list-style-image: url("chrome://zotero/skin/win/menu-radio.svg");
fill-opacity: var(--menu-arrow-opacity);
content: url("chrome://zotero/skin/win/menu-radio.svg");
width: 16px;
margin-inline-end: 8px;
}