Features/Firefox/In-content UI Visual Unification

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

Status

In-content UI Visual Unification
Stage	Development
Status	In progress
Release target	Firefox 8
Health	OK
Status note	Initial work done & landed, in process of getting reviews and converting additional pages.

{{#set:Feature name=In-content UI Visual Unification

|Feature stage=Development |Feature status=In progress |Feature version=Firefox 8 |Feature health=OK |Feature status note=Initial work done & landed, in process of getting reviews and converting additional pages. }}

Team

Product manager	`
Directly Responsible Individual	Blair McBride
Lead engineer	Blair McBride
Security lead	`
Privacy lead	`
Localization lead	`
Accessibility lead	`
QA lead	Henrik Skupin
UX lead	Jennifer Boriss
Product marketing lead	`
Operations lead	`
Additional members	`

{{#set:Feature product manager=`

|Feature feature manager=Blair McBride |Feature lead engineer=Blair McBride |Feature security lead=` |Feature privacy lead=` |Feature localization lead=` |Feature accessibility lead=` |Feature qa lead=Henrik Skupin |Feature ux lead=Jennifer Boriss |Feature product marketing lead=` |Feature operations lead=` |Feature additional members=` }}

Open issues/risks

`

Stage 1: Definition

1. Feature overview

Do preparation work for having new in-content UI have a consistent and unified visual appearance.

2. Users & use cases

Quoting from shorlander's blog post: "The goal is to create something that looks appealing, connects the variety of different types of UI, is recognizably in-content UI and can be styled per platform."

3. Dependencies

`

4. Requirements

Relevant in-content UI is able to use the shared resources to look consistent with other in-content UI.

Non-goals

• Implement other UI as in-content UI, such as preferences (long-term goal, separate project)

Stage 2: Design

5. Functional specification

`

6. User experience design

• General in-content mockups
• Blog post on in-content UI visual unification
• Breadcrumb trail mockup

Stage 3: Planning

7. Implementation plan

`

8. Reviews

Security review

`

Privacy review

`

Localization review

`

Accessibility

`

Quality Assurance review

Breadcrumb trail should be fully testable via browser-mochitests. Visual styling can't be automatically tested, unless we get UI reftests.

Operations review

`

Stage 4: Development

9. Implementation

Related Bugs

• bug 658431 - Move generic page styling into separate stylesheet for reuse in other in-content UIs
• bug 658530 - Update about:permissions style to use common in-content page styles
• bug 660726 - Implement breadcrumb trail for in-content UI

Next Steps & Open Issues

• Basic visual look
  • Split out relevant styles from addons manager themes
  • Adapt about:permissions to use new shared styles
• Breadcrumbs
  • Implement breadcrumbs in a way they can be used in any in-content page
  • Integrate into about:addons
  • Integrate into about:permissions
  • Investigate which other existing pages should have a breadcrumb trail, and integrate into those
    • Should error pages have a breadcrumb trail?

Stage 5: Release

10. Landing criteria

` {{#set:Feature open issues and risks=` |Feature overview=Do preparation work for having new in-content UI have a consistent and unified visual appearance. |Feature users and use cases=Quoting from shorlander's blog post: "The goal is to create something that looks appealing, connects the variety of different types of UI, is recognizably in-content UI and can be styled per platform." |Feature dependencies=` |Feature requirements=Relevant in-content UI is able to use the shared resources to look consistent with other in-content UI. |Feature non-goals=* Implement other UI as in-content UI, such as preferences (long-term goal, separate project) |Feature functional spec=` |Feature ux design=* General in-content mockups

• Blog post on in-content UI visual unification
• Breadcrumb trail mockup

|Feature implementation plan=` |Feature security review=` |Feature privacy review=` |Feature localization review=` |Feature accessibility review=` |Feature qa review=Breadcrumb trail should be fully testable via browser-mochitests. Visual styling can't be automatically tested, unless we get UI reftests. |Feature operations review=` |Feature implementation notes===== Related Bugs ====

• bug 658431 - Move generic page styling into separate stylesheet for reuse in other in-content UIs
• bug 658530 - Update about:permissions style to use common in-content page styles
• bug 660726 - Implement breadcrumb trail for in-content UI

Next Steps & Open Issues

• Basic visual look
  • Split out relevant styles from addons manager themes
  • Adapt about:permissions to use new shared styles
• Breadcrumbs
  • Implement breadcrumbs in a way they can be used in any in-content page
  • Integrate into about:addons
  • Integrate into about:permissions
  • Investigate which other existing pages should have a breadcrumb trail, and integrate into those
    • Should error pages have a breadcrumb trail?

|Feature landing criteria=` }}

Feature details

Priority	P3
Rank	999
Theme / Goal	`
Roadmap	Firefox Desktop
Secondary roadmap	`
Feature list	Desktop
Project	`
Engineering team	Desktop front-end

{{#set:Feature priority=P3

|Feature rank=999 |Feature theme=` |Feature roadmap=Firefox Desktop |Feature secondary roadmap=` |Feature list=Desktop |Feature project=` |Feature engineering team=Desktop front-end }}

Team status notes

	status	notes
Products	tbd	`
Engineering	tbd	`
Security	tbd	`
Privacy	tbd	`
Localization	tbd	`
Accessibility	tbd	`
Quality assurance	tbd	`
User experience	tbd	`
Product marketing	`	`
Operations	`	`

{{#set:Feature products status=tbd

|Feature products notes=` |Feature engineering status=tbd |Feature engineering notes=` |Feature security status=tbd |Feature security health=` |Feature security notes=` |Feature privacy status=tbd |Feature privacy notes=` |Feature localization status=tbd |Feature localization notes=` |Feature accessibility status=tbd |Feature accessibility notes=` |Feature qa status=tbd |Feature qa notes=` |Feature ux status=tbd |Feature ux notes=` |Feature product marketing status=` |Feature product marketing notes=` |Feature operations status=` |Feature operations notes=` }}