DevTools/Features/StyleInspector
Status
| Style Inspector | |
| Stage | Complete |
| Status | Complete |
| Release target | Firefox 10 |
| Health | OK |
| Status note | ` |
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 | ` |
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 CSS selectors 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
- [DONE] #F1 Styles button in Page Inspector (aka Highlighter) that opens Style Inspector in a sidebar
- [DONE] #F3 Display only user-defined styles by default
- [DONE] #F15 Filter the list of styles by a search
Desired, but not required in initial release:
- #F5 Finalized collapsed style view
- #F24 Updates to the element's styles are reflected in the style inspector
- [DONE] #F6 Click property name to expand the property
- #F10 Display values as they appear in the style sheet
- [DONE] #F14 Include default styles option
- #F9 Property name is displayed when it doesn't match the property shown
- #F7 New-style MDN links
- #F13 Actual values vs. stylesheet values
- #F16 Unit conversions during filtering
- #F12 Display color swatches
- #F11 Show as few properties as possible to reflect the way the user is styling the element
- #F26 Click on name:lineno to jump to Style Editor (depends on Style Editor, obviously)
- #F17 Edit property value for the selected element
- #F18 Edit property value for the stylesheet rule
- #F2 Command to open the Style Inspector
- #F19 Rule changes are also visible in the Style Editor
Non-goals
`
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) (F1).
The Style Inspector can also be opened and closed using the command line (F2).
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 CSS selectors 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 (F3) 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 (F5). Clicking the property name or the disclosure arrow will expand the view for the property (see Expanded View below) (F6).
When you hover over a row, a ? icon is displayed (F7). Clicking this will take you to the MDN page for that CSS property (F8).
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".
If the user has set the border as "border: 1px solid blue", the "border-left-color" property will show rgb(0,0,255). When you expand that property, you'll see the rule displayed as, for example, "h1 -> border: 1px solid blue". The property name is displayed because it does not match the property name shown (F9). Additionally, "1px solid blue" is displayed for the value because that is how the stylesheet lists it (F10).
(optional) A better default than showing all of the possible CSS properties is to show shorthand properties as appropriate, based on how the user has specified their styles. Using "border" as an example:
- if the styles for an element only have "border", then border is the property displayed
- if there is a border-color, then the border-(color, width, etc) properties are displayed, but not the properties for the sides
- if there is a border-left, then the border-(left, right, top, bottom) properties are displayed
- if there is a border-left-color, then all of the border properties are displayed
In other words, show as few properties as possible to reflect the way the user is styling the node in question (F11). Similar rules would apply to properties like "font".
(optional) Computed styles automatically converts all of the colors to rgb(). The user may have specified the colors using some other system. In order to help them make sense of the color, display a color swatch next to the color label, in both the initial and expanded views. (F12)
(optional) For a number of CSS properties, there is a difference between what the browser ultimately decides to show and what the user has specified. For example, "font-family: SuperBlingUltra, Verdana, sans-serif" will ultimately select some font from the user's system. There's no way to tell what that font is, however. The value of the font-family property in the initial view should be the actual font chosen for display. The expanded view would show the list as it appears in the stylesheet.
- if the user has SuperBlingUltra or Verdana, that would be displayed for font-family
- if they do not, the font used by the browser for "sans-serif" will be displayed as the value for font-family
Other examples of showing displayed values vs. the values specified in the stylesheet (F13) are things like "width: 1em" which is translated into px by the browser.
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. Those rules are sorted by how close they are to matching the original element.
Include Default Styles
The user can choose to include the default styles (F14) and not just the overridden ones. These styles are sorted alphabetically by property name.
Filtering
The user can filter the list of styles (F15) 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 (F16) to find equivalents. For example, the filter could match equivalent colors (black, #000, rgb(0,0,0)) or equivalent sizes (1em, 12px).
Editing Values
When viewing a rule that contributes to a property, you can click the stylesheet name:line number link to display the stylesheet in the Style Editor(F26). Using the Style Editor, you can change the styles directly and see the changes live. The Style Editor also allows you to save the revised stylesheet.
(optional) A single click on the value of a property will edit that value for the selected element (F17). For example, if you have a background-color of "black" set by stylesheets on the current element, you can click on "black" and change it to "white". The result is equivalent to setting style="background-color: white" on the element.
(optional) A single click on the value of a property in a rule for an element will edit the value for that rule (F18). If background-color property for a rule with a selector of "h1" is "black", you can click it and change it to white. Ideally, this change would be synchronized with the Style Editor so that viewing the same rule in the Style Editor would then show "white" after the change.
(optional) A rule change as described in the previous paragraph would ideally also be visible in the Style Editor (F19).
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. While the user is visually highlighting different elements on the page, the Style Inspector is dimmed. But, once an element is selected, the Style Inspector will display the properties of the newly selected element.
If the user toggles classes on an element (F22) 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 (F23), 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 (F24), the Style Inspector should update (possibly after a small delay in order to deal with performance considerations).
Changes from the Style Editor
If the user edits the page's styles in the Style Editor (F25), the changes should be reflected in the Style Inspector when the Inspector is next visible.
(last feature number: 26)
6. User experience design
`
Stage 3: Planning
7. Implementation plan
`
8. Reviews
Security review
`
Privacy review
`
Localization review
`
Accessibility
`
Quality Assurance review
https://wiki.mozilla.org/QA/Waverley/Developer-Tools/StyleInspector/Test-plan
Operations review
`
Stage 4: Development
9. Implementation
`
Stage 5: Release
10. Landing criteria
`
Feature details
| Priority | P1 |
| Rank | 2 |
| Theme / Goal | ` |
| Roadmap | Developer Tools |
| Secondary roadmap | ` |
| Feature list | Desktop |
| Project | ` |
| Engineering team | DevTools |
Team status notes
| status | notes | |
| Products | ` | ` |
| Engineering | ` | ` |
| Security | sec-review-complete | Notes |
| Privacy | ` | ` |
| Localization | ` | ` |
| Accessibility | ` | ` |
| Quality assurance | ` | ` |
| User experience | ` | ` |
| Product marketing | ` | ` |
| Operations | ` | ` |
