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

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

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