Closed Bug 1041916 Opened 10 years ago Closed 10 years ago

Investigate status bar icon color changes for themes

Categories

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

Product:
Firefox OS Graveyard
Component:
Gaia::System
Platform:
ARM
Gonk (Firefox OS)
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(feature-b2g:2.1)

Status:
RESOLVED FIXED
Milestone:
2.1 S2 (15aug)
Project Flags:
feature-b2g 2.1

People

(Reporter: mikehenrty, Assigned: aus)

References

Details

(Keywords: uiwanted, Whiteboard: [systemsfe][tako])

Attachments

(2 files, 2 obsolete files)

1041916_STATUSBAR_ICONS_SVG.zip
(deleted), application/zip
Details
Pull Request - Update gaia-icons font with new icons required for status bar
(deleted), text/x-github-pull-request
wilsonpage
: review+
Details 
In bug 1041625, we need to customize apps with different status bar colors. The problem is that icons are currently white, and these will be hard to see with certain status bar colors. We need to either:

1.) Use Icon Fonts
2.) Use SVG
3.) Have two different icon sets, one dark one light that we can transition between depending on the current status bar color
Aus, can do some sleuthing work for options 1 and 2 above? Ideally we would use Icon Fonts, so is there anything stopping us?
Flags: needinfo?(aus)
feature-b2g: --- → 2.1
Whiteboard: [systemsfe] → [systemsfe][tako]
Yep yep! Going to look into this today. :)
Flags: needinfo?(aus)
Assignee: mhenretty → aus
Status: NEW → ASSIGNED
From the Icon Fonts in FxOS Thread: "

We are using icon-fonts in some of the new web-component based building-blocks examples. I have created a gaia-icons repo so that our components can explicitly depend on these icons. Inside this repo we have all the source SVGs inside `images/`. A grunt task called grunt-webfont converts all these SVGs into a single icon-font. To add new icons, you simple have to drop new SVGs into the `images/` directory.

Icon fonts are perfect for our themeability requirements as they can easily by styled with CSS. AFAIK SVGs cannot be colored/styled with CSS alone (but I don't know that much about SVG).

We've been using icon-fonts in Camera for a while now and so far it's been great. I plan to move Camera to pull its icon-font from gaia-icons so that we can begin to move to toward a central icons store.

IMO SVG and icon-fonts will always serve slightly difference use cases. But for simple icons, icon-fonts have always got the job done; allowing me to focus on the more important stuff :p

W.

" -- Repo is here: https://github.com/gaia-components/gaia-icons
Here's a list of what we have and don't have in the icon font:

'time' - No. Need AM/PM.

'battery' - Yes, but only 3 levels. We probably need more.

'wifi' - Yes, with all levels of signal.

'flight-mode' - Yes.

'connections' - No. Need 4G LTE(?), 3.5G, 3G, H, E, 1x.
 - this is a grouping of the SIM info. this includes the signal bar, the sim number, and the data connection type (3G, H, E, ect).

'headphones' - No. Need Headphones, Headset.

'bluetooth-headphones'- No. Need Headphones, Headset.

'bluetooth-transfering' - No.
 - indicates bluetooth transfer in progress

'tethering' - Yes.

'alarm' - Yes.

'bluetooth' - Yes.
 - indicates if bluetooth is on at all

'mute' - Yes. Speakerphone, Handset and Speaker.

'recording' - Yes.

'sms' - Yes.
 - not sure what is the purpose of this, right now it appears to be unused

'geolocation' - Yes.
 - indicates some app is currently using geolocation api

'usb' - Yes.

'call-forwadings' - No.
 - one for each sim, indicates call fowarding is setup for that sim

'playing' - Yes.
 - media is playing

'nfc' - Yes.
 - indicates nfc is turned on

'system-downloads' - Yes. Need a few different states to animate properly.
 - animation indicating we are downloading

'network-activity' - Yes. Need a few different states to animate properly.

'label' - No?
 - carrier and date label, not sure when this is used currently

'emergency-cb-notification' - No?
 - when you make an emergency call, you go into emergency callback mode so the network operator can call you or locate your device. this is the status icon for that

'notification' - Yes.

'signal-strength' - Yes. But need more states. Currently only have 100%. Need 75, 50, 25 and 0.
Who would be able to help creating the rest of the icons for the font? :swilkes, can you point me to the right person? :)
Flags: needinfo?(swilkes)
Keywords: uiwanted
The current iteration of the icons we use can be found here: https://github.com/mozilla-b2g/gaia/tree/master/apps/system/style/statusbar/images
Flagging Patryk on fonts to see if he knows who can help.
Flags: needinfo?(swilkes) → needinfo?(padamczyk)
Eric Pang owns that status bar. 
Eric, if you need help please work with Hung.
Flags: needinfo?(padamczyk) → needinfo?(epang)
Hung's going to help out with the icons.

Aus, what format, size, etc do you need the assets in?  Can you work with Hung so he knows what to provide?

Thanks!
Flags: needinfo?(hnguyen)
Flags: needinfo?(epang)
Flags: needinfo?(aus)
Good question! Based on this file they should be 30x30: https://github.com/gaia-components/gaia-icons/blob/master/images/accessibility.svg

And, we need to have all the icons, as present here: https://github.com/mozilla-b2g/gaia/tree/master/apps/system/style/statusbar/images (including what's in the sprite sheets).

I don't think we need the on/off states though, we can set the opacity on the font (which is what we seem to be doing with the current icons in use in the font).

Let me know if there's anything else I can help with, I'm auswerk on #gaia :)
Flags: needinfo?(aus)
Quick status update here, the icons are in the works and I've gotten some more pro tips from Wilson on usage and best practices. We do have some low risk performance issues associated with initial loading of the font but there are some known ways to work around them and there are patches in the works to permanently fix the issues.

Once I have the new icons I'll be able to update the font and we'll be able to say this task is done. :)
Attached file 1041916_STATUSBAR_ICONS_SVG.zip (obsolete) (deleted) — 
Hi Aus

Attached you'll find the following: 

1. All status bar notification icons converted to SVG at 30x30 PX. 
2. A guide explaining color usage, building special icons and opacity settings. 

Please let me know once you have something implemented and let me know if you have any questions!

Thanks
Hung
Flags: needinfo?(hnguyen)
Awesome! Thanks! Looks like we should be able to land the new icons for the icon-font this week then! I'll let you know if anything comes up but the source files look correct so it should be trivial. :)
Target Milestone: 2.1 S1 (1aug) → 2.1 S2 (15aug)
Hung, it looks like the roaming icon should probably just be the triangle instead of also having the full signal bars present, can you update just that icon and attach it to this bug? The others look visually correct to me.
Flags: needinfo?(hnguyen)
Attached file 1041916_STATUSBAR_ICONS_SVG.zip (obsolete) (deleted) — 
Thanks Aus - I've updated the roaming icon in the latest set. 

Can you please send me a screen cap of the implemented icon fonts once you're done? I have a small concern with the sharpness of them after scaling. 

Cheers!
Attachment #8466521 - Attachment is obsolete: true
Flags: needinfo?(hnguyen) → needinfo?(aus)
Hung, I would've imagined the roaming icon to already be positioned like the no signal icon is in it's canvas. 

Right now we'd have to render the roaming icon at a different font size and try and position it on top of the signal strength. Whereas adding the no signal icon is just rendering the two icons exactly on top of each other. Does this make sense?

Work to start using these icons will be in a different bug which I'll make sure you're CC'd on. :)
Flags: needinfo?(aus) → needinfo?(hnguyen)
Attached file 1041916_STATUSBAR_ICONS_SVG.zip (deleted) — 
My apologies Aus, for some reason, I thought you meant the roaming icon was to be replaced with just the triangle.

I've updated the assets with the triangle in the correct location so it can just be dropped onto of the signal bar. 

Let me know if you need anything else. 

Cheers!
Attachment #8467788 - Attachment is obsolete: true
Flags: needinfo?(hnguyen)
It's my first time trying to update an icon font, I hope it's not too terrible. :)
Attachment #8469703 - Flags: review?(wilsonpage)
Comment on attachment 8469703 [details]
Pull Request - Update gaia-icons font with new icons required for status bar

Nice, we're almost there! Need to address:

- Duplicate 'airplane' and 'airplane-mode'. Please remove 'airplane-mode'.
- Duplicate 'alarm' and 'alarm-full'. Please choose favourite.
- `battery-00.svg` looks broken. Seems there is a stray rectangle stretching the canvas too big.
- Please remove previous `battery-` icons in favour of your more complete set.
- Duplicate 'notification' and 'notifications'. Please choose the most appropriate one.
- 'recording' icon appears to be a simple circle. If this can be achieved with CSS, is it required?
- 'signal-0' appears to be the same icon as 'close', is it required?
- 'sms' icon is duplicate of 'messaging' icon. Remove old 'sms.svg' if not required.
- Are we happy for the change to 'usb.svg' to replace all the old 'usb.svg' everywhere?
- 'mute.svg' icon changed from microphone to speaker. We cool with this?
- Rename 'emergency-call' to 'call-emergency'
- The following svg files were changed but appear visually the same. This is dangerous as some apps will already depend on existing icon size and canvas position:, is there good reason for this?
    - play.svg
    - vibrate.svg
    - tethering.svg
    - nfc.svg
    - bluetooth.svg
   
Pleased you were able to build :)
Attachment #8469703 - Flags: review?(wilsonpage)
Hung, could you answer these questions?

- Are we happy for the change to 'usb.svg' to replace all the old 'usb.svg' everywhere?
- 'mute.svg' icon changed from microphone to speaker. We cool with this?

Also, it looks like the export for battery-000 is a little funky?
- `battery-00.svg` looks broken. Seems there is a stray rectangle stretching the canvas too big.

Thanks!
Flags: needinfo?(hnguyen)
(In reply to Wilson Page [:wilsonpage] from comment #19)
> Comment on attachment 8469703 [details]
> Pull Request - Update gaia-icons font with new icons required for status bar
> 
> Nice, we're almost there! Need to address:
> 
> - Duplicate 'airplane' and 'airplane-mode'. Please remove 'airplane-mode'.

Done.

> - Duplicate 'alarm' and 'alarm-full'. Please choose favourite.

Done, kept alarm.svg.

> - `battery-00.svg` looks broken. Seems there is a stray rectangle stretching
> the canvas too big.

Hopefully Hung can give me an svg source for which this doesn't happen. Stay tuned...

> - Please remove previous `battery-` icons in favour of your more complete
> set.

Done.

> - Duplicate 'notification' and 'notifications'. Please choose the most
> appropriate one.

Done.

> - 'recording' icon appears to be a simple circle. If this can be achieved
> with CSS, is it required?

Indeed, seems like we don't need this. I will remove it for now.

> - 'signal-0' appears to be the same icon as 'close', is it required?

We will require signal-0 to overlay on top of signal-5 (it's already positioned for this).

> - 'sms' icon is duplicate of 'messaging' icon. Remove old 'sms.svg' if not
> required.

Removed sms.svg.

> - Are we happy for the change to 'usb.svg' to replace all the old 'usb.svg'
> everywhere?

Asked Hung to provide an answer there.

> - 'mute.svg' icon changed from microphone to speaker. We cool with this?

Ditto.

> - Rename 'emergency-call' to 'call-emergency'

Done. I also renamed emergency-callback to callback-emergency so that all call related things end-up grouped together.

> - The following svg files were changed but appear visually the same. This is
> dangerous as some apps will already depend on existing icon size and canvas
> position:, is there good reason for this?
>     - play.svg
>     - vibrate.svg
>     - tethering.svg
>     - nfc.svg
>     - bluetooth.svg

There's no good reason for this. :) I reverted back to the original versions.

When I get answers from Hung I'll make one more update to the PR.
(In reply to Ghislain Aus Lacroix [:aus] from comment #20)
> Also, it looks like the export for battery-000 is a little funky?
> - `battery-00.svg` looks broken. Seems there is a stray rectangle stretching
> the canvas too big.

I was able to fix this by editing the svg source file and remove the extra rects and removing one level of nested <g> (since we had <g><g><path> instead of <g><path>).
Comment on attachment 8469703 [details]
Pull Request - Update gaia-icons font with new icons required for status bar

Looking great! Now waiting on answers from Hung only.
Attachment #8469703 - Flags: review?(wilsonpage)
(In reply to Ghislain Aus Lacroix [:aus] from comment #22)
> I was able to fix this by editing the svg source file and remove the extra
> rects and removing one level of nested <g> (since we had <g><g><path>
> instead of <g><path>).

Have you tried https://github.com/svg/svgo? It does a great job in reducing the size of SVG (using techniques like merging paths...) while maintaining the same appearance.
I'm not familiar with icon fonts, but I guess that can have an impact on the generated font size too.
(In reply to gmarty from comment #24)
> Have you tried https://github.com/svg/svgo? It does a great job in reducing
> the size of SVG (using techniques like merging paths...) while maintaining
> the same appearance.
> I'm not familiar with icon fonts, but I guess that can have an impact on the
> generated font size too.

This looks great! I'll see if we can use it to simplify our SVGs. We are already using Grunt to create the font, so we could add this as a Grunt task.
Comment on attachment 8469703 [details]
Pull Request - Update gaia-icons font with new icons required for status bar

Looks good now, I'll give this a conditional r+:

- 'wifi-5' now looks redundant, shall we remove?
- Curious to know why 'battery-charging' is designed to be overlaid but 'battery-uknown' is an entire icon. Should we be consistent here?
- Full log of what was Added, Removed and Changed to add to Github Release changelog
Attachment #8469703 - Flags: review?(wilsonpage) → review+
(In reply to Ghislain Aus Lacroix [:aus] from comment #20)
> Hung, could you answer these questions?
> 
> - Are we happy for the change to 'usb.svg' to replace all the old 'usb.svg'
> everywhere?
> - 'mute.svg' icon changed from microphone to speaker. We cool with this?
> 
> Also, it looks like the export for battery-000 is a little funky?
> - `battery-00.svg` looks broken. Seems there is a stray rectangle stretching
> the canvas too big.
> 
> Thanks!

Sorry for delay.

Regarding the mute and USB icons, they were updated by Eric P. so I believe its the direction moving forward. 

I believe Aus has fixed the battery issue.
Flags: needinfo?(hnguyen)
> - Curious to know why 'battery-charging' is designed to be overlaid but
> 'battery-uknown' is an entire icon. Should we be consistent here?

Hey Wilson, 

I'll try to answer this but due to the nature of the charging state (it has a transparent underlay plus the charging icon is a different color), I thought it would be best to reuse and combine elements. You can see what I mean by looking at the guide in the zip file. 

The unknown state on the other hand is a single element with no opacity or color changes.
No longer blocks: 1041911
Cool that makes sense Hung. I'm happy to merge this as soon as we have the other changes in comment 26 done :)
Blocks: 1038723
(In reply to Wilson Page [:wilsonpage] from comment #26)
> Comment on attachment 8469703 [details]
> Pull Request - Update gaia-icons font with new icons required for status bar
> 
> Looks good now, I'll give this a conditional r+:
> 
> - 'wifi-5' now looks redundant, shall we remove?

It sure does, off with it's head!

> - Curious to know why 'battery-charging' is designed to be overlaid but
> 'battery-uknown' is an entire icon. Should we be consistent here?

We're all in agreement here. :) Thanks for the reply Hung.

> - Full log of what was Added, Removed and Changed to add to Github Release
> changelog

Yep, I can make one of those. Do you have a template or format or something you like to follow?

I've updated the PR with the last set of requested changes. We're ready to merge I think.
Comment on attachment 8469703 [details]
Pull Request - Update gaia-icons font with new icons required for status bar

Landed and 'v0.5.0' version stamped: https://github.com/gaia-components/gaia-icons/releases/tag/v0.5.0
New icons can be viewed in live demo [1].

[1] http://gaia-components.github.io/gaia-icons/
We'll need an issue to update gaia/shared/elements/gaia-icons when we're ready.
Changelog
---------

Added
-----

2g, 3g, 4g - connectivity indicators
edge, gsm, hspa, hspa-plus - data connectivity indicators

battery-00..battery-10 - battery charge levels
battery-charging - battery charging overlay
battery-unknown - battery state unknown

bluetooth-a2dp - bluetooth audio
bluetooth-transfer - bluetooth file transfer

call-emergency - emergency call
call-forwarding - call forwarding state
callback-emergency - emergency callback

gps - gps state

headphones - headphones connected state

no-sim - no sim card present

signal-1..signal-5 - signal strength levels
signal-roaming - roaming state


Updated
-------

alarm - new design
mute - new design
notifications - new design
usb - new design
wifi-1..wifi-4  - new design


Removed
-------

alarm-full - in favor of updated alarm icon
battery-low, battery-very-low, battery - in favor of new battery icons
sms - removed in favor of messages icon
wifi-5 - redundant because of new wifi icons

Font files updates and example page.
Depends on: 1054005
I filed a follow-up to land these icons into shared elements when we're ready to do that. For now, we can install the font locally into the system app instead -- "bower install gaia-components/gaia-icons".

Marking this as resolved! We have the new fonts in the main gaia-icons repo, new font files, the works!
Status: ASSIGNED → RESOLVED
Closed: 10 years ago
No longer depends on: 1054005
Resolution: --- → FIXED
I was able to verify the icons on Comment 34, EXCEPT the following due to limitations:

2g, 3g, 4g - connectivity indicators
edge, gsm, hspa, hspa-plus - data connectivity indicators
battery-unknown - battery state unknown
bluetooth-transfer - bluetooth file transfer >> Unable to verify on 2.2 due to  bug 1065999. Cannot transfer files via bluetooth.
call-emergency - emergency call
callback-emergency - emergency callback

----------------------------------------------
Also verified the status bar icon color changes according to themes on Flame 2.1 and Flame 2.2:

Flame 2.2 KitKat Base (319mb)(Full Flash)

Environmental Variables:
Device: Flame 2.2 Master
BuildID: 20141007040205
Gaia: 83de447d9ae9a59459d7a445f9348a254c661850
Gecko: 9ee9e193fc48
Gonk: 2c909e821d107d414f851e267dedcd7aae2cebf
Version: 35.0a1 (2.2 Master)
Firmware: V180
User Agent: Mozilla/5.0 (Mobile; rv:35.0) Gecko/35.0 Firefox/35.0

Flame 2.1 KitKat Base (319mb)(Full Flash)

Environmental Variables:
Device: Flame 2.1
BuildID: 20141007000203
Gaia: 7f738edf66b9298bceef8a4981d05d04fd04e540
Gecko: b9d04c58580a
Gonk: 2c909e821d107d414f851e267dedcd7aae2cebf
Version: 34.0a2 (2.1)
Firmware: V180
User Agent: Mozilla/5.0 (Mobile; rv:34.0) Gecko/34.0 Firefox/34.0
QA Whiteboard: [QAnalyst-Triage?][failed-verification]
Flags: needinfo?(ktucker)
We're unable to verify the icons listed above, and would need someone else to verify.
QA Whiteboard: [QAnalyst-Triage?][failed-verification] → [QAnalyst-Triage?][QAnalyst-verify-]
QA Whiteboard: [QAnalyst-Triage?][QAnalyst-verify-] → [QAnalyst-Triage+][QAnalyst-verify-]
Flags: needinfo?(ktucker)
(In reply to Yeojin Chung [:YeojinC] from comment #36)
> I was able to verify the icons on Comment 34, EXCEPT the following due to
> limitations:
> 
> 2g, 3g, 4g - connectivity indicators
> edge, gsm, hspa, hspa-plus - data connectivity indicators
> battery-unknown - battery state unknown
> bluetooth-transfer - bluetooth file transfer >> Unable to verify on 2.2 due
> to  bug 1065999. Cannot transfer files via bluetooth.
> call-emergency - emergency call
> callback-emergency - emergency callback
> 

Yeojin, can you try again?  bug 1065999 landed a day ago.   Also, some of these should appear for your SIM like edge, hspa+.  you might need a different SIM card.
Flags: needinfo?(ychung)
> Yeojin, can you try again?  bug 1065999 landed a day ago.   Also, some of
> these should appear for your SIM like edge, hspa+.  you might need a
> different SIM card.

I was able to verify bluetooth-transfer(2.2), edge, and hspa. So here's the updated list that needs to be checked outside of Q Analysts:

2g, 3g, 4g - connectivity indicators
gsm, hspa-plus - data connectivity indicators
battery-unknown - battery state unknown
call-emergency - emergency call
callback-emergency - emergency callback
QA Whiteboard: [QAnalyst-Triage+][QAnalyst-verify-] → [QAnalyst-Triage?][QAnalyst-verify-]
Flags: needinfo?(ychung) → needinfo?(ktucker)
Also verified 3G icon. Here's the updated list:

2g, 4g - connectivity indicators
gsm, hspa-plus - data connectivity indicators
battery-unknown - battery state unknown
call-emergency - emergency call
callback-emergency - emergency callback
QA Whiteboard: [QAnalyst-Triage?][QAnalyst-verify-] → [QAnalyst-Triage+][QAnalyst-verify-]
Flags: needinfo?(ktucker)
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: