A million little questions

Discuss application theming and theme development.
Post Reply
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

Re: A million little questions

Post by Frank Lion »

patrickjdempsey wrote:Guys, some of you might find this code interesting. In my quest to create a baseline "unstyled" theme for Australis I discovered how to ...

....really **** up a theme?


Image

Image


Great fix, Pat :P
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: A million little questions

Post by patrickjdempsey »

Apparently, mileage may vary. ;)
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
ehume
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Re: A million little questions

Post by ehume »

@frank:
I made all the substitutions; the black bar remained.

@patrickdempsey:
The code added a margin, left the black bar.

To all: do we know what that thing is? When I made background-color: transparent, I could see the windows controls . . . of the app behind Firefox.

Frank: thank you for looking deeply into my code.
Firefox: Sic transit gloria mundi.
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

Re: A million little questions

Post by Frank Lion »

ehume wrote:@frank:
I made all the substitutions; the black bar remained.

Not a problem, your code will be better for those changes anyway.

What is the problem is that, as you may gather (otherwise I would have fixed it), that I'm not seeing this on XP or Linux, so this is Win7?

That area is id="titlebar-placeholder-on-menubar-for-caption-buttons" which just makes a space on the menubar for the controls to fit into (bad news about your tabbar to come later) and your code (minimal) is OK there. So, we are looking at what fits in there - id="titlebar-buttonbox-container" or/and id="titlebar-buttonbox" and by your later bit, it seems we are drilling right through. This is a case of where the DOMi and the actual broken OS in front of you, really is your friend!

I'll sniff around that area and be back....
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: A million little questions

Post by patrickjdempsey »

This sounds like the same old problem from Firefox 4.0? I'm not sure what the code is to fix... you need to dig around in /aero/browser/browser.css I think to find it.
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
ehume
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Re: A million little questions

Post by ehume »

In my DOM Inspector, the red box for the place holder is just to the right of the active tabs. DOMi points to this code:

Code: Select all

.titlebar-placeholder[type="caption-buttons"] {
  margin-left: 10px;
}


Q - How would I go about moving that to the right edge of the titlebar/tabbar?.

Edit: Oops

The Menu bar was showing, and the red box was just rightward of the menu items. Same question.
Firefox: Sic transit gloria mundi.
User avatar
ehume
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Re: A million little questions

Post by ehume »

Fascinating. Same black box on Firefox with menubar showing. Link.
Firefox: Sic transit gloria mundi.
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

Re: A million little questions

Post by Frank Lion »

Frank Lion wrote:I'll sniff around that area and be back....

Well, nothing is leaping out at me there. But this is a titlebar related problem and as that is above the nav toolbox in the stack, we can discount that and below.

You need to be looking directly at the default Aero/Win7 coding there and the usual rules apply - don't look directly at the default code, but only through the DOMi. Discount any content entries on the CSS Rules side of the DOMi as they will apply to you anyway and instead look at the default skin entries for every titlebar ID. Somewhere your coding will differ and that is where the problem will lie.

Now the bad news, you think that was bad? You wait until you hide the titlebar and the menubar and it really hits the fan. The window controls show up in the same place, but assumes tabs on top and puts a placeholder space on the tabbar to make space for (which I see you've already collapsed). The trouble is, with tabs on bottom, you now have the window controls overlaying the Nav bar.

There are 2 routes - CTR ext does a fake titlebar, Tabs on Bottom ext just prevents the titlebar being toggled off at all.

I took the view that anyone hiding both Titlebar and Menubar is trying to maximise screen space, so I approached if differently. In normal mode (restored down) I used a small titlebar, partly to enable dragging and partly be to browser window can be resized to compensate for the loss of screen space.

In maximised mode, my window controls (Tiger SP) only show on the Nav bar with direct mouseover, but are other hidden. It's a great solution and also a damn complicated one to get right across all platforms.

Users don't notice this stuff or care, only we do. Go for the CTR fake titlebar in maximised mode and save yourself time there. You've got a colourful theme there, colour it yellow and put rabbit on it and they'll think it's a really great new feature. :)

...incidentally, you are catching me right at the end of my Australis retention threshold. No one should try to understand this stuff, but only understand what works and should not retain this code floating around your head for any longer than absolutely necessary. Otherwise, madness and burn-out ensues, so I deliberately forget it when the job is done.

Atm, my head is full * of SM coding and now those 2 are done, I'll will retain for it for a month to tackle any possible early breakings and then that too will be forgotten.

* well, actually more full of garden and painting (art) type stuff, but you know what I mean. :)
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

Re: A million little questions

Post by Frank Lion »

ehume wrote:Fascinating. Same black box on Firefox with menubar showing. Link.

Are your tabs supposed to be leaping above and below the Nav bar like that? On XP, they are staying on the bottom.
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
User avatar
ehume
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Re: A million little questions

Post by ehume »

Frank Lion wrote:You need to be looking directly at the default Aero/Win7 coding there and the usual rules apply - don't look directly at the default code, but only through the DOMi. Discount any content entries on the CSS Rules side of the DOMi as they will apply to you anyway and instead look at the default skin entries for every titlebar ID. Somewhere your coding will differ and that is where the problem will lie.


Will redouble my efforts there.

Frank Lion wrote:Now the bad news, you think that was bad? You wait until you hide the titlebar and the menubar and it really hits the fan. The window controls show up in the same place, but assumes tabs on top and puts a placeholder space on the tabbar to make space for (which I see you've already collapsed). The trouble is, with tabs on bottom, you now have the window controls overlaying the Nav bar.

There are 2 routes - CTR ext does a fake titlebar, Tabs on Bottom ext just prevents the titlebar being toggled off at all.

I took the view that anyone hiding both Titlebar and Menubar is trying to maximise screen space, so I approached if differently. In normal mode (restored down) I used a small titlebar, partly to enable dragging and partly be to browser window can be resized to compensate for the loss of screen space.

In maximised mode, my window controls (Tiger SP) only show on the Nav bar with direct mouseover, but are other hidden. It's a great solution and also a damn complicated one to get right across all platforms.


<gurgle, as in "Down the gurgler."> Oh, so complicated. For a browser made for customizing, this is way too complicated.

Frank Lion wrote:Users don't notice this stuff or care, only we do. Go for the CTR fake titlebar in maximised mode and save yourself time there. You've got a colourful theme there, colour it yellow and put rabbit on it and they'll think it's a really great new feature. :)


I had a fake. Firefox 30 covered it up. I compared fx 29.01 with 30, made all the changes, and saw . . . the black bar. I need to contact the devs to find out what they did. Does anyone know how to reach them? I know whatever change this was went into the build long ago and it's old news now.

Frank Lion wrote:...incidentally, you are catching me right at the end of my Australis retention threshold. No one should try to understand this stuff, but only understand what works and should not retain this code floating around your head for any longer than absolutely necessary. Otherwise, madness and burn-out ensues, so I deliberately forget it when the job is done.

Atm, my head is full * of SM coding and now those 2 are done, I'll will retain for it for a month to tackle any possible early breakings and then that too will be forgotten.

* well, actually more full of garden and painting (art) type stuff, but you know what I mean. :)


And I am interrupting a review of the New Noctua lines of fans -- both redux and industrial. I don't have time to spend on this. And, like you, no headspace.

Thanks for taking the time to respond at such length.
Firefox: Sic transit gloria mundi.
User avatar
ehume
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Re: A million little questions

Post by ehume »

Frank Lion wrote:
ehume wrote:Fascinating. Same black box on Firefox with menubar showing. Link.

Are your tabs supposed to be leaping above and below the Nav bar like that? On XP, they are staying on the bottom.


Interesting. I'll find an XP machine and see.
Firefox: Sic transit gloria mundi.
User avatar
mcdavis
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Re: A million little questions

Post by mcdavis »

patrickjdempsey wrote:Guys, some of you might find this code interesting. In my quest to create a baseline "unstyled" theme for Australis I discovered how to pull the tabs out of the titlebar. Doing this should pretty much eliminate problems with the window control buttons, as well as wonky height problems with the tab strip after showing the menu: viewtopic.php?p=13608911#p13608911


Patrick, I went with that approach after you mentioned it before, it's very good, nice one.

I did make a couple amendments but I'm using the same basic idea:
- I'm just using it for the sizemode="normal" case, not for maximized. That way I still have tabs in the titlebar when maximized.
- I'm just zeroing out the margins instead of using a positive and negative value, but it has the same exact effect, that is, making the toolbox not overlap the titlebar.
- I don't have any margin on #TabsToolbar to unset so I don't need that. I guess that's for themes based on the def theme.
- I keep my .titlebar-placeholders since sometimes those are needed.
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: A million little questions

Post by mcdavis »

@Ed, here's my current code for what you're talking about here. Only for Windows, only for Fx29, not for XP yet, and still needs some things for persona-theme previews. (This isn't yet in an NNL beta.)

Code: Select all

/* ***** BEGIN LICENSE BLOCK *****
 * TODO Needs license.
 * ***** END LICENSE BLOCK ***** */

/* This file contains code specific to the Windows version of Firefox >>> 29.0 <<< and up. */

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/*
 -------------------------------------------------------------
 Table of Contents for This File
 -------------------------------------------------------------

  * Main Window Background
    :: Main Window Background When NOT Using Aero Glass
    :: Main Window Background When USING Aero Glass
    .. When not showing system titlebar
  * Titlebar
    :: Main Window Titlebar When USING Windows Classic
    :: Main Window Titlebar When USING Vista Basic
    :: Main Window Titlebar Both With and Without Aero Glass
    :: Main Window Titlebar When USING Aero Glass
    :: Main Window Titlebar When Showing Tabsintitlebar
    :: Main Window Titlebar Placeholders (for Spacing)
    :: Main Window Titlebar Buttonbox
    :: Main Window Titlebar Buttonbox When USING Aero Glass
    :: Main Window Titlebar Caption Buttons
    :: Main Window Titlebar Caption Buttons When USING Aero Glass
    :: Main Window Toolbar Drag Bindings When USING Aero Glass
    :: Main Window Toolbar Drag Bindings When USING Vista Basic Only
  * Toolbox
    :: Toolbox When USING Aero Glass
  * Menubar
    :: Menubar in Windows Other Than Active
    :: Menubar with Titlebar Hidden
  * Tabs Toolbar
  * Appcontent Glass Exclusion Area
    :: Glass Exclusion Area When USING Aero Glass
  * Private Browsing Indicator
  * Customization Mode

 -------------------------------------------------------------
 */


/* ----------------------------------------------------- *
 * TOC             Main Window Background                *
 * ----------------------------------------------------- *
 */

/* TOC ::::: Main Window Background When NOT Using Aero Glass ::::: */

/* Background is applied in default toolkit styling for window;
 * special handling not required.
 */

/* TOC ::::: Main Window Background When USING Aero Glass ::::: */

@media all and (-moz-windows-compositor) {

  #main-window[windowtype="navigator:browser"] {
    -moz-appearance: -moz-win-borderless-glass;
  }

  #main-window[windowtype="navigator:browser"][inFullscreen="true"] {
    -moz-appearance: none;
  }

  /* TOC ..... When not showing system titlebar  ..... */

  #main-window[windowtype="navigator:browser"][tabsintitlebar]:not([inFullscreen]) {
    background: none;
  }

  #main-window[windowtype="navigator:browser"][tabsintitlebar] > #tab-view-deck > #browser-panel > #navigator-toolbox {
    background: url("chrome://global/skin/default-window-gradient-bg.png") repeat-x 0px -30px #181818;
  }

}

/* ----------------------------------------------------- *
 * TOC                   Titlebar                        *
 * ----------------------------------------------------- *
 */

/* TOC ::::: Main Window Titlebar When USING Windows Classic ::::: */

@media (-moz-windows-classic) {

  #main-window[sizemode="maximized"][tabsintitlebar] #titlebar {
    /* We don't want -moz-appearance: -moz-window-titlebar-maximized on Windows Classic
     * because that uses system colors for the background.
     */
    -moz-appearance: none;
    /* The top position of the window is -4px when maximized on Vista Basic.
     * -moz-appearance -moz-window-titlebar-maximized positions and/or sizes the
     * titlebar; because we're removing -moz-appearance, we have to take responsibility
     * for the top margin.  This 4px probably corresponds to system border width;
     * if true, this would become incorrect if custom desktop settings for border width are used.
     */
    margin-top: 4px;
  }

}

/* TOC ::::: Main Window Titlebar When USING Vista Basic ::::: */

@media not all and (-moz-windows-compositor) {
  @media (-moz-windows-default-theme) and (-moz-windows-theme:aero) {

    #main-window[sizemode="maximized"][tabsintitlebar] #titlebar {
      /* We don't want -moz-appearance: -moz-window-titlebar-maximized on Vista Basic
       * because that uses system colors for the background.
       */
      -moz-appearance: none;
      /* The top position of the window is -8px when maximized on Vista Basic.
       * -moz-appearance -moz-window-titlebar-maximized positions and/or sizes the
       * titlebar; because we're removing -moz-appearance, we have to take responsibility
       * for the top margin.  This 8px probably corresponds to system border width;
       * if true, this would become incorrect if custom desktop settings for border width are used.
       */
      margin-top: 8px;
    }

  }
}

/* TOC ::::: Main Window Titlebar Both With and Without Aero Glass ::::: */

#main-window[sizemode="normal"] > #titlebar {
  -moz-appearance: -moz-window-titlebar;
}

#main-window[sizemode="maximized"] > #titlebar {
  -moz-appearance: -moz-window-titlebar-maximized;
}

/* TOC ::::: Main Window Titlebar When USING Aero Glass ::::: */

/* Nothing to do here.
 * @media all and (-moz-windows-compositor) {
 * }
 */

/* TOC ::::: Main Window Titlebar When Showing Tabsintitlebar ::::: */

/* For Fx29, tabsintitlebar means that the system titlebar is hidden. */

/* Undo the efforts of TabsInTitlebar._update() in setting bottom margins on
 * #titlebar and #titlebar-content to place the menubar (if visible) and
 * Tabs Toolbar in the titlebar.  That JS function has a problem when using
 * ALT to reveal the auto-hidden menubar with less-tall tabs like in NNL,
 * such that, on re-hiding the menubar, the margin-bottom on #titlebar-content
 * is not cleared, leaving the titlebar too tall with extra space above the
 * Tabs Toolbar (where the temporarily-revealed menubar was).
 *
 * To counteract this, we simply do away with overlapping into the titlebar
 * when the menubar is set to autohide by using CSS to remove the
 * margin-bottoms which JS is setting.  The result is that the titlebar has a
 * constant non-zero height whether the menubar is temporarily shown or hidden,
 * which height is such that the caption buttons remain uncovered and alone in
 * the titlebar, and that other browser chrome, ie the toolbox and its contents,
 * begin below the titlebar, with the top edge of the toolbox starting just below
 * the bottom of the titlebar.  The downside is that there's unused vertical
 * space in the titlebar.
 *
 * This is an issue only when all of the following are true:
 *
 *   1) the titlebar is hidden and
 *   2) the menubar is set to autohide and
 *   3) window sizemode is normal or maximized, but not fullscreen and
 *   4) calculated Tabs Toolbar height, including margins, is less that #titlebar-content height.
 *
 * There's no way for CSS touching #titlebar to know menubar state,
 * since the [autohide] attribute is set on only #toolbar-menubar itself,
 * and that's not a parent of #titlebar.  Therefore, we apply this whether
 * the menubar is autohiding or not.  (We could check the attribute [autohide]
 * in Companion JS, but Companion doesn't do that yet and this works, so we'll
 * just keep it simple.)
 *
 * NOTE WELL: For now, we only do this when [sizemode="normal"] and not when maximized,
 * for the following reasons:
 *
 *   - we've never seen the problem when maximized
 *     - although one user demonstrated this with Stylish and the default theme
 *   - most default window geometries use small-ish buttons when maximized
 *     - meaning the geometry math works out in our favor in not triggering the problem there
 *   - not sure how prevalent the problem is
 *   - actually want people to see and complain about the problem
 *   - this way we keep tabs all the way up in the titlebar when maximized
 *   - most users will be fine, and those who aren't can report it
 *   - and we can consider fixing that in Companion later, based on how it goes
 *
 * The exact values used for our margin-bottoms don't matter, as long as the magnitude
 * is the same for both #titlebar and #titlebar-content, and as long as the
 * margin-bottom on #titlebar is the negative of the margin-bottom on
 * #titlebar-content and #titlebar-content's margin-bottom is non-negative.
 * In other words, you could use any non-negative margin on the #titlebar-content
 * (e.g., 0px, 14px, 47px, 120px) also long as you also set the corresponding
 * negative value on #titlebar (e.g., 0px, -14px, -47px, -120px).
 *
 * TODO VERIFY THIS Also, !important must be used to override the explicit style set by JS.
 *
 * Similarly, that function's JS sets padding-bottom on #toolbar-menubar, which we also
 * don't want and so remove whenever zeroing the titlebar margins.
 *
 * Note that we could resolve this issue for most default-desktop-setting cases
 * by increasing the min-height of the Tabs Toolbar enough to avoid the problem, but
 * that height would have to be ridiculously large to solve it for the broad range
 * of cases, such as when non-default desktop settings like wider borders or alternate
 * desktop themes are used.
 */

#main-window[tabsintitlebar][sizemode="normal"] > #titlebar {
/* #main-window[tabsintitlebar][sizemode="maximized"] > #titlebar, */
  margin-bottom: 0 !important; /* Use !important to override value set by JS. */
}

#main-window[tabsintitlebar][sizemode="normal"] > #titlebar > #titlebar-content {
/* #main-window[tabsintitlebar][sizemode="maximized"] > #titlebar > #titlebar-content, */
  margin-bottom: 0 !important; /* Use !important to override value set by JS. */
}

/* TOC ::::: Main Window Titlebar Placeholders (for Spacing) ::::: */

/* The placeholders are hidden if any of the following are true:
 *
 *   Hidden because showing native system titlebar
 *   Hidden because we're not drawing in the titlebar (whether native shown or not)
 *   Hidden because placeholder-containing toolbar not the first visible toolbar after titlebar
 *   Hidden because placeholder-containing toolbar is hidden
 *
 * Note we'll have to modify this when Companion lets users overlap toolbars and the titlebar.
 *
 * Doing the logical inversion, that means they're visible only when all of
 * the following are true:
 *
 *   NOT showing native system titlebar
 *   AND we ARE drawing in the titlebar
 *   AND placeholder-containing toolbar IS the first visible toolbar after titlebar
 *   AND placeholder-containing toolbar IS shown
 *
 * These are selected as follows:
 *
 *   NOT showing native system titlebar
 *
 *     #main-window[tabsintitlebar]
 *
 *   AND we ARE drawing in the titlebar
 *
 *     #main-window[sizemode="maximized"][tabsintitlebar]
 *
 *   AND placeholder-containing toolbar IS the first visible toolbar after titlebar
 *   AND placeholder-containing toolbar IS shown
 *
 *     #toolbar-menubar:not([autohide="true"]),
 *     #toolbar-menubar[autohide="true"]:not([inactive]),
 *     #toolbar-menubar[autohide="true"] + #TabsToolbar
 *
 *   Note that we fudge a little and let the placeholder in the Tabs Toolbar remain shown
 *   when the autohidden menubar is temporarily shown.
 */

.titlebar-placeholder {
  display: none;
}

#main-window[sizemode="maximized"][tabsintitlebar] #toolbar-menubar:not([autohide="true"]) .titlebar-placeholder,
#main-window[sizemode="maximized"][tabsintitlebar] #toolbar-menubar[autohide="true"]:not([inactive]) .titlebar-placeholder,
#main-window[sizemode="maximized"][tabsintitlebar] #toolbar-menubar[autohide="true"] + #TabsToolbar  .titlebar-placeholder {
  display: -moz-box;
}

/* Space between window caption buttons and whatever is on their left (tabs, menu-after-pressing-alt, toolbarbutton).
 * Here we use the larger value that the def theme uses for aero-capable desktops, added to make it easier to
 * drag and/or aero-snap the toolbar.  Unlike the def theme, we use it for all mswindows cases because
 * it's a pain to write a selector to avoid XP and because it's a good idea to provide a drag target in the
 * crowded tabs toolbar for the tabsintitlebar case.  See bug 624129.
 */
#main-window[sizemode="normal"] .titlebar-placeholder[type="caption-buttons"] {
  margin-left: 22px;
}

#main-window[sizemode="maximized"] .titlebar-placeholder[type="caption-buttons"] {
  margin-left: 10px;
}

/* TOC ::::: Main Window Titlebar Buttonbox ::::: */

/* On MSWindows, the box containing the window caption (control) buttons.  Fx4 applies these
 * -moz-appearance values in all Fx4 MSWindows cases (glass, non-glass, classic, w7/vista/xp)
 * so we do too, although it's not clear exactly what this does.
 * Note: as of Fx29, these -moz-appearance values are applied in content/browser.css.
 * We could remove them here, but our code is already working so we're leaving it as is.
 */

#titlebar-buttonbox {
  -moz-appearance: -moz-window-button-box;
  z-index: 1;
}

#main-window[sizemode="maximized"] #titlebar-buttonbox {
  -moz-appearance: -moz-window-button-box-maximized;
}

/* TOC ::::: Main Window Titlebar Buttonbox When USING Aero Glass ::::: */

@media all and (-moz-windows-compositor) {

  /* When maximized and using glass, the end margin is needed to align the button box
   * (which Fx4+ uses to position the transparent region) with the caption button images drawn by
   * MSWindows and which show through from behind #main-window.
   */

  #main-window[sizemode="maximized"] #titlebar-buttonbox {
    -moz-margin-end: 3px;
  }

}

/* TOC ::::: Main Window Titlebar Caption Buttons ::::: */

/* On MSWindows, the window caption (control) buttons.  Fx4 applies these -moz-appearance values
 * in all Fx4 MSWindows cases (glass, non-glass, classic, w7/vista/xp) so we do too,
 * although it's not exactly clear what they do in non-glass cases.
 */

#titlebar-min {
  -moz-appearance: -moz-window-button-minimize;
}

#titlebar-max {
  -moz-appearance: -moz-window-button-maximize;
}

#main-window[sizemode="maximized"]  #titlebar-max {
  -moz-appearance: -moz-window-button-restore;
}

#titlebar-close {
  -moz-appearance: -moz-window-button-close;
}

/* No idea why this rule exists in the def theme, but it does. */
@media not all and (-moz-windows-classic) {
  #titlebar-min {
    -moz-margin-end: 2px;
  }
}

/* TOC ::::: Main Window Titlebar Caption Buttons When USING Aero Glass ::::: */

@media all and (-moz-windows-compositor) {

  /* These should be hidden with glass enabled. MSWindows draws its own buttons. */
  .titlebar-button {
    display: none;
  }

}

/* TOC ::::: Main Window Toolbar Drag Bindings When USING Aero Glass ::::: */

@media all and (-moz-windows-compositor) {

  /* Make the window draggable by some toolbars when on glass (bug 555081 and successors).
   */
  #toolbar-menubar:not([autohide="true"]),
  #TabsToolbar {
    -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-drag");
  }

}

/* TOC ::::: Main Window Toolbar Drag Bindings When USING Vista Basic Only ::::: */

/* DON'T make the window draggable by toolbars when on vista basic (bugs 606735 and 635534).
 * The def theme does this to extend the dragging surface down to everything that looks like an extension of the titlebar,
 * similar to the way it's done for glass cases in bug 555081.  We, however, DON'T do this,
 * because with our styling our toolbars never look like they're part of the titlebar on Vista Basic.
 *
 * Just as a breadcrumb, here's the code from the Fx4 def which we're not using.
 * N.B. that this code is from browser-aero.css, meaning it applies only to Vista Basic (not glass, not XP, not classic).
 * Given that unlike the default theme we use the same browser.css on both XP and Vista/W7, if we were to use any of this code,
 * we would need to add :-moz-system-metric(windows-theme-aero) and lose the personas check.
 *
 * @media not all and (-moz-windows-compositor) {
 *   #toolbar-menubar:not([autohide=true]):not(:-moz-lwtheme):-moz-system-metric(windows-default-theme),
 *   #TabsToolbar[tabsontop=true]:not(:-moz-lwtheme):-moz-system-metric(windows-default-theme),
 *   #navigator-toolbox[tabsontop=false] > toolbar:not(#toolbar-menubar):not(:-moz-lwtheme):-moz-system-metric(windows-default-theme) {
 *     -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar-drag");
 *   }
 * }
 */

/* ----------------------------------------------------- *
 * TOC                   Toolbox                         *
 * ----------------------------------------------------- *
 */

/* TOC ::::: Toolbox When USING Aero Glass ::::: */

@media all and (-moz-windows-compositor) {

  /* The default glass titlbar height is too tall for my taste.
   * Here we move the toolbox up into the titlebar just because it looks better.
   * The requires similar positioning in customization mode code elsewhere.
   */

  #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen="true"]) #navigator-toolbox {
    margin-top: -7px;
  }

}

/* ----------------------------------------------------- *
 * TOC                  Menubar                          *
 * ----------------------------------------------------- *
 */

/* TOC ::::: Menubar in Windows Other Than Active ::::: */

/* window[active] not available in fx3.7+, and should not be used because
 * it would apply even when not wanted. Fx3.7 gives us new pseudo-class
 * :-moz-window-inactive instead.
 */

menubar > menu:-moz-window-inactive {
  color: #666666;
}

/* TOC ::::: Menubar with Titlebar Hidden ::::: */

/* See explanation with related code for the #titlebar element. */

#main-window[tabsintitlebar][sizemode="normal"] #toolbar-menubar {
/* #main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar, */
  padding-bottom: 0 !important; /* Use !important to override value set by JS. */
}

/* ----------------------------------------------------- *
 * TOC                 Tabs Toolbar                      *
 * ----------------------------------------------------- *
 */

/* Correct for extra space left in titlebar after, with tabs in titlebar and
 * menubar hidden, un-hiding then rehiding the menubar with ALT.
 * This code resolves the issue for most default-desktop-setting cases
 * by increasing the min-height of the Tabs Toolbar enough to avoid the problem.
 *
 * We don't set this for Glass because the problem doesn't manifest there.
 *
 * We probably don't need both this and margin-zeroing on #titlebar and
 * #titlebar-content.
 */

/* Commenting this out but leaving it in as a placeholder.
 * Since we're zeroing the titlebar-area margins in this case,
 * we can leave the tabs at their normal height.
 * @media not all and (-moz-windows-compositor) {
 *   @media (-moz-windows-default-theme) and (-moz-windows-theme:aero) {
 *
 *     #main-window[tabsintitlebar][sizemode="normal"] #XXTabsToolbar {
 *       min-height: 28px;
 *     }
 *
 *   }
 * }
 */

/* ----------------------------------------------------- *
 * TOC         Appcontent Glass Exclusion Area           *
 * ----------------------------------------------------- *
 */

/* TOC ::::: Glass Exclusion Area When USING Aero Glass ::::: */

@media all and (-moz-windows-compositor) {

  /* This is new for Fx6, added in bug 633282, defining the glassless rectangle in the middle of
   * the glass sheet behind the main browser window.  As an intended consequence, sets the position and size
   * of the window glaze (bright horizon reflection) along the outer part of the glass window frame, because
   * Windows OS internals draw the glaze relative to the position and size of the glass exclusion rectangle.
   * Should only be used with windows having the -moz-appearance values -moz-win-glass or -moz-win-borderless-glass.
   * When used with -moz-win-glass, the glassless rectangle will define the position of the inner frame border.
   *
   * This is only needed for Fx6 and up, but it's harmless when used with earlier versions, so we just
   * use it for Fx4 and up because it's simpler to implement. When used with browser versions earlier than Fx6,
   * has no effect, since the -moz-win-exclude-glass keyword was not yet defined; in those cases, the CSS
   * property/value pair will throw an error and be ignored, leaving #appcontent with -moz-appearance: none
   * as desired.  Triggering yet another error message isn't great, but we're living with it.
   */
  #appcontent {
    -moz-appearance: -moz-win-exclude-glass;
  }

}

/* ----------------------------------------------------- *
 * TOC          Private Browsing Indicator               *
 * ----------------------------------------------------- *
 */

@-moz-document url('chrome://browser/content/browser.xul') {

  /* Def theme comment: Currently, we have two places where we put private browsing indicators on
   * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
   * When tabsintitlebar is disabled, we draw the indicator at the end of the
   * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
   * want the bottom border of the image to line up with the bottom of the window
   * caption buttons. That's why there's so much special-casing going on in here.
   */

  /* For NNL, unlike with the default theme, we always show the private browsing indicator
   * in the Tabs Toolbar and never in the titlebar.  This gets around issues of the
   * indicator being hidden when in fullscreen mode, since the Tabs Toolbar is
   * revealed on bump but the titlebar isn't, and also entirely avoids the
   * issue of varying titlebar height and making sure the image has room in
   * the titlebar across all cases.
   */

  /* Establish layout for the container only.  Note that this rule alone doesn't
   * show or hide the indicator; that's done by rules targeting .private-browsing-indicator.
   */
  #private-browsing-indicator-titlebar {
    display: block;
    position: absolute;
  }

  .private-browsing-indicator {
    display: none;
    pointer-events: none;
  }

  #main-window[privatebrowsingmode=temporary] #TabsToolbar > .private-browsing-indicator {
    display: -moz-box;
  }

  #TabsToolbar > .private-browsing-indicator {
    background: url("chrome://browser/skin/privatebrowsing-mask.mainwindow.png") no-repeat center top;
    margin: 0;
    -moz-margin-start: 4px;
    /* Negative margin to cover padding at end of toolbar. */
    -moz-margin-end: -5px;
    width: 40px;
  }

  @media (-moz-windows-classic) {
    /* Def theme comment: We have to use top instead of background-position in this
     * case, otherwise the bottom of the indicator would get cut off by the bounds of the
     * private-browsing-indicator element.
     */
    #main-window[sizemode="normal"] > #titlebar > #titlebar-content > #titlebar-buttonbox-container > #private-browsing-indicator-titlebar > .private-browsing-indicator {
      top: 4px;
    }
  }

}

/* ----------------------------------------------------- *
 * TOC               Customization Mode                  *
 * ----------------------------------------------------- *
 */

/* Def theme comment: This next rule is a hack to disable subpixel anti-aliasing on all
 * labels during the customize mode transition. Subpixel anti-aliasing
 * on Windows with Direct2D layers acceleration is particularly slow to
 * paint, so this hack is how we sidestep that performance bottleneck.
 */
#main-window:-moz-any([customize-entering],[customize-exiting]) label {
  transform: perspective(0.01px);
}

@media all and (-moz-windows-compositor) {

  /* When the titlebar is hidden, we must shift the top margin from the toolbax
   * to the browser panel, keeping the resulting position of the toolbox the
   * same onscreen.
   */
  #main-window[tabsintitlebar][sizemode="normal"]:-moz-any([customize-entering],[customize-entered]) #browser-panel {
    margin-top: -7px;
  }

  #main-window[tabsintitlebar][sizemode="normal"]:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
    margin-top: 0;
  }

}

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: A million little questions

Post by mcdavis »

Let me point this out again. I had to refer to it this time to remember what the different media queries do.

http://home.comcast.net/~username54321/ ... ptheme.xul

It's remote XUL so it'll be blocked, you can save it locally, but you still might need the Remote XUL Manager add-on to load it locally.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
User avatar
ehume
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Re: A million little questions

Post by ehume »

@mcdavis - thank you
Firefox: Sic transit gloria mundi.
Post Reply