DevTools/Features/StyleInspector
Status
| Style Inspector | |
| Stage | Development: In progress |
| Status | ` |
| Release target | Firefox 8 |
| Health | OK |
| Status note | Initial patch is undergoing review |
{{#set:Feature name=Style Inspector
|Feature stage=Development: In progress |Feature status=` |Feature version=Firefox 8 |Feature health=OK |Feature status note=Initial patch is undergoing review }}
Team
| Product manager | Kevin Dangoor |
| Directly Responsible Individual | Kevin Dangoor |
| Lead engineer | Mike Ratcliffe |
| 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=Mike Ratcliffe |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 works in conjunction with the Highlighter to allow the user to view the CSS rules being applied to an element. It will be an updated version of the style inspector that shipped disabled in Firefox 4.
The initial focus is on providing a property-oriented view. For example, you'll be able to look up the "color" property and see the rules that went into deciding what color a given element should be.
2. Users & use cases
All web developers need to be able to analyze the styles applied to a node.
3. Dependencies
`
4. Requirements
`
Non-goals
`
Stage 2: Design
5. Functional specification
`
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 works in conjunction with the Highlighter to allow the user to view the CSS rules being applied to an element. It will be an updated version of the style inspector that shipped disabled in Firefox 4.
The initial focus is on providing a property-oriented view. For example, you'll be able to look up the "color" property and see the rules that went into deciding what color a given element should be. |Feature users and use cases=All web developers need to be able to analyze the styles applied to a node. |Feature dependencies=` |Feature requirements=` |Feature non-goals=` |Feature functional spec=` |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 | 999 |
| Theme / Goal | ` |
| Roadmap | Developer Tools |
| Secondary roadmap | ` |
| Feature list | Desktop |
| Project | ` |
| Engineering team | DevTools |
{{#set:Feature priority=P1
|Feature rank=999 |Feature theme=` |Feature roadmap=Developer Tools |Feature secondary roadmap=` |Feature list=Desktop |Feature project=` |Feature engineering team=DevTools }}
Team status notes
| status | notes | |
| Products | tbd | ` |
| Engineering | tbd | ` |
| Security | tbd | ` |
| Privacy | tbd | ` |
| Localization | tbd | ` |
| Accessibility | tbd | ` |
| Quality assurance | tbd | ` |
| User experience | tbd | ` |
| Product marketing | ` | ` |
| Operations | ` | ` |
{{#set:Feature products status=tbd
|Feature products notes=` |Feature engineering status=tbd |Feature engineering notes=` |Feature security status=tbd |Feature security health=` |Feature security notes=` |Feature privacy status=tbd |Feature privacy notes=` |Feature localization status=tbd |Feature localization notes=` |Feature accessibility status=tbd |Feature accessibility notes=` |Feature qa status=tbd |Feature qa notes=` |Feature ux status=tbd |Feature ux notes=` |Feature product marketing status=` |Feature product marketing notes=` |Feature operations status=` |Feature operations notes=` }}
| Feature | Status | ETA | Owner |
| Style Inspector tool | Not yet landed and integrated with Highlighter | 2011-07-15 | Kevin Dangoor |
Summary
The Style Inspector works in conjunction with the Highlighter to allow the user to view the CSS rules being applied to an element. It will be an updated version of the style inspector that shipped disabled in Firefox 4.
The initial focus is on providing a property-oriented view. For example, you'll be able to look up the "color" property and see the rules that went into deciding what color a given element should be.
Release Requirements
- Uses the shared notion of selected element(s)
Next Steps
- Review of the big patch
- Highlighter integration
- Command Line integration
- Determine remainder of scope for Firefox 7
Related Bugs & Dependencies
See the status page.
Team
- Mike Ratcliffe: Lead developer
- Kevin Dangoor: PM
- Strugariu Florin (irc:Bebe): QA
Designs
Current state can be seen in this video.
Goals/Use Cases
Help user spot what styles are applied to an element and why.
Non-Goals
The Style Inspector does not attempt to advise the user on how to fix CSS problems, it just shows them what is being applied. The Style Doctor will help users with the fixes.
Other Documentation
See "computed styles" in Firebug or the style views in the WebKit Inspector.