DevTools/Features/RichInfobar
Status
| Pseudo-Class View | |
| Stage | Draft |
| Status | ` |
| Release target | ` |
| Health | OK |
| Status note | ` |
{{#set:Feature name=Pseudo-Class View
|Feature stage=Draft |Feature status=` |Feature version=` |Feature health=OK |Feature status note=` }}
Team
| Product manager | Kevin Dangoor |
| Directly Responsible Individual | Kevin Dangoor |
| Lead engineer | ` |
| Security lead | ` |
| Privacy lead | ` |
| Localization lead | ` |
| Accessibility lead | ` |
| QA lead | ` |
| UX lead | ` |
| 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=` |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).
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
The Infobar around the highlighted element uses a CSS-like style for displaying the element's tag, ID and classes. What if we added pseudo-classes in the same way?
Assuming no pseudo-classes are applied to begin with, we could have a bare : at the end. Clicking that can pop up a menu with the pseudo-classes. If you select hover, you can end up with something like this:
div.foo:hover:
Clicking "hover" there would turn off hover.
One alternative would be to tie this in with a control that's used for adding classes.
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).
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=The Infobar around the highlighted element uses a CSS-like style for displaying the element's tag, ID and classes. What if we added pseudo-classes in the same way?
Assuming no pseudo-classes are applied to begin with, we could have a bare : at the end. Clicking that can pop up a menu with the pseudo-classes. If you select hover, you can end up with something like this:
div.foo:hover:
Clicking "hover" there would turn off hover.
One alternative would be to tie this in with a control that's used for adding classes. |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 | Unprioritized |
| Rank | 999 |
| Theme / Goal | ` |
| Roadmap | ` |
| Secondary roadmap | ` |
| Feature list | ` |
| Project | ` |
| Engineering team | ` |
{{#set:Feature priority=Unprioritized
|Feature rank=999 |Feature theme=` |Feature roadmap=` |Feature secondary roadmap=` |Feature list=` |Feature project=` |Feature engineering team=` }}
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=` }}