1054833 - [Messages][SMS] Red Exclamation circle of Invalid contact in Recipient list is not round, bottom cut off a little bit

Status: RESOLVED WONTFIX

(Firefox OS Graveyard :: Gaia::SMS, defect, P4)

Description

[Eric Chang [:ericcc] [:echang]]

Attachment: v2.1-Messages-Recipient.png

### STR
1. Enter an invalid name in recipient
2. Tap Text field

### Actual
Red Exclamation circle shown, bottom cut off a little bit
http://youtu.be/sPghiDvYJg8
See v2.1-Messages-Recipient.png

### Expected
Round circle

### Version
Gaia      aa8aace12d65956dd9525da5dac66e0d3b28597f
Gecko     https://hg.mozilla.org/mozilla-central/rev/37ac55a26014
BuildID   20140817160201
Version   34.0a1
ro.build.version.incremental=110
ro.build.date=Fri Jun 27 15:57:58 CST 2014
B1TC00011230

Comment 1

[Eric Chang [:ericcc] [:echang]]

[Blocking Requested - why for this release]: 
1. Regression

Comment 2

[Julien Wajsberg [:julienw]]

About the "red circle": we chose to keep the "!" mark for accessibility reason. see bug 963018 comment 25. So I think this part is INVALID.

I don't really understand what is the second issue here ("bottom cut off a little bit"), can you please be more precise? On the video we don't see the "recipient pills" properly because it's saturated.

Thanks !

Comment 3

[Eric Chang [:ericcc] [:echang]]

Hi, Julien, The screenshot should be more clear, the bottom of red circle is kinda flat.
https://bug1054833.bugzilla.mozilla.org/attachment.cgi?id=8474346

Comment 4

[Julien Wajsberg [:julienw]]

Ah yeah, ok, I get it.

There are several fixes for this, most obvious to me are:
* have "overflow: visible" for the text
* make the "line-height" bigger (I never really understood why we need to have line-height = font_size, I think it was more a commodity than really needed).

I think this is in the building blocks.

Comment 5

[Rachel Pribble [:rpribble]]

B2G Inbound Last Working:
Device: Flame 2.1 Master
BuildID: 20140804131728
Gaia: 19bf9795263e2ccc15d824a52ebf23c2670fa9b9
Gecko: 7f81be7db528
Version: 34.0a1 (2.1 Master)
Firmware: V123
User Agent: Mozilla/5.0 (Mobile; rv:33.0) Gecko/33.0 Firefox/33.0

B2G Inbound First Broken:
Device: Flame 2.1 Master
BuildID: 20140804133226
Gaia: f58bb4c40abbebd9ff9b32fb2a39bf3f44340991
Gecko: 2be403f035f5
Version: 34.0a1 (2.1 Master)
Firmware: V123
User Agent: Mozilla/5.0 (Mobile; rv:33.0) Gecko/33.0 Firefox/33.0

Swap:
First broken gecko/Last working gaia - Issue DOES NOT reproduce
Gaia: 19bf9795263e2ccc15d824a52ebf23c2670fa9b9
Gecko: 2be403f035f5

First broken gaia/Last working gecko - Issue DOES reproduce
Gaia: f58bb4c40abbebd9ff9b32fb2a39bf3f44340991
Gecko: 7f81be7db528

Gaia pushlog:
https://github.com/mozilla-b2g/gaia/compare/19bf9795263e2ccc15d824a52ebf23c2670fa9b9...f58bb4c40abbebd9ff9b32fb2a39bf3f44340991

Possibly broken by bug 1015841.

Comment 6

[Joshua Mitchell (Inactive)]

Possibly broken by bug 1015841 ? Aleh - can you take a look?

Comment 7

[Steve Chung [:steveck]]

cc Luke because he might have time for it.

Hi Oleg, if you are busy on other 2.1 feature, you could ask for assistance from Luke since the solution is clear like julien said in comment 4.

Comment 8

[Oleg Zasypkin [:azasypkin]]

(In reply to Joshua Mitchell [:Joshua_M] from comment #6)
> Possibly broken by bug 1015841 ? Aleh - can you take a look?

Yeah, at least after bug 1015841 the issue became more noticeable, previously this icon had top cut off if more than 1 line of recipients.

 (In reply to Steve Chung [:steveck](PTO 8/22) from comment #7)
> cc Luke because he might have time for it.
> 
> Hi Oleg, if you are busy on other 2.1 feature, you could ask for assistance
> from Luke since the solution is clear like julien said in comment 4.

Yep, Luke's help will be highly appreciated here :)

Luke, could you please help with this one? I'm just worried that we may have another problem than mentioned in the comment 4 as I see this issue on Flame only (don't see it on Buri). And if I go from two-lines mode to single-line one, bottom cut off is appeared only once transformation ends.

Comment 9

[Luke Chang [:lchang] (inactive)]

Hi Oleg,

Sure, I'd like to help on it if it's not urgent.

Comment 10

[Luke Chang [:lchang] (inactive)]

I reviewed all the CSS rules of the exclamation mark and found nothing needs to be fixed. Besides, the symptom can't be resolved by methods in comment 4 either. Thus, I guess this is another rounding issue caused by 1.5x pixel ratio.

After lots of trial and error, unexpectedly I found that it can be fixed by changing the "min-height" of "#messages-to-field" to "5.4rem" [1]. It, of course, doesn't make sense but it works well.

Tomorrow I'll try creating a simple page which can reproduce this issue and needinfo graphic team to take a look if succeed.

However, it still can be an option to take this workaround patch or replace the exclamation circle with an image if it can't be resolved from Gecko in the end.


[1] https://github.com/luke-chang/gaia/commit/eb4d86057f132a3b854ddb9176f24c59091b2c38

Comment 11

[Luke Chang [:lchang] (inactive)]

Attachment: Screenshot of the testing app

Finally, I simplified the source code and created a testing app which can reproduce this issue. Please refer to github [1], the testing app is under "dev_apps/just-test" folder.

This issue appears to be caused by the combination of "font-size", "min-height" and "transform: translateY" and only happens on 1.5x device (e.g. flame). We may need graphic team to help on this.

[1] https://github.com/luke-chang/gaia/tree/1054833_sms_circle_cut_off_test

Comment 12

[Luke Chang [:lchang] (inactive)]

Hi Peter,

According to comment 11, do you know who may help on this issue? Thanks.

Comment 13

[Peter Chang[:pchang]]

CJ, is this the similar issue you solve before? Could you help to look at?

Comment 14

[u459114]

No, unless that red circle is a glyph

Comment 15

[Luke Chang [:lchang] (inactive)]

The red circle is drawn by CSS rule: "border-radius: 50%".

https://github.com/luke-chang/gaia/blob/1054833_sms_circle_cut_off_test/dev_apps/just-test/style/style.css#L19

Comment 16

[Wesley Huang [:wesley_huang] (EPM) (NI me)]

triage: non-critical regression

Comment 17

[Julien Wajsberg [:julienw]]

Hey Milan, can you help redirecting this issue to the correct person? see comment 11 for a testcase. Could also be a Layout issue, but I have some difficulty to classify myself. Thanks!

Comment 19

[Julien Wajsberg [:julienw]]

Mass closing of Gaia::SMS bugs. End of an era :(

Comment 20

[Julien Wajsberg [:julienw]]

Mass closing of Gaia::SMS bugs. End of an era :(