DevTools/Features/RichInfobar

From MozillaWiki
< DevTools‎ | Features
Revision as of 15:31, 6 October 2011 by Kdangoor (talk | contribs) (Created page with "{{FeatureStatus |Feature name=Pseudo-Class View |Feature stage=Draft |Feature health=OK }} {{FeatureTeam |Feature product manager=Kevin Dangoor |Feature feature manager=Kevin Dan...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search
Please use "Edit with form" above to edit this page.

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