539765 - Use fonts/colors which fit the native Windows look-and-feel better

Status: RESOLVED INCOMPLETE

(Toolkit :: Themes, defect)

Description

[Stanimir Stamenkov]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.7) Gecko/20100104 SeaMonkey/2.0.2 (Spidey)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.7) Gecko/20100104 SeaMonkey/2.0.2

Since years, I'm using the following style rules placed in my "userChrome.css" to better match the native Windows look-and-feel, and so use my system settings as it should:

/*
 * Windows applications (at least Microsoft ones) generally use
 * the "Icon" font for the content of top-level/main windows.
 */
window {
  font: icon !important;
}

/*
 * Dialogs and other non-main windows use the "Message Box" font.
 */
dialog, wizard, page {
  font: message-box !important;
}

/*
 * The status bar uses the "ToolTip" font.
 */
statusbar, tooltip {
  font: status-bar !important;
}

/*
 * UI components other than menus and the status bar generally
 * inherit the font of their parent window: "Icon" for main
 * windows and "Message Box" for dialogs.
 */
button {
  font: inherit !important;  /* Was 'menu'. */
}

/*
 * The following "3D Objects" should use the corresponding
 * foreground color (ButtonText being the direct CSS equivalent)
 * and not the "Window Text" one (the default).
 */
statusbar, tab, treecol, toolbarbutton {
  color: ButtonText !important;
}
toolbarbutton[disabled=true] {
  color: GrayText !important;
}

I think the comments to the rules are self-explanatory.  The !important keyword is just because the rules are intended for inclusion in the "userChrome.css" as given.  Some of the rules are redundant (the "dialog, wizard, page" - they already use the 'message-box' font), but I've included them for completeness.  The last one would not be necessary if the preceding one has been part of the default theme.  The last rule may not have any effect with the newer (Gecko 1.9.1+) disabled caption rendering, also.

Probably the most visible change (to me) is the usage of the 'icon' font in the main application windows.  As I've written in the comment for it, this is what I've observed conventionally used in Windows programs, most notably Microsoft own ones (but not only): Windows / Internet Explorer, Outlook Express, Visual Studio 2003/2005.  Currently the 'message-box' font is used exclusively for all but the menu components.

These rules don't change the appearance when used with a standard Windows theme because the font and text color used for all different components are usually the same.


Reproducible: Always

Steps to Reproduce:
1. Choose a standard Windows theme;
2. Open a Windows Explorer window, a Firefox one and take a look at them;
2. Go to the "Advanced Appearance" Display Properties dialog (Control Panel -> Display);
3. Change the "Icon" font to something you'll notice the difference (in my example shots I've chosen 10pt Georgia);
4. Change to "Window" text color to something you'll notice the difference (in my example shots I've choose some green);
5. Exit Firefox and restart it, open a new Windows Explorer window also - observe where, on which components the customizations you've just made appear.

Actual Results:  
Firefox doesn't use the "Icon" font Windows display setting for UI components in its main window.  Firefox wrongly apply the "Window" text color setting for the foreground/text color of "3D Objects" like buttons, tabs and the status bar.


Expected Results:  
Firefox should use the "Icon" font Windows display setting as the main font in top-level/main windows.  Firefox should use the "3D Objects" foreground color setting (ButtonText being the direct CSS equivalent) for buttons, tabs and the status bar.


All of the above equally apply to Thunderbird and SeaMonkey.

Comment 1

[Stanimir Stamenkov]

Attachment: Windows Explorer

Screen shot of Windows Explorer window using the customizations given in the steps to reproduce in the bug description:

1. The window uses the "Icon" font most of its UI;
2. The "3D Objects" like buttons and table column headers don't use the customized "Window" text color (green).

Comment 2

[Stanimir Stamenkov]

Attachment: Internet Explorer

Using the same customizations.

Comment 3

[Stanimir Stamenkov]

Attachment: Firefox

Firefox using the customizations:

1. Doesn't use the "Icon" font at all;
2. Wrongly uses the "Window" text color for the foreground of "3D Objects" like toolbar buttons, tabs and the status bar (the last one not being captured in the shot).

Comment 4

[Stanimir Stamenkov]

Attachment: Firefox Fixed

Firefox with fixed appearance using the style rules provided in the bug description.

Comment 5

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

So you're asking that Firefox observe the changes to the fonts and colours based on the Windows theme customizations you've made, right?

Comment 6

[Alfred Kayser]

This about using the windows system colors and fonts settings, as defined in 'Display Properties/Appearances' in Firefox in the same way, as other windows applications do. So if one specifies a specific font for 'Icon' in 'Display Properties/Appearances' it will be used in applications, but menu's, statusbar, etc uses 'message-box'. This is Windows XP, not sure how this is in Vista/7

Comment 7

[Stanimir Stamenkov]

(In reply to comment #5)
Yes, pretty much what Alfred Kayser explained.  I'm on Windows XP but I've observed the rules I've given of using font/color settings in applications, since WinNT 4.0, then on Win2000 and if I recall correctly on Vista (the last time I've used it).  I'm pretty sure it would be the same with Windows 7, but someone with such system could tell better.

Comment 8

[Stanimir Stamenkov]

Note I'm using the given "native theme" customizations not only with Firefox, but with Thunderbird and SeaMonkey.  I think any XUL application using the customizations will fit the Windows look&feel better.  I've initially posted this request in the mozilla.dev.apps.seamonkey group (as I'm mostly a SeaMonkey user), but I've been suggested the given customizations belong in winstripe and I should file a bug in Toolkit.

Comment 9

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

We need to check this modification against the behavior of other versions of Windows, although assuming they are all the same then it's worth picking up the change to follow along with the user's customizations.

Thanks for catching this, I've actually never modified my default fonts on Windows.

Comment 10

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

Also if you see any similar mistakes we are making on Windows, please file :)

(one of the significant downsides of the Mozilla community not regularly using Windows is that stuff like this tends to slip through the cracks)

Comment 11

[Alfred Kayser]

Note, the following:
window {
  font: icon !important;
}
is confusing for a lot of people. I have tried this in my themes, and people react that they don't understand the change.

Comment 12

[Stanimir Stamenkov]

Could you post screen shot(s) comparing the original and the other version?  Note the changes target the native theme.  The the actual fonts used should not change if people use standard Window theme, also.  People could find it confusing if they have customized their 'icon' font (so they appear to want and see it different in Explorer), but have used to not see any effect in Mozilla.

Comment 13

[Stanimir Stamenkov]

(In reply to comment #11)
> is confusing for a lot of people... they don't understand the change.

The comment is a bit vague to me.  Do they notice any change?  If they don't notice a change, perhaps they use a standard Windows theme, or they use the same 'icon' and 'message-box' font, and I think that's o.k.

Comment 14

[Stanimir Stamenkov]

(In reply to comment #6)
> ... This is Windows XP, not sure how this is in Vista/7

Now that my near 10 years old machine running Win XP has burnt up, I've bought a new one running Win 7 and I can confirm the same rules appears to apply with it too.

Comment 15

[Stanimir Stamenkov]

Here's some technical documentation to the point:

SystemParametersInfo Function <http://msdn.microsoft.com/en-us/library/ms724947(VS.85).aspx>

SPI_GETICONTITLELOGFONT is the font which should be used in the client area of windows.  SPI_GETNONCLIENTMETRICS is used to get information about other user font settings (for caption/title bar, small caption/palette title, menu, message box, status/tooltip):

NONCLIENTMETRICS Structure <http://msdn.microsoft.com/en-us/library/ff729175(VS.85).aspx>

Obviously Mozilla already knows about these as it correctly references them from the CSS engine:

http://www.w3.org/TR/CSS21/fonts.html#x11

It is that the default XUL style sheet doesn't use them as expected on Windows.