DevTools/CSSTips

This page is for information about CSS used by the DevTools toolbox. Wondering about the Dev Edition theme? See this page for more information about the Developer Edition theme

Basics

First, you can find existing DevTools CSS at https://dxr.mozilla.org/mozilla-central/source/browser/themes/shared. Here are some basic tips that can optimize reviews if you are changing 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
• 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

Boilerplate

Make sure each file starts with the standard copyright header (see License Boilerplate)

Testing

CSS changes to the toolbox should generally be similar across platforms since they used a shared implementation, but there can still be differences worth checking out. Check major changes on Windows, OSX and Ubuntu.

Formatting

We use 2-spaces indentation for the CSS. 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: linear-gradient(to bottom, 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 for class names:

• lower-case-with-dashes is the most common
• But camelCase is also used sometimes. 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.

Light and Dark theme support

DevTools support 2 different themes : the dark theme and the light theme. In order to support both, there are 2 class names available (theme-light and theme-dark). Here are some common practices to follow :

• Use pre-defined CSS variables instead of hardcoding colors when possible
• If you need to support themes and the pre-defined variables don't fit, define a variable with your custom colors at the beginning of the CSS file, this avoids selector duplication in the code.

Example :

.theme-light {
  --some-variable-name: <color-for-light-theme>;
}
.theme-dark {
  --some-variable-name: <color-for-dark-theme>;
}
#myElement {
  background-color: var(--some-variable-name);
}

HDPI support

In order to support retina displays and Windows DPI settings, it's recommended to use SVG since it keeps the CSS clean. However, if only 1x and 2x PNG assets are available, you can use this @media query to target HDPI : @media (min-resolution: 1.1dppx)

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

Localization

Text Direction:

• For margins, padding and borders, use inline-start/inline-end rather than left/right
  • Example: Use margin-inline-start: 3px; not margin-left: 3px
• For RTL-aware positioning (left/right), use offset-inline-start/end
• When there is no special RTL-aware property (eg. float: left|right) available, use the pseudo :-moz-locale-dir(ltr|rtl) (for XUL files) or :-moz-dir(ltr|rtl) (for HTML files)
• 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

Toggles

Sometimes you have a style that you want to turn on and off. For example a tree twisty, a tab background, etc. The Mozilla way is to perform the toggle using an attribute rather than a class. So:

.tree-node {
  background-image: url(right-arrow.png);
}
.tree-node[open] {
  background-image: url(down-arrow.png);
}

Tips

• Use :empty to match a node that doesn't have children
• 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)