Last Comment Bug 986324 - Text inputs (URL and search bar) are unreadable in the nav-bar in High Contrast Mode
: Text inputs (URL and search bar) are unreadable in the nav-bar in High Contra...
Status: VERIFIED FIXED
[Australis:P3-]
: access, regression
Product: Firefox
Classification: Client Software
Component: Theme (show other bugs)
: Trunk
: All Windows 8
-- normal (vote)
: Firefox 31
Assigned To: Mike de Boer [:mikedeboer]
:
: Dão Gottwald [:dao]
Mentors:
: 975394 (view as bug list)
Depends on: 946595 993932 994240
Blocks: themea11y australis-navbar 960517 963950 990085
  Show dependency treegraph
 
Reported: 2014-03-20 22:57 PDT by Matthew N. [:MattN] (PM if requests are blocking you)
Modified: 2014-04-11 08:11 PDT (History)
10 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---
verified
verified
verified


Attachments
Screenshot on 2014-03-12 (not enough contrast) (19.47 KB, image/png)
2014-03-20 22:57 PDT, Matthew N. [:MattN] (PM if requests are blocking you)
no flags Details
Patch v1: small refactor of urlbar and search field styles (4.63 KB, patch)
2014-03-25 09:27 PDT, Mike de Boer [:mikedeboer]
dao+bmo: review-
Details | Diff | Splinter Review
Patch v1, ignore-whitespace. (4.63 KB, patch)
2014-03-25 09:28 PDT, Mike de Boer [:mikedeboer]
no flags Details | Diff | Splinter Review
Patch v2: small refactor of urlbar and search field styles (4.48 KB, patch)
2014-04-02 09:48 PDT, Mike de Boer [:mikedeboer]
no flags Details | Diff | Splinter Review
Patch v3: small refactor of urlbar and search field styles (4.30 KB, patch)
2014-04-03 06:04 PDT, Mike de Boer [:mikedeboer]
dao+bmo: review+
sledru: approval‑mozilla‑aurora+
sledru: approval‑mozilla‑beta+
Details | Diff | Splinter Review

Description User image Matthew N. [:MattN] (PM if requests are blocking you) 2014-03-20 22:57:45 PDT
Created attachment 8394592 [details]
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 User image Matthew N. [:MattN] (PM if requests are blocking you) 2014-03-20 23:00:02 PDT
I bet bug 960517 was the cause.
Comment 2 User image Matthew N. [:MattN] (PM if requests are blocking you) 2014-03-20 23:02:36 PDT
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 User image Dão Gottwald [:dao] 2014-03-21 01:07:04 PDT
(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 4 User image Matthew N. [:MattN] (PM if requests are blocking you) 2014-03-22 13:03:30 PDT
*** Bug 975394 has been marked as a duplicate of this bug. ***
Comment 5 User image Mike de Boer [:mikedeboer] 2014-03-25 09:27:21 PDT
Created attachment 8396470 [details] [diff] [review]
Patch v1: small refactor of urlbar and search field styles
Comment 6 User image Mike de Boer [:mikedeboer] 2014-03-25 09:28:07 PDT
Created attachment 8396471 [details] [diff] [review]
Patch v1, ignore-whitespace.
Comment 7 User image Mike de Boer [:mikedeboer] 2014-03-26 03:12:52 PDT
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 User image Mike de Boer [:mikedeboer] 2014-03-27 07:05:24 PDT
(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 User image Dão Gottwald [:dao] 2014-04-01 05:48:33 PDT
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 User image Tim Nguyen :ntim 2014-04-01 12:31:47 PDT
(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 User image Dão Gottwald [:dao] 2014-04-01 13:37:47 PDT
(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 User image Tim Nguyen :ntim 2014-04-01 13:48:41 PDT
(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 User image Tim Nguyen :ntim 2014-04-01 13:49:46 PDT
(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 User image Dão Gottwald [:dao] 2014-04-01 13:52:10 PDT
(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 User image Tim Nguyen :ntim 2014-04-01 14:09:02 PDT
(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 User image Mike de Boer [:mikedeboer] 2014-04-02 09:48:53 PDT
Created attachment 8400751 [details] [diff] [review]
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 User image Mike de Boer [:mikedeboer] 2014-04-02 09:52:41 PDT
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 User image Dão Gottwald [:dao] 2014-04-02 11:36:01 PDT
(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 User image Dão Gottwald [:dao] 2014-04-02 11:37:59 PDT
(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 User image Mike de Boer [:mikedeboer] 2014-04-03 06:04:38 PDT
Created attachment 8401263 [details] [diff] [review]
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 User image Mike de Boer [:mikedeboer] 2014-04-04 03:04:52 PDT
Pushed as: https://hg.mozilla.org/integration/fx-team/rev/6b695883d4ff
Comment 22 User image Ryan VanderMeulen [:RyanVM] 2014-04-04 11:46:38 PDT
https://hg.mozilla.org/mozilla-central/rev/6b695883d4ff
Comment 23 User image Mike de Boer [:mikedeboer] 2014-04-07 03:38:39 PDT
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 25 User image Joel Maher ( :jmaher) 2014-04-08 11:51:46 PDT
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 User image Dão Gottwald [:dao] 2014-04-09 00:47:50 PDT
Joel, bugs usually stay resolved unless the patches were ineffective or got backed out.
Comment 27 User image Joel Maher ( :jmaher) 2014-04-09 01:37:04 PDT
Apologies :dao.  I had received feedback that opening new bugs was confusing- I think it is not always the case.
Comment 28 User image Avi Halachmi (:avih) 2014-04-09 02:16:44 PDT
(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 User image Cornel Ionce [QA] (:cornel_ionce) 2014-04-11 01:33:53 PDT
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

Note You need to log in before you can comment on or make changes to this bug.