883737 - [Bluetooth][File-Transfer] screen layout size is exceeded in Bluetooth Transfer pop-up screen

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::Bluetooth, defect, P1)

Description

[leo.bugzilla.gecko]

Attachment: layout_is_over

GENERAL Defect

1. Tester`s Action : 
   1) A devices - bluetooth devices name set the long text
   2) A -> B Bluetooth Transfer
2. Detailed Symptom  : 
   - screen layout size is exceeded in Bluetooth Transfer pop-up screen 

It seem to be exceeded because special characters take up a lot of space better than alphabet.
In my opnion, device name should be limited shortly or scrolling should be used.

I attach the bug image, so please check this.
Thanks.

Comment 1

[Walter Chen[:ypwalter][:wachen]]

Hi, [e-mail],

I just surveyed a little bit on the bluetooth spec.
I think android and windows mobile is using a standard of 248 characters as maximum string. As for your device name, it's more than 270 characters. It will be more than the standard.

In this case, I think there are few means that Ian could take to completely fix this:

a) restrict the FXOS phone bluetooth name to maximum of 248 characters
b) truncated the displayed characters when devices tried to pair, send file, and so on. android phone have a restriction of displaying 40 or 20 characters. (I also saw some people indicate android devices could display 48/32 characters) I think you(we) should ask FirefoxOS UX team for this. (needinfo from them to see if they have some opinion or user stories for this)

Comment 2

[[e-mail], [e-mail]]

Walter,

It's very useful for tracking the issue in the long tern:) I agree having a restriction of maximum of number characters, even if it's an edge case.

But I remember that I have fixed the issue with scrollable panel before. It looks like a regression.

Comment 3

[Walter Chen[:ypwalter][:wachen]]

Ok, I don't know there is a scrollable panel in an alert or this kind of message.

We could probably put restrictions on bt related stuffs and make a scrollable panal altogether if this marked as a leo+. Otherwise, we can just track it in the long term.

Comment 4

[[e-mail], [e-mail]]

https://github.com/mozilla-b2g/gaia/commit/e69553c36894979e0be587fe2b172a8b6795d803#L2L20

I find out it is a regression from bug 863335. The max-height of the panel has been removed. So, the scroll bar won't be display while the string content is overflow in y-direction.

Alive,

Could we add back the max-height with correct value? It should not have any regression in side of Download Update dialog. I would like to have some comment from you. Thanks.

Comment 5

[[e-mail], [e-mail]]

cc. relative devs for the layout size exceeded issue.

Comment 6

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

I think we should specify the height to certain value like calc(100% - |STATUSBAR_HEIGHT|) or just 100%. I have no idea if this causes regression on download update dialog, but IMO this kind of change shouldn't affect it.

Comment 7

[[e-mail], [e-mail]]

It does not works for me:( The height is shared with title/menu-button. It will let title be overlap as the screen shot. The certain value should be calc(100% - |STATUSBAR_HEIGHT| - |TITLE_HEIGHT| - |MENU_BUTTON_HEIGHT|). Sounds good?

Comment 8

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

(In reply to Ian Liu [:ianliu] from comment #7)
> It does not works for me:( The height is shared with title/menu-button. It
> will let title be overlap as the screen shot. The certain value should be
> calc(100% - |STATUSBAR_HEIGHT| - |TITLE_HEIGHT| - |MENU_BUTTON_HEIGHT|).
> Sounds good?

Sure, but if this is building block we should customize it in system's stylesheets.

Comment 9

[Stephany Wilkes]

Assigning this leo+ to Francis.

Comment 10

[Francis Djabri [:djabber]]

(In reply to Alive Kuo [:alive] from comment #8)
> (In reply to Ian Liu [:ianliu] from comment #7)
> > It does not works for me:( The height is shared with title/menu-button. It
> > will let title be overlap as the screen shot. The certain value should be
> > calc(100% - |STATUSBAR_HEIGHT| - |TITLE_HEIGHT| - |MENU_BUTTON_HEIGHT|).
> > Sounds good?
> 
> Sure, but if this is building block we should customize it in system's
> stylesheets.

Agreed that the building block should be updated in this way.

Comment 11

[[e-mail], [e-mail]]

Francis,

Since I'm trying to revise the confirm dialog in building block, I find out we have supported scroll panel while content is overflow in y-direction. 

Reference:
https://github.com/mozilla-b2g/gaia/blob/master/shared/style/confirm.css#L42-L43

Shell we need to scroll the title and description together?

If yes, should we define margin/padding-top for the title. It won't let the layout be crowded as the attached screen shot.

If no, we just make the description panel scrollable. I think we could still define margin/padding-top for the title.

Thanks.

Comment 12

[Francis Djabri [:djabber]]

(In reply to Ian Liu [:ianliu] from comment #11)
> Francis,
> 
> Since I'm trying to revise the confirm dialog in building block, I find out
> we have supported scroll panel while content is overflow in y-direction. 
> 
> Reference:
> https://github.com/mozilla-b2g/gaia/blob/master/shared/style/confirm.css#L42-
> L43
> 
> Shell we need to scroll the title and description together?
> 
> If yes, should we define margin/padding-top for the title. It won't let the
> layout be crowded as the attached screen shot.
> 
Hi Ian, 

I prefer letting the title scroll with the description, so I'd go for this option. 

Thanks, Francis

> If no, we just make the description panel scrollable. I think we could still
> define margin/padding-top for the title.
> 
> Thanks.

Comment 13

[[e-mail], [e-mail]]

Attachment: Pointer to Github pull request: https://github.com/mozilla-b2g/gaia/pull/10564

Pointer to Github pull-request

Comment 14

[[e-mail], [e-mail]]

Comment on attachment 766584 [details]
Pointer to Github pull request: https://github.com/mozilla-b2g/gaia/pull/10564

According to comment12, we only need to revise "padding top" to fix overlaying title while content is more over inner panel. The property of Overflow-y is auto already in CSS style sheet.

Alive,
Could you please help to review my pr? Thank you.

Comment 15

[[e-mail], [e-mail]]

Attachment: Pointer to Github pull request: https://github.com/mozilla-b2g/gaia/pull/10565

Pointer to Github pull-request

Comment 16

[[e-mail], [e-mail]]

Comment on attachment 766590 [details]
Pointer to Github pull request: https://github.com/mozilla-b2g/gaia/pull/10565

Since the building block reference is different from gaia:master, I file another pull request for fixing v1-train only.
* Revise "padding top" to fix overlaying title while content is more over inner panel.
* Add overflow-y: auto for inner panel of confirm dialog.

Comment 17

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

Comment on attachment 766590 [details]
Pointer to Github pull request: https://github.com/mozilla-b2g/gaia/pull/10565

Does the modification to shared css is necessary?

Comment 18

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

Comment on attachment 766584 [details]
Pointer to Github pull request: https://github.com/mozilla-b2g/gaia/pull/10564

r+ if moved into system style.

Comment 19

[[e-mail], [e-mail]]

(In reply to Alive Kuo [:alive] from comment #17)
> Comment on attachment 766590 [details]
> Pointer to Github pull request:
> https://github.com/mozilla-b2g/gaia/pull/10565
> 
> Does the modification to shared css is necessary?

No, status bar won't be shown while the dialog is showing in other app.

Comment 20

[[e-mail], [e-mail]]

(In reply to Alive Kuo [:alive] from comment #18)
> Comment on attachment 766584 [details]
> Pointer to Github pull request:
> https://github.com/mozilla-b2g/gaia/pull/10564
> 
> r+ if moved into system style.

I have moved it in system app. Thanks for your reminder.:)

Comment 21

[[e-mail], [e-mail]]

We can close the issue since the two prs are landed.

master:    6b5b7b8045481dedc5c37e636c4f00b75f45936d
v1-train:  ec929d5d24f347e55ffdf1d5a0851b4d1fcbc585

Comment 22

[John Ford [:jhford] CET/CEST Berlin Time]

1.1hd: ec929d5d24f347e55ffdf1d5a0851b4d1fcbc585