Category icons in about:preferences aren't legible when using black-on-white High Contrast mode

VERIFIED FIXED in Firefox 38

Status

()

defect
P3
normal
VERIFIED FIXED
5 years ago
4 years ago

People

(Reporter: Unfocused, Assigned: Paenglab)

Tracking

(Blocks 1 bug)

30 Branch
Firefox 38
All
Windows 8.1
Points:
3
Dependency tree / graph
Bug Flags:
firefox-backlog +
qe-verify ?

Firefox Tracking Flags

(firefox38 verified)

Details

Attachments

(5 attachments, 1 obsolete attachment)

Posted image Screenshot
The icons for categories in about:preferences lack so much contrast they're illegible, when using black-on-white High Contrast mode. See attached screenshot.
Flags: firefox-backlog+
Since the text labels are still visible, this won't be a hard blocker.
Blocks: 718011
No longer blocks: ship-incontent-prefs
(In reply to Matthew N. [:MattN] (away until Jan. 7) from comment #1)
> Since the text labels are still visible, this won't be a hard blocker.

Except we hide the labels when the window is narrow.

Seems like we could use SVG icons here and that will fix the issue?
Blocks: ship-incontent-prefs
No longer blocks: 718011
Yeah, it will. Michael, can you provide these icons as SVG?
Flags: needinfo?(mmaslaney)
Points: --- → 3
Priority: -- → P3
Hardware: x86_64 → All
Whiteboard: p=3
Assets attached.
Flags: needinfo?(mmaslaney)
Posted patch categorySVG.patch (obsolete) — Splinter Review
For normal themes I'm using the Project Chameleon fill color #fbfbfb. I've added a 0.5px black stroke with 0.4 opacity to not make the borders too blurry but making the icons visible when the page colors are disabled.

On Windows for non-default themes I am using GrayText as fill color.
Assignee: nobody → richard.marti
Status: NEW → ASSIGNED
Attachment #8564530 - Flags: review?(jaws)
Posted image noStyle.png
Screenshot when the page colors are disabled. I could increase the opacity of the border but this would make the icons blurrier on normal page colors.
Posted image classic.png
Screenshot with Classic theme and GrayText as fill color.
That GrayText on the Classic theme is a bit dark. Any way that you can think of to make it lighter?
Flags: needinfo?(richard.marti)
Comment on attachment 8564530 [details] [diff] [review]
categorySVG.patch

Review of attachment 8564530 [details] [diff] [review]:
-----------------------------------------------------------------

::: browser/themes/shared/incontentprefs/icons.svg
@@ +1,5 @@
> +<?xml version="1.0" encoding="utf-8"?>
> +<svg xmlns="http://www.w3.org/2000/svg"
> +     xmlns:xlink="http://www.w3.org/1999/xlink"
> +     x="0"
> +     y="0"

x and y attributes have no effect on the SVG, you can remove those.
We should probably remove those on our other SVG files too.

@@ +10,5 @@
> +    }
> +    use {
> +      fill: #fbfbfb;
> +      stroke: rgba(0,0,0,0.4);
> +      stroke-width: .5px;

Do we need the stroke when the color is GrayText ? It makes the icons look blurry so it'd be nice to avoid it when we can.

@@ +33,5 @@
> +      <path
> +        d="M12.757,7.824h-1.657c-0.456,0-0.828,0.373-0.828,0.828v8.282c0,0.456,0.373,0.828,0.828,0.828h1.657
> +        c0.456,0,0.828-0.373,0.828-0.828V8.652C13.586,8.196,13.213,7.824,12.757,7.824z"/>
> +    </g>
> +    <g id="search-shape">

I'm not sure if icons that just consist in one path need to wrapped inside a <g> tag.
(In reply to Richard Marti (:Paenglab) from comment #7)
> Created attachment 8564533 [details]
> classic.png
> 
> Screenshot with Classic theme and GrayText as fill color.

You could try ThreeDShadow or ThreeDLightShadow.
Here's a list of values : https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#System_Colors
(In reply to Tim Nguyen [:ntim] from comment #9)
> Comment on attachment 8564530 [details] [diff] [review]
> categorySVG.patch
> 
> Review of attachment 8564530 [details] [diff] [review]:
> -----------------------------------------------------------------
> 
> ::: browser/themes/shared/incontentprefs/icons.svg
> @@ +1,5 @@
> > +<?xml version="1.0" encoding="utf-8"?>
> > +<svg xmlns="http://www.w3.org/2000/svg"
> > +     xmlns:xlink="http://www.w3.org/1999/xlink"
> > +     x="0"
> > +     y="0"
> 
> x and y attributes have no effect on the SVG, you can remove those.
> We should probably remove those on our other SVG files too.

I'll remove them with the next patch.

> @@ +10,5 @@
> > +    }
> > +    use {
> > +      fill: #fbfbfb;
> > +      stroke: rgba(0,0,0,0.4);
> > +      stroke-width: .5px;
> 
> Do we need the stroke when the color is GrayText ? It makes the icons look
> blurry so it'd be nice to avoid it when we can.

The stroke is for the no page color mode. This makes the white icons visible on the white background (see comment 6).

> @@ +33,5 @@
> > +      <path
> > +        d="M12.757,7.824h-1.657c-0.456,0-0.828,0.373-0.828,0.828v8.282c0,0.456,0.373,0.828,0.828,0.828h1.657
> > +        c0.456,0,0.828-0.373,0.828-0.828V8.652C13.586,8.196,13.213,7.824,12.757,7.824z"/>
> > +    </g>
> > +    <g id="search-shape">
> 
> I'm not sure if icons that just consist in one path need to wrapped inside a
> <g> tag.

It's not needed but I made it to have the same structure on all icons for later, when a change needs two paths. If you want, I'll remove them where not needed.
Flags: needinfo?(richard.marti)
(In reply to Richard Marti (:Paenglab) from comment #11)
> > @@ +10,5 @@
> > > +    }
> > > +    use {
> > > +      fill: #fbfbfb;
> > > +      stroke: rgba(0,0,0,0.4);
> > > +      stroke-width: .5px;
> > 
> > Do we need the stroke when the color is GrayText ? It makes the icons look
> > blurry so it'd be nice to avoid it when we can.
> 
> The stroke is for the no page color mode. This makes the white icons visible
> on the white background (see comment 6).
Unless I'm wrong, the stroke isn't needed when the color is GrayText.
(In reply to Tim Nguyen [:ntim] from comment #12)
> (In reply to Richard Marti (:Paenglab) from comment #11)
> > > @@ +10,5 @@
> > > > +    }
> > > > +    use {
> > > > +      fill: #fbfbfb;
> > > > +      stroke: rgba(0,0,0,0.4);
> > > > +      stroke-width: .5px;
> > > 
> > > Do we need the stroke when the color is GrayText ? It makes the icons look
> > > blurry so it'd be nice to avoid it when we can.
> > 
> > The stroke is for the no page color mode. This makes the white icons visible
> > on the white background (see comment 6).
> Unless I'm wrong, the stroke isn't needed when the color is GrayText.

Ah yes, misread the comment. It isn't needed with GrayText because the contrast is always enough.
Removed the x and y in svg and using now ThreeDHighlight as native color. This makes the icons look on Classic like on default themes.

I was wrong, the stroke is also used as it's in the basic style. But now it's good it's used because if not we would have the same issue now with the classic theme with page colors disabled and also with the white HC theme.

I didn't change the <g> surrounding awaiting your decision if I should remove them.
Attachment #8564530 - Attachment is obsolete: true
Attachment #8564530 - Flags: review?(jaws)
Attachment #8565109 - Flags: review?(jaws)
Keywords: checkin-needed
https://hg.mozilla.org/mozilla-central/rev/56a8b4e8549d
Status: ASSIGNED → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Whiteboard: [fixed-in-fx-team]
Target Milestone: --- → Firefox 38
Iteration: --- → 38.3 - 23 Feb
Flags: qe-verify?
QA Contact: camelia.badau
Verified fixed using Firefox 38 Beta 6 (buildID: 20150420134330).
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.