DevTools/Features/StyleInspector
Status
| Style Inspector | |
| Stage | Development |
| Status | In progress |
| Release target | Firefox 8 |
| Health | OK |
| Status note | Initial patch is undergoing review, spec is being improved to better specify "done" |
{{#set:Feature name=Style Inspector
|Feature stage=Development |Feature status=In progress |Feature version=Firefox 8 |Feature health=OK |Feature status note=Initial patch is undergoing review, spec is being improved to better specify "done" }}
Team
| Product manager | Kevin Dangoor |
| Directly Responsible Individual | Kevin Dangoor |
| Lead engineer | Mike Ratcliffe |
| Security lead | ` |
| Privacy lead | ` |
| Localization lead | ` |
| Accessibility lead | ` |
| QA lead | Strugariu Florin (irc:Bebe) |
| 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=Strugariu Florin (irc:Bebe) |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
Users of all experience levels need to work with CSS.
Use case 1: looking at how an element is set up.
I want to see how headline links on CNN's front page are styled. I want to see what font and font size they went with.
User case 2: troubleshooting a problem
Something looks quite wrong with the way my element is positioned and styled. I'm not sure which property is causing the problem. I want to scan through everything applied to a node to see if I can spot something that's wrong. (In this case, imagine that it was something weird like a node set to display: table-row rather than display: block.)
3. Dependencies
This is a node-centric tool. That means that while it's possible to select a node with a command and then open this tool, practically speaking we need to have the Highlighter working first.
4. Requirements
- Ability to see a list of property/values for the selected node
- That list should be available with just the property/values that are set in user stylesheets or all property/values
- It should be possible to view all stylesheet rules that went into deciding on the value that was chosen
- Ideally, when listing all property/values there would be a way to quickly locate the properties of interest
- Property names should link to the MDN article to provide the user with further information
Non-goals
Editing of the values is out of scope at this time.
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=Users of all experience levels need to work with CSS.
Use case 1: looking at how an element is set up.
I want to see how headline links on CNN's front page are styled. I want to see what font and font size they went with.
User case 2: troubleshooting a problem
Something looks quite wrong with the way my element is positioned and styled. I'm not sure which property is causing the problem. I want to scan through everything applied to a node to see if I can spot something that's wrong. (In this case, imagine that it was something weird like a node set to display: table-row rather than display: block.) |Feature dependencies=This is a node-centric tool. That means that while it's possible to select a node with a command and then open this tool, practically speaking we need to have the Highlighter working first. |Feature requirements=* Ability to see a list of property/values for the selected node
- That list should be available with just the property/values that are set in user stylesheets or all property/values
- It should be possible to view all stylesheet rules that went into deciding on the value that was chosen
- Ideally, when listing all property/values there would be a way to quickly locate the properties of interest
- Property names should link to the MDN article to provide the user with further information
|Feature non-goals=Editing of the values is out of scope at this time. |Feature functional spec=` |Feature ux design=In progress mockups |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 | ` | ` |
| Engineering | ` | ` |
| Security | sec-review-needed | ` |
| 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-needed |Feature security health=` |Feature security 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=` }}