DevTools/CSSTips

To make Dao's life easier (and optimize our reviews), make sure that your code follows these rules:

Basics

• Make sure your code is present for the 3 platforms, and that files are referenced twice in Windows' jar.mn
• Make sure each file starts with the standard copyright header
• Functional stuff (for example, toggling the display property based on application state) should be in content css rather than theme css
• Avoid !important and make sure it's obvious why you're using it (maybe with a comment if not obvious)
• Avoid magic numbers, prefer automatic sizing

Formatting

In general the formatting looks like this:

selector,
alternate-selector {
  property: value;
  other-property: other-value;
}

Also:

• Omit units on 0 values
  • Example: Use margin: 0;, not margin: 0px;
• Add a space after each comma, except within color functions
  • Example: -moz-linear-gradient(top, black 1px, rgba(255,255,255,0.2) 1px)
• Always add a space before !important
• Don't use shorthands to overwrite a property
• Assume ="true" in attribute selectors
  • Example: Use option[checked], not option[checked="true"]

Performance

• Use an iframe where possible so your rules are scoped to the a smaller set of nodes
• Read "Writing Efficient CSS": https://developer.mozilla.org/en/CSS/Writing_Efficient_CSS
• Descendent selector should be avoided

The Mozilla Environment

Pre-defined classes:

• Use plain in place of margin: 0

• Use theme values where possible
  • Example: border-radius: @toolbarbuttonCornerRadius@, not border-radius: 3px
• Where a theme value doesn't fit, make sure you have buy-in from UX

Theme values:

• System Colors
• System Fonts
• CSS Extensions
• Also shared.inc.html has some values (but there must be a better reference?)

Tips

• Use :empty to match a node that doesn't have children

Localization

• Code must be test in RTL. Use the Force RTL extension
  • ... or you can go to about:config and set intl.uidirection.en to rtl.
• For RTL compatibility, for margins, padding and borders, don't use *-left or *-right but *-start and *-end)
• When there is no special RTL-aware property (eg. float: left|right) available, add the pseudo :-moz-locale-dir(ltr|rtl)
• Remember that while a tab content's scrollbar still shows on the right in RTL, an overflow scrollbar will show on the left
• Write "padding: 0 3px 4px;" instead of "padding: 0 3px 4px 3px;". This makes it more obvious that the padding is symmetrical (so RTL won't be an issue)

Code Smells

• Usually, if margin or padding has 4 values, something is wrong. If the left and right values are asymmetrical, you're supposed to use -start and -end. If the values are symmetrical, so use only 3 values (see previous tip)