Backwards compatible tab styles for Firefox 4.0

Discuss application theming and theme development.
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Backwards compatible tab styles for Firefox 4.0

Post by patrickjdempsey »

I know we have a few discussions going on talking about different aspects of theming for 4.0, but I wanted to tackle this one as it's own topic, because it's a pretty lengthy topic. The new tabs seems to be one of the few parts of the UI that will almost certainly break many themes and at this point they seem to be basically finished.

To start with, I have to say that Mozilla have greatly simplified the structure of the tabs and that should make it somewhat easier on new themers. However, that simplification might make it difficult to get your themes to be backwards compatible or just to look the same as they looked previously in 3.0 - 3.6.

First, lets look at the physical differences:

Image

As you can see, they have removed the tiny strip below the tabs that the tabs were connected to. They have also removed the line at the bottom of that strip that physically separated the tabs from the content. In addition, they've moved the "fade" behind the tabs from the top to the bottom which makes more visual sense with tabs-on-top. Other than those things, the tabs basically *look* very similar, but under the surface they are very different. These illustrations are a visual translation of the DOM structure of 3.6 and 4.0b1:

Image

Here you can see that the strip below the tabs in 3.x is called .tabs-bottom.

Image

Here you can see just how much has been stripped out of the DOM structure. If you have any instructions in your theme that mention tabbox, .tabbrowser-strip, .tabs-stack, .tabs-bottom, or .tabs-container they will no longer work in 4.0.

(EDIT: I need to update this illustration as there is a slightly different structure now that looks something like this: 4/11)

window#main-window
- deck#tab-view-deck
-- vbox
--- toolbox#navigator-toolbox



Tabstrip background:

Another important difference is that .tabbrowser-tabs no longer spans the length of the tab strip. Instead, buttons can now be placed on either side of it. So you will no longer be able to put a background image in .tabbrowser-tabs as the 3.x default theme does:

Code: Select all

.tabbrowser-tabs {
  -moz-appearance: -moz-win-browsertabbar-toolbox;
  background: -moz-dialog url("chrome://browser/skin/tabbrowser/tabbrowser-tabs-bkgnd.png") repeat-x;
}


Instead you should now place your tabstrip background image into #TabsToolbar for 4.0, and .tabbrowser-strip for 3.x. If you wanted, you could even use totally different images for 3.x and 4.0, so that your 3.x tabs have the "downward" fade background like the default theme, and the 4.0 tabs have the "upwards" fade background like the default theme.

Code: Select all

#TabsToolbar,
.tabbrowser-strip {
  background: -moz-dialog url("chrome://browser/skin/tabbrowser/tabbrowser-tabs-bkgnd.png") repeat-x;
}

/* OR */

.tabbrowser-strip {
  background: -moz-dialog url("chrome://browser/skin/tabbrowser/tabbrowser-tabs-bkgnd1.png") repeat-x;
}

/* you could also use a transition gradient here instead of an image */
#TabsToolbar {
  background: -moz-dialog url("chrome://browser/skin/tabbrowser/tabbrowser-tabs-bkgnd2.png") repeat-x;
}



Separate controls from content:

In Firefox 4.0, we want there to be a dark line at the bottom of the toolbox in tabs-on-top mode, but we want to do something different with tabs-on-bottom of Firefox 3.x. Remember, #navigator-toolbox is above the tabstrip in 3.x, so we don't want a hard line separating them. We can accomplish this with a little code based on the 4.0b1 default theme:

Code: Select all

#navigator-toolbox {
  border: none;
}

/* reproduces dark line at bottom of .tabs-bottom in tabs-on-top */
#navigator-toolbox[tabsontop="true"] {
  border-bottom: 1px solid !important;
  -moz-border-bottom-colors: ThreeDDarkShadow!important;
}


* A word of caution here. If you run 3.x and 4.0 under the same profile you may experience bugs dealing with the "tabsontop" selector. If you leave tabs set to the top in 4.0 and then close it and open 3.6, the theme will continue to obey "tabsontop" rules. It does not mean there is anything wrong with your theme, just remember to swap tabs back to the bottom before testing on 3.6.


Bring back the strip at the bottom of the tabs:

Even though .tabs-bottom doesn't exist any more doesn't mean we have to abandon a nice piece of design. I'll start with a few basic elements based on the 3.6 default theme and build on top of those:

Code: Select all

.tabbrowser-tab {
  margin: 3px 0px 4px 0px;
  padding: 0px 1px 1px 1px;
  background-color: transparent;
 border-bottom: none;
}

/* when hovered, tab grows upwards */
.tabbrowser-tab:not([selected="true"]):hover {
  margin: 2px 0px 4px 0px;
  padding: 1px 1px 1px 1px;
}

/* when selected, tab grows downwards and becomes opaque
 to obscure the line below and behind it */
.tabs-container > .tabs-closebutton,
.tabbrowser-tab[selected="true"] {
  margin: 1px 0px 3px 0px;
  padding: 2px 1px 2px 1px;
  background-color: -moz-dialog;
}

/* the top border separates background tabs from the active tab,
  the darker bottom border separates the tabs from the content */
.tabs-bottom {
  height: 4px;
  margin: 0px;
  background-color: -moz-dialog;
  border-top: 1px solid ThreeDShadow;
  border-bottom: 1px solid ThreeDDarkShadow;
}


This is basically the same as you will find in the default theme. Remember to use the same margins for .tabbrowser-arrowscrollbox > .scrollbutton-up, .tabbrowser-arrowscrollbox > .scrollbutton-down, .tabs-newtab-button, .tabs-alltabs-button as for the inactive tabs.

So how do we achieve the .tabs-bottom for 4.0? Try out this:

Code: Select all

/*   reproduce line at the top of .tabs-bottom for tabs-on-top mode */
#navigator-toolbox[tabsontop="true"]  #TabsToolbar {
  border: none;
  border-bottom: 1px solid ThreeDShadow !important;
}

/* reproduces .tabs-bottom with a dark border
 at the bottom of #TabsToolbar for tabs-on-bottom mode */
#navigator-toolbox[tabsontop="false"] #TabsToolbar {
  border: none;
  border-bottom: 4px solid !important;
  -moz-border-bottom-colors: ThreeDDarkShadow -moz-dialog -moz-dialog ThreeDShadow !important;
}

/* pulls tabs down to eliminate the effect of their bottom margins in 4.0 */
#TabsToolbar .tabbrowser-tabs {
  margin-bottom: -4px;
}



But I want tabs like in 4.0 in 3.x:

By modifying the margins and the bottom border colors, we can take these same instructions and build tabs that look just like the ones in 4.0, with the active tab touching the content:

Code: Select all

.tabbrowser-tab {
  margin: 3px 0px 1px 0px;
  padding: 0px 1px 1px 1px;
  background-color: transparent;
 border-bottom: none;
}

.tabbrowser-tab:not([selected="true"]):hover {
  margin: 2px 0px 1px 0px;
  padding: 1px 1px 1px 1px;
}

.tabs-container > .tabs-closebutton,
.tabbrowser-tab[selected="true"] {
  margin: 1px 0px 0px 0px;
  padding: 2px 1px 2px 1px;
  background-color: -moz-dialog;
}

.tabs-bottom {
  height: 0px;
  margin: 0px;
  border-bottom: 1px solid ThreeDDarkShadow;
}

#navigator-toolbox[tabsontop="true"]  #TabsToolbar {
  border: none;
  border-bottom: 1px solid ThreeDShadow !important;
}

#navigator-toolbox[tabsontop="false"] #TabsToolbar {
  border: none;
  border-bottom: 1px solid !important;
  -moz-border-bottom-colors: ThreeDShadow !important;
}

#TabsToolbar .tabbrowser-tabs {
  margin-bottom: -1px;
}



Dealing with a moveable new-tab-button:
(EDIT: changed this section 7/19)

In 3.6, the new-tab-button on the tabstrip is called .tabs-newtab-button. In Firefox 4.0 it is called #new-tab-button when tabs are in overflow mode or when a button is placed between the tab strip and the new tab button. Let's look at how the new tab button definitions worked in Firefox 3.x first:

Code: Select all

/* New tab button at then end of the tab strip */
.tabbrowser-arrowscrollbox > .tabs-newtab-button {
... styles for the button surround
}
.tabbrowser-arrowscrollbox > .tabs-newtab-button > .toolbarbutton-icon {
... define the image for the glyph
}

/* New tab button in between the overflow arrow and the all-tabs button */
.tabbrowser-tabs[overflow="true"] .tabs-newtab-button {
... styles for the button surround
}
.tabbrowser-tabs[overflow="true"] .tabs-newtab-button > .toolbarbutton-icon {
... define the image for the glyph
}


As you can see, they used the same name .tabs-newtab-button for both positions and you had to identify them with different selectors for the two different states. This has also been simplified somewhat in Firefox 4.0 by only using .tabs-newtab-button for when the button is attached to the end of the tabs strip. As you probably know, #new-tab-button is already the name of the toolbar new tab button, so in order to style the new button differently for when it's in the tab strip, we can use the selector #TabsToolbar with it:

Code: Select all

/* New tab button at then end of the tab strip, same in 3.x and 4.0 */
.tabbrowser-arrowscrollbox > .tabs-newtab-button {
... styles for the button surround
}
.tabbrowser-arrowscrollbox > .tabs-newtab-button > .toolbarbutton-icon {
... define the image for the glyph
}

/* New tab button for 4.0, generic instructions,
  do NOT use this if you want the separated new tab button to use the toolbar new tab button style */
#TabsToolbar #new-tab-button  {
... styles for the button surround
}
#TabsToolbar #new-tab-button > .toolbarbutton-icon {
... define the image for the glyph
}

/* New tab button in overflow mode, directly beside overflow arrow */
#TabsToolbar .tabbrowser-tabs[overflow="true"] + #new-tab-button,
.tabbrowser-tabs[overflow="true"] .tabs-newtab-button {
... styles for the button surround
}
#TabsToolbar .tabbrowser-tabs[overflow="true"] + #new-tab-button > .toolbarbutton-icon,
.tabbrowser-tabs[overflow="true"] .tabs-newtab-button > .toolbarbutton-icon {
... define the image for the glyph
}

/* Or get really crazy and define a separate button for the new tab button separated,
  do NOT use this if you want the separated new tab button to use the toolbar new tab button style */
#TabsToolbar .tabbrowser-tabs + * ~ #new-tab-button {
... styles for the button surround
}
#TabsToolbar .tabbrowser-tabs + * ~ #new-tab-button > .toolbarbutton-icon {
... define the image for the glyph
}



Disable 4.0 tab loading animations:

Firefox 4.0 will add a "wipe" effect that makes tabs appear to grow out of the new tab button.
(EDIT: Don't disable this via your theme as it will cause errors and "ghost tabs", 4/11)


Restore the padding space at the beginning of the tab strip:
(EDIT: added this section 8/21)

In the Firefox 4.0 default theme, the tabs all have a tiny gap between them, so they have gotten rid of the space at the beginning of the tab strip, but in 3.x it is coded like this:

Code: Select all

.tabs-container:not([overflow="true"]) {
  -moz-padding-start: 3px;
}


Since .tabs-container no longer exists in Firefox 4.0, we need a secondary code, but we need to keep this one around for 3.x.

Code: Select all

/* Gap at the beginning of the tab strip in 3.x and 4.0 */ 
.tabs-container:not([overflow="true"]),
#TabsToolbar .tabbrowser-tabs {
  -moz-padding-start: 3px;
}


And if you want a separating gap between your tabs and the App Tabs, you can do this:
(EDIT: Actually, do NOT do this. 4/11)

The reason you cannot do this is because of the way pinned tabs work. I was assuming that Firefox was physically moving them around in the DOM. It is NOT. Pinned tabs retain their position in the DOM and are only visually moved to the beginning of the tab strip. I have no idea why they are doing it this way but I would bet money it's why we are having so many problems styling pinned tabs. If you do the following you will see a random gap appear in the place where a pinned tab used to be.

Code: Select all

/* DO NOT DO THIS: */
.tabbrowser-tab[pinned="true"] + .tabbrowser-tab:not([pinned]) {
 -moz-margin-start: 3px;
}




Styling the App tabs:

Speaking of App tabs, there's a few things you should know about them. First off, the .tab-close-button element is hidden and so is the label. That leaves us with the .tab-icon-image. In order to adjust the width of the App tabs, you can use the left and right margins of the .tab-icon-image element:

Code: Select all

/* Set the width of the App tabs */
.tabbrowser-tab[pinned="true"] .tab-icon-image {
  margin-left: 6px;
  margin-right: 6px;
}


Secondly, the beginning margins for the App tabs are calculated by Firefox and negative margins are assigned to each one to make them appear all the way to the left of the overflow arrows. *Do not* attempt to force the start or left margin of any of the Apps tabs, this will cause them to scramble up. For some reason, [first-tab="true"] refers to the first App tab instead of the first real tab. I'm not sure why or if it will eventually be fixed, but for now If you have code that looks like the following you should remove it and use the code I posted above:

Code: Select all

/* DO NOT DO THIS will scramble App tabs! */
.tabbrowser-tab[first-tab="true"] {
-moz-margin-start: 3px;
}



Phew! I think that's it!
Last edited by patrickjdempsey on April 11th, 2011, 2:37 pm, edited 15 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/
User avatar
mcdavis
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Re: Backwards compatible tab styles for Firefox 4.0

Post by mcdavis »

Now that's what I'm talking about! Nice work.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: Backwards compatible tab styles for Firefox 4.0

Post by patrickjdempsey »

Let me know if you see any errors mcdavis. I've tested these *methods* in 3 of my themes, but I've tried to simplify and distill them here for wider use.
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
mcdavis
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Re: Backwards compatible tab styles for Firefox 4.0

Post by mcdavis »

patrickjdempsey wrote:Let me know if you see any errors


Will do. I haven't started on tabs yet -- I'm holding off on toolbar-area changes until last -- but I'll let you know if I see anything. I'm sure this will be very helpful.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: Backwards compatible tab styles for Firefox 4.0

Post by patrickjdempsey »

I've completely disabled the mozapps skin for 3.7+ versions for the same 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/
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: Backwards compatible tab styles for Firefox 4.0

Post by patrickjdempsey »

O.K. I've edited the section on the New Tab button to reflect a better understanding of how it works.
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
jivko
Posts: 237
Joined: September 2nd, 2008, 11:20 am

Re: Backwards compatible tab styles for Firefox 4.0

Post by jivko »

Guys I have a question about the tabs.The tabs in Firefox 4 are different from Firefox 3.x.x.I want to support version 3.x.x and 4 at the same time but some attributes from the tab codes are the same for both versions and if I change a pixel or a color it effects version 3 or version 4 because the two attributes are the same.Is there a way to import the Firefox 3.x.x code without effecting the Firefox 4 code?Not sure if I explained it correctly but I hope you got my problem. :)
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: Backwards compatible tab styles for Firefox 4.0

Post by patrickjdempsey »

You should be able to use the two illustrations I've drawn to sort out the differences in the structure. The biggest difference structurally is the missing .tabs-bottom which breaks the bottom margins of the tabs. If you are using .tabs-bottom in your theme, the directions I've given will allow you to use the same sets of instructions for the tabs in both versions.

However, if you want to generate two completely separate sets of instructions, just add the selectors .tabbrowser-strip before all of your 3.x instructions, and #TabsToolbar before your 4.0 instructions.
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: Backwards compatible tab styles for Firefox 4.0

Post by ehume »

Thank you Patrick. I am coping with this now.

One question I have:

Instead you should now place your tabstrip background image into #TabsToolbar and .tabbrowser-strip.


I thought the tabbrowser-strip is gone.
Firefox: Sic transit gloria mundi.
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: Backwards compatible tab styles for Firefox 4.0

Post by patrickjdempsey »

By including code for both, you can continue to support Firefox 3.6 which won't be out of commission until probably a year from now. You want to remove the background from .tabbrowser-tabs so that you won't have a weird background that doesn't fill up the toolbar in 4.0, and then move it to .tabbrowser-strip for 3.x support, and #TabsToolbar for 4.0 support. Sorry if I was being confusing there. Let me know if you run into any other weirdness. I'll edit the above text to be more clear. :)
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
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: Backwards compatible tab styles for Firefox 4.0

Post by patrickjdempsey »

Update Edit: I have added some code dealing with App tabs and the padding gap at the beginning of the tab strip. I also edited the section on disabling the tab animations. I had included the [fadein] tag which only disabled the animations for opening a new tab, not the ones for closing a tab.
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
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: Backwards compatible tab styles for Firefox 4.0

Post by patrickjdempsey »

I just wanted to add a note here. I'm seeing something new with the DOM structure... starting in 4.0 Beta 4. Maybe it's part of landing TabCandy but now the DOM tree looks something like this:

window#main-window
- deck#tab-view-deck
-- vbox
--- toolbox#navigator-toolbox

This is actually pretty convenient for themers because if we want any code in the main toolbars that is *only* for Firefox 4.0, we just have to add #tab-view-deck to the selectors.
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
mcdavis
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Re: Backwards compatible tab styles for Firefox 4.0

Post by mcdavis »

Thank you again, Patrick, for doing this. I've been using it this evening and you saved me quite a bit of time.

It might be worth noting the mechanism that puts the Tabs Toolbar above the others in "tabs on top" mode .. -moz-box-ordinal-group. I looked for a negative margin but didn't see it. Its position on-screen doesn't correspond to its order in the source document. It seems to be a few rules in browser/content setting different -moz-box-ordinal-group values on different toolbars so they order themselves as needed.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: Backwards compatible tab styles for Firefox 4.0

Post by patrickjdempsey »

You're welcome! I figured if I was going to go through the trouble of figuring it out, I would share! I know I need to update the graphics and some of the notes to reflect the tab-view structure.

Thank you for the note about -moz-box-ordinal-group. Just looked through \content\browser\browser.css and found this:

Code: Select all

#toolbar-menubar {
  -moz-box-ordinal-group: 5;
}

#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
  -moz-box-ordinal-group: 50;
}

#TabsToolbar {
  -moz-box-ordinal-group: 100;
}

#TabsToolbar[tabsontop="true"] {
  -moz-box-ordinal-group: 10;
}


I suppose if someone wanted to be reallly evil they could swap the values. ;) I'm sure some users would also prefer to have the menu below the tabs.
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
malliz
Folder@Home
Posts: 43796
Joined: December 7th, 2002, 4:34 am
Location: Australia

Re: Backwards compatible tab styles for Firefox 4.0

Post by malliz »

patrickjdempsey wrote:I suppose if someone wanted to be reallly evil they could swap the values. ;) I'm sure some users would also prefer to have the menu below the tabs.



This, in browser.css (or userChrome.css) does the trick -


Code: Select all

        #toolbar-menubar {
          -moz-box-ordinal-group: 10 !important;
        }

        #TabsToolbar[tabsontop="true"] {
          -moz-box-ordinal-group: 5 !important;
        }
What sort of man would put a known criminal in charge of a major branch of government? Apart from, say, the average voter.
"Terry Pratchett"
Post Reply