MozillaZine

Enlarge GUI dialog buttons in Thunderbird

Discuss application theming and theme development.
patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted October 28th, 2013, 8:39 pm

The buttons are drawn by the OS. Their height is defined by two things: the OS font size, plus the padding you see there in the default theme code. That is why they are not automatically resizing themselves when you change the font size from within Firefox. If you changed the font size at the OS level, they should automatically adjust.

If you want to change font sizes from within Firefox, you should change many widgets to use em-based sizes. em units are (roughly) based on the height and width of the capital letter M in the selected font. So instead of defining a pixel-based height, if you used min-height:2em!important, then the buttons would automatically adjust their size to fit your fonts. Note that you should not define the height or max-height or you will have problems elsewhere.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

David.P
 
Posts: 181
Joined: July 25th, 2006, 11:27 am

Post Posted October 28th, 2013, 9:44 pm

No way that the OS draws the XUL buttons of Mozilla products! Just because the theme looks like MS Office (which is also its name and only purpose btw.), the dialogs and buttons are by no way drawn by the Windows graphics toolbox!

Or, if there IS a way, someone pls. point me to a white paper or something that tells us how the Windows graphics subsystem is supposed to place buttons (that are however still controllable by CSS code, as can be seen from my postings) and stuff on XUL windows and XUL dialogs.

Please.

Oh, and the button font and size (here) has nothing to do with the OS. The font I have specified manually in userchrome.css, and its size is controlled by the "theme font and size changer" addon.

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted October 28th, 2013, 10:55 pm

David.P wrote:No way that the OS draws the XUL buttons of Mozilla products! Just because the theme looks like MS Office (which is also its name and only purpose btw.), the dialogs and buttons are by no way drawn by the Windows graphics toolbox!

Or, if there IS a way, someone pls. point me to a white paper or something that tells us how the Windows graphics subsystem is supposed to place buttons (that are however still controllable by CSS code, as can be seen from my postings) and stuff on XUL windows and XUL dialogs.


No-one here to my knowledge is a Mozilla Gecko Core C++ programmer. All that I know is that widgets and window borders given appropriate -moz-appearance defaults use the OS styling. HOW that happens is either via the OS or magic, considering it is highly unlikely that the Gecko Core contains custom styling instructions for every possible widget in every possible OS in every possible OS version in every possible OS theme, I vote that the OS does it.

As far as white papers go... um... welcome to Mozilla. Good luck finding such a thing for any part of Firefox, especially parts relating to themeing, where most of the official documentation is now nearly a decade old and mostly useless.

David.P wrote:Oh, and the button font and size (here) has nothing to do with the OS. The font I have specified manually in userchrome.css, and its size is controlled by the "theme font and size changer" addon.


I'm quite aware of this, as you will note if you carefully read what I wrote. The reason the heights were weird is because the height of the button was being calculated based on the OS button font size, OS button borders, and the padding provided by the Firefox default theme. Your modified font size was ignored because the OS has no way of seeing that, and therefore no way of providing the appropriate heights.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted October 28th, 2013, 11:07 pm

Here is an excerpt from a book published a decade ago by a Netscape programmer, showing (although not in great detail) how XUL widgets are styled by OS GUI libraries:
http://mb.eschew.org/4
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

David.P
 
Posts: 181
Joined: July 25th, 2006, 11:27 am

Post Posted October 29th, 2013, 2:39 am

patrickjdempsey wrote:The reason the heights were weird is because the height of the button was being calculated based on the OS button font size, OS button borders, and the padding provided by the Firefox default theme. Your modified font size was ignored because the OS has no way of seeing that, and therefore no way of providing the appropriate heights.

I don't think so.

Left: native TB button, middle: native OS button, right: TB theme button.
ImageImageImage

Rather and simply, the theme programmer probably has used a fixed height for his buttons.

patrickjdempsey wrote:Here is an excerpt from a book published a decade ago by a Netscape programmer, showing (although not in great detail) how XUL widgets are styled by OS GUI libraries:
http://mb.eschew.org/4


Thanks. From there I learn that TB indeed has loads of built-in OS themes that are chosen depending on the OS found:

Image

smsmith
Moderator

User avatar
 
Posts: 19797
Joined: December 7th, 2004, 8:51 pm
Location: Indiana

Post Posted October 29th, 2013, 6:30 am

There are two ways for elements to be drawn. If you use -moz-appearance: <element-type>, the standard OS style element is drawn. If you use -moz-appearance: none, it is up to the theme to give all the styling information. From my gander through the code, this appears to be the route taken by the theme you are using. However, the theme author hard coded some height information that when the button ran up against your font size broke the buttons.

Default Firefox and Thunderbird themes use the OS styling whenever possible, especially for dialogs. It makes accessibility a lot easier (for when someone comes along and makes their font sizes large, for instance :D ).

And... cue Frank to come and edify me as to the other ways buttons / elements are created and styled. :mrgreen:
Give a man a fish, and he eats for a day. Teach a man to fish, and he eats for a lifetime.
I like poetry, long walks on the beach and poking dead things with a stick.
Please do not PM me for personal support. Keep posts here in the Forums instead and we all learn.

David.P
 
Posts: 181
Joined: July 25th, 2006, 11:27 am

Post Posted October 29th, 2013, 6:38 am

smsmith wrote:There are two ways for elements to be drawn. If you use -moz-appearance: <element-type>, the standard OS style element is drawn.

OK...

...."the standard OS style element is simulated", I'd say for clarity, because not the OS but XUL draws the element, trying to mimic the standard OS style element using saved CSS descriptions (OS "themes").

smsmith wrote:However, the theme author hard coded some height information that when the button ran up against your font size broke the buttons.

That's what I also thought.

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted October 29th, 2013, 2:20 pm

David.P wrote:Left: native TB button, middle: native OS button, right: TB theme button.
ImageImageImage


I see three buttons styled by the OS:

Left: OS-styled button with large font.
Middle: OS-styled button medium font.
Right: OS-styled button with special selector to show that it is the selected button, and an over-sized font which the OS cannot see so it is styling at the wrong size.


David.P wrote:Thanks. From there I learn that TB indeed has loads of built-in OS themes that are chosen depending on the OS found:


The Modern Theme is a Full Theme which was rolled into Mozilla and now SeaMonkey as an alternative to the default theme which uses OS styling. It functioned identically to any other Complete Theme that you download from AMO. Neither Firefox nor Thunderbird ships with this alternative theme.

David.P wrote:...."the standard OS style element is simulated", I'd say for clarity, because not the OS but XUL draws the element, trying to mimic the standard OS style element using saved CSS descriptions (OS "themes").


Sigh. I give up. Believe whatever you want. All you have to do is install a Windows Blind to see that the styling of widgets comes from the OS and not from within Firefox.
Last edited by patrickjdempsey on October 29th, 2013, 2:29 pm, edited 2 times in total.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

David.P
 
Posts: 181
Joined: July 25th, 2006, 11:27 am

Post Posted October 29th, 2013, 2:27 pm

patrickjdempsey wrote:
David.P wrote:...."the standard OS style element is simulated", I'd say for clarity, because not the OS but XUL draws the element, trying to mimic the standard OS style element using saved CSS descriptions (OS "themes").

Sigh. I give up. Believe whatever you want. All you have to do is install a Windows Blind to see that the styling of widgets comes from the OS and not from within Firefox.

Yes. The styling (possibly measurements, possibly fonts, possibly colors etc.). But XUL draws the buttons, not the OS. Which is why the XUL-drawn buttons may look similar (and if lucky, equal) to native OS buttons, but don't constitute native OS buttons.

That's all I'm saying.

Edit:
Ahh, you're talking "widgets" -- but I was talking about buttons.

If widgets is this:
Image

...i.e. window decoration and borders, this is of course drawn by the OS.

But not dialog box content like buttons etc. That is pure XUL, possibly with OS themes on it.
Last edited by David.P on October 29th, 2013, 2:33 pm, edited 1 time in total.

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted October 29th, 2013, 2:32 pm

Semantics. Like I said, it would take a Gecko Core developer to describe to you exactly HOW native OS Theme GUI Libraries are used, but the styling comes from the OS. Anyway, I give up. Good luck.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

David.P
 
Posts: 181
Joined: July 25th, 2006, 11:27 am

Post Posted October 29th, 2013, 2:36 pm

Not semantics but different categories. Mozilla applications are entirely rendered by the Gecko Engine, the same engine that renders the web pages' content. They are by no means rendered by the OS'es runtimes.

The OS only provides the window decoration, for FF and TB. Inside the windows, all is drawn by Gecko.

David.P
 
Posts: 181
Joined: July 25th, 2006, 11:27 am

Post Posted November 4th, 2013, 5:59 am

The extension programmer has fixed it.

before:
Image

after:
Image

And no, these Buttons are by no means "drawn by the OS". This is all pure XUL & CSS (other than the window decoration which of course is OS-drawn).

:-& 8-)

Cheers David.P

Frank Lion

User avatar
 
Posts: 20160
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted November 4th, 2013, 7:33 am

patrickjdempsey wrote:Anyway, I give up. Good luck.

Told you. I can spot them instantly.

For the benefit of anyone reading this thread in the future and who may be confused by it all, I would add just this - the OP is talking out of their backside on this subject. Never trust anyone who cannot even read the DOM Inspector. ;)
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

David.P
 
Posts: 181
Joined: July 25th, 2006, 11:27 am

Post Posted November 4th, 2013, 7:52 am

Hic rhodus, hic salta.

You post evidence of your claims (that the OS draws Mozilla dialog buttons): Me and anyone reading this thread in the future sees and believes.

You don't: evidently your claims are wrong.

Which is the current state of the thread.

Its up to you to change it.

Cheers.

David.P
 
Posts: 181
Joined: July 25th, 2006, 11:27 am

Post Posted November 4th, 2013, 9:28 am

For completeness:

"-moz-appearance causes XUL elements to be drawn similar to the way the user's system draws such elements"

Note that the definition says:

  • "XUL elements are drawn [by Gecko] SIMILAR to the way the user's system draws elements"
not
  • "XUL elements are drawn by the user's system"

Thus, the -moz-appearance CSS property is used by Gecko to display an element using a platform-native styling (sic) based on the operating system's theme [built into XUL.dll].

Sincerely
David.P

Return to Theme Development


Who is online

Users browsing this forum: No registered users and 1 guest