DevTools/Features/CSSEditor: Difference between revisions

Jump to navigation Jump to search

DevTools/Features/CSSEditor (view source)

Revision as of 14:57, 2 September 2011

23 bytes removed ,  2 September 2011
no edit summary
No edit summary
No edit summary
Line 13: Line 13:
}}
}}
{{FeaturePageBody
{{FeaturePageBody
|Feature overview=The Style Editor allows users to make changes to their CSS and see the changes immediately.
|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.
|Feature users and use cases=All web developers.
}}
{{FeatureInfo
|Feature priority=P1
|Feature roadmap=Developer Tools
|Feature list=Desktop
|Feature engineering team=DevTools
}}
{{FeatureTeamStatus
|Feature security status=sec-review-needed
}}
{| class="fullwidth-table"
|-
| style="font-weight: bold; background: #DDD;" | Feature
| style="font-weight: bold; background: #DDD;" | Status
| style="font-weight: bold; background: #DDD;" | ETA
| style="font-weight: bold; background: #DDD;" | Owner
|-
<section begin="status" />
| [[DevTools/Features/CSSEditor|Style Editor]]
| {{StatusAtRisk|status=Working add-on, but code not landed in tree}}
| 2011-07-15
| Kevin Dangoor
<section end="status" />
|-
|}


== Summary ==
==== Working on a New Design from Scratch ====


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.
==== Experimenting with a Portion of an Existing Design ====
|Feature functional spec===== Invoking the Style Editor ====


== Team ==
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.


You can find us on dev-apps-firefox or #devtools on irc.mozilla.org.
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).


* '''Feature Manager''': Kevin Dangoor (irc: kdangoor)
==== Responsive Layout ====
* '''Lead Developer''': Cedric Vivier (irc: cedricv)
* '''QA Contact''': Alex Lakatos (irc: AlexLakatos)


== Release Requirements ==
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 ====


== Next Steps ==
* New stylesheet
* Import
* Search


* Add-on that people can play with
==== Stylesheet List ====
* Prepare patch for review/landing


== Open Issues ==
* URL
* Save
* Enable/disable
* Number of rules


==== Editing ====


== Related Bugs & Dependencies ==
* Automatic prettification
 
* Code Editor integration
[http://mozilla.github.com/devtools/2011/status.html#cssedit CSS Editor status]


}}
{{FeatureInfo
|Feature priority=P1
|Feature roadmap=Developer Tools
|Feature list=Desktop
|Feature engineering team=DevTools
}}
{{FeatureTeamStatus
|Feature security status=sec-review-needed
}}
== Ideas ==
== Ideas ==


Line 93: Line 82:
* Keyboard navigation (previous/next rule, previous/next property)
* Keyboard navigation (previous/next rule, previous/next property)
* History manager (with checkpoints)
* History manager (with checkpoints)
== Designs ==
[[Image:StyleEditorIdeasSketch.jpg]]
== Use Cases ==
TBD
== Test Plans ==
TBD
Kdangoor
canmove, Confirmed users, Bureaucrats and Sysops emeriti
1,093

edits

Retrieved from "https://wiki.mozilla.org/Special:MobileDiff/346087"

Navigation menu