DevTools/Features/CSSEditor

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

Status

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

{{#set:Feature name=Style Editor

|Feature stage=Complete |Feature status=In progress |Feature version=Firefox 11 |Feature health=OK |Feature 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	`

{{#set:Feature product manager=Kevin Dangoor

|Feature feature manager=Dave Camp |Feature lead engineer=Cedric Vivier |Feature security lead=` |Feature privacy lead=` |Feature localization lead=` |Feature accessibility lead=` |Feature qa lead=Alex Lakatos |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. 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.

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

` {{#set:Feature open issues and risks=` |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. |Feature users and use cases=All web developers.

Experimenting with a Portion of an Existing Design

|Feature dependencies=` |Feature requirements=` |Feature non-goals=` |Feature functional spec===== 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

|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	4
Theme / Goal	`
Roadmap	Developer Tools
Secondary roadmap	`
Feature list	Desktop
Project	`
Engineering team	DevTools

{{#set:Feature priority=P1

|Feature rank=4 |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	bug 744921
Privacy	`	`
Localization	`	`
Accessibility	`	`
Quality assurance	`	TestPlan
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=Blocked |Feature security notes=bug 744921 |Feature privacy status=` |Feature privacy notes=` |Feature localization status=` |Feature localization notes=` |Feature accessibility status=` |Feature accessibility notes=` |Feature qa status=` |Feature qa notes=TestPlan |Feature ux status=` |Feature ux notes=` |Feature product marketing status=` |Feature product marketing notes=` |Feature operations status=` |Feature operations notes=` }}

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)