DevTools/Features/CSSEditor
Status
| Style Editor | |
| Stage | Complete |
| Status | In progress |
| Release target | Firefox 11 |
| Health | OK |
| Status note | Feature has landed |
Team
| 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
`
Non-goals
`
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.
Toolbar
- New stylesheet
- Import
- Search
Stylesheet List
- URL
- Save
- Enable/disable
- Number of rules
Editing
- Automatic prettification
- Code Editor integration
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
`
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 | ` | ` |
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)
