canmove, Confirmed users, Bureaucrats and Sysops emeriti
1,093
edits
DevTools/Features/StyleInspector: Difference between revisions
Jump to navigation
Jump to search
DevTools/Features/StyleInspector (view source)
Revision as of 14:56, 14 October 2011
, 14 October 2011no edit summary
No edit summary |
No edit summary |
||
| Line 5: | Line 5: | ||
|Feature version=Firefox 10 | |Feature version=Firefox 10 | ||
|Feature health=OK | |Feature health=OK | ||
|Feature status note= | |Feature status note=Visible in Nightly, more refinements required | ||
}} | }} | ||
{{FeatureTeam | {{FeatureTeam | ||
| Line 14: | Line 14: | ||
}} | }} | ||
{{FeaturePageBody | {{FeaturePageBody | ||
|Feature overview=The Style Inspector works in conjunction with the [[DevTools/Features/Highlighter|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. | |Feature overview=The Style Inspector works in conjunction with the [[DevTools/Features/Highlighter|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. | ||
| Line 31: | Line 27: | ||
The Style Inspector is part of the [http://people.mozilla.org/~kdangoor/usecases/minotaur/index.html#Font%20Fixing Font Fixing] use case. | The Style Inspector is part of the [http://people.mozilla.org/~kdangoor/usecases/minotaur/index.html#Font%20Fixing 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 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= | |Feature requirements=# [[#F1]] Styles button in Page Inspector (aka Highlighter) that opens Style Inspector in a sidebar | ||
# {{done|}} [[#F3]] Display only user-defined styles by default | |||
# [[#F5]] Finalized collapsed style view | |||
# {{done|}} [[#F15]] Filter the list of styles by a search | |||
# [[#F24]] Updates to the element's styles are reflected in the style inspector | |||
Desired, but not required in initial release: | |||
# [[#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 | |||
|Feature functional spec===== Invoking ==== | |Feature functional spec===== Invoking ==== | ||