816243 - Overlay long text does not fit correctly for the tabs in the awesome screen

Status: VERIFIED FIXED

(Firefox OS Graveyard :: Gaia::Browser, defect, P2)

Description

[Naoki Hirata :nhirata (please use needinfo instead of cc)]

Attachment: screenshot

## Environment :
Unagi phone, build 2012/11/27
  
## Repro :
1. go to settings -> languages and set to french
2. hit home
3. launch browser
4. tap into the url bar or add a new tab

## Expected :
1. The title of the tabs fit correctly

## Actual :
1. the history tab is on a line by itself.

## Note :
1. happens on unagi and otoro
2. noming in concern for spanish/portugese

Comment 1

[Ben Francis [:benfrancis]]

The combination of the horizontal tab interaction design and curved tab visual design probably makes it impossible to solve this bug through clever translation alone.

We definitely need to test this with Spanish/Portuguese or whatever our initial shipping languages are and I think we need UX mockups showing how it should be presented in these languages. It may be that this actually requires a design change like using icons instead of text in order to accommodate Latin languages on such a small screen.

Comment 2

[Patryk Adamczyk [:patryk] UX]

Can you push the left and right tabs closer to the edge (potentially crop them) so all the text fits? Also are these the shortest labels / translations available?

Comment 3

[Dietrich Ayala (:dietrich)]

Regardless of locale, this breaks the UI, which should not be possible. Tab text should be truncated *at worst*, and ideally the locale testing will change the text to fit into the available space.

This is essentially a browser change. The local string changes should be in separate bugs for each locale.

Comment 4

[:Margaret Leibovic]

We ran into this same issue for Firefox for Android. In that case we decided to marquee the text (very Android), but I don't know if that's desired or even an easy option for B2G (see bug 753880).

Comment 5

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

Attachment: Patch

Let's truncate the text for now so the browser is not broken and hope localizers will find convenient strings.

Comment 6

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

Ben any time for quick review?

Comment 7

[Ben Francis [:benfrancis]]

Comment on attachment 686881 [details] [diff] [review]
Patch

This solution isn't perfect and it isn't as flexible as I would like, but it is an improvement on what we currently have so let's go with that for now.

Comment 8

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

(In reply to Ben Francis [:benfrancis] from comment #7)
> Comment on attachment 686881 [details] [diff] [review]
> Patch
> 
> This solution isn't perfect and it isn't as flexible as I would like, but it
> is an improvement on what we currently have so let's go with that for now.

You're 100% right. This solution is a shortcut. Something better would be desirable for v2 but that sounds ok to unblock the bug with such a hack right now.

thanks!

Comment 9

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

https://github.com/mozilla-b2g/gaia/commit/c4a4cafdfa96d0c9d437f62c06ce7ff8f86988b8

Comment 10

[Darren]

The issue is still occurring in build 20130102070202 on Unagi.

Comment 11

[:Margaret Leibovic]

Attachment: follow-up patch

Vivien, do you remember why you chose 37px for this? I upped the value, and that fixed the issue, but I really want to figure out what geometry is going into this calculation (I tried drawing it out, but I only managed to confuse myself).

This issue is also reproducible if you run Gaia in desktop Firefox, so it's nice to use that for debugging the CSS.

And, it's out of scope for v1 at this point, but shouldn't the tabs just each take up 1/3 of the space, instead of shifting to the left if the strings are short?

Comment 12

[Ben Francis [:benfrancis]]

The patch basically prevented each tab taking up more than a third of the width in order to prevent tabs dropping onto the next line. The side effect of this is that a tab can't take up more than a third of the space, even if more than a third of the space is available!

Comment 13

[:Margaret Leibovic]

(In reply to Ben Francis [:benfrancis] PTO until 2nd January from comment #12)
> The patch basically prevented each tab taking up more than a third of the
> width in order to prevent tabs dropping onto the next line. The side effect
> of this is that a tab can't take up more than a third of the space, even if
> more than a third of the space is available!

Yeah, I understand the logic, I was just confused by why calc(33% - 37px) magically equaled a third of the width :)

And the last part of my comment was just an opinion that I feel like it would look nicer if each tab was just always a third of the width, such that the middle one was always be centered.

Comment 14

[Ben Francis [:benfrancis]]

(In reply to Margaret Leibovic [:margaret] from comment #13)
> Yeah, I understand the logic, I was just confused by why calc(33% - 37px)
> magically equaled a third of the width :)

Oh sorry, I assume that was what Vivien calculated as the maximum size could be to accommodate the curved tab design, but I don't know how he calculated it.

Have you tested your patch on the device? Text sizes can be rendered differently in desktop Firefox.

> And the last part of my comment was just an opinion that I feel like it
> would look nicer if each tab was just always a third of the width, such that
> the middle one was always be centered.

That might look odd in landscape mode or on a larger device.

I haven't yet figured out some CSS magic to use all the available space.

Comment 15

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

Comment on attachment 697184 [details] [diff] [review]
follow-up patch

I don't remember the logic. Was mostly by experimenting but that should be good enough for v1.

Comment 16

[:Margaret Leibovic]

(In reply to Ben Francis [:benfrancis] from comment #14)

> Have you tested your patch on the device? Text sizes can be rendered
> differently in desktop Firefox.

Yeah, I tested on the unagi, and 39px worked.

Maybe in the future we can do something with flexbox to make this more robust :)

https://github.com/mozilla-b2g/gaia/commit/dc8ec3777431afdbe63c3460cea5ee6c3046c21f

Comment 17

[pallavi]

Verified on Unagi, Build Id:20130114073222