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	`
Health	OK
Status note	Initial work done & landed, in process of getting reviews and converting additional pages. The feature here is to create a unified template so that future pages (add-ons, permission, etc.) have a consistent look and feel.

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

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

The feature here is to create a unified template so that future pages (add-ons, permission, etc.) have a consistent look and feel. }}

Team

Product manager	Asa Dotzler
Directly Responsible Individual	Blair McBride
Lead engineer	Blair McBride
Security lead	`
Privacy lead	`
Localization lead	`
Accessibility lead	`
QA lead	Ioana Budnar
UX lead	Stephen Horlander
Product marketing lead	`
Operations lead	`
Additional members	`

{{#set:Feature product manager=Asa Dotzler

|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=Ioana Budnar |Feature ux lead=Stephen Horlander |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."

This feature falls primarily in the Experience category (from the "Discover, Experience, and Connect" vision statement.)

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."

This feature falls primarily in the Experience category (from the "Discover, Experience, and Connect" vision statement.) |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	`	`
Engineering	`	`
Security	sec-review-complete	Notes
Privacy	`	`
Localization	`	`
Accessibility	`	`
Quality assurance	active	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-complete |Feature security health=OK |Feature security notes=Notes |Feature privacy status=` |Feature privacy notes=` |Feature localization status=` |Feature localization notes=` |Feature accessibility status=` |Feature accessibility notes=` |Feature qa status=active |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=` }}