Common Firefox theme issues and solutions

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.

Operating system specific issues

Windows 7

Windows 7 Aero missing right-hand title bar buttons

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:
https://forums.mozillazine.org/viewtopic.php?f=18&t=2131121
https://forums.mozillazine.org/viewtopic.php?f=18&t=1953371&start=60

Windows 7 Aero not going into full screen mode properly

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.

Mac OS X

OS X Lion missing toolbar button icons

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.png
Toolbar.png
toolbarbutton-dropmarker.png
tabbrowser/alltabs-box-bkgnd-icon.png
tabview/tabview.png
places/toolbar.png

Linux

Linux select box fields are showing both drop arrow and spinner arrows

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

App button not styled on Linux, but is styled on Windows

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.

Toolbars and menus

Firefox application button

Application button doesn't change styling for private browsing mode

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.

Text only toolbar buttons not aligned properly

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.

Address bar

Identity box is missing padlock icons for secure sites

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

No visual clue for disabled url bars

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.

Address bar "door hangers"

Door hanger sync panel not styled

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.

"About" Pages

about:addons

Disabled add-on Icons are not grey scale

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;
 }

about:memory

About:memory nodes do not collapse

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.

about:permissions

Domain names don't line up in about:permissions

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");
}

Web developer tools

Web developer toolbar

{to be added}

Web console

Web console buttons do not change appearance

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.

Web console close button is missing

The web console (Tools > Web Developer > Web Console) is missing its close button, which makes it impossible to close.

Web console close button sprite mapping is messed up

On the web console (Tools > Web Developer > Web Console) the sprite mapping for the close button is messed up.

Style Inspector

Style inspector is missing button icons on toolbar

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);
}

Style inspector is completely unstyled

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.

Style inspector's bread crumb buttons are hard to read

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 {

Style inspector breadcrumb button backgrounds are not consistent between pre-FF14 and FF14+

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+ */
}

Responsive design view

Responsive design view is missing background for unused area

The Responsive design view tool (Tools > Web Developer > Responsive Design View) needs background styling for the unused area of the content window.

Debugger

Debugger toolbar buttons are missing icons

On the Debugger (Tools > Web Developer > Debugger) the toolbar buttons are missing their icons.

Miscellaneous issues

HTML 5 media controls

HTML 5 media controls are not styled

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.

HTML 5 media control bar is missing full screen button

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"] {...}

Error console warnings

Unknown namespace for videocontrols.css

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("https://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.

Warning: Unknown Property (Obsolete CSS Rules)

-moz-border-radius

Firefox no longer supports -moz-border-radius style properties. Use CSS standard border-radius properties instead (supported by Firefox since Firefox 4).

-moz-box-shadow

Firefox no longer supports -moz-box-shadow style property. Use CSS standard box-shadow property instead (supported by Firefox since Firefox 4).

-moz-transition

Firefox no longer supports -moz-transition style property. Use CSS standard transition property instead (supported by Firefox since Firefox 4).

Resources

AMO Editors Theme Testing Guidelines

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.