canmove, Confirmed users, Bureaucrats and Sysops emeriti
1,093
edits
DevTools/Features/RichInfobar: Difference between revisions
Jump to navigation
Jump to search
no edit summary
m (moved DevTools/Features/PseudoClassView to DevTools/Features/RichInfobar: More appropriate name for the change) |
No edit summary |
||
| Line 1: | Line 1: | ||
{{FeatureStatus | {{FeatureStatus | ||
|Feature name=Pseudo-Class View | |Feature name=Pseudo-Class View | ||
|Feature stage= | |Feature stage=Planning | ||
|Feature status=In progress | |Feature status=In progress | ||
|Feature health=OK | |Feature health=OK | ||
|Feature status note= | |Feature status note=Work needs to be slotted in | ||
}} | }} | ||
{{FeatureTeam | {{FeatureTeam | ||
| Line 12: | Line 12: | ||
}} | }} | ||
{{FeaturePageBody | {{FeaturePageBody | ||
|Feature overview= | |Feature overview=The "Infobar" is part of the Page Inspector and appears around the highlighted element on the page. The first iteration of the Infobar provided the tag name, ID and classes for the element. This improvement to the Infobar adds features to allow the user to make common changes to the element quickly. | ||
The | The most important part of this feature is the ability to set pseudo-classes for use in inspecting styles. For example, CSS styles that are applied on "hover" will naturally go away when you switch to the Page Inspector, because you're no longer hovering over the page element you're trying to examine. This feature adds to the infobar a mechanism for making "hover" and other pseudo-classes sticky while you're using the tools. | ||
Toggling classes and setting IDs on page elements are also useful styling features that fit naturally into the infobar. | |||
|Feature users and use cases=Anyone doing web design uses this feature. | |Feature users and use cases=Anyone doing web design uses this feature. | ||
==== Examine Hover Styles ==== | |||
It's common to set styles that appear only on hover, so the user needs a way to dig into those styles, see how they're being applied and possibly tweak them using the editing capabilities of other parts of the tools suite. | |||
==== See the effect of a class ==== | |||
When tracking down styling issues, especially on elements with multiple classes applied to them, it can be useful to visually see the effect that a given class is having on an element. A convenient mechanism for toggling a class on an element is a good way to accomplish this. | |||
==== Set an ID on an element ==== | |||
JavaScript developers often have collections of functions built up that are designed to take elements or element IDs. By being able to quickly set an ID on an element, these developers will have a handle they can pass into their functions. | |||
|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 (F1). | ||
The user can toggle any of | The user can toggle any of these four common pseudo-classes (F2): | ||
* active | * active | ||
| Line 27: | Line 41: | ||
* visited | * visited | ||
A command line command can also toggle pseudo-classes on the selected element (F3). | 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): | ||
* link | |||
* enabled | |||
* disabled | |||
* valid | |||
* invalid | |||
* checked | |||
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). | |||
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 33: | Line 58: | ||
==== Pseudo-Class Lifetime ==== | ==== Pseudo-Class Lifetime ==== | ||
Pseudo-classes stay set until the page inspector is closed (F4). | 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. | ||
==== Lifetime of Other Changes ==== | |||
Toggled classes and changed/added IDs remain in place after the tools are closed (F9). | |||
==== Support in Other Tools ==== | ==== Support in Other Tools ==== | ||