V5.0.2 Video Player Context Menu Items Not Aligned

[thunderstone135]

Describe the bug
Hi, I just want to let you know that when I play a local video (MP4) in Waterfox, there are 2 context menu items that are out of alignment.

Steps to reproduce

1. Open Waterfox
2. Open a local video (MP4) by Ctrl + O or by dragging the file inside the Waterfox window
3. Perform a right-click on the video

Expected behavior
All context menu items should be aligned.

Screenshots

Environment:

• Distribution
  • Original Lepton
  • Lepton's photon style
  • Lepton's proton style
• Firefox Version: Waterfox G4.1.1
• 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)

user.js setup
I'm using the same one posted here.

javascript
I'm using default Waterfox Prefs.

Additional context
N/A

[thunderstone135]

I found the culprit:

  @media (-moz-os-version: windows-win7),
    (-moz-platform: windows-win7),
    (-moz-os-version: windows-win8),
    (-moz-platform: windows-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;
    }
  }
  @media (-moz-os-version: windows-win10), (-moz-platform: windows-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;
    }
  }

I reverted the above code back to v4.6.3, but there's a caveat. The issue in #349 will now be icons overlapping text. Like this:

[Nomes77]

Strange... I can't reproduce in FireFox 99.0.1
background-image: var(--menuitem-image) is not set for those icons, so there should be a empty space.

About the last screenshot, I see that there are icons on the checkboxes
Plus I see for you code that you removed [type="checkbox"] from the original code.

Then you should also remove the following, like in https://github.com/BPower0036/UserChrome/blob/main/FireFox/icons/layout_menu.css

@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), (-moz-os-version: windows-win10), /* Legacy - v99 */
       (-moz-platform: windows-win7), (-moz-platform: windows-win8), (-moz-platform: windows-win10) {
  /* Checkbox */
  :root {
    --context-menu-text-padding: calc(var(--menu-padding) + var(--context-menu-background-padding-default) + 16px);
  }
  :not(menu, #ContentSelectDropdown, #context-navigation)
    > menupopup
    > menuitem[type="checkbox"]:not([checked="true"])
    > .menu-iconic-left {
    padding-inline-start: var(--context-menu-text-padding);
  }
}

[thunderstone135]

I don't know what happened to my previous post, but I was actually able to resolve the issue by simply adding [checked="false"]. Thus, the code will now look like this:

  @media (-moz-os-version: windows-win7),
    (-moz-platform: windows-win7),
    (-moz-os-version: windows-win8),
    (-moz-platform: windows-win8) {
    :not(menu, #ContentSelectDropdown, #context-navigation)
      > menupopup
+   > menuitem:not(.menuitem-iconic, [checked="true"], [checked="false"], .in-menulist),
    :not(menu, #ContentSelectDropdown, #context-navigation)
      > menupopup
+   > menu:not(.menu-iconic, [checked="true"], [checked="false"], .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"], [checked="false"], .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"], [checked="false"]),
    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;
    }
  }
  @media (-moz-os-version: windows-win10), (-moz-platform: windows-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"], [checked="false"], .in-menulist),
    :not(menu, #ContentSelectDropdown, #context-navigation)
      > menupopup
+   > menu:not(.menu-iconic, [checked="true"], [checked="false"], .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"], [checked="false"], .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"], [checked="false"]),
    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;
    }
  }

@BPower0036:
I don't know about the code you posted, but it looks you completely deviated from @black7375.

Your code is on the left. Mine is at the right.

@black7375's code is on the left. Mine is at the right.

Just by adding [checked="false"], I was able to resolve both the alignment issue and the overlapping issue in #349.

[thunderstone135]

Update:
The latest commit fixes the issue 👍