1036147 - [B2G][Gaia] Lengthy button text does not wrap to second line in 2.0 causing truncation in multiple locations for multiple languages

Status: VERIFIED FIXED

(Firefox OS Graveyard :: Gaia, defect)

Description

[Brogan Zumwalt [Inactive]]

Attachment: Screenshot

Description:
A design change from 1.4 to 2.0 is causing strings inside buttons in multiple locations to appear truncated instead of wrapping around to a second line. Languages affected include German, Tamil, and Greek. Button strings affected include "Clear cookies and stored data" in Browser as well as "Update Imported Friends" in Contact settings when logged into Facebook.

Repro Steps (example):
1) Update a Flame to 20140707000200
2) Change language to Greek
3) Launch Browser
4) Click on button in upper right corner then select gear icon
5) Observe "Clear cookies and stored data" button

Actual:
Button strings in multiple languages are truncated due to UI redesign.

Expected:
Button strings wrap where appropriate.

Environmental Variables:
Device: Flame 2.0
Build ID: 20140707000200
Gaia: ef67af27dff3130d41a9139d6ae7ed640c34d922
Gecko: f53099796238
Version: 32.0a2 (2.0) 
Firmware Version: v122

User Agent: Mozilla/5.0 (Mobile; rv:32.0) Gecko/32.0 Firefox/32.0

Notes:
Repro frequency: 3/3, 100%
Link to failed test case: https://moztrap.mozilla.org/manage/case/12810/
See attached: screenshot

Comment 1

[Brogan Zumwalt [Inactive]]

Issue DOES occur on 2.1 Flame and 2.1 Open C 

Environmental Variables:
Device: Flame 2.1
Build ID: 20140708040218
Gaia: 740faa5d0060fb218b407cf224330654ddf833a5
Gecko: 465280604ea6
Version: 33.0a1  
Firmware Version: v122

User Agent: Mozilla/5.0 (Mobile; rv:33.0) Gecko/33.0 Firefox/33.0

Environmental Variables:
Device: Open_C 2.1
Build ID: 20140707040201
Gaia: 93daa354671a698634a3dc661c8c9dcb7d824c31
Gecko: 1dc6b294800d
Version: 33.0a1  
Firmware Version: P821A10V1.0.0B06_LOG_DL

User Agent: Mozilla/5.0 (Mobile; rv:33.0) Gecko/33.0 Firefox/33.0

Actual Result: Button strings in multiple languages are truncated due to UI redesign.


Issue PARTIALLY reproduces on 2.1 Buri

Environmental Variables:
Device: Buri 2.1
Build ID: 20140708040218
Gaia: 740faa5d0060fb218b407cf224330654ddf833a5
Gecko: 465280604ea6
Version: 33.0a1  
Firmware Version: v1.2device.cfg

User Agent: Mozilla/5.0 (Mobile; rv:33.0) Gecko/33.0 Firefox/33.0

Actual Result: "Clear cookies and stored data" in Browser issue shows as truncated, but "Update Imported Friends" in Contact settings when logged into Facebook appears normally with string fitting inside of button without truncation.


Issue does NOT occur on 1.4 Flame, 1.4 Buri, and 1.4 Open C

Environmental Variables:
Device: Flame 1.4
Build ID: 20140707000200
Gaia: 5c9e1e4131d3ac8915ed88b72bb66dc7d97be6a0
Gecko: 2d0c15450488
Version: 30.0 (1.4) 
Firmware Version: v122

User Agent: Mozilla/5.0 (Mobile; rv:30.0) Gecko/30.0 Firefox/30.0

Environmental Variables:
Device: Buri 1.4
Build ID: 20140708000310
Gaia: 318f8d814d8930b5530bcb0badc1bb5bd0b5ef45
Gecko: ef78ebf203e5
Version: 30.0 (1.4) 
Firmware Version: v1.2device.cfg

User Agent: Mozilla/5.0 (Mobile; rv:30.0) Gecko/30.0 Firefox/30.0

Environmental Variables:
Device: Open_C 1.4
Build ID: 20140707000200
Gaia: 5c9e1e4131d3ac8915ed88b72bb66dc7d97be6a0
Gecko: 2d0c15450488
Version: 30.0 (1.4) 
Firmware Version: P821A10V1.0.0B06_LOG_DL

User Agent: Mozilla/5.0 (Mobile; rv:30.0) Gecko/30.0 Firefox/30.0

Actual Result: Button strings wrap where appropriate.

Comment 2

[KTucker [:KTucker][Inactive 3/4/2016]]

Since text is not being wrapped to the second line in multiple languages in multiple locations, I am nominating this 2.0? since this is a regression from 1.4.

Comment 7

[Jayme Mercado [:JMercado] (Inactive 3/4/2016)]

This issue is two separate issues, one in the Contacts app that only occurs on Flame and one in the Browser app.  Both issues occur on the earlies available Flame build, preventing me from getting a window for the Contacts issue.  

Below is the window for the Browser issue that was found using Buri.  The window shows a changelist named "[VDR][Browser] Apply Buttons and Input areas [BB]" which is not a bug, but seems the likely cause.

B2g-inbound Regression Window

Last working 
Environmental Variables:
Device: Buri Master
BuildID: 20140414044336
Gaia: e046133c79d13d2ad26814547a163ec1732d36e7
Gecko: 4dccfa0a04d3
Version: 31.0a1 (Master) 
Firmware Version: v1.2device.cfg
User Agent: Mozilla/5.0 (Mobile; rv:31.0) Gecko/31.0 Firefox/31.0


First Broken 
Environmental Variables:
Device: Buri Master
BuildID: 20140414045236
Gaia: 478daa103147ef8e9298f3a7a3d2112b1c4f641c
Gecko: 921a84fee4fd
Version: 31.0a1 (Master) 
Firmware Version: v1.2device.cfg
User Agent: Mozilla/5.0 (Mobile; rv:31.0) Gecko/31.0 Firefox/31.0


Last working gaia / First broken gecko - Issue does NOT occur
Gaia: e046133c79d13d2ad26814547a163ec1732d36e7
Gecko: 921a84fee4fd

First broken gaia / Last working gecko - Issue DOES occur

Gaia Pushlog:  https://github.com/mozilla-b2g/gaia/compare/e046133c79d13d2ad26814547a163ec1732d36e7...478daa103147ef8e9298f3a7a3d2112b1c4f641c

Comment 8

[Joshua Mitchell (Inactive)]

possibly broken by "[VDR][Browser] Apply Buttons and Input areas [BB]"

Pavel - can you take a look?

Comment 9

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

yep there is a problem with this one ... I will ping Arnau because he was the last person who touch the [BB][Buttons] and he work close with Vicky and she is the right person who can answer is this correct behavior of the [BB][Buttons]

Comment 10

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

AFAIK default behavior for buttons is truncate text.
Przemek, could you please confirm that?
That does not mean we could have exceptions to default behavior, so in cases where we expect to lines of text, having an extra class in buttons BB to allow that.

Comment 11

[Kai-Chih Hu [:khu]]

David, I was told that we can only provide workaround before 7/21. Can you accept that? Thanks.

Comment 12

[David Scravaglieri [:scravag]]

Kevin, I don't think this is acceptable, multiple apps will have to find a workaround, this doesn't scale

Comment 13

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

I wanted to have an answer from Przemek befor changing default rules in Building blocks. But I can do a patch for that.

Comment 14

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

Attachment: patch in github

Comment 15

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

Attachment: multiline-buttons.png

Przemek, please have in mind in this patch I'm only changing list buttons, which are only supposed to be displayed vertically.
(The only exception I can think of is in contact details, when showing the X button next to a select)
Special buttons (rounded ones) which can be displayed horizontally (e.g modals) will remain as they are now: text gets truncated in case the word does not fit the length of the button, not to break the layout.

Comment 16

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Comment on attachment 8456837 [details] [review]
patch in github

LGTM :) if Przemek is OK r+

Comment 17

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

Adding qawanted as we are changing the padding in all buttons.
Maybe I've missed any button in any app while testing my patch.
Please report if you see any visual inconsistency in buttons (most frequent could be icons inside buttons moving 10px down, as now padding-top is changing from 0 to 10px)

Comment 18

[Francisco Jordano [:arcturus] [:francisco]]

Comment on attachment 8456837 [details] [review]
patch in github

\o/

Thanks Arnau!

Comment 20

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

Merged: 139d3af6b2341f52d116d94dcfae3a282d74a18f

Comment 21

[Ryan VanderMeulen [:RyanVM]]

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

Comment 22

[Joshua Mitchell (Inactive)]

(In reply to Arnau March  [:arnau] from comment #17)
> Adding qawanted as we are changing the padding in all buttons.
> Maybe I've missed any button in any app while testing my patch.
> Please report if you see any visual inconsistency in buttons (most frequent
> could be icons inside buttons moving 10px down, as now padding-top is
> changing from 0 to 10px)

I've had the QA-Wanted team keeping an eye out for buttons with truncation the last few days and nothing has been seen. I think you got them all. Going to remove the QA-Wanted tag but will continue to keep an eye out.

Comment 23

[Théo Chevalier]

Verified fixed on Flame 2.0 with Greek

Gaia      5ba22d458fdb63bd72c59de53c701d0efe35c1e2
Gecko     https://hg.mozilla.org/releases/mozilla-b2g32_v2_0/rev/6fbc60a80c6d
BuildID   20140806000200
Version   32.0
ro.build.version.incremental=110
ro.build.date=Fri Jun 27 15:57:58 CST 2014
B1TC00011230

Comment 24

[Shine(Leave from Mozilla)]

Attachment: screenshot

This issue has been verified successfully on Flame 2.1
See attachment: Flame2.1_screenshot.zip
Reproducing rate: 0/2
Reproducing steps:
1. Change language to Greek/German/Tamil
2. Launch Setting app -> Browser Privacy
** The "Clear cookies and stored data" strings are not truncated
3. Launch Contacts
4. Select gear icon
** The "Update Imported Friends" strings are not truncated when logged into Facebook.


Flame 2.1 build:
Gaia-Rev        dbaf3e31c9ba9c3436e074381744f2971e15c7bf
Gecko-Rev       https://hg.mozilla.org/releases/mozilla-b2g34_v2_1/rev/ebce587d2194
Build-ID        20141203001205
Version         34.0