Confirmed users
116
edits
AMO:Editors/EditorGuide/ThemeReviews: Difference between revisions
AMO:Editors/EditorGuide/ThemeReviews (view source)
Revision as of 17:34, 10 July 2012
, 10 July 2012→Identity Boxes
| Line 130: | Line 130: | ||
For testing purposes, it is recommended to have [http://www.mozilla.org/en-US/firefox/organizations/all.html Firefox 10 ESR] installed. | For testing purposes, it is recommended to have [http://www.mozilla.org/en-US/firefox/organizations/all.html Firefox 10 ESR] installed. | ||
The background color of the identity box needs to be significantly different between the two secure HTTPS states, broken HTTPS and HTTP. Also, the background colors of the two secure HTTPS identity boxes needs to be different from the background color of the rest of the URL bar for broken HTTPS and HTTP URLS. | The background color of the identity box needs to be significantly different between the two secure HTTPS states, broken HTTPS and HTTP. Also, the background colors of the two secure HTTPS identity boxes needs to be different from the background color of the rest of the URL bar for broken HTTPS and HTTP URLS. It is strongly encouraged, but not required to use green colors for extended validation HTTPS sites and blue for basic validation HTTPS sites. | ||
{| cellspacing="0" cellpadding="1" border="0" style="width: 800px; height: 393px;" | {| cellspacing="0" cellpadding="1" border="0" style="width: 800px; height: 393px;" | ||
| Line 152: | Line 152: | ||
<li>Requirement: Background color must be unique from HTTPS extended identity, broken HTTPS and HTTP identity boxes. Must sufficiently stand out from rest of theme. | <li>Requirement: Background color must be unique from HTTPS extended identity, broken HTTPS and HTTP identity boxes. Must sufficiently stand out from rest of theme. | ||
<li>Sample screen capture:<br>[[Image:IdentityBoxFF10ESR-BasicValidation.png]] | <li>Sample screen capture:<br>[[Image:IdentityBoxFF10ESR-BasicValidation.png]] | ||
</ul> | </ul> | ||
|- style="vertical-align: top;" | |- style="vertical-align: top;" | ||
| Line 180: | Line 172: | ||
==== FF14+ ==== | ==== 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> | |||
|} | |||
=== Test Pages === | === Test Pages === | ||