1408007 - SVG indicators not changing colours properly for background tabs(other tabs)

Status: RESOLVED FIXED

(Firefox :: Theme, defect, P1)

Description

[u595893]

User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:58.0) Gecko/20100101 Firefox/58.0
Build ID: 20171011220113

Steps to reproduce:

In FF58 open a bunch of folders together


Actual results:

The selected tabs first shows grey indicator then changes to blue but the rest of the tabs show only grey


Expected results:

Initially the indicators should have been grey then when websites send data it should change to blue

Comment 1

[u595893]

This used to happen in earlier implementation and was useful as it would change to blue from grey to notify that websites are loading,
now it stays grey and doesn't notify if websites are loading.

Comment 2

[Dão Gottwald [:dao]]

This sounds like a duplicate of bug 1404495.

Comment 3

[u595893]

(In reply to Dão Gottwald [::dao] from comment #2)
> This sounds like a duplicate of bug 1404495.

It's fixed according to that bug but still the indicators do not change colours for background tabs(circling indicators one had two animation to show this on other tabs too ie connecting & loading)

Comment 4

[u595893]

Meant reverse circle while connecting and blue one while loading and this was very useful info.

Current one has no info for background one's

Comment 5

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

What theme are you using? What color is your titlebar?

Comment 6

[u595893]

(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #5)
> What theme are you using? What color is your titlebar?

Default or dark theme.

Light theme seems to work fine!

Comment 7

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

Bug 1396062 made it so that we will show white as the loading state and grey as the connecting state if "bright text" is being used (dark theme and potentially default depending on your window titlebar color).

What color is your titlebar?

Comment 8

[u595893]

(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #7)
> Bug 1396062 made it so that we will show white as the loading state and grey
> as the connecting state if "bright text" is being used (dark theme and
> potentially default depending on your window titlebar color).
> 
> What color is your titlebar?

can see the white in dark theme but not always, default & light it's always grey(not selected tab but the other tabs)

its default colour in win10 which firefox provides (no title bar accent colour)

Comment 9

[u595893]

https://bug1408079.bmoattachments.org/attachment.cgi?id=8917908

only prefs changed are

no fav icons, mintabwidth =85

compact density

Comment 10

[u595893]

@jaws

might be white dots but still look like grey,
Not sure though.
Can it be some other variation? It's hard to differentiate (if it switches from grey to white)
Maybe grey to black?
Default profile with default theme & compact mode.

Comment 11

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

Sam, can you look in to this?

Comment 12

[Sam Foster [:sfoster] (he/him)]

(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #11)
> Sam, can you look in to this?

Sure, I'll take a look.

Comment 13

[Sam Foster [:sfoster] (he/him)]

I'm having trouble reproducing this. Here's what I'm trying: 

* Nightly, in win10:
* Open a bunch of tabs (to real websites, not just about:newtab)
* Close browser (with pref to restore tabs when starting)
* Open browser, and ctrl+tab through the tabs to trigger their starting to load (they won't load at all while in the background otherwise)

I'm seeing the expected white loading indicator for the background tabs. In the dark and default theme. Any suggestions :shellye?

Comment 14

[u595893]

(In reply to Sam Foster [:sfoster] from comment #13)
> I'm having trouble reproducing this. Here's what I'm trying: 
> 
> * Nightly, in win10:
> * Open a bunch of tabs (to real websites, not just about:newtab)
> * Close browser (with pref to restore tabs when starting)
> * Open browser, and ctrl+tab through the tabs to trigger their starting to
> load (they won't load at all while in the background otherwise)
> 
> I'm seeing the expected white loading indicator for the background tabs. In
> the dark and default theme. Any suggestions :shellye?

can you try

open few bookmarks together say 20 and don't switch tabs just look

sometimes they stay grey(usually on slow network) if they don't switch/connect quickly and sometimes the difference is not noticeable(like grey to blue)

but if you guys feel it okay then no problem.

Comment 15

[u595893]

plus they are blue in light theme

white in default and dark theme

Comment 16

[Sam Foster [:sfoster] (he/him)]

(In reply to shellye from comment #14)
> can you try
> 
> open few bookmarks together say 20 and don't switch tabs just look

This doesn't make sense to me. As I understand it we don't attempt to load background tabs until they have been selected/brought into the foreground. Maybe I'm picturing this wrong?

Comment 17

[Dão Gottwald [:dao]]

(In reply to Sam Foster [:sfoster] from comment #16)
> (In reply to shellye from comment #14)
> > can you try
> > 
> > open few bookmarks together say 20 and don't switch tabs just look
> 
> This doesn't make sense to me. As I understand it we don't attempt to load
> background tabs until they have been selected/brought into the foreground.
> Maybe I'm picturing this wrong?

Yes, you are picturing this wrong. :) As opposed to session restore, we load bookmarks or any other links right away, not on demand.

Comment 18

[Sam Foster [:sfoster] (he/him)]

Ok, so what I'm seeing is that when the tabs have a light background we show the grey dot for busy (connecting) and blue for progress/loading. When brighttext is applied for dark tabs (dark theme, or title bar off so the tabs use a dark title bar color) the dots are grey and white respectively. As the fill is at 70% opacity, the state change is pretty subtle. The reporter's expectation is that they should be blue. I'm inclined to agree that the difference is a bit hard to spot, and as Asa points out in bug 1404495, this is valuable information especially on slower connections.  

It seems like this was discussed at some length in bug 1396062, and white was landed on for the progress color as the blue was hard to differentiate against a blue background. So just switching back to blue is not a solution. It seems like the options are 

* to tweak colors (where we are constrained because of all the variations this needs to work under)
* adjust opacity/contrast
* adjust the image and/or animation. E.g using a hollow dot for connecting and a filled dot for loading. 
* or, of course to decide this is good-enough as-is and wontfix. 

Seems like a UX call. Eric/Amy?

Comment 19

[Eric Pang [:epang] UX]

(In reply to Sam Foster [:sfoster] from comment #18)
> Ok, so what I'm seeing is that when the tabs have a light background we show
> the grey dot for busy (connecting) and blue for progress/loading. When
> brighttext is applied for dark tabs (dark theme, or title bar off so the
> tabs use a dark title bar color) the dots are grey and white respectively.
> As the fill is at 70% opacity, the state change is pretty subtle. The
> reporter's expectation is that they should be blue. I'm inclined to agree
> that the difference is a bit hard to spot, and as Asa points out in bug
> 1404495, this is valuable information especially on slower connections.  
> 
> It seems like this was discussed at some length in bug 1396062, and white
> was landed on for the progress color as the blue was hard to differentiate
> against a blue background. So just switching back to blue is not a solution.
> It seems like the options are 
> 
> * to tweak colors (where we are constrained because of all the variations
> this needs to work under)
> * adjust opacity/contrast
> * adjust the image and/or animation. E.g using a hollow dot for connecting
> and a filled dot for loading. 
> * or, of course to decide this is good-enough as-is and wontfix. 
> 
> Seems like a UX call. Eric/Amy?

The ideal situation would be too keep the base colours consistent (the brightness/contrast can change). 
Grey (connecting) > blue (loading). Higher opacity on the selected tab and lower on background tabs.

But then we run into the problem of title bars with blue background tabs.  Is there anyway we can check the title bar colour and only divert from blue when the loading dot isn't visible as opposed to changing it for all cases?

Comment 20

[Dão Gottwald [:dao]]

Can we just use a lighter blue like #bbbbff?

Comment 21

[Sam Foster [:sfoster] (he/him)]

(In reply to Dão Gottwald [::dao] from comment #20)
> Can we just use a lighter blue like #bbbbff?

If the graphic solution is out, I'm in favor of a simpler solution like this if at all possible. We have simplified the issue of different color and brightness toolbars down to a brighttext boolean. ISTM that handling certain colors in different ways is a slippery slope.

Comment 22

[:Gijs (he/him)]

(In reply to Sam Foster [:sfoster] from comment #21)
> (In reply to Dão Gottwald [::dao] from comment #20)
> > Can we just use a lighter blue like #bbbbff?
> 
> If the graphic solution is out, I'm in favor of a simpler solution like this
> if at all possible. We have simplified the issue of different color and
> brightness toolbars down to a brighttext boolean. ISTM that handling certain
> colors in different ways is a slippery slope.

Makes sense to me. Eric, thoughts?

Comment 23

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

#bbbbff would work except for the cases where the titlebar color is #bbbbff (or something close). Let's try it though and see how it looks. If this is gonna uplift to 57 we can't do anything drastic anyways.

Comment 24

[Sam Foster [:sfoster] (he/him)]

Attachment: Bug 1408007 - Update tab loading throbber color for in-active tabs in darker themes

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

Comment 25

[Sam Foster [:sfoster] (he/him)]

attachment 8925176 [details] looks a little better to me. Its still subtle, but I think an improvement? 

pushed to try: https://treeherder.mozilla.org/#/jobs?repo=try&revision=b3338da42854bb5ad536fc392850bf6bdf14d131

Comment 26

[u595893]

(In reply to Sam Foster [:sfoster] from comment #25)
> attachment 8925176 [details] looks a little better to me. Its still subtle,
> but I think an improvement? 
> 
> pushed to try:
> https://treeherder.mozilla.org/#/
> jobs?repo=try&revision=b3338da42854bb5ad536fc392850bf6bdf14d131

just feedback

subtle blue looks nice but can it change from deep grey to subtle bright blue instead of grey to subtle blue?
so it's easy to see the state change of connection?

Comment 27

[Dão Gottwald [:dao]]

Comment on attachment 8925176 [details]
Bug 1408007 - Update tab loading throbber color for in-active tabs in darker themes

https://reviewboard.mozilla.org/r/196414/#review201834

Comment 28

[Sam Foster [:sfoster] (he/him)]

(In reply to shellye from comment #26)
> just feedback
> 
> subtle blue looks nice but can it change from deep grey to subtle bright
> blue instead of grey to subtle blue?
> so it's easy to see the state change of connection?

We can't use a darker blue here because of bug 1396062, so for now at least this needs to be a compromise.

Comment 29

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/565d98335e7e
Update tab loading throbber color for in-active tabs in darker themes r=dao

Comment 30

[Eric Pang [:epang] UX]

(In reply to Sam Foster [:sfoster] from comment #28)
> (In reply to shellye from comment #26)
> > just feedback
> > 
> > subtle blue looks nice but can it change from deep grey to subtle bright
> > blue instead of grey to subtle blue?
> > so it's easy to see the state change of connection?
> 
> We can't use a darker blue here because of bug 1396062, so for now at least
> this needs to be a compromise.


Can we try these updated colours? Currently the light blue looks closer to lavender to me and doesn't really fit into the Photon colour palette.

Also, I agree with Shellye that the grey should be darker so the 2 states are easier to be distinguished.

Blue: #84c1ff
Grey: #717171

Thanks!

Comment 31

[Cristina Coroiu [:ccoroiu]]

https://hg.mozilla.org/mozilla-central/rev/565d98335e7e

Comment 32

[Sam Foster [:sfoster] (he/him)]

> Can we try these updated colours? Currently the light blue looks closer to
> lavender to me and doesn't really fit into the Photon colour palette.

Sorry Eric, I had already pushed my patch when this comment came in. I've opened bug 1415019 to follow up on these color choices.

Comment 33

[Eric Pang [:epang] UX]

(In reply to Sam Foster [:sfoster] from comment #32)
> > Can we try these updated colours? Currently the light blue looks closer to
> > lavender to me and doesn't really fit into the Photon colour palette.
> 
> Sorry Eric, I had already pushed my patch when this comment came in. I've
> opened bug 1415019 to follow up on these color choices.

Thanks Sam!