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:
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:
Here you can see that the strip below the tabs in 3.x is called .tabs-bottom.
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!