DevTools/Features/CSSEditor: Difference between revisions

Revision as of 19:31, 12 May 2011

Feature	Status	ETA	Owner
CSS Editor	Add-on that people can play with	2011-05-16	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)

Release Requirements

Next Steps

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

Open Issues

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

@@ Line 8: / Line 8: @@
 <section begin="status" />
 | [[DevTools/Features/CSSEditor|CSS Editor]]
-| {{StatusHealthy|status=Determine minimum shippable unit}}
+| {{StatusHealthy|status=Add-on that people can play with}}
-| 2011-05-11
+| 2011-05-16
 | Kevin Dangoor
 <section end="status" />
@@ Line 17: / Line 17: @@
 == Summary ==
-The CSS 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.
+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 ==
@@ Line 25: / Line 25: @@
 * '''Feature Manager''': Kevin Dangoor (irc: kdangoor)
 * '''Lead Developer''': Cedric Vivier (irc: cedricv)
-* '''Product Manager''': Kevin Dangoor (irc: kdangoor)
-* '''QA''':
-* '''UX''':
-* '''Security''':
 == Release Requirements ==
-Ideas (in no particular order) :
+== Next Steps ==
+* Add-on that people can play with
+* Prepare patch for review/landing
+== Open Issues ==
+== Related Bugs & Dependencies ==
+[http://mozilla.github.com/devtools/2011/status.html#cssedit CSS Editor status]
+== Ideas ==
 * Accessibility handling
@@ Line 57: / Line 66: @@
 * Keyboard navigation (previous/next rule, previous/next property)
 * History manager (with checkpoints)
-== Next Steps ==
-* Determine current status
-* Flesh out remaining scope
-* Flesh out the team
-== Open Issues ==
-== Related Bugs & Dependencies ==
-[http://mozilla.github.com/devtools/2011/status.html#cssedit CSS Editor status]
 == Designs ==
-TBD
+[[Image:StyleEditorIdeasSketch.jpg]]
 == Use Cases ==
@@ Line 80: / Line 76: @@
 == Test Plans ==
-TBD
-== Goals/Use Cases ==
-TBD
-== Non-Goals ==
 TBD
@@ Line 93: / Line 81: @@
 __NOTOC__
-Please remove this line and any non-relevant categories below.  Add whatever other categories you feel are appropriate.
 [[Category:Features]]
 [[Category:Firefox]]
+[[Category:DevTools]]