canmove, Confirmed users, Bureaucrats and Sysops emeriti
1,093
edits
DevTools/Features/RulesView: Difference between revisions
Jump to navigation
Jump to search
no edit summary
No edit summary |
No edit summary |
||
| Line 18: | Line 18: | ||
|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 | ||
| Line 27: | Line 27: | ||
|Feature functional spec===== From the Page Inspector ==== | |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 (F1). Those two views of styles will be presented together. The last view chosen will be remembered and displayed by default the next time (F2). Ideally, we would use Telemetry to keep track of how many people use each view and how often (requirement needs to be more specific). | 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 ==== | ==== 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 (F3). They will be sorted by specificity (F4). | 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 (F5). | Rules that have been overridden will be displayed differently (eg strikethrough or de-emphasized) than the active rules <span id="F5">(F5)</span>. | ||
==== Links ==== | ==== Links ==== | ||
Each rule will include a link to the stylesheet (F6). 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 (F7). | 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 (F8). (optional, but high value) A control available at the property level will switch to the Style Inspector view for that property (F9). | 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 ==== | ==== Editing ==== | ||
| Line 45: | Line 45: | ||
This section is not a blocker for shipping. | This section is not a blocker for shipping. | ||
Each property will have a toggle control (F10). Similarly, each rule will have a toggle control (F11). | 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 (F12). A single click on the property name will provide a text box for editing the property name (F13). | 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 (F15). | 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 ==== | ==== Adding Rules and Properties ==== | ||
| Line 55: | Line 55: | ||
As with editing, this section is optional. | As with editing, this section is optional. | ||
New property/value pairs can be added to existing rules (F16) | 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 (F17). | Element styles can also be edited and extended with new properties <span id="F17">(F17)</span>. | ||
Entirely new rules can be added (F18). | Entirely new rules can be added <span id="F18">(F18)</span>. | ||
==== Media Queries ==== | ==== Media Queries ==== | ||
| Line 65: | Line 65: | ||
Optional. | 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 (F19). | 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 | ||