The purpose of this page is to provide provide theme developers with notes on how to fix common issues. It is a companion document to the AMO editors guide Common Theme Problems, which provides editors with "boilerplate" copy and paste review notes for common theme issues. This document was started on July 27, 2012 so it will take some time to completely fill in and some issues still need to have solutions written for them.
When tabs are on top and the menu bar is disabled, Firefox is missing the min/max/restore/close button on the right side of the title bar. Please see the following threads on MozillaZine for solutions to this issue:
http://forums.mozillazine.org/viewtopic.php?f=18&t=2131121
http://forums.mozillazine.org/viewtopic.php?f=18&t=1953371&start=60
On Win7 with Aero Glass support Firefox doesn't always go to full screen mode from a normal window properly. The resolution to this issue is to add the following code to your browser.css file somewhere below where the main-window is made transparent to support Aero glass.
@media all and (-moz-windows-compositor) {
/* Make transition to Fullscreen mode seamlessly in Firefox 10+ */
#main-window[inFullscreen="true"] {
-moz-appearance: none;
background-color: -moz-dialog!important;
}
}
For more information about this issue please see bug 732757 and bug 732757 and this MozillaZine thread.
Due to Firefox bug 679708 and bug 702558, some toolbar buttons icons may be missing on Firefox 8 and later running on Mac OS X Lion. In order to work around this issue, you need to either rename any of the following files that are in your chrome://browser/skin/ folder and fix any references to those files, or copy them to the folder chrome://browser/skin/lion/:
keyhole-circle.pngToolbar.pngtoolbarbutton-dropmarker.pngtabbrowser/alltabs-box-bkgnd-icon.pngtabview/tabview.pngplaces/toolbar.pngOn Linux: the styling of drop down select box fields may show both a drop arrow and up/down spinner arrows. The problem is commonly caused by a -moz-appearance:menulist style rule in chrome://global/skin/menulist.css. Once the offending rule is found, it should be deleted and manual styling used.
On Linux the Firefox app button that is displayed when tabs are on top and menu bar is disabled is not styled properly compared to Windows and is not changing colors when in private browsing mode. The cause of this issue is that Linux Firefox uses a different ID for the Firefox button from Windows. The fix is to make sure any style rule that references #appmenu-button also has a comparable reference to #appmenu-toolbar-button in chrome://browser/skin/browser.css. If your Firefox button relies on some button styling from toolbarbuttons.css you'll need to add comparable style rules for #appmenu-toolbar-button in browser.css.
When in private browsing mode there needs to be a visual difference to the Firefox app button that is displayed when tabs are on top and the menu bar is disabled.
When text only toolbar buttons are selected in customize toolbars, text labels in toolbar buttons may not align properly. The common cause of this is style rules that reference [iconsize="small"] without excluding [mode="text"]. The solution usually is to append :not ([mode="text"]) to those style rules. For instance use toolbar[iconsize="small"]:not ([mode="text"]). A little experimenting may be required to fully address this issue with your theme.
In Firefox 14 and later the identity box has been significantly changed and the favicon has been replaced by an icon that indicates the website's status. In the case of secure sites the icon must be a padlock. To fix this issue, you need to copy the files chrome://browser/skin/identity-icons-generic.png, chrome://browser/skin/identity-icons-https.png and chrome://browser/skin/identity-icons-https-ev.png to your browser folder. You can modify/redesign these icons to match your theme provided appropriate padlock icons are used for secure sites but not on insecure sites. The following CSS rules also need to be copied to the proper location in the browser.css file and modified as necessary:
/* page proxy icon */
#page-proxy-favicon {
width: 16px;
height: 16px;
margin: 1px 3px;
list-style-image: url(chrome://browser/skin/identity-icons-generic.png);
-moz-image-region: rect(0, 16px, 16px, 0);
}
.verifiedDomain > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon {
list-style-image: url(chrome://browser/skin/identity-icons-https.png);
}
.verifiedIdentity > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon {
list-style-image: url(chrome://browser/skin/identity-icons-https-ev.png);
}
#identity-box:hover > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon {
-moz-image-region: rect(0, 32px, 16px, 16px);
}
#identity-box:hover:active > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon,
#identity-box[open=true] > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon {
-moz-image-region: rect(0, 48px, 16px, 32px);
}
#page-proxy-favicon[pageproxystate="invalid"] {
opacity: 0.5;
}
For more information about identity boxes please see the identity box section of the AMO editors theme review guidelines
There needs to be a visual clue when URL bar is disabled. To test this please go to bug 324777 using the default theme and activate the "click me" link. The URL bar of the resulting popup window is disabled.
The sync panel at the bottom of the "door hanger" for the save password panel displayed when a user logs into a website needs to be styled to match rest of panel including border. This issue also applies to the edit bookmark panel, which is activated by double clicking on the bookmark star in the URL bar. For details, please see bug 708797.
In Tools > Add-ons, the icons of disabled icons need to be converted to grey scale. To accomplish this copy the file chrome://mozapps/skin/extensions/extensions.svg from the default theme into the mozapps/extensions/ folder of your theme and add the following style rule to the CSS file extensions.css:
.addon[active="false"] .icon {
filter: url("chrome://mozapps/skin/extensions/extensions.svg#greyscale");
opacity:0.3;
}
The styling of about:memory is a little messed up in that nodes do not collapse as they should when clicked on. To fix this issue you need to copy the following file from the latest version of Firefox to your theme: chrome://global/content/aboutMemory.css.
The domains on the domain list of about:permissions do not line up properly due to missing placeholder icons for domains without favicons. This issue is fixed by adding the following CSS instructions to the file browser/preferences/aboutPermissions.css:
.site-favicon {
height: 16px;
width: 16px;
-moz-margin-end: 4px;
list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
}
{to be added}
On the web console (Tools > Web Developer > Web Console), the toolbar buttons on the left-hand side do not change their appearance between their toggled on and toggled off status as a result it is not possible to determine which buttons are enabled.
The web console (Tools > Web Developer > Web Console) is missing its close button, which makes it impossible to close.
On the web console (Tools > Web Developer > Web Console) the sprite mapping for the close button is messed up.
The style inspector is missing icons from its inspect and markup panel buttons on its toolbar. To fix this issue you need to copy the files chrome://browser/skin/devtools/inspect-button.png and chrome://browser/skin/devtools/treepanel-button.png from the default theme into your browser/devetools/ folder. You also need to insert the following style rules into the proper place in the browser/browser.css file in your theme theme:
/* Highlighter toolbar - HTML Tree */
#inspector-treepanel-toolbutton {
list-style-image: url("chrome://browser/skin/devtools/treepanel-button.png");
-moz-margin-end: 0;
-moz-image-region: rect(0px 18px 16px 0px);
}
/* Highlighter toolbar */
#inspector-inspect-toolbutton {
list-style-image: url("chrome://browser/skin/devtools/inspect-button.png");
-moz-image-region: rect(0px 16px 16px 0px);
}
The style inspector that is part of Firefox 10 and later needs to be styled. Using the default theme in the latest Firefox, please try Tools > Web Developer > Inspect to see how this new feature functions and how it should be styled. You'll probably want to copy the files from the folder browser/devtools/ from the default theme into your theme and then modify as necessary to achieve the desired look.
The text labels of breadcrumbs on the style inspector (Tools > Web Developer > Inspect) are too similar to the background colors making them very hard to read. Please choose text label colors that stand out against the background color better. The style rules for these labels can be found near the end of chrome://browser/skin/browser.css. The color style for the following statements need to be adjusted:
.inspector-breadcrumbs-button {
.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-tag {
.inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-id {
.inspector-breadcrumbs-id,
.inspector-breadcrumbs-classes {
The use of the styling rule fill in -moz-border-image is incompatible with versions of Firefox older than Firefox14, however, its use is needed for Firefox 14 and later. Themes that use -moz-border-image and support both Firefox 14 and newer as well as older versions of Firefox need to use both the older and newer methodologies like the following example. In most themes this issue specifically affects the breadcrumbs toolbar of the style inspector.
.inspector-breadcrumbs-button {
-moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 2 13 2 13 stretch; /* For FF13- */
-moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 2 13 2 13 fill stretch; /* For FF14+ */
}
The Responsive design view tool (Tools > Web Developer > Responsive Design View) needs background styling for the unused area of the content window.
On the Debugger (Tools > Web Developer > Debugger) the toolbar buttons are missing their icons.
The HTML5 video control bar is not styled. Please go to Mozilla's Mission page using both your theme and the default theme and try the video on that page. This issue needs to be corrected in the next version of your theme.
The fullscreen icon is missing from the HTML5 video control bar. To test this go to Mozilla's Mission page.
Warning: If you copy over the Firefox 11 or newer style rules and graphics from the media folder in omni.ja you need to make the following changes in videocontrols.css or the pause and mute buttons will break in Firefox 10. Change the style rules:
.playButton[paused] {...}
.muteButton[muted] {...}
To:
.playButton[paused="true"] {...}
.muteButton[muted="true"] {...}
The error console is reporting the following issue:
Warning: Unknown namespace prefix 'html'. Ruleset ignored due to bad selector. Source file: chrome://global/skin/media/videocontrols.css
The solution to this issue is to add the following name space to the second line of the file right after, and in addition to, the existing @namespace:
@namespace html url("http://www.w3.org/1999/xhtml");
You can generate the error console message by going to Mozilla's Mission page. If you are using the extension Console² you can easily filter out content related messages to see just chrome issues.
Firefox no longer supports -moz-border-radius style properties. Use CSS standard border-radius properties instead (supported by Firefox since Firefox 4).
Firefox no longer supports -moz-box-shadow style property. Use CSS standard box-shadow property instead (supported by Firefox since Firefox 4).
Firefox no longer supports -moz-transition style property. Use CSS standard transition property instead (supported by Firefox since Firefox 4).
When developing and testing your themes, please refer to the theme testing guidelines AMO editors use to review themes. This guide will help you thoroughly test your theme to find and fix issues before you push updates to AMO. This is document is a work in progress so feedback and/or suggestions is appreciated.
Mozilla's Developer Network maintains a great CSS reference.
We'd like to encourage you to participate in the AMO (addons.mozilla.org) forums theme forum.
MozillaZine is NOT an official Mozilla website, but it does have the largest community of Firefox theme developers and is a great resource. Their theme development forum is here.
MozillaZine's Firefox nightly theme changes thread is a great resource for keeping up to date with the latest changes to the Firefox UI and contains links to the Bugzilla bug reports, which detail what changes were made.