Themes rejected.. window controls and titlebar theming.

Discuss application theming and theme development.
Post Reply
User avatar
mcdavis
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Re: Themes rejected.. missing window controls 4.0b1, Win7

Post by mcdavis »

Code: Select all

@media all and (-moz-windows-compositor) {
  #main-window[windowtype="navigator:browser"] {
    -moz-appearance: -moz-win-borderless-glass;
    background: url("chrome://global/skin/default-window-gradient-bg.png") repeat-x top left #181818;
  }

  /* windowtype is used to boost specificity over my other rules ...
   * you can probably leave that part off.
   * chromemargin makes it apply only when the menubar is hidden and the fx button is shown.
   */
  #main-window[windowtype="navigator:browser"][chromemargin] {
    background: url("chrome://global/skin/default-window-gradient-bg.png") repeat-x 0px 8px transparent;
  }
}

/* This rule handles the maximized-window case.
 * When maximized, window origin is (appears to be) about 8px
 * outside actual display area,
 * resulting in cropped firefox button unless you do this.
 * 8px is (I'm guessing) apparently the width of the frame in glass modes.
 * Not sure how this should be handled in non-glass modes,
 * or when users have altered this width through desktop
 * setup or with desktop themes.
 */
#main-window[sizemode="maximized"] #appmenu-button {
  margin-top: 8px;
}


This is working OK for me with the latest nightly. There are still a couple very minor problems with the border on the window control buttons, but you have to look close to notice. Other than that, the window looks like a normal kind of window.

I had to add that 8px background offset so you could see the top edge of the window frame. Otherwise the background covered all the way to the top, like here:

http://i54.photobucket.com/albums/g112/ ... enshot.png

If you use a completely transparent background on #main-window, you get glass going all the way down behind the toolbar, which looks OK depending on what you're trying to do with your theme. (I won't be doing that.)
Last edited by mcdavis on September 20th, 2010, 2:55 am, edited 8 times in total.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
User avatar
mcdavis
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Re: Themes rejected.. missing window controls 4.0b1, Win7

Post by mcdavis »

Zigboom wrote:Can anyone please explain how can it be that the default theme works (if it really does), while our themes fail?


I was wondering that too. As of yesterday's nightly, here's how -moz-appearance was being used:

Code: Select all

window                                      -moz-win-borderless-glass
  vbox#titlebar                             -moz-win-titlebar
    hbox#titlebar-content                   none
      hbox#appmenu-button-container         none
        button#appmenu-button [+]           none
      spacer#titlebar-spacer                none
      hbox#titlebar-buttonbox               -moz-window-button-box
        toolbarbutton#titlebar-min [+]      -moz-window-button-minimize
        toolbarbutton#titlebar-max [+]      -moz-window-button-maximize
        toolbarbutton#titlebar-close [+]    -moz-window-button-close
  deck#tab-view-deck                        none
    vbox                                    none
      toolbox#navigator-toolbox [+]         none
      hbox#browser [+]                      none
      vbox#browser-buttombox [+]            none
      svg:svg [+]                           none


I found this to be pretty useful (the bit about extending the window frame into and behind the client area):

http://msdn.microsoft.com/en-us/library ... 85%29.aspx

It suggests that values set on [chromeMargin] correspond (somehow, maybe transformed by Firefox) to values passed in to DwmExtendFrameIntoClientArea().
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
User avatar
mcdavis
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Re: Themes rejected.. missing window controls 4.0b1, Win7

Post by mcdavis »

Any idea where the mystery 8px padding-top on maximized #titlebar comes from?
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
User avatar
Zigboom
Posts: 475
Joined: April 22nd, 2009, 5:09 am

Re: Themes rejected.. missing window controls 4.0b1, Win7

Post by Zigboom »

Hi guys,
Is there still no solution? does all themes get rejected for Windows?
Let's say, if we don't style the titlebar & use the code from the official Firefox Beta, is there a solution that works?
I tried that already, thought that I copied the exact code & my theme got rejected (missing window controls on Aero), am I missing something?
Unfortunately I cannot even test on Aero so I have no idea what the symptoms are on my themes.

I'd like to have the code, including the window buttons & upper window frame (not styled, default Windows theme appearance) that will get approved, without any missing window controls. can someone please post it?
-=# LavaFox & Black Fox - Dark & hot themes for Firefox #=-
https://addons.mozilla.org/en-US/firefox/user/4710003/
User avatar
Zigboom
Posts: 475
Joined: April 22nd, 2009, 5:09 am

Re: Themes rejected.. missing window controls 4.0b1, Win7

Post by Zigboom »

I have a question, based on the code above posted by mcdavis & the code I found on the default theme, in case that I don't wish to style the titlebar for now, will this code sort out the missing window-controls on Aero Glass?

@media all and (-moz-windows-compositor) {
/* these should be hidden w/glass enabled. windows draws it's own buttons. */
#titlebar-buttonbox {
display: none;
}

#main-window:not(:-moz-lwtheme) {
-moz-appearance: -moz-win-borderless-glass;
background: transparent;
}
}

EDIT: I see that wallnut is the only theme that got updated, congratulation akayser! please share some insights.
-=# LavaFox & Black Fox - Dark & hot themes for Firefox #=-
https://addons.mozilla.org/en-US/firefox/user/4710003/
User avatar
akayser
Posts: 299
Joined: August 25th, 2010, 12:44 am

Re: Themes rejected.. missing window controls 4.0b1, Win7

Post by akayser »

This is what I have:

Code: Select all

/* For Glass, we need to do this */
@media all and (-moz-windows-compositor)
{
#titlebar-buttonbox{display:none}
#main-window #titlebar{
   border-bottom:0!important;
   padding-bottom:2px!important;
   background-image:url(chrome://global/skin/hout-hover.png);
   -moz-box-shadow:none!important;
   margin-bottom:0!important}
#main-window[chromemargin]{
   -moz-appearance:-moz-win-borderless-glass;
   background:transparent}
#main-window[chromemargin]:not(:-moz-lwtheme)[inFullscreen="true"]{
   -moz-appearance:none;
   background-image:url(chrome://global/skin/hout.png)}
#tab-view-deck{
   margin-top:0!important;
   background-image:url(chrome://global/skin/hout.png)}
#TabsToolbar[tabsontop="true"]{
   margin:0!important}
#appmenu-button[type]{
   margin-top:3px!important;
   margin-bottom:0!important}
#tab-view{
   border-top:2px solid;
   -moz-border-top-colors: #B36F00 #EED4A2}   
}


The minimum is:

Code: Select all

@media all and (-moz-windows-compositor)
{
#titlebar-buttonbox{display:none}
#main-window[chromemargin]{
   -moz-appearance:-moz-win-borderless-glass;
   background:transparent}
#main-window[chromemargin]:not(:-moz-lwtheme)[inFullscreen="true"]{
   -moz-appearance:none}
}

The trick is to apply -moz-win-borderless-glass and transparent background to the main-window, but only for FF4, so [chromemargin] is used to for that. And to hide the titlebar-buttonbox, as noticed before.
To prevent to everything becomes transparent/glass, one needs to specify background color/image on tab-view-deck (which is also FF4 only).
Creator of the LittleFox, LittleBird, MicroFox, MicroBird, Nautipolis, Walnut, Walnut2, Bricks and Metal themes for Firefox and Thunderbird.
Visit https://addons.mozilla.org/en-US/firefox/addon/123/developers. Mozilla contributor since October 1999 (Mozilla M10).
User avatar
Zigboom
Posts: 475
Joined: April 22nd, 2009, 5:09 am

Re: Themes rejected.. missing window controls 4.0b1, Win7

Post by Zigboom »

Thank you so much akayser !!!!!
That's a very clear info.
Now I fully understand the logic behind the code that deals with the title-bar & window-buttons.
Just one question, I couldn't find any info about tab-view, what is it exactly? How can I see how it's styled?
-=# LavaFox & Black Fox - Dark & hot themes for Firefox #=-
https://addons.mozilla.org/en-US/firefox/user/4710003/
User avatar
akayser
Posts: 299
Joined: August 25th, 2010, 12:44 am

Re: Themes rejected.. missing window controls 4.0b1, Win7

Post by akayser »

Tabview is also known as Tab Panorama or Tab Groups, one of the new features of FF4.
Press Ctrl-Space to activate it in FF4, and use DOM inspector to analyze its setup.
Creator of the LittleFox, LittleBird, MicroFox, MicroBird, Nautipolis, Walnut, Walnut2, Bricks and Metal themes for Firefox and Thunderbird.
Visit https://addons.mozilla.org/en-US/firefox/addon/123/developers. Mozilla contributor since October 1999 (Mozilla M10).
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: Themes rejected.. missing window controls 4.0b1, Win7

Post by patrickjdempsey »

If you look in the default theme, I think it's just everything in the tab-view folder. There's some image redundancy in there, so you can redirect the images for the closers and the search button to ones you already have in your theme.
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/
User avatar
Zigboom
Posts: 475
Joined: April 22nd, 2009, 5:09 am

Re: Themes rejected.. missing window controls 4.0b1, Win7

Post by Zigboom »

OK, I suspected it was the tab-groups, I know what it is (even though I never really used it).
Great, now I have all the info. ( until the next bug :).
Thanks guys for sharing!
-=# LavaFox & Black Fox - Dark & hot themes for Firefox #=-
https://addons.mozilla.org/en-US/firefox/user/4710003/
User avatar
Zigboom
Posts: 475
Joined: April 22nd, 2009, 5:09 am

Re: Themes rejected.. missing window controls 4.0b1, Win7

Post by Zigboom »

I managed to apply the necessary code, just one thing I couldn't find...what is exactly #tab-view-deck & #tab-view?
I couldn't find it with DOMi.
-=# LavaFox & Black Fox - Dark & hot themes for Firefox #=-
https://addons.mozilla.org/en-US/firefox/user/4710003/
User avatar
mcdavis
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Re: Themes rejected.. missing window controls 4.0b1, Win7

Post by mcdavis »

Zigboom wrote:I managed to apply the necessary code, just one thing I couldn't find...what is exactly #tab-view-deck & #tab-view?
I couldn't find it with DOMi.


DOM Inspector search in the main browser window will show those. Just inspect the main window then ctrl-F to Find Nodes, pick 'id' then enter 'tab-view' as the value to search for.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
User avatar
Zigboom
Posts: 475
Joined: April 22nd, 2009, 5:09 am

Re: Themes rejected.. missing window controls 4.0b1, Win7

Post by Zigboom »

Thanks mcdavis, I found it. I was looking in the wrong place (in the Tab Groups window).
-=# LavaFox & Black Fox - Dark & hot themes for Firefox #=-
https://addons.mozilla.org/en-US/firefox/user/4710003/
User avatar
mcdavis
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Re: Themes rejected.. missing window controls 4.0b1, Win7

Post by mcdavis »

kk. i figured after this long you probably had.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
User avatar
Zigboom
Posts: 475
Joined: April 22nd, 2009, 5:09 am

Re: Themes rejected.. missing window controls 4.0b1, Win7

Post by Zigboom »

Hi guys,
I'm having trouble with Win7 Aero (which I don't have so it's extremely hard to solve).
The problem is that only with Win7 Aero, my toolbar image goes behind the glass so it appears cut on the upper part of it.

EDIT: I'm working on a solution...

EDIT: The source of the problem was a "media all" & "media not all" issue. I had a rule that dealt with the toolbar image that had a "media not all" part that didn't effect Win7 Aero. I duplicated the rule with a "media all" and it worked.
Thanks to all the helped on the way in this useful post & thanks to Odai for testing on Win7 Aero & sending lots of screenshots.
-=# LavaFox & Black Fox - Dark & hot themes for Firefox #=-
https://addons.mozilla.org/en-US/firefox/user/4710003/
Post Reply