488687 - Text for Buttons in Pref > Advanced pane is misaligned

Status: RESOLVED FIXED

(Firefox :: Settings UI, defect)

Description

[Neetij]

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.4; en-GB; rv:1.9.1b3) Gecko/20090305 Firefox/3.1b3
Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.4; en-GB; rv:1.9.1b3) Gecko/20090305 Firefox/3.1b3

On the Preferences > Advanced pane, the buttons for General, Network, Update, Encryption do not display properly. The text of these buttons is bottom aligned. It should middle aligned.
Please see the URL link for a screenshot.

I searched the buglist, but didn't find any applicable bugs for 'preferences' and 'advanced' for FF 3.0, 3.1 branches. I'm sorry if this is a dupe.

Reproducible: Always

Steps to Reproduce:
1. Open Preferences > Advanced



Just upgrade to 3.1b3 from 3.0.4 on Mac OS 10.4.11.

Comment 3

[Ernst de Haan]

Attachment: Screenshot showing the issue in Firefox 3.5 (nl_NL) on Mac OS X 10.5.7

Comment 4

[Markus Stange [:mstange]]

Huh... how can this happen?
So the bug is that the font that's used is wrong. It should be bigger and not bold.

Neetij, Carlos or Ernst, could somebody of you attach a screenshot of the Page Info window? (Right-click on any page and choose "View Page Info".)
The same font style is used for the tab buttons there, so if the text on those buttons is too small and bold, too, we know that the problem lies with "font: menu".

Comment 5

[u220127]

Attachment: Page info screenshot

Here is the Page Info screenshot — text on tabs looks Ok.

Comment 6

[Markus Stange [:mstange]]

Thanks, Dmitry; yeah, that looks ok. Then we can outrule "font: menu".

Let's try this: Can somebody of you who sees the bug install the DOM Inspector ( https://addons.mozilla.org/en-US/firefox/addon/6622 ) and see which CSS rule sets the font on the tabs?

Basically, what you need to do is:
1. Install DOMI, restart Firefox.
2. Open DOMI (using Tools -> DOM Inspector).
3. Open the preferences window and go to the Advanced panel.
4. Focus DOMI. From the menu, choose File -> Inspect Chrome Document ->
   "Advanced" (this is the preferences window).
5. In DOMI, click the "Find a node" button in the top left corner, focus the
   preferences window, and click one of the wrong-looking tabs.
6. In the right panel of DOMI, click the icon in its top left corner (next to
   "Object - DOM Node"), and choose "CSS Style rules".
7. Now check each rule in the list and see if it sets a font related property.
   If it doesn't, go to the parent element in the tree in the left pane and
   check again.
8. If you find the place where the font is set, tell me the file and line that
   sets it, and also the value that the font properties are set to.

E.g. on my machine I can see that the "-x-system-font" property is set to "menu" by tabbox.css, line 23, on the "tabs" element, which is the parent element of the "tab" elements.

Comment 7

[Neetij]

Hi Markus,
I followed your steps to get the CSS styles.
I too have the "-x-system-font" property set to "menu" in the tabbox.css (line 23) file, on the parent element (#tabsElement).

Comment 8

[u220127]

There is a suspicious-looking
   margin-bottom: -12px
in tabbox.css, line 28

Other than that, just as you said, only
    font-[xxx]: -moz-use-system-font
    ...
    -x-system-font: menu
in tabbox.css, line 23

and on the top-level (prefwindow node)
x-system-font is set to -moz-dialog or message-box multiple times for rules like window, page, dialog, wizard, prefwindow

but I don't know if that's relevant

Comment 9

[Markus Stange [:mstange]]

Hmm, this is confusing.

Maybe try checking the tab's child elements, too? There's a hbox and a label inside the tab, maybe the font is set on those?

Another idea is to check the computed style: Go into the "Computed Style" view (instead of the "CSS Style rules" view) and look at the value of "font-size" for all the elements in the hierarchy. I'd guess that at some point it changes from 13px to 11px. It would be interesting to see if / where that happens.

(In reply to comment #8)
> There is a suspicious-looking
>    margin-bottom: -12px
> in tabbox.css, line 28

That's ok, that only makes the tabs extend into the tabpanel border.

Comment 10

[u220127]

This looks like what you need:

tab->xul:hbox->xul:label

font-weight:bold
-x-system-font: message-box
text-shadow: 0pt 1px 0pt rgba(255, 255, 255, 0.4)
margin-top: 3px;
margin-bottom: 0pt

browser.css, line 1513

Comment 11

[Neetij]

Well, I edited a few elements to see what changed. Several restarts later, I've found an answer...
 
It's not the 'margin-bottom' declaration from line 28. That styles the content area below (with the emboss effect), who's top border hits the mid-height of the tabs.

The fix, taking the instance of the General tab:
Inside the 'generalTab' element, enter xul:hbox > xul:label.
On line 1530 of 'browser.css' on the '.tab-text' rule. The property '-x-system-font' has a value of 'message-box'.
Set this to 'menu' to get the tab text to display correctly. The font size is larger, but it finally does appear centered vertically.

Comment 12

[Neetij]

Guess Dmitry got it... :) Does setting the margin-top to 0px fix it?

The line numbers on browser.css _are_ different however.

Comment 13

[Markus Stange [:mstange]]

Nice! Now we've got the answer from two independent sources ;-)

So the question now is: Why is browser.css applied in your preferences window, but not in mine? I guess it's the fault of some extension, but which is it?
Unfortunately I don't know of an easy way to find that out, so maybe you'll have to disable your extensions one by one...

Comment 14

[u220127]

(In reply to comment #13)
Ok, delicious.com official extension seems to be the problem.
https://addons.mozilla.org/ru/firefox/addon/3615

Thanks for the help with finding what was wrong.

Comment 15

[u220127]

I'll write a bug report to the extension's support team. Maybe they'll fix it.

Comment 16

[Markus Stange [:mstange]]

Great work everybody!

Comment 17

[Markus Stange [:mstange]]

Attachment: make the selector safer

Dão, do you think it's worth doing this?

Comment 18

[Dão Gottwald [:dao]]

Comment on attachment 386288 [details] [diff] [review]
make the selector safer

Makes sense, although a non-tabbrowser tabbar in the main window seems unlikely.

The same applies to winstripe.

Comment 19

[Ernst de Haan]

(In reply to comment #14)
> (In reply to comment #13)
> Ok, delicious.com official extension seems to be the problem.
> https://addons.mozilla.org/ru/firefox/addon/3615

Confirmed, I did have the specified extension installed on the Firefox instance I noticed the problem on. On another instance (with same OS and Firefox locale/version), which does not have that extension, the tab bar indeed looks good.

Comment 20

[Markus Stange [:mstange]]

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