Check Box issue in main menus.

[cwl2]

Hi,

I have a problem/installation issue/bug whereby the items that can be selected in an on/off manner in the drop down menus contain a check box as well as the icon. All other icons are present as they should be. See attached screenshot. I originally encountered this issue with a moderately modified Firefox using Aris's CustomCSS but I'm now testing this in a completely new profile with a default installation of both projects and the problem remains. The only thing I've changed is the value of --mip-menu-icon-margin in mip_ConfigMenus.css from -24px to 0px to make the icons in the File drop down menu appear.

Any help to fix this fly in the ointment of an otherwise great result would be appreciated.

[cwl2]

Further to my earlier post one detail I forgot to add is that I'm running Firefox 117.01 on Slackware Linux.

[B00ze64]

Check boxes are working just fine on my FF117 Windows 10, without changing the -24. And I have no Linux to test with. I can leave this open but someone else will have to come-up with a fix.

[cwl2]

Ok, I have done some investigation into to this and found the problem to be that the Linux version of Firefox supplies the checkbox/radio button icons by default that are getting in the way of the FF-Menu-Icon-Plus-CSS icons. I've looked at a few Windows Firefox installations and it seems that in Windows Firefox doesn't supply any icons at all thereby providing a clean slate for FF-Menu-Icon-Plus-CSS to work on. On observing that in the checked state FF-Menu-Icon-Plus-CSS displayed the checked icon properly I reasoned that if I found the code that does this I could apply it to the unchecked state (where problem was) for the menu items affected.

After some research and experimentation I came up with the following code. It is mainly a rehash of existing code. I am a complete novice at CSS. I have placed this code at the beginning of the mip_FuguePlus-Menus.css file because this is the one I'm using.

/*
 * Stops built-in icons from showing at any time per ID Selector. These icons
 * are present by default in Linux but not in Windows.
 */
@media (-moz-platform: linux) {
  #menu_eyedropper > hbox.menu-iconic-left,
  #menu_responsiveUI > hbox.menu-iconic-left,
  #menu_devToolbox > hbox.menu-iconic-left,
  #menu_pageStylePersistentOnly > hbox.menu-iconic-left,
  #menu_pageStyleNoStyle > hbox.menu-iconic-left,
  #toggle_zoom > hbox.menu-iconic-left,
  #menu_tabsSidebar > hbox.menu-iconic-left,
  #menu_historySidebar > hbox.menu-iconic-left,
  #menu_bookmarksSidebar > hbox.menu-iconic-left,
  #toggle_PersonalToolbar menuitem[data-l10n-id="toolbar-context-menu-bookmarks-toolbar-never-show-2"] > hbox.menu-iconic-left,
  #toggle_PersonalToolbar menuitem[data-l10n-id="toolbar-context-menu-bookmarks-toolbar-on-new-tab-2"] > hbox.menu-iconic-left,
  #toggle_PersonalToolbar menuitem[data-l10n-id="toolbar-context-menu-bookmarks-toolbar-always-show-2"] > hbox.menu-iconic-left,
  #toggle_toolbar-menubar > hbox.menu-iconic-left,
  #goOfflineMenuitem > hbox.menu-iconic-left,
  #fullScreenItem > hbox.menu-iconic-left {
    display: none; !important
  }
}

Below is some information which I compiled during my research into this.

Note: Line No. refers to first occurrence of selector in original source file.
-------------------------------------------------------------------------------
Menu Item              Full   ID                             Line
                       Path   Selector                       No.
-------------------------------------------------------------------------------
Work Offline           (1)    #goOfflineMenuitem             273
Menu Bar               (2)    #toggle_toolbar-menubar        718
Full Screen            (3)    #fullScreenItem                870
Always Show            (4)    (A)                            1367
Only Show on New Tab   (5)    (B)                            2351
Never Show             (6)    (C)                            3659
Bookmarks              (7)    #menu_bookmarksSidebar         1094
History                (8)    #menu_historySidebar           953
Synced Tabs            (9)    #menu_tabsSidebar              1919
Zoom Text Only         (10)   #toggle_zoom                   806
No Style               (11)   #menu_pageStyleNoStyle         N/A
Basic Page Style       (12)   #menu_pageStylePersistentOnly  N/A
Web Developer Tools    (13)   #menu_devToolbox               2091
Responsive Design Mode (14)   #menu_responsiveUI             2290
Eyedropper             (15)   #menu_eyedropper               2302

Long ID Selectors
-----------------
(A) #toggle_PersonalToolbar menuitem[data-l10n-id="toolbar-context-menu-bookmarks-toolbar-always-show-2"]
(B) #toggle_PersonalToolbar menuitem[data-l10n-id="toolbar-context-menu-bookmarks-toolbar-on-new-tab-2"]
(C) #toggle_PersonalToolbar menuitem[data-l10n-id="toolbar-context-menu-bookmarks-toolbar-never-show-2"]

Full Paths to Menu Items
------------------------
(1 ) File->Work Offline
(2 ) View->Toolbars->Menu Bar
(3 ) View->Full Screen
(4 ) View->Toolbars->Bookmarks Toolbar->Always Show
(5 ) View->Toolbars->Bookmarks Toolbar->Only Show on New Tab
(6 ) View->Toolbars->Bookmarks Toolbar->Never Show
(7 ) View->Sidebar->Bookmarks
(8 ) View->Sidebar->History
(9 ) View->Sidebar->Synced Tabs
(10) View->Zoom->Zoom Text Only
(11) View->Page Style->No Style
(12) View->Page Style->Basic Page Style
(13) Tools->Browser Tools->Web Developer Tools
(14) Tools->Browser Tools->Responsive Design Mode
(15) Tools->Browser Tools->Eyedropper

Another issue I found was that there were no FF-Menu-Icon-Plus-CSS icons for the View->Page Style->No Style and View->Page Style->Basic Page Style menu selections. At least not that I could find. I rectified that with the code below. My choice of icons probably isn't great.

/* For View->Page Style->No Style. */
#menu_pageStylePersistentOnly[checked=false]::Before {
  content: url("../MipImages/Fugue/fugue_LightBulb.png");
  display: block;
  width: 16px;
  height: 16px;
  margin-inline-start: var(--mip-menu-icon-margin);
}

#menu_pageStylePersistentOnly[checked=false] > label {
  margin-inline-start: var(--mip-menu-label-margin) !important;
}

/* For View->Page Style->Basic Page Style. */
#menu_pageStyleNoStyle[checked=false]::Before {
  content: url("../MipImages/Fugue/fugue_LightBulb-off.png");
  display: block;
  width: 16px;
  height: 16px;
  margin-inline-start: var(--mip-menu-icon-margin);
}

#menu_pageStyleNoStyle[checked=false] > label {
  margin-inline-start: var(--mip-menu-label-margin) !important;
}

So, at the end of the day it all seems to be working. Thank you Sylvain for this project.

[B00ze64]

Nice work. I'm afraid I can't incorporate this since we can no longer use Moz-Platform to make some CSS different depending on the O/S, and I do not have Linux handy to play with. I guess you could fork the project and make a Linux version. Thanks for looking into this. I'm going to go ahead and close.