Tab animation while switching tabs

Biju

unread,

Aug 10, 2010, 10:44:35 PM8/10/10

to

When there are many tabs opened it becomes difficult to identify which
is the active tab.
So I have made min-width: 250px for active tab.
While switching tabs, it gives a nice animation effect too..

#main-window #navigator-toolbox .tabbrowser-tab:not([pinned])
[selected="true"]
{
min-width: 250px !important;
}

#main-window #navigator-toolbox .tabbrowser-tab {
max-width: 145px !important;
}

I have few videos
http://www.youtube.com/watch?v=Yybkuez3DDk
http://www.youtube.com/watch?v=B-CF2xuOTuk

Only problem I have now is since few days max-width: 145px for
inactive tab creates ghost tabs at certain times.
see https://bugzilla.mozilla.org/show_bug.cgi?id=586151

Mike Beltzner

unread,

Aug 11, 2010, 3:27:01 AM8/11/10

to Biju, dev-us...@lists.mozilla.org

Hey Biju,

This is an interesting idea, especially since on Windows it's become very hard to see a window title when you have many tabs. I think I'd need to play with it a bit to see how it feels. Does that code work if added to userChrome.css?

cheers,
mike

Biju

unread,

Aug 14, 2010, 2:40:59 PM8/14/10

to

Mike,

Sorry for delay, yes it works with userChrome.css and that how I use
it.

Cheers
Biju

Biju

unread,

Aug 14, 2010, 2:49:51 PM8/14/10

to

On Aug 11, 3:27 am, Mike Beltzner <beltz...@mozilla.com> wrote:

Mike,

Here is the modified CSS for userChrome.css.
We need to use tabbrowser-tab[fadein] to avoid
https://bugzilla.mozilla.org/show_bug.cgi?id=586151

#main-window toolbox#navigator-toolbox

.tabbrowser-tab:not([pinned])[selected="true"]
{
min-width: 250px !important;
}

#main-window toolbox#navigator-toolbox
.tabbrowser-tab[fadein]
{
max-width: 145px !important;
}

broccauley

unread,

Aug 14, 2010, 8:18:19 PM8/14/10

to

This is a great way to solve the problem of not being able to see the full
title when tabs are in the title bar!! Of the 2, I prefer animation 1.

Here was another proposal that I had for solving the same problem:
https://wiki.mozilla.org/Talk:Firefox/4.0_Windows_Theme_Mockups#Page_Title_in_the_Location_Bar.3F

Even if my idea on the wiki isn't used, I think you could learn something
from the Fitt's Law reasons for reducing the tab height and increasing the
height of the location bar/search bar accordingly.

Paul

"Biju" <bijuma...@yahoo.com> wrote in message
news:1c5beebf-c7d9-4e34...@5g2000yqz.googlegroups.com...

Stanimir Stamenkov

unread,

Aug 16, 2010, 4:35:23 AM8/16/10

to

Wed, 11 Aug 2010 00:27:01 -0700, /Biju/:

> When there are many tabs opened it becomes difficult to identify which
> is the active tab.
> So I have made min-width: 250px for active tab.
> While switching tabs, it gives a nice animation effect too..

> (...)

It is really interesting. I wonder if it could be made so it
doesn't shake so much, i.e. have the tab which just becomes inactive
animate its new width also, so the overall tabs width remains
constant and the left and right edges do not generally move.

--
Stanimir

Biju

unread,

Aug 17, 2010, 10:27:44 PM8/17/10

to

Submitted RFE
https://bugzilla.mozilla.org/show_bug.cgi?id=588262

On Aug 16, 4:35 am, Stanimir Stamenkov <s7a...@netscape.net> wrote:
> Wed, 11 Aug 2010 00:27:01 -0700, /Biju/:

> It is really interesting. I wonder if it could be made so it
> doesn't shake so much, i.e. have the tab which just becomes inactive
> animate its new width also, so the overall tabs width remains
> constant and the left and right edges do not generally move.

1. Try removing

#main-window toolbox#navigator-toolbox
.tabbrowser-tab[fadein]
{
max-width: 145px !important;
}

2. If you still dont like, try only following

#main-window #navigator-toolbox .tabbrowser-
tab[fadein]:not([pinned])
{
min-width: 250px !important;
}

Stanimir Stamenkov

unread,

Aug 18, 2010, 12:19:18 AM8/18/10

to

Tue, 17 Aug 2010 19:27:44 -0700 (PDT), /Biju/:

> Submitted RFE
> https://bugzilla.mozilla.org/show_bug.cgi?id=588262
>
> On Aug 16, 4:35 am, Stanimir Stamenkov<s7a...@netscape.net> wrote:
>
>> Wed, 11 Aug 2010 00:27:01 -0700, /Biju/:
>> It is really interesting. I wonder if it could be made so it
>> doesn't shake so much, i.e. have the tab which just becomes inactive
>> animate its new width also, so the overall tabs width remains
>> constant and the left and right edges do not generally move.
>
> 1. Try removing

> (...)

I think I've almost got it using (the last rule being the key one):

@-moz-document url(chrome://browser/content/browser.xul) {

.tabbrowser-tab[fadein]:not([pinned]) {
max-width: 145px !important;
}
.tabbrowser-tab[selected="true"][fadein]:not([pinned]) {
min-width: 250px !important;
}
.tabbrowser-tab:not([selected="true"]):not([pinned]) {
-moz-transition-timing-function: ease-in, ease-in !important;
}

}

There's still a bit of "shaking", though.

--
Stanimir

Stanimir Stamenkov

unread,

Aug 18, 2010, 12:31:48 AM8/18/10

to

Wed, 18 Aug 2010 07:19:18 +0300, /Stanimir Stamenkov/:

> I think I've almost got it using (the last rule being the key one):
>
> @-moz-document url(chrome://browser/content/browser.xul) {
>
> .tabbrowser-tab[fadein]:not([pinned]) {
> max-width: 145px !important;
> }
> .tabbrowser-tab[selected="true"][fadein]:not([pinned]) {
> min-width: 250px !important;
> }
> .tabbrowser-tab:not([selected="true"]):not([pinned]) {
> -moz-transition-timing-function: ease-in, ease-in !important;
> }

If I replace the last one with:

.tabbrowser-tab:not([selected="true"]):not([pinned]) {

-moz-transition-duration: 0.2s, 0.25s !important;
}

It appears I get exactly what I'm after (no shaking) when there are
few tabs opened, but when the tabs start exceeding the available
width, the selected tab doesn't seem to obey the |min-width: 250px|
declaration anymore.

Stanimir Stamenkov

unread,

Aug 18, 2010, 12:51:57 AM8/18/10

to

Wed, 18 Aug 2010 07:19:18 +0300, /Stanimir Stamenkov/:

> I think I've almost got it using (the last rule being the key one):

>
> @-moz-document url(chrome://browser/content/browser.xul) {
>
> .tabbrowser-tab[fadein]:not([pinned]) {
> max-width: 145px !important;
> }

.tabbrowser-tab[selected="true"][fadein]:not([pinned]) {
min-width: 250px !important;

max-width: 250px !important;
}
.tabbrowser-tab:not([selected="true"])[fadein]:not([pinned]) {
-moz-transition-duration: 0.2s, 0.25s !important;
}

> }
>
> There's still a bit of "shaking", though.

There's now just a tiny bit of shaking left when there are just few
tabs opened. When tabs start to overflow (scroll arrows appear) it
smooths out completely, or almost - when I switch fast between tabs
it still isn't perfect, but I guess that's the limit.

--
Stanimir

Stanimir Stamenkov

unread,

Aug 18, 2010, 4:02:26 AM8/18/10

to

Wed, 18 Aug 2010 07:51:57 +0300, /Stanimir Stamenkov/:

> Wed, 18 Aug 2010 07:19:18 +0300, /Stanimir Stamenkov/:
>
>> I think I've almost got it using (the last rule being the key one):
>>
>> @-moz-document url(chrome://browser/content/browser.xul) {
>>
>> .tabbrowser-tab[fadein]:not([pinned]) {
>> max-width: 145px !important;
>> }
>
> .tabbrowser-tab[selected="true"][fadein]:not([pinned]) {
> min-width: 250px !important;
> max-width: 250px !important;
> }

.tabbrowser-tab:not([pinned]) {
-moz-transition-duration: 0.25s, 0.25s !important;
}

>> }
>>
>> There's still a bit of "shaking", though.
>
> There's now just a tiny bit of shaking left when there are just few tabs
> opened. When tabs start to overflow (scroll arrows appear) it smooths
> out completely, or almost - when I switch fast between tabs it still
> isn't perfect, but I guess that's the limit.

Animating 'min-width' and 'max-width' transform for the same
duration appears to fix pretty much all of it.

--
Stanimir