DevTools/Features/StyleInspector

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

Status

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

{{#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 }}

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

Users of all experience levels need to work with CSS.

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

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

`

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=Users of all experience levels need to work with CSS.

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

1. 1. 1. 1. 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=` |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	`	`
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=` }}

(what follows is information from the original feature page. once all of the information below is incorporated into the new feature page format, this should all be deleted)

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.