Theme changes in Firefox 2

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

Note: We could use an article called Updating themes for Firefox 2 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
`browser/base/searchDialog.xul`	`browser/base/content/searchDialog.css`	Removed from Firefox 2.
`feeds/addFeedReader.xul`	`feeds/addFeedReader.css`	New file that presents UI for adding a new feed reader.
`feeds/subscribe.xhtml`	`feeds/subscribe.css`	New file that presents the UI for subscribing to an RSS feed.
`preferences/downloads.xul`	-	Removed from Firefox 2.
`preferences/general.xul`	-	Removed from Firefox 2.
`safebrowsing/warning-overlay.xul`	`safebrowsing/browser-protection.css`	New file containing the overlay that's drawn over the browser when you browse to a suspected phishing site.
`search/engineManager.xul`	`engineManager.css`	New file containing the UI for the Search Engine Manager window.
`toolkit/mozapps/preferences/fontscaling.xul`	-	Removed from Firefox 2.

Changes to the default theme

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

File	Description of change
`browser/bookmarks/addBookmark.css`	Updated to include microsummary-related CSS changes.
`browser/bookmarks/bookmarksProperties.css`	New file; includes microsummary-related CSS.
`browser/browser.css`	Needs to be updated to include new CSS for microsummaries, search fields, iconic bookmark menu items, and more.
`browser/dropmark-nav-small.png`	New file; used as the drop-down menu arrow on the navigation buttons, when using small icons.
`browser/dropmark-nav.png`	New file; used as the drop-down menu arrow on the navigation buttons.
`browser/engineManager.css`	New file; CSS used for the Search Engine Manager.
`browser/feeds/addFeedReader.css`	New file; CSS used for the window to add a new feed reader.
`browser/feeds/feedIcon.png`	New file; the RSS feed icon.
`browser/feeds/feedIcon16.png`	New file; the 16x16 pixel version of the RSS feed icon.
`browser/feeds/subscribe.css`	New file; CSS used for the window to subscribe to a news feed.
`browser/Go-rtl.png`	New file; Go icon to use if it's positioned at the left end of the URL field.
`browser/preferences/preferences.css`	File that skins the preferences window.
`browser/safebrowsing/browser-protection.css`	New file; CSS for the window that appears to warn the user that a site may be fraudulent, as well as the URL bar icon that indicates a site may be fraudulent.
`browser/safebrowsing/close16x16.png`	New file; this is the icon displayed in the safe browsing warning window as a close box for the window.
`browser/safebrowsing/dim.png`	New file; this is a graphic overlaid on top of the contents of the window to "dim" it when the safe browsing warning window is displayed. It should use translucency to allow the window contents to be visible through it.
`browser/safebrowsing/tail.png`	New file; this is the "tail" of the talk-bubble style window used to indicate that a site may be fraudulent.
`browser/safebrowsing/warning16x16.png`	New file; this is the 16x16 pixel version of the warning icon displayed in the URL bar when the safe browsing warning window is displayed.
`browser/safebrowsing/warning24x24.png`	New file; this is the warning icon that's displayed inside the safe browsing warning window.
`browser/search-bar-background-mid.png`	New file; the background for the middle part of the search bar. The ends of the bar are now skinned separately.
`browser/search-bar-background.png`	Removed file.
`browser/Search-bar.png`	Removed file.
`browser/Search-go-rtl.png`	New file; the go button displayed when it's at the left end of the search bar.
`browser/Search-go.png`	New file; the go button displayed when it's located at the right end of the search bar.
`browser/Search-provider-bkgnd-rtl.png`	New file; the background drawn behind the search provider icon when it's located at the left end of the search bar.
`browser/Search-provider-bkgnd.png`	New file; the background drawn behind the search provider icon when it's located at the right end of the search bar.
`global/about.css`	New file; CSS used in the application's about box.
`global/alltabs-box-bkgnd.png`	New file; the background for the "all tabs" drop-down menu at the right side of the tab bar.
`global/alltabs-box-overflow-bkgnd.png`	New file; the background for the "all tabs" drop-down menu when there are enough tabs to activate tab bar scrolling.
`global/browser.css`	Revised to support new styles for the main browser window.
`global/globalBindings.xml`	Updated to support changes to the tab bar, including per-tab close buttons.
`global/icons/alltabs.png`	Not actually used; left over from earlier drafts of the theme.
`global/inactivetab-left.png`	Removed file.
`global/inactivetab-right.png`	Removed file.
`global/menu.css`	Updated to include new styles.
`global/notification.css`	New file; defines styles used by the notification strip that appears at the top of browser windows to present notices such as "a popup was blocked."
`global/scrollbox/autorepeat-arrow-dn-dis.gif`	New file; icon displayed for a disabled autorepeat down arrow in a scroll box.
`global/scrollbox/autorepeat-arrow-dn.gif`	New file; icon displayed for an autorepeat down arrow in a scroll box.
`global/scrollbox/autorepeat-arrow-up-dis.gif`	New file; icon displayed for a disabled autorepeat up arrow in a scroll box.
`global/scrollbox/autorepeat-arrow-up.gif`	New file; icon displayed for an autorepeat up arrow in a scroll box.
`global/scrollbox.css`	Needs to be updated to include new styles.
`global/tab-arrow-end-bkgnd.png`	New file; the background for the scrolling tab bar arrow at the right side of the tab bar.
`global/tab-arrow-end.png`	New file; the arrow drawn in the scrolling tab bar box at the right end of the tab bar.
`global/tab-arrow-start-bkgnd.png`	New file; the background for the scrolling tab bar arrow at the left side of the tab bar.
`global/tab-arrow-start.png`	New file; the arrow drawn in the scrolling tab bar box at the left end of the tab bar.
`global/tab-left.png`	New file; the left edge of a tab.
`global/tab-middle.png`	New file; the middle of a tab.
`global/tab-right.png`	New file; the right edge of a tab.
`global/tabbrowser-tabs-bkgnd.png`	New file; the background for the tab bar, displayed behind all tabs.
`global/toolbar.css`	Needs to be updated to include new styles.
`mozapps/extensions/about.css`	Updated with a simplified set of style names, since several styles were identical.
`mozapps/extensions/extensions.css`	CSS for the add-ons manager window. Updated to support the new features of the Firefox 2 add-ons manager.
`mozapps/extensions/itemDisabledFader.png`	New file; a translucent PNG used as an overlay on top of items that are disabled in the add-ons manager.
`mozapps/extensions/itemEnabledFader.png`	New file; a translucent PNG used as an overlay on top of items that are enabled in the add-ons manager.
`mozapps/extensions/notifyBadges.png`	New file; contains the icons used ito badge the icons for add-ons in the add-on manager window to indicate their status. These look like this in the default theme: The first icon (green here) indicates that an add-on has an update available. The second icon (yellow here)appears to be used for blocklisted items; trying to confirm. The third icon (red here) indicates that an add-on is disabled, either by the user or because it's incompatible with the application. The fourth icon (blue here)(not sure what this one means).
`mozapps/extensions/question.png`	New file; used in the Add-ons Manager when you check for updates. If no updates are found, this icon is displayed at the left side of the message strip that appears across the top of the window.
`mozapps/extensions/update.css`	This file, which skins the Firefox update wizard, has fewer styles in it due to the redesigned update wizard.
`mozapps/extensions/viewButtons.png`	New file; contains icons for each of the views that may be available in the add-ons manager. In the default theme, these look something like this: The top row contains dimmed versions of the icons below them. The first icon is for the extensions view. The second is for themes. The third is for locales, the fourth is for plugins, the fifth is for updates, and the sixth is for installs.
`mozapps/pref`	This entire directory is no longer used in Firefox 2 and should be removed.

Changes in `browser`

`bookmarks/addBookmark.css`

The addBookmarks.css file should have the following lines added to the top:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");

Some microsummary-related CSS also needs to be added, to provide formatting for the microsummary picker. These are used to make the picker look like a regular text box instead of like an editable menu list when there are no microsummaries available.

menulist#name[droppable="false"]
menulist#name[droppable="false"] > .menulist-editable-box
menulist#name[droppable="false"] > .menulist-editable-box > html|*.textbox-input
menulist#name[droppable="false"] > .menulist-dropmarker
menulist#name[droppable="false"] > menupopup

This file styles addBookmark2.xul.

`bookmarks/bookmarksProperties.css`

This is a new file in Firefox 2, and should contain the same CSS code as you added to addBookmark.css. This file styles bookmarksProperties.xul.

Note: This CSS may be moved out into a separate file that will be referenced by both files in the future.

`browser.css`

The following styles used in Firefox 1.5 themes are no longer used in Firefox 2 and should be removed from your theme:

#bookmarks-button:active
#copy-button:active
#cut-button:active
#downloads-button:active
#forward-button[buttondown="true"]
#history-button:active
#home-button:active
#mail-button
#mail-button:active
#mail-button[disabled="true"]
#mail-button[open="true"]
#new-tab-button:active
#new-tab-button[checked="true"]
#new-window-button:active
#new-window-button[checked="true"]
#paste-button:active
#print-button:active
#reload-button:active
#stop-button:active
.messageButton
.messageImage
.messageText
browsermessage
toolbar[iconsize="small"] #bookmarks-button:active
toolbar[iconsize="small"] #copy-button:active
toolbar[iconsize="small"] #cut-button:active
toolbar[iconsize="small"] #downloads-button:active
toolbar[iconsize="small"] #history-button:active
toolbar[iconsize="small"] #home-button:active
toolbar[iconsize="small"] #mail-button
toolbar[iconsize="small"] #mail-button:active
toolbar[iconsize="small"] #mail-button[disabled="true"]
toolbar[iconsize="small"] #mail-button[open="true"]
toolbar[iconsize="small"] #new-tab-button:active
toolbar[iconsize="small"] #new-window-button:active
toolbar[iconsize="small"] #paste-button:active
toolbar[iconsize="small"] #print-button:active
toolbar[iconsize="small"] #reload-button:active
toolbar[iconsize="small"] #stop-button:active
toolbar[mode="icons"] .toolbarbutton-text
toolbar[mode="text"] .toolbarbutton-1 > .toolbarbutton-text
toolbar[mode="text"] .toolbarbutton-1 > stack > toolbarbutton > .toolbarbutton-text
toolbar[mode="text"] .toolbarbutton-icon

The following styles need to be added to your theme to be compatible with Firefox 2:

#back-button .toolbarbutton-menubutton-dropmarker
#back-button:hover
#back-button:hover .toolbarbutton-menubutton-dropmarker
#back-button:hover:active
#back-button:hover:active .toolbarbutton-menubutton-dropmarker
#back-button[buttondown="true"] > .toolbarbutton-menubutton-dropmarker
#back-button[buttonover="true"]
#back-button[buttonover="true"] > .toolbarbutton-menubutton-dropmarker
#back-button[disabled="true"] .toolbarbutton-menubutton-dropmarker
#back-button[open="true"]
#bookmarks-button:hover
#bookmarks-button:hover:active
#bookmarks-button[checked="true"]
#copy-button:hover
#copy-button:hover:active
#cut-button:hover
#cut-button:hover:active
#downloads-button:hover
#downloads-button:hover:active
#feed-button[chromedir="rtl"][feeds]:active
#feed-button[chromedir="rtl"][feeds]:hover
#feed-button[feeds]:active
#feed-button[feeds]:hover
#forward-button .toolbarbutton-menubutton-dropmarker
#forward-button:hover
#forward-button:hover .toolbarbutton-menubutton-dropmarker
#forward-button:hover:active
#forward-button:hover:active .toolbarbutton-menubutton-dropmarker
#forward-button[buttondown="true"] > .toolbarbutton-menubutton-dropmarker
#forward-button[buttonover="true"]
#forward-button[buttonover="true"] > .toolbarbutton-menubutton-dropmarker
#forward-button[disabled="true"] .toolbarbutton-menubutton-dropmarker
#go-button:hover
#go-button[chromedir="rtl"]
#history-button:hover:active
#history-button:hover:active
#history-button[checked="true"]
#home-button:hover
#home-button:hover:active
#new-tab-button:hover
#new-tab-button:hover:active
#new-window-button:hover
#new-window-button:hover:active
#paste-button:hover
#paste-button:hover:active
#print-button:hover
#print-button:hover:active
#reload-button:hover
#reload-button:hover:active
#searchbar[empty="true"] .searchbar-textbox
#stop-button:hover
#stop-button:hover:active
#urlbar-icons-spacer
#urlbar-spacer
#urlbar[level="high"] #lock-icon:active
#urlbar[level="high"] #lock-icon:hover
#urlbar[level="low"] #lock-icon:active
#urlbar[level="low"] #lock-icon:hover
.autocomplete-treebody::-moz-tree-cell(suggesthint)
.autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
.autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment)
.bookmark-item[livemark]
.openintabs-menuitem
.toolbarbutton-icon
.toolbarbutton-menubutton-dropmarker
toolbar[iconsize="small"] #back-button .toolbarbutton-menubutton-dropmarker
toolbar[iconsize="small"] #back-button:hover
toolbar[iconsize="small"] #back-button:hover .toolbarbutton-menubutton-dropmarker
toolbar[iconsize="small"] #back-button:hover:active
toolbar[iconsize="small"] #back-button:hover:active .toolbarbutton-menubutton-dropmarker
toolbar[iconsize="small"] #back-button[buttondown="true"] > .toolbarbutton-menubutton-dropmarker
toolbar[iconsize="small"] #back-button[buttonover="true"] > .toolbarbutton-menubutton-dropmarker
toolbar[iconsize="small"] #back-button[disabled="true"] .toolbarbutton-menubutton-dropmarker
toolbar[iconsize="small"] #bookmarks-button:hover
toolbar[iconsize="small"] #bookmarks-button:hover:active
toolbar[iconsize="small"] #copy-button:hover
toolbar[iconsize="small"] #copy-button:hover:active
toolbar[iconsize="small"] #cut-button:hover
toolbar[iconsize="small"] #cut-button:hover:active
toolbar[iconsize="small"] #downloads-button:hover
toolbar[iconsize="small"] #downloads-button:hover:active
toolbar[iconsize="small"] #forward-button .toolbarbutton-menubutton-dropmarker
toolbar[iconsize="small"] #forward-button:hover
toolbar[iconsize="small"] #forward-button:hover .toolbarbutton-menubutton-dropmarker
toolbar[iconsize="small"] #forward-button:hover:active
toolbar[iconsize="small"] #forward-button:hover:active .toolbarbutton-menubutton-dropmarker
toolbar[iconsize="small"] #forward-button[buttondown="true"] > .toolbarbutton-menubutton-dropmarker
toolbar[iconsize="small"] #forward-button[buttonover="true"] > .toolbarbutton-menubutton-dropmarker
toolbar[iconsize="small"] #forward-button[disabled="true"] .toolbarbutton-menubutton-dropmarker
toolbar[iconsize="small"] #history-button:hover
toolbar[iconsize="small"] #history-button:hover:active
toolbar[iconsize="small"] #home-button:hover
toolbar[iconsize="small"] #home-button:hover:active
toolbar[iconsize="small"] #home-button[disabled="true"]
toolbar[iconsize="small"] #new-tab-button:hover
toolbar[iconsize="small"] #new-tab-button:hover:active
toolbar[iconsize="small"] #new-window-button:hover
toolbar[iconsize="small"] #new-window-button:hover:active
toolbar[iconsize="small"] #paste-button:hover
toolbar[iconsize="small"] #paste-button:hover:active
toolbar[iconsize="small"] #print-button:hover
toolbar[iconsize="small"] #print-button:hover:active
toolbar[iconsize="small"] #reload-button:hover
toolbar[iconsize="small"] #reload-button:hover:active
toolbar[iconsize="small"] #stop-button:hover
toolbar[iconsize="small"] #stop-button:hover:active
toolbarbutton.bookmark-item-microsummarized

You may need to make changes to other styles as well.

`searchbar.css`

The following style is no longer used in Firefox 2 and should be removed from your theme:

.searchbar-dropmarker

The following styles need to be added to your theme to be compatible with Firefox 2:

#search-container[chromedir="rtl"] .search-go-button
#search-container[chromedir="rtl"] .searchbar-engine-button
.search-go-button
.search-go-button:hover
.search-go-button:hover:active
.search-go-button[disabled="true"]
.searchbar-engine-button
.searchbar-engine-button:hover
.searchbar-engine-button[addengines="true"]
.searchbar-engine-button[open="true"]
.searchbar-engine-menuitem[selected="true"] > .menu-iconic-text
.searchbar-left

You may of course wish to make changes to other styles as well.

`preferences/preferences.css`

The following styles are no longer used in Firefox 2 and should be removed from your theme:

#browserStartupHomepage
#browserStartupHomepage
#paneDownloads description
#paneGeneral description
radio[pane=paneDownloads]
radio[pane=paneDownloads]:active

The following styles need to be added to your theme to make it compatible with Firefox 2:

#paneContent description
#paneMain description
#paneSecurity description
radio[pane=paneAdvanced]:hover
radio[pane=paneAdvanced][selected="true"]
radio[pane=paneContent]:hover
radio[pane=paneContent][selected="true"]
radio[pane=paneFeeds]
radio[pane=paneFeeds]:active
radio[pane=paneFeeds]:hover
radio[pane=paneFeeds][selected="true"]
radio[pane=paneGeneral]:hover
radio[pane=paneGeneral][selected="true"]
radio[pane=paneMain]
radio[pane=paneMain]:active
radio[pane=paneMain]:hover
radio[pane=paneMain][selected="true"]
radio[pane=panePrivacy]:hover
radio[pane=panePrivacy][selected="true"]
radio[pane=paneSecurity]
radio[pane=paneSecurity]:active
radio[pane=paneSecurity]:hover
radio[pane=paneSecurity][selected="true"]
radio[pane=paneTabs]:hover
radio[pane=paneTabs][selected="true"]

You may of course wish to change other styles as well.

`feeds/addFeedReader.css`

This is a new file in Firefox 2. It's used to skin the window displayed to add a new feed reader, which is defined in the file browser/feeds/addFeedReader.xul.

#imageBox
- The box that displays the feed icon.
#content
- Style information for the content area of the window.
#siteLabel
- Style information for the site label.

`feeds/subscribe.css`

This is a new file in Firefox 2. It skins the window displayed to subscribe to an RSS feed, which is at browser/feeds/subscribe.xhtml.

#application
#feedBody
#feedChangeSubscribeOptions
#feedError
#feedHeader
#feedHeader[firstrun="true"]
#feedHeader[firstrun="true"] #feedIntroText
#feedHeader[firstrun="true"] #feedSubscribeLine
#feedIntroText
#feedSubscribeDoneChangingOptions
#feedSubscribeHandleText
#feedSubscribeHandler
#feedSubscribeLine
#feedSubscribeOptions
#feedSubscribeOptionsGroup
#feedSubscribeOptionsGroupTitle
#feedTitleContainer
#feedTitleImage
#feedTitleLink
#readerContainer
#readerGroup
#readers
#readers > listitem
.feedEntryContent
.feedSubscribeButton
.feedSubscribeButton .button-icon
.feedSubscribeLink
.feedSubscribeLinkBox
.field
.link
.link:hover:active
.plain
.plain > .button-box
.plain:focus > .button-box
.styleLessBorderLess

The default theme also includes styles for a[href] img, body, h1, h2, and html.

`safebrowser/browser-protection.css`

This file, new to Firefox 2, skins browser protection features. The following styles must be implemented to support the window that appears when the user browses to a suspected phishing site:

#safebrowsing-dim-area-canvas
#safebrowsing-page-canvas
#safebrowsing-palm-close
#safebrowsing-palm-close-container
#safebrowsing-palm-google-logo
#safebrowsing-palm-message
#safebrowsing-palm-message-actionbox
#safebrowsing-palm-message-content
#safebrowsing-palm-message-tail
#safebrowsing-palm-message-tail-container
#safebrowsing-palm-message-titlebox
.safebrowsing-palm-bigtext
.safebrowsing-palm-fixed-width
.safebrowsing-palm-paragraph
.safebrowsing-palm-smalltext

The following styles are used to display, in the URL bar, an indicator of whether or not the site is safe:

#safebrowsing-urlbar-icon
#safebrowsing-urlbar-icon[level="safe"]
#safebrowsing-urlbar-icon[level="warn"]

`engineManager.css`

The following style needs to be implemented. This file is new in Firefox 2.

#engineList treechildren::-moz-tree-image(engineName)

Changes in `global`

`about.css`

This is a new file for Firefox 2. It skins the Firefox about box, and needs to provide at least the following styles:

#aboutLogoContainer
#aboutPageContainer
#version

The default theme also skins the following styles: body, html, img, ul, and ul > li.

`browser.css`

The following styles that were used in Firefox 1.5 are no longer used in Firefox 2 and have been removed:

tab:focus
tab[beforeselected="true"] > .tab-image-right
tab[selected="true"] > .tab-image-left
tab[selected="true"] > .tab-image-middle
tab[selected="true"] > .tab-image-right

The following styles are new in Firefox 2:

.alltabs-item > .menu-iconic-left > .menu-iconic-icon
.alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon
.alltabs-item[selected="true"]
.tab-close-button
.tab-close-button > .toolbarbutton-icon
.tab-close-button-placeholder
.tab-close-button:hover
.tab-close-button:hover:active
.tabbrowser-arrowscrollbox > .scrollbutton-down
.tabbrowser-arrowscrollbox > .scrollbutton-down:hover
.tabbrowser-arrowscrollbox > .scrollbutton-up
.tabbrowser-arrowscrollbox > .scrollbutton-up:hover
.tabbrowser-tab > .tab-close-button
.tabbrowser-tab:not([selected="true"]) > .tab-close-button
.tabbrowser-tab:not([selected="true"]):hover > .tab-close-button
.tabbrowser-tab[selected="true"] > .tab-close-button
.tabbrowser-tab[selected="true"] > .tab-close-button:hover
.tabbrowser-tab[selected="true"] > .tab-close-button:hover:active
.tabbrowser-tabs[overflow="true"] .tabs-alltabs-box
.tabs-alltabs-box
.tabs-alltabs-box:hover
.tabs-alltabs-box[flash="true"]
tab > .tab-image-left
tab > .tab-image-middle
tab > .tab-image-middle > .tab-text
tab > .tab-image-right
tab:focus > .tab-image-middle > .tab-text
tab:hover:not([selected="true"]) > .tab-image-left
tab:hover:not([selected="true"]) > .tab-image-middle
tab:hover:not([selected="true"]) > .tab-image-right
tab:not([selected="true"]) > .tab-image-left
tab:not([selected="true"]) > .tab-image-middle
tab[selected="true"] .tab-image-middle > .tab-text

You may of course wish to make changes to other styles as well.

`menu.css`

The following style is no longer used in Firefox 2 and has been removed:

menulist > menupopup > menuitem[_moz-menuactive="true"]

The Firefox 2 theme also adds the following new styles:

.menu-iconic-icon
menubar > menu
menubar > menu[_moz-menuactive="true"][open="true"]
menuitem[type="checkbox"] > .menu-iconic-left
menuitem[type="radio"] > .menu-iconic-left

You may wish to change the definitions of other styles as well.

`notification.css`

This is a new file in Firefox 2. It is used for the notification bar along the top of the browser that displays messages to the user such as popup blocked, or a plugin is needed and so forth. There are three severity levels for messages, info, warning and critical. You should define the following styles:

.messageButton
.messageCloseButton
.messageImage
.messageText
.notification-inner
notification
notification[type="info"]
notification[type="warning"]
notification[type="critical"]

`scrollbox.css`

The following new styles have been added to this file for Firefox 2 themes:

.autorepeatbutton-down[disabled="true"]
.autorepeatbutton-down[orient="horizontal"]
.autorepeatbutton-down[orient="horizontal"][disabled="true"]
.autorepeatbutton-up[disabled="true"]
.autorepeatbutton-up[orient="horizontal"]
.autorepeatbutton-up[orient="horizontal"][disabled="true"]
.scrollbutton-down
.scrollbutton-down > .toolbarbutton-text
.scrollbutton-down[disabled="true"]
.scrollbutton-down[orient="horizontal"]
.scrollbutton-down[orient="horizontal"][disabled="true"]
.scrollbutton-up
.scrollbutton-up > .toolbarbutton-text
.scrollbutton-up[disabled="true"]
.scrollbutton-up[orient="horizontal"]
.scrollbutton-up[orient="horizontal"][disabled="true"]

toolbar[mode="icons"] .toolbarbutton-text
toolbar[mode="text"] .toolbarbutton-1 > .toolbarbutton-text
toolbar[mode="text"] .toolbarbutton-1 > stack > toolbarbutton > .toolbarbutton-text
toolbar[mode="text"] .toolbarbutton-icon

You may wish to change other styles as well.

Changes in `mozapps`

`extensions/about.css`

The following styles from Firefox 1.5 are no longer used in Firefox 2 and should be removed:

#contributorsBox
#creatorBox
#extensionContributors
#extensionContributors
#extensionCreatorLabel

The following styles were added:

.indent
.sectionTitle

You may wish to make changes to other styles as well.

`extensions/update.css`

The following styles are no longer used in Firefox 2 and should be removed from your theme:

#foundList
#statusbar-updates
.updateCategoryBox
.updateCategoryContent
.updateCategoryIcon
.updateCategoryLabel[selected="true"]
.updateIcon
.updateIcon[severity="0"]
.updateIcon[severity="1"]
.updateIcon[severity="2"]
.updateIndicator > label
.updateIndicator[updateCount="0"]
.updateItemChecked
.updateItemChecked .checkbox-label-box
.updateItemFromLabel
.updateItemIcon
.updateItemIcon
.updateItemName
.updateItemNameRow
.updateItemURL
.warning
radio[type="update-type"]
radiogroup[type="update-types"]
toolbarbutton[type="updates"]
toolbarbutton[type="updates"] > .toolbarbutton-icon
toolbarbutton[type="updates"][severity="0"] > .toolbarbutton-icon
toolbarbutton[type="updates"][severity="1"] > .toolbarbutton-icon
toolbarbutton[type="updates"][severity="2"] > .toolbarbutton-icon
toolbarbutton[type="updates"][updateCount="0"]
updateitem

The following styles were also added:

.alertBox
.throbber

Document Tags and Contributors

Tags:

Contributors to this page: wbamberg, ethertank, Mgjbot, Sheppy, Clkinder, Planche, Ptak82, Enn, Taken, Cameron, Nickolay

Last updated by: wbamberg, Jan 15, 2016, 11:02:50 AM

Theme changes in Firefox 2

Browser changes requiring theme updates

Changes to the default theme

Changes in browser

bookmarks/addBookmark.css

bookmarks/bookmarksProperties.css

browser.css

searchbar.css

preferences/preferences.css

feeds/addFeedReader.css

feeds/subscribe.css

safebrowser/browser-protection.css

engineManager.css

Changes in global

about.css

browser.css

menu.css

notification.css

scrollbox.css

Changes in mozapps

extensions/about.css

extensions/update.css

Document Tags and Contributors

Changes in `browser`

`bookmarks/addBookmark.css`

`bookmarks/bookmarksProperties.css`

`browser.css`

`searchbar.css`

`preferences/preferences.css`

`feeds/addFeedReader.css`

`feeds/subscribe.css`

`safebrowser/browser-protection.css`

`engineManager.css`

Changes in `global`

`about.css`

`browser.css`

`menu.css`

`notification.css`

`scrollbox.css`

Changes in `mozapps`

`extensions/about.css`

`extensions/update.css`