630621 - Cleanup about:home with relative font-sizes and cleaner Session Restore icon scaling.

Status: VERIFIED FIXED

(Firefox :: General, defect)

Description

[Alex Limi (:limi) — Firefox UX Team]

The new home page design implemented in bug 627301 has text that is too small (at least on OS X and Windows).

Assuming bug 630059 removes Preferences + About links, the most important font sizes to fix are:

1. Search input box + Search button
2. Snippet text

Making the "About Mozilla" text bigger isn't as important, IMO, but wouldn't hurt.

In general, if you go to about:home and hit Cmd-+ (Zoom) once, it looks about right. I'll let Stephen make the call on the exact font sizes (if he wants to), since it's his design.

Comment 1

[Johnathan Nightingale [:johnath]]

Cloning this bug artificially picked up blocking2.0 - moving back to a nom

Comment 2

[Alex Limi (:limi) — Firefox UX Team]

Also, using UI font (Lucida Grande on OS X?) in a web page feels a bit weird, but that's secondary.

(Sorry about the cloning making it blocking, I always forget :P )

Comment 3

[Bill Gianopoulos [:WG9s]]

(In reply to comment #0)
> In general, if you go to about:home and hit Cmd-+ (Zoom) once, it looks about
> right. I'll let Stephen make the call on the exact font sizes (if he wants to),
> since it's his design.

I think the number of zooms required to make it look right is dependent on your screen size and resolution.  I have a laptop with a 15 inch lcd display with resolution of 1920x1200.  I need to zoom 3 times to get it to look what I would consider to be right, but with zooming twice it is legible.

I have another laptop with a 1024x768 screen and zooming it 3 times on that makes it way too big.

Comment 4

[Paul O'Shannessy [:zpao] (not bugmail, email directly)]

Some additional cleanup related to the Restore Previous Session button:

* the text (on Windows at least) can be made to overlap the image
* the button feels like it should have a hand pointer
* the font looks bad (feels wrong there)

Comment 5

[Alfred Kayser]

Attachment: Screenshot of About:home with the small letters

This is on Windows 7, with default Aero Theme (Architecture) and with custom DPI 115% (my screen resolution is just too high). Anyway the default home page should have font size similar to the system default font size.

Comment 6

[Marco Bonardo [:mak]]

ugh, the search button looks bad aligned with your settings

Comment 7

[Stephen Horlander [:shorlander]]

Attachment: Cleanup About:Home - 01

This patch:

- Sets a relative font-size that should scale based on "Fonts & Colors" prefs
- Changes the font to sans-serif
- Adds a small session restore icon and just snaps between the large and small size based on media queries
- Also adds a <div> for the session restore icon instead of using a background-image
- And a -moz-transform: scaleX(-1) instead of a separate icon

Mihai does this approach look ok to you?

Comment 8

[Stephen Horlander [:shorlander]]

Attachment: Large Size Comparison

Comment 9

[Stephen Horlander [:shorlander]]

Attachment: Small Size Comparison

Comment 10

[Stephen Horlander [:shorlander]]

(In reply to comment #7)
> Created attachment 509277 [details] [diff] [review]
> Cleanup About:Home - 01
> 
> This patch:
> 
> - Sets a relative font-size that should scale based on "Fonts & Colors" prefs
> - Changes the font to sans-serif
> - Adds a small session restore icon and just snaps between the large and small
> size based on media queries
> - Also adds a <div> for the session restore icon instead of using a
> background-image
> - And a -moz-transform: scaleX(-1) instead of a separate icon
> 
> Mihai does this approach look ok to you?

Forgot to mention it also changes the cursor to a pointer on the Search button and the Session Restore button.

Comment 11

[Marco Bonardo [:mak]]

(In reply to comment #7)
> - Adds a small session restore icon and just snaps between the large and small
> size based on media queries
> - Also adds a <div> for the session restore icon instead of using a
> background-image
> - And a -moz-transform: scaleX(-1) instead of a separate icon

This is what I was trying to do with :before, but it was not possible due to the fact the icon was "fluid" and before does not allow relative sizes... since you set a fixed size for it, I bet now you can kill the div and use a 	
#restorePreviousSession:before with content: url("chrome://browser/content/aboutHome-restore-icon.png") (or the small one with media queries)

Comment 12

[Stephen Horlander [:shorlander]]

Attachment: Cleanup About:Home - 02

Use ::before thanks to mak (comment 11)

Comment 13

[Mihai Sucan [:msucan]]

Comment on attachment 509315 [details] [diff] [review]
Cleanup About:Home - 02

The patch looks fine, and the result does as well. Feedback+!

The fonts look quite big, but I like that, actually. It's better than the older versions - easier to read. ;)

Comment 14

[Marco Bonardo [:mak]]

Comment on attachment 509315 [details] [diff] [review]
Cleanup About:Home - 02

> #restorePreviousSession {
>-  -moz-padding-start: 7.5%;
>-  -moz-padding-end: 10px;
>-  height: 100%;

hm, if you remove this height (makes sense since now we don't use a background) you could maybe get rid of

#sessionRestoreContainer {
  padding-top: 1.5%;
  height: 33%; <--

unless this is needed for positioning but looks liks a strange way to achieve it since we can use padding/margin

Comment 15

[Bill Gianopoulos [:WG9s]]

(In reply to comment #12)
> Created attachment 509315 [details] [diff] [review]
> Cleanup About:Home - 02

This looks much better except that the text for the "advanced Search" and Preferences" links is still to small.  Shouldn't the font-size for searchEngineLinks be changed form 10px to .8em as well as the other changes?

Comment 16

[Marco Bonardo [:mak]]

I don't want to pile up changes, but some of the issues in Bug 631257 could be addressed easily (actually at least the stying for the non-default snippets)

Comment 17

[Stephen Horlander [:shorlander]]

(In reply to comment #14)
> unless this is needed for positioning but looks liks a strange way to achieve
> it since we can use padding/margin

Yeah removing "height: 33%;" doesn't seem to have any effect on the layout.


(In reply to comment #15)
> This looks much better except that the text for the "advanced Search" and
> Preferences" links is still to small.  Shouldn't the font-size for
> searchEngineLinks be changed form 10px to .8em as well as the other changes?

You are right. I missed that because I was running with it removed for a while. Thanks!


(In reply to comment #16)
> I don't want to pile up changes, but some of the issues in Bug 631257 could be
> addressed easily (actually at least the stying for the non-default snippets)

I am not sure I entirely understand bug 631257 so I would rather not conflate them.

Comment 18

[Stephen Horlander [:shorlander]]

Attachment: Cleanup About:Home - 03

- Removed the height on #sessionRestoreContainer
- Made the font-size on search links relative
- Added a height to the session restore icon to fix some strange blank space

Comment 19

[Stephen Horlander [:shorlander]]

Attachment: Cleanup About:Home - 03

Minor update to add a comment

Comment 20

[Stephen Horlander [:shorlander]]

Attachment: Cleanup About:Home - 03

Updated to clarify comment, has r+ from previous patch.

Comment 21

[Marco Bonardo [:mak]]

wooops, the comment in the patch was missing bug numer, I missed that :(

http://hg.mozilla.org/mozilla-central/rev/b50320be8d3a

Comment 22

[Teodosia Pop]

Verified using Mozilla/5.0 (Windows NT 6.1; rv:2.0b12) Gecko/20100101 Firefox/4.0b12.