1008214 - [UX] Tweak the translation infobar design to work in smaller browser windows

Status: VERIFIED FIXED

(Firefox :: Theme, defect)

Description

[Sevaan Franks [:sevaan]]

The translation infobar contains text and buttons that don't allow the browser to be shrunk to smaller sizes. UX needs to determine how the infobar breaks down to allow for proper resizing.

Comment 1

[Florian Quèze [:florian]]

IRC log of a discussion we had on this topic a while ago:

florian: sevaan: [...] one UX concern I have is what happens when resizing to a smaller window. The infobar's content prevents the main toolbar from resizing (despite the australis folks having done plenty of work to make Australis resize gracefully), so I think that needs fixing.
sevaan: Yes I see what you mean. I will submit a bug and make some recommendations. Thought of a couple already.
florian: I have some ideas about how we could address it.[...] I think the "options" button/drop down is wasting space AND looks like a copy of what Chrome does. I would like us to have the options in a drop down near the translation icon that we (will) have on the left side of the bar.
Then the stuff that takes the most space is the state showing "This page has been translated from [drop down] to [drop down] <Show Original>".
I think when the window is very small, we should shorten that to just "This page as been translated. <Show Original>".
sevaan: Definitely agree on the shortening. We can shorten the first infobar too: "This page is in <French>. Translate this page? <Yes> <Not Now>" We can just remove the "Translate This page?" thing.
And I'll mockup what it looks like with the Options moved over. I think we should see it first.
florian: what I suggested with the options will make more sense once I put the right icon on the infobar. Currently a drop down near the (i) icon would make no sense :)
sevaan: I'll mockup it up in Photoshop so it will look close to what it should actually look like

Comment 2

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: Prompt-breakpoints.png

Mockup attached.

Comment 3

[Michael Maslaney [:mmaslaney] ([e-mail])]

Interaction note: Depending on a locales word count, the 564px layout may be forced to use the 336px layout.

Comment 4

[Florian Quèze [:florian]]

(In reply to mmaslaney from comment #2)
> Created attachment 8428677 [details]
> Prompt-breakpoints.png
> 
> Mockup attached.

Unless I'm missing something, the attached mockup covers only the "offer" state of the translation infobar (see attachment 8393507 [details] for a mockup of the infobar that includes the other states).

The state that currently needs the most space is the "translated" state, that shows:
<icon> This page has been translated from [<source language>] to [<target language>] [Show Original] [Options] [X]

Comment 5

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: Prompt-breakpoints.png

Comment 6

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: Prompt-translation-breakpoints.png

Mock attached.

Comment 7

[Florian Quèze [:florian]]

Can you explain with words what think the expected behavior should be?

The attached mockup doesn't really tell me what needs to be implemented. Are the 1000px and 564px values random window sizes that you used to illustrate in the mockup, or specific sizes where the implemented behavior should change?

Also, without infobar the current australis window resizes correctly down to 336px for me. Are we OK with breaking it before that?

I think the language selectors are actually larger than displayed on the mockup, because they take the size of the longest value in them (currently "Portuguese" and "Vietnamese"). All the strings will also have varying lengths for each locale.

Comment 8

[Michael Maslaney [:mmaslaney] ([e-mail])]

With words:

• The 564px width is a responsive breakpoint for the infobar UI.
• We intentionally took out the 336px breakpoint, as we feel there is not a strong use-case for that size.
• We can make modifications, like removing the icon, if localization presents spacing problems.

Comment 9

[Iaroslav Sheptykin]

Hi there!

Bug 1153509 describes a situation when opening a sidebar pushes translation infobar as well as navbar  outside of the visible window area. Would this mean that the min browser width should be 564px + sidebar width in order to fit both the translation infobar and the sidebar?

Comment 10

[Iaroslav Sheptykin]

Hi Michael!

I am currently trying to implement the design suggested here in bug 1008224. On linux I could reduce the size of the translation bar down to approx 700px before it starts to overflow. I could get down to approx 600 px on osx. I am assuming that the mockup provided here is meant to demonstrate the correct behavior on all platforms, am I right? If not, could you provide mockups for other platforms as well?

Also, in the current implementation, the width of control elements depend on the system font. Margins and paddings are also font-dependent (use ch units). The breakpoints in the mockup are defined in px. Can we transform px into ch and use these values as breakpoints?

The mockup shows that the translation icon disappears from the initial state of the infobar when width is between 564 and 1000px when. In other states the icon remains. Am I correct to assume that the icon is expected to disappear ONLY when the infobar is in its initial (OFFER) state? The rest of the states the icon stays where it is? Just double checking here.