Linux Debian Conundrums

[DebSec]

Izheil,

O/S Debian 9.5 Firefox ESR 60.2.2 64bit

1. The Mozilla add-on pages and others are not colored.

2. The sub menu's expand and contract.

3. Clear Recent History is not colorized.

Screenshot: https://imgur.com/a/oXx6Fzy

userChrome.css (colors):

https://gist.github.com/DebSec/05cf9c960203de391c11861fd7832ef3

useContent.css:

https://gist.github.com/DebSec/b561633bc0499c0c4ec716f9119a0ea1

[Izheil]

1. You are missing a closing } on line 558, which makes all the things beneath it not apply at all.
2. The padding of those menus (at least the height of each row) is set for the default windows font, since debian firefox inherits the font of your OS, that is bound to change. The padding to the left is not something specified on this usercontent, so, again, it's something related to Debian. Add some padding-left pixels on the menuitem:hover selector inside the (about:) context menus section on usercontent until it's aligned, and some padding-bottom or padding-top on menuitem until you see the rows not changing height.
3. I just added the theming for the sanitizer window (Clear recent history/data), you can see the changes here.

[DebSec]

Izheil, Thanks for the direction.

1. On line 558 useContent.css I had seen the extra } when comparing our files. I thought you had an extra one. That did correct the issue with Mozilla not being themed correctly.

2. On the menu hover I had to remove some of your code for the padding to correct itself. -moz-appearance: none !important; was the culprit for some reason.

useContent.css: `/ This changes the text of disabled items / menuitem[disabled="true"], menu[disabled="true"] {color: #777 !important}

/ This changes the color on hover of the context-menu items /

context-navigation menuitem:hover {

background: var(--in-content-context-highlight)!important }

context-navigation menuitem:hover[disabled=true] {

background-color: #333 !important }

menuitem:hover, menu:hover { background-color: var(--in-content-context-highlight) !important}

/ This does the same but for disabled ones / menuitem:hover[disabled="true"], menu:hover[disabled="true"] { background-color: #333 !important} `

3. The Clear Recent History box is the correct colors now. The drop down box could use some work in that area as someone who did not know that there was one there would not know to click on it as the drop down arrow seems to have blended away for me. But it works.

Screenshot: https://imgur.com/a/2WMZDbw

[Izheil]

You can use the checkboxes.as.css file to turn all select-like items and checkboxes to a better version on white-background OS's. You will have to delete the dialog menulist elements from userchrome first, and then create a new rule on userchrome if you don't want to use the checkboxes.as.css file, or are only interested on the select elements:

dialog menulist, menulist {
  filter: invert(81%) hue-rotate(170deg) !important; color: #000 !important}

[DebSec]

I removed the code in your notes and added what was needed in userChrome.css for the highlighting of the check boxes. I then called the @import url(./config/checkboxes.css); in using userChrome.css. That worked for the sanitizer window check-boxes.

I did not have any bright highlighting of the check-boxes in the #main-menubar and right clicking on the main bars gave no highlighted check-boxes and such. I added this to your checkboxes.as.css but now I have an issue with bookmarks and it's brightness for hovering over bookmarks and the icons are inverted.

/ Same for select (dropdown) elements / dialog menulist, menulist, menuitem, listitem[type="checkbox"], dialog select { filter: invert(81%) hue-rotate(170deg) !important; color: #000 !important}

[DebSec]

I have added a .gif for you to view what I'm talking about. The colors of the check-boxes is correct now but the blue highlighting over the links is distracting. It would be great to have no highlighting of anything but the text when hovered to a brighter color.?

https://imgur.com/a/AmUrwEw

[Izheil]

I don't know what you mean with "I did not have any bright highlighting of the check-boxes in the #main-menubar and right clicking on the main bars gave no highlighted check-boxes and such". If you want to affect the checkboxes that appear on that bar in the popup, use .menu-iconic-left[checked="true"]. In windows they don't apear as white, and in most linux distributions they use a dark OS theme so they already appear as dark, so those are rarely even needed to be changed at all.

menuitem only affects the rows of the popups, not those checkboxes, so don't use those,

[DebSec]

When I use your code. The #mainmenubar and it's menus view tools and such. The check-boxes were not white bordered with a white check-mark. The sanitizer window check-boxes did work correctly as you had specified.

When I added the menuitem into your code it all worked as it should using white borders and check-marks for the check-boxes. as in this image. https://imgur.com/a/AmUrwEw

The code you said now to use did nothing for me. /* Fix for OS's (like default windows) that draws checkboxes and radio buttons whiteish */ dialog checkbox .checkbox-check, dialog radio .radio-check, toolbar[printpreview="true"] checkbox:not(label), **.menu-iconic-left[checked="true"],** /* Same for select (dropdown) elements */ dialog menulist, menulist, listitem[type="checkbox"], dialog select { filter: invert(81%) hue-rotate(170deg) !important; color: #000 !important}

The new issue was all the blue backgrounds on link hover. Everything is blue and I did not want that. When I added the menuitem this would happen.

I have added this code to compensate in userChrome.css.

`/ This changes the color on hover of the context-menu items / menubar > menu[_moz-menuactive="true"], menupopup > menu[_moz-menuactive="true"], popup > menu[_moz-menuactive="true"], menuitem[_moz-menuactive="true"] {background-color: transparent !important; / Edited / color:#fff !important} / Edited /

/ This does the same but for disabled ones / menubar > menu[_moz-menuactive="true"][disabled="true"], menupopup > menu[_moz-menuactive="true"][disabled="true"], popup > menu[_moz-menuactive="true"][disabled="true"], menuitem[_moz-menuactive="true"][disabled="true"] {background-color: transparent !important; / Edited / color:#fff !important} / Edited / `

[Izheil]

.menu-iconic-left[checked="true"] should have at least changed the ticked checkboxes on the menus, but if that wasn't the case, you can just use a more general rule instead that will affect anything inside the menuitem with checkboxes that isn't the text nor the background color:

menuitem[type="checkbox"] *:not(label)

[DebSec]

I changed things a little. The code you provided me I added to the tooltips.css with a note. Your code works for the sanitizer window check-boxes. Sadly it has no affect elsewhere in the browser. /* Fix for OS's (like default windows) that draws checkboxes and radio buttons whiteish */ dialog menulist, menulist, menuitem[type="checkbox"] *:not(label) { filter: invert(81%) hue-rotate(170deg) !important; color: #000 !important}

I also tried to enter other variables or narrow it down as you had e.g. menuitem[type="checkbox"] or menu-text and others with no luck.

We now know it works with just menuitem. Wish we could narrow it down to the specific areas. When using menuitem alone with this code:

/* Fix for OS's (like default windows) that draws checkboxes and radio buttons whiteish */ dialog menulist, menulist, menuitem { filter: invert(81%) hue-rotate(170deg) !important; color: #000 !important}

I get this change for the colors on hover and I can't find a happy medium.

Screeny: https://imgur.com/a/rLmYpJL

[Izheil]

It might be a difference on the selectors for the ESR version, since for me the only things inside menuitem with checkboxes that contain the checkboxes are those selectors I told you previously.

Try checking the selectors on your end, it will be faster than me trying to guess them. To do so, press F12, then F1, or just open the developers tools, then go to settings (pressing the 3 dots button on the top right part of them, next to the close button), then make sure you have checked the following things under advanced settings:

• Enable remote debugging
• Enable browser chrome and add-on debugging toolboxes

After that, close the developer's tools, and press ctrl + alt + shift + i, and the browser debugging toolbox will open. It will ask you if you want to activate remote debugging (from your own adress, so you don't have to worry about that), accept, and then you will be able to check for the selectors on your browser.

When checking for the selectors on a popup (like the title bar ones we want to check), make sure you click the 3 dots on the browser debugging's tools, and choose the option "disable popup autohide".

Sometimes this toolbar may glitch and when you hover over a popup items it will NOT let you see them (an empty line will appear on the toolbox inspector). If this happens, just close the toolbox, and reopen it.

[DebSec]

I have used the developers tools/toolbox all along. Thanks I knew about the button to keep sub-menus open while picking sub-sections. I have spent allot of time on it with no luck. menuitem was the only selection that I could find that worked to color the check-boxes and radio buttons as I had shown.

For now I removed menuitem from the pertinent code and will have dark selectors in a couple areas. I do prefer having the text highlight when hovered like I have it now. If you come across anything please let me know. Thanks for the efforts. I'm glad the sanitizer window and the clear recent history box is working good now.

[Izheil]

Well, at least the most important parts are still dark. It's still weird that the other selectors didn't work.

Usually for checkboxes on firefox you'd have to color the ::before on their label, as in label::before, so you could try:

menuitem label::before

That's the only thing I can think of that could work right now, otherwise I'm at a loss, but I guess that must be some difference between ESR firefox and quantum.

[DebSec]

The code that you asked me to try did not change the elements. I did however make good progress. It is working correctly now.

I still have the parents (?) of some elements turning blue when I hover over there background. I would like those to have no background either.

https://imgur.com/a/UCWvCtw

/* Fix for OS's (like default windows) that draws checkboxes and radio buttons whiteish ", menuitem"*/ dialog checkbox .checkbox-check, dialog radio .radio-check, toolbar[printpreview="true"] checkbox:not(label), dialog menulist, menulist, menuitem[type="checkbox"], menuitem[type="radio"], listitem[type="checkbox"], dialog select { filter: invert(81%) hue-rotate(170deg) !important; color: #000 !important}

[Izheil]

You could always add a specific rule for the menuitem elements you added. Something like:

menuitem[type="checkbox"], menuitem[type="radio"] {
  background: transparent !important;
  color: #000 !important;
  filter: invert(81%)}

That way you can just apply the inversion filter for those 2 items, while also making sure that they get a transparent background.

Hmm... still, I feel like finding the actual selector for it would be easier. Something like menuitem[type="checkbox"] > and menuitem[type="radio"] > should color both the text and the checkbox/radios without affecting the background (and since in the code we already color the texts black so that it gets inverted to grey... that shouldn't be an issue.

If that doesn't work then it for sure is some ESR specific thing where they add the checkboxes through some binding or through CSS, in which case they either add it through a background-image style, or through a menuitem::before selector.

If it's the background-image one you can always download a custom .svg file of a dark checkbox and bind it through background-image: url(the-path-where-you-have-it-saved) !important;.

[DebSec]

I had no success with the code. Looking over what is presently used for code it could be perhaps something I need to over-ride from my O/S theme as moving around folders and doing various tasks in menus on my O/S I have the blue highlight when moving over certain things and also when there selected.

-moz-appearance: none !important; I believe is used to apply the OS's theme.

[Izheil]

-moz-appearance: none !important; erases any built-in unchangeable look for an element. (so if you don't use it, your OS theme ones will apply)

For checkboxes, radios, and buttons, they get inherited from your OS theme, so using it uses to be a must.

The problem is that for checkboxes and radios, if you use it, you'll have to specify your own checkbox or radio image, which is why I try to resort to color inversion rules (uses to be faster and cleaner).

In either case... giving menuitem[type="checkbox"], menuitem[type="radio"] a transparent background didn't work?

You could always specify it with menuitem[type="checkbox"]:hover instead.

[DebSec]

No luck with the code you suggested. I did minimize a little of it . This is the minimum code to make this work for me. If I use the rest of your code the Clear Recent History Box background is faded.

/* Fix for OS's (like default windows) that draws checkboxes and radio buttons whiteish */ menuitem[type="checkbox"], menuitem[type="radio"] { color: #000 !important; filter: invert(81%)}

When looking at this image you will eventually notice the text next to the check-boxes in the Clear Recent History Box are dimmed using the previous code. https://imgur.com/a/UCWvCtw

Now with this code the Clear Recent History Box text is better. We are manipulating the box highlight as it has changed from blue. https://imgur.com/a/gKgfcRX

---

I think I will set this aside as the bookmarks are highlighted blue and there is a issue with the userContent.css. When you look at the image the drop down box in about:addons the checkbox is dark there. Also the text in the button ?tooltips? and other areas in there is missing. Look at the .gif and you will get what I'm after. Thanks

[Izheil]

This looks like a pretty specific bug that you are having and of your specific distribution, specific Firefox version, and since you have some more code than the one from this theme, I can't even know if it's something from this or a mixture of other things you may have, so I really can't help you much more, sorry.