AMO:Editors/EditorGuide/CommonThemeProblems

AMO Add-on Validator Warnings

General Tests

No em:type found

No em:type was found in the install.rdf. Please add "<em:type>4</em:type>" to your theme's install.rdf as it will aid Firefox in determining what kind of add-on is being installed and eliminate a validation error.

No em:unpack

This add-on contains JAR/XPI files but no <em:unpack>. Please either replacing internal JAR file with an unpacked folder structure (preferred), OR add <em:unpack>true</em:unpack> to your install.rdf. This will help improve Firefox loading performance for some users and it would get rid of a validation error.

Unrecognized element <em:internalName>

The element<em:internalName> is in the install.rdf. This element name is not part of the specification and should be removed.  This would help get rid of one validtion error.

OS Specific Issues

Win7

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

Firefox not going into full screen mode properly on Win7 Aero

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 https://bugzilla.mozilla.org/show_bug.cgi?id=732757 and http://forums.mozillazine.org/viewtopic.php?f=18&t=2438459.

OS X

OS X Lion toolbar button icons are missing

Due to Firefox bugs 679708 (https://bugzilla.mozilla.org/show_bug.cgi?id=679708) and 702558 (https://bugzilla.mozilla.org/show_bug.cgi?id=702558), it appears that your toolbar buttons may be broken on FF8+ 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 drop down select box fields are showing both drop arrow and spinner arrows

On Linux: The styling of drop down select box fields are showing 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.

Firefox 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 App Button

App button doesn't change styling for private browsing mode

When in private browsing mode there is no 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 are not aligning 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

The identity box is missing padlock icons for secure sites

In FF14+ 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. For more information please see: https://wiki.mozilla.org/AMO:Editors/EditorGuide/ThemeReviews#Identity_Boxes

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 https://bug486395.bugzilla.mozilla.org/attachment.cgi?id=370495 using the default theme and activate the "click me" link. The URL bar of the resulting popup window is disabled.

Address Bar "Door Hangers"

Sync panel on door hangers 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 https://bugzilla.mozilla.org/show_bug.cgi?id=708797

"About" Pages

About:addons

Icons for disabled add-ons need to be grey scale

In Tools > Add-ons, the icons of disabled icons need to be converted to grey scale. To accomplish this you need to 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 does not collapse correctly

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

Toggle buttons on web console 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

The style inspector is completely unstyled

The style inspector that is part of FF10.0+ 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 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 follow 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 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 FF14, however, its use is needed for FF14+. Themes that use -moz-border-image and support both FF14+ and 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 https://www.mozilla.org/en-US/mission/ 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 full screen icon is missing from the HTML5 video control bar. To test this go to http://www.mozilla.org/mission/. WORD OF WARNING: If you copy over the FF11+ 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 FF10. Change the style rules:
---
  .playButton[paused] {...}
  .muteButton[muted] {...}
---
To:
---
  .playButton[paused="true"] {...}
  .muteButton[muted="true"] {...}
---

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("http://www.w3.org/1999/xhtml");
---
You can generate the error console message by going to https://www.mozilla.org/mission/. If you are using the extension Console² (https://addons.mozilla.org/en-US/firefox/addon/console²) you can easily filter out content related messages to see just chrome issues.

Error Console Warnings

Obsolete CSS Rules

Warning: Unknown property '-moz-border-radius'. Declaration dropped

Firefox no longer supports -moz-border-radius style properties. Use CSS standard border-radius properties instead (supported by Firefox since FF4.0). See: https://developer.mozilla.org/en/CSS/border-radius

Warning: Unknown property '-moz-box-shadow'. Declaration dropped

Firefox no longer supports -moz-box-shadow style property. Use CSS standard box-shadow property instead (supported by Firefox since FF4.0). See: https://developer.mozilla.org/en/CSS/box-shadow

Warning: Unknown property '-moz-transition'. Declaration dropped.

Firefox no longer supports -moz-transition style property. Use CSS standard transition property instead (supported by Firefox since FF4.0). See: https://developer.mozilla.org/en/CSS/transition

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 at https://wiki.mozilla.org/AMO:Editors/EditorGuide/ThemeReviews. 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.

MDN CSS Reference

Mozilla's Developer Network maintains a great CSS reference at https://developer.mozilla.org/en/CSS/CSS_Reference

AMO Themes Forum

We'd like to encourage you to participate in the AMO (addons.mozilla.org)  forums theme forum at: https://forums.mozilla.org/addons/viewforum.php?f=8

MozillaZine Themes 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 at: http://forums.mozillazine.org/viewforum.php?f=18

MozillaZine Firefox Nightly Theme Changes Thread

MozillaZine's Firefox nightly theme changes thread (http://forums.mozillazine.org/viewtopic.php?f=18&t=2173163) 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.