Closed Bug 1593825 Opened 1 year ago Closed 1 year ago

Implement badged favicons

Categories

(Firefox :: Address Bar, task, P1)

task
Points:
5

Tracking

()

RESOLVED FIXED
Firefox 72
Iteration:
72.3 - Nov 18 - Dec 1
Tracking Status
firefox72 --- fixed

People

(Reporter: mak, Assigned: harry)

References

(Blocks 1 open bug, )

Details

Attachments

(4 files, 1 obsolete file)

Instead of star/tab search icons in front of the results, for the megabar we want to implement badged favicons, according to the spec.

Marking blocked-ux since we're going to use pre-made badge icons instead of drawing the blue circles in CSS. We need the new icons from UX before proceeding.

Assignee: nobody → htwyford
Iteration: --- → 72.2 - Nov 4 - 17

(In reply to Harry Twyford [:harry] from comment #1)

Marking blocked-ux since we're going to use pre-made badge icons instead of drawing the blue circles in CSS.

Why? We can draw perfect circles with CSS, plus we have scalable tab and bookmark icons that we could reuse here unless they don't scale nicely to this small size.

Flags: needinfo?(htwyford)

(In reply to Dão Gottwald [::dao] from comment #2)

Why? We can draw perfect circles with CSS, plus we have scalable tab and bookmark icons that we could reuse here unless they don't scale nicely to this small size.

That's the thought indeed... my experience is - generally - that scaling vector icons up is no trouble at all, but when scaling them down they tend to need different shapes to get the same visual expression. This became clear to me right away when looking at the swith-to-tab icon. They might also be considered to not match the Photon tab style currently (since the icon shows a curvy tab).

Drawing the circle with CSS seems like the right plan, because you can work with different contrast modes easier that way, since we generally work with only one fill-color for icons.

Why?

I recall a meeting last week where we decided to use pre-made icons instead of CSS circles because we'd need new icons for the small size anyways, and that way we could save the small bit of computation needed to draw the CSS circle every time.

I'm glad we've settled on CSS circles now though, since they're more flexible like Mike said. I've asked Bryan Bell if the current star and tab icons are suitable for display at the small badge size or if we'll need new icons. I'll needinfo him here for posterity.

Flags: needinfo?(htwyford) → needinfo?(bbell)
Attached image new_badges.png

Bryan and shorlander have asked that we do the badges like this instead.

Flags: needinfo?(bbell)
Attached image dimensions.png (obsolete) —
Status: NEW → ASSIGNED
Keywords: blocked-ux
Attached image dimensions_new.png
Attachment #9108942 - Attachment is obsolete: true
Attached image dark_mode.png

We'll be using slightly different colours in dark mode:

Light mode

Star: Blue-60
Tab: Teal-70
Outline: #fff

Dark mode

Star: Blue-50
Tab: Teal-60
Outline: Grey-70

Iteration: 72.2 - Nov 4 - 17 → 72.3 - Nov 18 - Dec 1
Status: ASSIGNED → RESOLVED
Closed: 1 year ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 72
QA Whiteboard: [qa-72b-p2]
Blocks: 1610037
You need to log in before you can comment on or make changes to this bug.