1922521 - Dragged tabs are no longer opaque when Dark theme is enabled

Status: VERIFIED FIXED

(Firefox :: Theme, defect, P2)

Description

[Gregory Pappas [:gregp]]

Attachment: translucent_tabs.webm

Steps to reproduce:

1. Navigate to about:addons → Themes
2. Enable Dark theme
3. Open a new tab
4. Start dragging a tab horizontally

Actual results:
The favicons and titles of other tabs are visible behind the tab being dragged

Expected results:
The dragged tab is opaque

Comment 1

[:Gijs (he/him)]

I suppose this is a consequence of using semi-transparent background colours for the selected state.

Can we define a separate colour for the dragged state (e.g. by using a separate thing for the mousedown state), or does this mean we should go back to using an opaque colour here?

Comment 2

[Dão Gottwald [:dao]]

(In reply to :Gijs (he/him) from comment #1)

I suppose this is a consequence of using semi-transparent background colours for the selected state.

Can we define a separate colour for the dragged state (e.g. by using a separate thing for the mousedown state), or does this mean we should go back to using an opaque colour here?

We could, but we probably don't want to extend the webextension theme API just for this; feels a bit too granular and this is supposed to be a simple API. A share of third-party themes likely had this issue for a long time, which in practice I suspect isn't too bad. In fact, from what I recall native drag feedback images are partly transparent on both Linux and Windows, so I guess this could be seen as a feature?! Though I agree this is nicer without or less transparency.

So how do we address this? I think we should mitigate and tweak the select tab background color again to have less transparency, i.e. see if we can get lower rgb component values and an alpha channel of, say, 0.7 or higher.

Comment 3

[:Gijs (he/him)]

Attachment: Bug 1922521 - use less transparency for selected tabs in dark mode to make dragging better, r?#desktop-theme-reviewers

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/857ab9c9ee5b
use less transparency for selected tabs in dark mode to make dragging better, r=desktop-theme-reviewers,dao

Comment 5

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/857ab9c9ee5b

Comment 6

[:Gijs (he/him)]

Attachment: Bug 1922521 - use less transparency for selected tabs in dark mode to make dragging better, r?#desktop-theme-reviewers

Original Revision: https://phabricator.services.mozilla.com/D225184

Comment 7

[Phabricator Automation]

beta Uplift Approval Request

• User impact if declined: Confusing tab drag experience
• Code covered by automated testing: no
• Fix verified in Nightly: no
• Needs manual QE test: no
• Steps to reproduce for manual QE testing: N/A
• Risk associated with taking this patch: Low
• Explanation of risk level: CSS only fix
• String changes made/needed: No
• Is Android affected?: no

Comment 8

[Pulsebot]

https://hg.mozilla.org/releases/mozilla-beta/rev/9cdbe583d4b2

Comment 9

[Bianca Hidecuti, Desktop Test Engineering [:bhidecuti]]

Attachment: Level of transparency before (left) and after the fix (right)

I was able to reproduce the issue on Firefox 132.0b7, using Windows 11, while following the steps described in Comment 0.
Verified this on Firefox 132.0b8 and Firefox Nightly 133.0a1 (2024-10-17), using Windows 11, macOS 14.7 and Ubuntu 22.04. A subtle improvement in transparency can be observed when dragging a tab and the dark theme is enabled - please see the attached screenshot.
@Gijs, can you please confirm if the level of transparency is the desired one? Thank you in advance!

Comment 10

[:Gijs (he/him)]

(In reply to Bianca Hidecuti, Desktop Test Engineering [:bhidecuti] from comment #9)

Created attachment 9431830 [details]
Level of transparency before (left) and after the fix (right)

I was able to reproduce the issue on Firefox 132.0b7, using Windows 11, while following the steps described in Comment 0.
Verified this on Firefox 132.0b8 and Firefox Nightly 133.0a1 (2024-10-17), using Windows 11, macOS 14.7 and Ubuntu 22.04. A subtle improvement in transparency can be observed when dragging a tab and the dark theme is enabled - please see the attached screenshot.
@Gijs, can you please confirm if the level of transparency is the desired one? Thank you in advance!

Yeah, I think we're more or less happy with this - it's not really straightforward to make them fully opaque, but for now this seems a reasonable compromise.

Comment 11

[Bianca Hidecuti, Desktop Test Engineering [:bhidecuti]]

Thank you for the confirmation!
Based on Comment 9 and 10 I am marking this verified as fixed.