1134441 - Replace font size controls with +/- buttons

Status: VERIFIED FIXED

(Toolkit :: Reader Mode, defect)

Description

[:Margaret Leibovic]

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

Comment 1

[Michael Maslaney [:mmaslaney] ([e-mail])]

I'll provide an updated mock with the new controls and assets.

Comment 2

[:Margaret Leibovic]

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.

Comment 3

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: icon_plusminus.zip

+ and - icons attached. Thanks Margaret!

Comment 4

[:Margaret Leibovic]

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

Comment 5

[:Margaret Leibovic]

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!).

Comment 6

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: ReadingList-Readermode-Icons.zip

Assets attached.

Comment 8

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: icon_plusminus_SVG.zip

Sure! give this a try.

Comment 9

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: icon_plusminus_SVG2.zip

Removed excess white space.

Comment 10

[:Margaret Leibovic]

Attachment: Replace font size controls with +/- buttons

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.

Comment 11

[:Margaret Leibovic]

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 12

[Brian Nicholson (:bnicholson)]

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!

Comment 13

[:Margaret Leibovic]

https://hg.mozilla.org/integration/fx-team/rev/9fc2105f2ce7

Comment 14

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/9fc2105f2ce7

Comment 15

[Teodora Vermesan (:TeoVermesan)]

Attachment: +/- buttons in reader mode

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.

Comment 16

[:Margaret Leibovic]

I didn't uplift the entity removal to avoid l10n churn:
https://hg.mozilla.org/releases/mozilla-aurora/rev/d0eef186dc22

Comment 17

[Teodora Vermesan (:TeoVermesan)]

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)

Comment 18

[Andrei Vaida [:avaida]]

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