DevTools/Features/RichInfobar

Please use "Edit with form" above to edit this page.

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=` }}