DevTools/Features/StyleInspector

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

Status

Style Inspector
Stage	Development
Status	In progress
Release target	Firefox 9
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 9 |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

Questions

• What is the command for displaying the Style Inspector?
• How are pseudoclasses handled?

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

The Style Inspector is part of the Font Fixing use case.

3. Dependencies

This is an element-centric tool. That means that while it's possible to select an element 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

Invoking

Open the Highlighter and click on "Styles" in the Highlighter Toolbar. The Style Inspector will open in the sidebar on the right (default positioning).

The Style Inspector can also be opened and closed using the command line.

Basic Description

See the Mockup in the Font Fixing use case section "The Style Inspector".

The Style Inspector displays a list of property/value pairs. Items in this list can be expanded to display the rules that went into the final choice of the value and further expanded to display the rules that didn't go into the selected value.

Ultimately, what we're going for is a cross between a computed styles view and a stylesheets-organized-by-properties view.

Initial Display

See the Mockup in the Font Fixing use case section "The Style Inspector".

Only user-provided, non-default styles are displayed in order to minimize the number of items the user needs to wade through in order to find what they're looking for. These styles are displayed in alphabetical order by property name.

All properties are initially collapsed. The collapsed view shows the property name, selected value and number of rules.

Property and Value Display

As a computed styles-based view, the property list contains all of the possible properties. An extreme example of this is the "border" shorthand property. Each border property (width, color, etc.) can be set independently on all four sides of the box. This means that 20 border properties will be displayed, even for a user that sets "border: 1px solid blue".

Expanded View

See the "Expanding the font-family" section of the Font Fixing use case.

When a property is expanded, the list of rules that include the property are displayed.

Each row of that list contains the CSS selector, the value provided for that selector in that rule, and the stylesheet:line number on which that rule/property is defined.

The rows are sorted in order of selector precedence. So, the first rule listed is the one that was selected for use. All of the other rows are displayed with strike through because they were not selected.

After the list of selectors that match the selected page element, there is an "unmatched rules" entry. Expanding that displays all of the rules providing the current property that had CSS selectors that did not much that currently selected page element.

Include Default Styles

The user can choose to include the default styles and not just the overridden ones. These styles are sorted alphabetically by property name.

Filtering

The user can filter the list of styles by typing in the provided search box. The list is filtered as the user types subject to performance constraints.

Only rows that match in either the property name, CSS selector or the value are displayed after the filter is applied.

For example, searching for ".even" would find all of the properties to which the ".even" class went into the style calculation. The CSS selectors for selected and unselected rules will be searched.

A search for "border" will display all of the border properties.

(optional) the filter applied to the value could do unit conversions to find equivalents. For example, the filter could match equivalent colors (black, #000, rgb(0,0,0)) or equivalent sizes (1em, 12px).

Multiple Selected Elements

If there are multiple page elements selected, the Style Inspector will display a message instead of the normal contents of the Inspector. The message, in English, is:

Multiple elements are selected. Only one element's styles can be inspected at a time.

(optional) Display only the rules that all of the selected elements have in common.

Changes from the Highlighter

If the Style Inspector is open and the user changes the selected element in the Highlighter, the Style Inspector should display the newly selected element's styles. Since the selection in the Highlighter can change quickly during visual highlighting, the speed of changing the Style Inspector can be throttled for performance reasons.

If the user toggles classes on an element via the Highlighter Infobar, the Style Inspector should update to show the new styles applied to the element.

Changes from the Command Line

If the user takes an action such as toggling classes or changing the selected element via the Command Line, the Style Inspector should update when the command is complete.

Changes from the Page

If the Style Inspector is visible and the page is changed via JavaScript, the Style Inspector should update (possibly after a small delay in order to deal with performance considerations).

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===== Questions ====

• What is the command for displaying the Style Inspector?
• How are pseudoclasses handled?

|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

The Style Inspector is part of the Font Fixing use case. |Feature dependencies=This is an element-centric tool. That means that while it's possible to select an element 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===== Invoking ====

Open the Highlighter and click on "Styles" in the Highlighter Toolbar. The Style Inspector will open in the sidebar on the right (default positioning).

The Style Inspector can also be opened and closed using the command line.

Basic Description

See the Mockup in the Font Fixing use case section "The Style Inspector".

The Style Inspector displays a list of property/value pairs. Items in this list can be expanded to display the rules that went into the final choice of the value and further expanded to display the rules that didn't go into the selected value.

Ultimately, what we're going for is a cross between a computed styles view and a stylesheets-organized-by-properties view.

Initial Display

See the Mockup in the Font Fixing use case section "The Style Inspector".

Only user-provided, non-default styles are displayed in order to minimize the number of items the user needs to wade through in order to find what they're looking for. These styles are displayed in alphabetical order by property name.

All properties are initially collapsed. The collapsed view shows the property name, selected value and number of rules.

Property and Value Display

As a computed styles-based view, the property list contains all of the possible properties. An extreme example of this is the "border" shorthand property. Each border property (width, color, etc.) can be set independently on all four sides of the box. This means that 20 border properties will be displayed, even for a user that sets "border: 1px solid blue".

Expanded View

See the "Expanding the font-family" section of the Font Fixing use case.

When a property is expanded, the list of rules that include the property are displayed.

Each row of that list contains the CSS selector, the value provided for that selector in that rule, and the stylesheet:line number on which that rule/property is defined.

The rows are sorted in order of selector precedence. So, the first rule listed is the one that was selected for use. All of the other rows are displayed with strike through because they were not selected.

After the list of selectors that match the selected page element, there is an "unmatched rules" entry. Expanding that displays all of the rules providing the current property that had CSS selectors that did not much that currently selected page element.

Include Default Styles

The user can choose to include the default styles and not just the overridden ones. These styles are sorted alphabetically by property name.

Filtering

The user can filter the list of styles by typing in the provided search box. The list is filtered as the user types subject to performance constraints.

Only rows that match in either the property name, CSS selector or the value are displayed after the filter is applied.

For example, searching for ".even" would find all of the properties to which the ".even" class went into the style calculation. The CSS selectors for selected and unselected rules will be searched.

A search for "border" will display all of the border properties.

(optional) the filter applied to the value could do unit conversions to find equivalents. For example, the filter could match equivalent colors (black, #000, rgb(0,0,0)) or equivalent sizes (1em, 12px).

Multiple Selected Elements

If there are multiple page elements selected, the Style Inspector will display a message instead of the normal contents of the Inspector. The message, in English, is:

Multiple elements are selected. Only one element's styles can be inspected at a time.

(optional) Display only the rules that all of the selected elements have in common.

Changes from the Highlighter

If the Style Inspector is open and the user changes the selected element in the Highlighter, the Style Inspector should display the newly selected element's styles. Since the selection in the Highlighter can change quickly during visual highlighting, the speed of changing the Style Inspector can be throttled for performance reasons.

If the user toggles classes on an element via the Highlighter Infobar, the Style Inspector should update to show the new styles applied to the element.

Changes from the Command Line

If the user takes an action such as toggling classes or changing the selected element via the Command Line, the Style Inspector should update when the command is complete.

Changes from the Page

If the Style Inspector is visible and the page is changed via JavaScript, the Style Inspector should update (possibly after a small delay in order to deal with performance considerations). |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=` }}