From MozillaWiki
Jump to: navigation, search
Please use "Edit with form" above to edit this page.


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


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



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).


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).


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


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




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 ` `