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.
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 .