Troubleshooting CSS overlays

[Gitoffthelawn]

@hairycactus wrote (with minor edits):
I downloaded uBlock-Deluxe's two CSS overlay files (userChrome.css, userContent.css), & placed them in the "chrome" subfolder in my Firefox profile folder as follows. I only have 1 Firefox profile:
AppData\Roaming\Mozilla\Firefox\Profiles\ [random-chars] \chrome

Also already tested:

With all add-ons (except uBlock Origin) disabled: No effect

In a newly-created empty profile with uBlock Origin installed: No effect

Gitoffthelawn suggested trying a dummy CSS overlay (userContent.css that changes all text to red): Works OK in my everyday Firefox profile, uBlock Origin's UI text & icons become red.

[Gitoffthelawn]

I made your issue into a separate one.

The steps you are taking sound correct.

Try this as an experiment: instead of downloading userContent.css and userChrome.css from github, try copying and pasting the text from those files in this github repo into those files on your system. When viewing the files on github, click the 'Raw' button to get the raw text without any line numbers.

[hairycactus]

@Gitoffthelawn — Thanks. Copying & pasting the text from userChrome.css & userContent.css to create new CSS files for the chrome subfolder works. The CSS changes are now effected in uBlock Origin 0.9.8.3 & 0.9.8.6.

For your reference, below are some screenshots showing how the CSS overlay is rendered in my Firefox with uBlock Origin 0.9.8.6.

(A) Toolbar Popup Comparisons (with & without CSS overlay)

1. The extreme right panel is with uBlock Origin's native Color-blind friendly setting enabled.
   • With the pale pastel green background imposed by the CSS overlay, users with red-green colour-blindness & who also enable the Color-blind friendly setting probably see the top half of the panel as variations of pale dirty brownish from the top all the way to the chartbeat.com (blue-coloured) row.
   • Without the CSS overlay, the neutral background would have remained as default grey for such colour-blind users, regardless of whether uBlock Origin's Color-blind friendly setting is enabled or not.
2. The CSS overlay shows the whole uBlock Origin popup at one convenient glance. Without the CSS overlay, there is an oddly-located vertical scroll-bar on the left margin of the popup.
3. EDIT : The CSS overlay provides mouseover tooltips only when uBlock Origin's I am an advanced user setting is disabled. Request: Can the CSS overlay provide tooltips even when user keeps the said setting enabled ?

(B) Dashboard: 3rd-Party Filters (with CSS overlay)

1. The numeral beside each filter-category's header is changed from default grey to neon green by the CSS overlay. I'm not colour-blind, but I find neon/ light green text against a white background relatively difficult to see. Users with low visibility might be even more severely affected.
2. Enabling uBlock Origin's native Color-blind friendly setting has no effect. The numerals remain neon green, while the default light red http labels remain pale pastel red.
3. With the CSS overlay, red-green colour-blind users probably see the neon green numerals as pale brownish, ie. somewhat similar to the default pale pastel red http labels which in turn appear pale brownish as well (due to inherent R-G deficiency).

(C) Dashboard: Whitelist (with CSS overlay)

1. The default grey text inside the default beige-brownish Apply changes button is changed to neon green by the CSS overlay. Due to the colour-combination, I now find it more difficult to make out the text.
2. Enabling uBlock Origin's native Color-blind friendly setting has no effect. The text inside the button remains neon green.
3. Colour-blind users with R-G deficiency would probably see the neon green text as pale dirty brownish, resulting in a diminished colour-contrast (since the button itself is already beige).

[Gitoffthelawn]

Thanks for all the screenshots and feedback!

It is very interesting that your perception of pure green (#00FF00) is "neon green" and that the color makes it harder to perceive items. For me, it makes the items stand out and makes them more visible. The unexpected color also triggers my brain to notice them more than other items. The difference between your experience and mine is fascinating and worth exploring.

Are you using an LCD screen or a CRT? If it is LCD, does it employ TFT, IPS, or a different technology?

What type of artificial light is in the room where you observe this? Incandescent, fluorescent, halogen, LED? What is the color temperature of the light? Approximately how much light in the room is natural light (none, less than half, about half, more than half, all)?

Do you wear glasses or contact lenses? If so, does the color shift when taking them off?

If you have two working eyes, is the color the same when you cover one eye as when you cover the other eye?

Do you have any color-blindness at all?

If you do not mind me asking, what is your age and gender (if you do mind, please ignore!)?

[hairycactus]

@Gitoffthelawn — I find the colour-altered (neon green to me) header numerals at uBlock's 3rd-party filters tab hard to see against the white background, because it is juxtaposing bright numerals against a bright white background. The numerals would have been easier for me to read if they were a darker green, or if uBlock Origin/ uBlock Deluxe has a dark theme (dark background, neon green numerals).

Below are the details of my screen, viewing environment & vision.

1. Screen: 14" LCD, LED backlight, Active Matrix TFT

2. Ambient Lighting Conditions: The header numerals always appear neon green to me, regardless of the lighting condition:-

• During daytime, 100% natural light: Sitting beside window with substantial overhang formed by corridor above; the filtered light from the window does not cast a perceptible shadow,
• At night, no natural or artificial light source (except for LCD screen): This is my standard viewing condition at night.
• At night, with desk lamp: Fluorescent tube 20cm (7.9") above eye-level, no hood, cool white (~4,000 K); The numerals are still neon green, but appear more washed out (ie. fainter) against the white background; Note: Unless I need to write something on paper, I don't switch on any lights while using my laptop at night.

3. Visual Acuity (or rather, severe lack of): I wear eyeglasses 24/7, except when asleep or showering. Whilst wearing my glasses, I can't see with clarity if the viewing distance is closer or farther than ~1.5m (4.9 ft).

• High-Degree Myopia: More than -10.10 diopters in each eye
• Astigmatism: 0.5 diopters in one eye, 2.00–3.00 diopters in the other eye
• Presbyopia: Currently uncorrected by my main (concave-lens) eyeglasses. I can't wear normal reading glasses alone because the only thing I can see clearly is the tip of my nose (& nothing else). For reading books, I wear an additional clip-on lens (+3.00 diopters, although I prefer something stronger so that I can hold the book closer).

4. With either eye covered & wearing eyeglasses: The header numerals remain neon green.

5. Without wearing my eyeglasses: The numerals are either neon green or invisible, depending on the viewing distance ...

• At 50cm (19.7") distance (usual screen-to-chair distance):
  • Regardless of the colour, the header numerals are so blurred that they more or less disappear (unless I know exactly where to look, & then stare really hard), because the physical dimension is too small (ie. the numerals are not long, bold or thick enough). Basically, anything less than 2cm (0.8") across as seen from my position would disappear from view due to severe myopia.
  • For mixed-coloured objects of sufficient width, the predominant colour that I see belongs to the portion with the largest width. This is due to the "smudging" effects caused by astigmatism.
  • Below is a simulation of how uBlock Deluxe CSS overlay appears to me at 50cm viewing distance, if I'm not wearing my eyeglasses:-
    
• At 10cm (3.9") distance (= the only point where the text appears sharp w/o wearing my concave-lens eyeglasses): The numerals are neon green.
• At 5cm (2") or less distance (text is blurry/ unrecognizable):
  The spots where the numerals are located have a neon green colour, but I can't really make out what numbers they are.

6. Colour Vision: I don't have colour-blindness. On the contrary, it seems that there are "excessive" colours, ie. to the point of distraction & sensory overload. If I'm trying to concentrate, I avoid having objects of more than 3 colours (& definitely not the bright/ neon-type colours) placed on my desk within my line of sight.

• I also avoid customizing bright red text (perhaps you call it "pure red" ?) against a black background, because the bright red text becomes 3-dimensional, sticks out of the screen, & jiggles around when I shift my head slightly. It becomes distracting if I'm trying to read a chunk of text.
• I might be a tetrachromat (ie. I'm able to see more colours than the norm). For instance, against a featureless grey or darkened sky (& wearing my glasses of course), I can see 11 colours in a primary rainbow. The colours are reduced to 9 or 10 against a busy background (eg. trees, bright blue sky, or during sunrise/ sunset).
  • Most of these "extra" colours (different hues of red, blue, violet) are physically located external of the conventional R & V bands, while 1 "extra" colour is located within the main ROYGBIV band — ie. I can see 2 different hues of green inside the main band.
  • The internal "extra green" colour tends to be less perceptible against a busy tree-filled background. All of the external "extra red-blue-violet" colours are quite obvious, unless the sky is bright blue/ reddish, or if rainbow is already quite faded.
• For electromagnetic radiation dispersed via a prism (sample), I can see up to 16 different colours in the visible spectrum on my LED-backlit LCD screen. I might be able to see more colours in the real spectrum.
• For LED light spectrum (sample), I can see up to 16 different colours.
• I don't know the words or terminology to label the "extra" rainbow/ visible spectrum colours. The topmost illustration (10 colours) at this vector graphic might provide an approximate idea.

[Gitoffthelawn]

Thanks for your post. I will give it the time and attention it deserves. It will take me a bit of time to perform related research and experiments.

In the meantime, I have posted a new version of uBlock-Deluxe with some major enhancements. As a small part of those enhancements, the green used is now darker, to improve contrast. Also, some of the unneeded colors used by uBlock are now removed to avoid distraction and allow the user to focus on what is important.

[Gitoffthelawn]

@hairycactus New release of uBlock Deluxe is available!