1015837 - [System] Sound toast visual refresh

Status: VERIFIED FIXED

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

Description

[Dominic Kuo [:dkuo]]

We are implementing the sound ux update in bug 991026, and one of the major improvements is the interaction between the sound toast and the hardware volumeup/volumdown buttons.

While the development is happening in bug 937937, we also need the visual refresh for the sound toast to align the new sound ux with the look and feel, and this bug is filed for the style assets.

Comment 1

[Dominic Kuo [:dkuo]]

Fang,

Sorry to bother you during the workweek, just want to know the progress of the sound toast visual update, if you have the assets ready, feel free to attach here and let us know, thanks!

Comment 2

[Fang Shih [:fang]]

Hey Dominic,

Sorry for the delay icons. We are currently in the review progress. I'll attach it right after the assets are approved. Thanks!!

Comment 3

[Fang Shih [:fang]]

Attachment: volumeKey_icons.zip

Attached is the volume key spec. Thanks!

Comment 4

[Dominic Kuo [:dkuo]]

Thanks! working on it.

Comment 5

[Dominic Kuo [:dkuo]]

Attachment: patch

Comment 6

[Dominic Kuo [:dkuo]]

Attachment: sound toast visual refresh - screenshots

Hey Fang,

Would you please review the ui part first while I am working on the integration tests? thanks!

Comment 7

[Fang Shih [:fang]]

Comment on attachment 8438170 [details]
sound toast visual refresh - screenshots

Hi Dominic,

They look great!! 
Just wonder if we can move the volume matter 0.5 rem to the left a little, more close to the icon. Hoping to make the icon and the volume matter both stays in the middle of the screen, so the space on both sides can be equal align. 
Thanks!!!

Comment 8

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

One small question: is it intentional to use the icon for content channel? For me it's still hard to know which channel we are on. But other icons looks great.

Comment 9

[Dominic Kuo [:dkuo]]

(In reply to Alive Kuo [:alive][NEEDINFO!] from comment #8)
> One small question: is it intentional to use the icon for content channel?
> For me it's still hard to know which channel we are on. But other icons
> looks great.

Let's also have Omega to comment on this, thanks.

Comment 10

[Omega Feng [:Omega] [:馮於懋]]

(In reply to Alive Kuo [:alive][NEEDINFO!] from comment #8)
> One small question: is it intentional to use the icon for content channel?
> For me it's still hard to know which channel we are on. But other icons
> looks great.

Hi Alive,
You mean Media icon? Yes, the speaker icon is a typical one for that meaning. Android and iOS also use the similar ones.

Comment 11

[Dominic Kuo [:dkuo]]

(In reply to Omega Feng [:Omega] from comment #10)
> (In reply to Alive Kuo [:alive][NEEDINFO!] from comment #8)
> > One small question: is it intentional to use the icon for content channel?
> > For me it's still hard to know which channel we are on. But other icons
> > looks great.
> 
> Hi Alive,
> You mean Media icon? Yes, the speaker icon is a typical one for that
> meaning. Android and iOS also use the similar ones.

One thing it worthy to mention that in Settings -> sound panel, the icon for Media channel is also sync with the Media volume toast, probably this could also convince Alive :)

Comment 12

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

(In reply to Omega Feng [:Omega] from comment #10)
> (In reply to Alive Kuo [:alive][NEEDINFO!] from comment #8)
> > One small question: is it intentional to use the icon for content channel?
> > For me it's still hard to know which channel we are on. But other icons
> > looks great.
> 
> Hi Alive,
> You mean Media icon? Yes, the speaker icon is a typical one for that
> meaning. Android and iOS also use the similar ones.

Thanks for clarifying.
BTW the notification channel and telephony looks really similar :P

Dominic please make sure the toast doesn't break in landscape mode.

Comment 13

[Dominic Kuo [:dkuo]]

Attachment: sound toast visual refresh(updated with landscape included) - screenshots

Hi Fang,

Would you please take a look on the screenshots again? and thanks to Alive I have also added the landscape screenshots, let me know if we still have issues, thanks.

Comment 14

[Dominic Kuo [:dkuo]]

Comment on attachment 8437595 [details] [review]
patch

Alive,

I have wrapped up the wip and added/modified the necessary test cases, also removed the unused styles and images, would you please review the patch? thanks.

Comment 15

[Fang Shih [:fang]]

Comment on attachment 8438346 [details]
sound toast visual refresh(updated with landscape included) - screenshots

Alignment looks good! Thanks a lot! :-)

Comment 16

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

Comment on attachment 8437595 [details] [review]
patch

Thanks!

Comment 17

[Dominic Kuo [:dkuo]]

Thanks everyone!

Landed on master: df52b43be40a02b3c25da6672c5a8d1123ec541b

Comment 18

[Dominic Kuo [:dkuo]]

Comment on attachment 8437595 [details] [review]
patch

NOTE: Please see https://wiki.mozilla.org/Release_Management/B2G_Landing to better understand the B2G approval process and landings.

[Approval Request Comment]
[Bug caused by] (feature/regressing bug #): feature from the sound ux update, bug 991026.
[User impact] if declined: no
[Testing completed]: yes, with newly added integration tests on sound manager in system app.
[Risk to taking this patch] (and alternatives if risky): low, the changes are only in html, css and images files, no JS.
[String changes made]: none

This is the last bug for the sound ux update in bug 991026, we already fixed the logic parts and the visual refresh(this bug) is the last piece, so requesting for approval to land on v2.0, thanks.

Comment 19

[bhavana bajaj [:bajaj]]

Comment on attachment 8437595 [details] [review]
patch

low risk css/image changes, completes the visual refresh look for sound, approving to land on 2.0

Comment 20

[Ryan VanderMeulen [:RyanVM]]

v2.0: https://github.com/mozilla-b2g/gaia/commit/db510804ade17b355e73790aa120ec084b025cec

Comment 22

[Coler]

This issue has been verified successfully on Flame2.0&2.1, we verify it with Comment 14 and Comment 15.
Reproducing rate: 0/5
See attachment: Verify_Flame_audioicon.mp4

Flame 2.0 build version:
Gaia-Rev        8d1e868864c8a8f1e037685f0656d1da70d08c06
Gecko-Rev       https://hg.mozilla.org/releases/mozilla-b2g32_v2_0/rev/c756bd8bf3c3
Build-ID        20141127000203
Version         32.0

Flame2.1 build version:
Gaia-Rev        5372b675e018b6aac97d95ff5db8d4bd16addb9b
Gecko-Rev       https://hg.mozilla.org/releases/mozilla-b2g34_v2_1/rev/f34377ae402b
Build-ID        20141127001201
Version         34.0

Comment 23

[Coler]

Attachment: Verify_Flame_audioicon.MP4