yellow mousover

Bug reports and enhancement requests
barbaz
Senior Member
Posts: 10841
Joined: Sat Aug 03, 2013 5:45 pm

Re: yellow mousover

Post by barbaz »

barbaz wrote: Sun May 31, 2020 3:12 am I'll play around with the colors a bit and try to come up with a specific suggestion.
These changes (tested in userContent.css) seems to take care of the accessibility issue for me. It also looks reasonable cosmetically.

Code: Select all

@-moz-document url-prefix("moz-extension://<your unique ID for NoScript>/") {

html:not(.mobile) tr.site:hover {
  background: #9df !important;
}

html:not(.mobile) :focus {
  --focus-box-shadow-color: #e5f9;
  box-shadow: inset 3px 3px 3px var(--focus-box-shadow-color), -3px -3px 3px  var(--focus-box-shadow-color),
                -3px 3px 3px var(--focus-box-shadow-color), 3px -3px 3px var(--focus-box-shadow-color) !important;
}

.site .url[data-key="domain"] .domain,
.site .url[data-key="host"] .domain,
.site .url[data-key="host"] .sub,
.site .url[data-key="unsafe"] span {
  color: #b50000 !important;
}

}
(That last part is because the red text of plain-HTTP domains looked too much like black against the color I picked for hover background, which I resolved by making it a very slightly brighter red.)
*Always* check the changelogs BEFORE updating that important software!
-
barbaz
Senior Member
Posts: 10841
Joined: Sat Aug 03, 2013 5:45 pm

Re: yellow mousover

Post by barbaz »

barbaz wrote: Sun May 31, 2020 2:04 pm These changes (tested in userContent.css) seems to take care of the accessibility issue for me. It also looks reasonable cosmetically.
Giorgio, could you please change NoScript colors to these? Or, if there's a specific reason NoScript needs to use that yellow color by default, could you please offer this as an alternative option in NoScript?
*Always* check the changelogs BEFORE updating that important software!
-
User avatar
Giorgio Maone
Site Admin
Posts: 9454
Joined: Wed Mar 18, 2009 11:22 pm
Location: Palermo - Italy
Contact:

Re: yellow mousover

Post by Giorgio Maone »

The yellow "halo" around widgets (and the blueish background) are focus indicators (required for those using keyboard navigation), while the yellow background is just row mouseover highlight.
Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:77.0) Gecko/20100101 Firefox/77.0
barbaz
Senior Member
Posts: 10841
Joined: Sat Aug 03, 2013 5:45 pm

Re: yellow mousover

Post by barbaz »

Giorgio Maone wrote: Wed Jun 03, 2020 5:35 pm The yellow "halo" around widgets (and the blueish background) are focus indicators (required for those using keyboard navigation), while the yellow background is just row mouseover highlight.
Maybe I wasn't clear about what the problem is?

I actually like having a "halo" focus indicator and row mouseover highlight. The problem is the yellow color against white background.

The CSS above makes the halo focus indicators magenta and the row mouseover highlight blueish (slightly different from the focused-row blueish color), resolving the accessibility issue without sacrificing any visual functionality.
*Always* check the changelogs BEFORE updating that important software!
-
User avatar
Giorgio Maone
Site Admin
Posts: 9454
Joined: Wed Mar 18, 2009 11:22 pm
Location: Palermo - Italy
Contact:

Re: yellow mousover

Post by Giorgio Maone »

barbaz wrote: Wed Jun 03, 2020 6:29 pm
Maybe I wasn't clear about what the problem is?

I actually like having a "halo" focus indicator and row mouseover highlight. The problem is the yellow color against white background.
No, sorry, I had landed on this thread on the previous page and missed the color-specific criticism.
In the meanwhile I've experimented reducing the colors (fuchsia is a big no-no, sorry), and I think I've found a suitable combination using only the light blue, with no yellow at all, for the next release, thanks.
Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:77.0) Gecko/20100101 Firefox/77.0
User avatar
Giorgio Maone
Site Admin
Posts: 9454
Joined: Wed Mar 18, 2009 11:22 pm
Location: Palermo - Italy
Contact:

Re: yellow mousover

Post by Giorgio Maone »

Please check https://noscript.net/getit#devel thanks.

v 11.0.30rc1
============================================================
x Discoverable option to force site-leaking UI in
PBM/Incognito
x [L10n] Updated he
x Easier keyboard navigation of preset configuration
x Yellow-less UI palette
Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:77.0) Gecko/20100101 Firefox/77.0
barbaz
Senior Member
Posts: 10841
Joined: Sat Aug 03, 2013 5:45 pm

Re: yellow mousover

Post by barbaz »

11.0.30rc1 new color scheme fixed the accessibility issue, thanks! No more eye-strain looking at NoScript's UI! Image

Minor comment, the light blue focus halo can be a little hard to see against the grey focused-row color when focus is on the padlock toggle or domain label. Same when tabbing through Advanced options, particularly when focus hits the "XSS FAQ" link. In all these cases, sometimes it's easier to see than other times? Image

Cosmetically I like the new color scheme :)
Giorgio Maone wrote: Wed Jun 03, 2020 7:34 pm (fuchsia is a big no-no, sorry)
(If it won't take this thread too far off-topic, I'm curious why is that?)
*Always* check the changelogs BEFORE updating that important software!
-
User avatar
Giorgio Maone
Site Admin
Posts: 9454
Joined: Wed Mar 18, 2009 11:22 pm
Location: Palermo - Italy
Contact:

Re: yellow mousover

Post by Giorgio Maone »

barbaz wrote: Thu Jun 04, 2020 3:12 am (If it won't take this thread too far off-topic, I'm curious why is that?)
It hurts my eyes (cit.) ;)
(And it's nowhere else to be seen in the browser's UI.)
Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:77.0) Gecko/20100101 Firefox/77.0
User avatar
therube
Ambassador
Posts: 7924
Joined: Thu Mar 19, 2009 4:17 pm
Location: Maryland USA

Re: yellow mousover

Post by therube »

Heh. You're not going to win on this one ;-).
I was fine with Original.
I quickly came to like Yellow.
.30, simply seems off, seems bland, seems like a cacophony of "shades" that simply does not work (for me).
And High contrast?
(In these shots, .30 & Original look pretty much the same. In reality, they are not.)

Seems wrong to me, .30.

Image

Win7, non-Aero.


Original.

Image

Yellow, in... .29 (or so).

Image



NoScript High contrast?

Image
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.19) Gecko/20110420 SeaMonkey/2.0.14 Pinball NoScript FlashGot AdblockPlus
Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0 SeaMonkey/2.53.4
User avatar
therube
Ambassador
Posts: 7924
Joined: Thu Mar 19, 2009 4:17 pm
Location: Maryland USA

Re: yellow mousover

Post by therube »

Discoverable option to force site-leaking UI in PBM/Incognito
That's better :-).
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.19) Gecko/20110420 SeaMonkey/2.0.14 Pinball NoScript FlashGot AdblockPlus
Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0 SeaMonkey/2.53.4
User avatar
Giorgio Maone
Site Admin
Posts: 9454
Joined: Wed Mar 18, 2009 11:22 pm
Location: Palermo - Italy
Contact:

Re: yellow mousover

Post by Giorgio Maone »

therube wrote: Thu Jun 04, 2020 9:59 am .30, simply seems off, seems bland, seems like a cacophony of "shades" that simply does not work (for me).
I would have settled with yellow, which worked very well for me, but I can understand it can be too flashy for someone and cutting down on the palette seems the trend nowadays. I could try to differentiate a bit more the luminosity of the shades in a next iteration, though.
therube wrote: Thu Jun 04, 2020 9:59 am NoScript High contrast?
Image
The HTTPS lock label color is just a bug, I'm going to fix it to black of course.
Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:77.0) Gecko/20100101 Firefox/77.0
barbaz
Senior Member
Posts: 10841
Joined: Sat Aug 03, 2013 5:45 pm

Re: yellow mousover

Post by barbaz »

Giorgio Maone wrote: Thu Jun 04, 2020 7:41 am It hurts my eyes (cit.) ;)
(I can't tell whether that's a facetecious way to say you think it looks ugly, or if you're saying that magenta-like colors cause similar accessibility issues for a different set of people?)
*Always* check the changelogs BEFORE updating that important software!
-
Post Reply