Closed Bug 593339 Opened 10 years ago Closed 10 years ago

Improve styling of "this app tab has changed" highlight

Categories

(Firefox :: Theme, defect)

defect
Not set

Tracking

()

VERIFIED FIXED
Firefox 4.0b7
Tracking Status
blocking2.0 --- beta7+

People

(Reporter: mak, Assigned: shorlander)

References

(Depends on 1 open bug)

Details

(Whiteboard: [can land])

Attachments

(10 files, 1 obsolete file)

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.
Depends on: 577096
Attached image suggested color
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...
blocking2.0: --- → ?
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.
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.
(In reply to comment #5)
> Created attachment 471825 [details]
> quick attempt at using orange

Looks better to me, fwiw!
Attachment #471825 - Flags: ui-review?(shorlander)
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.
-moz-transition doesn't support -moz-linear-gradient yet. Also, it doesn't support repeats, so this would involve scripting or moving to APNG.
Is this feature suppose to work in normal tabs too?
(In reply to comment #9)
> Is this feature suppose to work in normal tabs too?

Nope - specific to app tabs.
(In reply to comment #10)

Should I like it to extend to normal tabs, do I file a new bug?
(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 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.
Attachment #471825 - Flags: ui-review?(shorlander) → ui-review-
Is there any OSX change?
(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
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.
By the way that's Opera. Gee why is it always Opera? :P
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?
(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.
Summary: Use taskbar feedback color for app tabs title changes notifications → Improve styling of "this app tab has changed" highlight
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!
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.)
Let's nail this down - it can't stay red.
blocking2.0: ? → betaN+
(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.
Thanks, Stephen - got gradient details for CSS, or just a background image to use?
Attached patch Blue AppTab Indicator (obsolete) — Splinter Review
Patch to turn the apptab indicator blue instead of red.
Attachment #477968 - Flags: review?(dao)
I'd allow this in beta7, fwiw. Super pretty.
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?
Oh, because of the tab orientation - I see now.
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.
Attachment #477968 - Flags: review?(dao)
Attachment #477968 - Flags: review+
Attachment #477968 - Flags: approval2.0+
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.
(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!
Made the Mac style more obvious. Includes proper HG headers.
Attachment #477968 - Attachment is obsolete: true
Attachment #478057 - Flags: review?(gavin.sharp)
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.
Attachment #478057 - Flags: review?(gavin.sharp) → review+
Assignee: nobody → shorlander
CSS tweak for a much better beta7+ consumer experience
blocking2.0: betaN+ → beta7+
Whiteboard: [can land]
https://hg.mozilla.org/mozilla-central/rev/accf025d6211
Status: NEW → RESOLVED
Closed: 10 years ago
OS: Windows 7 → All
Hardware: x86 → All
Resolution: --- → FIXED
Target Milestone: --- → Firefox 4.0b7
Depends on: 599487
I dont like this new color. It's hard to notify on Aero, especially on Aero Basic.
(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]
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!
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.
Verified fixed on Mozilla/5.0 (Windows NT 6.1; rv:2.2a1pre) Gecko/20110404 Firefox/4.2a1pre
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.