Draft
This page is not complete.

This article covers the changes that need to be made to update a Firefox theme to work properly in Firefox 3.

Note: We could use an article called Updating themes for Firefox 3 that would serve as a how-to guide for updating themes. If anyone with theming experience would like to write one, please do!

Browser changes requiring theme updates

There are a number of changed and deleted files in the browser that may require you to make changes to your theme. The table lists both the changed XUL file and the theme's corresponding CSS file that you might need to update.

Filename CSS File Details
     

Changes to the default theme

The table below lists changes made in the default theme for Firefox 3; you can use this information as a starting point for figuring out the changes you need to make.

All file list

All platforms

File Description of change
browser/themes/*/browser/browser.css The width of the drag and drop indicator is no longer calculated during the drag (tabbrowser.xml). Instead a '-moz-margin-start' property must be added to .tab-drop-indicator-bar, with a value that is half of the width of the indicator image. Also, the visibility of the indicator is now controlled by setting collapsed in tabbrowser.xml. As a result, the 'display' property should be removed from .tab-drop-indicator-bar (including for dragging="true").

Mac OS X

File Description of change
browser/themes/pinstripe/browser/tabbrowser/tabDragIndicator.png Removed superfluous blank pixels from the edges, so that the image is smaller. May or may not affect other Mac themes that use it.
browser/themes/pinstripe/browser/browser.css .tabbrowser-tab[first-tab="true"] > .tab-image-left no longer has a margin-left. Instead .tabs-left now displayed and given the same width as the former margin-left. It was already done this way in Winstripe.

Changes in browser

---

Changes in global

All platforms

The yellow background for the location bar has been deprecated; instead, themes should style the new #identity-box element depending on its verifiedDomain/verifiedIdentity class.

The Go button is now located inside the location bar, so the image for it (chrome://browser/skin/Go-arrow.png) needs to be smaller. The rule that's needed to show and hide the Go button and other location bar icons is:

#urlbar[pageproxystate="invalid"] > #urlbar-icons > :not(#go-button) ,
#urlbar[pageproxystate="valid"] > #urlbar-icons > #go-button {
  visibility: collapse;
}
Images to add

Add the following images:

chrome://global/skin/icons/information-16.png
Used when presenting information notices.
chrome://global/skin/icons/warning-16.png
Used when displaying warnings.
Images to remove

The following images were removed:

chrome://mozapps/skin/extensions/question.png
No longer used.

Mac OS X

Mac OS X themes for Firefox 3 should add these two rules to the end of chrome://global/skin/wizard.css:

.wizard-buttons-btm {
  padding:Xpx;
}

.wizard-label-box {
  display: none;
}

The numeric value ofX, the number of pixels of padding in .wizard-buttons-btm, should be the same as the value of the margin for .wizard-buttons-box-2.

Image Changes

chrome://global/skin/icons/loading_16.gif was replaced with chrome://global/skin/icons/loading_16.png .

Changes in mozapps

See also