1268934 - Reducing tab height causes a gap above tabs

Status: VERIFIED INVALID

(Firefox :: Theme, defect)

Description

[Sergio]

Attachment: output.webm

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:37.0) Gecko/20100101 Firefox/37.0
Build ID: 20160429004052

Steps to reproduce:

@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

:root {
    --space-above-tabbar: 0 !important;
}
#TabsToolbar, #tabbrowser-tabs {
  height: 24px !important; min-height: 24px !important;
  background: grey !important;
}


Actual results:

As soon as you move or maximize / restore or resize the window a gap appears above the tabs.

Comment 1

[Sergio]

As i said reducing tab height makes a gap above tabs appear (see video). 

To modify tab height you can use userChrome.css, stylish, thin tabs, classic theme restorer... changing the color to a darker one should make easier to see the problem, the code provided above is a good example.

This wasn't happening before so i tried to investigate the possible causes and found this:
https://bugzilla.mozilla.org/show_bug.cgi?id=1256731

I am quite sure this "fix" is causing the problem.

Comment 2

[:Gijs (he/him)]

Bugs that only reproduce with custom CSS are not bugs in Firefox, so resolving this as invalid.

In order to fix your issue, you'll need to make sure the titlebar's content height is no bigger than that of the tabs, because you reduced the size of the tabs. The result after the resize actually looks correct to me in that the titlebar buttons are otherwise half-covered - resizing the titlebar buttons may be enough to accomplish what you want, or you may need to resize the titlebar as well;

If you want to change the background color, change the background color of the titlebar as well.

Dealing with Fitts' law issues with the tabs in maximized windows in circumstances similar to this one is bug 1257792.

Comment 3

[Sergio]

(In reply to :Gijs Kruitbosch from comment #2)
> Bugs that only reproduce with custom CSS are not bugs in Firefox, so
> resolving this as invalid.
> 
> In order to fix your issue, you'll need to make sure the titlebar's content
> height is no bigger than that of the tabs, because you reduced the size of
> the tabs. The result after the resize actually looks correct to me in that
> the titlebar buttons are otherwise half-covered - resizing the titlebar
> buttons may be enough to accomplish what you want, or you may need to resize
> the titlebar as well;
> 
> If you want to change the background color, change the background color of
> the titlebar as well.
> 
> Dealing with Fitts' law issues with the tabs in maximized windows in
> circumstances similar to this one is bug 1257792.

Worked fine before and broke after this bug was fixed https://bugzilla.mozilla.org/show_bug.cgi?id=1256731

Now you can even remove the titlebar's content buttons and all and it keeps creating a gap.

Comment 4

[Sergio]

Attachment: No content.PNG

No titlebar content no buttons, still gap, works fine before (and still works on stable)

Comment 5

[Sergio]

Attachment: stable.PNG

Stable

Comment 6

[Sergio]

Attachment: Developer edition (aka aurora)

Comment 7

[:Gijs (he/him)]

(In reply to Sergio from comment #3)
> Worked fine before and broke after this bug was fixed
> https://bugzilla.mozilla.org/show_bug.cgi?id=1256731

Lots of custom CSS might break when we fix bugs. That's the nature of hacking on a product in ways that aren't supported.

> Now you can even remove the titlebar's content buttons and all and it keeps
> creating a gap.

Screenshots don't help. The only thing that would be useful here would be the CSS that you're using.

In any case, as I said before, there is nothing about this configuration that is supported, and we won't be changing Firefox to accommodate such a configuration. Your best bet is to -moz-appearance: none !important all the relevant titlebar elements and ensure they have as much or less height than the tabs toolbar.

Comment 8

[Sergio]

The css is in the 1st comment and in the screenshots.

Comment 9

[:Gijs (he/him)]

(In reply to Sergio from comment #8)
> The css is in the 1st comment and in the screenshots.

... but not the additional CSS I have since suggested.

Comment 10

[Sergio]

JFYI this erratic behavior seems to be fixed on 2017-06-17 nightly.

Comment 11

[Sergio]

(In reply to Sergio from comment #10)
> JFYI this erratic behavior seems to be fixed on 2017-06-17 nightly.

false alarm it's just a little better now but still broken.