1376578 - Update on-tab media icon to be consistent with Photon look and feel

Status: VERIFIED FIXED

(Firefox :: Theme, enhancement, P1)

Description

[chsiang]

There are 3 media icons that will appear on a tab when there is media file in it. We should refresh them to be consistent with Photon visual language. 
@mark could you attach the files here?
These are icons for 57 that Mark received from Bryan Bell

Comment 1

[Mark Liang(:mark_liang)]

Attachment: mute icon

Comment 2

[Mark Liang(:mark_liang)]

Attachment: speaker icon

Comment 3

[Mark Liang(:mark_liang)]

Attachment: play icon

Comment 4

[Dale Harvey (:daleharvey)]

Mark or Bryan

Could we get these icons in SVG? currently they are a single svg icon with multiple anchors @ http://searchfox.org/mozilla-central/source/browser/themes/shared/tabbrowser/tab-audio-small.svg

Maintaining that seems best, but at the least it does seem like we should be sticking to svg over png

Comment 5

[Dão Gottwald [:dao]]

(In reply to Dale Harvey (:daleharvey) from comment #4)
> currently they are a single svg icon with multiple anchors [...]
> Maintaining that seems best,

Well, no... see bug 1358998.

Comment 6

[Dale Harvey (:daleharvey)]

ok, so seperate files are best? but we would still prefer svg to png right?

Comment 7

[Tim Nguyen :ntim]

Yep, seperate files are best, and SVG is better than PNG.

Comment 8

[Dale Harvey (:daleharvey)]

Happy with that, so if we could get those assets as svg that would be great

Tim also mentioned on IRC that having noise waves come out of the mute icon is a tad strange, so just to bring it up to make sure thats intentional.

Cheers

Comment 9

[Dale Harvey (:daleharvey)]

And its been mentioned that the icons are svg, I have no idea why I thought they were png, thanks. Will leave the needinfo on for the noise waves thing tho

Comment 10

[Dale Harvey (:daleharvey)]

Attachment: Bug 1376578 - Update tab media icons to photon.

Review commit: https://reviewboard.mozilla.org/r/167566/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/167566/

Comment 11

[Dão Gottwald [:dao]]

Comment on attachment 8896291 [details]
Bug 1376578 - Update tab media icons to photon.

https://reviewboard.mozilla.org/r/167566/#review172752

Cancelling review because of the issue with the muted icon.

::: browser/themes/shared/tabbrowser/tab-audio-blocked.svg:5
(Diff revision 1)
>  <!-- This Source Code Form is subject to the terms of the Mozilla Public
>     - License, v. 2.0. If a copy of the MPL was not distributed with this
>     - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
> -<svg xmlns="http://www.w3.org/2000/svg"
> -     width="16" height="16" viewBox="0 0 16 16">
> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
> +  <g fill="context-fill">

You can just put fill="context-fill" on <svg>. No need for the <g> node.

Comment 12

[Dale Harvey (:daleharvey)]

Mark sorry the needinfo was confusing, it was left on because of 

> Tim also mentioned on IRC that having noise waves come out of 
> the mute icon is a tad strange, so just to bring it up to make 
> sure thats intentional.

Can you confirm that is an intentional change or do we need a new icon here? Cheers

Comment 13

[Mark Liang(:mark_liang)]

(In reply to Dale Harvey (:daleharvey) from comment #12)
> Mark sorry the needinfo was confusing, it was left on because of 
> 
> > Tim also mentioned on IRC that having noise waves come out of 
> > the mute icon is a tad strange, so just to bring it up to make 
> > sure thats intentional.
> 
> Can you confirm that is an intentional change or do we need a new icon here?
> Cheers

Bryan created the icon and I think it's an intentional change.
Probably need to needinfo Bryan.

Thanks.

Comment 14

[Dale Harvey (:daleharvey)]

Hey Bryan

Is having sound waves come out of the mute icon intentional? a few people have mentioned before landing that it seems inconsistent

Thanks
Dale

Comment 15

[bbell]

(In reply to Dale Harvey (:daleharvey) from comment #14)
> Hey Bryan
> 
> Is having sound waves come out of the mute icon intentional? a few people
> have mentioned before landing that it seems inconsistent
> 
> Thanks
> Dale

Hi, Dale. For sure this is different than how it was, but Stephen and I are both comfortable that the sound waves should stay in the muted icon for a couple of reasons.  First is that we have lots of these "disabled" icons in the product and as a rule none change, they only have a slash applied to them. Secondly, removing the sound waves forces the speaker has to the center, and that makes the icon seemingly jump around. Also, it's not as easily identified as "sound." See: example https://cl.ly/0A2V011P3g3B/Image%202017-08-17%20at%2011.06.58%20AM.png

Also, I just noticed this: https://cl.ly/21092J3v2V1Q/mute.png

Comment 16

[Dale Harvey (:daleharvey)]

Comment on attachment 8896291 [details]
Bug 1376578 - Update tab media icons to photon.

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/167566/diff/1-2/

Comment 17

[Dale Harvey (:daleharvey)]

cool sounds good to me

Comment 18

[Dão Gottwald [:dao]]

Comment on attachment 8896291 [details]
Bug 1376578 - Update tab media icons to photon.

https://reviewboard.mozilla.org/r/167566/#review175272

Comment 19

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/1e530bfe92aa
Update tab media icons to photon. r=dao

Comment 20

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/1e530bfe92aa

Comment 21

[Carmen Fat [:cfat] - Ecosystem QA]

I have verified this using latest Nightly 57.0a1 (2017-09-20) on Windows 10 x64, Ubuntu 16.04 x64 and macOS 10.12.
The 3 media icons shown in comment 1, comment 2 and comment 3 are displayed as it follows in the attachament below.
Considering this, I'm marking this issue as Verified Fixed.

Comment 22

[Carmen Fat [:cfat] - Ecosystem QA]

Attachment: sound icons.png