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

VERIFIED FIXED in Firefox OS v2.0

Status

Firefox OS
Gaia
VERIFIED FIXED
4 years ago
3 years ago

People

(Reporter: Brogan Zumwalt [Inactive], Assigned: arnau)

Tracking

({regression})

unspecified
2.0 S6 (18july)
ARM
Gonk (Firefox OS)
regression
Dependency tree / graph

Firefox Tracking Flags

(blocking-b2g:2.0+, b2g-v1.4 unaffected, b2g-v2.0 verified, b2g-v2.1 verified)

Details

(Whiteboard: LocRun2.0)

Attachments

(4 attachments)

(Reporter)

Description

4 years ago
Created attachment 8452719 [details]
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
(Reporter)

Comment 1

4 years ago
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.
QA Whiteboard: [QAnalyst-Triage?]
status-b2g-v1.4: --- → unaffected
Flags: needinfo?(ktucker)
Keywords: regression
(Reporter)

Updated

4 years ago
Summary: [B2G][Gaia] Button redesign in 2.0 causes truncation in multiple locations for multiple languages → [B2G][Gaia] Lengthy button text does not wrap to second line in 2.0 causing truncation in multiple locations for multiple languages
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.
blocking-b2g: --- → 2.0?
QA Whiteboard: [QAnalyst-Triage?]
Flags: needinfo?(ktucker)
Keywords: regressionwindow-wanted
Duplicate of this bug: 1032488
Duplicate of this bug: 1035947
Duplicate of this bug: 1036046
Duplicate of this bug: 1033593

Updated

4 years ago
blocking-b2g: 2.0? → 2.0+
QA Contact: jmercado
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
QA Whiteboard: [QAnalyst-Triage?]
Flags: needinfo?(jmitchell)
Keywords: regressionwindow-wanted
possibly broken by "[VDR][Browser] Apply Buttons and Input areas [BB]"

Pavel - can you take a look?
QA Whiteboard: [QAnalyst-Triage?] → [QAnalyst-Triage+]
Flags: needinfo?(jmitchell) → needinfo?(pivanov)

Updated

4 years ago
QA Whiteboard: [QAnalyst-Triage+] → [QAnalyst-Triage+][lead-review+]
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]
Flags: needinfo?(pivanov) → needinfo?(rnowmrch)
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.
Flags: needinfo?(rnowmrch) → needinfo?(pabratowski)

Comment 11

4 years ago
David, I was told that we can only provide workaround before 7/21. Can you accept that? Thanks.
Flags: needinfo?(dscravaglieri)
Kevin, I don't think this is acceptable, multiple apps will have to find a workaround, this doesn't scale
Flags: needinfo?(dscravaglieri)
I wanted to have an answer from Przemek befor changing default rules in Building blocks. But I can do a patch for that.
Assignee: nobody → rnowmrch
Created attachment 8456837 [details] [review]
patch in github
Attachment #8456837 - Flags: review?(pivanov)
Created attachment 8456842 [details]
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.
Attachment #8456842 - Flags: ui-review?(pabratowski)
Comment on attachment 8456837 [details] [review]
patch in github

LGTM :) if Przemek is OK r+
Attachment #8456837 - Flags: review?(pivanov) → review+
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)
Keywords: qawanted
Attachment #8456842 - Flags: ui-review?(pabratowski) → ui-review+
Flags: needinfo?(pabratowski)
Attachment #8456837 - Flags: feedback?(francisco)
Comment on attachment 8456837 [details] [review]
patch in github

\o/

Thanks Arnau!
Attachment #8456837 - Flags: feedback?(francisco) → feedback+
Duplicate of this bug: 1036131
Merged: 139d3af6b2341f52d116d94dcfae3a282d74a18f
Status: NEW → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → FIXED
status-b2g-v2.1: --- → fixed
Target Milestone: --- → 2.0 S6 (18july)
(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.
Keywords: qawanted
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
Status: RESOLVED → VERIFIED
status-b2g-v2.0: fixed → verified
Created attachment 8531909 [details]
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
status-b2g-v2.1: fixed → verified
You need to log in before you can comment on or make changes to this bug.