The default bug view has changed. See this FAQ.

Use same padding for content and header

RESOLVED FIXED in mozilla2.0b7

Status

()

Toolkit
Application Update
--
minor
RESOLVED FIXED
7 years ago
7 years ago

People

(Reporter: monreal, Assigned: monreal)

Tracking

({polish})

Trunk
mozilla2.0b7
x86
All
polish
Points:
---
Bug Flags:
in-testsuite -
in-litmus -

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(4 attachments, 2 obsolete attachments)

(Assignee)

Description

7 years ago
In the update manager window, the content area is displayed with a 10px padding in the Linux theme. The header does not use the same padding which looks strange.
(Assignee)

Comment 1

7 years ago
Created attachment 474259 [details] [diff] [review]
simple patch
Attachment #474259 - Flags: ui-review?
Attachment #474259 - Flags: review?
Michael, that is actually somewhat of a standard for wizards on Linux and Windows which this is based on though the wizard has been restyled heavily so we might take this. Can you provide a screenshot of an OS provided wizard or a major application's wizard for comparison? Thanks

btw: there are screenshots for almost all pages for all tier 1 platforms here
https://bug480178.bugzilla.mozilla.org/attachment.cgi?id=430909
Comment on attachment 474259 [details] [diff] [review]
simple patch

Removing review requests until I've had a chance to compare an OS / major app provided wizard with the app update wizard
Attachment #474259 - Flags: ui-review?
Attachment #474259 - Flags: review?
(Assignee)

Comment 4

7 years ago
(In reply to comment #2)
> Michael, that is actually somewhat of a standard for wizards on Linux and
> Windows which this is based on though the wizard has been restyled heavily so
> we might take this.

I don't think there is a "standard for wizards" at least on Linux. I think a unified padding for the whole page just looks better, as can be seen on all of the OSX screenshots you linked btw.

GNOME has a wizard widget which displays a huge header with colored background which however does not make much sense to copy in Firefox. The general guideline for dialog layout in GNOME is to have as few alignment points as possible.

The default Qt4 wizard seems to agree with me:
http://blog.paulbetts.org/wp-photos/WizardLinux.png

In contrast, KDE4 seems to do something completely different involving some image on the side:
http://3.bp.blogspot.com/_D1EpnOVJuA8/SFPW4rfrWxI/AAAAAAAAAgY/5lEgECKjSYQ/s320/kvirc1.png
http://www.kombitz.com/wp-content/uploads/2009/04/ubuntu42.jpg (yes that is a KDE shot)
http://static.howtoforge.com/images/the_perfect_desktop_slackware12/weakpasswrd6.jpg
(In reply to comment #4)
> (In reply to comment #2)
> > Michael, that is actually somewhat of a standard for wizards on Linux and
> > Windows which this is based on though the wizard has been restyled heavily so
> > we might take this.
> 
> I don't think there is a "standard for wizards" at least on Linux. I think a
> unified padding for the whole page just looks better, as can be seen on all of
> the OSX screenshots you linked btw.
Agreed and the restyling that has been done on the update UI makes it all the more reasonable to not go with what we have as the standard wizard padding.

> GNOME has a wizard widget which displays a huge header with colored background
> which however does not make much sense to copy in Firefox. The general
> guideline for dialog layout in GNOME is to have as few alignment points as
> possible.
> 
> The default Qt4 wizard seems to agree with me:
> http://blog.paulbetts.org/wp-photos/WizardLinux.png
> 
> In contrast, KDE4 seems to do something completely different involving some
> image on the side:
> http://3.bp.blogspot.com/_D1EpnOVJuA8/SFPW4rfrWxI/AAAAAAAAAgY/5lEgECKjSYQ/s320/kvirc1.png
> http://www.kombitz.com/wp-content/uploads/2009/04/ubuntu42.jpg (yes that is a
> KDE shot)
> http://static.howtoforge.com/images/the_perfect_desktop_slackware12/weakpasswrd6.jpg
What about the intermediate pages in between the start and finish pages? Most wizards have an option to have the side images for the start and finish pages and use the type of page we have with our wizard for the pages in between.
(Assignee)

Comment 6

7 years ago
(In reply to comment #5)
> What about the intermediate pages in between the start and finish pages? Most
> wizards have an option to have the side images for the start and finish pages
> and use the type of page we have with our wizard for the pages in between.

GNOME does not, using the default GTK widget at least. I have found a single GTK wizard which uses images (in the Jokosher audio editor) but they show images on *every* page, as various wizards in OpenOffice and Eclipse do.

I am not sure about KDE as I don't use it and the screenhots I found on the web mostly show the start page.

That said, none of the dialogs I found have a look that comes very close to that of the Firefox wizards which is fine I guess. In other places (tabs, toolbar look) Firefox 4 also goes for "nice and functional" over "best possible native look".
Created attachment 474354 [details]
Evolution wizard example on Ubuntu

Here is an example of what I am referring to on Linux.

Not saying that we can't or shouldn't change this at all... just that the current ui where the wizard title / subtitle (when present) often have less padding.

Can you post screenshots of before and after the patch for comparison? This will make it easier to get the ui review.

It might make sense to change this on Windows as well if we take this change.
(Assignee)

Comment 8

7 years ago
Created attachment 474355 [details]
Before - After

Ok here's a before-after shot.

Regarding Evolution: the wizards here are not a shiny example because they do strange things like center alignment of content on some pages, so they do not really fit in well even in GNOME (and being part of it)
Comment on attachment 474355 [details]
Before - After

Alex, do you think we should change the ui as in the screenshot? If so, we should probably do the same thing for Windows.
Attachment #474355 - Flags: ui-review?(faaborg)
Attachment #474355 - Flags: ui-review?(faaborg) → ui-review+
Comment on attachment 474259 [details] [diff] [review]
simple patch

Please do the same for the winstripe theme. Don't worry about verifying that it looks right if you don't have a windows build environment... I can do so.

Thanks for the patch!
Attachment #474259 - Flags: review-
Assignee: nobody → michael.monreal+moz
Changing platform to all since this also affects Windows though it doesn't affect Mac OS X since the current styling on Mac OS X is to align the text
OS: Linux → All
(Assignee)

Comment 12

7 years ago
Created attachment 474488 [details] [diff] [review]
Patch for Win+Lin
Attachment #474259 - Attachment is obsolete: true
Attachment #474488 - Flags: review?(robert.bugzilla)
Created attachment 474578 [details]
screenshot on ubuntu

In the before an after screenshot you have the same height but the patch changes the vertical padding and hence the height as seen in this screenshot. Let's go with half the vertical padding (e.g. padding: 5px 10px;).
Comment on attachment 474488 [details] [diff] [review]
Patch for Win+Lin

This is different than the before / after screenshot. Minusing and will r+ a patch that implements comment #13
Attachment #474488 - Flags: review?(robert.bugzilla) → review-
(Assignee)

Comment 15

7 years ago
(In reply to comment #14)
> This is different than the before / after screenshot. Minusing and will r+ a
> patch that implements comment #13

Oh sorry... I think I initially tested with padding-left only :/

Do we really want to increase vertical padding at all (assuming it is not 5px already which I need to look up first)? The ui-review is for the horizontal change only.
Not increasing it would be fine
(Assignee)

Comment 17

7 years ago
Created attachment 474658 [details] [diff] [review]
updated patch

I tested with and without the vertical padding and it looks better without, so I went for padding: 0px 10px
Attachment #474488 - Attachment is obsolete: true
Attachment #474658 - Flags: review?(robert.bugzilla)
Attachment #474658 - Flags: review?(robert.bugzilla)
Attachment #474658 - Flags: review+
Attachment #474658 - Flags: approval2.0?
Keywords: polish
Attachment #474658 - Flags: approval2.0? → approval2.0+
Pushed to mozilla-central
http://hg.mozilla.org/mozilla-central/rev/5c73393cd77a
Status: NEW → RESOLVED
Last Resolved: 7 years ago
Flags: in-testsuite-
Flags: in-litmus-
Resolution: --- → FIXED
Target Milestone: --- → mozilla2.0b6
You need to log in before you can comment on or make changes to this bug.