DevTools/Features/RichInfobar
Status
| Pseudo-Class View | |
| Stage | Design |
| Status | In progress |
| Release target | ` |
| Health | OK |
| Status note | Working out the UX |
{{#set:Feature name=Pseudo-Class View
|Feature stage=Design |Feature status=In progress |Feature version=` |Feature health=OK |Feature status note=Working out the UX }}
Team
| Product manager | Kevin Dangoor |
| Directly Responsible Individual | Kevin Dangoor |
| Lead engineer | ` |
| Security lead | ` |
| Privacy lead | ` |
| Localization lead | ` |
| Accessibility lead | ` |
| QA lead | ` |
| UX lead | Stephen Horlander |
| Product marketing lead | ` |
| Operations lead | ` |
| Additional members | ` |
{{#set:Feature product manager=Kevin Dangoor
|Feature feature manager=Kevin Dangoor |Feature lead engineer=` |Feature security lead=` |Feature privacy lead=` |Feature localization lead=` |Feature accessibility lead=` |Feature qa lead=` |Feature ux lead=Stephen Horlander |Feature product marketing lead=` |Feature operations lead=` |Feature additional members=` }}
Open issues/risks
`
Stage 1: Definition
1. Feature overview
When styling web pages, you can create styles using "pseudo-classes" that only apply under certain circumstances. The pseudo-classes in use today are "active", "visited", "hover" and "focus".
The goal with this feature is to allow the users to view the styles with the desired pseudo-classes applied to a page element. For example, pseudo-classes like "hover" are normally applied only when the cursor is over the page element. When working on styling, however, you need to be able to keep the "hover" state while working in the developer tools area of the window.
2. Users & use cases
Anyone doing web design uses this feature.
3. Dependencies
`
4. Requirements
`
Non-goals
`
Stage 2: Design
5. Functional specification
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).
The user can toggle any of the four pseudo-classes (F2):
- active
- focus
- hover
- visited
A command line command can also toggle pseudo-classes on the selected element (F3).
One open question to acknowledge: when there's a separate tools window we may need a separate UI for doing this same thing from within the tools window.
Pseudo-Class Lifetime
Pseudo-classes stay set until the page inspector is closed (F4).
Support in Other Tools
The Style Inspector and Rules View will display the proper styles based on the pseudo-classes applied to the element (F5).
6. User experience design
Stephen Horlander offered the suggestion of putting a + at the end of the highlighter Infobar.
- Clicking the + displays a text field with placeholder text along the lines of :pseudo, #id, or .class.
- If the user types :, it would the field would contain ":active, focus, hover, visited" with all of the text but the ":" selected.
- :a, :f, :h and :v should autocomplete to the matching pseudo-class so that the user can just hit return to add the pseudo-class.
- the ability to toggle classes by clicking then should also apply to 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 types "#" and the node has an ID, the existing ID should be placed in the field, preselected with the cursor after the #
Stage 3: Planning
7. Implementation plan
`
8. Reviews
Security review
`
Privacy review
`
Localization review
`
Accessibility
`
Quality Assurance review
`
Operations review
`
Stage 4: Development
9. Implementation
`
Stage 5: Release
10. Landing criteria
` {{#set:Feature open issues and risks=` |Feature overview=When styling web pages, you can create styles using "pseudo-classes" that only apply under certain circumstances. The pseudo-classes in use today are "active", "visited", "hover" and "focus".
The goal with this feature is to allow the users to view the styles with the desired pseudo-classes applied to a page element. For example, pseudo-classes like "hover" are normally applied only when the cursor is over the page element. When working on styling, however, you need to be able to keep the "hover" state while working in the developer tools area of the window. |Feature users and use cases=Anyone doing web design uses this feature. |Feature dependencies=` |Feature requirements=` |Feature non-goals=` |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).
The user can toggle any of the four pseudo-classes (F2):
- active
- focus
- hover
- visited
A command line command can also toggle pseudo-classes on the selected element (F3).
One open question to acknowledge: when there's a separate tools window we may need a separate UI for doing this same thing from within the tools window.
Pseudo-Class Lifetime
Pseudo-classes stay set until the page inspector is closed (F4).
Support in Other Tools
The Style Inspector and Rules View will display the proper styles based on the pseudo-classes applied to the element (F5). |Feature ux design=Stephen Horlander offered the suggestion of putting a + at the end of the highlighter Infobar.
- Clicking the + displays a text field with placeholder text along the lines of :pseudo, #id, or .class.
- If the user types :, it would the field would contain ":active, focus, hover, visited" with all of the text but the ":" selected.
- :a, :f, :h and :v should autocomplete to the matching pseudo-class so that the user can just hit return to add the pseudo-class.
- the ability to toggle classes by clicking then should also apply to 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 types "#" and the node has an ID, the existing ID should be placed in the field, preselected with the cursor after the #
|Feature implementation plan=` |Feature security review=` |Feature privacy review=` |Feature localization review=` |Feature accessibility review=` |Feature qa review=` |Feature operations review=` |Feature implementation notes=` |Feature landing criteria=` }}
Feature details
| Priority | P1 |
| Rank | 6 |
| Theme / Goal | ` |
| Roadmap | Developer Tools |
| Secondary roadmap | ` |
| Feature list | Desktop |
| Project | ` |
| Engineering team | DevTools |
{{#set:Feature priority=P1
|Feature rank=6 |Feature theme=` |Feature roadmap=Developer Tools |Feature secondary roadmap=` |Feature list=Desktop |Feature project=` |Feature engineering team=DevTools }}
Team status notes
| status | notes | |
| Products | ` | ` |
| Engineering | ` | ` |
| Security | ` | ` |
| Privacy | ` | ` |
| Localization | ` | ` |
| Accessibility | ` | ` |
| Quality assurance | ` | ` |
| User experience | ` | ` |
| Product marketing | ` | ` |
| Operations | ` | ` |
{{#set:Feature products status=`
|Feature products notes=` |Feature engineering status=` |Feature engineering notes=` |Feature security status=` |Feature security health=` |Feature security notes=` |Feature privacy status=` |Feature privacy notes=` |Feature localization status=` |Feature localization notes=` |Feature accessibility status=` |Feature accessibility notes=` |Feature qa status=` |Feature qa notes=` |Feature ux status=` |Feature ux notes=` |Feature product marketing status=` |Feature product marketing notes=` |Feature operations status=` |Feature operations notes=` }}