Confirmed users
42
edits
DevTools/CSSTips: Difference between revisions
Make document more up-to-date
(Moving this over to the hacking page) |
(Make document more up-to-date) |
||
| Line 3: | Line 3: | ||
== Basics == | == Basics == | ||
First, you can find existing DevTools CSS at https://dxr.mozilla.org/mozilla-central/source/ | First, you can find existing DevTools CSS at https://dxr.mozilla.org/mozilla-central/source/devtools/client/themes. Here are some basic tips that can optimize reviews if you are changing CSS. | ||
* Avoid <tt>!important</tt> but if you have to use it, make sure it's obvious why you're using it (maybe with a comment) | * Avoid <tt>!important</tt> but if you have to use it, make sure it's obvious why you're using it (maybe with a comment) | ||
| Line 45: | Line 45: | ||
== Light and Dark theme support == | == Light and Dark theme support == | ||
DevTools support | DevTools support 3 different themes : the dark theme, the light theme and the firebug theme. In order to support them, there are 3 class names available (theme-dark, theme-light and theme-firebug). Here are some common practices to follow : | ||
* Use [https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors pre-defined CSS variables] instead of hardcoding colors when possible | * Use [https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors 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. | * 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. | ||
| Line 53: | Line 53: | ||
} | } | ||
.theme-dark { | .theme-dark { | ||
--some-variable-name: <color-for-dark-theme>; | |||
} | |||
.theme-firebug { | |||
--some-variable-name: <color-for-dark-theme>; | --some-variable-name: <color-for-dark-theme>; | ||
} | } | ||
| Line 76: | Line 79: | ||
** Example: Use <tt>margin-inline-start: 3px;</tt> not <tt>margin-left: 3px</tt> | ** Example: Use <tt>margin-inline-start: 3px;</tt> not <tt>margin-left: 3px</tt> | ||
* For RTL-aware positioning (left/right), use <tt>offset-inline-start/end</tt> | * For RTL-aware positioning (left/right), use <tt>offset-inline-start/end</tt> | ||
* 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 : | * 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 :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 | * 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) | * 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) | ||