issue62: Tab bar layout quirks

Priority: bug Status: chatting
Files
File name Uploaded Type Edit Remove
problem.ogv yacc, 2008-12-16.13:34:10 video/ogg
Messages
msg84 (view) Author: nicktastic Date: 2008-10-06.19:57:13
The tab bar will occasionally 'wiggle' or 'flicker' when the arrow buttons are displayed. It appears that
the arrow buttons rapidly appear and disappear, causing all tabs to resize, causing conkeror to dominate
the CPU. My guess is there is some quirk in the tab bar's css, or a bug in xulrunner. The tab bar hooks
appear to be behaving themselves.

Also, over time tab size will be come disproportionate; i.e. some tabs will be very small while others
will be very large.
msg103 (view) Author: jbms Date: 2008-10-15.01:16:03
I suspect the issue is with the CSS.  Firefox doesn't do anything terribly different, but somehow it
doesn't have this problem.
msg125 (view) Author: skorpan Date: 2008-11-25.22:59:46
I'm fairly sure the cause of the flickering is the follwing rule in content/conkeror.css:

#tab-bar {
    -moz-box-pack: end;
}

I tried removing it and then opened 20 tabs successfully without any flickering at all.
msg128 (view) Author: skorpan Date: 2008-11-26.14:06:59
Also, I'm fairly sure that the tab resizing only occurs when the tab bar is full. This resizing is
probably intended behavior, trying to show as much of each tab title as possible.
msg135 (view) Author: retroj Date: 2008-12-07.02:07:23
What about replacing tab-bar.js with new-tabs.js?
msg141 (view) Author: areinwarth Date: 2008-12-08.21:17:06
Correct me if I am wrong, but until now the existing tab-bar seems to be superior from a users point of view:

- it displays the favicon,
- marks the active tab and
- shortens the tab's name. 

Switching over to new-tabs.js would feel like a downgrade to me considering user experience.
msg144 (view) Author: retroj Date: 2008-12-09.01:34:00
new-tabs doesn't do the favicon or the close button, but with css you can get
active-tab and name-shortening.  it does have buffer-number.  perhaps the tab
format could be user-configured somehow to accomodate favicons and close
buttons.

I put a note about styling new-tabs at http://conkeror.org/StylingChrome

It could use some minimal default css.  (though register_user_stylesheet would
not be the right way to provide such default style, because cascading order is not
guaranteed with that method)
msg145 (view) Author: areinwarth Date: 2008-12-09.15:46:09
Out of curiosity I did the switch towards new-tabs.js and used your css from the wiki. 

Indeed the tab-bar does not flicker anymore.

The numbered tabs are pretty user-friendly, especially when used together with the tip "Switch to buffers
1-10 using number keys 1 through 0" from http://www.conkeror.org/Tips. (I made C-(1 to 0) switch to
buffers 11 to 20, as I usually open more than 10 buffers, but wouldn't propose something like that as a
default binding.)

Although I still miss the favicon, I don't intend to switch back.
msg156 (view) Author: yacc Date: 2008-12-16.13:34:10
I think I'm hitting this too, with conkeror taking 60-70% CPU, and the tab bar flickering. Interestingly,
adding additional tabs stabelizes it again.

Andreas
msg199 (view) Author: skorpan Date: 2008-12-24.02:35:01
I think I know what's causing this problem but unfortunately do not know a nice way to solve it...

It's probably caused by something like this:
When the tab bar starts getting filled up to the point where it *almost* fits the top region, but still
doesn't, the tabs resize to fit it. At the same time the arrowscrollbox element kicks in and starts
showing those arrows at the right and left hand sides of the bar. These two actions collide, with the
tabs resizing and the arrows displaying/hiding, causing infinite flickering until the user does something
about it, such as e.g. closing a tab or opening more tabs.

As I said, I don't know any specific solution to this problem without having it go thorough testing as
the bug doesn't always reproduce easily. It could be the CSS, it could be the combination of the two
types of elements and their normal behavior. Either way, I think we're probably better off if we migrate
from tab-bar.js to new-tabs.js as we have some big plans for the latter, with high customizability, etc.
After all, new-tabs.js was based on tab-bar.js...
msg256 (view) Author: jbms Date: 2009-01-08.06:45:34
I haven't looked at new-tabs.js, but as far as I understand, it is designed to be more flexible, whereas
tab-bar.js was something I just quickly put together to appease requests for a tab bar (and I don't use
it myself).  Is there any difference in the basic CSS/DOM layout stuff between the two that is the reason
for the flickering being fixed, though?  It would be nice to understand exactly what is causing the
flickering and how the flickering is avoided (so that someone playing with the CSS rules later doesn't
inadvertently cause flickering), but I suppose as long as it doesn't flicker, that should be good enough.
msg258 (view) Author: skorpan Date: 2009-01-09.06:24:01
The CSS properties we should probably look into are (as far as I can see) -moz-box-pack, -moz-box-flex
and -moz-appearance.
History
Date User Action Args
2009-01-09 06:24:01skorpansetmessages: + msg258
2009-01-08 06:45:34jbmssetmessages: + msg256
2008-12-24 02:35:01skorpansetmessages: + msg199
2008-12-16 13:34:10yaccsetfiles: + problem.ogv
messages: + msg156
2008-12-09 15:46:09areinwarthsetmessages: + msg145
2008-12-09 01:34:00retrojsetmessages: + msg144
2008-12-08 21:17:06areinwarthsetmessages: + msg141
2008-12-07 02:07:23retrojsetmessages: + msg135
2008-11-26 14:06:59skorpansetmessages: + msg128
2008-11-25 22:59:46skorpansetmessages: + msg125
2008-10-15 01:16:03jbmssetstatus: unread -> chatting
messages: + msg103
2008-10-06 19:57:13nicktasticcreate