View source for Add-ons/Reviewers/Guide/CompleteThemes

Complete themes are less security-sensitive than other add-ons, but they still need to be implemented with great care so they don't break the way Firefox looks.

There's also the special case of [https://developer.mozilla.org/en-US/docs/Multiple_Item_Packaging multi-package installers], which are generally used to bundle a theme and a configuration extension. In this case both an extension review and a theme review are necessary.

= Basic testing =

Testing should be done on a new profile. The code validator doesn't have many useful tests for themes, but it should flag if there's any code in the theme. Reject if that's the case. If you see the "No em:type found" or "Unrecognized element <em:internalName>" warnings, they are worth bringing up to the developer as a note so they can fix it in the next version.

While reviewing themes, watch the Browser Console console for any CSS warnings that are flagged for chrome paths containing the word "skin". Warnings should be copied from the error console and pasted into review notes for the developer to investigate.  Generally, warnings about CSS issues should '''not''' be grounds for withholding a review of a theme. However, providing notes to developers about CSS issues can be tremendously helpful to theme development.

{| cellspacing="0" cellpadding="1" border="0" style="width: 80%;"
|+ 
|-
! style="border-bottom: 2px solid black" scope="col" | Issue
! style="border-bottom: 2px solid black" scope="col" | Action
! style="border-bottom: 2px solid black" scope="col" | Notes
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Text and/or buttons are difficult to read.
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Reject
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | 
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Theme has an inconsistent look.
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Add note
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | You should avoid judging a theme for thinking it looks ugly, since it is a very subjective metric. However, themes should be consistent about their look.
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | UI elements don't fit within their boundaries and appear "clipped".
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Add note
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | This is relevant for menus and dialogs. If anything's clipped and/or if resizing is required to see it completely, make a note of it and request the author to address the issue.
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | No preview image or unsuitable preview image.
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Add note
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" |
|}

= Feature testing =

{| cellspacing="0" cellpadding="1" border="0" style="width: 80%;"
|+ 
|-
! style="border-bottom: 2px solid black" scope="col" | Feature
! style="border-bottom: 2px solid black" scope="col" | Action on failure
! style="border-bottom: 2px solid black" scope="col" | What to test
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Tab Strip
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Add note
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Tab through tab strip using Ctrl+Tab. Active tab should be visually different from other tabs.
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Pinned tabs
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Add note
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Pin a tab and make sure it's visually different from other tabs.
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Group tabs
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Add note
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Activate group tabs using Ctrl+Shift+E. The highlighted tab should be visually different from other tabs. Use the up/down/left/right arrows to navigate from tab to tab and then press enter to open the desired tab.
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Menu Bar
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Add note
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Activate the file menu using Alt+F and then use keyboard to navigate through menus and sub-menus. The selected menu item must be visually different and the highlighted text must be legible.
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Edit > Find
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Reject
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Make sure find toolbar is styled appropriately and functions correctly.
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | View > Toolbars > Customize
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Reject
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Make sure the customization UI is formatted reasonably. 
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | RSS button
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Add note
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Place RSS button on toolbar and make sure its appearance is different for pages that have RSS feeds (like AMO) from those that don't. Test looking at the feed and subscribing to it.
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | View > Toolbars > Bookmarks Toolbar
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Reject
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Make sure toolbar is formatted reasonably. 
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | View > Sidebar > Bookmarks and View > Sidebar > History
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Reject
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Make sure sidebar is formatted appropriately. 
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Bookmark Star button
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Reject
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Clicking on it once will show an animation and bookmark the page. The star button should change state. Clicking on it again shows a "door hanger" dialog. Make sure they are all formatted reasonably. 
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | History > Show All History
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Reject
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Make sure history/bookmarks library is formatted appropriately. Drill in to a specific bookmark/history item. Test drop down menus and forward/back buttons. 
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Tools > Set Up Sync
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Reject
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Work through the sync dialog as if you are creating a new account and connecting to a device (completion of account creation and connecting not necessary). Make sure Sync is formatted appropriately and things seem to work. 
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Preferences / Options window
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Reject
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Make sure all tabs are formatted and functioning correctly. Make sure you can navigate around the options panel and that you know what has focus. You must be able to change tabs and settings from the keyboard.
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Help > About
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Reject
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Make sure it is styled appropriately and must use an appropriate Firefox logo.
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | View > Enter Full Screen
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Reject
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Make sure it is formatted reasonably and functions correctly. 
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Web Developer Tools
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Add note
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Make sure the all tools open correctly and their UI is usable. Note that the developer tools aren't required to be styled by a theme.
|}

= Identity Boxes =

Identity boxes are an important user facing security feature that must be carefully inspected to make sure they function properly. For each style of identity box, make sure to click on the identity box icon to make sure the drop down door hanger is styled reasonably and contains the appropriate icons. Failing any of these tests means the theme needs to be '''rejected'''.

{| cellspacing="0" cellpadding="1" border="0" style="width: 80%;"
|+ 
|-
! style="border-bottom: 2px solid black" scope="col" | Security Level
! style="border-bottom: 2px solid black" scope="col" | What to test
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | '''HTTPS Extended Identity'''
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | 
* Test URL: [https://addons.mozilla.org/ https://addons.mozilla.org/]
* Default background color: Very Light Green
* Default text and border color: Dark Green
* Identity box text: Company Name
* Icon: Padlock
* Requirement: Background, text and/or border colors must be unique from other identity boxes. Must use padlock icon. Must sufficiently stand out from rest of theme. Using the color green is recommended.
[[Image:IdentityBoxFF14-ExtendedValidation.png‎]]
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | '''HTTPS Basic Identity'''
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | 
* Test URL: [https://bugzilla.mozilla.org/ https://bugzilla.mozilla.org/]
* Default background color: White
* Default text and border color: Dark Grey
* Identity box text: None
* Icon: Padlock
* Requirement: Must utilize a padlock icon.
[[Image:IdentityBoxFF14-BasicValidation.png]]
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | '''HTTP Unsecured Connection'''
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | 
* Test URL: [http://www.wikipedia.org/ http://www.wikipedia.org/]
* Default background color: light grey
* Identity box text: none
* Icon: Globe
* Requirement: Background color must be different from HTTPS extended identity box, must NOT use padlock icon of any sort.
[[Image:IdentityBoxFF14-HTTP.png]]
|}

= Test Pages  =

All of the following URLs should be tested.

{| cellspacing="0" cellpadding="1" border="0" style="width: 80%;"
|+ 
|-
! style="border-bottom: 2px solid black" scope="col" | URL
! style="border-bottom: 2px solid black" scope="col" | Policy on failure
! style="border-bottom: 2px solid black" scope="col" | What to test
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | about:addons
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Reject
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Make sure formatting is reasonable. Add-on type tabs need distinct icons. Make sure there is a significant difference between enabled and disabled add-ons.
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | about:config
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Add note
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Make sure it is formatted correctly.
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | about:permissions
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Add note
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Make sure it is formatted correctly.
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | [https://addons.mozilla.org/ AMO]
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Reject
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Log in to AMO, making sure the save password panel is formatted reasonably and includes an appropriate key icon.
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | [https://www.mozilla.org/en-US/mission/ Mozilla's Mission]
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Reject
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Use video controls in embedded HTML5 video to make sure they look reasonable and function correctly. Press play button for video and make sure the play icon is replaced with a pause icon.
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | [https://developer.mozilla.org/en-US/Add-ons/Overlay_Extensions/XUL_School/Getting_Started_with_Firefox_Extensions#The_Hello_World_Extension Non-AMO extension install]
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Reject
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Click on the install link and make sure a prompt appears in the identity box verifying whether or not to install extension.
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | [http://www.mozilla.org/en-US/firefox/geolocation/ Mozilla geolocation Test]
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Reject
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Click on link labeled "Give it a try" and then the "where am I" button to activate geolocation alert. Make sure it displays correctly.
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | [https://itisatrap.org/firefox/its-a-trap.html Mozilla phishing test page]
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Reject
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Phishing warning test page. Check notification strip after ignoring phishing warning. To reset warning go to history menu and open "show all history" then right mouse click on this page's entry and select "forget about this site".  
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | [https://itisatrap.org/firefox/its-an-attack.html Mozilla malware test page]
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Reject
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Malware warning page. Check notification strip after ignoring malware warning. To reset warning go to history menu and open "show all history" then right mouse click on this page's entry and select "forget about this site".
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | [https://www.itisatrap.org/firefox/unwanted.html Mozilla unwanted software test page] (new in Firefox 39)
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Reject
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Warning about downloads containing unwanted software (e.g. bundled with toolbars) test page. Check notification strip after ignoring warning. To reset warning go to history menu and open "show all history" then right mouse click on this page's entry and select "forget about this site".  
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | [https://63.245.217.20/ https://63.245.217.20/]
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Reject
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Untrusted connection alert. Click on identity box to test drop down details.
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | jar:&#104;ttps://bugzilla.mozilla.org/attachment.cgi?id=288634!/
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Reject
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Unsafe Remote File Type. Access denied. Make sure it is formatted reasonably.
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | [ftp://archive.mozilla.org/pub/ Mozilla FTP Archive]
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Reject
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | FTP.  Make sure it is formatted reasonably.
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | chrome://global/content/bindings/textbox.xml
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Add note
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Unformatted XML Preview.  Make sure it is formatted reasonably.
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Additional "about" pages.
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Add note
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Make sure the following "about" pages are formatted reasonably:
* about:sessionrestore
* about:memory
* about:license
* about:robots
* about:mozilla
|}

=OS Specific Issues=
==Linux==
* Unstyled Firefox button: improperly or totally unstyled Firefox button, and/or the Firefox button not changing styling when in private browsing mode.
* Strong black borders around URL Bar doorhangers (drop down panels): many Windows-based themes make use of the box-shadow style rule, however, it is not supported on Linux Firefox and resulting in the strong black border.

[[Add-ons/Reviewers/Guide/Team|Previous: The Review Team]] [[Add-ons/Reviewers/Guide/Other|Next: Other add-ons]]