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