Closed Bug 1481289 Opened 4 years ago Closed 4 years ago

URL bar autoplay icon in Firefox is misaligned

Categories

(Firefox :: Site Identity, defect, P2)

63 Branch
defect

Tracking

()

RESOLVED FIXED
Firefox 63
Tracking Status
firefox63 --- fixed

People

(Reporter: srht, 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: 4 years ago
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.
You need to log in before you can comment on or make changes to this bug.