629880 - Custom tab sizes in UserChrome.css breaks the tab bar

Status: UNCONFIRMED

(Firefox :: General, defect)

Description

[monurta]

User-Agent:       Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b10) Gecko/20100101 Firefox/4.0b10
Build Identifier: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b10) Gecko/20100101 Firefox/4.0b10

When setting custom tab sizes in UserChrome.css using the following:
.tabbrowser-tab:not([pinned]) {
  max-width: 250px !important; 
  min-width: 40px !important;
}
The tab bar no longer functions correctly. Closing a tab using any method (middle click, ctrl+f4) usually results in the tab name disappearing form the tab bar, but the tab itself is still present and active (e.g. Flash videos continue to play), and the "new tab" button positions itself at the end of all the tabs (visible + invisible).
Dragging from a tab location shows the window which used to be open, but does not open the tab in a new window.
The tab location also still results in a context menu which appears when a tab exists, even though the tab cannot be accessed or modified in any way.

Reproducible: Always

Steps to Reproduce:
1. Modify Userchrome.css with the code
.tabbrowser-tab:not([pinned]) {
  max-width: 250px !important; 
  min-width: 40px !important;
}
2. Open multiple tabs, and then close some.
3. Problem has now occurred.
Actual Results:  
The tabs which get closed do not actually close, but exist as "ghosts" in the background which cannot be accessed, but continue to stay open and mess with the tab bar tab "real" tab positioning.

Expected Results:  
The software should have properly closed the tabs and reset the new tab button position.

Comment 1

[jerveyc]

Confirmed on XP SP3 with FF 4.0, FF 4 RC 2, and FF 4 RC 1.

Reproducible:	Always

Steps to Reproduce:
1.	Modify UserChrome.css
     UserChrome.css contents:
      .tabbrowser-tab:not([pinned]) {
       max-width: 250px !important;
       min-width: 35px !important;
     }
2.	Open FF, set browser width very narrow so it only takes 5 or 6 tabs before tabs have to have their size adjusted.
3.	Close one of the middle tabs, creates a gap in the tab list rather than having the remaining tabs re sized and repositioned. There is a context menu associated with the "gap" as described in the report. Selecting "Move to new window" from the gap context menu opens a browser window with a new tab.
4.	Close all but one tab. When closing the last table browser reports multiple tabs open even though only one is shown in the tab bar and only one shown in the tabs list.


Mozilla/5.0 (Windows NT 5.1; rv:2.0) Gecko/20100101 Firefox/4.0
about:buildconfig
Source
Built from http://hg.mozilla.org/releases/mozilla-2.0/rev/6be9e31d01b4
Build platform
target
i686-pc-mingw32

Comment 2

[tallus]

Attachment: screenshot showing tab displayed but hidden in tab list

Comment 3

[tallus]

Attachment: screen showing incorrect new tab placement

Comment 4

[tallus]

Also showing on Linux Build (4.0.1)

Comment 5

[tallus]

Specifically it is setting max-width that causes this behaviour. Using 

UserChrome.css contents:
      .tabbrowser-tab:not([pinned]) {
       min-width: 40px !important;
     }

does not cause these problems.

Comment 6

[Max Arnold]

Had the same issue too, but solved it with browser.tabs.animate = False

Comment 7

[Graham Perrin]

Please review this in the contexts of: 

- Firefox ESR 52.5.0
- Firefox 57.0

– thanks.

Comment 8

[yeahokplease]

Yes, an 8 year old UI bug. That is ludicrous. Safari has no issues with using as much space as it wants for it's tabs.

Comment 9

[Keith Hizal]

(In reply to yeahokplease from comment #8)
> Yes, an 8 year old UI bug. That is ludicrous. Safari has no issues with
> using as much space as it wants for it's tabs.

UserChrome.css is technically unsupported in Quantum.