MozillaZine

Themes rejected.. window controls and titlebar theming.

Discuss application theming and theme development.
mcdavis

User avatar
 
Posts: 3096
Joined: December 9th, 2005, 5:51 am

Post Posted March 3rd, 2011, 5:34 am

ShareBird wrote:How are you testing personas at all? AFAIK, they are still not allowed to work with third-party themes and Personas Plus isn't compatible with FF versions > 3.6.


Oh, you're right. I guess you mean why did I say this:

However, I want to show my background whether I'm using a persona or not


I keep assuming I'll have to work with Personas at some point. Is that completely off the table now? Even when using the Personas Plus add-on?
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed

patrickjdempsey

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

Post Posted March 3rd, 2011, 5:42 am

Personas Plus doesn't work at all. Long ago they had a version that ran in the 3.7alpha builds, but they've never made a version that actually works with 4.0... I forced it to run and it's menu system doesn't even work. So for now we are off the hook.
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/

Paenglab

User avatar
 
Posts: 186
Joined: December 30th, 2006, 2:20 am
Location: Switzerland

Post Posted March 3rd, 2011, 12:39 pm

For me the Personas are working with my theme when I go to the AMO page with the Personas skins (https://addons.mozilla.org/firefox/personas/). When I hover over a Persona, the tool bar background changes to this skin. Naturally this works only during the hover. I can't install the Persona with my theme, but it's enough to check my theme and make it ready when they enable it at last also for third party themes.
Nuvola theme for Firefox and Thunderbird

patrickjdempsey

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

Post Posted March 3rd, 2011, 1:21 pm

Oh yeah, I forgot about that "loop hole", I guess if your have the skinnable flag in your install.rdf and the support code, you should show the Personas in native implementation. Maybe a good idea to take screen shots so you can pick apart the details since it's so transient.
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: 22711
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted March 21st, 2011, 4:49 pm

I think I ran into CatThief's problem here:
viewtopic.php?f=18&t=2131121

Using Alfred's "minimum" requirements here:
viewtopic.php?p=9950495#p9950495

My user's screen-shot shows the all-tabs button at the far right with no window-controls. So the fix should be this?:

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


I have a solid background color defined for the entire #navigator-toolbox (as I don't plan on actually supporting Glass, no thank you) so how will the buttons appear *through* the toolbox? Is anyone else reminded of attempting to get websites to render in IE doing all of these weird hacks?

Also, since I do have a solid background, wouldn't it make more sense to just force the Firefox fullscreen window-controls to be visible instead of messing around with this hacky-OS stuff? That way it would always be the same on every platform, and there would be consistency between Fullscreen mode and Tabs-in-Titlebar which are currently different for no apparent reason.
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/

CatThief

User avatar
 
Posts: 1854
Joined: January 19th, 2004, 12:19 am
Location: Northeast USA

Post Posted March 21st, 2011, 6:04 pm

Here's what I added to browser.css:

Code: Select all
/* Compatibility for Aero */
@media all and (-moz-windows-compositor) {
  #main-window {
    -moz-appearance: -moz-win-borderless-glass;
    background: transparent;
  }
  #main-window[inFullscreen="true"] {
    -moz-appearance: none;
  }
  /* These should be hidden w/ glass enabled. Windows draws its own buttons. */
  .titlebar-button {
    display: none;
  }
  #main-window[sizemode="maximized"] #titlebar-buttonbox {
    margin-right: 3px !important;
  }
  #main-window[sizemode="normal"] #appmenu-button {
    margin-top: 1px !important;
  }
  .titlebar-placeholder[type="caption-buttons"] {
    margin-left: 22px; /* additional space for Aero Snap */
  }
  #appcontent:not(:-moz-lwtheme) {
    background-color: -moz-Dialog;
  }
}


I also have several userChrome options that change the background of the #navigator-toolbox using a background-image, and at the end of those files I'm using this:

Code: Select all
/* Compatibility for Aero */
@media all and (-moz-windows-compositor) {
  #main-window {
    -moz-appearance: -moz-win-borderless-glass !important;
    background: transparent !important;
  }
  #navigator-toolbox {
    background-color: transparent !important;
  }
  #appcontent:not(:-moz-lwtheme) {
    background-color: #e6e7e9 !important;
  }
}


My testers reported that all is fine, and the one tester who uses the userChrome options reported that it also worked fine with the background-image for #navigator-toolbox. Since an image overlays a color, I would think that using a background-color other than transparent would work just as well. I hope this helps. :)
Still passionate for Mozilla themes and extensions, just not actively developing them for public release anymore.

patrickjdempsey

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

Post Posted March 21st, 2011, 6:26 pm

Thanks CatThief... I'm just a little worried that if I start supporting Glass at all it will be a slippery slope into issues like having to use those fuzzy text-shadows everywhere and I'm just not comfortable with providing support for a feature that I wouldn't know how to do "correctly" ... for instance I'm not a big fan of Firefox's implementation of having totally different transparency of toolbars with tabs-on-top or tabs-on-bottom, because I don't like that kind of inconsistency. Maybe I'll offer a userChrome subtheme that just makes everything transparent and then folks can use it at their own risk.
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: 22711
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted March 21st, 2011, 7:34 pm

Well my bright idea about using the fullscreen windows-control buttons doesn't work because it turns out that the "Restore" button just acts like a "fullscreen toggle" and you will end up in an endless loop switching between Maximize mode and Fullscreen mode. It really is too bad because the XP window-control buttons look terrible sitting on a light-grey background... so I guess I'll just make a little blue box for them to sit on. I'm still not sure how the window-control buttons are supposed to show through a solid-colored toolbar... mcdavis mentioned something about cutting the buttons through from behind... but I'm guessing he's just talking about the Firefox window element?
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/

CatThief

User avatar
 
Posts: 1854
Joined: January 19th, 2004, 12:19 am
Location: Northeast USA

Post Posted March 22nd, 2011, 12:39 am

patrickjdempsey wrote:I'm not a big fan of Firefox's implementation of having totally different transparency of toolbars with tabs-on-top or tabs-on-bottom, because I don't like that kind of inconsistency.

I suppose there are those who think it's the latest and greatest thing to come along, but I'm not a fan of it either.

It really is too bad because the XP window-control buttons look terrible sitting on a light-grey background...

I know exactly what you mean. I tinkered with styling those buttons and got it to work quite nicely in XP, but aborted the plan when I received feedback that the Win7 code was finally working. I wasn't about to risk messing things up again just to make them look nicer in XP.

so I guess I'll just make a little blue box for them to sit on. I'm still not sure how the window-control buttons are supposed to show through a solid-colored toolbar... mcdavis mentioned something about cutting the buttons through from behind... but I'm guessing he's just talking about the Firefox window element?

It does seem illogical, but cutting the buttons through from behind is created where you say this:

Code: Select all
.titlebar-button {
  display: none;
}

Until I included that, the background image completely covered the buttons. They were clickable, just not visible.
Still passionate for Mozilla themes and extensions, just not actively developing them for public release anymore.

mcdavis

User avatar
 
Posts: 3096
Joined: December 9th, 2005, 5:51 am

Post Posted March 22nd, 2011, 5:17 am

patrickjdempsey wrote:Well my bright idea about using the fullscreen windows-control buttons doesn't work because it turns out that the "Restore" button just acts like a "fullscreen toggle" and you will end up in an endless loop switching between Maximize mode and Fullscreen mode. It really is too bad because the XP window-control buttons look terrible sitting on a light-grey background... so I guess I'll just make a little blue box for them to sit on. I'm still not sure how the window-control buttons are supposed to show through a solid-colored toolbar... mcdavis mentioned something about cutting the buttons through from behind... but I'm guessing he's just talking about the Firefox window element?


Patrick - The deal with the transparency is this:

1 - if you're running on glass, and you have either -moz-appearance: -moz-window-button-box/-moz-window-button-box-maximized on the #titlebar-buttonbox, AND you're using either -moz-appearance:-moz-win-glass /-moz-win-borderless-glass on #main-window, then #titlebar-buttonbox defines a transparent region in which Firefox draws exactly nothing. Whatever Firefox chrome is over that area simply doesn't get drawn. What you see there is whatever is under/behind that region. (Alfred puts that -moz-appearance on #titlebar-buttonbox-container, and it seems to get the same result, so maybe that works on any element.)

2 - you pretty much have to use -moz-appearance: -moz-win-glass / -moz-win-borderless-glass on #main-window when you're on glass, otherwise you get raggedy-looking square corners on the window frame on top. also, min/max/close stop working.

If you want to go without -moz-appearance: -moz-window-button-box/-moz-window-button-box-maximized on the #titlebar-buttonbox, and just cover it over with your color and background, I think you can, with the following side effects:

1 - the system-drawn min/max/close buttons are still there, you just dont see them
2 - the system-drawn min/max/close buttons still work, and they define the hot spot for clicking on them (you can't move them)
3 - if you put your own icons over top of them, you can, but again you can't move teh hot spots
4 - the system-drawn min/max/close buttons still glow when you hover them, and you'll still see the glow above the top edge of your background color
5 - you'll still see part of the close button peeking out from behind your background, on the right, in the window frame

As I understand it. I hope that helps.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed

patrickjdempsey

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

Post Posted March 22nd, 2011, 3:30 pm

Yeah I tried creating totally custom buttons and just avert the whole thing and my test user (thank goodness someone volunteered!) noted that it only showed the min and restore buttons and the min button did nothing while the restore button closed the window. So I guess that has to do with the spacing of the underlying buttons in W7. I don't really mind if the window-frame has Glass, that is fine, I just don't want to have the chrome inside the frame be Glassed... in order words I would like it to continue to look the same as it does in Fx3.6. My problem with XP is that the window control buttons are not actually round like they look, they have those awful blue square corners. I did play around with making the button-box take on the Caption color which looked much better... a splash of blue in one corner that balances the splash of orange in the opposite corner.

So if I use the recommended -moz-appearances and hide only the buttons and not the button-box, my solid background color for #navigator-toolbox should be cut-through and show the glass buttons underlying, and the spacer should continue to work to leave space for the buttons even though they are not there? I'm guessing you are having to do something similar for NNL so you can preserve your dark background.

Thank you very much guys! I'll go with CatThief's code and try again! My poor test user deserves an ice-cream-cone or something. :)
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/

CatThief

User avatar
 
Posts: 1854
Joined: January 19th, 2004, 12:19 am
Location: Northeast USA

Post Posted March 22nd, 2011, 6:44 pm

patrickjdempsey wrote:My poor test user deserves an ice-cream-cone or something. :)

I gave my three testers credit on my theme download page. Now that you mention it, ice-cream cones should have been offered as well.

@mcdavis... YOU along with my other two testers SAVED ME!!! :D
Still passionate for Mozilla themes and extensions, just not actively developing them for public release anymore.

mcdavis

User avatar
 
Posts: 3096
Joined: December 9th, 2005, 5:51 am

Post Posted March 22nd, 2011, 8:55 pm

Butter pecan, please. :)
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed

patrickjdempsey

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

Post Posted March 22nd, 2011, 9:06 pm

Mozilla needs to set up a donation system with Cold Stone Creameries!
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: 22711
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted March 22nd, 2011, 9:49 pm

OK, here's what I've got.... finger's crossed with toes...

Code: Select all
/* window-control buttonbox tabs on top */
#main-window[sizemode="maximized"][tabsintitlebar="true"][tabsontop="true"] #titlebar-buttonbox {
  -moz-appearance: none;
  padding: 0px;  margin: 0px;
  background-color: ActiveCaption;
}
#main-window[sizemode="maximized"][tabsintitlebar="true"][tabsontop="true"]:-moz-window-inactive #titlebar-buttonbox {
  background-color: InactiveCaption;
}

/* Compatibility for Aero */
@media all and (-moz-windows-compositor) {
  #main-window {
    -moz-appearance: -moz-win-borderless-glass;
    background: transparent!important;
  }
  #main-window[inFullscreen="true"] {
    -moz-appearance: none;
  }
  #titlebar-buttonbox {
  -moz-appearance: -moz-window-button-box;
  background-color: transparent;
  }
  #main-window[sizemode="maximized"][tabsintitlebar="true"][tabsontop="true"] #titlebar-buttonbox {
  -moz-appearance: -moz-window-button-box-maximized;
   background-color: transparent;
  }
 
  /* These should be hidden w/ glass enabled. Windows draws its own buttons. */
  .titlebar-button {
    display: none !important;
  }
  #main-window[sizemode="maximized"] #titlebar-buttonbox {
    margin-right: 3px !important;
  }
  #main-window[sizemode="normal"] #appmenu-button {
    margin-top: 1px !important;
  }
  .titlebar-placeholder[type="caption-buttons"] {
    margin-left: 22px; /* additional space for Aero Snap */
  }
  #appcontent:not(:-moz-lwtheme) {
    background-color: -moz-Dialog;
  }
  /* round-out corners for Aero */
  #main-window:not([sizemode="maximized"]):not([inFullscreen="true"]) #navigator-toolbox {
   -moz-border-radius-topleft: 4px !important;
   -moz-border-radius-topright: 4px !important;
  }
  #main-window:not([sizemode="maximized"]):not([inFullscreen="true"]) #browser-bottombox {
   -moz-border-radius-bottomleft: 4px !important;
   -moz-border-radius-bottomright: 4px !important;
  }
}
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/

Return to Theme Development


Who is online

Users browsing this forum: No registered users and 1 guest