962236 - wrap long tutorial texts on about:start

Status: VERIFIED FIXED

(Firefox for Metro Graveyard :: Firefox Start, defect, P2)

Description

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

Attachment: about:start screenshot

Firefox Aurora 2014-01-21 in German on Windows 8.1 Pro 64 bit

about:start has some tutorial texts which are shown when the page gets opened for the first time. Unfortunately, some localizations of these texts are longer than the original and seem to be one sentence or overlap, see the attached screenshot.

I could shorten "Meistbesuchte Seiten" to "Meistbesucht" ("Most visited") to remove that overlap, but there still should be more space between the texts for bookmarks and history items.

Haven't tested on Nightly because Aurora is most up to date regarding l10n.

Comment 1

[Oleg Zasypkin [:azasypkin]]

Attachment: Current state on desktop screen

Comment 2

[Oleg Zasypkin [:azasypkin]]

Attachment: Proposed state on desktop screen

Comment 3

[Oleg Zasypkin [:azasypkin]]

Attachment: Current state on Surface screen

Comment 4

[Oleg Zasypkin [:azasypkin]]

Attachment: Proposed state on Surface screen

Comment 5

[Oleg Zasypkin [:azasypkin]]

Attachment: Proposed state on Surface screen (de-DE locale)

Comment 6

[Oleg Zasypkin [:azasypkin]]

Attachment: Current state on Surface screen (de-DE locale)

Comment 7

[Oleg Zasypkin [:azasypkin]]

Attachment: first_run_word_wrap.diff

Word break for instruction text if it's too long + I would propose to move arrow+label for the Top Sites section to the right as it doesn't have enough space below Top Sites list if instruction text is too long (ex. for de-DE locale). Please see attached screenshots for current and proposed states for both desktop and Surface and share your thought on that.

Comment 8

[Rodrigo Silveira [:rsilveira] [:rodms]]

Comment on attachment 8366844 [details] [diff] [review]
first_run_word_wrap.diff

Review of attachment 8366844 [details] [diff] [review]:
-----------------------------------------------------------------

By adding some extra padding at [1] you can avoid the topsites text overlapping with a tile on "current state", it will render less tiles though. Nit picking a little bit I feel like the German instructions for the menu button are too long and should be 2 lines. It's too close to the topsites tiles on the proposed state, maybe we need a shorter width for .instruction-content-container? The top sites instruction is further from the tiles in de-DE screenshot than in en too, not sure why.

I like the new topsites arrow and how it partially addresses bug 960613. I'd like to get mmaslaney input on the proposed layout before landing though. Code wise it looks pretty good.

[1] - http://mxr.mozilla.org/mozilla-central/source/browser/metro/theme/firstrun.css#22

Comment 9

[Oleg Zasypkin [:azasypkin]]

Thanks for feedback!

- Yes, we can add padding, but if we move Top Sites arrow to the right then we don't have to do it;
- Yep, also noticed that menu button instruction doesn't want to break into two lines. Still figuring out why;
- Top Sites instruction if further from tiles because Top Sites title is longer in German and it increases width of entire tile container. Not sure what to do with this though. Don't really want to split section titles into two lines to preserve width of container.

Comment 10

[Rodrigo Silveira [:rsilveira] [:rodms]]

(In reply to Oleg Zasypkin [:azasypkin] from comment #9)
> - Top Sites instruction if further from tiles because Top Sites title is
> longer in German and it increases width of entire tile container. Not sure
> what to do with this though. Don't really want to split section titles into
> two lines to preserve width of container.

I thought that they being left aligned they'd always start from the same position.

There is one more thing I forgot to mention: portrait and snapped mode. Right now the topsites instruction arrow is on top of the tiles in half-screen snapped mode. Plus pointing left will not work in these modes :(. Depending on mmaslaney's input, we may need to redirect the arrow in portrait mode.

Comment 11

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

The proposed state works better across the board. I wonder, is there a way to ensure that the "Top sites" arrow is closer in proximity to the tiles?

Comment 12

[Oleg Zasypkin [:azasypkin]]

(In reply to mmaslaney from comment #11)
> The proposed state works better across the board. I wonder, is there a way
> to ensure that the "Top sites" arrow is closer in proximity to the tiles?

Do you mean closer to the tiles by vertical axis? I can lift it up a bit, for Surface screen it will be opposite to the second tile and for desktop screen - opposite to the third tile.


(In reply to Rodrigo Silveira [:rsilveira] from comment #10)
> I thought that they being left aligned they'd always start from the same
> position.
> 
> There is one more thing I forgot to mention: portrait and snapped mode.
> Right now the topsites instruction arrow is on top of the tiles in
> half-screen snapped mode. Plus pointing left will not work in these modes
> :(. Depending on mmaslaney's input, we may need to redirect the arrow in
> portrait mode.

Hmm, can't reproduce the case when arrow is on top of tiles on both laptop and Surface, what is your target resolution?

Comment 13

[Rodrigo Silveira [:rsilveira] [:rodms]]

Attachment: FirstRunTopSitesOver.png

The instruction arrow on top of topsites is happening when you have only 1 row of items on the topsites. We force 3 tiles, if they can fit on the width this happens. Plus on shorter widths, if only 1 column of tiles are show, the instruction text is cut.

I think we should keep the previous arrow for portrait mode, it simplify things and look consistent with other arrows.

Comment 14

[Oleg Zasypkin [:azasypkin]]

Attachment: first_run_word_wrap.diff

I've made some changes to improve how Top Site's instruction is displayed in different modes, but I still have one concern regarding to distance between Top Site's instruction arrow and Top Sites tiles when the latter is growing due to long title text. We can fix it if we position arrow box absolutely, but I don't really like that or we can just live with it if title is not so long. Note sure whether German one is the longest. What do you think?

Comment 15

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

Comment on attachment 8367964 [details] [diff] [review]
first_run_word_wrap.diff

Can restructure the grid, so that "Recent History" aligns to the right of "Bookmarks"?

Comment 16

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

Comment on attachment 8367964 [details] [diff] [review]
first_run_word_wrap.diff

Can you provide a screen shot?

Comment 17

[Oleg Zasypkin [:azasypkin]]

Attachment: landscape.jpg

Comment 18

[Oleg Zasypkin [:azasypkin]]

Attachment: landscape_wrapped.jpg

Comment 19

[Oleg Zasypkin [:azasypkin]]

Attachment: portrait.jpg

Comment 20

[Oleg Zasypkin [:azasypkin]]

Attachment: portrait_wrapped.jpg

Comment 21

[Oleg Zasypkin [:azasypkin]]

Attachment: snapped.jpg

Comment 22

[Oleg Zasypkin [:azasypkin]]

Attachment: snapped_wrapped.jpg

Comment 23

[Oleg Zasypkin [:azasypkin]]

Added several screenshots for laptop screen, but the same idea for all resolutions, "*_wrapped" - is for long text.

Comment 24

[Rodrigo Silveira [:rsilveira] [:rodms]]

Comment on attachment 8367964 [details] [diff] [review]
first_run_word_wrap.diff

Review of attachment 8367964 [details] [diff] [review]:
-----------------------------------------------------------------

This looks amazing, thanks for taking this! Good that you figured out the menu instruction wrapping too.

::: browser/metro/theme/firstrun.css
@@ +142,5 @@
> +#start-container[viewstate="portrait"] #instruction-topsites .instruction-content-container {
> +  -moz-box-align: center;
> +}
> +
> +#start-container[viewstate="portrait"] #instruction-topsites .instruction-arrow {

How about having the 2 arrows in the xul and hide/show according to viewstate? This way we don't to change where an arrow-left-straight points to.

Comment 25

[Rodrigo Silveira [:rsilveira] [:rodms]]

Comment on attachment 8367964 [details] [diff] [review]
first_run_word_wrap.diff

didn't mean to change ui-review flag.

Comment 26

[Oleg Zasypkin [:azasypkin]]

(In reply to Rodrigo Silveira [:rsilveira] from comment #24)
> Comment on attachment 8367964 [details] [diff] [review]
> first_run_word_wrap.diff
> 
> Review of attachment 8367964 [details] [diff] [review]:
> -----------------------------------------------------------------
> 
> This looks amazing, thanks for taking this! Good that you figured out the
> menu instruction wrapping too.
> 
> ::: browser/metro/theme/firstrun.css
> @@ +142,5 @@
> > +#start-container[viewstate="portrait"] #instruction-topsites .instruction-content-container {
> > +  -moz-box-align: center;
> > +}
> > +
> > +#start-container[viewstate="portrait"] #instruction-topsites .instruction-arrow {
> 
> How about having the 2 arrows in the xul and hide/show according to
> viewstate? This way we don't to change where an arrow-left-straight points
> to.

Yeah, we can do this this way too. My main point was to store less nodes in DOM to reduce memory footprint (but probably not really noticeable in this case), just wasn't sure what is common approach for such things across the Team\Project? I came from AngularJS world where one redundant hidden div can cause a lot of junk :)

Comment 27

[Oleg Zasypkin [:azasypkin]]

Attachment: first_run_word_wrap.diff

Updated with the nit suggested by rsilveira.

Comment 28

[Rodrigo Silveira [:rsilveira] [:rodms]]

(In reply to Oleg Zasypkin [:azasypkin] from comment #26)
> Yeah, we can do this this way too. My main point was to store less nodes in
> DOM to reduce memory footprint (but probably not really noticeable in this
> case), just wasn't sure what is common approach for such things across the
> Team\Project? I came from AngularJS world where one redundant hidden div can
> cause a lot of junk :)

I think the extra node will not have a perf/memory impact as you noted. The readability maintainability is usually a bigger priority for us. Thanks for taking this and making the change!

Comment 29

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/integration/fx-team/rev/b25ece889849

Comment 30

[:Gavin Sharp [email: [e-mail]]]

https://hg.mozilla.org/mozilla-central/rev/b25ece889849

Comment 31

[Matt Brubeck (:mbrubeck)]

https://hg.mozilla.org/releases/mozilla-aurora/rev/b3ec1b166cde

Comment 32

[Manuela Muntean [Away]]

Attachment: Nightly and Aurora.zip

Verified as fixed, for iteration #23, with the latest de Nightly and Aurora builds, on Win 8.1 64-bit.


I've noticed something (please see the attached screenshots): about:start page in Aurora is completely localized, but Nightly is only partially localized. Is this expected?

Comment 33

[Francesco Lodolo [:flod]]

You shouldn't use German as a reference for central, they don't work there.

Use either Italian or French, they're usually localized rapidly. In the first case you can use me as a point of reference too.

Comment 34

[Oleg Zasypkin [:azasypkin]]

(In reply to Francesco Lodolo [:flod] from comment #33)
> You shouldn't use German as a reference for central, they don't work there.
> 
> Use either Italian or French, they're usually localized rapidly. In the
> first case you can use me as a point of reference too.

Thanks for the update Francesco, yes looks like DE locale at central is out of date.

Manuela, please use Aurora for DE locale, or IT on Nightly.

Comment 35

[Manuela Muntean [Away]]

> Thanks for the update Francesco, yes looks like DE locale at central is out
> of date.

> Manuela, please use Aurora for DE locale, or IT on Nightly.

Verified as fixed, for iteration #23, on Win 8.1 64-bit, with: latest Nightly 30.0a1 IT locale, latest Aurora 29.0a2 DE locale and latest Beta (28 beta 2) IT locale.