Closed Bug 1412518 Opened 2 years ago Closed Last year

Low contrast/badly readable text in time and date pickers with Photon colour scheme

Categories

(Firefox for Android :: Theme and Visual Design, defect)

All
Android
defect
Not set

Tracking

()

VERIFIED FIXED
Firefox 63
Tracking Status
firefox56 --- unaffected
firefox57 - wontfix
firefox58 + wontfix
firefox59 --- wontfix
firefox60 --- wontfix
firefox61 --- wontfix
firefox62 --- verified
firefox63 --- verified

People

(Reporter: JanH, Assigned: petru)

References

(Blocks 3 open bugs)

Details

Attachments

(6 files)

[Tracking Requested - why for this release]:
The time picker uses black for the currently active input (hours or minutes) and some sort of medium grey for the inactive input.
Previously this was displayed against an orange background, but the new colour scheme uses blue here, which makes the grey text rather badly readable.
Attached image Time Picker.png
I'll leave the visual change(spec) here. Let's fix it once the engineer have time.
Thanks!
Comment 2 makes me believe maybe this doesn't need to be tracked for 57 and can wait until 58? We are already close to the first RC.
Not ideal, but given the time scale no objection.
[Tracking Requested - why for this release]:

Won't fix for 57. Let's get this fixed for 58.
This didn't happen for 58, and I'm guessing won't for 59 either...
Because of bug 1318046 now the date picker, too...
Summary: Low contrast/badly readable text in time picker with Photon colour scheme → Low contrast/badly readable text in time and date pickers with Photon colour scheme
Blocks: 1464997
Assignee: nobody → petru.lingurar
Status: NEW → ASSIGNED
I've applied the colors from Carol in new styles for the DatePicker and TimePicker.
The new stylized pickers will be available on API >= 21. Below this for selecting date/time spinners are being used.

How they look:
Photon TimePicker - https://drive.google.com/file/d/1sXqf_aDeqxIvQTG1gbh_-mlJf4qwtAJX/view?usp=sharing
Photon DatePicker - https://drive.google.com/file/d/1deGkrYNkE0xnN1PWNqS0Ie0EQG5U_eIS/view?usp=sharing

NI-ing Bram to confirm if the style Carol proposed is still up-to-date and if the changes look fine.
Flags: needinfo?(bram)
Attachment #8994841 - Flags: review?(sdaswani) → review?(nchen)
Attachment #8994842 - Flags: review?(sdaswani) → review?(nchen)
Hi Petru, Carol’s design looks really good. However, do you know if there’s a reason behind setting the background colour of the date/time selection grey? It just looks different from the white background of the modal window.
Flags: needinfo?(bram) → needinfo?(chuang)
Comment on attachment 8994841 [details]
Bug 1412518 - Photon themed TimePicker;

https://reviewboard.mozilla.org/r/259378/#review266564
Attachment #8994841 - Flags: review?(nchen) → review+
Comment on attachment 8994842 [details]
Bug 1412518 - Photon themed DatePicker;

https://reviewboard.mozilla.org/r/259380/#review266566
Attachment #8994842 - Flags: review?(nchen) → review+
(In reply to Bram Pitoyo [:bram] from comment #11)
> Hi Petru, Carol’s design looks really good. However, do you know if there’s
> a reason behind setting the background colour of the date/time selection
> grey? It just looks different from the white background of the modal window.

Hey Bram,
Are you talking about the grey circle background behind the date/time selection?
At the time, I'm only helping out on tweaking the color because we applied the photon Blue which makes the text low contrast.
I think the picker might be the original android component design like the one shows here: http://www.zoftino.com/android-timepicker-example

Thanks!
Flags: needinfo?(chuang)
Keywords: checkin-needed
We're sorry, Autoland could not rebase your commits for you automatically. Please manually rebase your commits and try again.

hg error in cmd: hg rebase -s a57376bf59077b6d64bcca8ba704ca1b6324383e -d 313ec19aa619: rebasing 474682:a57376bf5907 "Bug 1412518 - Photon themed TimePicker; r=jchen"
merging mobile/android/app/src/main/res/values/themes.xml
merging mobile/android/app/src/photon/res/values/styles.xml
warning: conflicts while merging mobile/android/app/src/main/res/values/themes.xml! (edit, then use 'hg resolve --mark')
warning: conflicts while merging mobile/android/app/src/photon/res/values/styles.xml! (edit, then use 'hg resolve --mark')
unresolved conflicts (see hg resolve, then hg rebase --continue)
https://hg.mozilla.org/mozilla-central/rev/85bdb30a33ed
https://hg.mozilla.org/mozilla-central/rev/313ec19aa619
Status: ASSIGNED → RESOLVED
Closed: Last year
Resolution: --- → FIXED
Target Milestone: --- → Firefox 63
Flags: qe-verify+
Verified as fixed on Nightly 63. 
Devices verified:
Google Pixel (Android P Beta)
HTC Desire 820 (Android 6.0.1)
Samsung Galaxy Tab 3 (Android 8.0)
Flags: qe-verify+
Hi Jan,

If we have some resource available, I want to let you know that we also have the opportunity to slightly refresh our design to make it even more in-line with the Photon Design System.

See examples I’m going to post below.
Flags: needinfo?(jh+bugzilla)
Comment on attachment 8994841 [details]
Bug 1412518 - Photon themed TimePicker;

Approval Request Comment
[Feature/Bug causing the regression]: Material TimePicker shows hard to read content.
[User impact if declined]: Material TimePicker shows hard to read content. Used theme is not aligned with the Photon designed.
[Is this code covered by automated tests?]: No
[Has the fix been verified in Nightly?]: Yes
[Needs manual test from QE? If yes, steps to reproduce]: --
[List of other uplifts needed for the feature/fix]: --
[Is the change risky?]: No
[Why is the change risky/not risky?]: Small change, just a style change; Has been QE verified and in the time being in Nightly no issues have been reported
[String changes made/needed]: --
Attachment #8994841 - Flags: approval-mozilla-beta?
Comment on attachment 8994842 [details]
Bug 1412518 - Photon themed DatePicker;

Approval Request Comment
[Feature/Bug causing the regression]: Material DatePicker shows hard to read content.
[User impact if declined]: Material DatePicker shows hard to read content. Used theme is not aligned with the Photon designed.
[Is this code covered by automated tests?]: No
[Has the fix been verified in Nightly?]: Yes
[Needs manual test from QE? If yes, steps to reproduce]: --
[List of other uplifts needed for the feature/fix]: --
[Is the change risky?]: No
[Why is the change risky/not risky?]: Just a style change; Has been QE verified and in the time being in Nightly no issues have been reported.
[String changes made/needed]: --
Attachment #8994842 - Flags: approval-mozilla-beta?
(In reply to Bram Pitoyo [:bram] from comment #19)
> Hi Jan,
> 
> If we have some resource available, I want to let you know that we also have
> the opportunity to slightly refresh our design to make it even more in-line
> with the Photon Design System.
> 
> See examples I’m going to post below.

Feel free to file a follow-up bug for that if you wish.
Flags: needinfo?(jh+bugzilla)
Comment on attachment 8994841 [details]
Bug 1412518 - Photon themed TimePicker;

Low-risk style fix for a contrast issue. And we still have a couple of weeks before the RC build. Let's uplift for beta 16.
Attachment #8994841 - Flags: approval-mozilla-beta? → approval-mozilla-beta+
Attachment #8994842 - Flags: approval-mozilla-beta? → approval-mozilla-beta+
Flags: qe-verify+
Can you please check this, Oana?
Flags: needinfo?(oana.horvath)
Depends on: 1483165
Verified on Beta 62.0b17. Logged Bug 1483165, caused by this change.
Status: RESOLVED → VERIFIED
Flags: qe-verify+
Flags: needinfo?(oana.horvath)
Blocks: 1482009
Depends on: 1486200
You need to log in before you can comment on or make changes to this bug.