1240243 - Focused container tabs don't get highlighted color in Developer Edition

Status: RESOLVED WORKSFORME

(Core :: Security, defect, P2)

Description

[Tanvi Vyas[:tanvi]]

* Use containers in dev edition (by going to about:config and turning on privacy.userContext.enabled)
* Go to File->New Container Tab->Work.
* The top of the tab should be orange but it is not.
* Open a new tab.  The work tab will now appear orange at the top, as it should.
* Click back on the work tab and the orange disappears.  It should be orange.

This means that tab highlighting isn't working for focused container tabs when we use the dark dev edition theme.

Comment 1

[Panos Astithas (he/him) [:past] (please ni?)]

If this is a style issue, Brian knows more about the DevEdition theme than anyone.

Comment 2

[Brian Grinstead [:bgrins]]

Looks like the orange highlight is applied to .tabbrowser-tab: https://dxr.mozilla.org/mozilla-central/rev/a77b73c7723e1060993045fb31eb2f0a30473486/browser/themes/shared/tabs.inc.css#400.  In DE theme the background is overridden by: https://dxr.mozilla.org/mozilla-central/rev/a77b73c7723e1060993045fb31eb2f0a30473486/browser/themes/shared/devedition.inc.css#295.

Seems like we might need designs for this - I'm not sure exactly where we should add the orange highlight, like if it should replace the otherwise light blue highlight at the top of the tab?

Comment 3

[Tanvi Vyas[:tanvi]]

(In reply to Brian Grinstead [:bgrins] from comment #2)
> Looks like the orange highlight is applied to .tabbrowser-tab:
> https://dxr.mozilla.org/mozilla-central/rev/
> a77b73c7723e1060993045fb31eb2f0a30473486/browser/themes/shared/tabs.inc.
> css#400.  In DE theme the background is overridden by:
> https://dxr.mozilla.org/mozilla-central/rev/
> a77b73c7723e1060993045fb31eb2f0a30473486/browser/themes/shared/devedition.
> inc.css#295.
> 
> Seems like we might need designs for this - I'm not sure exactly where we
> should add the orange highlight, like if it should replace the otherwise
> light blue highlight at the top of the tab?

Bram, how should the tab highlighting on the top of each container look for the dev edition theme?

Comment 4

[Bram Pitoyo [:bram]]

Attachment: containers - DevEdition theme - i01

I think that the colour of container tabs should be present in background tabs, and replace the highlight colour of currently active tabs.

So an active normal tab would be highlighted in light blue, but an active container tab would be highlighted in the container colour.

There’s only one problem with this approach. In light theme, Personal container has a shade of blue that too closely matches the background colour value. In the example, it’s the second row item, first from the left. How do we solve it?

Another thing I’ve proposed in the example is to use solid highlight colour instead of gradient. I think it looks nicer in the context of the DevEdition theme, but will it be tougher to implement?

Comment 5

[Brian Grinstead [:bgrins]]

(In reply to Bram Pitoyo [:bram] from comment #4)
> Another thing I’ve proposed in the example is to use solid highlight colour
> instead of gradient. I think it looks nicer in the context of the DevEdition
> theme, but will it be tougher to implement?

That should be easy to implement - we'd need to overwrite the --tab-selection-box-shadow variable on the relevant .tabbrowser-tab elements:

https://dxr.mozilla.org/mozilla-central/source/browser/themes/shared/devedition.inc.css#36
https://dxr.mozilla.org/mozilla-central/source/browser/themes/shared/devedition.inc.css#298

Comment 8

[Jonathan Kingston [:jkt] he/him]

Attachment: Selection_202.png

Latest nightly build of developer mode doesn't have this issue as the box-shadow had been removed to simplify the styles.

Comment 9

[Jonathan Kingston [:jkt] he/him]

This seems to be resolved in the latest build of developer edition, see attachment. Thanks.