ShareBird wrote:mcdavis, I'm wondering why you don't use anymore the native approach you used to... I've got inspiration on you (many thanks
) and made my themes go with native titlebar without problems....
I changed because I finally read through all the titlebar bugs, in order, and realized some things I hadn't known before. Those are:
1. using visibility:hidden and visibility:visible on #titlebar and #titlebar-content to get the top window frame border on glass with a persona
2. the fact that native -moz-appearance on #titlebar-buttonbox doesn't work for glass cases unless #main-window has -moz-win-glass or -moz-win-borderless-glass
3. the exact cases in which -moz-appearance on titlebar sets padding-top on #titlebar. (I basically bit the big bullet and went through all the cases one by one and used DOM Inspector to see for myself. That sucked.)
4. the exact value of -moz-appearance used on elements in titlebar in all cases.
I'm sure you can diff things, but basically what I changed is:
- now I'm using -moz-appearance:-moz-window-titlebar and -moz-window-titlebar-maximized with #titlebar in all mswindows cases (all, other than F11-fullscreen), where before I was using -moz-appearance:none
- instead of leaving the titlebar looking native (on glass, and on vista basic when maximized), I'm using visibility:hidden on #titlebar to let the background show through even though I'm using a native -moz-appearance
- I'd never really gotten clear about what top and bottom margins to use on elements in the titlebar, but I wanted to control the height of the Firefox button (and give it the same height as with the def theme in most cases), so I paid close attention to that and made changes. I would be doing it exactly the same as in the def theme except they use a 2px border-bottom on the app button in some cases, but I always use a 1px border-bottom, so I had to increase the bottom margin to compensate for that difference.
- now using display:none in the glass case only on all the individual window caption buttons (.titlebar-button), since the OS draws the caption buttons in the glass case and the XUL elements should be hidden since they're not needed and to keep them from making #titlebar-buttonbox any bigger and making the transparency mask too big
Firefox uses visibility:hidden/visibility:visible on #titlebar/#titlebar-content whenever it wants to keep the size and position while letting the window background show through, which for them is only on glass and only with a persona. However, I want to show my background whether I'm using a persona or not, so I use visibility:hidden/visibility:visible in more cases.
Before, for glass, I was moving my window background lower down so it didn't cover the titlebar amd just letting glass show through, because my background was covering up the caption buttons (in the glass case only). Now I'm correctly setting -moz-appearance: -moz-window-buttonbox/-moz-window-buttonbox-maximized on #titlebar-buttonbox, which makes masking out the background over those buttons work right. So, because people are using NNL because it's a dark theme, and because I now know how to use #titlebar-content to create a window top frame border, it made sense to move the window background origin back up to the top edge of the window. And, I decided to do this for glass only, and not for any of the other desktop theme cases, because in those other cases the difference would be too great between my window background color and the frame color (like Luna's electric blue frame or Vista Basic's powder blue).
Just to recap: the difference between glass (Vista Aero) and all the other cases is that with glass the window captions button are drawn by the OS, they're always drawn, and they're layered *behind* #main-window and all the rest of browser chrome. This means that with glass you have to use the right -moz-appearance settings on #main-window and #titlebar-buttonbox so that Firefox core code knows what part of the browser chrome to make transparent so that the OS-drawn window caption buttons show through from behind. In contrast, with cases other than glass, the caption buttons are normal XUL elements and are layered normally, in front of #main-window.
My old code was written before I'd really gotten clear about Firefox setting a padding-top on #titlebar in core code. Firefox changed its approach to start doing that at some point, where before they were doing it with margins and padding in theme CSS. So, I had to change to get in line with the new approach.
The thing that makes this hard is the -moz-appearance values for things in the titlebar. I still don't fully understand those. They're setting size, position and visible style in different ways in different cases. Without some kind of summary explanation (which I haven't seen, but which would be really great), you have to not only read through the C++ code in nsWindow.cpp and friends but also understand what's happening inside the OS in response to that code. Or, make sure you know what all the cases are, then create them, then use DOM Inspector to see what's happening in each of those cases. Way way way too time-consuming.
Or just do it the same way as in the default theme, without understanding what they do. Since my OCD leaves me helpless to resist when facing an unanswered question, that option is not open to me.
