Closed Bug 1481289 Opened Last year Closed Last year

URL bar autoplay icon in Firefox is misaligned

Categories

(Firefox :: Site Identity and Permission Panels, defect, P2)

63 Branch
defect

Tracking

()

RESOLVED FIXED
Firefox 63
Tracking Status
firefox63 --- fixed

People

(Reporter: vrywjvgviuotxeioqipx, Assigned: daleharvey)

References

Details

Attachments

(6 files, 2 obsolete files)

Attached image 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.
Blocks: 1461656
Component: Untriaged → Site Identity and Permission Panels
Flags: needinfo?(alwu)
Status: UNCONFIRMED → NEW
Ever confirmed: true
Assignee: nobody → dharvey
Flags: needinfo?(alwu)
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
Priority: -- → P2
The area is 16x16 for both icons, Bryant do we want to change the svg to match the height here?
Flags: needinfo?(bmao)
Attached image 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.
Flags: needinfo?(bmao)
Attached image Autoplay Block_thick.svg (obsolete) —
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.
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
Flags: needinfo?(bmao)
Weird, does the icon for the dark theme also have the same issue?
(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?
yup, let me attach it here.
Attachment #8998462 - Attachment is obsolete: true
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
Flags: needinfo?(bmao)
Attachment #8999264 - Flags: review?(dao+bmo)
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?
Attachment #8999264 - Flags: review?(dao+bmo) → review+
(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.
Further optimised
Attachment #8999264 - Attachment is obsolete: true
Attachment #8999374 - Flags: review+
Pushed by dharvey@mozilla.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/a8c600b76180
Update autoplay media blocked icon. r=dao
https://hg.mozilla.org/mozilla-central/rev/a8c600b76180
Status: NEW → RESOLVED
Closed: Last year
Resolution: --- → FIXED
Target Milestone: --- → Firefox 63
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)
Flags: needinfo?(dharvey)
Thats the designers decision, I just did the code
Flags: needinfo?(dharvey)
How to reach out to thee designers?
Bryant Mao is the designer for this feature and provided the icon ^
Flags: needinfo?(bmao)
Blocks: 1483513
(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'.
Flags: needinfo?(bmao)
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.
I attached the updated icons Bryan Bell provided, should align with other disabled permission icons now.
QA Whiteboard: [good first verify]
You need to log in before you can comment on or make changes to this bug.