Check Box issue in main menus. about ff-menu-icon-plus-css

[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.

[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.