Closed Bug 1134441 Opened 5 years ago Closed 5 years ago

Replace font size controls with +/- buttons


(Toolkit :: Reader Mode, defect)

Not set



Tracking Status
firefox38 --- verified
firefox39 --- verified


(Reporter: Margaret, Assigned: Margaret)




(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
+ 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:
Updated desktop mock-up, for my reference:

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 (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:

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:
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+
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: ) 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:
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)
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.