Closed Bug 1184651 Opened 4 years ago Closed 4 years ago

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

Categories

(Firefox :: Theme, defect, P3)

All
Windows 10
defect

Tracking

()

VERIFIED FIXED
Firefox 44
Tracking Status
firefox44 --- verified

People

(Reporter: ntim, Assigned: dao)

References

(Blocks 1 open bug)

Details

Attachments

(1 file)

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
Blocks: windows-10
Summary: Use lighter and flat background for the navbar for WIndows 10 and 8 → Use lighter and flat background for the navbar for Windows 10 and 8
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.)
Flags: needinfo?(ntim.bugs)
(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.
Flags: needinfo?(ntim.bugs)
(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.
Flags: needinfo?(ntim.bugs)
Priority: -- → P4
(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]).
Flags: needinfo?(ntim.bugs)
Blocks: theme-win10
No longer blocks: windows-10
Priority: P4 → P3
Assignee: nobody → dao
OS: Unspecified → Windows 10
Hardware: Unspecified → All
Summary: Use lighter and flat background for the navbar for Windows 10 and 8 → Use flat background instead of gradient for the navigation toolbar on Windows 10 and 8
Attached patch patchSplinter Review
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.
Attachment #8672037 - Flags: review?(jaws)
https://hg.mozilla.org/mozilla-central/rev/fcf23377f9c3
Status: NEW → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 44
Depends on: 1214707
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.
Status: RESOLVED → VERIFIED
Blocks: 1208731
Depends on: 1244500
Depends on: 1246005
Depends on: 1247776
No longer depends on: 1247776
Duplicate of this bug: 1247776
You need to log in before you can comment on or make changes to this bug.