MozillaWiki

Add-ons/Reviewers/Guide/CompleteThemes: Difference between revisions

Page Discussion

Add-ons/Reviewers/Guide/CompleteThemes (view source)

Revision as of 21:46, 21 January 2015

4,912 bytes removed ,  21 January 2015
Done with feature testing, on to identity boxes
(Complete themes :()
 
(Done with feature testing, on to identity boxes)
Line 4: Line 4:


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.
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.
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 full 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%;"
{| cellspacing="0" cellpadding="1" border="0" style="width: 80%;"
Line 29: Line 31:
|}
|}


== Test Pages  ==
== 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;" | Edit > Find
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Preliminary review
| 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;" | Preliminary review
| 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;" | View > Toolbars > Bookmarks Toolbar
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Preliminary review
| 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;" | Preliminary review
| 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;" | History > Show All History
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Preliminary review
| 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;" | Preliminary review
| 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;" | Preliminary review
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Make sure all tabs are formatted and functioning correctly.
|- 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;" | Preliminary review
| 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;" | 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.
 
{| 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;" | <ul><li>Test URL: [https://addons.mozilla.org/ https://addons.mozilla.org/]
<li>Default background color: Very Light Green
<li>Default text and border color: Dark Green
<li>Identity box text: Company Name
<li>Icon: Padlock
<li>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 strongly recommended.
<li>Sample screen capture:<br>[[Image:IdentityBoxFF14-ExtendedValidation.png‎]]
</ul>
|- 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;" | <ul><li>Test URL: [https://bugzilla.mozilla.org/ https://bugzilla.mozilla.org/]
<li>Default background color: White
<li>Default text and border color: Dark Grey
<li>Identity box text: None
<li>Icon: Padlock
<li>Requirement: Must utilize a padlock icon.
<li>Sample screen capture:<br>[[Image:IdentityBoxFF14-BasicValidation.png]]
</ul>
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | '''HTTPS Mixed Content'''
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | <ul><li>Test URL: [https://people.mozilla.com/~bsterne/tests/62178/test.html https://people.mozilla.com/~bsterne/tests/62178/test.html]
<li>Default background color: light grey
<li>Identity box text: none
<li>Icon: Globe
<li>Requirement: Must NOT use secured padlock icon (broken padlock okay).
<li>Sample screen capture:<br>[[Image:IdentityBoxFF14-MixedContent.png]]
</ul>
|- 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;" | <ul><li>Test URL: [http://www.mozilla.org http://www.mozilla.org]
<li>Default background color: light grey
<li>Identity box text: none
<li>Icon: Globe
<li>Requirement: Background color must be different from HTTPS extended identity box, must NOT use padlock icon of any sort.
<li>Sample screen capture:<br>[[Image:IdentityBoxFF14-HTTP.png]]
</ul>
|}
 
= Test Pages  =


All of the following URLs should be tested.
All of the following URLs should be tested.
Line 172: Line 269:
====Special Considerations====
====Special Considerations====
Windows and OS-X use different CSS rules to generate OS native scrollbars.  As a result any cross OS theme either needs to target different scrollbar rules for each OS or use custom XUL scrollbars.
Windows and OS-X use different CSS rules to generate OS native scrollbars.  As a result any cross OS theme either needs to target different scrollbar rules for each OS or use custom XUL scrollbars.
=== Error Console ===
While reviewing themes, watch the error 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, error console warnings about CSS issues should '''NOT''' be grounds for withholding a full review of a theme. However, providing notes to developers about CSS issues can be tremendously helpful to theme development.
=== Test Dialogs/Features ===
Please note that testing of some dialogs/features is put off until the webpage tests below. Policies on failure are for worst case failure. Minor styling issues should just get notes.
{| cellspacing="0" cellpadding="1" border="0" style="width: 800px;margin-bottom:20px;"
|+
|-
! style="border-bottom: 2px solid black" scope="col" | Dialog/Feature
! 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;" | 'Edit > Find'
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Preliminary Review
| 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;" |  <ol><li>Preliminary Review<li>Preliminary Review<li>Add Note</ol>
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | <ol><li>Make sure customize toolbar dialog is formatted reasonably.
<li>With the "show" options set to "icons", check and uncheck "use small icons", toolbar icons needs to display properly in both states (ideally they will be different sizes). Repeat test using show "icons and text".
<li>With "use small icons" checked, change "show" to "text". Make sure toolbar button height is reasonable for text only buttons and that the text is vertically aligned in middle of buttons. If it is not provide this note or something similar in the review:
<blockquote><i>When "use small icons is checked and "show" is set to "text" 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.</i></blockquote></ol>
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Check 'View > Toolbars > Bookmarks Toolbar'
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Preliminary Review
| 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;" | Check 'View > Toolbars > Add-on Toolbar'
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Preliminary Review
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Using customize toolbars, add a toolbar button to this toolbar (at the bottom of the browser window). Make sure toolbar is formatted reasonably.
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Check 'View > Toolbars > Tabs on Top' and uncheck 'View > Toolbars > Tabs on Top'
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | <ol><li>Preliminary Review<li>Preliminary Review</ol>
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | <ol><li>Make sure Firefox button is formatted reasonably. On Windows, with browser window maximized, make sure tabs display properly between Firefox button and right hand window control buttons.<li>Go to private browsing mode (Firefox > Start Private Browsing), and verify that Firefox button changes appearance when in private browsing mode on Windows. Exit private browsing mode, enable menu bar (check Firefox > Options/Preferences > Menu Bar) and uncheck "tabs on top".</ol>
'''NOTE:''' As of FF15 the "tabs on top" menu item has been removed. To do this test, go to about:config and toggle "browser.tabs.onTop" between true and false.
|- 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;" | Preliminary Review
| 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;" | 'History > Show All History'
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Preliminary Review
| 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;" | Preliminary Review
| 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;" | 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 following dialogs under Tools > Web Developer are styled and functioning correctly. Review these tools using the default theme to see their default look and learn how they should function.
<ul><li>Developer Toolbar (FF16+)
<li>Style Inspector (aka "Inspect")
<li>Responsive Web Design (FF15+)
<li>Debugger (FF15+)
<li>Style Editor (FF11+)
<li>Page Source
</ul>
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | <ul><li>Windows: 'Tools > Options'<li>Linux: 'Edit > Preferences'</ul>
| 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 all tabs are formatted and functioning correctly.
|- 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;" | Preliminary Review
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | Make sure it is styled appropriately and MUST use an appropriate Firefox logo.
|}
=== Identity Boxes ===
Identity boxes are a critical user facing security feature that must be carefully inspected to make sure they function properly. Broken identity boxes are considered security failures and should result in rejection or if the failure is minor a preliminary review.  As of Firefox v14.0 the identity box was significantly redesigned.  As a result themes that support pre-FF14 and FF14+ need to support the appropriate identity box styling for supported versions of Firefox.
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.
==== FF14+ ====
As of FF14 the identity box has significantly changed. The biggest change is that a website's favicon is no longer displayed in the identity box, rather they are only displayed on the tab. Although the basic colors used for HTTPS extended validation has remained the same, the way the colors are used has changed, Now instead of white text on a dark background, light backgrounds with dark text and borders are used. Another change is that the domain name text has been removed from the basic validation identity box.
Provided the appropriate identity box icon is used (e.g. a padlock for secured sites) themes may continue to use the "old style" dark backgrounds with light text in the identity box or switch to light colored backgrounds with dark text and borders.  The important thing is that the identity box state for extended validation must be distinct from the other states and stand out from rest of the theme. Also if dark backgrounds are used, the identity box icons need to be light in color so as to stand out against the dark background. As before it is strongly encouraged, but not required to use green colors for extended validation HTTPS sites. As of Firefox v14.0 basic validation identity box is no longer required to be styled differently from the standard HTTP identity box other than the fact that it must utilize a padlock icon. It is permissible to continue styling the basic validation identity box with different colors from the other identity boxes if desired.
{| cellspacing="0" cellpadding="1" border="0" style="width: 800px; height: 393px;"
|+
|-
! 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;" | <ul><li>Test URL: [https://addons.mozilla.org/ https://addons.mozilla.org/]
<li>Default background color: Very Light Green
<li>Default text and border color: Dark Green
<li>Identity box text: Company Name
<li>Icon: Padlock
<li>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 strongly recommended.
<li>Sample screen capture:<br>[[Image:IdentityBoxFF14-ExtendedValidation.png‎]]
</ul>
|- 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;" | <ul><li>Test URL: [https://bugzilla.mozilla.org/ https://bugzilla.mozilla.org/]
<li>Default background color: White
<li>Default text and border color: Dark Grey
<li>Identity box text: None
<li>Icon: Padlock
<li>Requirement: Must utilize a padlock icon.
<li>Sample screen capture:<br>[[Image:IdentityBoxFF14-BasicValidation.png]]
</ul>
|- style="vertical-align: top;"
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | '''HTTPS Mixed Content'''
| style="padding: .5ex 1ex 1ex 0; border-bottom: 1px solid black;" | <ul><li>Test URL: [https://people.mozilla.com/~bsterne/tests/62178/test.html https://people.mozilla.com/~bsterne/tests/62178/test.html]
<li>Default background color: light grey
<li>Identity box text: none
<li>Icon: Globe
<li>Requirement: Must NOT use secured padlock icon (broken padlock okay).
<li>Sample screen capture:<br>[[Image:IdentityBoxFF14-MixedContent.png]]
</ul>
|- 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;" | <ul><li>Test URL: [http://www.mozilla.org http://www.mozilla.org]
<li>Default background color: light grey
<li>Identity box text: none
<li>Icon: Globe
<li>Requirement: Background color must be different from HTTPS extended identity box, must NOT use padlock icon of any sort.
<li>Sample screen capture:<br>[[Image:IdentityBoxFF14-HTTP.png]]
</ul>
|}
Jorge.villalobos
canmove, Confirmed users
1,448

edits

Retrieved from "https://wiki.allizom.org/Special:MobileDiff/1049607"