1691993 - Replace address bar icons with the final version

Status: RESOLVED FIXED

(Firefox :: Address Bar, task, P1)

Description

[Marco Bonardo [:mak]]

In case we don't have all the icons during work, we may have to replace placeholders with finalized ones. This is just a placeholder bug to ensure we account for that work.

Comment 1

[Marco Bonardo [:mak]]

From the spec I see these icons we'll have to replace, at a minimum:
tracking protection shield, lock, search settings, permissions.
I see there's also a shield animation in https://searchfox.org/mozilla-central/source/browser/themes/shared/identity-block, replacing the shield will require to replace the animation.
I can't understand if the star and the magnifier are different, they look thinner?

Comment 2

[Romain Testard [:RT]]

Marking as P1. Per experience review we agreed to mark as P1 bug the ones that will block MR1.

Comment 3

[Mike Conley (:mconley) (:⚙️) (PTO: May 27-31)]

Note that the lock and search-glass are being updated in bug 1702289.

Comment 4

[Mike Conley (:mconley) (:⚙️) (PTO: May 27-31)]

Permissions icons are being updated in bug 1702837, and bug 1691537 is for the search settings icons.

I'm not sure if the shield icon is being tracked anywhere else. If not, maybe we can turn this bug into that.

Comment 6

[Harry Twyford]

Specific callouts on icons that aren't included in bug 1702289 (not exhaustive):

• Shield icon
• Bookmarks star
• bookmark-12.svg (A bookmarks star with a more compact design, optimized to be shown at a smaller 12px size)
• pin-12.svg (Used for pinned Top Sites in the address bar)
• Search settings icon, but we have bug 1691537 for that

Comment 7

[Sam Foster [:sfoster] (he/him)]

We have a https://docs.google.com/document/d/114gLvaDoZpYnhtK_pPGgbMizphBbjrKp23_YHmWHHLE which provides links to where to find the new icon assets, suggested procedure and tracking spreadsheet for icon updates.

The shield icon is being tracked in bug 1704152 as it needs to land at the same time as the updated animation.

Comment 8

[Sam Foster [:sfoster] (he/him)]

I think a patch to fix this bug needs to update:

• bookmark star (hollow, fill, 12px)
• pin-12

(edited to remove sidebars icon, getting my bugs mixed up)

Comment 9

[Sam Foster [:sfoster] (he/him)]

Attachment: Bug 1691993 - Update addressbar badge icons: pin, bookmarks, tab. r?harry

Comment 10

[katieC]

Attachment: Badges - layered SVG files - UX mini spec

Attaching a mini ux spec for how badges are handled for some icons. Badges are 12px icons that are layered over a 16px icon.

There are 6 types of badges (currently)
• Notification badge - blue dot
• Update badge - green circle with up arrow
• Warning badge - yellow triangle with exclamation mark
• Pin badge
• Bookmark badge
• Tab badge

Each badge has 2 fills/layers in the SVG.

Please reference Figma specs and or ping me or the UX team with any questions. Thanks!

Comment 11

[Sam Foster [:sfoster] (he/him)]

In the icon svg files, primary fill color corresponds to context-fill, outline fill is context-stroke, which in turn are the fill and stroke CSS properties.

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/c7177487365d
Update addressbar badge icons: pin, bookmarks, tab. r=harry

Comment 13

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/c7177487365d