Improve display of location bar results

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

Status

Improve display of location bar results
Stage	Development
Status	In progress
Release target	Firefox 17
Health	OK
Status note	Development in progress. Some restyling landed in 16. Larger favicons (using representive color for 16px ones) in progress.

{{#set:Feature name=Improve display of location bar results

|Feature stage=Development |Feature status=In progress |Feature version=Firefox 17 |Feature health=OK |Feature status note=Development in progress. Some restyling landed in 16. Larger favicons (using representive color for 16px ones) in progress. }}

Team

Product manager	Asa Dotzler
Directly Responsible Individual	Stephen Horlander
Lead engineer	Andrew Hurle
Security lead	`
Privacy lead	`
Localization lead	`
Accessibility lead	`
QA lead	Virgil Dicu
UX lead	Stephen Horlander
Product marketing lead	`
Operations lead	`
Additional members	Matthew Noorenberghe

{{#set:Feature product manager=Asa Dotzler

|Feature feature manager=Stephen Horlander |Feature lead engineer=Andrew Hurle |Feature security lead=` |Feature privacy lead=` |Feature localization lead=` |Feature accessibility lead=` |Feature qa lead=Virgil Dicu |Feature ux lead=Stephen Horlander |Feature product marketing lead=` |Feature operations lead=` |Feature additional members=Matthew Noorenberghe }}

Open issues/risks

`

Stage 1: Definition

1. Feature overview

The current location bar results feel heavy, busy, hard to scan and have not kept pace with system look and feel.

By streamlining and enhancing the results we aim to increase readability and the improve the appearance.

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

2. Users & use cases

Targets all users of the location bar.

3. Dependencies

`

4. Requirements

`

Non-goals

`

Stage 2: Design

5. Functional specification

`

6. User experience design

Some of the elements we want to improve:

• 32x32px icons
• Better URL scan-ability
• No use of bold, since it shifts the content,
• More whitespace
• No separator line
• Ability to delete entry on hover
• Remove scrollbar (height of dropdown increases to show all results returned [same limit])
• Semi-transparent background

First Design Iteration

Mockup showing colored border on 16x16 icons

Mockup showing gray border on 16x16 icons

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

• [DONE] bug 587909 - Improve the visual style of location bar results
  • bug 634139 - Need the ability to extract the most representative color from a favicon
• bug 768703 - Use 32x32 favicons in location bar results
  • bug 751712 - Add support for HTML5 sizes attribute in <link rel=icon>
• bug 675818 - Add delete button to awesome bar result matches (May postpone because of bug 767254.
• [DONE] bug 583683 - Show all awesomebar results without scrolling

Stage 5: Release

10. Landing criteria

` {{#set:Feature open issues and risks=` |Feature overview=The current location bar results feel heavy, busy, hard to scan and have not kept pace with system look and feel.

By streamlining and enhancing the results we aim to increase readability and the improve the appearance.

This feature falls primarily in the Discover category (from the "Discover, Experience, and Connect" vision statement.) |Feature users and use cases=Targets all users of the location bar. |Feature dependencies=` |Feature requirements=` |Feature non-goals=` |Feature functional spec=` |Feature ux design=Some of the elements we want to improve:

• 32x32px icons
• Better URL scan-ability
• No use of bold, since it shifts the content,
• More whitespace
• No separator line
• Ability to delete entry on hover
• Remove scrollbar (height of dropdown increases to show all results returned [same limit])
• Semi-transparent background

First Design Iteration

Mockup showing colored border on 16x16 icons

Mockup showing gray border on 16x16 icons

|Feature implementation plan=` |Feature security review=` |Feature privacy review=` |Feature localization review=` |Feature accessibility review=` |Feature qa review=` |Feature operations review=` |Feature implementation notes=* [DONE] bug 587909 - Improve the visual style of location bar results

• • bug 634139 - Need the ability to extract the most representative color from a favicon
• bug 768703 - Use 32x32 favicons in location bar results
  • bug 751712 - Add support for HTML5 sizes attribute in <link rel=icon>
• bug 675818 - Add delete button to awesome bar result matches (May postpone because of bug 767254.
• [DONE] bug 583683 - Show all awesomebar results without scrolling

|Feature landing criteria=` }}

Feature details

Priority	P2
Rank	999
Theme / Goal	Experience
Roadmap	User Experience
Secondary roadmap	`
Feature list	Desktop
Project	`
Engineering team	Desktop front-end

{{#set:Feature priority=P2

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

Team status notes

	status	notes
Products	`	`
Engineering	`	`
Security	sec-review-unnecessary	`
Privacy	`	`
Localization	`	`
Accessibility	`	`
Quality assurance	`	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-unnecessary |Feature security health=OK |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=Test Plan |Feature ux status=` |Feature ux notes=` |Feature product marketing status=` |Feature product marketing notes=` |Feature operations status=` |Feature operations notes=` }}