Closed Bug 1329170 Opened 7 years ago Closed 7 years ago

Play Tab indicator looks pixelated in pinned tabs

Categories

(Core :: Audio/Video: Playback, defect, P3)

53 Branch
All
Windows 10
defect

Tracking

()

VERIFIED FIXED
mozilla54
Tracking Status
firefox50 --- unaffected
firefox51 --- unaffected
firefox52 --- unaffected
firefox53 --- unaffected
firefox54 --- verified

People

(Reporter: sbadau, Assigned: alwu)

References

Details

Attachments

(4 files)

Attached image screenshot1.png
Mozilla/5.0 (Windows NT 10.0; WOW64; rv:53.0) Gecko/20100101 Firefox/53.0

[Affected versions]:
Nightly 53.0a1

[Affected platforms]:
- All

[Steps to reproduce]:
1. Launch the latest Nightly
2. Open several videos in different tabs in the background (for e.g from: YouTube, Yahoo music, Tunein)
3. Without focusing the tabs, pin them

[Expected result]:
- The Play Tab icon is properly rendered.

[Actual result]:
- The Play Tab looks pixelated - please see the screen-shot. 

[Regression range]:
- not a regression
Hi, Simona,
Could you provide a better resolution screen shot? In your attachment, all images are pixelated.

In the pinned tab, play tab icon has the white background around the original image, and that image is designed by our UX. So I guess this might not be a bug, just we have different perception about the icon.

Thanks!
Flags: needinfo?(simona.marcu)
Hi Alastor, 

The reason why the images in the previous attachment are pixelated is because that is how the icons look with the resolution that is recommended by the Windows 10 OS. 

Please see a comparison between the Play Tab indicator in a pinned tab when display is set to 100% versus the Play Tab indicator when display is set to 150%.
Flags: needinfo?(simona.marcu)
OS: All → Windows 10
I still don't think it's a bug, because it looks the same as the image UX gave us.

---

Hi, Mark,
How do you think?
Flags: needinfo?(mliang)
(In reply to Alastor Wu [:alwu] from comment #4)
> I still don't think it's a bug, because it looks the same as the image UX
> gave us.
> 
> ---
> 
> Hi, Mark,
> How do you think?

It does look pixelated but I don't think it's the icon's problem. 
Maybe check with more computers with different resolutions and see if this happens.
Flags: needinfo?(mliang)
Flags: needinfo?(jaws)
Priority: -- → P3
I can't reproduce the issue either.

The icon in question is the blocked-autoplay icon, which has a small "play" triangle surrounded by a circle. Once the tab is switched to, the media will begin playing and the icon will hide. If the media contains audio, the icon will be replaced by a speaker icon unless it is muted in which the speaker will have a line through it.

It is possible that the blocked-autoplay icon doesn't work so well at the smaller size that is used for pinned tabs. Mark, do you think we should show the icon differently at this small size?
Flags: needinfo?(jaws) → needinfo?(mliang)
(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #6)
> I can't reproduce the issue either.
> 
> The icon in question is the blocked-autoplay icon, which has a small "play"
> triangle surrounded by a circle. Once the tab is switched to, the media will
> begin playing and the icon will hide. If the media contains audio, the icon
> will be replaced by a speaker icon unless it is muted in which the speaker
> will have a line through it.
> 
> It is possible that the blocked-autoplay icon doesn't work so well at the
> smaller size that is used for pinned tabs. Mark, do you think we should show
> the icon differently at this small size?

I've updated the SVG icon for Alastor, will see if the problem remains after implementing it.
Flags: needinfo?(mliang) → needinfo?(alwu)
Hi, Simona,
Could you help to verify whether this issue can be reproduced after bug1330681 fixed?
Thanks!
Flags: needinfo?(alwu)
Flags: needinfo?(simona.marcu)
(In reply to Alastor Wu [:alwu] from comment #8)
> Hi, Simona,
> Could you help to verify whether this issue can be reproduced after
> bug1330681 fixed?
> Thanks!

I'm still seeing the pixelated Play Tab indicator after the fix from Bug 1330681 (Nightly 54.0a1 - Build ID: 20170220030205).
Flags: needinfo?(simona.marcu)
I still can't reproduce the bug on different platforms (Linux, OSX, Windows)
The icon I saw is correct and didn't look pixelated.

What's your screen resolution?

---

Ensure we're in the same page, the icon in the pinned tab would be overlaid with the website favicon, and the inside of the img is transparent. (Just afraid that you think the transparent part is pixelated.)

Thanks!
Flags: needinfo?(simona.marcu)
(In reply to Alastor Wu [:alwu] from comment #10)
> I still can't reproduce the bug on different platforms (Linux, OSX, Windows)
> The icon I saw is correct and didn't look pixelated.
> 
> What's your screen resolution?

Alastor,

I'm also not seeing this on Ubuntu and Mac OS X. I'm only seeing this on Windows(tried on Windows 7 and on Windows 10). 

The resolution of my Windows 10 machine is set to: 1920 X 1080 (Recommended).

The size of text, apps and other items is again the recommended one: 100%. If I modify it to 150% I'm also not seeing any issue.


> ---
> 
> Ensure we're in the same page, the icon in the pinned tab would be overlaid
> with the website favicon, and the inside of the img is transparent. (Just
> afraid that you think the transparent part is pixelated.)
> 
> Thanks!

It's not the inside of the icon that looks pixelated but rather the margins of the play tab indicator (the merge between the black and white contour). Just a note, this is not such of a big issue, only an aesthetic one.
Flags: needinfo?(simona.marcu)
After more survey, we found that it might be display screen problem. 
We check two Windows computers with the same display resolution, we saw this issue on one computer, but not in another one which has better screen. In addition, this issue would more likely happen on the wide screen.

Because this icon is more complex than the mute/unmute icon, so we can aware more visual uncoordinated. Mark would try to modify the icon, to see whether we can reduce this uncoordinated feeling.
Assignee: nobody → alwu
Status: NEW → ASSIGNED
Comment on attachment 8840344 [details]
Bug 1329170 - use a less detailed blocked-media graphic for pinned tabs to prevent artifacts on some screens.

https://reviewboard.mozilla.org/r/114846/#review116800

Please change the commit message to describe why this change is happening. For example, "Bug 1329170 - Use a less detailed blocked-media graphic for pinned tabs to prevent artifacts on some screens. r=jaws"
Attachment #8840344 - Flags: review?(jaws) → review+
Pushed by alwu@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/223f83da5e78
use a less detailed blocked-media graphic for pinned tabs to prevent artifacts on some screens. r=jaws
https://hg.mozilla.org/mozilla-central/rev/223f83da5e78
Status: ASSIGNED → RESOLVED
Closed: 7 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla54
The feature would be enable on FF54.
The aspect of the icon improved. Considering this as fixed. Verified on Windows 10 x64 and  Windows 7 using the latest Nightly 54.0a1 (Build ID: 20170301030202).
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.