1391227 - Default themes on Windows 7 glass still have usability issues

Status: VERIFIED FIXED

(Firefox :: Theme, defect, P1)

Description

[Mark Straver]

Attachment: new tab control completely blending out

Direct follow-up to bug 1387750 as requested.

Re-stating my comments for completeness:

I just tried nightly 2017-8-16 on Win 7 x64. The issue is NOT completely solved. Although the tab backgrounds are OK, the tab controls (new tab "+", scroll arrows, drop-down chevron) can still be completely invisible because the background is still non-fogged glass. At the very least it is extremely low contrast, at its worst it completely blends away.

attached screenshots:
1) Example of the new tab control completely blending out into the background.
2) The left window corner is fogged so it provides some contrast with the control (but vanishes completely if the arrow is in a disabled state which is also wrong). The right side of the tab bar isn't fogged (because the fog is behind the caption controls), which is still a problem.

If you want to use these kinds of controls on glass, maybe you need to outline them?

Comment 1

[Mark Straver]

Attachment: Dark controls/low contrast (2)

Second ref from comment 0

Comment 2

[Mark Straver]

Attachment: Icon style proposal

FTR: I've solved this glass conundrum in my own browser by providing a separate set to use on glass, which is the set used on light backgrounds but with the icons having a white glow (outline) to always provide contrast regardless of background they are on.

The attachment shows how this looks in Win7 on glass, with the window over a black and over a white background on the desktop; both are easy and clear to use. Intermediates are also clear. I propose you do something similar and get rid of the fogged window corners which just interfere with this theme, anyway.

Comment 4

[Johann Hofmann [:johannh]]

Attachment: Bug 1391227 - Make buttons in the tab toolbar more opaque.

Review commit: https://reviewboard.mozilla.org/r/179312/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/179312/

Comment 5

[Johann Hofmann [:johannh]]

(In reply to Mark Straver from comment #0)
> 2) The left window corner is fogged so it provides some contrast with the
> control (but vanishes completely if the arrow is in a disabled state which
> is also wrong). The right side of the tab bar isn't fogged (because the fog
> is behind the caption controls), which is still a problem.

I don't really understand what "fogged" means in this context. This is just the aero theme, no?

My patch just makes the buttons in the tab bar white-ish, as per Photon theme (http://design.firefox.com/people/shorlander/photon/Mockups/windows-7.html). IME that solves the visibility issue.

Comment 6

[Johann Hofmann [:johannh]]

Comment on attachment 8907640 [details]
Bug 1391227 - Make buttons in the tab toolbar more opaque.

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/179312/diff/1-2/

Comment 7

[ovidiu boca[:Ovidiu]]

I tested on Windows 7 with FF Nightly 57.0a1(2017-09-14) and I can't reproduce this issue.

Comment 8

[Johann Hofmann [:johannh]]

(In reply to ovidiu boca[:Ovidiu] from comment #7)
> I tested on Windows 7 with FF Nightly 57.0a1(2017-09-14) and I can't
> reproduce this issue.

Can't reproduce how? What does it look like for you?

Comment 9

[ovidiu boca[:Ovidiu]]

Sorry, this comment was meant for another issue. 

I can try to reproduce this, but please tell me what are the exact steps.

Comment 10

[Johann Hofmann [:johannh]]

Comment on attachment 8907640 [details]
Bug 1391227 - Make buttons in the tab toolbar more opaque.

This will be fixed in bug 1399498. I'll mark this one as fixed once the other gets resolved, too.

Comment 11

[Johann Hofmann [:johannh]]

Fixed by bug 1399498. Feel free to verify or re-open.

Comment 12

[ovidiu boca[:Ovidiu]]

Hi, 
I tested this issue on Windows 7 x32(Theme Aero Windows 7) with FF Nightly 58.0a1(2017-09-22)(Theme Light) and I can't reproduce the issue, the tab controls are visible. 
Mark, can you please retest this on the latest Nightly? And if you can reproduce this, please add the exact Windows theme that you are using. Thanks

Comment 13

[Mark Straver]

Thanks, it's better by using the light fill for controls when using my default color tint for glass, but there's still an issue, that is now shared with all themes since the buttons are the same now for all: When the tab scroll arrow is disabled with tab overflow, it becomes invisible or only barely visible, depending on the background the window is over.[1]

Also, if I choose a different tint color, e.g. the default grey or white in the palette, all controls vanish once again on a light desktop background. There simply is no contrast between the light controls and the resulting color of the glass transparency.[2]

This issue is NOT solved.

[1] https://www.dropbox.com/s/izwi7p1hn11an7n/issue2.png?dl=0
[2] https://www.dropbox.com/s/lxws1nd7vlnei85/issue3.png?dl=0

Comment 14

[:Gijs (he/him)]

[Tracking Requested - why for this release]:
Windows 7 is still a significant proportion of our userbase AIUI, and having primary UI looking like this is not OK.

Comment 15

[Johann Hofmann [:johannh]]

I agree that we should fix this properly in time for 57 uplift, but to be honest I'm not sure how to best highlight these controls (as far as I know we currently don't have access to the customized aero colors).

We could add a white or black shadow behind the icons, but maybe Stephen has a better idea?

Comment 16

[Mark Straver]

(In reply to Johann Hofmann [:johannh] from comment #15)
> 
> We could add a white or black shadow behind the icons, but maybe Stephen has
> a better idea?

Adding an outline or halo is the *only* way you're going to guarantee visibility on a highly-translucent background that can have any color behind it.
The proposal I uploaded[1] uses a contrasting halo (dark controls with white halo, but inverting that would be just as viable having light controls with a dark halo).

The strength and color of the halo/outline will determine the level of visibility on varying backgrounds. More subtle/thin/transparent will run a higher risk of controls getting lost.

[1] https://bug1391227.bmoattachments.org/attachment.cgi?id=8898731

Comment 17

[Johann Hofmann [:johannh]]

So, looking at this again on my Windows 7, you have to do quite some tuning to make the toolbarbuttons hard to see. You basically need to pull the slider to all white and have a light background.

I'm not so sure we need to track this for 57 anymore, and while it would be nice to have a solution for this, I don't think we need to rush into e.g. adding a box-shadow everywhere.

I'm leaving the needinfo for shorlander on since we should get this resolved one way or another.

Comment 18

[Johann Hofmann [:johannh]]

(In reply to Mark Straver from comment #13)
> Thanks, it's better by using the light fill for controls when using my
> default color tint for glass, but there's still an issue, that is now shared
> with all themes since the buttons are the same now for all: When the tab
> scroll arrow is disabled with tab overflow, it becomes invisible or only
> barely visible, depending on the background the window is over.[1]
> [1] https://www.dropbox.com/s/izwi7p1hn11an7n/issue2.png?dl=0

Thanks, I spun this off into bug 1403110.

Comment 19

[Bob]

Attachment: Inactive window on top of light background

(In reply to Johann Hofmann [:johannh] from comment #17)
> So, looking at this again on my Windows 7, you have to do quite some tuning
> to make the toolbarbuttons hard to see. You basically need to pull the
> slider to all white and have a light background.

It happens with the default Aero settings. The light background (e.g. Firefox 55 window underneath) was enough. It's also worse when the window is inactive, e.g. if you're working in an unmaximised Explorer window on top.

The left scroller is particularly bad. The buttons on the right are more or less visible, but low-contrast.

Also, this appears to affect all themes, notably Default.

Comment 20

[Mark Straver]

It's most definitely not restricted to any sort of extreme cases. Many light defaults for Aero glass's tint will result in (very) poor contrast on lighter backgrounds (e.g. another application's workspace under the browser window). You really need to give this priority; it shouldn't ship to release like this.

Comment 21

[Johann Hofmann [:johannh]]

Comment on attachment 8907640 [details]
Bug 1391227 - Make buttons in the tab toolbar more opaque.

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/179312/diff/2-3/

Comment 22

[Johann Hofmann [:johannh]]

Comment on attachment 8907640 [details]
Bug 1391227 - Make buttons in the tab toolbar more opaque.

Considering that we're facing Talos regressions from adding a filter: drop-shadow to toolbarbuttons (see my try run at https://treeherder.mozilla.org/perf.html#/compare?originalProject=mozilla-central&newProject=try&newRevision=978dd5dc93292217f7074ec8b1e9e0b662b8cc29&framework=1&showOnlyImportant=1&selectedTimeRange=172800), dao and I talked about setting the fill-opacity of these buttons to 1, which makes them a little more visible (and more consistently visible) on aero glass.

Without drop-shadow, it is still possible to make the buttons disappear by fine-tuning the aero color to white, but it's a little harder now and I feel like we can live with this compromise.

Stephen, do you agree that's enough?

Comment 23

[Dão Gottwald [:dao]]

Comment on attachment 8907640 [details]
Bug 1391227 - Make buttons in the tab toolbar more opaque.

https://reviewboard.mozilla.org/r/179312/#review189664

::: browser/themes/windows/browser-aero.css:330
(Diff revision 3)
>      border-top-left-radius: 2.5px;
>      border-top-right-radius: 2.5px;
>    }
>  
> +  /* Avoid fill-opacity to improve visibility of toolbar buttons on aero glass. */
> +  #TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon:not(:-moz-lwtheme),

Setting --toolbarbutton-icon-fill-opacity: 1 for #TabsToolbar would be simpler, although that would also affect the tab close button; maybe not a big deal?

Comment 24

[Johann Hofmann [:johannh]]

(In reply to Dão Gottwald [::dao] from comment #23)
> Comment on attachment 8907640 [details]
> Bug 1391227 - Make buttons in the tab toolbar more opaque.
> 
> https://reviewboard.mozilla.org/r/179312/#review189664
> 
> ::: browser/themes/windows/browser-aero.css:330
> (Diff revision 3)
> >      border-top-left-radius: 2.5px;
> >      border-top-right-radius: 2.5px;
> >    }
> >  
> > +  /* Avoid fill-opacity to improve visibility of toolbar buttons on aero glass. */
> > +  #TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon:not(:-moz-lwtheme),
> 
> Setting --toolbarbutton-icon-fill-opacity: 1 for #TabsToolbar would be
> simpler, although that would also affect the tab close button; maybe not a
> big deal?

Yeah, I considered it but I thought this wouldn't get me through review :D

It sounds simpler and I agree it's not a big deal.

Comment 25

[Johann Hofmann [:johannh]]

Comment on attachment 8907640 [details]
Bug 1391227 - Make buttons in the tab toolbar more opaque.

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/179312/diff/3-4/

Comment 26

[Johann Hofmann [:johannh]]

Comment on attachment 8907640 [details]
Bug 1391227 - Make buttons in the tab toolbar more opaque.

Shorlander said on IRC that he's fine with this as a short-term fixup.

Comment 27

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/7dcc9de81763
Make buttons in the tab toolbar more opaque. r=dao

Comment 28

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/7dcc9de81763

Comment 29

[Ritu Kothari (:ritu) (Inactive, please n-i to RyanVM, jcristau, or pascal)]

Hi Dao, Johann, should the short-term fix also be uplifted to 57?

Comment 30

[Johann Hofmann [:johannh]]

(In reply to Ritu Kothari (:ritu) from comment #29)
> Hi Dao, Johann, should the short-term fix also be uplifted to 57?

Yes, that's its primary purpose.

Comment 31

[Johann Hofmann [:johannh]]

Comment on attachment 8907640 [details]
Bug 1391227 - Make buttons in the tab toolbar more opaque.

Approval Request Comment
[Feature/Bug causing the regression]: Photon redesign (bug 1399498)
[User impact if declined]: Toolbar buttons in the tabs toolbar are hard to see on white/vivid backgrounds.
[Is this code covered by automated tests?]: No
[Has the fix been verified in Nightly?]: Not yet
[Needs manual test from QE? If yes, steps to reproduce]: Not really
[List of other uplifts needed for the feature/fix]: None
[Is the change risky?]: No
[Why is the change risky/not risky?]: CSS change that increases the opacity of some buttons
[String changes made/needed]: None

Comment 32

[Sylvestre Ledru [:Sylvestre]]

Comment on attachment 8907640 [details]
Bug 1391227 - Make buttons in the tab toolbar more opaque.

Polish photon, taking it.
Should be in 57b5

Comment 33

[Ryan VanderMeulen [:RyanVM]]

This has conflicts on Beta. Please post a rebased patch or request uplift for missing deps.

Comment 34

[Johann Hofmann [:johannh]]

I'll request uplift in bug 1403110, thanks.

Comment 35

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-beta/rev/6508bce1106d

Comment 36

[Valentina Claudia Ona]

I verified this issue using Nightly 58.0a1 and Firefox Beta 57.0b4 with Build ID 20171008220130 on Windows 7 32 bit
I will mark this as verified fixed.