Too many differing background greys throughout the browser

VERIFIED FIXED in Firefox 34

Status

()

defect
VERIFIED FIXED
5 years ago
4 years ago

People

(Reporter: aaronmt, Assigned: lucasr)

Tracking

34 Branch
Firefox 35
ARM
Android
Points:
---

Firefox Tracking Flags

(firefox34 fixed, firefox35 verified, firefox36 verified, firefox37 wontfix, fennec34+)

Details

(Whiteboard: [shades of grey])

Attachments

(9 attachments, 3 obsolete attachments)

(Reporter)

Description

5 years ago
Posted image screenshot.png
See screenshot.

With holo/material design in mind there should be some consistency here.
Flags: needinfo?(alam)
Hey Aaron,

Great catch :) I've got a color swatch library that I've been using myself to keep things visually consistent and I'm trying to establish it into a more concise guide. So, it just hasn't made it to these other pages yet.

This is also a part of Project Chameleon to unify these visuals with folks from Desktop, and OS.

That being said, feel free to file these bugs as a part of the meta bug we're using to track these visual/interactive changes - bug 1052004 :)
Flags: needinfo?(alam)
As a general note, the #CED7DE in the toolbar was changed to #EBEBF0 so that might be a good starting point if we can try that out. :)
I think we should aim to address this as part of the toolbar changes.
tracking-fennec: --- → ?
(Assignee)

Comment 4

5 years ago
(In reply to :Margaret Leibovic from comment #3)
> I think we should aim to address this as part of the toolbar changes.

I agree. Taking.
Assignee: nobody → lucasr.at.mozilla
(Assignee)

Comment 5

5 years ago
antlam, we need a new version of these images with the new shade of grey:
https://dl.dropboxusercontent.com/u/1187037/menu-popup-bg.zip
Flags: needinfo?(alam)
Here's a preview of the new 9 patches for this. I've also brought in the shadows a bit so the light sources doesn't feel so close to the menu. I feel like this matches up with the new toolbar a bit more and feels less fuzzy/ cramped. :)

9 patch files coming!
Flags: needinfo?(alam)
Posted file menu-popup-bg-new.zip (obsolete) —
Here you go! through in XXHDPI just in case / for the future :)
(Assignee)

Comment 8

5 years ago
Posted image Screenshot (tablets)
I'd liked the more pronounced shadow we had. This looks fine too. Up to you.
Attachment #8476628 - Flags: feedback?(alam)
(Assignee)

Comment 9

5 years ago
Posted image Screenshot (phones)
We need to tweak the menu header (the one with the back/forward/refresh buttons) color too I think.
Attachment #8476631 - Flags: feedback?(alam)
Comment on attachment 8476628 [details]
Screenshot (tablets)

Yeah , this doesn't come up as well when the menu is larger. Let me kick it up a bit and re-attach :)
Attachment #8476628 - Flags: feedback?(alam) → feedback-
Comment on attachment 8476631 [details]
Screenshot (phones)

Yeah that looks weird cause it's still blue-ish.

Also, whats with the clipping happening on the right hand side?
Attachment #8476631 - Flags: feedback?(alam) → feedback-
Posted file menu-popup-bg-new2.zip (obsolete) —
try these! :)
Attachment #8476359 - Attachment is obsolete: true
(Assignee)

Comment 13

5 years ago
(In reply to Anthony Lam (:antlam) from comment #11)
> Comment on attachment 8476631 [details]
> Screenshot (phones)
> 
> Yeah that looks weird cause it's still blue-ish.

What color should we use then?

> Also, whats with the clipping happening on the right hand side?

The clipping is bug 1020505. Ignore it :-)
(Assignee)

Comment 14

5 years ago
Hey Anthony, I noticed that the shadows in the images you sent are quite different for each density. Is that intended? More especifically, mdpi and hdpi have a much more pronounced shadow than xhdpi and xxhdpi.
Flags: needinfo?(alam)
(Assignee)

Comment 15

5 years ago
Also, the assets you sent are not valid 9-patch images. Make sure the shadow pixels don't bleed into the outer frame where you draw the control pixels.
Posted file menu-popup-bg-new3.zip (obsolete) —
I figured out the sizing difference issue but because the shadow is so faint, I can't tell 100% if it's within the black "control pixels" but this should be good. Give these a try! :)
Attachment #8476792 - Attachment is obsolete: true
Flags: needinfo?(alam)
Posted image prev_menu_greys2.png
Try this for the different grey? (#E1E1E6) I tried to find a color that both worked well with the current icon colors and was a derivative of the new toolbar grey. 

It might not be obvious enough but I also have another darker one in the palette we could use if that's the case (that doesn't match things like the current button dividers as much)

(attaching quick mockup I used to compare the colors)
(Assignee)

Comment 18

5 years ago
I still think the shadow could be a bit more pronounced btw:
https://dl.dropboxusercontent.com/u/1187037/Screenshot_2014-08-26-13-55-06.png
https://dl.dropboxusercontent.com/u/1187037/2014-08-26%2013.56.10.png

Up to you.
Flags: needinfo?(alam)
I'd agree :) it's hard to see the full effects from my mocks unfortunately. So we might have to try this a couple more times.

I've made these more prominent, let me know what you think! Could I get a build to check these out too?
Attachment #8477540 - Attachment is obsolete: true
Flags: needinfo?(alam)
This looks great.

I noticed the dividers are still a bit blue, how easy is it to change them to #D7D9DB ?
Flags: needinfo?(alam) → needinfo?(lucasr.at.mozilla)
(Assignee)

Comment 23

5 years ago
Comment on attachment 8480473 [details] [diff] [review]
Use consistent grey tone in overflow menu (r=margaret)

Checked all the divider, they seem look fine. The divider color change is very subtle anyway.
Attachment #8480473 - Flags: review?(margaret.leibovic)
Flags: needinfo?(lucasr.at.mozilla)

Updated

5 years ago
tracking-fennec: ? → 34+
Comment on attachment 8480473 [details] [diff] [review]
Use consistent grey tone in overflow menu (r=margaret)

Review of attachment 8480473 [details] [diff] [review]:
-----------------------------------------------------------------

This change looks fine, but I think we can make this better by factoring out these shared color values.

::: mobile/android/base/resources/drawable/divider_horizontal.xml
@@ +5,5 @@
>  
>  <shape xmlns:android="http://schemas.android.com/apk/res/android"
>         android:shape="rectangle">
>  
> +    <solid android:color="#D7D9DB"/>

I think we should pull this value into a generic color resource, maybe something like @color/divider_grey.

That way it's obvious that we're using a single color consistently, and we can easily use it in any new views we add.
Attachment #8480473 - Flags: review?(margaret.leibovic) → review+
(Assignee)

Updated

5 years ago
Attachment #8481223 - Flags: review?(margaret.leibovic)
Comment on attachment 8481223 [details] [diff] [review]
Consolidate divider colors (r=margaret)

Review of attachment 8481223 [details] [diff] [review]:
-----------------------------------------------------------------

Nice.
Attachment #8481223 - Flags: review?(margaret.leibovic) → review+

Comment 28

5 years ago
https://hg.mozilla.org/mozilla-central/rev/d4527b684366
https://hg.mozilla.org/mozilla-central/rev/e18ff990cb6d
Status: NEW → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 35
(Assignee)

Comment 29

5 years ago
Comment on attachment 8480473 [details] [diff] [review]
Use consistent grey tone in overflow menu (r=margaret)

Approval Request Comment
[Feature/regressing bug #]: bug 1052004
[User impact if declined]: Inconsistent color in the UI. Make us look a bit amateur.
[Describe test coverage new/current, TBPL]: Local testing only. Let's just confirm it looks good in the next Nightly and uplift.
[Risks and why]: Low. Simply tweaks an image and some color values.
[String/UUID change made/needed]: n/a
Attachment #8480473 - Flags: approval-mozilla-aurora?
(Assignee)

Comment 30

5 years ago
Comment on attachment 8481223 [details] [diff] [review]
Consolidate divider colors (r=margaret)

Approval Request Comment
[Feature/regressing bug #]: bug 1052004
[User impact if declined]: Inconsistent color in the UI. Make us look a bit amateur.
[Describe test coverage new/current, TBPL]: Local testing only. Let's just confirm it looks good in the next Nightly and uplift.
[Risks and why]: Low. Simply tweaks an image and some color values.
[String/UUID change made/needed]: n/a
Attachment #8481223 - Flags: approval-mozilla-aurora?
Lucas - Please comment once you've confirmed on Nightly and I'll approve the patches for uplift.
(Assignee)

Comment 32

5 years ago
(In reply to Lawrence Mandel [:lmandel] from comment #31)
> Lucas - Please comment once you've confirmed on Nightly and I'll approve the
> patches for uplift.

Yeah, looking fine in Nightly.
Comment on attachment 8480473 [details] [diff] [review]
Use consistent grey tone in overflow menu (r=margaret)

Aurora+
Attachment #8480473 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora+
Attachment #8481223 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora+
NI-ing Lucas to check on the dividers blu-ness later
Flags: needinfo?(lucasr.at.mozilla)
(Assignee)

Updated

4 years ago
Flags: needinfo?(lucasr.at.mozilla)
Anthony, it seems Lucas checked on the dividers in comment 23 - does something still appear off?
Flags: needinfo?(alam)
Maybe it's just these old eyes... 

I also just checked the dividers in our about: pages and it looks like they're #D7D9DB and I assume they're the same everywhere so it's all good :)
Flags: needinfo?(alam)

Comment 38

4 years ago
All same grey 
Nexus 5 ( Android 5.0.1) Fennec 35 Beta 8 build 1
ZTE Open ( Android 4.0.4) Fennec 35 Beta 8 build 1

Comment 39

4 years ago
Nexus 5 ( Android 5.0.1) and ZTE Open ( Android 4.0.4) 
Fennec 35 Beta 8 build 1
Aurora 36 ( 2014-12-29)
Nightly 37 ( 2014-12-30)

I can only see one type of grey - the blue-ish is not present anymore.
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.