DevTools/Features/CSSEditor

Feature	Status	ETA	Owner
Style Editor	Working add-on, but code not landed in tree	2011-07-15	Kevin Dangoor

Summary

The Style Editor will allow users to edit their CSS and see the changes live. Work started during the Firefox 4 cycle and that work is going to be brought back and enhanced.

Team

You can find us on dev-apps-firefox or #devtools on irc.mozilla.org.

• Feature Manager: Kevin Dangoor (irc: kdangoor)
• Lead Developer: Cedric Vivier (irc: cedricv)
• QA Contact: Alex Lakatos (irc: AlexLakatos)

Next Steps

• Add-on that people can play with
• Prepare patch for review/landing

Related Bugs & Dependencies

CSS Editor status

Ideas

• 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)

Designs

Use Cases

TBD

Test Plans

TBD