1926973 - Gray out tabs that are explicitly unloaded

Status: RESOLVED FIXED

(Firefox :: Tabbed Browser, enhancement)

Description

[Greg Stoll :gstoll]

This would help visually distinguish them - right now the only way to see if something is unloaded is hovering over a tab and seeing whether there's a visual preview. The Tab Center Redux extension does this.

Comment 1

[Greg Stoll :gstoll]

This is pretty straightforward to do - just need to add a &[pending="true"] nested inside the .tabbrowser-tab section in browser/themes/shared/tabbrowser/tabs.css. But we need a decision from UX on how to style it. I'm also not sure if this can interact with themes or not.

Comment 2

[Greg Stoll :gstoll]

Attachment: Bug 1926973 - make unloaded tabs favicon semi-transparent behind a pref r=#tabbrowser-reviewers!,#desktop-theme-reviewers

Note that this is behind a pref that is turned off right now - I'm
landing this so UX and a11y folks can more easily take a look at it.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/7edbfb66d587
make unloaded tabs favicon semi-transparent behind a pref r=desktop-theme-reviewers,tabbrowser-reviewers,dao

Comment 4

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/7edbfb66d587

Comment 5

[Greg Stoll :gstoll]

Attachment: Bug 1926973 - set unloaded tabs' icons to grayscale in the tab bar r=#tabbrowser-reviewers!,#desktop-theme-reviewers!

We're trying a few different things here behind prefs so UX can easily
experiment with it. When we make a decision I'll remove all prefs but
the one we go with.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/dd078da9123a
set unloaded tabs' icons to grayscale in the tab bar r=tabbrowser-reviewers,desktop-theme-reviewers,dao

Comment 7

[Sandor Molnar[:smolnar]]

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

Comment 8

[Greg Stoll :gstoll]

Attachment: Bug 1926973 - set unloaded tabs' icons to grayscale and semi-transparent behind a pref r=#tabbrowser-reviewers!,#desktop-theme-reviewers!

This has been approved by UX, still needs an a11y review but that will
be easier if this change is in so folks can try it out.

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/89b69f74f44f
set unloaded tabs' icons to grayscale and semi-transparent behind a pref r=tabbrowser-reviewers,desktop-theme-reviewers,dao

Comment 10

[Cristina Horotan [:chorotan]]

https://hg.mozilla.org/mozilla-central/rev/89b69f74f44f

Comment 11

[Greg Stoll :gstoll]

Attachment: Bug 1926973 - make only explicitly unloaded tabs have a grayscale dimmed favicon r=#desktop-theme-reviewers!,#tabbrowser-reviewers!

This is what UX has decided makes sense, and will be much less disruptive
than dimming out all favicons on session restore. When we're ready the
default value of "browser.tabs.fadeOutExplicitlyUnloadedTabs" will be
true, and the default value of "browser.tabs.fadeOutUnloadedTabs" will
remain false.

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/2895d98e1d2b
make only explicitly unloaded tabs have a grayscale dimmed favicon r=desktop-theme-reviewers,tabbrowser-reviewers,dao,sessionstore-reviewers

Comment 13

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/2895d98e1d2b

Comment 14

[Greg Stoll :gstoll]

Attachment: Bug 1926973 - turn on faded out tabs that are explicitly unloaded in nightly r=#desktop-theme-reviewers

Comment 15

[Greg Stoll :gstoll]

Description:
This feature lets users choose to unload tabs via an entry in the tab context menu. This change makes the favicon grayscale and 50% opacity to better indicate that the tab is unloaded.

I've attached a screenshot of what this looks like - in this screenshot the first and third tabs (Mozilla Support and Bugzilla Main Page) are unloaded.

How do we test this?
In a Nightly build, toggle the "browser.tabs.fadeOutExplicitlyUnloadedTabs" pref to true, then right-click on tabs to unload them.

When will this ship?
Tracking bug/issue: bug 1926389
Design documents (e.g. Product Requirements Document, UI spec): This is a proposal for a larger feature, but this bug is part of an MVP for that.
Engineering lead: Greg Stoll
Product manager: (none right now)

Please describe the accessibility guidelines you considered and what steps you've taken to address them: Sorry, I'm not sure how to apply contrast rules to an arbitrary favicon, so I haven't done any of these.

Describe any areas of concern to which you want the accessibility team to give special attention:

• Is this visual feedback accessible?
• When the user unloads a tab there is a short CSS transition to make the favicon "fade out". Should this be turned off if "prefers-reduced-motion" is set?

Comment 16

[Greg Stoll :gstoll]

Attachment: unloaded tabs.png

Comment 17

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/162e6ad382fb
turn on faded out tabs that are explicitly unloaded in nightly r=desktop-theme-reviewers,emilio,accessibility-frontend-reviewers,ayeddi

Comment 18

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/162e6ad382fb