DevTools/Features/RulesView
Status
| CSS Rules View | |
| Stage | Complete |
| Status | Complete |
| Release target | Firefox 10 |
| Health | OK |
| Status note | ` |
Team
| Product manager | Kevin Dangoor |
| Directly Responsible Individual | Kevin Dangoor |
| Lead engineer | Dave Camp |
| Security lead | ` |
| Privacy lead | ` |
| Localization lead | ` |
| Accessibility lead | ` |
| QA lead | ` |
| UX lead | ` |
| Product marketing lead | ` |
| Operations lead | ` |
| Additional members | ` |
Open issues/risks
`
Stage 1: Definition
1. Feature overview
The Style Inspector provides a new view of CSS that is a hybrid between a computed styles view and the traditional rules-oriented view. While this view is useful and will become more useful over time, there are use cases for which the traditional rules-based view is better.
2. Users & use cases
All web developers use this view at one time or other.
Exploring the Hierarchy of Styles on an Element
When picking up a page from someone else (either a third party or an earlier developer within an organization) the rules view helps discover the organization of the stylesheets.
3. Dependencies
`
4. Requirements
- Collection of rules that apply to the element selected by the Page Inspector
- Sorted from most specific to least specific
Desired, but not required for shipping:
- Integrates with the Style Inspector
- Ability to edit values
- Ability to toggle property/value pairs
- Integration with the Style Editor
- Media query support
Non-goals
`
Stage 2: Design
5. Functional specification
From the Page Inspector
Clicking the Styles button on the Page Inspector's toolbar will open up the Rules View/Style Inspector (F1). Those two views of styles will be presented together. The last view chosen will be remembered and displayed by default the next time (F2). Ideally, we would use Telemetry to keep track of how many people use each view and how often (requirement needs to be more specific).
Initial Display
Like similar tools, the rules that apply to the selected page element will be displayed in a style that is similar to a CSS file (F3). They will be sorted by specificity (F4).
Rules that have been overridden will be displayed differently (eg strikethrough or de-emphasized) than the active rules (F5).
Links
Each rule will include a link to the stylesheet (F6). Ideally, this link will go to the Style Editor on the appropriate line. If the Style Editor is not ready, link to that line in View Source. On hover, display the complete URL (F7).
For each property, a link to MDN will be provided, as it is in the Style Inspector (F8). (optional, but high value) A control available at the property level will switch to the Style Inspector view for that property (F9).
Editing
This section is not a blocker for shipping.
Each property will have a toggle control (F10). Similarly, each rule will have a toggle control (F11).
A single click on a value will provide a text box for editing that value (F12). A single click on the property name will provide a text box for editing the property name (F13). When editing the property name, pressing tab, : or enter will switch the entry over to the value. (F14)
If a property or value is invalid, there should be an error indicator but the property/value pair will not be thrown away for edits made in the tool (F15). Ideally, styles that were in the stylesheet but were invalid would not be thrown away as well (F20).
Adding Rules and Properties
As with editing, this section is optional.
New property/value pairs can be added to existing rules (F16) with entry behavior that is similar to the editing behavior provided for existing property/value pairs.
Element styles can also be edited and extended with new properties (F17).
Entirely new rules can be added (F18).
Media Queries
Optional.
There was a straightforward suggestion for WebKit that would make sense for this tool as well (F19).
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 | 5 |
| Theme / Goal | ` |
| Roadmap | Developer Tools |
| Secondary roadmap | ` |
| Feature list | Desktop |
| Project | ` |
| Engineering team | DevTools |
Team status notes
| status | notes | |
| Products | ` | ` |
| Engineering | ` | ` |
| Security | sec-review-complete | * Reviewed on 2011.12.09
|
| Privacy | ` | ` |
| Localization | ` | ` |
| Accessibility | ` | ` |
| Quality assurance | ` | ` |
| User experience | ` | ` |
| Product marketing | ` | ` |
| Operations | ` | ` |
