Some Icons Not Showing In Tools Menu > Browser Tools

[thunderstone135]

Describe the bug
Hi, I just wanted to let you know that some icons are not showing in the Tools Menu > Browser Tools. However, the icons in the App Menu > More Tools are all present.

Expected behavior
The icons in the Tools Menu > Browser Tools should reflect the icons showing in the App Menu > More Tools.

Screenshots

App Menu

Tools Menu

Environment:

• Distribution
  • Original Lepton
  • Lepton's photon style
  • Lepton's proton style
• Firefox Version: Waterfox G4.0.8
• OS:
  • Linux
  • Windows
  • Mac
  • Other:
• Theme:
  • Light
  • Dark
  • Alpenglow (System: Light)
  • Alpenglow (System: Dark)
  • System Default
    • GTK Theme Name (Linux only):
  • Other: (e.g. Photon Colors, Google Chrome Dark, Fairytale Of Nature)

Additional context
I also posted the issue here just in case.

[thunderstone135]

By the way, my svg.context-properties.content.enabled is set to true.

[black7375]

Currently, icons are not applied to checkboxes.

It's not right now, but l'll find a way.

[Nomes77]

A possible solution is to remove [type="checkbox"] and the padding for unchecked checkboxes in layout_menu At least it works for me. Checks show only when checked, when not checked an icon can be shown

menupopup menuitem:not([type="checkbox"], [type="radio"]),
menupopup menu:not([type="checkbox"], [type="radio"]),
#main-menubar > menu {
  -moz-appearance: none !important; /* Linux: menulist */
}

/* Icon */
:not(menu, #ContentSelectDropdown)
  > menupopup
  > menuitem:not(.menuitem-iconic, .in-menulist, [checked="true"]),
:not(menu, #ContentSelectDropdown)
  > menupopup
  > menu:not(.menu-iconic, .in-menulist, [checked="true"]),
#main-menubar > menu,
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
  menuitem:not(.menuitem-iconic, .in-menulist, [checked="true"]),
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
  menu:not(.menu-iconic, .in-menulist, [checked="true"]),
menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu,
menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem,
.openintabs-menuitem,
#blockedPopupDontShowMessage {
  /* Color */
  -moz-context-properties: fill, fill-opacity !important;
  fill: currentColor !important;

  /* Layout */
  background-size: 16px !important;
  background-repeat: no-repeat !important;
  background-image: var(--menuitem-image);
}

/* For native context menus on macOS */
@supports -moz-bool-pref("widget.macos.native-context-menus") {
  :not(menu, #ContentSelectDropdown)
    > menupopup
    > menuitem:not(.menuitem-iconic, [checked="true"], .in-menulist),
  :not(menu, #ContentSelectDropdown)
    > menupopup
    > menu:not(.menu-iconic, [checked="true"], .in-menulist) {
    list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important;
  }
}

/* Padding */
:root {
  --context-menu-background-padding-default: 5px;
  --context-menu-background-padding: var(--context-menu-background-padding-default);
}
:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem:not(.menuitem-iconic),
:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic),
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
  menuitem:not(.menuitem-iconic, .in-menulist, [checked="true"], .bookmark-item),
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
  menu:not(.menu-iconic, .in-menulist, [checked="true"]),
menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu,
menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem,
.openintabs-menuitem,
#blockedPopupDontShowMessage {
  background-position: left var(--context-menu-background-padding) center !important;
  padding-inline-start: var(--context-menu-background-padding) !important;
}

/* Menubar */
@include Option("userChrome.icon.global_menubar") {
  #main-menubar > menu {
    background-position: left var(--context-menu-background-padding-default) center !important;
    padding-inline-start: calc(16px + var(--context-menu-background-padding-default)) !important;
    padding-inline-end: 3px;
  }
  #main-menubar > menu:first-child {
    background-position: left calc(3px + var(--context-menu-background-padding-default)) center !important;
    padding-inline-start: calc(19px + var(--context-menu-background-padding-default)) !important;
  }
  #main-menubar > menu > menupopup {
    --menuitem-image: none; /* Prevent Image Inheritance */
  }
}

/* Padding - Windows */
@include OS($win7) {
  :root {
    --context-menu-background-padding-default: 2px;
  }
}
@include OS($win8) {
  :root {
    --context-menu-background-padding-default: 3px;
  }
}
@include OS($win7, $win8) {
  :not(menu, #ContentSelectDropdown, #context-navigation)
    > menupopup
    > menuitem:not(.menuitem-iconic, [checked="true"], .in-menulist),
  :not(menu, #ContentSelectDropdown, #context-navigation)
    > menupopup
    > menu:not(.menu-iconic, [checked="true"], .in-menulist),
  menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
    menuitem:not(.menuitem-iconic, .in-menulist, [checked="true"], .bookmark-item),
  menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
    menu:not(.menu-iconic, .in-menulist, [checked="true"]),
  menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
  menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu,
  menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem,
  .openintabs-menuitem,
  #blockedPopupDontShowMessage {
    background-position: left var(--context-menu-background-padding) center !important;
    padding-inline-start: 0 !important;
  }
}
@include OS($win10) {
  :root {
    --context-menu-background-padding: 1em;
    --context-menu-text-padding: 24px; /* 16px + 8px */
    --menu-background-padding-default: calc(var(--context-menu-background-padding) + var(--context-menu-text-padding));
  }

  :not(menu, #ContentSelectDropdown, #context-navigation)
    > menupopup
    > menuitem:not(.menuitem-iconic, [checked="true"], .in-menulist),
  :not(menu, #ContentSelectDropdown, #context-navigation)
    > menupopup
    > menu:not(.menu-iconic, [checked="true"], .in-menulist),
  menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
    menuitem:not(.menuitem-iconic, .in-menulist, [checked="true"], .bookmark-item),
  menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
    menu:not(.menu-iconic, .in-menulist, [checked="true"]),
  menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
  menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu,
  menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem,
  .openintabs-menuitem,
  #blockedPopupDontShowMessage {
    padding-inline-start: var(--menu-background-padding-default) !important;
    margin-left: 0 !important;
  }
}

/* Padding - Linux */
@include OS($linux) {
  :root {
    --context-menu-background-padding-default: 6px;
  }

  #main-menubar > menu > .menubar-text {
    padding-inline-start: 3px;
  }
}

/* Padding - Mac */
@include OS($mac) {
  :root {
    --context-menu-background-padding-default: 10px;
    --context-menu-mac-padding: 21px;
  }

  /* context menu width */
  :not(menu, #ContentSelectDropdown, #context-navigation)
    > menupopup
    > menuitem:not(.menuitem-iconic, [checked="true"], .in-menulist),
  :not(menu, #ContentSelectDropdown, #context-navigation)
    > menupopup
    > menu:not(.menu-iconic, [checked="true"], .in-menulist),
  #blockedPopupDontShowMessage {
    padding-inline-end: var(--context-menu-background-padding) !important;
  }

  /* text position */
  :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem > .menu-text,
  :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu > menu-text {
    padding-inline-start: var(--context-menu-mac-padding) !important;
  }

  /* Checkbox menuitem, None iconic menu */
  :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem[checked="true"],
  :not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic) {
    padding-inline-start: calc(var(--context-menu-background-padding) + var(--context-menu-mac-padding)) !important;
  }

  /* Global Menu */
  /* Disabled. some icons not appear
  menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
    menuitem:not(.menuitem-iconic, .in-menulist, [checked="true"], .bookmark-item),
  menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
    menu:not(.menu-iconic, .in-menulist, [checked="true"]) {
    list-style-image: var(--menuitem-image, url("../icons/blank.svg"));
  }
 */
}

[Nomes77]

How it looks like:

[thunderstone135]

A possible solution is to remove [type="checkbox"] and the padding for unchecked checkboxes in layout_menu At least it works for me. Checks show only when checked, when not checked an icon can be shown

I tried your solution, but I only got multiple wrench icon.

I'm using Waterfox G4.1.1 on Windows 11.

[Nomes77]

That is strange, because in https://github.com/black7375/Firefox-UI-Fix/blob/master/src/icons/_global_menu.scss#L219-#L248 there are no icons set for those wrenches.

You can change the code yourself and/or take a look at my UserChrome.css for FireFox

[thunderstone135]

I checked your repository, and it looks like the icons showing in your screenshot is due to the following icons:

https://github.com/BPower0036/UserChrome/blob/main/FireFox/images/window-dev-tools.svg
https://github.com/BPower0036/UserChrome/blob/main/FireFox/images/command-responsivemode.svg
https://github.com/BPower0036/UserChrome/blob/main/FireFox/images/eyedropper.svg

Aforementioned icons have also been registered in this CSS file:

https://github.com/BPower0036/UserChrome/blob/main/FireFox/icons/index/global_menu.css

I'm just using what was provided in the Lepton package.

[thunderstone135]

@black7375

I can confirm that @BPower0036's solution works.
However, you need to add .svg icons for them and incorporate the code below.

#menu_responsiveUI {
  --menuitem-image: url("../icons/name.svg");
}
#menu_eyedropper {
  --menuitem-image: url("../icons/name.svg");
}

P.S. This is for Waterfox. I'm not sure about Firefox.

[black7375]

Now, Icon display when the checkbox menu is false.