1330681 - Play tab indicator has no hover state in pinned tabs

Status: VERIFIED FIXED

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

Description

[Simona Badau, Desktop QA]

Attachment: Hover on Nightly pinned tabs in high contrast mode

[Affected versions]:
- Nightly 53.0a1 (Build ID: 20170112030301)
- Aurora 52.0a2 (Build ID: 20170112030301)

[Affected platforms]:
- Windows 10 x64, Ubuntu 16.04, Mac OS X 10.11

[Steps to reproduce]:
1. Navigate to YouTube
2. Open some videos in the background
3. Pin the tabs with the blocked media
4. Hover your mouse over the Play Tab indicator

[Expected result]:
- The Play Tab indicator should have a hover state (just as the Sound indicator does)

[Actual result]:
- Play Tab indicator has no hover state.
Please see the attached screen casts.

[Additional notes]:
On Windows:
- the issue is not reproducible on the latest Nightly on a normal theme but is reproducible in High contrast mode

Comment 2

[Alastor Wu [:alwu]]

Hi, Simona,
Could you tell me how to enable the high contrast mode?
Thanks.

Comment 3

[Alastor Wu [:alwu]]

Attachment: play_tab_icon

Hi, Jared,
Do you have any idea about this issue?
We checked the original SVG file and it's transparent inside the circle, so I have no idea why the icon would be filled with all white when background is black.
Thanks!

Comment 4

[Simona Badau, Desktop QA]

(In reply to Alastor Wu [:alwu] from comment #2)
> Hi, Simona,
> Could you tell me how to enable the high contrast mode?
> Thanks.

To enable a High Contrast theme on Windows: go to Personalise> Themes> Theme Settings and activate a High Contrast Theme.

Comment 5

[Alastor Wu [:alwu]]

(In reply to Simona B [:simonab ] from comment #4)
> To enable a High Contrast theme on Windows: go to Personalise> Themes> Theme
> Settings and activate a High Contrast Theme.

Where you find the "Personalise" option? I can't find that in the "about:preferences".
Thanks.

Comment 6

[Simona Badau, Desktop QA]

Attachment: Hover on Ubuntu 16.04

(In reply to Simona B [:simonab ] from comment #1)
> Created attachment 8826211 [details]
> Hover on Ubuntu 16.04

I'm attaching the screen cast with the Play Tab icon on Ubuntu 16.04 once more - since it appears corrupt on the first try.

Comment 7

[Simona Badau, Desktop QA]

(In reply to Alastor Wu [:alwu] from comment #5)
> (In reply to Simona B [:simonab ] from comment #4)
> > To enable a High Contrast theme on Windows: go to Personalise> Themes> Theme
> > Settings and activate a High Contrast Theme.
> 
> Where you find the "Personalise" option? I can't find that in the
> "about:preferences".
> Thanks.

Right click on your Desktop and from the context menu select Personalize.

Comment 8

[Rachelle Yang [:ryang][[e-mail]]]

Hi Tim, 

looks like the bug is related to front end work.
Is anyone from your team able to help us with this bug ?

Thank you very much !

Comment 9

[Tim Guan-tin Chien [:timdream] (please needinfo)]

Inspecting the background color of the icon with browser toolbox might help:

https://searchfox.org/mozilla-central/source/browser/themes/shared/tabs.inc.css#129

(It would be easier if the owning team can work on this with mentorship from front-end engineering, than asking me to interrupt someone. From Keeping ni until this is addressed.)

Comment 10

[Alastor Wu [:alwu]]

(In reply to Tim Guan-tin Chien [:timdream] (please needinfo) from comment #9)
> Inspecting the background color of the icon with browser toolbox might help:

The problem is the icon was filled with white before applying ".tab-icon-overlay" [1], but the area should be transparent.

If you change the color in [1], you can still see the color changed.

[1] https://goo.gl/QnGupi

Comment 11

[Tim Guan-tin Chien [:timdream] (please needinfo)]

(In reply to Alastor Wu [:alwu] from comment #10)
> [1] https://goo.gl/QnGupi

The CSS rule you are pointing at applies to :hover state. I thought we are trying to figure out why the button has a white background when it's *not* hovered. What did you see from the browser toolbox?

Comment 12

[Tim Guan-tin Chien [:timdream] (please needinfo)]

With some debugging I found that this rule is applied when the window is focused and the tab is not hovered, on Windows 7 in high contrast mode.

http://searchfox.org/mozilla-central/rev/d3307f19d5dac31d7d36fc206b00b686de82eee4/browser/themes/shared/tabs.inc.css#166

`#TabsToolbar[brighttext] .something` always trumps `.something` alone in terms of selector specificity. You can calculate that here: http://specificity.keegan.st/. A `#TabsToolbar:not([brighttext]) .something` selector can achieve the same specificity and it might be the fix you are looking for.

Hope this helps.

Comment 13

[Alastor Wu [:alwu]]

Thanks Tim, I know what's happened.

The problem is we don't have custom icon for the dark theme, and the icon we provided for this situation is wrong. The ideal situation is we should have two icons, one for the normal theme, and one for dark theme.

Now we have one for normal theme, and the other one is also for normal theme, and it's the icon for the hover state. But we don't need the icon for the hover state, because it can be achieved by CSS rule [1]

So we need to customize the new icon for the dark theme.

[1] https://goo.gl/FM3Lx3

Comment 14

[Alastor Wu [:alwu]]

Attachment: Bug 1330681 - add new play-tab icon for the dark theme.

Add custom icon for the dark theme, the content is filled with white and outline is black.

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

Comment 15

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

Comment on attachment 8837402 [details]
Bug 1330681 - add new play-tab icon for the dark theme.

https://reviewboard.mozilla.org/r/112540/#review114524

Comment 16

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/16e523be741a
add new play-tab icon for the dark theme. r=jaws

Comment 17

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/16e523be741a

Comment 18

[Simona Badau, Desktop QA]

Verified as fixed using the latest Nightly 54.0a1 (build ID: 20170221030205) on Windows 10 x64, Ubuntu 16.06 x64 and Mac OS X 10.11 (tested with all the embedded themes from Appearance and on Windows 10 I also tested with a high contrast theme - see Comment 7)