Firefox/Windows 8 Metro Style Guides

Nota Bene

• this a spot to jot down guidelines of varying types, largely for front end developers & designers. This includes code style, theming style, and whatever else will help us produce a consistent, shiny produce faster. If you have questions about this page, please ping :ally in #windev.

Design/Theming guidelines

• Message Dialogs
  • Use message dialogs to present blocking questions that require the user's input.
  • Use message dialogs for rror messages that apply to the overall app context[1]
• Flyout [2]
  • Show a flyout only in response to a user tap or click, and you should always dismiss the flyout when the user taps outside of it
  • Size: The Flyout should be as small as possible given its content. It doesn't need extra padding beyond what is provided by the Flyout itself. If a control isn't absolutely necessary, then don't include it.
  • Position: The Flyout should always be positioned near its point of invocation. Flyouts should never be positioned in non-contextual places such as the center of the screen. [3]
• Context Menu [4]
  • A maximum width that equates to approximately 50 characters.
  • Show the fewest number of commands possible, up to the six-command limit
  • Use sentence capitalization for each command name
  • Use a separator to distinguish groups of related commands
  • Order custom commands in the context menu by importance, with the most important commands at the bottom
• App Bar
  • Do follow placement conventions.
    • Place the New/Add/Create button (+ icon) on the far right.
    • Group view switching buttons together and place them on the far left.
    • Place Accept, Yes, OK commands to the left of Reject, No, Cancel commands.
  • Do set the app bar's dismissal mode to sticky when displaying contextual commands.(Should applied to Firefox Start contextual app bar)
• Typography
  • Use "Title Case" only for heading text. For other text (including button labels, menu items, etc.) use "Sentence case" [5][6].
• Help Page [7]
  • Include a link to your support or home page or either embed an online page into your help page
  • Do label the entry point in the Settings pane Help to clearly identify it.
  • Don't use the Help entry point to link directly to a website. Don't launch a web browser when the user taps Help.

Coding Guidelines

• Generally we use Mozilla Coding Style, with a few exceptions:
  • You don't need to wrap lines to 80 characters. Use longer lines (up to around 100 characters; use your judgement) if it improves readability.
• Consistency is king, and supersedes any particular rule.

JS

• Coding Style exceptions/additions:
  • Put the opening brace on the same line as the "function" keyword (rather than on a separate line by itself).
  • No space before ":" in object literals.
• https://developer.mozilla.org/en-US/docs/JavaScript_Tips

CSS

• if you create an attribute and it has only one value, do not set it to true/false. Remove the attribute in the case of false. This produces cleaner, more concise css, without imperiling js readability.

XUL / XML

• One attribute per line, aligning with the first character of the first one
• If there is an id attribute, that should be the first attribute listed
• Children are indented 2 spaces
• Treat strings enclosed as children
  • In example below, &clearPrivateData.done is an enclosed string where as &clearPrivateData.button is a label, which is an attribute
• If separate open & closing tags, tags should go on separate lines
• No soft tabs (\t characters)
• Try to keep the 80 character limit
  • (and if not, try really hard to keep it below a 100)
  • If your oncommand, command, or onclick code is too long, please really consider putting it in a function
• Example

<hbox align="center">
  <button id="prefs-clear-data"
          label="&clearPrivateData.button;"
          command="cmd_sanitize"
          flex="1" />
   <spacer id="clear-notification-empty"/>
   <cssthrobber id="clearprivacythrobber">
   </cssthrobber>
   <description id="clear-notification-done">
     &clearPrivateData.done;
   </description>
</hbox>

helpful references

• yuan's list of design links: https://kippt.com/yuan/designing-for-windows-8
• general coding guidelines for Mozilla: https://developer.mozilla.org/en-US/docs/Developer_Guide/Coding_Style
• general branding/identity/style/usage guide for Mozilla: https://www.mozilla.org/en-US/styleguide/