979624 - [B2G][Dialer][All languages] Performing a call while in a call wil cause the contacts name to overlap the "connecting" text

Status: VERIFIED FIXED

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

Description

[Josh Schmitt [Joshs]]

Attachment: Truncated.png

Description
The first/last name of a contact overlaps the "Connecting" text when calling while in a call.

Prerequisite:

Have a contact with a first/last name or a long first name e.g. John Smith.

Repro Steps:
1) Updated Buri to Build ID: 20140304004001
2) Open 'Dialer' app
3) Call device 2 from device 1
4) Connect the call
5) Call device 3 from device 1

Actual:
The contacts name overlaps the "Connecting" text.

Expected:
The contacts name does not overlap the "Connecting" text.

Environmental Variables:
Device: Buri 1.3 MOZ
BuildID: 20140304004001
Gaia: 242e477761643a440e6b244d291fb9d0ce204993
Gecko: 8b90bef8738c
Version: 28.0
Firmware Version: V1.2-device.cfg

Repro frequency: 100%
See attached: Truncated.png

Comment 1

[Jason Smith [:jsmith]]

Delphine - Is this a blocker for l10n? Seems like this is causing some readability issues.

Comment 3

[Delphine Lebédel]

Yes please block on this since it might imply a big readability issue with long names

Comment 4

[Peter Dolanjski [:pdol]]

Given this will affect pretty much every user who does multiple calls, we can't ship with broken UX - blocking.

Comment 5

[Stephany Wilkes]

Thanks, Peter. Agree. (Sorry to miss triage; in a TEF call.)

Comment 7

[Brogan Zumwalt [Inactive]]

Regression Window:

Last Working Build:
Environmental Variables:
Device: Buri v1.3 Mozilla RIL
BuildID: 20140303010129
Gaia: d51d2e0963d9b761d5ea96243dfb13d9a220d521
Gecko: cf5bbce4ed90
Version: 28.0
Firmware Version: v1.2-device.cfg


First Broken Build:
Environmental Variables:
Device: Buri v1.3 Mozilla RIL
BuildID: 20140303093729
Gaia: a364889457107f082ab3758502fc241ff0eaa5e6
Gecko: 39bdfa2fc3e9
Version: 28.0
Firmware Version: v1.2-device.cfg


Last Working Gaia/First Broken Gecko: Issue Does NOT Reproduce
Gaia: d51d2e0963d9b761d5ea96243dfb13d9a220d521
Gecko: 39bdfa2fc3e9

First Broken Gaia/Last Working Gecko: Issue DOES Reproduce
Gaia: a364889457107f082ab3758502fc241ff0eaa5e6
Gecko: cf5bbce4ed90

Gaia Push log: https://github.com/mozilla-b2g/gaia/compare/d51d2e0963d9b761d5ea96243dfb13d9a220d521...a364889457107f082ab3758502fc241ff0eaa5e6

Note: No inbound builds available for 1.3

Comment 8

[Jason Smith [:jsmith]]

bug 974211 broke this.

Comment 9

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

Attachment: Github PR

Etienne, we discussed this problem on IRC before I landed bug 974211. Based on that discussion, I think the best fix is to have additional padding on the number container when the calling is incoming/outgoing (although incoming is not displayed in the call list currently). This patch makes sure the call list entry is updated when changing state from outgoing to ongoing.

Comment 10

[Etienne Segonzac (:etienne)]

Comment on attachment 8387859 [details] [review]
Github PR

I'm not comfortable going through the complex auto font sizing and ellipsis code to fix an issue caused by 2 divs overlapping.

The .duration and .number divs should not overlap, and .fake-number should always be the same size as .number.

Then everything should be ok :)

Comment 11

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

(In reply to Etienne Segonzac (:etienne) from comment #10)
> The .duration and .number divs should not overlap, and .fake-number should
> always be the same size as .number.

If we fix this by making sure the duration ("Connecting") and number divs never overlap, we again run into the problem we discussed in bug 974211 comment 19:

(In reply to Etienne Segonzac (:etienne) from bug 974211 comment #19)
> Numbers on the main call screen display are truncated way to early in the
> scenarios where you have 2 open lines (2 call, one held for example)/

Unfortunately it's a one or the other problem. If we make these divs not overlap, we only get about 7 digits before the text gets truncated. If we allow them to overlap (and thus display more digits), we run into this bug. In my mind, the appropriate way to fix this is to change the size of the number container when it has less room to work with (due to the increased duration text).

(In reply to Etienne Segonzac (:etienne) from comment #10)
> I'm not comfortable going through the complex auto font sizing and ellipsis
> code to fix an issue caused by 2 divs overlapping.

Keep in mind that we run through this code for each call every time the call list changes (we did so even before bug 974211). Also, this doesn't do the auto font-sizing, just the ellipsis calc. To me it makes sense to hit this same code-path when the format of one of the calls in the call list changes as well as when we add/remove these calls.

In any case, there are 3 ways forward here. 
1.) We can make .number and .duration not overlap, and only get about 7 characters displayed on the call list.
2.) We can do part 1), but also decrease the maxFontSize so that we get more characters in that list.
3.) We do what the current patch does, decrease size of the number container when call is "Connecting".

I still think 3 is the best way forward. It is not an expensive operation to calculate these ellipses (although we can probably remove this completely in favor of text-overflow: ellipses, but that is a different discussion). It is consistent with how the call list is manipulated in other places. And it provides good UX in that users get more digits back when the call changes to "ongoing".

What do you think?

Comment 12

[Etienne Segonzac (:etienne)]

(In reply to Michael Henretty [:mhenretty] from comment #11)
> What do you think?

First, your quick grasp of this pile of hacks is impressive :)
But I still think we should slowly fade away the hacks instead of tweaking them.

We're displaying a string of arbitrary length in a a `durationNode`, with no fixed width, made to display a timer:
we're asking for overlapping text :)

So my suggestion is:

* let's make sure the duration node can never be wider than 6rem in this case. The "in this case" part is important (because we're working on a pile of hacks and the "Call ended" message is also displayed there), I think something like
|#calls:not(.big-duration) > section:not(.ended) .duration:not(.isTimer)| should get us there.

* then the best UX is probably to add a simple text-overflow:ellipsis (on the durationNode) but I'm open to suggestions.

It's not a pretty selector but at least it's addressing the root cause :)

Comment 13

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

Comment on attachment 8387859 [details] [review]
Github PR

Ok, I implemented the fix we talked about on IRC this morning, which was to hide the "Connecting" message when we have multiple calls in the call list. Connecting will still show up in the status bar, and when we receive new calls.

Comment 14

[Etienne Segonzac (:etienne)]

Comment on attachment 8387859 [details] [review]
Github PR

Thanks!
Did an extra round of manual testing just in case. All good!

Comment 15

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

Thanks for all the help, Etienne!!

master: https://github.com/mozilla-b2g/gaia/commit/5b32f4dcc2020a1ef0dedf30f472db6a538ebe9f

Comment 16

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

Comment on attachment 8387859 [details] [review]
Github PR

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

1.3+ dialer display problem (overlapping text)


[Bug caused by] (feature/regressing bug #): bug 974211

[User impact] if declined: really bad visual display, overlapping text

[Testing completed]: Etienne and I tested this pretty thoroughly manually, I also fixed up the unit tests

[Risk to taking this patch] (and alternatives if risky): css change, risks visual diaplay of the call list. low risk

[String changes made]: none

Comment 17

[Ryan VanderMeulen (PTO, back 6-April)]

v1.3: 0ab8a9cbcef5f23cec904a3d7f7675e44de29951

Comment 18

[Loli (:lolimartinezcr)]

Tested BUT now i can't see "Connecting" text. Attached image

1.3
Platform version: 28.0
Build ID: 20140319100231
Git commit: f2f2be55

1.4
Platform version: 30.0a2
Build ID: 20140319105930
Git commit: c036afe

Comment 19

[Loli (:lolimartinezcr)]

Attachment: 2014-03-19-08-30-52.png

Comment 20

[Jason Smith [:jsmith]]

(In reply to Loli from comment #18)
> Tested BUT now i can't see "Connecting" text. Attached image
> 
> 1.3
> Platform version: 28.0
> Build ID: 20140319100231
> Git commit: f2f2be55
> 
> 1.4
> Platform version: 30.0a2
> Build ID: 20140319105930
> Git commit: c036afe

I think that's expected behavior per comment 13.

Mike - Can you confirm?

Comment 21

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

Correct Jason. The spec never mentioned needing to see "Connecting" in the multiple calls use case, so for simplicity sake we removed it here.

Comment 22

[Stephany Wilkes]

Flagging Carrie to ensure she is aware of these developments.

Comment 23

[Carrie Wang [New account: [e-mail]]]

I've discussed this issue with Etienne and we agree that we can remove the string for now, but will add some indication as hint to indicate users that the call is still connecting. ni? the visual designer Vicky into the discussion. 

Hey Vicky, we are thinking about adding a small animated icon (which cannot be wider than 6rem) here to represent "connecting". What do you say? Thanks!

Comment 24

[Carrie Wang [New account: [e-mail]]]

Attachment: 2014-03-13-15-27-21.png

Add a screenshot as reference for the issue.

Comment 25

[Victoria Gerchinhoren [:vicky]]

(In reply to Carrie Wang [:carrie] from comment #23)
> I've discussed this issue with Etienne and we agree that we can remove the
> string for now, but will add some indication as hint to indicate users that
> the call is still connecting. ni? the visual designer Vicky into the
> discussion. 
> 
> Hey Vicky, we are thinking about adding a small animated icon (which cannot
> be wider than 6rem) here to represent "connecting". What do you say? Thanks!

Hey Carrie,
Back in the day we used to have a specification for an animation of the outgoing or incomming call icon in the connecting instance. This was never implemented don't know the reason why, but it is something we can bring up now, just the arrow of the icon going from an elypsis to a solid shape... Let me pass the refresh craziness and we can come back to this. WDYT? (not removing the NI as this is not solved yet).

Comment 26

[Loli (:lolimartinezcr)]

Attachment: 2014-04-04-07-53-22.png

Comment 27

[Loli (:lolimartinezcr)]

Tested and I can see attached image
1.4
Hamachi
Gecko 3e007e6
Gaia b4f3b84
Platform version: 30.0a2
Build ID: 20140404101450
Git commit: b4f3b84e

1.3
Hamachi
Gecko 7fb5cbd
Gaia f006667b
Platform version: 28.0
Build ID: 20140404114944
Git commit: f06667bc

Comment 28

[Loli (:lolimartinezcr)]

Attachment: 2014-04-05-00-00-47.png

Comment 29

[Loli (:lolimartinezcr)]

(In reply to Loli from comment #27)
> Tested and I can see attached image
> 1.4
> Hamachi
> Gecko 3e007e6
> Gaia b4f3b84
> Platform version: 30.0a2
> Build ID: 20140404101450
> Git commit: b4f3b84e
> 
> 1.3
> Hamachi
> Gecko 7fb5cbd
> Gaia f006667b
> Platform version: 28.0
> Build ID: 20140404114944
> Git commit: f06667bc

Attached image 2014-04-04-08-13-39.png in scenario:

1) Call device 2 from device 1
2) Connect the call
3) Call device 3 from device 1

Attached image 2014-04-05-00-00-47.png in scenario:

1) Call device 1 from device 2
2) Connect the call
3) Call device 1 from device 3

Comment 31

[Victoria Gerchinhoren [:vicky]]

Removing NI as it's no longer needed.