canmove, Confirmed users, Bureaucrats and Sysops emeriti
1,093
edits
DevTools/Features/RichInfobar: Difference between revisions
no edit summary
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
{{FeatureStatus | {{FeatureStatus | ||
|Feature name= | |Feature name=Rich Infobar | ||
|Feature stage=Planning | |Feature stage=Planning | ||
|Feature status=In progress | |Feature status=In progress | ||
| Line 32: | Line 32: | ||
|Feature functional spec===== Selected in the Page Inspector ==== | |Feature functional spec===== Selected in the Page Inspector ==== | ||
Pseudo-classes can be toggled in the page inspector so that they can apply to any element-oriented tool (F1). | Pseudo-classes can be toggled in the page inspector so that they can apply to any element-oriented tool <span id="F1">(F1)</span>. | ||
The user can toggle any of these four common pseudo-classes (F2): | The user can toggle any of these four common pseudo-classes <span id="F2">(F2)</span>: | ||
* active | * active | ||
| Line 41: | Line 41: | ||
* visited | * visited | ||
Those are the four pseudo-classes supported by the most popular developer tools. There are other pseudo-classes that we should try to support as well (F6): | Those are the four pseudo-classes supported by the most popular developer tools. There are other pseudo-classes that we should try to support as well <span id="F6">(F6)</span>: | ||
* link | * link | ||
| Line 52: | Line 52: | ||
Many of these can be set in a "sticky" way by the user in the UI of their application. However, it would be more convenient as they're reviewing the styling for an element if they can just "pretend" to have checked the checkbox, for example. | Many of these can be set in a "sticky" way by the user in the UI of their application. However, it would be more convenient as they're reviewing the styling for an element if they can just "pretend" to have checked the checkbox, for example. | ||
A command line command can also toggle pseudo-classes on the selected element (F3). There should also be command line commands for toggling classes (F7) and setting the ID (F8). | The tag name <span id="F9">(F9)</span> and ID <span id="F10">(F10)</span> can be edited. | ||
A command line command can also toggle pseudo-classes on the selected element <span id="F3">(F3)</span>. There should also be command line commands for toggling classes <span id="F7">(F7)</span> and setting the ID <span id="F8">(F8)</span>. | |||
One open question to acknowledge: when there's a separate [[DevTools/Features/ToolsWindow|tools window]] we may need a separate UI for doing this same thing from within the tools window. | One open question to acknowledge: when there's a separate [[DevTools/Features/ToolsWindow|tools window]] we may need a separate UI for doing this same thing from within the tools window. | ||
| Line 58: | Line 60: | ||
==== Pseudo-Class Lifetime ==== | ==== Pseudo-Class Lifetime ==== | ||
Pseudo-classes stay set until the page inspector is closed (F4). All pseudo-classes are reset to their original values when the tools are closed. This will also require some thought for the interaction with a separate tools window. | Pseudo-classes stay set until the page inspector is closed <span id="F4">(F4)</span>. All pseudo-classes are reset to their original values when the tools are closed. This will also require some thought for the interaction with a separate tools window. | ||
==== Lifetime of Other Changes ==== | ==== Lifetime of Other Changes ==== | ||
Toggled classes and changed/added IDs remain in place after the tools are closed (F9). | Toggled classes and changed/added IDs remain in place after the tools are closed <span id="F9">(F9)</span>. | ||
==== Support in Other Tools ==== | ==== Support in Other Tools ==== | ||
The [[DevTools/Features/StyleInspector|Style Inspector]] and [[DevTools/Features/RulesView|Rules View]] will display the proper styles based on the pseudo-classes applied to the element (F5). | The [[DevTools/Features/StyleInspector|Style Inspector]] and [[DevTools/Features/RulesView|Rules View]] will display the proper styles based on the pseudo-classes applied to the element <span id="F5">(F5)</span>. | ||
|Feature ux design=Stephen Horlander offered the suggestion of putting a + at the end of the highlighter Infobar. | |Feature ux design=Stephen Horlander offered the suggestion of putting a + at the end of the highlighter Infobar, and Paul Rouget had the suggestions of the click behavior on existing Infobar elements. | ||
* double-clicking the tag name or ID switches the label to a text box for editing. | |||
* classes and pseudo-classes can be toggled by clicking on them in the Infobar. If the user switches to another page element and then back after turning off a class, that class will be gone from the Infobar. | |||
* Clicking the + displays a text field with placeholder text along the lines of <tt>:pseudo, #id, or .class</tt>. | * Clicking the + displays a text field with placeholder text along the lines of <tt>:pseudo, #id, or .class</tt>. | ||
* If the user types :, it would the field would contain ":active, focus, hover, visited" with all of the text but the ":" selected. | * If the user types :, it would the field would contain ":active, focus, hover, visited, ..." with all of the text but the ":" selected. | ||
* :a, : | * ":a", ":h", etc. should autocomplete to the supported pseudo-classes | ||
* if the user starts the field with anything but "#", "." or ":" the field should turn red (or otherwise show the error state) | * if the user starts the field with anything but "#", "." or ":" the field should turn red (or otherwise show the error state) | ||
* if the user types "#" and the node has an ID, the existing ID should be placed in the field, preselected with the cursor after the # | * if the user types "#" and the node has an ID, the existing ID should be placed in the field, preselected with the cursor after the # | ||