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 25: | Line 25: | ||
* 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 ==== | ||
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. | 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). | ||
==== 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). | |||
Rules that have been overridden will be displayed differently (eg strikethrough or de-emphasized) than the active rules (F5). | |||
==== 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). | |||
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). | |||
==== Editing ==== | |||
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). | |||
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). Superior alternative: clicking the property name makes the whole line editable with the property name selected (F14). | |||
If a property or value is invalid, there should be an error indicator but the property/value pair will not be thrown away (F15). | |||
==== Adding Rules and Properties ==== | |||
As with editing, this section is optional. | |||
New property/value pairs can be added to existing rules (F16), ideally in a single text box. | |||
Element styles can also be edited and extended with new properties (F17). | |||
Entirely new rules can be added (F18). | |||
==== 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 (F19). | |||
}} | }} | ||
{{FeatureInfo | {{FeatureInfo | ||