DevTools/CSSTips

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

Basics

• Split your CSS into theme and content files (see below)
• Make sure your theme code is present for the 3 platforms, and that files are referenced twice in Windows' jar.mn (once for XP, once for Vista/7) So to add foo.css, your patch should include:
  • 3 added files: /browser/themes/[gnome|pin|win]stripe/browser/devtools/foo.css
  • 4 changes to the 3 files: /browser/themes/[gnome|pin|win]stripe/browser/jar.mn
• Make sure each file starts with the standard copyright header (see License Boilerplate)
  • For work funded by Mozilla, the 'Initial Developer of the Original Code' should be 'The Mozilla Foundation'
  • Remember the year
  • The first letter of contributors names should be under the 'n' of 'contributors'
  • The original author of the code should have the string ' (original author)' after his/her email address
• Functional stuff (for example, toggling the display property based on application state) should be in content css rather than theme css
• Avoid !important but if you have to use it, make sure it's obvious why you're using it (maybe with a comment)
• Avoid magic numbers, prefer automatic sizing, but add comments when the choice (i.e. complex DOM math) is worse than just hard coding
• Avoid setting styles in JavaScript. It's generally better to set a class and then specify the styles in CSS
• classList is generally better than className. There's less chance of over-writing an existing class

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
• Assume ="true" in attribute selectors
  • Example: Use option[checked], not option[checked="true"]
• Use longhand versions of properties so it's clear what you're changing.
  • Example: Use border-color: red, not border: red;

Naming Standards:

• We have an official policy for class names
• lower-case-with-dashes seems to be most common, and it fits with 'the CSS way'
• camelCase is also used
• It makes sense to first try to fit in with code around, and if there is doubt or if isn't anything to fit in with to use lower-case-with-dashes.

Performance

• Read Writing Efficient CSS
• Use an iframe where possible so your rules are scoped to the smallest possible set of nodes
• If your CSS is used in browser.xul, you need to take special care to performance:
  • Descendent selector should be avoided
  • If possible find ways to use only id selectors, class selectors and selector groups

Content or Theme CSS

There are 2 places CSS rules are stored:

• content CSS files (stored in with your JS/HTML/etc)
• theme CSS files (stored in themes/???stripe directories)

Theme CSS is for styles that change from theme to theme. Content CSS is for more structural things. Typically certain CSS properties are going to lean one way or the other: color - 99% of the time it will be theme CSS, overflow - 99% content.

99% Theme	60% theme	60% content	99% Content
font-*, color, background-color, border-color	line-height, padding, margin	width, max-width, top, bottom, etc [1]	overflow, direction, display, *-align, *-box-*

If you're not sure then go for content CSS unless you can imagine the value changing on another platform.

When importing your stylesheets, it's best to import the content CSS before the theme CSS, that way the theme values get to override the content values (which is probably what you want), and you're going to want them both before the global values, so your imports will look like this:

<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
<?xml-stylesheet href="chrome://browser/path/to/content/module.css " type="text/css"?>
<?xml-stylesheet href="chrome://browser/skin/path/to/theme/module.css" type="text/css"?>

For devtools CSS files then path/to/content and path/to/theme are both likely to be the string devtools.

[1] However there is probably a better way than using absolute positioning.

The Mozilla Environment

Pre-defined classes:

• Use plain in place of margin: 0

Theme values:

• Use them 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

Lists of 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

Text Direction:

• For margins, padding and borders, use start/end rather than left/right
  • Example: Use -moz-margin-start: 3px; not margin-left: 3px
• When there is no special RTL-aware property (eg. float: left|right) available, use 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)

Testing:

• Use the Force RTL extension
• Or go to about:config and set intl.uidirection.en to rtl

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 localization section)