1396393 - The color of the new photon tab line in the devtools tabbar should use the GTK theme (Ubuntu)

Status: NEW

(DevTools :: General, defect, P3)

Description

[Jens]

Attachment: Tab line color does not match rest of Firefox (gtk)

I don't know if this is WiP but I noticed that the active tab line color is blue in the DevTools whereas in Firefox it uses the orange color by Ubuntu (GTK theme). I think the orange looks much better and it feels more natural to my eyes. 

See screenshot.

Comment 1

[Patrick Brosset <:pbro>]

That's a good point. I'm going to needinfo Victoria on this to verify if the hard-coded blue for these lines is intended or if we should follow the OS theme like we do for browser tabs.
Also Gabriel for the implementation.

Comment 2

[Victoria Wang [:victoria]]

Thanks for reporting this! Yes, the lines should match the browser tabs, so in this case they should follow the Ubuntu theme.

I'm noticing a second issue in your screenshot, which is that the font in the side panel tabs looks too big.

Comment 3

[Julian Descottes [:jdescottes]]

We could use the highlight keyword to match the behavior of the Firefox tab, however this is going away in Bug 1395651.

The highlight keyword will be replaced with the photon Blue 50 we currently use.

Comment 4

[Julian Descottes [:jdescottes]]

Attachment: Bug 1396393 - use highlight color for devtools tab top line;

Review commit: https://reviewboard.mozilla.org/r/179872/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/179872/

Comment 5

[Gabriel Luong [:gl] (ΦωΦ)]

Comment on attachment 8908207 [details]
Bug 1396393 - use highlight color for devtools tab top line;

https://reviewboard.mozilla.org/r/179872/#review185070

Comment 6

[Tim Nguyen :ntim]

Comment on attachment 8908207 [details]
Bug 1396393 - use highlight color for devtools tab top line;

https://reviewboard.mozilla.org/r/179872/#review185756

::: devtools/client/themes/common.css:13
(Diff revision 1)
>  :root {
>    font: message-box;
>  
> -  --tab-line-selected-color: var(--blue-50);
> +  /* The usage of the highlight keyword is being removed in Bug 1395651. DevTools should
> +     align when this bug is fixed. */
> +  --tab-line-selected-color: highlight;

Highlight is only used on Linux. MacOS and Windows still use blue-50.

Comment 7

[Julian Descottes [:jdescottes]]

(In reply to Tim Nguyen :ntim from comment #6)
> Comment on attachment 8908207 [details]
> Bug 1396393 - use highlight color for devtools tab top line;
> 
> https://reviewboard.mozilla.org/r/179872/#review185756
> 
> ::: devtools/client/themes/common.css:13
> (Diff revision 1)
> >  :root {
> >    font: message-box;
> >  
> > -  --tab-line-selected-color: var(--blue-50);
> > +  /* The usage of the highlight keyword is being removed in Bug 1395651. DevTools should
> > +     align when this bug is fixed. */
> > +  --tab-line-selected-color: highlight;
> 
> Highlight is only used on Linux. MacOS and Windows still use blue-50.

I don't think this is the current state? This is the goal of Bug 1395651. On my current setup, with OSX, the browser tabs blue is set to #0069D9 which is not a photon color.

> .tab-line[selected=true] {
>   background-color: var(--tab-line-color);
> }

+ see http://searchfox.org/mozilla-central/search?q=--tab-line-color&case=false&regexp=false&path=

Comment 8

[Julian Descottes [:jdescottes]]

Let's wait for Bug 1395651 to be resolved. First of all it looks like the change will be more fine grained than linux/not-linux. blue-50 will only be used on environments where firefox can control the background color of the selected tab (I guess to be sure that "blue-50" will contrast with the background color).

Looking at the current patch that means: linux (maybe not if compact theme is enabled??) and some windows themes? 

Note that contrary to the browser tabs, DevTools _always_ control the background color of the tabs. So in theory we don't have the same incentive to use the system's highlight color. It could still be nice to align with the browser tabs.

So let's wait for the bug to land and see if we can either reuse their value, or dupe the logic/selectors ...

Comment 9

[Tim Nguyen :ntim]

(In reply to Julian Descottes [:jdescottes] from comment #8)
> Let's wait for Bug 1395651 to be resolved. First of all it looks like the
> change will be more fine grained than linux/not-linux. blue-50 will only be
> used on environments where firefox can control the background color of the
> selected tab (I guess to be sure that "blue-50" will contrast with the
> background color).
> 
> Looking at the current patch that means: linux (maybe not if compact theme
> is enabled??) and some windows themes? 
All the non-default windows themes: high contrast, classic theme, etc.