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

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.

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.

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

possibly broken by "[VDR][Browser] Apply Buttons and Input areas [BB]" Pavel - can you take a look?

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]

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.

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

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

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

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 on attachment 8456837 [details] patch in github LGTM :) if Przemek is OK r+

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 on attachment 8456837 [details] patch in github \o/ Thanks Arnau!

Merged: 139d3af6b2341f52d116d94dcfae3a282d74a18f

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

(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.

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

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