canmove, Confirmed users, Bureaucrats and Sysops emeriti
1,093
edits
DevTools/Features/RulesView: Difference between revisions
no edit summary
No edit summary |
No edit summary |
||
| (7 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
{{FeatureStatus | {{FeatureStatus | ||
|Feature name=CSS Rules View | |Feature name=CSS Rules View | ||
|Feature stage= | |Feature stage=Complete | ||
|Feature status=Complete | |||
|Feature version=Firefox 10 | |||
|Feature health=OK | |Feature health=OK | ||
}} | }} | ||
{{FeatureTeam | {{FeatureTeam | ||
|Feature product manager=Kevin Dangoor | |Feature product manager=Kevin Dangoor | ||
|Feature feature manager= | |Feature feature manager=Kevin Dangoor | ||
|Feature lead engineer=Dave Camp | |Feature lead engineer=Dave Camp | ||
}} | }} | ||
| Line 18: | Line 20: | ||
|Feature requirements=* Collection of rules that apply to the element selected by the Page Inspector | |Feature requirements=* Collection of rules that apply to the element selected by the Page Inspector | ||
* Sorted from most specific to least specific | * Sorted from most specific to least specific | ||
Desired, but not required for shipping: | Desired, but not required for shipping: | ||
* Integrates with the Style Inspector | |||
* Ability to edit values | * Ability to edit values | ||
* Ability to toggle property/value pairs | * Ability to toggle property/value pairs | ||
* Integration with the Style Editor | * Integration with the Style Editor | ||
* Media query support | * Media query support | ||
|Feature functional spec===== | |Feature functional spec===== From the Page Inspector ==== | ||
Clicking the Styles button on the Page Inspector's toolbar will open up the Rules View/Style Inspector <span id="F1">(F1)</span>. Those two views of styles will be presented together. The last view chosen will be remembered and displayed by default the next time <span id="F2">(F2)</span>. Ideally, we would use Telemetry to keep track of how many people use each view and how often (requirement needs to be more specific). | |||
==== Initial Display ==== | |||
Like similar tools, the rules that apply to the selected page element will be displayed in a style that is similar to a CSS file <span id="F3">(F3)</span>. They will be sorted by specificity <span id="F4">(F4)</span>. | |||
Rules that have been overridden will be displayed differently (eg strikethrough or de-emphasized) than the active rules <span id="F5">(F5)</span>. | |||
==== Links ==== | |||
Each rule will include a link to the stylesheet <span id="F6">(F6)</span>. Ideally, this link will go to the Style Editor on the appropriate line. If the Style Editor is not ready, link to that line in View Source. On hover, display the complete URL <span id="F7">(F7)</span>. | |||
For each property, a link to MDN will be provided, as it is in the Style Inspector <span id="F8">(F8)</span>. (optional, but high value) A control available at the property level will switch to the Style Inspector view for that property <span id="F9">(F9)</span>. | |||
==== Editing ==== | |||
This section is not a blocker for shipping. | |||
Each property will have a toggle control <span id="F10">(F10)</span>. Similarly, each rule will have a toggle control <span id="F11">(F11)</span>. | |||
A single click on a value will provide a text box for editing that value <span id="F12">(F12)</span>. A single click on the property name will provide a text box for editing the property name <span id="F13">(F13)</span>. When editing the property name, pressing <tt>tab</tt>, <tt>:</tt> or <tt>enter</tt> will switch the entry over to the value. <span id="F14">(F14)</span> | |||
If a property or value is invalid, there should be an error indicator but the property/value pair will not be thrown away for edits made in the tool <span id="F15">(F15)</span>. Ideally, styles that were in the stylesheet but were invalid would not be thrown away as well <span id="F20">(F20)</span>. | |||
==== Adding Rules and Properties ==== | |||
There was a [https://bugs.webkit.org/show_bug.cgi?id=65626 straightforward suggestion for WebKit] that would make sense for this tool as well. | As with editing, this section is optional. | ||
New property/value pairs can be added to existing rules <span id="F16">(F16)</span> with entry behavior that is similar to the editing behavior provided for existing property/value pairs. | |||
Element styles can also be edited and extended with new properties <span id="F17">(F17)</span>. | |||
Entirely new rules can be added <span id="F18">(F18)</span>. | |||
==== Media Queries ==== | |||
Optional. | |||
There was a [https://bugs.webkit.org/show_bug.cgi?id=65626 straightforward suggestion for WebKit] that would make sense for this tool as well <span id="F19">(F19)</span>. | |||
}} | }} | ||
{{FeatureInfo | {{FeatureInfo | ||
|Feature priority= | |Feature priority=P1 | ||
|Feature rank=5 | |||
|Feature roadmap=Developer Tools | |Feature roadmap=Developer Tools | ||
|Feature list=Desktop | |Feature list=Desktop | ||
|Feature engineering team=DevTools | |Feature engineering team=DevTools | ||
}} | }} | ||
{{FeatureTeamStatus}} | {{FeatureTeamStatus | ||
|Feature security status=sec-review-complete | |||
|Feature security health=OK | |||
|Feature security notes=* Reviewed on 2011.12.09 | |||
* * [[Security/reviews/firefox/PageInspectorHighlighter | Notes]] | |||
}} | |||