1929345 - Remove border and reverse icon/background colors for mute, soundplaying, activemedia-blocked buttons to improve readability

Status: VERIFIED FIXED

(Firefox :: Tabbed Browser, task)

Description

[Kelly Cochrane [:kcochrane]]

There's been feedback in 132 reddit/connect threads that the mute button is hard to distinguish on hover (for both vertical and horizonal tabs). Yulia is requesting an icon change for a thicker stroke for the mute button to be implemented in bug 1928482, but we want to go ahead and remove the borders and adjust the colors for now so we don't need to rush the new icon.

Comment 1

[Kelly Cochrane [:kcochrane]]

Attachment: Bug 1929345 - Remove border and reverse icon and background colors for mute, soundplaying, activemedia-blocked buttons to improve readability

Comment 2

[Kelly Cochrane [:kcochrane]]

Comment on attachment 9435528 [details]
Bug 1929345 - Remove border and reverse icon and background colors for mute, soundplaying, activemedia-blocked buttons to improve readability

Beta/Release Uplift Approval Request

• User impact if declined/Reason for urgency: Readability of mute/soundplaying icons will be reduced
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: Check that mute/soundplaying/activemedia-blocked tab indicators now are black icons on a white background in dark themes and white icons on a black background in light themes and that the indicator's border has been removed.
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Small CSS change
• String changes made/needed:
• Is Android affected?: No

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/mozilla-central/rev/4ff27d4c5c11
Remove border and reverse icon and background colors for mute, soundplaying, activemedia-blocked buttons to improve readability r=desktop-theme-reviewers,sidebar-reviewers,jsudiaman,dao

Comment 4

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/4ff27d4c5c11

Comment 5

[Alexandru Trif, Desktop Test Engineering [:atrif]]

Hello! I looked over this today with Firefox 134.0a1 (2024-11-06) on Windows 10x64, macOS 12 and Ubuntu 24 and I can confirm that:

• mute/soundplaying/activemedia-blocked tab indicators have black icons on a white background with dark theme and the indicator's border has been removed with horizontal/ vertical tabs
• mute/soundplaying/activemedia-blocked tab indicators have white icons on a black background with light theme and the indicator's border has been removed with horizontal/ vertical tabs

However, the tab indicators with horizontal tabs are barely visible while hovered. Is this expected or should we reopen this issue or file a new one?

Comment 6

[Alexandru Trif, Desktop Test Engineering [:atrif]]

Attachment: tab_indicator.mkv

However, the tab indicators with horizontal tabs are barely visible while hovered. Is this expected or should we reopen this issue or file a new one?

Attaching a screen recording for comment 5. Sorry for the double comment.

Comment 7

[Sarah Clements [:sclements]]

Attachment: tab indicator on hover.mov

Comment 8

[Sarah Clements [:sclements]]

(In reply to Alexandru Trif, Desktop Test Engineering [:atrif] from comment #6)

Created attachment 9435786 [details]
tab_indicator.mkv

However, the tab indicators with horizontal tabs are barely visible while hovered. Is this expected or should we reopen this issue or file a new one?

Attaching a screen recording for comment 5. Sorry for the double comment.

I wasn't able to open that but I can see the issue and attached a video clip. I'll talk to UX about this and report back here - thanks for catching this.

Comment 9

[Sarah Clements [:sclements]]

We're going to make some really small changes to the hover before uplifting - patch will be up soon.

Comment 10

[Sarah Clements [:sclements]]

Attachment: Screenshot 2024-11-06 at 1.58.00 pm.png

Light theme with new opacity change on hover and hover:active

Comment 11

[Sarah Clements [:sclements]]

Attachment: Bug 1929345 - Update sound specific hover states on horizontal tabs to improve readability r=#sidebar-reviewers

• Needed to account for the reverse icon/background colors made in this same bug

Comment 12

[Kelly Cochrane [:kcochrane]]

Comment on attachment 9435528 [details]
Bug 1929345 - Remove border and reverse icon and background colors for mute, soundplaying, activemedia-blocked buttons to improve readability

Beta/Release Uplift Approval Request

• User impact if declined/Reason for urgency: Readability of mute/soundplaying icons will be reduced
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: Check that mute/soundplaying/activemedia-blocked tab indicators now are black icons on a white background in dark themes and white icons on a black background in light themes and that the indicator's border has been removed.
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Small CSS change
• String changes made/needed:
• Is Android affected?: No

Comment 13

[Kelly Cochrane [:kcochrane]]

Comment on attachment 9436131 [details]
Bug 1929345 - Update sound specific hover states on horizontal tabs to improve readability r=#sidebar-reviewers

Beta/Release Uplift Approval Request

• User impact if declined/Reason for urgency: Updated soundplaying/mute styles will have low-contrast hover styles when in horizontal tabs mode
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: Mute a non-pinned horizontal tab, and hover over the favicon to see the mute icon. Ensure the transparent has more visibility/contrast than before the change.
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Small css change
• String changes made/needed:
• Is Android affected?: No

Comment 14

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/2ad8ea9acc12
Update sound specific hover states on horizontal tabs to improve readability r=sidebar-reviewers,desktop-theme-reviewers,kcochrane,mconley

Comment 15

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/2ad8ea9acc12

Comment 16

[Donal Meehan [:dmeehan]]

Comment on attachment 9435528 [details]
Bug 1929345 - Remove border and reverse icon and background colors for mute, soundplaying, activemedia-blocked buttons to improve readability

Approved for 133.0b6

Comment 17

[Donal Meehan [:dmeehan]]

Comment on attachment 9436131 [details]
Bug 1929345 - Update sound specific hover states on horizontal tabs to improve readability r=#sidebar-reviewers

Approved for 133.0b6

Comment 18

[Pulsebot]

https://hg.mozilla.org/releases/mozilla-beta/rev/6fb9dfafe7eb
https://hg.mozilla.org/releases/mozilla-beta/rev/36201b843b28

Comment 19

[Alexandru Trif, Desktop Test Engineering [:atrif]]

Attachment: image.png

Hello! The issue is verified fixed with Firefox 134.0a1 (2024-11-07) and 133.0b6 from comment 18 on Windows 10x64, Ubuntu 24 and macOS 12. Verified that:

• mute/soundplaying/activemedia-blocked tab indicators have black icons on a white background with dark theme and the indicator's border has been removed with horizontal/ vertical tabs as stated in comment 12
• mute/soundplaying/activemedia-blocked tab indicators have white icons on a black background with light theme and the indicator's border has been removed with horizontal/ vertical tabs as stated in comment 12
• mute/soundplaying/activemedia-blocked tab indicators have more contrast than before while hovered as stated in comment 13. Attached a screenshot.