DevTools/Features/CSSEditor

Please use "Edit with form" above to edit this page.

Status

Style Editor
Stage	Development
Status	In progress
Release target	Firefox 9
Health	OK
Status note	Patches in review

{{#set:Feature name=Style Editor

|Feature stage=Development |Feature status=In progress |Feature version=Firefox 9 |Feature health=OK |Feature status note=Patches in review }}

Team

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

{{#set:Feature product manager=Kevin Dangoor

|Feature feature manager=Kevin Dangoor |Feature lead engineer=Cedric Vivier |Feature security lead=` |Feature privacy lead=` |Feature localization lead=` |Feature accessibility lead=` |Feature qa lead=` |Feature ux lead=` |Feature product marketing lead=` |Feature operations lead=` |Feature 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.

2. Users & use cases

All web developers.

3. Dependencies

`

4. Requirements

`

Non-goals

`

Stage 2: Design

5. Functional specification

`

6. User experience design

`

Stage 3: Planning

7. Implementation plan

`

8. Reviews

Security review

`

Privacy review

`

Localization review

`

Accessibility

`

Quality Assurance review

`

Operations review

`

Stage 4: Development

9. Implementation

`

Stage 5: Release

10. Landing criteria

` {{#set:Feature open issues and risks=` |Feature overview=The Style Editor allows users to make changes to their CSS and see the changes immediately. |Feature users and use cases=All web developers. |Feature dependencies=` |Feature requirements=` |Feature non-goals=` |Feature functional spec=` |Feature ux design=` |Feature implementation plan=` |Feature security review=` |Feature privacy review=` |Feature localization review=` |Feature accessibility review=` |Feature qa review=` |Feature operations review=` |Feature implementation notes=` |Feature landing criteria=` }}

Feature details

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

{{#set:Feature priority=P1

|Feature rank=999 |Feature theme=` |Feature roadmap=Developer Tools |Feature secondary roadmap=` |Feature list=Desktop |Feature project=` |Feature engineering team=DevTools }}

Team status notes

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

{{#set:Feature products status=`

|Feature products notes=` |Feature engineering status=` |Feature engineering notes=` |Feature security status=sec-review-needed |Feature security health=` |Feature security notes=` |Feature privacy status=` |Feature privacy notes=` |Feature localization status=` |Feature localization notes=` |Feature accessibility status=` |Feature accessibility notes=` |Feature qa status=` |Feature qa notes=` |Feature ux status=` |Feature ux notes=` |Feature product marketing status=` |Feature product marketing notes=` |Feature operations status=` |Feature operations notes=` }}

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