426745 - Increase padding for prefpane icons (options, page info, addon manager)

Status: RESOLVED FIXED

(Firefox :: Theme, defect)

Description

[Alex Faaborg [:faaborg] (Firefox UX)]

Attachment: Icons in the options dialog

Right now the dialog boxes that contain 32x32 prefpane icons (options, page info, addons manager) do not have enough space above the icon.  There is currently 6 pixels of visual space below the text, and 1 pixel above the icons.  The whitespace below the text should match the white space above the icon, and every dialog box that uses this type of interface should have the same height for the prefpane area.

Comment 1

[Lim Chee Aun]

If you see carefully, it's actually 3px below the text, considering the bottom pixel of 'y'. I've DOM-inspect the prefpanes and found that the labels have bottom margin of 2px. Add it to the bottom padding of the 'pane' (radio[pane]), it totals up 3px.

So, this should be the fix, which adds extra 2px at the top of the 'pane':

radio[pane]{
padding: 3px 3px 1px !important;
}

This code only works for 'Options' window and to be put into 'browser/preferences.css'. For 'Add-ons', 'Page Info' window, it's this:

#viewGroup radio{
padding: 3px 3px 1px !important;
}

This code should be in 'mozapps/extensions/extensions.css'.

I don't understand why this is not standardized, for example, put all 'prefpane' codes under 'global/prefpane.css'.

Comment 2

[(no longer active)]

Attachment: Patch (v1)

Comment 3

[Mike Beltzner [:beltzner, not reading bugmail]]

Comment on attachment 314131 [details] [diff] [review]
Patch (v1)

After applying the bug and playing with it a bit, I actually have a couple of easy nits:

> /* Global Styles */
> #BrowserPreferences radio[pane] {
>   list-style-image: url("chrome://browser/skin/preferences/Options.png"); 
>+  padding: 3px 3px 1px;

Make this 5px 3px 1px - I know what Kai was going for, here, but I actually think we want the balance to be between the top of the icon and the edge of the white space and the text baseline and the bottom of the space, not the descender. This ends up looking more visually balanced.

> #viewGroup radio {
>   -moz-appearance: none;
>   margin: 0px 1px 0px 1px;
>-  padding: 1px 3px 1px 3px;
>+  padding: 3px 3px 1px !important;
>   min-width: 4.5em;
>   list-style-image: url("chrome://mozapps/skin/extensions/viewButtons.png");
> }

Is the !important needed?

Comment 4

[Mike Beltzner [:beltzner, not reading bugmail]]

Attachment: 5px 3px 1px, no !important

Will attach screenshots next to show what this does, before and after. I also noticed that the extensions.css has what looks to be a superfluous -moz-appearance: none, but decided to leave it be.

Comment 5

[Mike Beltzner [:beltzner, not reading bugmail]]

Attachment: before and after shots

Comment 6

[Mike Connor [:mconnor]]

Comment on attachment 317199 [details] [diff] [review]
5px 3px 1px, no !important

looks good, ship it

Comment 7

[(no longer active)]

Beltzner: did you test the Page Info dialog as well?

Comment 8

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

mozilla/toolkit/themes/winstripe/mozapps/extensions/extensions.css 	1.57
mozilla/browser/themes/winstripe/browser/preferences/preferences.css 	1.24