1697448 - Active tab of some lightweight themes are too faint with Proton enabled

Status: VERIFIED FIXED

(Firefox :: Theme, defect, P1)

Description

[Albert Scheiner [:alberts]]

Attachment: image.png

It is hard to distinguish the active tab from other tabs in Alpenglow theme with Proton enabled. bug 1665199 has a screenshot from 6 months ago which can be somewhat used as comparison.

Comment 2

[Tim Nguyen :ntim]

Wanted to separate this from the dark theme colors bug, this is a more general issue.

I think many themes either expect a tab line or a border around tabs. Adding a 1px border of var(--tabs-border-color) (set by some themes via toolbar_top_separator) falling back to ~rgba(255,255,255,0.3) around the tab for lightweight themes (white-ish seems reasonable here because there's already a dark shadow) seems reasonable.

Comment 3

[Tim Nguyen :ntim]

This works, of course the default value of --tabs-border-color needs to be transparent (unlike now):

diff --git a/browser/themes/shared/tabs.inc.css b/browser/themes/shared/tabs.inc.css
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -699,6 +699,7 @@
 .tab-background {
   border-radius: var(--proton-tab-radius);
   margin-block: var(--proton-tab-block-margin);
+  border: 1px solid transparent;
 }
 
 :root[sizemode=maximized] .tabbrowser-tab {
@@ -712,6 +713,10 @@
 .tabbrowser-tab[visuallyselected=true]:hover > .tab-stack > .tab-background {
   box-shadow: 0px 2px var(--proton-shadow-blur-radius) rgba(58, 57, 68, 0.2);
 }
+
+.tabbrowser-tab[visuallyselected=true]:-moz-lwtheme > .tab-stack > .tab-background {
+  border-color: var(--tabs-border-color, rgba(255,255,255,0.3));
+}
 } /*** END proton ***/
 
 %ifdef MENUBAR_CAN_AUTOHIDE

It's far from ideal when you try it though.

Comment 4

[Tim Nguyen :ntim]

Many themes "by Madonna" have this issue since everything is transparent to let the image show, so it makes the selected tab pretty much invisible.

Comment 5

[Seburo]

Should the focus of this be to look at the transparency or the tab_line element?

Taking a very popular theme as an example (https://addons.mozilla.org/en-GB/firefox/addon/matte-black-red/). The tab_line is the key part of the theme and of others by the same author. Although my own themes are not as popular, I can appreciate when making a low-intensity theme using a colour accent as tab_line as the active tab indicator.

The broader concern I have is the impact of the removal of tab_line as an element on theme artists and users. Theme artists want users to have a good experience, and do not want to disappoint a population of people that like their theme (however large or small). If tab_line is removed, theme artists may need to redesign and resubmit changed themes with the challenge of timing this so that their theme does not change on Photon, and appears great on Proton (with the pain of editing something they considered to be great - not nice).

Given that tab_line is an element of existing themes, that users have installed and could cause friction with users and the theme community, I suggest that the tab_line is retained as an element in Proton in a similar fashion to Photon. Flipping between two profiles (Photon and Proton) it feels there is space in the tab to do this without knock-on impact.

The other option of removing tab_line would need a "plan B" around theme artists, timing, AMO approvals and could be much higher friction.

Comment 6

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

Attachment: Bug 1697448 - Use the tab_line color, or the toolbar_top_separator if tab_line is not specified, as a border around the selected tabs for themes.

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f3149b974792
Use the tab_line color, or the toolbar_top_separator if tab_line is not specified, as a border around the selected tabs for themes. r=mstriemer

Comment 8

[Cristian Brindusan [:cbrindusan]]

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

Comment 9

[Negritas Sergiu, Desktop QA]

Hello! I have managed to reproduce the issue with firefox 88.0a1 (2021-03-19) on Ubuntu 20, I can confirm that the issue is fixed on Firefox 89.0b3 (64-bit) and 90.0a1 (2021-04-23) on all OS's. I will set the flags accordingly.

Thank you!