1481289 - URL bar autoplay icon in Firefox is misaligned

Status: RESOLVED FIXED

(Firefox :: Site Identity, defect, P2)

Description

[Anders]

Attachment: offcenter.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:63.0) Gecko/20100101 Firefox/63.0
Build ID: 20180806100140

Steps to reproduce:

Go to https://www.twitch.tv/


Actual results:

The autoplay icon appears in the URL bar, but it's taller than both the information and security icons.


Expected results:

The autoplay icon should be the same size as the information and security icons.

Comment 1

[ExE Boss]

This might be intentional for the same reason why Google’s G in their logo is not a perfect circle.

- https://digitalsynopsis.com/design/google-logo-geometry/
- https://www.youtube.com/watch?v=hV8hOLOC_Hk

Comment 2

[Dale Harvey (:daleharvey)]

The area is 16x16 for both icons, Bryant do we want to change the svg to match the height here?

Comment 3

[Bryant Mao [:bryantmao]]

Attachment: Autoplay Block.svg

Hey Dale, please replace with it the attached icon and see if that works. Let me know if other icons also have the same issue.

Comment 4

[Bryant Mao [:bryantmao]]

Attachment: Autoplay Block_thick.svg

Hey Dale, can you try with the thick one since I found most of the permission icons are made of 2 pixels wide outline. Also, the autoplay icon should top aligned with the info icon but exceed 1 pixel in the bottom, which consistent with other permission icons in Firefox like location disabled and popup blocked.

Comment 5

[Dale Harvey (:daleharvey)]

Hey Bryant

That icon is still aligned to the top (https://i.imgur.com/6d2alzH.png) As you can see the other icons only touch that space with the 'ascenders' so must have to leave a gap there

Comment 6

[Bryant Mao [:bryantmao]]

Weird, does the icon for the dark theme also have the same issue?

Comment 7

[Bryant Mao [:bryantmao]]

Try this one and see if that works https://send.firefox.com/download/29bd2311a0/#3KIIGyQO-pn42_tIN3tF7Q

Comment 8

[ExE Boss]

(In reply to Bryant Mao [:bryantmao] from comment #7)
> Try this one and see if that works
> https://send.firefox.com/download/29bd2311a0/#3KIIGyQO-pn42_tIN3tF7Q

It says the link is expired for me.

Can you instead add it as a Bugzilla attachment, so that it doesn’t randomly expire?

Comment 9

[Bryant Mao [:bryantmao]]

Attachment: Autoplay Block_thick.svg

yup, let me attach it here.

Comment 10

[Dale Harvey (:daleharvey)]

Attachment: 0001-Bug-1481289-Update-autoplay-media-blocked-icon.-r-jo.patch

Optimised the svg with https://jakearchibald.github.io/svgomg/, checked in dark mode, this icon aligns with the rest of the url bar icons much better.

Dao could you check this, simple patch and I dont want to keep sending Johann all my patches, cheers

Comment 11

[Dão Gottwald [::dao]]

Comment on attachment 8999264 [details] [diff] [review]
0001-Bug-1481289-Update-autoplay-media-blocked-icon.-r-jo.patch

The anchor icon used when the autoplay permission is requested looks too small too. Can you file a followup on that?

Comment 12

[Dão Gottwald [::dao]]

(In reply to Dale Harvey (:daleharvey) from comment #10)
> Created attachment 8999264 [details] [diff] [review]
> 0001-Bug-1481289-Update-autoplay-media-blocked-icon.-r-jo.patch
> 
> Optimised the svg with https://jakearchibald.github.io/svgomg/

FWIW, there's more room for optimization. Your path coordinates seem to contain a lot of increasingly pointless decimal places.

Comment 13

[Dale Harvey (:daleharvey)]

Attachment: 0001-Bug-1481289-Update-autoplay-media-blocked-icon.-r-da.patch

Further optimised

Comment 14

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/a8c600b76180
Update autoplay media blocked icon. r=dao

Comment 15

[Cosmin Sabou [:CosminS]]

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

Comment 16

[Jens Hausdorf :jens1o [ni? me]]

Why is this icon different from the other icons? 

Other icons simply have a line in them when something is deactivated/disallowed, see: https://design.firefox.com/icons/viewer/ (the permission category in particular)

Comment 17

[Dale Harvey (:daleharvey)]

Thats the designers decision, I just did the code

Comment 18

[Jens Hausdorf :jens1o [ni? me]]

How to reach out to thee designers?

Comment 19

[Dale Harvey (:daleharvey)]

Bryant Mao is the designer for this feature and provided the icon ^

Comment 20

[Bryant Mao [:bryantmao]]

(In reply to Jens Hausdorf from comment #16)
> Why is this icon different from the other icons? 
> 
> Other icons simply have a line in them when something is
> deactivated/disallowed, see: https://design.firefox.com/icons/viewer/ (the
> permission category in particular)

The rationale behind is that autoplay, unlike most of the other permissions, is more like a prompt request rather than an ask for accessing personal data (like locale or camera). When I check the permission icons https://design.firefox.com/icons/viewer/#permission, the one I found most similar to is the 'popup block' icon. That's why I use the stop sign instead of a cross line for 'autoplay block'.

Comment 21

[Bryant Mao [:bryantmao]]

I've brought the discussion with the design owner of the Photon icons. We will evaluate wether we should align all the disabled permission icons with the same slash style.

Comment 22

[Mark Liang(:mark_liang)]

Attachment: update autoplay icon

Comment 23

[Mark Liang(:mark_liang)]

Attachment: update autoplay blocked icon

Comment 24

[Mark Liang(:mark_liang)]

I attached the updated icons Bryan Bell provided, should align with other disabled permission icons now.