1921060 - Implement the full mute button spec

Status: RESOLVED FIXED

(Firefox :: Sidebar, enhancement)

Description

[Stuart Colville [:muffinresearch]]

Figma Spec is here: https://www.figma.com/design/ZFavpnAJee39j2mFf8U3D0/Sidebar-UX-Spec?node-id=8540-238885&t=D1XuAcZ2YFEHFuxk-4

Comment 2

[Sarah Clements [:sclements]]

Yulia has updated the spec (which was shared with Dao and Anna with any feedback incorporated already). We have new assets which can be found here.

Comment 3

[Kelly Cochrane [:kcochrane]]

The a11y team (ayeddi specifically) has said we should keeping the inline audio/mute button not focusable (enduring it is included in the context menu for the tab and is a labeled button, as Close button is), because the muscle memory + efficiency of keyboard navigation + making it separately focusable would require some form of complex KB nav pattern that I am not sure we need to introduce here.
That’s being said, since playing audio may be annoying for any user, mouse users would be able to hover a Mute button without activating the tab (AFAIK), but we need to make sure the Mute button is (1) a programmatically button and (2) is labeled, so a screen reader user could use the screen-reader-provided shortcuts to find this button and activate it + voice control users would be able to call “Click Mute tab” or similar and have it muzzled. Similarly to the Close button for a tab

Comment 4

[Kelly Cochrane [:kcochrane]]

Attachment: Bug 1921060 - Implement full mute button spec

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5b573c874645
Implement full mute button spec r=desktop-theme-reviewers,tabbrowser-reviewers,dao,sessionstore-reviewers,sclements

Comment 6

[amarc]

Backed out for causing mda failures @ browser_mute_webAudio.js

• Backout link
• Push with failures
• Failure Log
• Failure line:

TEST-UNEXPECTED-FAIL | browser/components/tabbrowser/test/browser/tabMediaIndicator/browser_mute_webAudio.js | Test timed out -

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/a2a3d6bf518f
Implement full mute button spec r=desktop-theme-reviewers,tabbrowser-reviewers,dao,sessionstore-reviewers,sclements

Comment 8

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/a2a3d6bf518f

Comment 9

[Dão Gottwald [:dao]]

This caused a number of regression, some of which seem fairly serious. Do you have a good handle on or plan for most of these? Are you confident enough that they can be addressed in the current cycle (i.e. ideally before January 2, the soft code freeze for 135)? Should we consider backing this out and relanding later with the known issues addressed, to take away some of the pressure?

Comment 10

[Kelly Cochrane [:kcochrane]]

Bug 1936985 and bug 1937573 are already in review. The only one that seems like it might be tough to figure out is bug 1936985 given we currently have no way to determine from the stylesheets when a tab has reached min-width, but perhaps we can find a short-term workaround for this and file a follow-up to address that?

I'm working on bug 1937534 now. I think we just need to add back the old svg that had the circle built-in.

I've just left a comment on bug 1937268 to say that this will somewhat be improved when bug 1936985 lands as we're decreasing inline-margin around the audio button there, but we're not going to have as much as the tab title visible when a user has many tabs open and the audio button is present, that's just the nature of this new design requested by UX.

So as far as I can tell, that's just 3 bugs that are open and 2/3 are in review.

Comment 11

[Dão Gottwald [:dao]]

Still seems like a bit much to me, given that even those in review aren't necessarily close to the finish line. Reviews will be slower too, given bank holidays in various countries, plus I expect many folks will take some extra time off. I think I'll be available for 3, maximum 4 days. :/

Comment 12

[Kelly Cochrane [:kcochrane]]

Discussing with the team if we think it's necessary to revert changes for this.

Comment 13

[Kelly Cochrane [:kcochrane]]

After discussing with Product/UX/Engineering, we've decided it'd be best to back out these changes for now until we have more people around to discuss fixes for the regressions after the holidays.

Comment 14

[Serban Stanca [:SerbanS]]

Backed out as requested for causing multiple regressions.

• Backout link

Comment 15

[Serban Stanca [:SerbanS]]

Backout merged to central: https://hg.mozilla.org/mozilla-central/rev/7e1ede96105189f4b4815ed47379535b4c909c3f.

Comment 16

[Kelly Cochrane [:kcochrane]]

Attachment: WIP: Bug 1921060 - Implement full mute button spec

Comment 17

[Alex Finder]

(In reply to Pulsebot from comment #7)

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/a2a3d6bf518f
Implement full mute button spec
r=desktop-theme-reviewers,tabbrowser-reviewers,dao,sessionstore-reviewers,
sclements

Perfherder has detected a awsy performance change from push a2a3d6bf518f49b2d6cda74bbac02ce48f074a9b.

Improvements:

Ratio	Test	Platform	Options	Absolute values (old vs new)
3%	Images Tabs closed [+30s, forced GC]	windows11-64-2009-shippable-qr	fission tp6	1,682,193.33 -> 1,630,880.00

Details of the alert can be found in the alert summary, including links to graphs and comparisons for each of the affected tests.

If you need the profiling jobs you can trigger them yourself from treeherder job view or ask a sheriff to do that for you.

You can run these tests on try with ./mach try perf --alert 43246

For more information on performance sheriffing please see our FAQ.

Comment 18

[Alex Finder]

(In reply to Pulsebot from comment #7)

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/a2a3d6bf518f
Implement full mute button spec
r=desktop-theme-reviewers,tabbrowser-reviewers,dao,sessionstore-reviewers,
sclements

Perfherder has detected a awsy performance change from push e75215ee1dbf77b9f31e2627215a83dbc4e17137.

Regressions:

Ratio	Test	Platform	Options	Absolute values (old vs new)
3%	Images Tabs closed [+30s, forced GC]	windows11-64-2009-shippable-qr	fission tp6	1,630,515.33 -> 1,681,829.33

As author of one of the patches included in that push, we need your help to address this regression.
Details of the alert can be found in the alert summary, including links to graphs and comparisons for each of the affected tests. Please follow our guide to handling regression bugs and let us know your plans within 3 business days, or the patch(es) may be backed out in accordance with our regression policy.

If you need the profiling jobs you can trigger them yourself from treeherder job view or ask a sheriff to do that for you.

You can run these tests on try with ./mach try perf --alert 43247

For more information on performance sheriffing please see our FAQ.

Comment 19

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d448ac7b0d9e
Implement full mute button spec r=desktop-theme-reviewers,tabbrowser-reviewers,dao,sessionstore-reviewers,sclements,sidebar-reviewers,fluent-reviewers,bolsson

Comment 20

[Serban Stanca [:SerbanS]]

Backed out for causing mochitests failures in browser_audioTabIcon.js.

• Backout link
• Push with failures
• Failure Log
• Failure line: TEST-UNEXPECTED-FAIL | browser/components/tabbrowser/test/browser/tabs/browser_audioTabIcon.js | Test timed out -

Please also check these mochitests failures.

• Failure Log

L.E. There are also these mochitests failiures.

• Failure Log

Comment 21

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/2821188eb89d
Implement full mute button spec r=desktop-theme-reviewers,tabbrowser-reviewers,dao,sessionstore-reviewers,sclements,sidebar-reviewers,fluent-reviewers,bolsson

Comment 22

[amarc]

Backed out for causing bc failures @ browser_multiselect_tabs_play.js

• Backout link
• Push with failures
• Failure Log
• Failure line:

TEST-UNEXPECTED-FAIL | browser/components/tabbrowser/test/browser/tabs/browser_multiselect_tabs_play.js | Test timed out -

Bc failures @ browser_parsable_css.js

• Failure Log
• Failure line:

TEST-UNEXPECTED-FAIL | browser/base/content/test/static/browser_parsable_css.js | Got error message for chrome://browser/skin/tabbrowser/tabs.css: Error in parsing value for ‘background-image’.  Declaration dropped. -

Comment 23

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/34f28da9e8d5
Implement full mute button spec r=desktop-theme-reviewers,tabbrowser-reviewers,dao,sessionstore-reviewers,sclements,sidebar-reviewers,fluent-reviewers,bolsson

Comment 24

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/34f28da9e8d5