DevTools/Features/RulesView

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

Status

CSS Rules View
Stage	Complete
Status	Complete
Release target	Firefox 10
Health	OK
Status note	`

{{#set:Feature name=CSS Rules View

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

{{#set:Feature product manager=Kevin Dangoor

|Feature feature manager=Kevin Dangoor |Feature lead engineer=Dave Camp |Feature security lead=` |Feature privacy lead=` |Feature localization lead=` |Feature accessibility lead=` |Feature qa lead=` |Feature ux lead=` |Feature product marketing lead=` |Feature operations lead=` |Feature 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

` {{#set:Feature open issues and risks=` |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. |Feature users and 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. |Feature dependencies=` |Feature 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

|Feature non-goals=` |Feature functional spec===== 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). |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	5
Theme / Goal	`
Roadmap	Developer Tools
Secondary roadmap	`
Feature list	Desktop
Project	`
Engineering team	DevTools

{{#set:Feature priority=P1

|Feature rank=5 |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-complete	* Reviewed on 2011.12.09 * Notes
Privacy	`	`
Localization	`	`
Accessibility	`	`
Quality assurance	`	`
User experience	`	`
Product marketing	`	`
Operations	`	`

{{#set:Feature products status=`

|Feature products notes=` |Feature engineering status=` |Feature engineering notes=` |Feature security status=sec-review-complete |Feature security health=OK |Feature security notes=* Reviewed on 2011.12.09

• * Notes

|Feature privacy status=` |Feature privacy notes=` |Feature localization status=` |Feature localization notes=` |Feature accessibility status=` |Feature accessibility notes=` |Feature qa status=` |Feature qa notes=` |Feature ux status=` |Feature ux notes=` |Feature product marketing status=` |Feature product marketing notes=` |Feature operations status=` |Feature operations notes=` }}