1063032 - [Active Call] Visual Refinements for attention window

Status: RESOLVED WONTFIX

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

Description

[Eric Pang [:epang] UX]

Hi Alive,

Can we make a few visual refinments to the attention window to be consistent with the notifications implememtation? 

1. Update the ambient indicator to be 0.2 rem (0.3 rem on flame)
2. Update toast to be 5rem in height?

Link to spec
https://mozilla.box.com/s/kkhu56gz8tzr1z7y1sj0

Please feel free to redirect and/or let me know if you have any questions.

Thanks!

Comment 1

[Eric Pang [:epang] UX]

(In reply to Eric Pang [:epang] from comment #0)
> Hi Alive,
> 
> Can we make a few visual refinments to the attention window to be consistent
> with the notifications implememtation? 
> 
> 1. Update the ambient indicator to be 0.2 rem (0.3 rem on flame)
> 2. Update toast to be 5rem in height?
> 
> Link to spec
> https://mozilla.box.com/s/kkhu56gz8tzr1z7y1sj0
> 
> Please feel free to redirect and/or let me know if you have any questions.
> 
> Thanks!

Hi Alive I just wanted to add one item to the list.  Is it possible to use the dialer app icon in the toast, like in the spec?

Comment 2

[Eric Pang [:epang] UX]

Hi Alive, have you had a chance to work on this bug?

Comment 3

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

(In reply to Eric Pang [:epang] from comment #2)
> Hi Alive, have you had a chance to work on this bug?

This is a callscreen app change. Etienne, are you able to find someone to work on it?

Comment 4

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

(In reply to Eric Pang [:epang] from comment #0)
> Hi Alive,
> 
> Can we make a few visual refinments to the attention window to be consistent
> with the notifications implememtation? 
> 
> 1. Update the ambient indicator to be 0.2 rem (0.3 rem on flame)
> 2. Update toast to be 5rem in height?
> 
> Link to spec
> https://mozilla.box.com/s/kkhu56gz8tzr1z7y1sj0
> 
> Please feel free to redirect and/or let me know if you have any questions.
> 
> Thanks!

OK so the height change is also a callscreen css work, but the indicator is something trivial. I could work on it.

Comment 5

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

(In reply to Alive Kuo [:alive][NEEDINFO!] from comment #4)
> (In reply to Eric Pang [:epang] from comment #0)
> > Hi Alive,
> > 
> > Can we make a few visual refinments to the attention window to be consistent
> > with the notifications implememtation? 
> > 
> > 1. Update the ambient indicator to be 0.2 rem (0.3 rem on flame)
> > 2. Update toast to be 5rem in height?
> > 
> > Link to spec
> > https://mozilla.box.com/s/kkhu56gz8tzr1z7y1sj0
> > 
> > Please feel free to redirect and/or let me know if you have any questions.
> > 
> > Thanks!
> 
> OK so the height change is also a callscreen css work, but the indicator is
> something trivial. I could work on it.

I will implement indicator height change in bug 1072616, FYI.

Comment 6

[Etienne Segonzac (:etienne)]

Mainly callscreen work left here (icon and all) the height change of the toaster is trivial on the system app side but we need to bundle it in a patch that updates the minimized version of the callscreen too, to prevent awkwardness while only one part is landed.

Rik feel free to redirect but I'm pretty sure this would be a very quick patch for you!

Comment 7

[Anthony Ricaud (:rik)]

Attachment: WIP patch

Here is a WIP patch. I won't have bandwidth to make it land though. So forwarding to Germán who can take it from there.

Comment 8

[Germán Toro del Valle (:gtorodelvalle)]

Attachment: notification-toast-screenshot

Comment 9

[Germán Toro del Valle (:gtorodelvalle)]

Attachment: minimized-call-screen-5rem-screenshot

Comment 10

[Germán Toro del Valle (:gtorodelvalle)]

Attachment: minimized-call-screen-5.2rem-screenshot

Comment 11

[Germán Toro del Valle (:gtorodelvalle)]

Hi guys! I'm taking this bug and I have some doubts I would like to share with you. Anyhow, I guess they are mostly for Eric:
  1. Regarding the showing of the Dialer icon when the call screen is minimized, the information we are currently showing is the one depicted in attachment 8516025 [details]. Are you suggesting to include this icon on the left hand side moving all the information to the right 5.6rem as indicated in the spec for the notification toast (https://mozilla.box.com/s/kkhu56gz8tzr1z7y1sj0)? :)
  2. I noticed that the height of the notification toast is 5.2rem and not 5rem (see https://github.com/mozilla-b2g/gaia/blob/master/apps/system/style/notifications/notifications.css#L46) to make space for the ambient indicator (0.2rem). Although not very noticeable, if you compare the look of the notification toast (attachment 8516023 [details]) with the minimized call screen using a 5rem height (attachment 8516024 [details]) and a 5.2rem one (attachment 8516025 [details]), you'll notice the difference. Just wanted to confirm with you that we should also use a 5.2rem height for the call screen when minimized.

I am also need-infoing Carol so she is informed of this update and also in case you want to consider providing the user with additional information now that there's more vertical available space (mainly for the case when there is a contact associated to the called phone number, for example) ;)

Comment 12

[Carol Huang [:Carol]]

Hey Germán,
Thanks for letting me know this change!

Comment 13

[Eric Pang [:epang] UX]

(In reply to Germán Toro del Valle from comment #11)
> Hi guys! I'm taking this bug and I have some doubts I would like to share
> with you. Anyhow, I guess they are mostly for Eric:

Hi Germán!

>   1. Regarding the showing of the Dialer icon when the call screen is
> minimized, the information we are currently showing is the one depicted in
> attachment 8516025 [details]. Are you suggesting to include this icon on the
> left hand side moving all the information to the right 5.6rem as indicated
> in the spec for the notification toast
> (https://mozilla.box.com/s/kkhu56gz8tzr1z7y1sj0)? :)

Yes, we want to update the icon (to the dialer icon instead of the arrows/phones).  We also want to update the text and left align.

Here's the new proposed text from the spec:
(more up to date spec: https://mozilla.box.com/s/b6vzr85snxplv32rpkwu)

Active Call
Name of contact (if known) / Phone (Mobile, work, personal, etc.)

If the contact information is not known we can display the phone #

The same text should be shown in the notification tray.

>   2. I noticed that the height of the notification toast is 5.2rem and not
> 5rem (see
> https://github.com/mozilla-b2g/gaia/blob/master/apps/system/style/
> notifications/notifications.css#L46) to make space for the ambient indicator
> (0.2rem). Although not very noticeable, if you compare the look of the
> notification toast (attachment 8516023 [details]) with the minimized call
> screen using a 5rem height (attachment 8516024 [details]) and a 5.2rem one
> (attachment 8516025 [details]), you'll notice the difference. Just wanted to
> confirm with you that we should also use a 5.2rem height for the call screen
> when minimized.

Both toasts should be 5 rem.  The ambient indicator should overlay the toast background (not push it down).

Let me know if you have any questions or need me to clarify!  Thanks for working on this Germán!

> 
> I am also need-infoing Carol so she is informed of this update and also in
> case you want to consider providing the user with additional information now
> that there's more vertical available space (mainly for the case when there
> is a contact associated to the called phone number, for example) ;)

Comment 14

[Germán Toro del Valle (:gtorodelvalle)]

Hi! It seems there's some issues with the WebIDE and the latest build so I am postponing this bug since using the WebIDE to check and to implement Eric's requests should be straight-forward. In fact, using today's build the WebIDE kind of works but there are issues with the telephony API to make and to receive calls :( I'll keep you posted ;)

Comment 15

[Germán Toro del Valle (:gtorodelvalle)]

Attachment: Pull request 26356

A first version to start discussing about the proposed solution ;) Thanks!

Comment 16

[Doug Sherk (:drs) (inactive)]

Comment on attachment 8526775 [details] [review]
Pull request 26356

Here are my comments from a high level:
* Rather than saving/loading the phone number formatting depending on what we're displaying to the user, I think that it would be better to have a hidden DOM node that contains the formatted text in the way that we expect the toast to show. This could then be displayed when we're showing the toast, while the fullscreen node is hidden. This is much more clear on inspection, is better for maintenance, and makes it easier to group similar functionality.
* The use of the l10n API here needs a lot of work. We should be setting l10n ID's and args instead of using `LazyL10n` and the `node.textContent = _("foo")` pattern. This would also make the previous point much easier. Perhaps we could even avoid doing the previous point, and instead just changing the l10n ID, depending on what mode we're displaying the Callscreen in. [1]
* It's great that you added so many tests here. I didn't do a thorough check, but it looks like most, if not all new functionality, is tested, so thanks for that!
* Do you have a plan for the second part of the proposed spec, where the Callscreen item in the notification tray mirrors the information displayed in the toast?

[1] My suggestion here, roughly speaking, is the following:
```locales
phoneNumber = {{ n }}
toastPhoneNumber = {{ contact }} / {{ type }}
```

```js
/**
 * on call placed
 */

/** 
 * in HTML somewhere
 * <div is="call-template" id="call-template"></div>
 */
var callNode = document.getElementById('call-template').cloneNode();
callsContainer.appendChild(callNode);
navigator.mozL10n.setAttributes(callNode, "phoneNumber", {
  n: phoneNumber,
  contact: contact,
  type: type
});

/**
 * visibility changes / show the toast
 */
window.addEventListener('visibilitychange', function() {
  if (document.hidden /* toast */ && callNode.dataset.contact) {
    callNode.dataset.l10nId = 'toastPhoneNumber';
  } else {
    callNode.dataset.l10nId = 'phoneNumber';
  }
});
```

Basically, the goal here is to not need any of the set/restore goop, and to have a very clear switch when minimizing the Callscreen. We can discuss this further on IRC.

Comment 17

[Dietrich Ayala (:dietrich)]

Last comments from a couple of months ago. Doug are you still working on this?

Comment 18

[Dietrich Ayala (:dietrich)]

Er, Germán, not Doug.

Comment 19

[Germán Toro del Valle (:gtorodelvalle)]

Thanks for noticing, Dietrich! I am not working on it so I am freeing the bug just in case someone wants to take it ;)

Comment 20

[BMO Automation]

Firefox OS is not being worked on