canmove, Confirmed users, Bureaucrats and Sysops emeriti
1,093
edits
DevTools/Features/StyleInspector: Difference between revisions
DevTools/Features/StyleInspector (view source)
Revision as of 19:55, 29 August 2011
, 29 August 2011no edit summary
No edit summary |
No edit summary |
||
| Line 48: | Line 48: | ||
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. | 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 ==== | ==== Initial Display ==== | ||
| Line 56: | Line 58: | ||
All properties are initially '''collapsed'''. The collapsed view shows the property name, selected value and number of rules. | 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 ==== | ==== Expanded View ==== | ||
| Line 77: | Line 83: | ||
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. | 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 or the value''' are displayed after the filter is applied. | 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). | (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). | ||