DevTools/Features/CSSDoctor

Status

Team

Open issues/risks

• can this work with multiple selected nodes?

Stage 1: Definition

1. Feature overview

The goal of the Style Doctor is to answer the question "why doesn't this look the way I expected it to?" as quickly as possible.

CSS rule precedence is complex and little understood and the Style Doctor will help users get their layouts working 'and' help them learn precedence at the same time.

2. Users & use cases

Some relevant discussion in "CSS developer tools" thread on dev-apps-firefox

3. Dependencies

`

4. Requirements

• integrates with nodes selected via the Highlighter, GCLI or other means
• can provide answers for a "substantial" set of node/rule combos. Problems of the sort:
  • selector didn't match or was overridden
  • error in CSS (some errors require the context of a node)
  • layout problems (Shaver's list: too indented, not indented enough, too narrow, too wide, not aligned with something else, etc.)

Non-goals

`

Stage 2: Design

5. Functional specification

`

6. User experience design

`

Stage 3: Planning

7. Implementation plan

• test page with examples that test each rule
• need the same thing working as a traditional addon
• enough rules to produce interesting results (perhaps ~15)
  • click around and get a sensible answer for many cases
  • those selectors don't match
  • everything is actually fine, the rule did apply

8. Reviews

Security review

`

Privacy review

`

Localization review

`

Accessibility

`

Quality Assurance review

`

Operations review

`

Stage 4: Development

9. Implementation

• Source at Github. At some stage we should move this back into Moz/HG.
• Demo video, and pages used in the video: demo and test
• Documentation
• Status

Stage 5: Release

10. Landing criteria

`

Feature details

Team status notes