1184651 - Use flat background instead of gradient for the navigation toolbar on Windows 10 and 8

Status: VERIFIED FIXED

(Firefox :: Theme, defect, P3)

Description

[Tim Nguyen :ntim]

I know the motivation behind using -moz-Dialog was to get High Contrast support, but it just looks bad on Windows 8 and 10 in my opinion. The gradient also doesn't fit into the UI. Also, Stephen's spec removes it too (for the lw-themes as well) : https://people.mozilla.org/~shorlander/mockups/Windows-10/Windows-10.html

Comment 1

[Justin Dolske [:Dolske]]

I think I'm missing something here -- I'm not seeing a navbar color different between the mockup and currently Nightly. (Unless it's super subtle? I didn't compare actual pixel values.)

Comment 2

[Tim Nguyen :ntim]

(In reply to Justin Dolske [:Dolske] from comment #1)
> I think I'm missing something here -- I'm not seeing a navbar color
> different between the mockup and currently Nightly. (Unless it's super
> subtle? I didn't compare actual pixel values.)

If you use the eyedropper from the top of the selected tab to the navbar border, you'll see there is a gradient from #FAFAFA to #F0F0F0. If you compare to the mockup, you'll see a lighter (#F6F6F6) flat background with no gradient.

This isn't high priority though, as it's not quite noticeable.

Comment 3

[Justin Dolske [:Dolske]]

(In reply to Tim Nguyen [:ntim] from comment #0)
> The gradient also doesn't fit into the UI.

I'm also not sure what gradient you're referring to here.

It would be helpful if you could attach screenshots when filing bugs like this, or at least be specific about exactly what you're referring to.

Comment 4

[Tim Nguyen :ntim]

(In reply to Justin Dolske [:Dolske] from comment #3)
> (In reply to Tim Nguyen [:ntim] from comment #0)
> > The gradient also doesn't fit into the UI.
> 
> I'm also not sure what gradient you're referring to here.
The navbar gradient is defined here : http://mxr.mozilla.org/mozilla-central/source/browser/themes/windows/browser.css#316
There is also a gradient on the selected tab, but I can't remember in which file it is in.

The gradient is not noticeable to most people by default (see comment #2), but it's more visible when a lw-theme is set (see the left screenshot of attachment 8504258 [details]).

Comment 5

[Dão Gottwald [:dao]]

Attachment: patch

This was a bit tricky because the selected tab texture is shared across Windows versions, and in its current form it looks pretty bad with lightweight themes on Windows 10. So I made that texture flat for all versions, while keeping the toolbar gradient on Windows 7 and older, which I think works out ok.

I've also ported this to Linux since the toolbar being flat doesn't make a big difference with e.g. the Ubuntu default theme but looks better when applying a lightweight theme.

Comment 6

[Pulsebot]

https://hg.mozilla.org/integration/fx-team/rev/fcf23377f9c3

Comment 7

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/fcf23377f9c3

Comment 8

[Cornel Ionce [:noni] [Hubs QA]]

Reproduced this issue on Firefox 43RC (buildID 20151208100201) on Windows 10 x64.

Confirming the fix on latest 44 DevEdition, buildID: 20151214004008.
The color of the toolbars is now set to #F6F6F6.