DevTools/Features/StyleInspector

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

Status

Style Inspector
Stage	Development
Status	`
Release target	Firefox 8
Health	OK
Status note	Initial patch is undergoing review

{{#set:Feature name=Style Inspector

|Feature stage=Development |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.