DevTools/Features/PseudoClassLock

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

Status

Pseudo-Class Lock
Stage	Complete
Status	In progress
Release target	Firefox 14
Health	OK
Status note	The discoverable UI has landed.

{{#set:Feature name=Pseudo-Class Lock

|Feature stage=Complete |Feature status=In progress |Feature version=Firefox 14 |Feature health=OK |Feature status note=The discoverable UI has landed. }}

Team

Product manager	Kevin Dangoor
Directly Responsible Individual	Kevin Dangoor
Lead engineer	Heather Arthur
Security lead	`
Privacy lead	`
Localization lead	`
Accessibility lead	`
QA lead	Ioana Budnar
UX lead	`
Product marketing lead	`
Operations lead	`
Additional members	`

{{#set:Feature product manager=Kevin Dangoor

|Feature feature manager=Kevin Dangoor |Feature lead engineer=Heather Arthur |Feature security lead=` |Feature privacy lead=` |Feature localization lead=` |Feature accessibility lead=` |Feature qa lead=Ioana Budnar |Feature ux lead=` |Feature product marketing lead=` |Feature operations lead=` |Feature additional members=` }}

Open issues/risks

`

Stage 1: Definition

1. Feature overview

This feature provides 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 gives users a mechanism for making "hover" and other pseudo-classes sticky while you're using the tools.

2. Users & 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.

3. Dependencies

`

4. Requirements

1. user must be able to toggle any of the four commonly supported pseudo-
   • active
   • focus
   • hover
   • visited
2. this is an element-centric change, so all element-oriented tools (eg, Style Inspector) should follow along
3. the selected state is locked in until the user is done with the tools (returns focus to the page)

Optional:

1. support for changing additional pseudo-classes
   • link
   • enabled
   • disabled
   • valid
   • invalid
   • checked

Non-goals

`

Stage 2: Design

5. Functional specification

`

6. User experience design

Some discussion of putting this functionality in the Infobar occurred on dev-apps-firefox. DevTools/Features/RichInfobar was created along those lines, but broken up and replaced by this page and DevTools/Features/EasyAttributeEditing.

Stage 3: Planning

7. Implementation plan

Implementation is going on in bug 707740.

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=This feature provides 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 gives users a mechanism for making "hover" and other pseudo-classes sticky while you're using the tools. |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. |Feature dependencies=` |Feature requirements=# user must be able to toggle any of the four commonly supported pseudo-

1. • active
   • focus
   • hover
   • visited
2. this is an element-centric change, so all element-oriented tools (eg, Style Inspector) should follow along
3. the selected state is locked in until the user is done with the tools (returns focus to the page)

Optional:

1. support for changing additional pseudo-classes
   • link
   • enabled
   • disabled
   • valid
   • invalid
   • checked

|Feature non-goals=` |Feature functional spec=` |Feature ux design=Some discussion of putting this functionality in the Infobar occurred on dev-apps-firefox. DevTools/Features/RichInfobar was created along those lines, but broken up and replaced by this page and DevTools/Features/EasyAttributeEditing. |Feature implementation plan=Implementation is going on in bug 707740. |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	1
Theme / Goal	`
Roadmap	Developer Tools
Secondary roadmap	`
Feature list	Desktop
Project	`
Engineering team	DevTools

{{#set:Feature priority=P1

|Feature rank=1 |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	sec-review-unnecessary	`
Privacy	`	`
Localization	`	`
Accessibility	`	`
Quality assurance	Signed off	Test Plan
User experience	`	`
Product marketing	`	`
Operations	`	`

{{#set:Feature products status=`

|Feature products notes=` |Feature engineering status=` |Feature engineering notes=` |Feature security status=sec-review-unnecessary |Feature security health=OK |Feature security notes=` |Feature privacy status=` |Feature privacy notes=` |Feature localization status=` |Feature localization notes=` |Feature accessibility status=` |Feature accessibility notes=` |Feature qa status=Signed off |Feature qa notes=Test Plan |Feature ux status=` |Feature ux notes=` |Feature product marketing status=` |Feature product marketing notes=` |Feature operations status=` |Feature operations notes=` }}