986324 - Text inputs (URL and search bar) are unreadable in the nav-bar in High Contrast Mode

Status: VERIFIED FIXED

(Firefox :: Theme, defect)

Description

[Matthew N. [:MattN]]

Attachment: Screenshot on 2014-03-12 (not enough contrast)

This is about a regression since bug 963950 was filed and is of higher priority since it's a usability regression. I saw it reported on input today. The text in the address and search bars are yellow on a white background which isn't readable at all on Windows 8 with High Contrast #1.

Last good revision: 41d962d23e81 (2014-03-11)
First bad revision: 44ae8462d6ab (2014-03-12)

Pushlog: https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=41d962d23e81&tochange=44ae8462d6ab

Prior to this regression, it was still yellow text but on a black input background (much more contrast).

Comment 1

[Matthew N. [:MattN]]

I bet bug 960517 was the cause.

Comment 2

[Matthew N. [:MattN]]

Specifically https://hg.mozilla.org/mozilla-central/rev/ece9cdfb15d7

I see the background of the URL and search field is getting its background color set

Comment 3

[Dão Gottwald [:dao]]

(In reply to Matthew N. [:MattN] from comment #2)
> Specifically https://hg.mozilla.org/mozilla-central/rev/ece9cdfb15d7
> 
> I see the background of the URL and search field is getting its background
> color set

Yes. This needs to use -moz-windows-default-theme, like here: http://hg.mozilla.org/mozilla-central/annotate/c148f0b0c8b4/browser/themes/windows/browser.css#l1075

I'm not sure either why such a large Win8-specific block had to be added rather than modifying / refactoring the url and search bar styles we already had. Note that we had previously /removed/ the background transparency from these fields on Windows Vista and 7. Introducing it again on Windows 8 (which is visually simpler than the former versions) seems backwards.

Comment 5

[Mike de Boer [:mikedeboer]]

Attachment: Patch v1: small refactor of urlbar and search field styles

Comment 6

[Mike de Boer [:mikedeboer]]

Attachment: Patch v1, ignore-whitespace.

Comment 7

[Mike de Boer [:mikedeboer]]

Dão, one thing that might interest you is that `(-moz-windows-default-theme)` evaluates to true when a high contrast theme is selected on Windows 8. Is that expected and if not, should I file a bug?

Comment 8

[Mike de Boer [:mikedeboer]]

(In reply to Mike de Boer [:mikedeboer] from comment #7)
> Dão, one thing that might interest you is that
> `(-moz-windows-default-theme)` evaluates to true when a high contrast theme
> is selected on Windows 8. Is that expected and if not, should I file a bug?

Alright, this is bug 946595.

Comment 9

[Dão Gottwald [:dao]]

Comment on attachment 8396470 [details] [diff] [review]
Patch v1: small refactor of urlbar and search field styles

>   #urlbar:not(:-moz-lwtheme)[focused],
>   .searchbar-textbox:not(:-moz-lwtheme)[focused] {
>-    border-color: hsla(206,100%,60%,.65) hsla(206,100%,55%,.65) hsla(206,100%,50%,.65);
>+    border-color: #4595e5;
>   }

Can you use 'highlight' here?

>+    #urlbar:not(:-moz-lwtheme),
>+    .searchbar-textbox:not(:-moz-lwtheme) {
>+      background-color: -moz-field;

Why are you setting background-color:-moz-field here? What background color is used with this line removed?

>+      box-shadow: none;
>+      transition-duration: 0s;
>+    }

Why should the box-shadow and the border-color transition be there on Windows 8 but not on Windows Vista and 7?

>+    .chatbar-button,
>+    chatbar > chatbox {
>+      border-color: #A9B7C9;
>+    }

Hm, we should probably do this on Windows 8 too.

Comment 10

[Tim Nguyen :ntim]

(In reply to Dão Gottwald [:dao] from comment #9)
> Comment on attachment 8396470 [details] [diff] [review]
> Patch v1: small refactor of urlbar and search field styles
> 
> >   #urlbar:not(:-moz-lwtheme)[focused],
> >   .searchbar-textbox:not(:-moz-lwtheme)[focused] {
> >-    border-color: hsla(206,100%,60%,.65) hsla(206,100%,55%,.65) hsla(206,100%,50%,.65);
> >+    border-color: #4595e5;
> >   }
> 
> Can you use 'highlight' here?
#4595e5 is a deeper blue than highlight. I think what would be best is to create a media query to target specifically the high contrast theme. IE has this.

Comment 11

[Dão Gottwald [:dao]]

(In reply to Tim Nguyen [:ntim] from comment #10)
> > >   #urlbar:not(:-moz-lwtheme)[focused],
> > >   .searchbar-textbox:not(:-moz-lwtheme)[focused] {
> > >-    border-color: hsla(206,100%,60%,.65) hsla(206,100%,55%,.65) hsla(206,100%,50%,.65);
> > >+    border-color: #4595e5;
> > >   }
> > 
> > Can you use 'highlight' here?
> #4595e5 is a deeper blue than highlight.

There is a slight difference, yes, but this begs the question why we're deviating from the platform default.

> I think what would be best is to
> create a media query to target specifically the high contrast theme. IE has
> this.

This rule isn't used for high contrast themes.

Comment 12

[Tim Nguyen :ntim]

(In reply to Dão Gottwald [:dao] from comment #11)
> (In reply to Tim Nguyen [:ntim] from comment #10)
> > > >   #urlbar:not(:-moz-lwtheme)[focused],
> > > >   .searchbar-textbox:not(:-moz-lwtheme)[focused] {
> > > >-    border-color: hsla(206,100%,60%,.65) hsla(206,100%,55%,.65) hsla(206,100%,50%,.65);
> > > >+    border-color: #4595e5;
> > > >   }
> > > 
> > > Can you use 'highlight' here?
> > #4595e5 is a deeper blue than highlight.
> 
> There is a slight difference, yes, but this begs the question why we're
> deviating from the platform default.

Well, MS hasn't updated some of the system values we use since Windows XP/2000 (-moz-dialog, -moz-field, ThreeDShadow and some more I think). So we can't keep using these forever, really. 

Maybe we should even build our own system values, made for Australis, all by supporting high contrast. It would fix inconsistency issues, and also give the opportunity for us to be free with our UI. Chrome did this (with the Aura project), and replaced all system native dialogs/colors/controls by their own.

Comment 13

[Tim Nguyen :ntim]

(In reply to Dão Gottwald [:dao] from comment #11)
> (In reply to Tim Nguyen [:ntim] from comment #10)
> There is a slight difference, yes, but this begs the question why we're
> deviating from the platform default.
> 
> > I think what would be best is to
> > create a media query to target specifically the high contrast theme. IE has
> > this.
> 
> This rule isn't used for high contrast themes.

Yes, but I meant using #4595e5 for default Windows 8 theme, and Highlight for the high contrast ones.

Comment 14

[Dão Gottwald [:dao]]

(In reply to Tim Nguyen [:ntim] from comment #12)
> > > > Can you use 'highlight' here?
> > > #4595e5 is a deeper blue than highlight.
> > 
> > There is a slight difference, yes, but this begs the question why we're
> > deviating from the platform default.
> 
> Well, MS hasn't updated some of the system values we use since Windows
> XP/2000 (-moz-dialog, -moz-field, ThreeDShadow and some more I think). So we
> can't keep using these forever, really.

That's not true, neither for the ones you cited nor for 'highlight'.

Comment 15

[Tim Nguyen :ntim]

(In reply to Dão Gottwald [:dao] from comment #14)
> (In reply to Tim Nguyen [:ntim] from comment #12)
> > > > > Can you use 'highlight' here?
> > > > #4595e5 is a deeper blue than highlight.
> > > 
> > > There is a slight difference, yes, but this begs the question why we're
> > > deviating from the platform default.
> > 
> > Well, MS hasn't updated some of the system values we use since Windows
> > XP/2000 (-moz-dialog, -moz-field, ThreeDShadow and some more I think). So we
> > can't keep using these forever, really.
> 
> That's not true, neither for the ones you cited nor for 'highlight'.
Highlight used to be darker on Windows XP. But for the ones I cited, I've barely seen a difference.

Comment 16

[Mike de Boer [:mikedeboer]]

Attachment: Patch v2: small refactor of urlbar and search field styles

Addressed all review comments.

* border-color is now Highlight, their transition stays in Aero too.
* Moved Social styles to apply for Win8 too.

Comment 17

[Mike de Boer [:mikedeboer]]

Hmm, I forgot to remove the `box-shadow: none`... if you want it applied on Vista/ Win 7, then I'll remove the rule entirely.

Comment 18

[Dão Gottwald [:dao]]

(In reply to Mike de Boer [:mikedeboer] from comment #16)
> * Moved Social styles to apply for Win8 too.

Ooop, I cited the wrong code. I actually meant this:

+    .menu-accel,
+    .menu-iconic-accel {
+      color: graytext;
+    }

I have no idea whether the chatbar stuff should apply for Windows 8.

Comment 19

[Dão Gottwald [:dao]]

(In reply to Mike de Boer [:mikedeboer] from comment #17)
> Hmm, I forgot to remove the `box-shadow: none`... if you want it applied on
> Vista/ Win 7, then I'll remove the rule entirely.

Makes sense to me.

Comment 20

[Mike de Boer [:mikedeboer]]

Attachment: Patch v3: small refactor of urlbar and search field styles

Left the Social styles like the previous patch; better to be safe than sorry.

Comment 21

[Mike de Boer [:mikedeboer]]

Pushed as: https://hg.mozilla.org/integration/fx-team/rev/6b695883d4ff

Comment 22

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/6b695883d4ff

Comment 23

[Mike de Boer [:mikedeboer]]

Comment on attachment 8401263 [details] [diff] [review]
Patch v3: small refactor of urlbar and search field styles

[Approval Request Comment]
Bug caused by (feature/regressing bug #): Bug 960517, Australis.
User impact if declined: With a High Contrast theme enabled in Windows 8.x, the entered text in the urlbar and/ or search field are hard to read. This patch fixes that.
Testing completed (on m-c, etc.): landed on m-c.
Risk to taking this patch (and alternatives if risky): minor
String or IDL/UUID changes made by this patch: n/a

Comment 24

[Mike Conley (:mconley) (:⚙️)]

Aurora: https://hg.mozilla.org/releases/mozilla-aurora/rev/3a46d2a0efe2

Beta: https://hg.mozilla.org/releases/mozilla-beta/rev/274d760590d5

Comment 25

[Joel Maher ( :jmaher ) (UTC -8)]

this seems to cause a tart regression:
http://graphs.mozilla.org/graph.html#tests=[[293,132,31]]&sel=none&displayrange=30&datatype=running

in general we went from ~6.30 -> ~6.44, this is small, but a regression nonetheless.

here is a tbpl view with some retriggers before/after:
https://tbpl.mozilla.org/?tree=Fx-Team&fromchange=50d49ff44ddf&tochange=5da838032667&jobname=WINNT%206.2%20fx-team%20talos%20svgr

Comment 26

[Dão Gottwald [:dao]]

Joel, bugs usually stay resolved unless the patches were ineffective or got backed out.

Comment 27

[Joel Maher ( :jmaher ) (UTC -8)]

Apologies :dao.  I had received feedback that opening new bugs was confusing- I think it is not always the case.

Comment 28

[Avi Halachmi (:avih)]

(In reply to Dão Gottwald [:dao] from comment #26)
> Joel, bugs usually stay resolved unless the patches were ineffective or got
> backed out.

We're trying to evaluate how to handle talos regressions, the discussion is at bug 990644.

The current options are, per talos regression: file a new bug, reopen the possibly offending bug, or needinfo the owner on the possibly offending bug.

Please post your inputs to bug 990644, thanks.

Comment 29

[Cornel Ionce [:noni]]

The text inputs from the URL bar and the search bar are now visible while using High Contrast Mode on Windows 8.
Verified using:
- latest Nightly, build ID: 20140410030200
- latest Aurora, build ID: 20140410004003
- Fx 29 beta 7, build ID: 20140410150427