556650 - Choose Language button on Facebook hard to read

Status: VERIFIED FIXED

(Firefox for Android Graveyard :: General, defect)

Description

[Aakash Desai [:aakashd]]

Build id:
Mozilla/5.0 (X11; U; Linux armv7l; Nokia N900; en-US; rv:1.9.2.3pre) Gecko/20100401 Namoroka/3.6.3pre Fennec/1.1a2pre


Steps to Reproduce:
1. Go to http://m.facebook.com/firefoxformobile
2. Pan down to the Language section and view the "Choose Language" button

Actual Results:
The text is in white and is very hard to read against a light-gray button

Comment 1

[Mark Finkle (:mfinkle) (use needinfo?)]

This is due to our use of background-image: linear-gradient in CSS. Web pages that try to change a button color using background-color will fail.

Comment 2

[Madhava Enros [:madhava]]

Is there a fix for this that doesn't mean we have to stop styling buttons this way?

Comment 3

[Aakash Desai [:aakashd]]

This is also seen on the facebook.com login page as reported by:

http://reporter.mozilla.org/app/report/?report_id=RMO12710412031875&report_product=Fennec%2F1.0.0&selected[]=host_hostname&selected[]=report_file_date&show=25&product_family=&page=1

Comment 4

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

(In reply to comment #3)
> This is also seen on the facebook.com login page as reported by:
> 
> http://reporter.mozilla.org/app/report/?report_id=RMO12710412031875&report_product=Fennec%2F1.0.0&selected[]=host_hostname&selected[]=report_file_date&show=25&product_family=&page=1

This report is "Plugin not shown", right?
Was is really related to this bug?

Comment 5

[Aakash Desai [:aakashd]]

Ah, sorry, I should have added more context. The problem types on reporter.mozilla.org are only ported over to Desktop Firefox problem types on the Broken Website Reporter. We're updating the website to relate the problem types under Fennec with those on Reporter for Fennec.

In this case, "Plugin Not Shown" is the located 3rd from the top on Desktop Firefox. For Reporter for Fennec, its "Buttons/Links".

Comment 6

[Martijn Wargers (dead)]

Attachment: testcase

I'm seeing this problem on quite a few sites.

Comment 7

[Matt Brubeck (:mbrubeck)]

Using a transparent background gradient instead of a solid one would mitigate this quite a bit.

Comment 8

[Matt Brubeck (:mbrubeck)]

Attachment: patch

This patch replaces all rgb() values in background gradients with rgba values at 0.5 transparancy, calculated to give the same output when applied to a white background.

This should preserve our desired look by default, but degrade better in the presence of content-supplied background-color styles.

Comment 9

[Mark Finkle (:mfinkle) (use needinfo?)]

Comment on attachment 445370 [details] [diff] [review]
patch

results are good. let's get on trunk and test.

Comment 10

[Mark Finkle (:mfinkle) (use needinfo?)]

pushed to m-b:
http://hg.mozilla.org/mobile-browser/rev/ef9054a8b48e

baking on m-b

Comment 11

[Aakash Desai [:aakashd]]

Looks great on trunk so far:

Mozilla/5.0 (X11; U; Linux armv71; Nokia N900; en-US; rv:1.9.3a5pre) Gecko/20100518 Namoroka/3.7a5pre Fennec/2.0a1pre


I'm adding the tag need-1.1-ver to the whiteboard to verify this later on 1.1

Comment 12

[Mark Finkle (:mfinkle) (use needinfo?)]

pushed to m-1.1:
http://hg.mozilla.org/releases/mobile-1.1/rev/68bfbd960bd3

Comment 13

[Carla Nadastean]

Retested bug with:
Build ID: Mozilla/5.0 (Android; Linux armv7l; rv:10.0a1) Gecko/20111014 Firefox/10.0a1 Fennec/10.0a1
Device: Motorola Droid 2
OS: Android 2.3

Bug is no longer reproducible. Marking bug as verified.