864274 - Show battery percentage while charging on statusbar

Status: RESOLVED WONTFIX

(Firefox OS Graveyard :: Gaia::System, enhancement)

Description

[Rubén Martín [:Nukeador] ❌ [away till Aug 31st]]

While charging the phone, there is no quick way to know the current status of the charge.

Lockscreen should show something like:

Charging (10%)

Example on Android: 

http://www.shrani.si/f/25/Vu/2v8GKimx/lockscreen.png
http://mydroidworld.com/forumimages/lwr.jpg

Even better, we could show a nice battery image with the charging animation and the percentage text on it.

Comment 1

[Rubén Martín [:Nukeador] ❌ [away till Aug 31st]]

I specially love the full screen lockscreen style this page has:

http://ricaud.me/mozilla/apis/

Time + battery status

Comment 2

[Daniel Zorro]

This must to be implemented, some special workaround:
· In lock-screen with pass-code is no much space to put the big battery
· Is possible to put a ETA?

Comment 3

[Zibi Braniecki [:zbraniecki][:gandalf]]

I'm taking this as it is high on my personal list of UX papercuts.

Comment 4

[Zibi Braniecki [:zbraniecki][:gandalf]]

Attachment: pull request

Alive, can you take a look at this patch and let me know if that looks good?

I follow the pattern used by Windows Phone and Android of showing battery charging only when:

a) lockscreen is on
b) charging is on

I adjusted the font to fit the battery icon size so that it is visually connected.

Comment 5

[Zibi Braniecki [:zbraniecki][:gandalf]]

Attachment: 2014-12-26-20-03-09.png

Screenshot

Comment 6

[Ahmed Nefzaoui [:Nefzaoui]]

Hey Zibi,

I stumbled upon your patch and figured out, why wouldn't it be a system-wide option that you can turn on/off? That would be even fancier! I did something similar in bug 810500 (see attachment 8423764 [details] and attachment 8423762 [details] [review]).
Also, IMO the whole percentage plus the "%" symbol should be localizeable, i.e. in RTL-languages the symbol is in the opposite side. :)

Thanks!

Comment 7

[Zibi Braniecki [:zbraniecki][:gandalf]]

Hey, Ahmed. I believe those to be two different features.

 - turning on battery value in/off is a user preference where the user pays for information with space
 - showing charging status while charging is feedback on the very action that the user is performing at the moment.

I believe that the final solution should be:

 - by default show % only while charging in lockscreen mode
 - and when notification bar is maximized (to provide quick way to check battery status)
 - give user an option to turn on % permanently

I believe what you are working on to be piece three present in iOS and Cyanogen, what I'm working on to be piece 1 present in iOS, Android and Windows Phone.

Does it make sense?

Comment 8

[Ahmed Nefzaoui [:Nefzaoui]]

(In reply to Zibi Braniecki [:gandalf] from comment #7)
> Does it make sense?
Actually yes, it seems like the best way to proceed. However,
>  - and when notification bar is maximized (to provide quick way to check
> battery status)
I'm not quite sure about this, does it mean showing % when the utility tray is pulled down?

Also, what do you think about making the whole percentage string (number + symbol) localizeable? That way when we mirror the UI to RTL it would be possible to move the "%" symbol from the left side of the number to the right (or vice versa).

Comment 9

[Zibi Braniecki [:zbraniecki][:gandalf]]

(In reply to Ahmed Nefzaoui [:Nefzaoui] from comment #8)
> >  - and when notification bar is maximized (to provide quick way to check
> > battery status)
> I'm not quite sure about this, does it mean showing % when the utility tray
> is pulled down?

Yes. That's exactly the behavior that Android is using and I think it allows users to quickly check their exact battery charge without having to open Settings>Battery.

I'll file bugs for respective features and also a tracking bug for battery status updates.

> Also, what do you think about making the whole percentage string (number +
> symbol) localizeable? That way when we mirror the UI to RTL it would be
> possible to move the "%" symbol from the left side of the number to the
> right (or vice versa).

I totally agree. Frankly, I was hoping that dir will do this automatically ;) I'll update the patch.

Comment 10

[Ahmed Nefzaoui [:Nefzaoui]]

Awesome! Thanks!

Comment 11

[Zibi Braniecki [:zbraniecki][:gandalf]]

PR updated to make label localizable, thanks Ahmed!

Comment 12

[(inactive after 6/18) Alive Kuo [:alive]]

Comment on attachment 8541816 [details] [review]
pull request

LGTM, also flag michael.

Comment 13

[Zibi Braniecki [:zbraniecki][:gandalf]]

Comment on attachment 8541816 [details] [review]
pull request

Cool!

Then, I think the patch is ready for review. I've been using the build with this patch over the weekend and it works as expected.

Comment 14

[Francesco Lodolo [:flod]]

Comment on attachment 8541816 [details] [review]
pull request

Looks good and works fine, I'd only add a comment to the string as suggested on GH (mostly to explain where/when it's displayed)

Comment 15

[Michael Henretty [:mikehenrty][:mhenretty]]

Comment on attachment 8541816 [details] [review]
pull request

Nice feature, no complaints from me :)

Comment 16

[Michael Henretty [:mikehenrty][:mhenretty]]

Attachment: [screenshot] lockscreen with battery percentage

Let's use this screenshot, since it has the correct pixel depth battery icon.

Eric, will you take a look at the battery percentage addition?

Comment 17

[(inactive after 6/18) Alive Kuo [:alive]]

Comment on attachment 8541816 [details] [review]
pull request

Hi gandalf,

We will need unit tests in statusbar_test as least for
* toggleBatteryLabel(true) should show the label
* toggleBatteryLabel(false) should hide the label
* Battery state change should call toggleBatteryLabel
* Open lockscreen will show the label
* Close lockscreen will hide the label

Also you will need a style here:
https://github.com/mozilla-b2g/gaia/blob/master/apps/system/style/statusbar/statusbar.css#L567

See updateIconVisibility for how it works - it's used for icon competing.

Comment 18

[Eric Pang [:epang] UX]

Comment on attachment 8542249 [details]
[screenshot] lockscreen with battery percentage

Hi, not sure if this is just on my device but the percentage doesn't round up/down and overlaps the battery icon.  (Link to screen http://cl.ly/image/3O3X0X2Z3U2s) Also, can we move the % down by 1 pixel so it's vertically centered with the batter icon?  Please re flag me when ready, thanks!  Adding Rob for review so he's aware of this change.

Comment 19

[Zibi Braniecki [:zbraniecki][:gandalf]]

Attachment: set width vs. adjustable screenshot

Thanks Eric!

I adjusted the padding-top to push the text down. Should be good now.

One question I have is, is it preferred to leave space for the string, or adjust the space to text width.

In the original approach I kept the text-align: right and ensured the space for the maximum (4 char - '100%') possible variant.

If I remove width from CSS, then the icons will auto-adjust taking space depending on the width. On one hand, having an empty space to the left of the label seems a bit wrong, but on the other, jumping text when you switch from 9% to 10% and then from 99% to 100% also doesn't look that good.

Comment 20

[Zibi Braniecki [:zbraniecki][:gandalf]]

Attachment: android 5.0

Just for comparison, I took a look at what Android does.

Interestingly, they seem to do both - they leave enough space for the widest variant, and yet they jump when changing length.

I don't understand their reasoning and would guess that it is a bug.

Comment 21

[Zibi Braniecki [:zbraniecki][:gandalf]]

Comment on attachment 8541816 [details] [review]
pull request

Rerequesting review

(In reply to Alive Kuo [:alive][NEEDINFO!] from comment #17)
> We will need unit tests in statusbar_test as least for
> * toggleBatteryLabel(true) should show the label
> * toggleBatteryLabel(false) should hide the label
> * Battery state change should call toggleBatteryLabel
> * Open lockscreen will show the label
> * Close lockscreen will hide the label

Added tests.

Notice that I left one scenario with lockscreen=false on - when toggle is called explicitly with true. This is not the case anywhere right now, but in the future I will want to enable that for when notification bar is opened (bug 1115920).

> Also you will need a style here:
> https://github.com/mozilla-b2g/gaia/blob/master/apps/system/style/statusbar/
> statusbar.css#L567

That was in my patch since the beginning :)

Comment 22

[(inactive after 6/18) Alive Kuo [:alive]]

Comment on attachment 8541816 [details] [review]
pull request

r=me, thanks!

Comment 23

[Zibi Braniecki [:zbraniecki][:gandalf]]

Eric, with :alive's r+ and the green build, I'm waiting for your ui-review on the patch and the decision about spacing. 

Do you, on top of that, want me to wait for :robmac's ui-review before landing?

Comment 24

[Eric Pang [:epang] UX]

Comment on attachment 8542750 [details]
set width vs. adjustable screenshot

This looks good to me now, thanks for updating!

Comment 25

[Eric Pang [:epang] UX]

(In reply to Zibi Braniecki [:gandalf] from comment #23)
> Eric, with :alive's r+ and the green build, I'm waiting for your ui-review
> on the patch and the decision about spacing. 
> 
> Do you, on top of that, want me to wait for :robmac's ui-review before
> landing?

Ideally yes, but it looks like Rob is on PTO. Katie can you help review this?  Since it's new functionality I want to make sure we're all aware of this from the visual and ux side.  It's all ready to land so it would be great if you can take a look today :).  Thanks!

Comment 26

[katieC]

I'll do my best as Rob's stand-in this week and next... as I familiarize myself with status bar specs,  thanks in advance for your patience while I get up to speed. I'm referring to this UX status bar spec as my guide: https://mozilla.box.com/s/i31qf645rt6du79du5p3 

While this spec does not cover lock screen - it does highlight status bar real estate issues. To confirm, this patch is ONLY for lock screen - correct? While we all agree the importance of showing % of battery charge has user value, there are ux concerns. This proposed solution is introducing the percentage of charge in the status bar in a specific location and then removing it from the unlocked screen (ux spec indicates lack of space). As a user, when I charge my phone, "Why is the % shown on one screen and then not on another?" Based on this inconsistency in user experience, I'd like to discuss this bug with our sysfe ux team. Timing wise, it'll have to wait until Monday (as most everyone is out on holiday this week).

As mentioned above in comment 6, please see this bug https://bugzilla.mozilla.org/show_bug.cgi?id=810500  -  specifically, Comment 28

Apologies for the ui-review delay and again, thanks for your patience.

Comment 27

[Zibi Braniecki [:zbraniecki][:gandalf]]

(In reply to katieC from comment #26)

> While this spec does not cover lock screen - it does highlight status bar
> real estate issues. To confirm, this patch is ONLY for lock screen -
> correct? While we all agree the importance of showing % of battery charge
> has user value, there are ux concerns.

Absolutely. It has also low priority, so in case of any competition for real estate, the label will disappear.

> This proposed solution is introducing
> the percentage of charge in the status bar in a specific location and then
> removing it from the unlocked screen (ux spec indicates lack of space). As a
> user, when I charge my phone, "Why is the % shown on one screen and then not
> on another?" Based on this inconsistency in user experience, I'd like to
> discuss this bug with our sysfe ux team.

Sure. Let's wait. I'd love to get this for 2.2, but we have almost two weeks and the patch is ready :)

Regarding your concern. I don't have any data on that, but it feels right to me. While charging my phone is usually locked and in that state the percent of charge is the most important thing about the current "action" I'm doing on my phone (charging).

When I'm unlocking my phone, it means that I'm going to use it. The charging state becomes less important than other actions I'm going to do.

Since it's the first bug in a series and we're taking time to evaluate it (yay!) I'd like to present the bigger picture I have in mind.

To complement this feature I would like to propose two other features to create a cohesive way of learning about battery state of the phone (those bugs don't have patches yet):
 - [Bug 1115920] When the phone is unlocked, I would like to be able open my notification bar to see the current charge regardless of if the phone is currently charging. 
 - [Bug 1115921] When the phone is locked and charging, I'd like to present the remaining charging time to the user in a form of "Charging (53 minutes until full)" (see screenshot in the bug).

That's compatible with Android behavior and creates a UX in which, while I'm using the phone the battery level is not cluttering the screen, but provides me an easy way to learn my battery level (open notification bar), and when I'm not using the phone and charging it, I just turn on the screen to know the charging status.

This would, in my opinion, drastically improve users ability to make informed decisions regarding charging their phone, and manage their battery hold expectations.

When you're discussing this with your team, please, bring up those bugs and CC people to them so that we can discuss them separately.

> Timing wise, it'll have to wait until Monday (as most everyone is out on holiday this week).
> 
> As mentioned above in comment 6, please see this bug
> https://bugzilla.mozilla.org/show_bug.cgi?id=810500  -  specifically,
> Comment 28

Yeah, this label could be used to show in warning scenarios as well (I believe Windows Phone and Android do that).

Comment 28

[Zibi Braniecki [:zbraniecki][:gandalf]]

Any update on that Katie?

Comment 29

[katieC]

Hey Zibi, thanks for your patience. 

We chatted today about this is our UX sync. It was agreed that if the visual team (NI'ing Eric, who will connect with Amy) can easily & quickly (asap for Jan 12 deadline) find a way to add battery info on the lock screen (including Bug 1115921) then they'll connect with you and send a spec. However, The lock screen has important considerations (such as notifications) that may impact placement/positioning and requires thorough analysis of available real estate.

As for discussion of the proposed feature : Notification Tray [Bug 1115920], we did discuss, but concluded that as we are on feature freeze for this release, it will have to hold, but has been noted. :)

Comment 30

[Zibi Braniecki [:zbraniecki][:gandalf]]

(In reply to katieC from comment #29)
> We chatted today about this is our UX sync. It was agreed that if the visual
> team (NI'ing Eric, who will connect with Amy) can easily & quickly (asap for
> Jan 12 deadline) find a way to add battery info on the lock screen
> (including Bug 1115921) then they'll connect with you and send a spec.
> However, The lock screen has important considerations (such as
> notifications) that may impact placement/positioning and requires thorough
> analysis of available real estate.

Sweet.

> As for discussion of the proposed feature : Notification Tray [Bug 1115920],
> we did discuss, but concluded that as we are on feature freeze for this
> release, it will have to hold, but has been noted. :)

Sure. I didn't plan to work on that in time for 2.2.

Comment 31

[Eric Pang [:epang] UX]

(In reply to Zibi Braniecki [:gandalf] from comment #30)
> (In reply to katieC from comment #29)
> > We chatted today about this is our UX sync. It was agreed that if the visual
> > team (NI'ing Eric, who will connect with Amy) can easily & quickly (asap for
> > Jan 12 deadline) find a way to add battery info on the lock screen
> > (including Bug 1115921) then they'll connect with you and send a spec.
> > However, The lock screen has important considerations (such as
> > notifications) that may impact placement/positioning and requires thorough
> > analysis of available real estate.
> 
> Sweet.
> 
> > As for discussion of the proposed feature : Notification Tray [Bug 1115920],
> > we did discuss, but concluded that as we are on feature freeze for this
> > release, it will have to hold, but has been noted. :)
> 
> Sure. I didn't plan to work on that in time for 2.2.

Hi Zibi,

Just wanted to let you know that I've added a spec in bug 1115921.

Let me know if you have any questions!

Comment 32

[Zibi Braniecki [:zbraniecki][:gandalf]]

Update here.

UX team reviewed the proposal and decided to display battery status on the lockscreen instead of statusbar. This is covered by bug 1115921.

If we'll get back to the status bar concept I will reopen this bug.

Comment 33

[GitHub Autolander Bot]

Attachment: [PullReq] zbraniecki:1115921-show-charging-time-on-lockscreen to mozilla-b2g:master

Comment 34

[Francesco Lodolo [:flod]]

I don't think was this supposed to autoland?

Comment 35

[Zibi Braniecki [:zbraniecki][:gandalf]]

It did not autoland. It was a wrong title in the PR for bug 1115921.

Comment 36

[Kevin Grandon :kgrandon]

Yeah, I need to figure out what to do with autolander in this case. Thanks for the datapoint.