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.

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

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.

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

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?

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

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.

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 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 on attachment 8367964 [details] [diff] [review] first_run_word_wrap.diff Can you provide a screen shot?

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

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 on attachment 8367964 [details] [diff] [review] first_run_word_wrap.diff didn't mean to change ui-review flag.

(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 :)

Updated with the nit suggested by rsilveira.

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

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?

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.

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

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