Closed Bug 1134441 Opened 5 years ago Closed 5 years ago

Replace font size controls with +/- buttons

Categories

(Toolkit :: Reader Mode, defect)

defect
Not set

Tracking

()

VERIFIED FIXED
mozilla39
Tracking Status
firefox38 --- verified
firefox39 --- verified

People

(Reporter: Margaret, Assigned: Margaret)

References

Details

Attachments

(5 files, 1 obsolete file)

This is part of antlam's design for bug 1120004, but it will affect the shared reader view code.

antlam told me the UX team decided to be consistent and use these +/- font size controls on all platforms.

mmaslaney, do you have updated mock-ups to reflect this change for desktop?a
Flags: needinfo?(mmaslaney)
I'll provide an updated mock with the new controls and assets.
Flags: needinfo?(mmaslaney)
antlam, could I also get some assets for these +/- buttons for mobile?

The desktop and mobile controls use shared markup and JS logic, so updates to the controls will happen at the same time.
Flags: needinfo?(alam)
Attached file icon_plusminus.zip
+ and - icons attached. Thanks Margaret!
Flags: needinfo?(alam)
Note to self (and whoever will review this patch): The +/- buttons we used to have on Android were originally removed here:
http://hg.mozilla.org/mozilla-central/rev/0623dece2b89
Updated desktop mock-up, for my reference: https://projects.invisionapp.com/share/XT21LURF8#/screens

mmaslaney, could I get assets for those +/- buttons?

Also, antlam, would you be interested in updating the mobile assets to be svg? It's no problem for me to use the icons you attached, but this could be a nice opportunity to try to start using svg (2 images instead of 8!).
Flags: needinfo?(mmaslaney)
Flags: needinfo?(alam)
Assets attached.
Flags: needinfo?(mmaslaney)
Duplicate of this bug: 1074381
Attached file icon_plusminus_SVG.zip (obsolete) —
Sure! give this a try.
Flags: needinfo?(alam)
Removed excess white space.
Attachment #8568822 - Attachment is obsolete: true
As part of this change, I updated our mobile styles to use relative font sizes, and I updated the font size options to support 9 different sizes.

Here are some screenshots:
http://cl.ly/image/0S3X0G1b3K1H
http://cl.ly/image/1q0J352M132p

The buttons look kinda out of place on mobile, but they should fit in better once we fix bug 1120004. In any case, we can use that bug to refine how these look.
Attachment #8568906 - Flags: review?(bnicholson)
FYI, the logic for increasing/decreasing font size was inspired by the old logic we used to have in the tree:
http://hg.mozilla.org/mozilla-central/rev/0623dece2b89
Comment on attachment 8568906 [details] [diff] [review]
Replace font size controls with +/- buttons

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

Just skimmed quickly over the CSS, but the screenshots look good to me!
Attachment #8568906 - Flags: review?(bnicholson) → review+
https://hg.mozilla.org/mozilla-central/rev/9fc2105f2ce7
Status: NEW → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla39
Tested on latest Nightly using Alcatel One Touch( Android 4.1.2) the +/- buttons seem to be greyed out (please take a look at the screenshot: http://i.imgur.com/74Q4jva.png ) but they are active and tapping them the font changes. Maybe a darker grey should be more relevant.
And also double tapping on the + or - button, performs a scroll down the page.
I didn't uplift the entity removal to avoid l10n churn:
https://hg.mozilla.org/releases/mozilla-aurora/rev/d0eef186dc22
Size controls are now displayed as +/- buttons, so I will mark the bug as verified fixed:
Tested with:
Device: Nexus 4 (Android 4.4)
Build: Firefox for Android 39.0a1(2015-03-19 and Firefox for Android 38.0a2 (2015-03-19)
Status: RESOLVED → VERIFIED
Verified fixed on desktop Nightly 39.0a1 (2015-03-19) and Aurora 38.0a2 (2015-03-19) as well, using Windows 7 (x64), Mac OS X 10.9.5 and Ubuntu 14.04 (x64).
You need to log in before you can comment on or make changes to this bug.