593339 - Improve styling of "this app tab has changed" highlight

Status: VERIFIED FIXED

(Firefox :: Theme, defect)

Description

[Marco Bonardo [:mak]]

Windows 7 (And I guess Vista) has already a system color for notifications in the taskbar.
The icon turns orange for notifications (like a finished download) and red for errors or expecting user's actions (dialogs).
So we should probably turn that red notification in an orange one.
off-hand don't recall if Vista has similar feedback/colors, will check.

Comment 1

[Marco Bonardo [:mak]]

Attachment: suggested color

Comment 2

[Michael Lefevre]

Bug 577096 was a blocker. "ui-r=beltzner on everything except for the specific colour being used there ;)", so I guess not using that specific colour should be a blocker too...

Comment 3

[Johnathan Nightingale [:johnath]]

shorlander - can we get a quick put on what "there's been activity in this app tab since you last looked" should look like? Should be a quick patch, just need a colour/treatment.

Comment 4

[Marco Bonardo [:mak]]

actually on windows the notification also "blinks", but that's probably too invasive since it does not stop till you look at it... it could maybe blink once though.

Comment 5

[Dão Gottwald [:dao]]

Attachment: quick attempt at using orange

Comment 6

[Johnathan Nightingale [:johnath]]

(In reply to comment #5)
> Created attachment 471825 [details]
> quick attempt at using orange

Looks better to me, fwiw!

Comment 7

[Marco Bonardo [:mak]]

Attachment: highlight in Windows Vista

I've put near Dao's screenshot and the taskbar icon in "small-icons" mode (similar size) and the color looks correct. nice work.

Could we make it blink once with a moz-transition? like color->no-color->color, then it would be perfect.

This is how the highlight appears in Windows Vista, instead. Still lorange, slightly different tone.

Comment 8

[Dão Gottwald [:dao]]

-moz-transition doesn't support -moz-linear-gradient yet. Also, it doesn't support repeats, so this would involve scripting or moving to APNG.

Comment 9

[Gabriela [:gaby2300]]

Is this feature suppose to work in normal tabs too?

Comment 10

[Johnathan Nightingale [:johnath]]

(In reply to comment #9)
> Is this feature suppose to work in normal tabs too?

Nope - specific to app tabs.

Comment 11

[Gabriela [:gaby2300]]

(In reply to comment #10)

Should I like it to extend to normal tabs, do I file a new bug?

Comment 12

[Johnathan Nightingale [:johnath]]

(In reply to comment #11)
> (In reply to comment #10)
> 
> Should I like it to extend to normal tabs, do I file a new bug?

Yep!

Comment 13

[Stephen Horlander [:shorlander]]

Comment on attachment 471825 [details]
quick attempt at using orange

I was a little concerned that putting more orange in that corner with the orange Firefox button would be too much but I think it will work nicely.

I don't think we need the arcing gloss because it doesn't really go with any of our other gradient/light-sources. If it was a linear gradient instead of a radial gradient it would fit better.

Comment 14

[Aaron Train [:aaronmt]]

Is there any OSX change?

Comment 15

[Gabriela [:gaby2300]]

(In reply to comment #12)
> (In reply to comment #11)
> > (In reply to comment #10)
> > 
> > Should I like it to extend to normal tabs, do I file a new bug?
> 
> Yep!

Filed Bug 593381

Comment 16

[David Hsu]

Attachment: Badge showed when inactive tab completed loading

What about this? (I'm thinking "nice.")

Only changing the tab background color might be kind of confusing for Personas users if the colors are similar.

Comment 17

[David Hsu]

By the way that's Opera. Gee why is it always Opera? :P

Comment 18

[Gabriela [:gaby2300]]

It looks too small to me in last attachment, almost invisible. Wouldn't it be much better if the whole App Tab changed its color?

Comment 19

[David Hsu]

Attachment: Red icon, red tab background, with red Personas

(In reply to comment #18)
> It looks too small to me in last attachment, almost invisible. Wouldn't it be
> much better if the whole App Tab changed its color?

Sometimes it causes a mess.

Comment 20

[Gabriela [:gaby2300]]

Even in attachment 471896 [details] (Red icon, red tab background, with red Personas)
it looks more visible than the almost invisible light blue badge of the previous attachment!

Comment 21

[WulfTheSaxon [:Wulf]]

Opera's method is actually fairly visible in practice, although I still prefer the highlighting. It's a better match with native behavior in most operating systems. (I'd also be a fan of it pulsing a few times, though.)

Comment 22

[Johnathan Nightingale [:johnath]]

Let's nail this down - it can't stay red.

Comment 23

[Stephen Horlander [:shorlander]]

Attachment: Blue AppTab Notification

(In reply to comment #22)
> Let's nail this down - it can't stay red.

Direction for this from the UX meeting:

More subtle blue radial gradient coming from the top of the tab with a brighter central point in the center.

This won't be quite as scary and distracting as red, keeps too much orange out of the top left corner and has some actual distinction with contrast instead of just color.

Comment 24

[Johnathan Nightingale [:johnath]]

Thanks, Stephen - got gradient details for CSS, or just a background image to use?

Comment 25

[Stephen Horlander [:shorlander]]

Attachment: Blue AppTab Indicator

Patch to turn the apptab indicator blue instead of red.

Comment 26

[Stephen Horlander [:shorlander]]

Attachment: Screenshot of Patch

Comment 27

[Mike Beltzner [:beltzner, not reading bugmail]]

I'd allow this in beta7, fwiw. Super pretty.

Comment 28

[:Gavin Sharp [email: [e-mail]]]

Comment on attachment 477968 [details] [diff] [review]
Blue AppTab Indicator

>diff --git a/browser/themes/pinstripe/browser/browser.css b/browser/themes/pinstripe/browser/browser.css

>+#tabbrowser-tabs[tabsontop="true"] .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) {

This can use #tabbrowser-tabs[tabsontop="true"] > .tabbrowser-tab[...], right?

Why does only pinstripe need a separate tabsontop rule?

Comment 29

[:Gavin Sharp [email: [e-mail]]]

Oh, because of the tab orientation - I see now.

Comment 30

[:Gavin Sharp [email: [e-mail]]]

Comment on attachment 477968 [details] [diff] [review]
Blue AppTab Indicator

This is much more subtle - not sure I'd really notice it the way I notice the current indication (which is probably intended, I guess :). Perhaps it's because I'm using tabs-on-top on OS X, and the toolbar surrounding the leftmost tabs in that config is lighter than it is with tabs-on-bottom. You can see that there's more contrast for tabs-on-bottom case when comparing the two OS X screenshots. Not sure what a good way to address that would be... It might be nice to extend the background to cover more of the tab, as in Windows/Linux.

Comment 31

[Stephen Horlander [:shorlander]]

I messed with OS X the most. It is hard to get color to feel not completely out of place in the otherwise grey monochrome UI. I ended up going pretty subtle.

I think it's noticeable enough if you look at it to know something has changed but not so noticeable that it is distracting. If it is too subtle I can make it stronger.

Comment 32

[Gabriela [:gaby2300]]

(In reply to comment #31)
> I messed with OS X the most. It is hard to get color to feel not completely out
> of place in the otherwise grey monochrome UI. I ended up going pretty subtle.
> 
> I think it's noticeable enough if you look at it to know something has changed
> but not so noticeable that it is distracting. If it is too subtle I can make it
> stronger.

Please do! I find it very difficult to recognize!

Comment 33

[Stephen Horlander [:shorlander]]

Attachment: Blue AppTab Indicator v2

Made the Mac style more obvious. Includes proper HG headers.

Comment 34

[Stephen Horlander [:shorlander]]

Attachment: Screenshot of updated Mac style

Comment 35

[:Gavin Sharp [email: [e-mail]]]

Comment on attachment 478057 [details] [diff] [review]
Blue AppTab Indicator v2

I like it. Didn't address the first part of comment 28, but that can be done on checkin.

Comment 36

[Mike Beltzner [:beltzner, not reading bugmail]]

CSS tweak for a much better beta7+ consumer experience

Comment 37

[:Gavin Sharp [email: [e-mail]]]

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

Comment 38

[Csaba Kozák [:WonderCsabo]]

Attachment: Notification on Aero Basic

I dont like this new color. It's hard to notify on Aero, especially on Aero Basic.

Comment 39

[Gabriela [:gaby2300]]

(In reply to comment #38)
> Created attachment 478521 [details]
> Notification on Aero Basic
> 
> I dont like this new color. It's hard to notify on Aero, especially on Aero
> Basic.

I totally agree with you, it should go back to red, as it was before or be orange as the Windows 7 notifications. In fact I've filed a bug to enhance this: [Bug 599487]

Comment 40

[Gabriela [:gaby2300]]

Sorry for insisting but I really can't distinguish the new highlight color in Windows 7 with Aero enabled!
Again, please change it back to red or make it orange as the Windows 7 notifications.
Or at least please let the color be an option!
As it is it's very difficult to see!
I've filed a bug to enhance this: [Bug 599487] but it seems no one cares about this serious issue!
It's very important for me to be aware of some app tab's change of state!

Comment 41

[Gabriela [:gaby2300]]

I'm really sorry to see this has been fixed because as it is I can hardly see
the highlight in my Windows 7 with Aero enabled. 
I think you should at least make it optional so the user would be able to leave
the default colour or change it to red (as it was before) or to orange as all
the Windows notifications.

Comment 42

[Vlad [QA]]

Verified fixed on Mozilla/5.0 (Windows NT 6.1; rv:2.2a1pre) Gecko/20110404 Firefox/4.2a1pre