1190192 - Speaker shifts when clicking tab mute icon

Status: RESOLVED DUPLICATE of bug 1192568

(Firefox :: Theme, defect)

Description

[Markus Stange [:mstange]]

Attachment: superimposed screenshots

When toggling the tab audio icon, the speaker part of the icon shifts horizontally.

I'm seeing this on Mac OS 10.10 HiDPI.

Comment 1

[(no longer active)]

I there an easy way to test this?  I can't really see this very well no matter how much I squint.  :-)

Comment 2

[Markus Stange [:mstange]]

Zoom in on your screen using Option + mousewheel maybe? (If that doesn't work, you can change the setting in System Preferences -> Accessibility -> Zoom)
If you have the Pixie app (I think it's installed by XCode?), that might also help.

Do you see what I mean in my screenshot?

Comment 3

[Jared Wein [:jaws] (please needinfo? me)]

I think this bug should be fixed by adjusting the SVG to have the same positioning of the speaker relative to the two graphics.

Comment 4

[Stephen Horlander [:shorlander]]

(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #3)
> I think this bug should be fixed by adjusting the SVG to have the same
> positioning of the speaker relative to the two graphics.

Yes. Just need to tweak the icon I think.

Comment 5

[Stephen Horlander [:shorlander]]

I can take this if you don't mind Ehsan?

Comment 6

[Ryan Feeley [:rfeeley]]

Attachment: record-mute.gif

Animatitated for your viewing pleasure.

Comment 7

[(no longer active)]

(In reply to Stephen Horlander [:shorlander] from comment #5)
> I can take this if you don't mind Ehsan?

Please do, thanks!

Comment 8

[Stephen Horlander [:shorlander]]

Attachment: tab-audio.svg

Made a lot of changes to the icon to fix this and bug 1190103 and maybe bug 1191437.

- Removed the fancy SVG construction with <use> and clipPaths and masks and converted everything to a path
- Renamed the "dark" icons to white to indicate how they are actually different in appearance
- Added an outline to the white icons so they would work in more situations
- Added an icon we can use for background tabs on Linux using the -moz-MenuBarText keyword

If this doesn't fix bug 1191437 will probably need to make it a sprite. Would make more sense to split the icons into multiple files in that case I think.

Comment 9

[Stephen Horlander [:shorlander]]

Forgot to mention the part that applies to this bug: Fixed the alignment between the muted/unmuted speaker

Comment 10

[Stephen Horlander [:shorlander]]

Attachment: tab-audio-small.svg

Same as the other one for the most part except I simplified this more by removing all of the icon states. I think we cover the state affordance with the background circle.

Also no -moz-MenuBarText variation because the dark and white and version should work in almost all cases.

Comment 11

[Stephen Horlander [:shorlander]]

All of the large icons: http://cl.ly/image/1P3F2y262v3j
All of the small icons: http://cl.ly/image/2h2E1I411f31

Comment 12

[(no longer active)]

Thanks!

Comment 13

[(no longer active)]

How should I use these icons?  It seems that without <use> elements, styles such as |list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio")| do not work.

Comment 14

[Jared Wein [:jaws] (please needinfo? me)]

Those should all work without the <use>. The hash fragment points to the ID of the <g> within the SVG file, or so I understand it to.

Comment 15

[(no longer active)]

Oh yes, looks like I had made a mistake...

Comment 16

[(no longer active)]

This is fixed by the new icons.