From MozillaWiki
Jump to: navigation, search
Please use "Edit with form" above to edit this page.


Style Editor
Stage Complete
Status In progress
Release target Firefox 11
Health OK
Status note Feature has landed


Product manager Kevin Dangoor
Directly Responsible Individual Dave Camp
Lead engineer Cedric Vivier
Security lead `
Privacy lead `
Localization lead `
Accessibility lead `
QA lead Alex Lakatos
UX lead `
Product marketing lead `
Operations lead `
Additional members `

Open issues/risks


Stage 1: Definition

1. Feature overview

The Style Editor allows users to make changes to their CSS and see the changes immediately. This is likely one of the most common things that web developers use these tools for: interactively iterating on designs.

2. Users & use cases

All web developers.

Working on a New Design from Scratch

Experimenting with a Portion of an Existing Design

3. Dependencies


4. Requirements




Stage 2: Design

5. Functional specification

Invoking the Style Editor

One of the most common workflows will be getting to the Style Editor from the Style Inspector. When a user is viewing the styles for an element, they can click on a link to jump straight to the Style Editor at the correct line for the rule/property that they want to change.

Users who are working on a new design will likely invoke the Style Editor directly via the Web Developer menu (Style Editor choice). There is a keyboard shortcut (presently shift-F9).

Responsive Layout

The Style Editor has a responsive layout with wide and narrow views. The wide view features a stylesheet list on the left with the editor pane on the right. The narrow view puts the editor pane in the middle of the stylesheet list.


  • New stylesheet
  • Import
  • Search

Stylesheet List

  • URL
  • Save
  • Enable/disable
  • Number of rules


  • Automatic prettification
  • Code Editor integration

6. User experience design


Stage 3: Planning

7. Implementation plan


8. Reviews

Security review


Privacy review


Localization review




Quality Assurance review


Operations review


Stage 4: Development

9. Implementation


Stage 5: Release

10. Landing criteria


Feature details

Priority P1
Rank 4
Theme / Goal `
Roadmap Developer Tools
Secondary roadmap `
Feature list Desktop
Project `
Engineering team DevTools

Team status notes

  status notes
Products ` `
Engineering ` `
Security sec-review-needed bug 744921
Privacy ` `
Localization ` `
Accessibility ` `
Quality assurance ` TestPlan
User experience ` `
Product marketing ` `
Operations ` `


  • Accessibility handling
  • Ace integration
  • GCLI integration (command to edit, command to jump to a rule)
  • Import/export from/to file
  • Persist changes across page reloads
  • Refresh on significant changes (and undo/redo by significant change)
  • Revert to original (and back) toggle
  • Auto-completion
  • Error detection
  • Intelligible preview on hover for as many properties as possible (eg. font-style: Arial, Helvetica displays the names of the fonts with the actual fonts; font-size:12px or margin:12px shows how big is 12px, color shows the color...)
  • Reorder stylesheets!
  • Enable/disable stylesheets individually
  • Addition/removal of stylesheets [possibly addition of NEW, goes well with Save]
  • Integration with Style Inspector
  • CSS Transition/Animation stepping
  • Media Queries filtering (eg. edit rules valid for media=screen screen-width<640px only)
  • Integration with CSS doctor for highlighting non-applicable rules
  • Watch local CSS changes (use your favorite out-of-browser editor, see changes live)
  • One-click insertion of missing/recommended vendor prefixes
  • Merge style declarations present in multiple rules for the same selector (and/or jump to it)
  • Quick unit adjustement up or down
  • Keyboard navigation (previous/next rule, previous/next property)
  • History manager (with checkpoints)